开发工具

1. git

1.1 Git的一些常用命令

参考答案：

1、远程仓库相关命令

检出仓库：` git remote -v添加远程仓库： git remote rm [name]修改远程仓库： git pull [remoteName] [localBranchName]推送远程仓库：$ git push [remoteName] [localBranchName]`

如果想把本地的某个分支test提交到远程仓库，并作为远程仓库的master分支，或者作为另外一个名叫test的分支，如下：

$git push origin test:master // 提交本地test分支作为远程的master分支
$git push origin test:test // 提交本地test分支作为远程的test分支

2、分支(branch)操作相关命令

查看本地分支：$ git branch

查看远程分支：$ git branch -r

创建本地分支：$ git branch [name] ----注意新分支创建后不会自动切换为当前分支

切换分支：$ git checkout [name]

创建新分支并立即切换到新分支：$ git checkout -b [name]

删除分支：$ git branch -d [name] ---- -d选项只能删除已经参与了合并的分支，对于未有合并的分支是无法删除的。如果想强制删除一个分支，可以使用-D选项

合并分支：$ git merge [name] ----将名称为[name]的分支与当前分支合并

创建远程分支(本地分支push到远程)：$ git push origin [name]

删除远程分支：` git push origin :[name]`

创建空的分支：(执行命令之前记得先提交你当前分支的修改，否则会被强制删干净没得后悔)

$git symbolic-ref HEAD refs/heads/[name]

$rm .git/index

$git clean -fdx

3、版本(tag)操作相关命令

查看版本：$ git tag

创建版本：$ git tag [name]

删除版本：$ git tag -d [name]

查看远程版本：$ git tag -r

创建远程版本(本地版本push到远程)：$ git push origin [name]

删除远程版本：$ git push origin :refs/tags/[name]

合并远程仓库的tag到本地：$ git pull origin --tags

上传本地tag到远程仓库：$ git push origin --tags

创建带注释的tag：$ git tag -a [name] -m 'yourMessage'

4、子模块(submodule)相关操作命令

添加子模块：$ git submodule add [url] [path]

如：$git submodule add [git://github.com/soberh/ui-libs.git](https://link.jianshu.com?t=git://github.com/soberh/ui-libs.git) src/main/webapp/ui-libs

初始化子模块：$ git submodule init ----只在首次检出仓库时运行一次就行

更新子模块：$ git submodule update----每次更新或切换分支后都需要运行一下

删除子模块：（分4步走哦）

1. $ git rm --cached [path]
2. 编辑“.gitmodules”文件，将子模块的相关配置节点删除掉
3. 编辑“ .git/config”文件，将子模块的相关配置节点删除掉
4. 手动删除子模块残留的目录

5、忽略一些文件、文件夹不提交

在仓库根目录下创建名称为“.gitignore”的文件，写入不需要的文件夹名或文件，每个元素占一行即可，如

target

bin

*.db

附： Git 常用命令速查

git branch 查看本地所有分支

git status 查看当前状态

git commit 提交

git branch -a查看所有的分支

git branch -r 查看远程所有分支

git commit -am "init" 提交并且加注释

git remote add origin git@192.168.1.119:ndshow

git push origin master 将文件给推到服务器上

git remote show origin显示远程库origin里的资源

git push origin master:develop

git push origin master:hb-dev 将本地库与服务器上的库进行关联

git checkout --track origin/dev 切换到远程dev分支

git branch -D master develop 删除本地库develop

git checkout -b dev 建立一个新的本地分支dev

git merge origin/dev 将分支dev与当前分支进行合并

git checkout dev切换到本地dev分支

git remote show查看远程库

git add .

git rm文件名(包括路径) 从git中删除指定文件

git clone [git://github.com/schacon/grit.git](https://link.jianshu.com?t=git://github.com/schacon/grit.git)从服务器上将代码给拉下来

git config --list看所有用户

git ls-files 看已经被提交的

git rm [file name] 删除一个文件

git commit -a提交当前repos的所有的改变

git add [file name] 添加一个文件到git index

git commit -v当你用－v参数的时候可以看commit的差异

git commit -m "This is the message describing the commit" 添加commit信息

git commit -a -a是代表add，把所有的change加到git index里然后再commit

git commit -a -v 一般提交命令

git log 看你commit的日志

git diff 查看尚未暂存的更新

git rm a.a 移除文件(从暂存区和工作区中删除)

git rm --cached a.a移除文件(只从暂存区中删除)

git commit -m "remove" 移除文件(从Git中删除)

git rm -f a.a 强行移除修改后文件(从暂存区和工作区中删除)

git diff --cached 或 $ git diff --staged 查看尚未提交的更新

git stash push 将文件给push到一个临时空间中

git stash pop 将文件从临时空间pop下来

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

git remote add origin [git@github.com](https://link.jianshu.com?t=mailto:git@github.com):username/Hello-World.git

git push origin master 将本地项目给提交到服务器中

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

git pull本地与服务器端同步

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

git push (远程仓库名) (分支名) 将本地分支推送到服务器上去。

git push origin server fix:awesome branch

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

git fetch相当于是从远程获取最新版本到本地，不会自动merge

git commit -a -m "log_message"(-a是提交所有改动，-m是加入log信息) 本地修改同步至服务器端 ：

git branch branch_0.1 master 从主分支master创建branch_0.1分支

git branch -m branch_0.1 branch_1.0将branch_0.1重命名为branch_1.0

git checkout branch_1.0/master 切换到branch_1.0/master分支

du -hs

git branch 删除远程branch

git push origin:branch_remote_name

git branch -r -d branch_remote_name

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

初始化版本库，并提交到远程服务器端

mkdir WebApp

cd WebApp

git init本地初始化

touch README

git add README添加文件

git commit -m 'first commit'

git remote add origin [git@github.com](https://link.jianshu.com?t=mailto:git@github.com):daixu/WebApp.git增加一个远程服务器端

1.2 多人开发如何维护代码、版本管理

参考答案：

版本控制系统

版本控制是指在软件开发过程中对各种程序代码、配置文件及说明文档等文件变更的管理，版本控制系统能够随着时间的推进记录一系列文件的变化，方便以后随时回退到某个版本。版本控制系统分为三大类：

本地版本控制系统

平时开发不使用版本控制系统的情况下，我们习惯用复制整个项目目录的方式来保存不同的版本，或许还会改名加上备份时间以示区别。这种方式需要对项目频繁进行复制，最终整个工作区会比较臃肿混乱且时间一长很难区分项目之间的差异。

为了解决这个问题，人们开发了本地版本控制系统，大多都是采用某种简单的数据库来记录文件的历次更新差异。最流行的是RCS，它的工作原理是在硬盘上保存补丁集（补丁指文件修订前后的变化），通过应用所有的补丁，可以重新计算出各个版本的文件内容。

本地版本控制系统一定程度上解决了手动复制粘贴代码的问题，但无法解决多人协作的问题。

集中式版本控制系统

集中式版本控制系统的出现是为了解决不同系统上的开发者协同开发，即多人协作的问题，主要有 CVS 和 SVN。集中式版本控制系统有一个单一的集中管理的中央服务器，保存所有文件的修订版本，由管理员管理和控制开发人员的权限，而协同工作的人们通过客户端连到中央服务器，从服务器上拉取最新的代码，在本地开发，开发完成再提交到中央服务器。

集中式版本控制系统有许多优点：

• 操作比较简单，只需要拉取代码，开发，提交代码。
• 基本解决多人协作问题，每个人都可以从服务器拉取最新代码了解伙伴的进度。
• 同时管理员可以轻松控制各开发者的权限。
• 只需要维护中央服务器上的数据库即可。

缺点也很明显：

• 本地没有全套代码，没有版本信息，提交更新都需联网跟服务器进行交互，对网络要求较高。
• 集中式的通病：风险较大，服务器一旦宕机，所有人无法工作，服务器磁盘一旦损坏，如果没有备份将丢失所有数据。

分布式版本控制系统

分布式版本控制系统很好地解决了集中式版本控制系统的缺点。首先，在分布式版本控制系统中，系统保存的不是文件变化的差量，而是文件的快照，即把文件的整体复制下来保存，其次，最重要的是分布式版本控制系统是去中心化的，当你从中央服务器拉取下来代码时，拉取的是一个完整的版本库，不仅仅是一份生硬的代码，还有历史记录，提交记录等版本信息，这样即使某一台机器宕机也能找到文件的完整备份。

Git

Git 是 Linux 发明者 Linus 开发的一款分布式版本控制系统，是目前最为流行和软件开发着必须掌握的工具。

Git 基础

Git 是一个分布式版本控制系统，保存的是文件的完整快照，而不是差异变换或者文件补丁。保存每一次变化的完整内容。

Git 每一次提交都是对项目文件的一个完整拷贝，因此你可以完全恢复到以前的任何一个提交。Git 每个版本只会完整拷贝发生变化的文件，对于没有变化的文件，Git 只会保存一个指向上一个版本的文件的指针，即对一个特定版本的文件，Git 只会保存一个副本，但可以有多个指向该文件的指针。

Git 基本命令

如上图，使用 Git 的基本工作流程就是：

1. 从远程仓库将项目clone到本地；
2. 在本地工作区进行开发：增加、删除或者修改文件；
3. 将更改的文件add到暂存区域；
4. 将暂存区的更新commit到本地仓库；
5. 将本地仓库push到服务器。

Git 工程在本地有三个工作区域：

• 工作区：进行日常开发的区域。
• 暂存区域：运行 git add 命令后文件保存的区域，也是进行 commit 的区域。
• 本地仓库：本地版本库，记录工程的提交历史，意味着数据永远不会丢失。

对应的，文件有四种状态：

• 未跟踪的（untracked）：表示在工作区新建了某个文件，还没有add。
• 已修改（modofied）：表示在工作区中修改了某个文件，还没有 add。
• 已暂存（staged）：表示把已修改的文件已add到暂存区域。
• 已提交（commit）：表示文件已经commit到本地仓库保存起来了。

Git 分支

几乎所有的版本控制系统都以分支的方式进行操作，分支是独立于项目主线的一条支线，我们可以在不影响主线代码的情况下，在分支下进行工作。

Git 初始化仓库时，默认创建的分支名是master，Git有一个分支指针（HEAD），始终指向当前分支。

Git 分支相关的命令如下：

git branch ［branch-name］ //创建分支
git branch [branch-name] //[commit－head] 创建基于head提交的分支
git branch  //列出分支
git branch -r //列出远程分支
git branch -a //列出所有分支
git checkout -b [branch-name] //新建一个本地分支，并切换到该分支
git checkout -b [branch-name] origin/[branch-name] //新建一个基于远程分支的本地分支，并切换到该分支

git checkout [branch-name] //切换分支
git branch -d [branch-name] //删除分支
git branch -dr [remote/branch-name] //删除远程分支

git fetch origin //下载远程仓库代码的变动

Git工作流

如上图，首先，项目存在两个长期分支：

• 主分支（maste）r：专门用于部署以及负责线上代码回滚的分支，是最为稳定的一个分支，master的代码等于或者落后于develop的代码。
• 开发分支（develop）：专门存放经过测试之后，保证代码无bug的代码分支。开发的时候主要依托于develop分支开发，基于develop分支新建分支，经过严格测试之后，才能合并到develop中，保证develop代码的稳定性（也就是日常开发中不要轻易修改develop分支代码）。

开发过程中会从develop分支中衍生出临时开发分支：

• 项目开发分支或功能分支（feature）：此分支特点是周期长、需要团队协作、代码量大。工作方式是需要创建本地以及远程feature分支，代码基于develop分支代码，经过开发、测试之后，最终合并到develop分支上。当项目上线之后，分支会保留一段时间，直至最终删除。
• 紧急bug、其他问题修复分支（hotfix）：此分支特点是修改时间短、优先级高、代码量稍小、改完之后急需测试、上线。此分支代码也是基于develop。此分支会是团队协作或者单人、团队协作工作方式会类似feature分支，单人只需构建本地分支即可满足开发要求，当修复上线一段时间后，即可删除。
• 预发布分支（release）：此分支是项目开发完成，经过测试没有问题之后，从develop分支分出用于项目的预发布，预发布一段时间没有问题之后合并到master分支进行正式发布。

1.3 git冲突解决，版本回退

参考答案：

1. 版本回退

   1.1当已经提交修改，但是想回到修改前的样子时，可使用版本回退
   ` git reset --hard HEAD^HEAD is now at 1bc0043 Merge branch 'master' of put-me-down`

   1.2 找到想要的那个版本的版本号后进行回退
   $ git reset --hard f8dce4b（版本号）uHEAD is now at f8dce4b 完成成就界面设计及编码，根据数据内容显示功能实现

2. merge时出现冲突

3. 1合并分支语句

$ git merge 分支名

​ 2.2 在写合并分支语句之前把要合并的分支的内容pull下来，如将主分支pull下来

$ git pull origin master

• pull 会出现冲突，pull下来的版本比本地版本更新，可以用git status 看存在哪些冲突，打开文件进行修改，如果要保存原来版本，可在修改前用下列语句存储代码：

  1. 保存

  $ git stash save "...."

  2.可用下列语句恢复

  $ git stash apply 

• 和分支进行合并的时候(git merge 分支名)，会出现冲突，同样用git status进行查看冲突，或者运行代码看报错情况，对冲突进行修改。修改后要用git status 查看情况：
  

• 看提示，要将修改的代码add，add后不能git commit -m "..."，git push origin 分支名，这样会报错，提示存在未合并的文件，不可提交，按照git status 的提示，将需要add的文件都add ，
  

• 然后用git commit 提交，会进入vim 编辑器，写提交备注

  shift + c 键-- 进入编辑状态
  esc键 --退出编辑状态
  退出编辑状态后后“：+wq”退出编辑器

• 将冲突都解决，并提交后，程序试运行，看是否能跑，能跑再push
  

2.打包

2.1 打包，webpack和gulp的区别

参考答案：

Gulp：

​ Gulp是一个自动化构建工具，强调的是前端开发的流程，通过配置一系列的task，定义task处理的事物，然后定义执行顺序，来让Gulp执行task，从而构建前端项目的流程，说白了就是用来打包项目。

​ 不管做什么功能，都有一个统一的接口进行管理，必须去注册一个任务，然后去执行，这也是它的特点之一，即“任务化”。

WebPack：

​ WebPack是一个前端模块化方案，侧重模块打包，把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源，Gulp也可以配置seajs、requirejs甚至webpack的插件。

​ 它会分析你的项目结构，找到JS模块以及那些浏览器不能够直接运行的扩展语言（如：TypeScript等），然后将其转换和打包为合适的格式供浏览器使用。它最大的优点就是“模块化”（万物皆模块）。
相同点：

• 都可以对文件进行合并与压缩（JS、CSS）。

不同点：

• Gulp是构建工具，可以配合各种插件做css.压缩等，解放了双手，实现了自动化。
• Gulp严格上讲，它旨在规范前端开发流程，不包括模块化功能。
• WebPack是文件打包工具，可把各个项目的css.压缩文件等打包合并成一个或多个文件，主要就是应用于模块化操作。
• WebPack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，只是他附带的功能。
• WebPack整合了Gulp的优点，当我们想要一步一步来配置自己的环境时，那么gulp就可以满足我们的需要，但是如果我们想一下就配备大部分我们所需要的环境，那么此时可以选用WebPack，前提是写好package.json。
• gulp与webpack上是互补的，还是可替换的，取决于你项目的需求，它们可不存在冲突的关系哈。
• Gulp与WebPack可以组合起来使用，以便快速编译（依靠Gulp丰富的组件可以让JS与HTML实现联动，从而控制WebPack应用程序，达到高自动化）

2.2 webpack的打包流程

参考答案：

Webpack的运行流程是一个串行的过程，从启动到结束依次执行以下流程：

1. 初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler。
2. 编译：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理。
3. 输出：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统。

​ 如果只执行一次构建，以上阶段将会按照顺序各执行一次。但在开启监听模式下，流程将变为如下：

下面具体介绍一下 webpack的三个大阶段具体的小步。

​ 初始化阶段

​ 初始化阶段大致分为：

• 合并shell和配置文件文件的参数并且实例化Complier对象。
• 加载插件
• 处理入口

编译阶段

这里主要最重要的就是compilation过程，compilation 实际上就是调用相应的 loader 处理文件生成 chunks并对这些 chunks 做优化的过程。几个关键的事件（Compilation对象this.hooks中）：

输出阶段

2.3 webpack 有哪些阶段

参考答案：

1. webpack的准备阶段
2. modules和chunks的生成阶段
3. 文件生成阶段

3. 图

3.1 ECharts

参考答案：

ECharts

ECharts是百度开源的纯 Javascript 图表库，目前开源可以与highcharts相匹敌的一个图表库.支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

简单配置

1.Head内通过script引入ECharts3的js：2.为 ECharts 准备一个具备大小（宽高）的 DOM :
3.初始化echarts实例var myChart = echarts.init(document.getElementById('main'));
4.设置Option中参数，指定图表的配置项和数据
5.使用setoption生成图表显示图表：myChart.setOption(option);

图表名词

• line：折线图，堆积折线图，区域图，堆积区域图。
• bar：柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。
• scatter：散点图，气泡图。散点图至少需要横纵两个数据，更高维度数据加入时可以映射为颜色或大小，当映射到大小时则为气泡图
• k：K线图，蜡烛图。常用于展现股票交易数据。
• pie：饼图，圆环图。饼图支持两种（半径、面积）南丁格尔玫瑰图模式
• radar：雷达图，填充雷达图。高维度数据展现的常用图表。
• chord：和弦图。常用于展现关系数据，外层为圆环图，可体现数据占比关系，内层为各个扇形间相互连接的弦，可体现关系数据
• force ：力导布局图。常用于展现复杂关系网络聚类布局。
• map：地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用，如室内地图、运动场、物件构造等。
• gauge：仪表盘。用于展现关键指标数据，常见于BI类系统。
• funnel：漏斗图。用于展现数据经过筛选、过滤等流程处理后发生的数据变化，常见于BI类系统。
• evnetRiver：事件河流图。常用于展示具有时间属性的多个事件，以及事件随时间的演化。
• treemap：矩形式树状结构图，简称：矩形树图。用于展示树形数据结构，优势是能最大限度展示节点的尺寸特征。
• venn：韦恩图。用于展示集合以及它们的交集。

折线图的折线平滑显示

series: [
    smooth: true,
]

设置图例的形状

修改图例的icon，自带的有'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

legend : { //=========圆表控件
                    show : true,
                    data : [ {
                        name : '负载',

                        icon : 'rect'

                    },
                   {
                        name : '用户名',
                        icon : 'roundRect'
                    } ]
                }

3.2 canvas

参考答案：

简介：

是H5新增的组件，就像一块幕布，一个可以使用脚本（通常为Javascript）在其中绘制图形的HTML元素，他可以用来制作各种图、表，或者一些动画，同时还可以实现动画、缩放、各种过滤和像素 转换等高级操作。

特点：

1. canvas 元素是html5的核心功能之一，使用 JavaScript 在网页上绘制图像。
2. 画布是一个矩形区域，您可以控制其每一像素。
3. 每次更改某个canvas元素，此canvas元素都需要整体重绘。
4. 无法只修改某个canvas元素的某一部份。
5. canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
6. canvas 元素本身没有绘图能力。