常见问题解决方案

  1. 弹出数字键盘，当运用了正则 pattern 后，就不用关注 input 的类型了
1
2
3
4
5
<!-- 有"#" "*"符号输入 -->
<input type="tel">

<!-- 纯数字 -->
<input pattern="\d*">
  1. 调用系统功能
1
2
3
4
5
6
7
8
9
10
11
<!-- 发送短信 -->
<a href="sms:10086">发短信给: 10086</a>

<!-- 发送邮件 -->
<a href="mailto:839626987@qq.com">发邮件给：839626987@qq.com</a>

<!-- 选择照片或者拍摄照片 -->
<input type="file" accept="image/*">

<!-- 选择视频或者拍摄视频 -->
<input type="file" accept="video/*">
  1. 解决 active 伪类失效，给 body 注册一个空事件即可
1
<body ontouchstart></body>
  1. 忽略自动识别电话号码或邮箱
1
2
3
4
5
<!-- 忽略浏览器自动识别数字为电话号码 -->
<meta name="format-detection" content="telephone=no">

<!-- 忽略浏览器自动识别邮箱账号 -->
<meta name="format-detection" content="email=no">
  1. 解决 iOS 微信环境内，input 失焦后页面没有回弹，出现条件：1.页面高度过小；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
// 解决办法：在聚焦时，获取当前滚动条高度，然后失焦时，赋值之前获取的高度；
<template>
  <input type="text" @focus="focus" @blur="blur">
</template>

<script>
  export default {
    data() {
      return {
        scrollTop: 0
      }
    },

    methods: {
      focus() {
        this.scrollTop = document.scrollingElement.scrollTop;
      },

      blur() {
        document.scrollingElement.scrollTo(0, this.scrollTop);
      }
    }
  }
</script>
  1. 禁止浏览器默认行为（长按图片保存、长按选择文字、长按链接/手机号/邮箱时呼出菜单）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 禁止长按图片保存
img {
  -webkit-touch-callout: none;
  pointer-events: none; // 像微信浏览器还是无法禁止，加上这行样式即可
}

// 禁止长按选择文字
div {
  -webkit-user-select: none;
}

// 禁止长按呼出菜单
div {
  -webkit-touch-callout: none;
}
  1. IOS 设备中滑动不顺畅，粘手，出现条件：自定义盒子使用了 overflow: auto || scroll 后出现的情况。
1
2
3
div {
  -webkit-overflow-scrolling: touch;
}
  1. 屏幕旋转为横屏时，字体大小会变
1
2
3
* {
  -webkit-text-size-adjust: 100%;
}
  1. 滑动穿透，当你想在出现遮罩的时候，锁住用户的滚动行为（即滑动不穿透到父节点）
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
<div class="mask">
  <div class="content">我是弹框</div>
</div>

.mask {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba($color: #333, $alpha: .6);

  .content {
    padding: 20px;
    background-color: #fff;
    width: 300px;
  }
}

// 最简单的办法：阻止默认行为
document.querySelector(".mask").addEventListener("touchmove", event => {
  event.preventDefault();
});

// 如果.content也有滚动条，那么只要阻止遮罩本身就行：
document.querySelector(".mask").addEventListener("touchmove", event => {
  if (event.target.classList.contains("mask")) event.preventDefault();
});

展开全文 >>

DNS原理入门

什么是 DNS？

DNS 的全称是 domain name system，即域名系统，是互联网的一项服务。实质上他是一个分布式数据库，功能是联系域名和 ip 地址。通过域名，最终得到该域名对应的 ip 地址的过程则是域名解析的过程。

DNS 组成部分

DNS 由下面三个部分组成

  • 名称解析器（resolver）
  • 域名空间（domain name space）
  • 名称服务器（name server）

浏览器是如何向 DNS 服务器发出查询

  • 浏览器搜索自身的 DNS 缓存：
    首先浏览器会去搜索自身的 DNS 缓存，看缓存有没有过期，过期的话缓存的解析就结束了（chrome 缓存的时间只有一分钟，查看 chrome 的缓存可打开：chrome://net-internals/#dns ）。
  • 搜索操作系统自身的 DNS 缓存：
    如果浏览器没有找到缓存或者缓存过期失效，浏览器就会搜索操作系统自身的缓存，没有找到或者失效，解析结束（操作系统的缓存：window 系统是一天，mac 系统严格根据 DNS 协议中的 TTL）。
  • 读取本地的 hosts 文件：
    若操作系统的缓存也没有找到或失效，浏览器就会去读取本地的 hosts 文件（Hosts 文件也可以建立域名到 IP 地址的绑定关系，可以通过编辑 Hosts 文件来达到名称解析的目的。 例如，我们需要屏蔽某个域名时，就可以将其地址指向一个不存在 IP 地址，以达到屏蔽的效果）。
  • 浏览器发起一个 DNS 的系统调用：
    hosts 中没有找到对应的配置项的话，浏览器发起一个 DNS 的调用（向本地主控 DNS 服务，一般来说是你的运营商提供的）。

DNS 查询分为递归查询和迭代查询

递归查询：如果主机所询问的本地域名服务器不知道被查询域名的 IP 地址，那么本地域名服务器就以 DNS 客户的身份，向其他根域名服务器继续发出查询请求报文，而不是让该主机自己进行下一步的查询。

递归查询

域名的层级结构如下：

1
2
3
4
5
主机名.次级域名.顶级域名.根域名

# 即

host.sld.tld.root

迭代查询：当根域名服务器收到本地域名服务器发出的迭代查询请求报文时，要么给出所要查询的 IP 地址，要么告诉本地域名服务器：你下一步应当向哪一个域名服务器进行查询。然后让本地域名服务器进行后续的查询，而不是替本地域名服务器进行后续的查询。

迭代查询

由于递归模式会导致 DNS 服务器流量很大，所以现在大多数采用迭代模式。

总结：该文章主要介绍一些概念性的东西，欲知详情，请听下回分解！

展开全文 >>

《七天学不会的NodeJS》2

网络操作

开门红

使用NodeJS内置的http模块简单实现一个HTTP服务器：

1
2
3
4
5
6
var http = require('http');

http.createServer(function (request, response) {
    response.writeHead(200, { 'Content-Type': 'text-plain' });
    response.end('Hello World\n');
}).listen(8124);

以上程序创建了一个HTTP服务器并监听8124端口，打开浏览器访问该端口http://127.0.0.1:8124/就能够看到效果。

在Linux系统下，监听1024以下端口需要root权限。因此，如果想监听80或443端口的话，需要使用sudo命令启动程序。

API走马观花

HTTP

‘http’模块提供两种使用方式：

  • 作为服务端使用时，创建一个HTTP服务器，监听HTTP客户端请求并返回响应。
  • 作为客户端使用时，发起一个HTTP客户端请求，获取服务端响应。

服务端模式下如何工作，首先使用.createServer方法创建一个服务器，然后调用.listen方法监听端口。之后，每当来了一个客户端请求，创建服务器时传入的回调函数就被调用一次。
HTTP请求本质上是一个数据流，由请求头（headers）和请求体（body）组成。例如以下是一个完整的HTTP请求数据内容：

1
2
3
4
5
6
7
8
9
10
<!-- 请求头 -->
POST / HTTP/1.1
User-Agent: curl/7.26.0
Host: localhost
Accept: */*
Content-Length: 11
Content-Type: application/x-www-form-urlencoded

<!-- 请求体 -->
Hello World

HTTP请求在发送给服务器时，可以认为是按照从头到尾的顺序一个字节一个字节地以数据流方式发送的。而http模块创建的HTTP服务器在接收到完整的请求头后，就会调用回调函数。在回调函数中，除了可以使用request对象访问请求头数据外，还能把request对象当作一个只读数据流来访问请求体数据。举个🌰：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
http.createServer(function (request, response) {
    var body = [];

    console.log(request.method);
    console.log(request.headers);

    request.on('data', function (chunk) {
        body.push(chunk);
    });

    request.on('end', function () {
        body = Buffer.concat(body);
        console.log(body.toString());
    });
}).listen(80);

------------------------------------
POST
{ 'user-agent': 'curl/7.26.0',
  host: 'localhost',
  accept: '*/*',
  'content-length': '11',
  'content-type': 'application/x-www-form-urlencoded' }
Hello World

HTTP响应本质上也是一个数据流，同样由响应头（headers）和响应体（body）组成。例如以下是一个完整的HTTP请求数据内容。

1
2
3
4
5
6
7
HTTP/1.1 200 OK
Content-Type: text/plain
Content-Length: 11
Date: Tue, 05 Nov 2013 05:31:38 GMT
Connection: keep-alive

Hello World

在回调函数中，除了可以使用response对象来写入响应头数据外，还能把response对象当作一个只写数据流来写入响应体数据。服务端原样将客户端请求的请求体数据返回给客户端：

1
2
3
4
5
6
7
8
9
10
11
http.createServer(function (request, response) {
    response.writeHead(200, { 'Content-Type': 'text/plain' });

    request.on('data', function (chunk) {
        response.write(chunk);
    });

    request.on('end', function () {
        response.end();
    });
}).listen(80);

客户端模式下如何工作，为了发起一个客户端HTTP请求，我们需要指定目标服务器的位置并发送请求头和请求体：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var options = {
        hostname: 'www.example.com',
        port: 80,
        path: '/upload',
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    };

var request = http.request(options, function (response) {});

request.write('Hello World');
request.end();

以上例子.request方法创建了一个客户端，并指定请求目标和请求头数据。之后，就可以把request对象当作一个只写数据流来写入请求体数据和结束请求。
另外，由于HTTP请求中GET请求是最常见的一种，并且不需要请求体，因此http模块也提供了以下便捷API。

1
http.get('http://www.example.com/', function (response) {});

当客户端发送请求并接收到完整的服务端响应头时，就会调用回调函数。在回调函数中，除了可以使用response对象访问响应头数据外，还能把response对象当作一个只读数据流来访问响应体数据。

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
http.get('http://www.example.com/', function (response) {
    var body = [];

    console.log(response.statusCode);
    console.log(response.headers);

    response.on('data', function (chunk) {
        body.push(chunk);
    });

    response.on('end', function () {
        body = Buffer.concat(body);
        console.log(body.toString());
    });
});

------------------------------------
200
{ 'content-type': 'text/html',
  server: 'Apache',
  'content-length': '801',
  date: 'Tue, 05 Nov 2013 06:08:41 GMT',
  connection: 'keep-alive' }
<!DOCTYPE html>
...

HTTPS

https模块与http模块极为类似，区别在于https模块需要额外处理SSL证书。
在服务端模式下，创建一个HTTPS服务器的示例如下:

1
2
3
4
5
6
7
8
var options = {
        key: fs.readFileSync('./ssl/default.key'),
        cert: fs.readFileSync('./ssl/default.cer')
    };

var server = https.createServer(options, function (request, response) {
    // ...
});

与创建HTTP服务器相比，多了一个options对象，通过key和cert字段指定了HTTPS服务器使用的私钥和公钥。

另外，NodeJS支持SNI技术，可以根据HTTPS客户端请求使用的域名动态使用不同的证书，因此同一个HTTPS服务器可以使用多个域名提供服务。接着上例，可以使用以下方法为HTTPS服务器添加多组证书。

1
2
3
4
5
6
7
8
9
server.addContext('foo.com', {
    key: fs.readFileSync('./ssl/foo.com.key'),
    cert: fs.readFileSync('./ssl/foo.com.cer')
});

server.addContext('bar.com', {
    key: fs.readFileSync('./ssl/bar.com.key'),
    cert: fs.readFileSync('./ssl/bar.com.cer')
});

在客户端模式下，发起一个HTTPS客户端请求与http模块几乎相同。
但如果目标服务器使用的SSL证书是自制的，不是从颁发机构购买的，默认情况下https模块会拒绝连接，提示说有证书安全问题。在options里加入rejectUnauthorized: false字段可以禁用对证书有效性的检查，从而允许https模块请求开发环境下使用自制证书的HTTPS服务器。

URL

处理HTTP请求时url模块使用率超高，因为该模块允许解析URL、生成URL，以及拼接URL。一个完整的URL的各组成部分：

1
2
3
4
5
6
7
8
9
                           href
 -----------------------------------------------------------------
                            host              path
                      --------------- ----------------------------
 http: // user:pass @ host.com : 8080 /p/a/t/h ?query=string #hash
 -----    ---------   --------   ---- -------- ------------- -----
protocol     auth     hostname   port pathname     search     hash
                                                ------------
                                                   query

使用.parse方法来将一个URL字符串转换为URL对象:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
url.parse('http://user:pass@host.com:8080/p/a/t/h?query=string#hash');
/* =>
{ protocol: 'http:',
  auth: 'user:pass',
  host: 'host.com:8080',
  port: '8080',
  hostname: 'host.com',
  hash: '#hash',
  search: '?query=string',
  query: 'query=string',
  pathname: '/p/a/t/h',
  path: '/p/a/t/h?query=string',
  href: 'http://user:pass@host.com:8080/p/a/t/h?query=string#hash' }
*/

传给.parse方法的不一定要是一个完整的URL，例如在HTTP服务器回调函数中，request.url不包含协议头和域名，但同样可以用.parse方法解析。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
http.createServer(function (request, response) {
    var tmp = request.url; // => "/foo/bar?a=b"
    url.parse(tmp);
    /* =>
    { protocol: null,
      slashes: null,
      auth: null,
      host: null,
      port: null,
      hostname: null,
      hash: null,
      search: '?a=b',
      query: 'a=b',
      pathname: '/foo/bar',
      path: '/foo/bar?a=b',
      href: '/foo/bar?a=b' }
    */
}).listen(80);

.parse方法还支持第二个和第三个布尔类型可选参数。第二个参数等于true时，该方法返回的URL对象中，query字段不再是一个字符串，而是一个经过querystring模块转换后的参数对象。第三个参数等于true时，该方法可以正确解析不带协议头的URL，例如，//foo/bar 会被解析为 {host: ‘foo’, pathname: ‘/bar’} 而不是 {pathname: ‘//foo/bar’}。 默认为 false。
反过来，format方法允许将一个URL对象转换为URL字符串。
另外.resolve方法可以用于拼接URL：

1
2
3
4
url.resolve('http://www.example.com/foo/bar', '../baz');
/* =>
http://www.example.com/baz
*/
Query String

querystring模块用于实现URL参数字符串与参数对象的互相转换，示例如下。

1
2
3
4
5
6
7
8
9
querystring.parse('foo=bar&baz=qux&baz=quux&corge');
/* =>
{ foo: 'bar', baz: ['qux', 'quux'], corge: '' }
*/

querystring.stringify({ foo: 'bar', baz: ['qux', 'quux'], corge: '' });
/* =>
'foo=bar&baz=qux&baz=quux&corge='
*/
Zlib

zlib模块提供了数据压缩和解压的功能。当我们处理HTTP请求和响应时，可能需要用到这个模块。
首先我们看一个使用zlib模块压缩HTTP响应体数据的例子。这个例子中，判断了客户端是否支持gzip，并在支持的情况下使用zlib模块返回gzip之后的响应体数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
http.createServer(function (request, response) {
    var i = 1024,
        data = '';

    while (i--) {
        data += '.';
    }

    if ((request.headers['accept-encoding'] || '').indexOf('gzip') !== -1) {
        zlib.gzip(data, function (err, data) {
            response.writeHead(200, {
                'Content-Type': 'text/plain',
                'Content-Encoding': 'gzip'
            });
            response.end(data);
        });
    } else {
        response.writeHead(200, {
            'Content-Type': 'text/plain'
        });
        response.end(data);
    }
}).listen(80);

接着我们看一个使用zlib模块解压HTTP响应体数据的例子。这个例子中，判断了服务端响应是否使用gzip压缩，并在压缩的情况下使用zlib模块解压响应体数据。 

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
var options = {
        hostname: 'www.example.com',
        port: 80,
        path: '/',
        method: 'GET',
        headers: {
            'Accept-Encoding': 'gzip, deflate'
        }
    };

http.request(options, function (response) {
    var body = [];

    response.on('data', function (chunk) {
        body.push(chunk);
    });

    response.on('end', function () {
        body = Buffer.concat(body);

        if (response.headers['content-encoding'] === 'gzip') {
            zlib.gunzip(body, function (err, data) {
                console.log(data.toString());
            });
        } else {
            console.log(data.toString());
        }
    });
}).end();
Net

net模块可用于创建Socket服务器或Socket客户端。
首先我们来看一个使用Socket搭建一个很不严谨的HTTP服务器的例子。这个HTTP服务器不管收到啥请求，都固定返回相同的响应。 

1
2
3
4
5
6
7
8
9
10
11
net.createServer(function (conn) {
    conn.on('data', function (data) {
        conn.write([
            'HTTP/1.1 200 OK',
            'Content-Type: text/plain',
            'Content-Length: 11',
            '',
            'Hello World'
        ].join('\n'));
    });
}).listen(80);

接着我们来看一个使用Socket发起HTTP客户端请求的例子。这个例子中，Socket客户端在建立连接后发送了一个HTTP GET请求，并通过data事件监听函数来获取服务器响应。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var options = {
        port: 80,
        host: 'www.example.com'
    };

var client = net.connect(options, function () {
        client.write([
            'GET / HTTP/1.1',
            'User-Agent: curl/7.26.0',
            'Host: www.baidu.com',
            'Accept: */*',
            '',
            ''
        ].join('\n'));
    });

client.on('data', function (data) {
    console.log(data.toString());
    client.end();
});

灵机一点

使用NodeJS操作网络，特别是操作HTTP请求和响应时会遇到一些惊喜，这里对一些常见问题做解答。

  • 问： 为什么通过headers对象访问到的HTTP请求头或响应头字段不是驼峰的？

答： 从规范上讲，HTTP请求头和响应头字段都应该是驼峰的。但现实是残酷的，不是每个HTTP服务端或客户端程序都严格遵循规范，所以NodeJS在处理从别的客户端或服务端收到的头字段时，都统一地转换为了小写字母格式，以便开发者能使用统一的方式来访问头字段，例如headers[‘content-length’]。

  • 问： 为什么http模块创建的HTTP服务器返回的响应是chunked传输方式的？

答： 因为默认情况下，使用.writeHead方法写入响应头后，允许使用.write方法写入任意长度的响应体数据，并使用.end方法结束一个响应。由于响应体数据长度不确定，因此NodeJS自动在响应头里添加了Transfer-Encoding: chunked字段，并采用chunked传输方式。但是当响应体数据长度确定时，可使用.writeHead方法在响应头里加上Content-Length字段，这样做之后NodeJS就不会自动添加Transfer-Encoding字段和使用chunked传输方式。

  • 问： 为什么使用http模块发起HTTP客户端请求时，有时候会发生socket hang up错误？

答： 发起客户端HTTP请求前需要先创建一个客户端。http模块提供了一个全局客户端http.globalAgent，可以让我们使用.request或.get方法时不用手动创建客户端。但是全局客户端默认只允许5个并发Socket连接，当某一个时刻HTTP客户端请求创建过多，超过这个数字时，就会发生socket hang up错误。解决方法也很简单，通过http.globalAgent.maxSockets属性把这个数字改大些即可。另外，https模块遇到这个问题时也一样通过https.globalAgent.maxSockets属性来处理。

小结

  • http和https模块支持服务端模式和客户端模式两种使用方式。

  • request和response对象除了用于读写头数据外，都可以当作数据流来操作。

  • url.parse方法加上request.url属性是处理HTTP请求时的固定搭配。

  • 使用zlib模块可以减少使用HTTP协议时的数据传输量。

  • 通过net模块的Socket服务器与客户端可对HTTP协议做底层操作。

展开全文 >>

《七天学不会的NodeJS》1

NodeJs基础

什么是NodeJS

JS是脚本语言，脚本语言都需要一个解析器才能运行。对于写在HTML页面里的JS，浏览器充当了解析器的角色。而对于需要独立运行的JS，NodeJS就是一个解析器。

每一种解析器都是一个运行环境，会提供相应的内置对象和方法，比如运行在浏览器中的JS的用途是操作DOM，浏览器就提供了document之类的内置对象。而运行在NodeJS中的JS的用途是操作磁盘文件或搭建HTTP服务器，NodeJS就相应提供了fs、http等内置对象。

有啥用处

NodeJS的目的是为了实现高性能Web服务器，着重于事件机制和异步IO模型的优越性，而不是JS。简单可至使用命令交互模式调试JS代码片段，复杂可至编写工具提升工作效率。

如何安装

安装程序

到官网nodejs.org下载相应的安装包，Windows用户选择.msi后缀的安装文件， Mac用户选择.pkg后缀的安装文件。

编译安装

Linux系统下一般使用以下方式编译方式安装NodeJS:

  1. 确保系统下g++版本在4.6以上，python版本在2.6以上。
  2. 从nodejs.org下载tar.gz后缀的NodeJS最新版源代码包并解压到某个位置。
  3. 进入解压到的目录，使用以下命令编译和安装。 
1
2
3
$ ./configure
$ make
$ sudo make install

如何运行

打开终端，键入node进入命令交互模式： 

1
2
3
$ node
> console.log('Hello World!');
Hello World!

运行文件，首先编写hello.js文件，然后键入node + 文件名： 

1
$ node hello.js

权限问题

在Linux系统下，使用NodeJS监听80或443端口提供HTTP(S)服务时需要root权限，有两种方式：
第一种方式是使用sudo命令运行NodeJS，通过以下命令运行的server.js中有权限使用80和443端口。一般推荐这种方式，可以保证仅为有需要的JS脚本提供root权限。 

1
$ sudo node server.js

另一种方式是使用chmod +s命令让NodeJS总是以root权限运行，具体做法如下。因为这种方式让任何JS脚本都有了root权限，不太安全，因此在需要很考虑安全的系统下不推荐使用。

1
2
$ sudo chown root /usr/local/bin/node
$ sudo chmod +s /usr/local/bin/node

模块

在NodeJS中，一般将代码合理拆分到不同的JS文件中，每一个文件就是一个模块，而文件路径就是模块名。
在编写每个模块时，都有require、exports、module三个预先定义好的变量可供使用。

require

require 函数用于在当前模块中加载和使用别的模块，传入一个模块名，返回一个模块导出对象。模块名可以是相对路径或者绝对路径，模块名中的.js扩展名可以省略。举个🌰： 

1
2
3
4
5
6
7
8
var foo1 = require('./foo');
var foo2 = require('./foo.js');
var foo3 = require('/home/user/foo');
var foo4 = require('/home/user/foo.js');
// foo1至foo4中保存的是同一个模块的导出对象。

// 另外，可以使用以下方式加载和使用一个JSON文件。
var data = require('./data.json');

exports

exports对象是当前模块的导出对象，用于导出模块公有方法和属性。别的模块通过require函数使用当前模块时得到的就是当前模块的exports对象。举个🌰： 

1
2
3
exports.hello = function () {
    console.log('Hello World!');
};

module

通过module对象可以访问到当前模块的一些相关信息，但最多的用途是替换当前模块的导出对象。例如模块导出对象默认是一个普通对象，如果想改成一个函数的话。举个🌰：

1
2
3
module.exports = function () {
    console.log('Hello World!');
};

模块初始化

主模块

主模块负责调度组成整个程序的其它模块完成工作。例如下面的main.js:

1
$ node main.js

目录如下：

1
2
3
4
- /home/user/hello/
    - util/
        counter.js
    main.js

count.js，该模块内部定义了一个私有变量i，并在exports对象导出了一个公有方法count。:

1
2
3
4
5
6
7
var i = 0;

function count() {
    return ++i;
}

exports.count = count;

main.js:

1
2
3
4
5
6
var counter1 = require('./util/counter');
var counter2 = require('./util/counter');

console.log(counter1.count());
console.log(counter2.count());
console.log(counter2.count());

运行结果：

1
2
3
4
$ node main.js 
1
2
3

此例说明counter.js并没有因为被require了两次而初始化两次，所有模块在执行过程中只初始化一次。

二进制模块

编译好的二进制模块除了文件扩展名是.node外，和JS模块的使用方式相同。

代码组织和部署

模块路径解析规则

require函数支持斜杠（/）或盘符（C:）开头的绝对路径，也支持./开头的相对路径。另外require函数还支持第三种形式的路径，写法类似于foo/bar，规则如下：

  1. 内置模块
    不做路径解析，直接返回模块导出对象。如require(‘fs’;)。

  2. node_modules目录
    例如某个模块的绝对路径是/home/user/hello.js，在该模块中使用require(‘foo/bar’)方式加载模块时，则NodeJS依次尝试使用以下路径（从当前目录逐步往上找）。

1
2
3
/home/user/node_modules/foo/bar
/home/node_modules/foo/bar
/node_modules/foo/bar
  1. NODE_PATH环境变量
    与PATH环境变量类似， NodeJS 允许通过 NODE_PATH 环境变量来指定额外的模块搜索路径。 NODE_PATH 环境变量中可以多个目录路径，路径之间在 Linux 下用:分隔，在 Windows 下使用;分隔。例如定义 NODE_PATH 环境变量如下： 
1
NODE_PATH=/home/user/lib:/home/lib

当使用require(‘foo/bar’)的方式加载模块时，则NodeJS依次尝试以下路径。

1
2
/home/user/lib/foo/bar
/home/lib/foo/bar

包

JS模块的基本单位是单个JS文件。我们可以把由多个子模块组成的大模块称做包，并把所有子模块放在同一个目录里。

组成一个包的目录结构：

1
2
3
4
5
- /home/user/lib/
    - cat/
        head.js
        body.js
        main.js

其中 cat 包含一个包，main.js 为主模块：

1
2
3
4
5
6
7
8
9
10
var head = require('./head');
var body = require('./body');

exports.create = function (name) {
    return {
        name: name,
        head: head.create(),
        body: body.create()
    };
};

index.js

为了让包看起来更像模块，我们可以把模块命名为 index.js，那以下两条语句等价：

1
2
var cat = require('/home/user/lib/cat');
var cat = require('/home/user/lib/cat/index');

package.json

如果想自定义入口模块的文件名和存放位置，就需要在包目录下包含一个package.json文件，并在其中指定入口模块的路径。目录如下：

1
2
3
4
5
6
7
8
9
- /home/user/lib/
    - cat/
        + doc/
        - lib/
            head.js
            body.js
            main.js
        + tests/
        package.json

package.json 内容：

1
2
3
4
{
    "name": "cat",
    "main": "./lib/main.js"
}

可通过 require(‘/home/user/lib/cat’) 加载。

命令行程序

使用NodeJS编写的东西，要么是一个包，要么是一个命令行程序。

Linux （没实操，先跳过吧）

我们可以把JS文件当作shell脚本来运行，步骤如下：

  1. 使用#!注释来指定当前脚本使用的解析器，在node-echo.js文件顶部增加以下一行注释： 
1
#! /usr/bin/env node

NodeJS会忽略掉位于JS模块首行的#!注释，不必担心这行注释是非法语句。

  1. 使用以下命令赋予node-echo.js文件执行权限：
1
$ chmod +x /home/user/bin/node-echo.js
  1. 在PATH环境变量中指定的某个目录下，例如在/usr/local/bin下边创建一个软链文件，文件名与我们希望使用的终端命令同名，命令如下：
1
$ sudo ln -s /home/user/bin/node-echo.js /usr/local/bin/node-echo

Windows

Windows下用 .cmd , 假设node-echo.js存放在C:\Users\user\bin目录，并且该目录已经添加到PATH环境变量里了。在该目录下新建一个名为node-echo.cmd的文件，内容如下：

1
@node "C:\User\user\bin\node-echo.js" %*

工程目录

1
2
3
4
5
6
7
8
9
10
11
- /home/user/workspace/node-echo/   # 工程目录
    - bin/                          # 存放命令行相关代码
        node-echo
    + doc/                          # 存放文档
    - lib/                          # 存放API相关代码
        echo.js
    - node_modules/                 # 存放三方包
        + argv/
    + tests/                        # 存放测试用例
    package.json                    # 元数据文件
    README.md                       # 说明文件

NPM

NPM是随同NodeJS一起安装的包管理工具，常见使用场景如下：

  1. 允许用户从NPM服务器下载别人编写的三方包到本地使用。
  2. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  3. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

下载三方包

到https://www.npmjs.com/搜索包名，然后终端打开终端下载安装包，命令如下：

1
2
3
$ npm install argv
...
argv@0.0.2 node_modules\argv

下载指定版本的话，可以在包名后边加上@< version >，命令如下：

1
2
3
$ npm install argv@0.0.1
...
argv@0.0.1 node_modules\argv

可以在 package.json 申明三方包依赖：

1
2
3
4
5
6
7
{
    "name": "node-echo",
    "main": "./lib/echo.js",
    "dependencies": {
        "argv": "0.0.2"
    }
}

这样可以直接使用 npm install 批量安装三方包，包括三方包依赖的包，目录如下：

1
2
3
4
5
6
7
- project/
    - node_modules/
        - node-echo/
            - node_modules/
                + argv/
            ...
    ...

安装命令行程序

下载安装一个命令行程序的方法与三方包类似：

1
$ npm install node-echo -g

-g表示全局安装,并且NPM会自动创建好Linux系统下需要的软链文件或Windows系统下需要的.cmd文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- /usr/local/               # Linux系统下
    - lib/node_modules/
        + node-echo/
        ...
    - bin/
        node-echo
        ...
    ...

- %APPDATA%\npm\            # Windows系统下
    - node_modules\
        + node-echo\
        ...
    node-echo.cmd
    ...

发布代码

  1. 终端运行 npm adduser 根据提示注册账号
  2. 接着编辑package.json文件，加入NPM必需的字段。接着上边node-echo的例子，package.json里必要的字段如下。
1
2
3
4
5
6
7
8
9
10
11
{
    "name": "node-echo",           # 包名，在NPM服务器上须要保持唯一
    "version": "1.0.0",            # 当前版本号
    "dependencies": {              # 三方包依赖，需要指定包名和版本号
        "argv": "0.0.2"
      },
    "main": "./lib/echo.js",       # 入口模块位置
    "bin" : {
        "node-echo": "./bin/node-echo"      # 命令行程序名和主模块位置
    }
}
  1. 在package.json所在目录下运行npm publish发布代码了。

版本号

语义版本号分为X.Y.Z三位，分别代表主版本号、次版本号和补丁版本号。当代码变更时，版本号按以下原则更新。

  • 如果只是修复bug，需要更新Z位。

  • 如果是新增了功能，但是向下兼容，需要更新Y位。

  • 如果有大变动，向下不兼容，需要更新X位。

npm 常用命令

  • NPM提供了很多命令，例如install和publish，使用npm help可查看所有命令。

  • 使用npm help 可查看某条命令的详细帮助，例如npm help install。

  • 在package.json所在目录下使用npm install . -g可先在本地安装当前命令行程序，可用于发布前的本地测试。

  • 使用npm update 可以把当前目录下node_modules子目录里边的对应模块更新至最新版本。

  • 使用npm update -g可以把全局安装的对应命令行程序更新至最新版。

  • 使用npm cache clear可以清空NPM本地缓存，用于对付使用相同版本号发布新版本代码的人。

  • 使用npm unpublish @< version >可以撤销发布自己发布过的某个版本代码

文件操作

开门红

NodeJS提供了基本的文件操作API, 像文件拷贝这种高级功能就需要自己实现。

小文件拷贝

1
2
3
4
5
6
7
8
9
10
11
var fs = require('fs');

function copy(src, dst) {
    fs.writeFileSync(dst, fs.readFileSync(src));  // 读取src内容写入dst
}

function main(argv) {
    copy(argv[0], argv[1]);
}

main(process.argv.slice(2));

process是一个全局变量，可通过process.argv获得命令行参数。第一值表示，node的目录（安装目录或者执行目录，我这样理解），第二个值表示执行的js文件，第三个是后面携带的参数。具体参考文档

大文件拷贝

1
2
3
4
5
6
7
8
9
10
11
var fs = require('fs');

function copy(src, dst) {
    fs.createReadStream(src).pipe(fs.createWriteStream(dst));
}

function main(argv) {
    copy(argv[0], argv[1]);
}

main(process.argv.slice(2));

通过数据流的方式读一点写一点。

API走马观花

Buffer（数据块）

NodeJS提供了一个与String对等的全局构造函数Buffer来提供对二进制数据的操作。除了可以读取文件得到Buffer的实例外，还能够直接构造，Buffer 类在 Node.js 中是一个全局变量。

1
2
3
4
5
var bin = new Buffer([ 0x68, 0x65, 0x6c, 0x6c, 0x6f ]); // 直接构造
bin.length;  // 可以获取长度
bin[0]; // => 0x68; 
var str = bin.toString('utf-8'); // => "hello"
var bin = new Buffer('hello', 'utf-8'); // => <Buffer 68 65 6c 6c 6f>

slice方法返回的Buffer的修改会作用于原Buffer，而js数组使用slice方法不会作用原数组。

1
2
3
4
5
var bin = new Buffer([ 0x68, 0x65, 0x6c, 0x6c, 0x6f ]);
var sub = bin.slice(2);

sub[0] = 0x65;
console.log(bin); // => <Buffer 68 65 65 6c 6f>

因此要想不影响原来的Buffer，需要新建一个Buffer，通过.copy方法把原Buffer中的数据复制过去。

1
2
3
4
5
6
7
var bin = new Buffer([ 0x68, 0x65, 0x6c, 0x6c, 0x6f ]);
var dup = new Buffer(bin.length);

bin.copy(dup);
dup[0] = 0x48;
console.log(bin); // => <Buffer 68 65 6c 6c 6f>
console.log(dup); // => <Buffer 48 65 65 6c 6f>

Stream（数据流）

NodeJS中通过各种Stream来提供对数据流的操作。
为数据来源创建一个只读数据流，doSomething函数加上了回调，因此我们可以在处理数据前暂停数据读取，并在处理数据后继续读取数据。

1
2
3
4
5
6
7
8
9
10
11
12
var rs = fs.createReadStream(src);

rs.on('data', function (chunk) {
    rs.pause();
    doSomething(chunk, function () {
        rs.resume();
    });
});

rs.on('end', function () {
    cleanUp();
});

Stream基于事件机制工作，所有Stream的实例都继承于NodeJS提供的EventEmitter。

实现了数据从只读数据流到只写数据流的搬运，并包括了防爆仓控制。根据.write方法的返回值来判断传入的数据是写入目标了，还是临时放在了缓存了，并根据drain事件来判断什么时候只写数据流已经将缓存中的数据写入目标，可以传入下一个待写数据了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var rs = fs.createReadStream(src);
var ws = fs.createWriteStream(dst);

rs.on('data', function (chunk) {
    if (ws.write(chunk) === false) {
        rs.pause();
    }
});

rs.on('end', function () {
    ws.end();
});

ws.on('drain', function () {
    rs.resume();
});

NodeJS直接提供了.pipe方法来做这件事情，其内部实现方式与上边的代码类似。

File System（文件系统）

NodeJS通过fs内置模块提供对文件的操作。fs模块提供的API基本上可以分为以下三类：

  1. 文件属性读写。
    其中常用的有fs.stat、fs.chmod、fs.chown等等。
  2. 文件内容读写。
    其中常用的有fs.readFile、fs.readdir、fs.writeFile、fs.mkdir等等。
  3. 底层文件操作。
    其中常用的有fs.open、fs.read、fs.write、fs.close等等。

上边提到的这些API都通过回调函数传递结果，例如：

1
2
3
4
5
6
7
fs.readFile(pathname, function (err, data) {
    if (err) {
        // Deal with error.
    } else {
        // Deal with data.
    }
});

基本上所有fs模块API的回调参数都有两个。第一个参数在有错误发生时等于异常对象，第二个参数始终用于返回API方法执行结果。

fs模块的所有异步API都有对应的同步版本，用于无法使用异步操作时，或者同步操作更方便时的情况。同步API除了方法名的末尾多了一个Sync之外，异常对象与执行结果的传递方式也有相应变化

Path（路径）

  • path.normalize
    将传入的路径转换为标准路径，具体讲的话，除了解析路径中的.与..外，还能去掉多余的斜杠。如果有程序需要使用路径作为某些数据的索引，但又允许用户随意输入路径时，就需要使用该方法保证路径的唯一性。
1
2
3
4
5
6
7
8
9
var cache = {};

function store(key, value) {
    cache[path.normalize(key)] = value;
}

store('foo/bar', 1);
store('foo//baz//../bar', 2);
console.log(cache);  // => { "foo/bar": 2 }

注意： 标准化之后的路径里的斜杠在Windows系统下是\，而在Linux系统下是/。如果想保证任何系统下都使用/作为路径分隔符的话，需要用.replace(/\/g, ‘/‘)再替换一下标准路径。

  • path.join
    将传入的多个路径拼接为标准路径。该方法可避免手工拼接路径字符串的繁琐，并且能在不同系统下正确使用相应的路径分隔符。 
1
path.join('foo/', 'baz/', '../bar'); // => "foo/bar"
  • path.extname
    当我们需要根据不同文件扩展名做不同操作时，该方法就显得很好用。
1
path.extname('foo/bar.js'); // => ".js"

遍历目录

递归算法

通过不断缩小问题的规模来解决问题:

1
2
3
4
5
6
7
function factorial(n) {
    if (n === 1) {
        return 1;
    } else {
        return n * factorial(n - 1);
    }
}

陷阱： 使用递归算法编写的代码虽然简洁，但由于每递归一次就产生一次函数调用，在需要优先考虑性能时，需要把递归算法转换为循环算法，以减少函数调用次数。

遍历算法

目录是一个树状结构，在遍历时一般使用深度优先+先序遍历算法。深度优先，意味着到达一个节点后，首先接着遍历子节点而不是邻居节点。先序遍历，意味着首次到达了某节点就算遍历完成，而不是最后一次返回某节点才算数。因此使用这种遍历方式时，下边这棵树的遍历顺序是A > B > D > E > C > F。

1
2
3
4
5
    A
   / \
  B   C
 / \   \
D   E   F

同步遍历

1
2
3
4
5
6
7
8
9
10
11
function travel(dir, callback) {
    fs.readdirSync(dir).forEach(function (file) {
        var pathname = path.join(dir, file);

        if (fs.statSync(pathname).isDirectory()) {
            travel(pathname, callback);
        } else {
            callback(pathname);
        }
    });
}

假设有如下目录：

1
2
3
4
5
6
- /home/user/
    - foo/
        x.js
    - bar/
        y.js
    z.css

使用以下代码遍历该目录时，得到的输入如下:

1
2
3
4
5
6
7
8
travel('/home/user', function (pathname) {
    console.log(pathname);
});

------------------------
/home/user/foo/x.js
/home/user/bar/y.js
/home/user/z.css

异步遍历

如果读取目录或读取文件状态时使用的是异步API，目录遍历函数实现起来会有些复杂，但原理完全相同:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function travel(dir, callback, finish) {
    fs.readdir(dir, function (err, files) {
        (function next(i) {
            if (i < files.length) {
                var pathname = path.join(dir, files[i]);

                fs.stat(pathname, function (err, stats) {
                    if (stats.isDirectory()) {
                        travel(pathname, callback, function () {
                            next(i + 1);
                        });
                    } else {
                        callback(pathname, function () {
                            next(i + 1);
                        });
                    }
                });
            } else {
                finish && finish();
            }
        }(0));
    });
}

文本编码

在读取不同编码的文本文件时，需要将文件内容转换为JS使用的UTF8编码字符串后才能正常处理。

BOM的移除

BOM用于标记一个文本文件使用Unicode编码，其本身是一个Unicode字符（”\uFEFF”），位于文本文件头部。在不同的Unicode编码下，BOM字符对应的二进制字节如下：

1
2
3
4
5
    Bytes      Encoding
----------------------------
    FE FF       UTF16BE
    FF FE       UTF16LE
    EF BB BF    UTF8

因此，我们可以根据文本文件头几个字节等于啥来判断文件是否包含BOM，以及使用哪种Unicode编码。但是，BOM字符虽然起到了标记文件编码的作用，其本身却不属于文件内容的一部分，如果读取文本文件时不去掉BOM。
以下代码实现了识别和去除UTF8 BOM的功能：

1
2
3
4
5
6
7
8
9
function readText(pathname) {
    var bin = fs.readFileSync(pathname);

    if (bin[0] === 0xEF && bin[1] === 0xBB && bin[2] === 0xBF) {
        bin = bin.slice(3);
    }

    return bin.toString('utf-8');
}

GBK转UTF8

GBK编码不在NodeJS自身支持范围内。因此，一般我们借助iconv-lite这个三方包来转换编码。使用NPM下载该包后，我们可以按下边方式编写一个读取GBK文本文件的函数。

1
2
3
4
5
6
7
var iconv = require('iconv-lite');

function readGBKText(pathname) {
    var bin = fs.readFileSync(pathname);

    return iconv.decode(bin, 'gbk');
}

单字节编码

即使一个文本文件中有中文等字符，如果我们需要处理的字符仅在ASCII0~128范围内，比如除了注释和字符串以外的JS代码，我们就可以统一使用单字节编码来读取文件，不用关心文件的实际编码是GBK还是UTF8。以下示例说明了这种方法。

1
2
3
4
5
6
7
8
9
10
11
12
1. GBK编码源文件内容：
    var foo = '中文';
2. 对应字节：
    76 61 72 20 66 6F 6F 20 3D 20 27 D6 D0 CE C4 27 3B
3. 使用单字节编码读取后得到的内容：
    var foo = '{乱码}{乱码}{乱码}{乱码}';
4. 替换内容：
    var bar = '{乱码}{乱码}{乱码}{乱码}';
5. 使用单字节编码保存后对应字节：
    76 61 72 20 62 61 72 20 3D 20 27 D6 D0 CE C4 27 3B
6. 使用GBK编码读取后得到内容：
    var bar = '中文';

不管大于0xEF的单个字节在单字节编码下被解析成什么乱码字符，使用同样的单字节编码保存这些乱码字符时，背后对应的字节保持不变。
NodeJS中自带了一种binary编码可以用来实现这个方法:

1
2
3
4
5
function replace(pathname) {
    var str = fs.readFileSync(pathname, 'binary');
    str = str.replace('foo', 'bar');
    fs.writeFileSync(pathname, str, 'binary');
}

展开全文 >>

Vue学习笔记三

Class 与 Style 绑定

将 v-bind 用于 class 和 style 时，表达式结果的类型除了字符串之外，还可以是对象或数组。

绑定Html Class

你可以在对象中传入单个或者多个属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存，举个🌰：

1
2
3
<div class="static"
    v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

绑定的数据对象不必内联定义在模板里。我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式，举个🌰：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

除了对象，我们也可以把一个数组传给 v-bind:class ，以应用一个 class 列表，举个🌰：

1
2
3
4
5
6
<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为： 

1
<div class="active text-danger"></div>

如果你也想根据条件切换列表中的 class ,可以使用三元表达式，也可以在数组语法中使用对象语法，举个🌰：

1
2
3
4
5
<!-- 三元表达式 -->
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

<!-- 数组内使用对象语法 -->
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
组件上的使用

当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖，举个🌰：

1
2
3
4
5
6
7
<!-- 声明组件 -->
Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

<!-- 使用时添加 class -->
<my-component class="baz boo"></my-component>

HTML 将被渲染为:

1
<p class="foo bar baz boo">Hi</p>

对于带数据绑定 class 也同样适用：

1
<my-component v-bind:class="{ active: isActive }"></my-component>

绑定内联样式

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

<!-- 也可以直接绑定到样式对象 -->
<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

同样的，对象语法常常结合返回对象的计算属性使用。

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上，和上面的类似，举个🌰：

1
<div v-bind:style="[baseStyles, overridingStyles]"></div>

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，举个🌰：

1
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

最后浏览器只会渲染被支持的那个值。

展开全文 >>

Vue学习笔记二

计算属性和侦听器

1.例子

举个简单🌰：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- html -->
div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

<!-- js -->
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

上面的例子中，我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数，这里是想要显示变量 message 的翻转字符串， vm.reversedMessage 的值始终取决于 vm.message 的值。

1
2
3
console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

2.计算属性vs方法

我们也可以通过在表达式中调用方法来达到同样的效果：

1
2
3
4
5
6
7
8
<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而区别在于，计算属性是基于它们的依赖进行缓存的，也就是只有在相关依赖发生改变时它们才会重新求值。而调用方法是每当触发重新渲染时，总会再次执行函数。
这也意味着下面的计算属性将不再更新，因为它不是响应式依赖：

1
2
3
4
5
6
7
8
9
computed: {
  now: function () {
    return Date.now()
  }
}
```  

#### 3.计算属性vs侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。建议使用计算属性会更简洁,可对比下面🌰：

var vm = new Vue({
el: ‘#demo’,
data: {
firstName: ‘Foo’,
lastName: ‘Bar’,
fullName: ‘Foo Bar’
},
watch: {
firstName: function (val) {
this.fullName = val + ‘ ‘ + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ‘ ‘ + val
}
}
})

var vm = new Vue({
el: ‘#demo’,
data: {
firstName: ‘Foo’,
lastName: ‘Bar’
},
computed: {
fullName: function () {
return this.firstName + ‘ ‘ + this.lastName
}
}
})

1
2
3

#### 4.计算属性的setter
计算属性默认只有getter，需要时也可以提供setter:

/ …
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ‘ ‘ + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(‘ ‘)
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// …

1
2
3
4
5

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

#### 5.侦听器
前文我们提到了侦听器，那什么情况下用 watch 会更合适呢？当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。举个🌰：



Ask a yes/no question:




```

在这个示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

展开全文 >>

react v16.3生命周期的升级方案

react v16做来哪些大更新

  1. 采用了称为“Fiber”的全新的内部架构。
    React Fiber是什么？
    简单来说，官方对 Fiber 的一句话解释是“React Fiber是对核心算法的一次重新实现”。通过“Fiber”，React 使得大量的计算可以被拆解分片，异步化。每执行完一段更新过程，就把控制权交还给React负责任务协调的模块，看看有没有其他紧急任务要做。从而保证了渲染的帧率，提高应用响应性。
  2. Portals新渲染方法(新增了一个顶级 API: ReactDOM.createPortal)
  3. render方法返回新的类型：代码块（比如数组，需要添加key）和字符串
  4. 更好的错误处理方式（增加了 componentDidCatch(error, info) 的生命周期函数）
  5. 减小了文件大小
  6. 更换协议为MIT
    。。。

关于react v16.3生命周期的变化

为什么被废弃？

上面我们提到了react v16 使用‘Fiber’对 核心算法的一次重新实现，这也是生命周期废弃的一个重要原因之一。因为在现有的React中，每个生命周期函数在一个加载或者更新过程中绝对只会被调用一次；在React Fiber中，不再是这样了，第一阶段中的生命周期函数在一次加载和更新过程中可能会被多次调用！那么多次调用的话主要会对 componentWillMount 和 componentWillUpdate 这两个生命周期内部的实现造成不可预知的影响。

被废弃的生命周期
  • componentWillReceiveProps
  • componentWillMount
  • componentWillUpdate
新增的生命周期函数
  • getDerivedStateFromProps
  • getSnapshotBeforeUpdate
废弃后升级方案
componentWillMount

首页无数据白屏
在 React 应用中，许多开发者为了避免第一次渲染时页面因为没有获取到异步数据导致的白屏，而将数据请求部分的代码放在了 componentWillMount 中，希望可以避免白屏并提早异步请求的发送时间。但是要知道，在componentWillMount里发起AJAX，不管多快得到结果也赶不上首次render，而且componentWillMount在服务器端渲染也会被调用到，这样的IO操作放在componentDidMount里更合适。
事件订阅
另一个常见的用例是在 componentWillMount 中订阅事件，并在 componentWillUnmount 中取消掉相应的事件订阅。但事实上 React 并不能够保证在 componentWillMount 被调用后，同一组件的 componentWillUnmount 也一定会被调用。一个当前版本的例子如服务端渲染时，componentWillUnmount 是不会在服务端被调用的，所以在 componentWillMount 中订阅事件就会直接导致服务端的内存泄漏。另一方面，在未来 React 开启异步渲染模式后，在 componentWillMount 被调用之后，组件的渲染也很有可能会被其他的事务所打断，导致 componentWillUnmount 不会被调用。而 componentDidMount 就不存在这个问题，在 componentDidMount 被调用后，componentWillUnmount 一定会随后被调用到，并根据具体代码清除掉组件中存在的事件订阅。

升级方案
将现有 componentWillMount 中的代码迁移至 componentDidMount 即可。

componentWillReceiveProps

更新由 props 决定的 state 及处理特定情况下的回调
在老版本的 React 中，如果组件自身的某个 state 跟其 props 密切相关的话，一直都没有一种很优雅的处理方式去更新 state，而是需要在 componentWillReceiveProps 中判断前后两个 props 是否相同，如果不同再将新的 props 更新到相应的 state 上去。这样做一来会破坏 state 数据的单一数据源，导致组件状态变得不可预测，另一方面也会增加组件的重绘次数。
新版提供了更为简洁的生命周期 getDerivedStateFromProps：

Edit l4jjqy4j6l

1
static getDerivedStateFromProps(nextProps, prevState)

一个简单的例子如下：

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
// before
componentWillReceiveProps(nextProps) {
  if (nextProps.isLogin !== this.props.isLogin) {
    this.setState({ 
      isLogin: nextProps.isLogin,   
    });
  }
  if (nextProps.isLogin) {
    this.handleClose();
  }
}

// after
static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.isLogin !== prevState.isLogin) {
    return {
      isLogin: nextProps.isLogin,
    };
  }
  return null;
}

componentDidUpdate(prevProps, prevState) {
  if (!prevState.isLogin && this.props.isLogin) {
    this.handleClose();
  }
}

通常来讲，在 componentWillReceiveProps 中，我们一般会做以下两件事，一是根据 props 来更新 state，二是触发一些回调，如动画或页面跳转等。在老版本的 React 中，这两件事我们都需要在 componentWillReceiveProps 中去做。而在新版本中，官方将更新 state 与触发回调重新分配到了 getDerivedStateFromProps 与 componentDidUpdate 中，使得组件整体的更新逻辑更为清晰。而且在 getDerivedStateFromProps 中还禁止了组件去访问 this.props，强制让开发者去比较 nextProps 与 prevState 中的值，以确保当开发者用到 getDerivedStateFromProps 这个生命周期函数时，就是在根据当前的 props 来更新组件的 state，而不是去做其他一些让组件自身状态变得更加不可预测的事情。

升级方案
将现有 componentWillReceiveProps 中的代码根据更新 state 或回调，分别在 getDerivedStateFromProps 及 componentDidUpdate 中进行相应的重写即可，注意新老生命周期函数中 prevProps，this.props，nextProps，prevState，this.state 的不同。

componentWillUpdate

处理因为 props 改变而带来的副作用
与 componentWillReceiveProps 类似，许多开发者也会在 componentWillUpdate 中根据 props 的变化去触发一些回调。但不论是 componentWillReceiveProps 还是 componentWillUpdate，都有可能在一次更新中被调用多次，也就是说写在这里的回调函数也有可能会被调用多次，这显然是不可取的。与 componentDidMount 类似，componentDidUpdate 也不存在这样的问题，一次更新中 componentDidUpdate 只会被调用一次，所以将原先写在 componentWillUpdate 中的回调迁移至 componentDidUpdate 就可以解决这个问题。
在组件更新前读取 DOM 元素状态
另一个常见的 componentWillUpdate 的用例是在组件更新前，读取当前某个 DOM 元素的状态，并在 componentDidUpdate 中进行相应的处理。但在 React 开启异步渲染模式后，render 阶段和 commit 阶段之间并不是无缝衔接的，也就是说在 render 阶段读取到的 DOM 元素状态并不总是和 commit 阶段相同，这就导致在
componentDidUpdate 中使用 componentWillUpdate 中读取到的 DOM 元素状态是不安全的，因为这时的值很有可能已经失效了。

而 getSnapshotBeforeUpdate 这个新生命周期可以解决这个问题： 

1
2
3
4
5
6
7
8
getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('#enter getSnapshotBeforeUpdate');
    return 'foo';
}

componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('#enter componentDidUpdate snapshot = ', snapshot);
}

与 componentWillUpdate 不同，getSnapshotBeforeUpdate 会在最终的 render 之前被调用，也就是说在 getSnapshotBeforeUpdate 中读取到的 DOM 元素状态是可以保证与 componentDidUpdate 中一致的。虽然 getSnapshotBeforeUpdate 不是一个静态方法，但我们也应该尽量使用它去返回一个值。这个值会随后被传入到 componentDidUpdate 中，然后我们就可以在 componentDidUpdate 中去更新组件的状态，而不是在 getSnapshotBeforeUpdate 中直接更新组件状态。这个函数的使用场景比较少。

升级方案
将现有的 componentWillUpdate 中的回调函数迁移至 componentDidUpdate。如果触发某些回调函数时需要用到 DOM 元素的状态，则将对比或计算的过程迁移至 getSnapshotBeforeUpdate，然后在 componentDidUpdate 中统一触发回调或更新状态。

升级前后生命周期对比

以上的这些生命周期函数的改动，一直要到 React 17.0 中才会实装，这给广大的 React 开发者们预留了充足的时间去适应这次改动。
下面借用两个图来展示升级前后生命周期的对比。
升级前：
react升级前生命周期图片

升级后：
react v16升级后生命周期图片

展开全文 >>

Vue学习笔记一

Vue 实例

创建一个 Vue 实例

所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)并提供相同的生命周期钩子。

1
2
3
var vm = new Vue({
  // 选项
})

数据与方法

Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有属性。属性的值发生改变，视图也会跟着发生改变。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

值得注意的是，只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果你添加一个新的属性，vm.b ，那么 b 的改动将不会触发任何视图的更新，所以如果你需要在后面使用到该属性，需要在 data 设置初始值。
还有一个例外是使用 Object.freeze() ，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。例如：

1
2
3
4
5
6
7
8
9
10
var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

1
2
3
4
5
<div id="app">
  <p>{{ foo }}</p>
  <!-- 这里的 `foo` 不会更新！ -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

1
2
3
4
5
6
7
8
9
10
11
12
13
var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

实例生命周期钩子

生命周期图例
注意：不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

模版语法

插值

  1. 文本

数据绑定使用“Mustache”语法 (双大括号), 绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新：

1
<span>Message: {{ msg }}</span>

使用 v-once 指令，你也能执行一次性地插值，当数据改变时，内容不会改变，该节点上的数据也不会发生变化：

1
<span v-once>这个将不会改变: {{ msg }}</span>

  1. 原始HTML

使用 v-html 指令：

1
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

  1. 特性

作用于 HTML 特性上，使用 v-bind 指令：

1
2
3
<div v-bind:id="dynamicId"></div>
<!-- 缩写 -->
<a :id="dynamicId">...</a>

布尔特性的情况下，它们的存在即暗示为 true:

1
<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的

  1. 使用 JavaScript 表达式

Vue.js 支持 JavaScript 表达式，只能包含单个表达式。

1
2
3
4
5
6
7
8
9
10
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

指令

指令 (Directives) 是带有 v- 前缀的特殊特性，指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

1
<p v-if="seen">现在你看到我了</p>

v-if 指令将根据表达式 seen 的值的真假来插入/移除

元素。

  1. 参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

1
2
3
4
5
<!-- 参数是元素的特性 -->
<a v-bind:href="url">...</a>

<!-- 参数是监听的事件名 -->
<a v-on:click="doSomething">...</a>

  1. 修饰符

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

1
<form v-on:submit.prevent="onSubmit">...</form>

展开全文 >>

关于javascript的Date踩过的坑

前言

最近在和app客户端对接一些功能，使用new Date转换把时间戳转换后在不同的手机得到点数不一样的问题，分别出现CDT、CST，一脸懵逼情况下，我决定趁此机会好好把这几个概念理一下。

Date对象

Date是一个对象类型，只能通过调用 Date 构造函数来实例化日期对象：以常规函数调用它（即不加 new 操作符）将会返回一个字符串，而不是一个日期对象。另外，不像其他JavaScript 类型，Date 对象没有字面量格式。

Date对象的主要方法

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
32
33
// 该方法传递的是国际标准时间
now = new Date(int) 

// 该方法返回的也是国际标准时间戳
getTime()	返回 国际时间 1970 年 1 月 1 日 0点至今的毫秒数。（也就是我们东八区的1970 年 1 月 1 日 8点至今的毫秒数）

// 以下方法返回的是本地时间
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。本地时间
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。本地时间
getMonth()	从 Date 对象返回月份 (0 ~ 11)。本地时间
getFullYear()	从 Date 对象以四位数字返回年份。本地时间
getYear()	请使用 getFullYear() 方法代替。本地时间
getHours()	返回 Date 对象的小时 (0 ~ 23)。本地时间
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。本地时间
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。本地时间
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。本地时间
getTimezoneOffset() 返回当前时区的时区偏移。
// 以下方法返回的是国际标准时间
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。国际标准时间
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。国际标准时间
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)。国际标准时间
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份。国际标准时间
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)。国际标准时间
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)。国际标准时间
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)。国际标准时间
getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。国际标准时间

// 以下两个方法返回本地时间的字符串
toLocaleString()
toString()

// 返回国际标准时间的字符串
toUTCString()

更多关于Date的方法请参考Date.

关于时区的概念

时区

全球划分为24个时区，分别有：
EDT -04:00 东部夏时制
CDT -05:00 中部夏时制
EST -05:00 东部标准时间
CST -06:00 中部标准时间
MDT -06:00 山地夏时制
MST -07:00 山地标准时间
…
等等，详细参考时区。
上面的🌰中你是否看到了两个中部时间，其中一个为中部夏时制（CDT），一个为中部标准时间（CST），那么什么是夏时制？

夏时制

夏时制，夏时令（Daylight Saving Time：DST），又称“日光节约时制”和“夏令时间”，是一种为节约能源而人为规定地方时间的制度，在这一制度实行期间所采用的统一时间称为“夏令时间”。一般在天亮早的夏季人为将时间调快一小时，可以使人早起早睡，减少照明量，以充分利用光照资源，从而节约照明用电。各个采纳夏时制的国家具体规定不同。目前全世界有近110个国家每年要实行夏令时。
中国也曾实行过夏时制，时间为1986-1991。更多关于夏时制的知识请参考夏时制

夏令时导致的问题以及解决方案

问题

从后端获取时间戳，在前端用JS格式化显示。发现再Chrome和sarafi下，对特定的时间段（1986年至1991年），的处理方式并不相同。举个🌰：

1
2
3
4
5
let timestamp = 676958400000; 
// chrome下  
new Date(timestamp) // Sat Jun 15 1991 13:00:00 GMT+0900 (CDT)  
// safari下
new Date(timestamp) // Sat Jun 15 1991 12:00:00 GMT+0800 (CST)

解决方案
1、尽量避免从后端或者客户端获取时间戳，让他们处理返回格式化后的日期字符串，如1991-06-01 15:00:00;
2、判断时区是否使用夏令时

可用getTimezoneOffset()方法判断时区使用的是否是夏令时。实现这一点需要创建任意年份的1月1日的日期,然后创建该年份的7月1日的日期,比较时区偏移量。如果分钟数不等,说明该时区使用的是夏令时,如果相等,则该时区使用的不是夏令时。

1
2
3
var d1 = new Date(1991,1,1); 
var d2 = new Date(1991,7,1); 
var isDST = d1.getTimezoneOffset != d2.getTimezoneOffset();

个人认为方案一更方便合理，方案二的话只是一种思路，具体还有待扩展。

小结

具体关于javascript的Date对象还是博大精深，当然也有各种各样的插件库，比如moment.js、date.js有兴趣的小伙伴可以了解下。

展开全文 >>

javascript之函数作用域和块作用域

1.1 函数中的作用域

无论标识符声明出现在作用域中的何处,这个标识符所代表的变量或函数都将附属于所处作用域的气泡。

函数作用域的含义是指,属于这个函数的全部变量都可以在整个函数的范围内使用及复用(事实上在嵌套的作用域中也可以使用)。

1.2 隐藏内部实现

隐藏内部实现就是可以把变量和函数包裹在一个函数的作用域中,然后用这个作用域来“隐藏”它们。

最小授权或最小暴露原则是指，在软件设计中,应该最小限度地暴露必要内容,而将其他内容都“隐藏”起来,比如某个模块或对象的 API 设计。

1.2.1 规避冲突

“隐藏”作用域中的变量和函数所带来的另一个好处,是可以避免同名标识符之间的冲突。冲突会导致变量的值被意外覆盖。

举个🌰 

1
2
3
4
5
6
7
8
9
10
function foo() { 
    function bar(a) {
        i=3;//修改for循环所属作用域中的i
        console.log( a + i );
    }
    for (var i=0; i<10; i++) {
        bar( i * 2 ); // 糟糕,无限循环了!
    } 
}
foo(); // ？？？
全局命名空间

当程序加载第三方库时，这些库通常会在全局作用域中声明一个名字足够独特的变量,通常是一个对象。这个对象被用作库的命名空间，所有需要暴露给外界的功能都会成为这个对象(命名空间)的属性,而不是将自己的标识符暴漏在顶级的词法作用域中。

模块管理

这些工具并没有能够违反词法作用域规则的“神奇”功能。它们只是利用作用 域的规则强制所有标识符都不能注入到共享作用域中,而是保持在私有、无冲突的作用域 中,这样可以有效规避掉所有的意外冲突。

1.3 函数作用域

举个🌰：

1
2
3
4
5
6
7
var a=2;
function foo() { // <-- 添加这一行
    var a=3; 
    console.log( a ); // 3
} // <-- 以及这一行 
foo(); // <-- 以及这一行
console.log( a ); // 2

以上代码会导致的问题：1、必须声明一个具名函数 foo(),意味着 foo 这个名称本身“污染”了所在作用域；2、必须显式地通过函数名(foo())调用这个函数才能运行其 中的代码。

为了解决这两个问题，JavaScript 提供了相关方案 

1
2
3
4
5
(function foo(){ // <-- 添加这一行
    var a=3;
    console.log( a ); // 3 
})(); // <-- 以及这一行 
console.log( a ); // 2

(function foo(){ .. })作为函数表达式意味着foo只能在..所代表的位置中 被访问,外部作用域则不行。foo 变量名被隐藏在自身中意味着不会非必要地污染外部作用域。

区分函数声明和表达式最简单的方法是看 function 关键字出现在声明中的位置(不仅仅是一行代码,而是整个声明中的位置)。如果 function 是声明中的第一个词,那么就是一个函数声明,否则就是一个函数表达式。

1.3.1 匿名和具名

函数表达式可以是匿名的,而函数声明则不可以省略函数名。

函数表达式的缺点：

  1. 匿名函数在栈追踪中不会显示出有意义的函数名,使得调试很困难。
  2. 如果没有函数名,当函数需要引用自身时只能使用已经过期的arguments.callee引用, 比如在递归中。另一个函数需要引用自身的例子,是在事件触发后事件监听器需要解绑 自身。
  3. 匿名函数省略了对于代码可读性/可理解性很重要的函数名。一个描述性的名称可以让 代码不言自明。

PS: arguments.callee在严格模式下，第5版 ECMAScript (ES5) 禁止使用 arguments.callee()。当一个函数必须调用自身的时候, 避免使用 arguments.callee(),通过要么给函数表达式一个名字,要么使用一个函数声明。关于arguments.callee

1.3.2 立即执行函数表达式

IIFE,代表立即执行函数表达式 (Immediately Invoked Function Expression);比如 (functionfoo(){..})() 。第一个( )将函数变成表 达式,第二个( )执行了这个函数。另一种改进的形式是： (function(){ .. }())。这两种形式在功能上是一致的。

IIFE 的另一个非常普遍的进阶用法是把它们当作函数调用并传递参数进去。
举个🌰：

1
2
3
4
5
6
7
var a=2;
(function IIFE( global ) {
    var a=3;
    console.log( a ); // 3 
    console.log( global.a ); // 2
})( window );
console.log( a ); // 2

这个模式的另外一个应用场景是解决 undefined 标识符的默认值被错误覆盖导致的异常(虽然不常见)。
举个🌰：

1
2
3
4
5
6
7
undefined = true; // 给其他代码挖了一个大坑!绝对不要这样做!（这样做覆盖掉原来的undefined） 
(function IIFE( undefined ) {
    var a;
    if (a === undefined) { //true, 实参没有传值，所以undefined就是真的undefined。
        console.log( "Undefined is safe here!" );
    }
})();

IIFE 还有一种变化的用途是倒置代码的运行顺序,将需要运行的函数放在第二位,在 IIFE 执行之后当作参数传递进去。
举个🌰：

1
2
3
4
5
6
7
(function IIFE( def ) { 
    def( window );
})(function def( global ) {  // 只是声明
    var a=3;
    console.log( a ); // 3 
    console.log( global.a ); // 2
});

ps: 自己的理解：实参只是声明函数，调用还是在IIFE函数里面才执行。

1.4 块作用域

块作用域是一个用来对之前的最小授权原则进行扩展的工具,将代码从在函数中隐藏信息 扩展为在块中隐藏信息。

1.4.1 with

with是块作用域的一 个例子(块作用域的一种形式),用 with 从对象中创建出的作用域仅在 with 声明中而非外 部作用域中有效。

1.4.2 try/catch

JavaScript 的 ES3 规范中规定 try/catch 的 catch 分句会创建一个块作
用域,其中声明的变量仅在 catch 内部有效。

但是当同一个作用域中的两个或多个 catch 分句 用同样的标识符名称声明错误变量时,很多静态检查工具还是会发出警告。 实际上这并不是重复定义,因为所有变量都被安全地限制在块作用域内部, 但是静态检查工具还是会很烦人地发出警告。为了避免这个不必要的警告,可以将 catch 的参数命名为 err1、 err2 等。

1.4.3 let

let关键字可以将变量绑定到所在的任意作用域中(通常是{..}内部)。换句话说, let 为其声明的变量隐式地了所在的块作用域。

举个🌰： 

1
2
3
4
5
6
7
var foo = true;
if (foo) { 
    let bar=foo*2;
    bar = something( bar );
    console.log( bar );
}
console.log( bar ); // ReferenceError

为了使变量的附属关系变得更加清晰。显式的代码优于隐式或一些精巧但不清晰的代码。

举个🌰：

1
2
3
4
5
6
7
8
9
var foo = true;
if (foo) {
    { // <-- 显式的快
        let bar=foo*2;
        bar = something( bar ); 
        console.log( bar );
    } 
}
console.log( bar ); // ReferenceError

只要声明是有效的,在声明中的任意位置都可以使用 { .. } 括号来为 let (ps: 用var不可以咯)创建一个用于绑定的块。

但是使用 let 进行的声明不会在块作用域中进行提升。

1.4.4 const

ES6 还引入了 const,同样可以用来创建块作用域变量,但其值是固定的 (常量)。之后任何试图修改值的操作都会引起错误。

小结

函数是 JavaScript 中最常见的作用域单元。本质上,声明在一个函数内部的变量或函数会在所处的作用域中“隐藏”起来,这是有意为之的良好软件的设计原则。但函数不是唯一的作用域单元。块作用域指的是变量和函数不仅可以属于所处的作用域,也可以属于某个代码块(通常指{ .. }内部)。
有些人认为块作用域不应该完全作为函数作用域的替代方案。两种功能应该同时存在,开 发者可以并且也应该根据需要选择使用何种作用域,创造可读、可维护的优良代码。

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

一个想要享受生活的程序媛^_^<br/>生活不止敲代码，还有～～～<br/>吃喝玩乐<br/>hahaha