简书地址

一开始的需求是这样子的，我为了实现两个页面组件之间的数据传递，假设我有页面A，点击页面A上的某一个按钮之后，页面会自动跳转到页面B，同时我希望将页面A上的某一些参数携带过去给页面B。

==总结： 所以，如果想要用bus 来进行页面组件之间的数据传递，需要注意亮点，组件A$emit事件应在beforeDestory生命周期内。其次，组件B内的$on记得要销毁。==

JavaScript 运行机制详解：再谈Event Loop-阮一峰

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。

（2）主线程之外，还存在一个”任务队列”（task queue）。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件。

（3）一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

（4）主线程不断重复上面的第三步。

参考链接

travis-ci设置

打开travis-ci主页，选择右上角的 Sign in with Github, 使用你的 Github账号登录，进入你的accounts页面：

选择你要使用travis-ci构建的Github repository, 这里我开启的是： Java-http.github.io

点击进入setting，点击右下角的More options

, 做一些设置，如：只有存在.travis.yml文件时才会触发自动build。

travis-ci配置文件

travis-ci自动build依赖于.travis.yml文件，文件会配置你的语言环境，版本，branch信息，环境变量，以及before_install, install, script,after_success 之类的hook.

这里我先列出我的travis.yml文件内容，然后坐进一步介绍：

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

language: node_js
node_js: stable
branches:
  only:
  - develop
before_install:
- npm install -g hexo
- npm install -g hexo-cli
install:
- npm install
script:
- hexo clean
- hexo generate
after_success:
  - cd ./public
  - git init
  - git config --global user.name 'Java-http'
  - git config --global user.email 'Java_http@163.com'
  - git add .
  - git commit -m "generate static resources, triggerd by travis ci"
  - git push --force --quiet "https://Java-http.github.io:${REPO_TOKEN}@${GH_REF}" master:master
env:
  global:
    - GH_REF: github.com/Java-http/Java-http.github.io.git

REPO_TOKEN 需要github生成一个Personal access tokens，访问： https://github.com/settings/tokens/new ， 选择权限

勾选repo，然后将会生成一个token.

csdn

ios上只有用户交互触发的focus事件才会起效，而延时回调的focus是不会触发的，说得大佬粗点，你想在ios上focus事件起效就不能讲focus时间放在延时里面调用

博客园

所遇问题：

html：ng-model=“test”，

但是在controller里打印的$scope属性里面并未发现test，控制台打印test为undefined，页面上却可以正常输出来。

原因：

scope不一样?

解决方法：

在html里添加$parent

1

ng-model="$parent.test"

另一种方法：https://segmentfault.com/q/1010000003986262

CSDN博客

1.仅仅merge根属性

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

const defaultOpt = {
    title: {
        text: 'hello world',
        subtext: 'It\'s my world.'
    }
};

const opt = Object.assign({}, defaultOpt, {
    title: {
        subtext: 'Yes, your world.'
    }
});

console.log(opt);

// 预期结果
{
    title: {
        text: 'hello world',
        subtext: 'Yes, your world.'
    }
}
// 实际结果
{
    title: {
        subtext: 'Yes, your world.'
    }
}

很明显其实它直接覆盖了整个title，而不是覆盖subtext

2.除了根属性是深拷贝，其余都是浅拷贝

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
30
31

const defaultOpt = {
    title: {
        text: 'hello world',
        subtext: 'It\'s my world.'
    } 
};

const opt1 = Object.assign({}, defaultOpt);
const opt2 = Object.assign({}, defaultOpt);
opt2.title.subtext = 'Yes, your world.';

console.log('opt1:');
console.log(opt1);
console.log('opt2:');
console.log(opt2);

// 结果
opt1:
{
    title: {
        text: 'hello world',
        subtext: 'Yes, your world.'
    }
}
opt2:
{
    title: {
        text: 'hello world',
        subtext: 'Yes, your world.'
    }
}

上面结果发现两个配置变得一模一样，而其实我们并没有去更改opt1 的subtext ，只是改了opt2 的。

这说明一点：在title 这一层只是简单的浅拷贝 ，而没有继续深入的深拷贝。

总结

Object.assign() 只是一级属性复制，比浅拷贝多深拷贝了一层而已。
发现一个可以简单实现深拷贝的方法，当然，有一定限制，如下：

1

const obj1 = JSON.parse(JSON.stringify(obj));

思路就是将一个对象转成json字符串，然后又将字符串转回对象。

一、Jquery的扩展方法原型是:

1

extend(dest,src1,src2,src3...);

它的含义是将src1,src2,src3…合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：

1

var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。

这样就可以将src1,src2,src3…进行合并，然后将合并结果返回给newSrc了。如下例：

1

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

那么合并后的结果

1

result={name:"Jerry",age:21,sex:"Boy"}

也就是说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。

二、省略dest参数

上述的extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去，如：

1、$.extend(src)

该方法就是将src合并到jquery的全局对象中去，如：

1
2
3

$.extend({
hello:function(){alert('hello');}
});

就是将hello方法合并到jquery的全局对象中。

2、$.fn.extend(src)

==该方法将src合并到jquery的实例对象中去==，如:

1
2
3

$.fn.extend({
hello:function(){alert('hello');}
});

==就是将hello方法合并到jquery的实例对象中。==

下面例举几个常用的扩展实例：

1

$.extend({net:{}});

这是在jquery全局对象中扩展一个net命名空间。

1
2
3

$.extend($.net,{
hello:function(){alert('hello');}
})

这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。

三、Jquery的extend方法还有一个重载原型：

1

extend(boolean,dest,src1,src2,src3...)

==第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致==

语法格式

SCSS 是 Sass 的新语法格式，从外形上来判断他和 CSS 长得几乎是一模一样，代码都包裹在一对大括号里，并且==末尾结束处都有一个分号==。其文件名格式常常以“.scss”为扩展名。

1.嵌套输出方式 nested
2.展开输出方式 expanded
3.紧凑输出方式 compact
4.压缩输出方式 compressed

变量

Sass 的变量包括三个部分：
1.声明变量的符号“$”
2.变量名称
3.赋予变量的值

普通变量与默认变量

普通变量

定义之后可以在全局范围内使用。

1
2
3
4

$fontSize: 12px;
body{
    font-size:$fontSize;
}

编译后的css代码：

1
2
3

body{
    font-size:12px;
}

默认变量

sass 的默认变量仅需要在值后面加上 !default 即可。

1
2
3
4

$baseLineHeight:1.5 !default;
body{
    line-height: $baseLineHeight; 
}

编译后的css代码：

1
2
3

body{
    line-height:1.5;
}

sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量==之前==重新声明下变量即可。

1
2
3
4
5

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}

编译后的css代码：

1
2
3

body{
    line-height:2;
}

可以看出现在编译后的 line-height 为 2，而不是我们默认的 1.5。默认变量的价值在进行组件化开发的时候会非常有用。

局部变量和全局变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//SCSS
$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.block {
  color: $color;//调用全局变量
}
em {
  $color: red;//定义局部变量
  a {
    color: $color;//调用局部变量
  }
}
span {
  color: $color;//调用全局变量
}

css 的结果：

1
2
3
4
5
6
7
8
9
10

//CSS
.block {
  color: orange;
}
em a {
  color: red;
}
span {
  color: orange;
}

只有满足所有下述标准时方可创建新变量：
1.该值至少重复出现了两次；
2.该值至少可能会被更新一次；
3.该值所有的表现都与变量有关（非巧合）。

1.安装git

msysgit是Windows版的Git，从 https://git-for-windows.github.io 下载（网速慢的同学请移步国内镜像），然后按默认选项安装即可。

安装完成后，还需要最后一步设置，在命令行输入：

1
2

$ git config --global user.name "Your Name"
$ git config --global user.email "email@example.com"

2.创建版本库

初始化一个Git仓库，使用==git init==命令。

添加文件到Git仓库，分两步：

第一步，使用命令==git add ==，注意，可反复多次使用，添加多个文件；

第二步，使用命令==git commit==，完成。

3.比较差异

• 要随时掌握工作区的状态，使用==git status==命令。
• 如果git status告诉你有文件被修改过，用==git diff==可以查看修改内容。