zsh和oh-my-zsh

1
2

sudo apt install zsh
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

设置terminal的shell环境默认为zsh，输入以下命令

1

chsh -s /bin/zsh

这条命令的 ` 是键盘tab上面的那个 ,接下来重启终端

zsh颜色主题和终端颜色主题 (Color Theme)

要配置两个部分：zsh主题（zsh theme）和终端的颜色主题（Color Theme）

由于使用了oh-my-zsh，修改zsh的主题很容易，只要编辑~/.zshrc文件，找到ZSH_THEME一行，改为agnoster即可

但是Windows默认终端的Color Theme改起来比较费劲，需要使用一个叫做colortool的工具。他是微软自带的一个修改终端配色方案的工具
首先在这里 下载

下载colortool.zip并解压后，进入文件夹，按住shift并点击右键选择在此处打开Powershell窗口

在其中输入

1

.\colortool.exe -d solarized_dark

回车后，关闭这个新打开的Powershell窗口，回到之前的WSL窗口，输入如下命令以使zsh配置生效:

1

source ~/.zshrc

cocos_toast_component

代码地址：https://github.com/akaziki/cocos_toast_component

一个简单的 tost 组件，用法：

1
2

var Toast = reqire('Toast.js')
Toast(text,{[gravity],[duration],[bg_color]})

• text:要显示的字符串
• gravity(可选):位置，String 类型，可选值(‘CENTER’,’TOP’,’BOTTOM’),默认为’CENTER’
• duration(可选):时间，Number 类型，单位为秒，默认 1s
• bg_color(可选):颜色，cc.color 类型，默认 cc.color(102, 102, 102, 200)

我们编写js代码时经常遇到复杂逻辑判断的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，越来越看不懂，本文旨在书写更为优雅的js判断。

常见写法

if/else

先看一段代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/**
 * 按钮点击事件
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
 */
const onButtonClick = (status)=>{
  if(status == 1){
    sendLog('processing')
    jumpTo('IndexPage')
  }else if(status == 2){
    sendLog('fail')
    jumpTo('FailPage')
  }else if(status == 3){
    sendLog('fail')
    jumpTo('FailPage')
  }else if(status == 4){
    sendLog('success')
    jumpTo('SuccessPage')
  }else if(status == 5){
    sendLog('cancel')
    jumpTo('CancelPage')
  }else {
    sendLog('other')
    jumpTo('Index')
  }
}

通过代码可以看到这个按钮的点击逻辑：根据不同活动状态做两件事情，发送日志埋点和跳转到对应页面，下面是这段代码的switch改写方案

switch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/**
 * 按钮点击事件
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
 */
const onButtonClick = (status)=>{
  switch (status){
    case 1:
      sendLog('processing')
      jumpTo('IndexPage')
      break
    case 2:
    case 3:
      sendLog('fail')
      jumpTo('FailPage')
      break  
    case 4:
      sendLog('success')
      jumpTo('SuccessPage')
      break
    case 5:
      sendLog('cancel')
      jumpTo('CancelPage')
      break
    default:
      sendLog('other')
      jumpTo('Index')
      break
  }
}

这种写法看起来比if/else清晰

git工作流程

Workspace：工作区

程序员进行开发改动的地方，是你当前看到的，也是最新的。

平常我们开发就是拷贝远程仓库中的一个分支，基于该分支进行开发。在开发过程中就是对工作区的操作。

Index / Stage：暂存区

.git目录下的index文件, 暂存区会记录git add添加文件的相关信息(文件名、大小、timestamp…)，不保存文件实体, 通过id指向每个文件实体。可以使用git status查看暂存区的状态。暂存区标记了你当前工作区中，哪些内容是被git管理的。

当你完成某个需求或功能后需要提交到远程仓库，那么第一步就是通过git add先提交到暂存区，被git管理。

Repository：仓库区（或本地仓库）

保存了对象被提交 过的各个版本，比起工作区和暂存区的内容，它要更旧一些。

git commit后同步index的目录树到本地仓库，方便从下一步通过git push同步本地仓库与远程仓库的同步。

Remote：远程仓库

远程仓库的内容可能被分布在多个地点的处于协作关系的本地仓库修改，因此它可能与本地仓库同步，也可能不同步，但是它的内容是最旧的。

小结

• 任何对象都是在工作区中诞生和被修改；
• 任何修改都是从进入index区才开始被版本控制；
• 只有把修改提交到本地仓库，该修改才能在仓库中留下痕迹；
• 与协作者分享本地的修改，可以把它们push到远程仓库来共享。

下面这幅图更加直接阐述了四个区域之间的关系，可能有些命令不太清楚，没关系，下部分会详细介绍。

常用Git命令

HEAD

在掌握具体命令前，先理解下HEAD。

HEAD，它始终指向当前所处分支的最新的提交点。你所处的分支变化了，或者产生了新的提交点，HEAD就会跟着改变。

add

add相关命令很简单，主要实现将工作区修改的内容提交到暂存区，交由git管理。

commit

commit相关命令也很简单，主要实现将暂存区的内容提交到本地仓库，并使得当前分支的HEAD向后移动一个提交点。

branch

涉及到协作，自然会涉及到分支，关于分支，大概有展示分支，切换分支，创建分支，删除分支这四种操作。

关于分支的操作虽然比较多，但都比较简单好记。

merge

merge命令把不同的分支合并起来。如上图，在实际开放中，我们可能从master分支中切出一个分支，然后进行开发完成需求，中间经过R3,R4,R5的commit记录，最后开发完成需要合入master中，这便用到了merge。

一般在merge之后，会出现conflict，需要针对冲突情况，手动解除冲突。主要是因为两个用户修改了同一文件的同一块区域。如下图所示，需要手动解除。

rebase

rebase又称为衍合，是合并的另外一种选择。

在开始阶段，我们处于new分支上，执行git rebase dev，那么new分支上新的commit都在master分支上重演一遍，最后checkout切换回到new分支。这一点与merge是一样的，合并前后所处的分支并没有改变。git rebase dev，通俗的解释就是new分支想站在dev的肩膀上继续下去。rebase也需要手动解决冲突。

rebase与merge的区别

现在我们有这样的两个分支,test和master，提交如下：

1
2
3

      D---E test
     /
A---B---C---F master复制代码

在master执行git merge test,然后会得到如下结果：

1
2
3

      D--------E
     /          /
A---B---C---F----G   test, master复制代码

在master执行git rebase test，然后得到如下结果：

1

A---B---D---E---C'---F'   test, master复制代码

可以看到，merge操作会生成一个新的节点，之前的提交分开显示。而rebase操作不会生成新的节点，是将两个分支融合成一个线性的提交。

如果你想要一个干净的，没有merge commit的线性历史树，那么你应该选择git rebase
如果你想保留完整的历史记录，并且想要避免重写commit history的风险，你应该选择使用git merge

reset

reset命令把当前分支指向另一个位置，并且相应的变动工作区和暂存区。

revert

git revert用一个新提交来消除一个历史提交所做的任何修改。

revert与reset的区别

• git revert是用一次新的commit来回滚之前的commit，git reset是直接删除指定的commit。
• 在回滚这一操作上看，效果差不多。但是在日后继续merge以前的老版本时有区别。因为git revert是用一次逆向的commit“中和”之前的提交，因此日后合并老的branch时，导致这部分改变不会再次出现，减少冲突。但是git reset是之间把某些commit在某个branch上删除，因而和老的branch再次merge时，这些被回滚的commit应该还会被引入，产生很多冲突。关于这一点，不太理解的可以看这篇文章。
• git reset 是把HEAD向后移动了一下，而git revert是HEAD继续前进，只是新的commit的内容和要revert的内容正好相反，能够抵消要被revert的内容。

push

上传本地仓库分支到远程仓库分支，实现同步。

其他命令

以上就是关于Git的一些常用命令及详细阐述，相信能对Git有一个初步的认识。

升级vue2.0

为什么要升级Vue2.0呢？个人觉得以下改变比较吸引人：

• 更轻更快；
• 加入虚拟DOM；
• 更清晰合理的生命周期架构；
• 更简洁迷你的API；
• 更符合未来技术规范的设计；
• 解锁JSX和render函数；

• ······

• ······

vue-migration-helper

第一步是使用官方的升级助手vue-migration-helper检测项目代码中可能需要升级的地方。我的小项目代码中共检测出 40 个地方可能需要修改，具体会在下面介绍。

render函数

关于render函数，官方是这样说的：

大多数情况下使用基于 template 构件组件都是推荐的，但是 render()函数可以让你在组件中运用更强大的JS。

render() 接收一个叫 createElement 的函数作为形参，它的作用是创建虚拟DOM节点。createElement说明如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 返回虚拟DOM对象
createElement(
  // {String | Object | Function}
  // 必选项，HTML节点名，自定义组件或者返回这些的函数
  'div',
  // {Object}
  // 一个对象，描述了用在template中的属性
  {
    // (比如props)
  },
  // {String | Array}
  // 子节点集合，可以是字符串或者是另一个createElement函数
  [
    createElement('h1', 'hello world'),
    createElement(MyComponent, {
      props: {
        someProp: 'foo'
      }
    }),
    'bar'
  ]
)