├── koa2
    ├── context.md
    ├── compose.js
    └── application.md
├── test-cross
    ├── serverProxy
    │   ├── index.html
    │   └── server.js
    ├── cors
    │   ├── server.js
    │   └── index.html
    ├── postMessage
    │   ├── server
    │   │   └── data.html
    │   └── client
    │   │   └── index.html
    ├── jsonp
    │   ├── server.js
    │   └── index.html
    └── package.json
├── .gitignore
├── test-webpack
    ├── src
    │   ├── b.css
    │   ├── a.css
    │   ├── a.less
    │   ├── b.less
    │   ├── common.js
    │   ├── common.css
    │   ├── a.js
    │   └── b.js
    ├── dist
    │   ├── pageA-35be2c21107ce4016c324daaa1dd5e28.css
    │   ├── pageA-d7ac82de795ddf50c9df43291d77b4c8.css
    │   ├── pageB-56185455ea60f01155a65497e9bf6c85.css
    │   ├── index.html
    │   ├── pageA-8ddb2f0f51a8139475bb.js
    │   ├── pageA-b5b4e2893bce99fd5c57.js
    │   ├── pageB-34be879b3374ac9b2072.js
    │   ├── bundle.js
    │   ├── runtime-12168eb5ce29428d6ad5.js
    │   └── runtime-1b40e842c0decf252041.js
    ├── package.json
    └── webpack.config.js
├── vue.md
├── webpack.md
├── README.md
├── test-html&css
    ├── 3.html
    ├── 4.html
    ├── 5.html
    ├── 1.html
    ├── 2.html
    └── 6.html
├── async.md
├── careful.md
├── test-javascript
    ├── 4.js
    ├── 2.js
    ├── 1.js
    └── 3.js
├── xss&csrf.md
├── brower.md
├── test-drag
    └── index.html
├── javascript.md
├── http.md
├── prototype.md
├── html&css.md
└── observer.md


/koa2/context.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/test-cross/serverProxy/index.html:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .history
2 | .vscode
3 | node_modules
4 | yarn-error.log


--------------------------------------------------------------------------------
/test-webpack/src/b.css:
--------------------------------------------------------------------------------
1 | body {
2 |   background: yellow;
3 | }
4 | 


--------------------------------------------------------------------------------
/test-webpack/src/a.css:
--------------------------------------------------------------------------------
1 | p {
2 |   width: 100px;
3 |   height: 200px;
4 | }
5 | 


--------------------------------------------------------------------------------
/test-webpack/src/a.less:
--------------------------------------------------------------------------------
1 | @import url('./a.css');
2 | div {
3 |   width: 200px;
4 | }
5 | 


--------------------------------------------------------------------------------
/test-webpack/dist/pageA-35be2c21107ce4016c324daaa1dd5e28.css:
--------------------------------------------------------------------------------
1 | *{padding:0;margin:0}body{width:100%;height:200%}


--------------------------------------------------------------------------------
/test-webpack/src/b.less:
--------------------------------------------------------------------------------
1 | @import url('./b.css');
2 | span {
3 |   display: inline-block;
4 |   width: 100px;
5 | }
6 | 


--------------------------------------------------------------------------------
/test-webpack/src/common.js:
--------------------------------------------------------------------------------
1 | require('./common.css')
2 | module.export = function sum(a, b) {
3 |   return a + b
4 | }
5 | 


--------------------------------------------------------------------------------
/test-webpack/src/common.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   padding: 0;
 3 |   margin: 0;
 4 | }
 5 | 
 6 | body {
 7 |   width: 100%;
 8 |   height: 200%;
 9 | }
10 | 


--------------------------------------------------------------------------------
/test-webpack/dist/pageA-d7ac82de795ddf50c9df43291d77b4c8.css:
--------------------------------------------------------------------------------
1 | p{width:100px;height:200px}div{width:200px}*{padding:0;margin:0}body{width:100%;height:200%}


--------------------------------------------------------------------------------
/test-webpack/dist/pageB-56185455ea60f01155a65497e9bf6c85.css:
--------------------------------------------------------------------------------
1 | *{padding:0;margin:0}body{width:100%;height:200%}body{background:#ff0}span{display:inline-block;width:100px}


--------------------------------------------------------------------------------
/test-webpack/dist/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <title>Getting Started</title>
 5 |   <script src="https://unpkg.com/lodash@4.16.6"></script>
 6 | </head>
 7 | 
 8 | <body>
 9 |   <script src="bundle.js"></script>
10 | </body>
11 | 
12 | </html>


--------------------------------------------------------------------------------
/test-cross/cors/server.js:
--------------------------------------------------------------------------------
1 | const http = require('http')
2 | http.createServer((req, res) => {
3 |   res.writeHead(200, {
4 |     'Access-Control-Allow-Origin': 'http://127.0.0.1:8080',
5 |     'Content-Type': 'text/html;charset=utf-8'
6 |   })
7 |   res.end('这是你要的数据：1111')
8 | })
9 | 


--------------------------------------------------------------------------------
/test-cross/postMessage/server/data.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   window.addEventListener('message', function (e) {
 3 |     if (e.source != window.parent) {
 4 |       return;
 5 |     }
 6 |     let data = e.data;
 7 |     console.log('data.html 接收到的消息:', data);
 8 |     parent.postMessage('data.html 的 data!', e.origin);
 9 |   });
10 | </script> 


--------------------------------------------------------------------------------
/test-webpack/src/a.js:
--------------------------------------------------------------------------------
 1 | const sum = require('./common.js')
 2 | const _ = require('lodash')
 3 | function component() {
 4 |   var element = document.createElement('div')
 5 | 
 6 |   // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
 7 |   element.innerHTML = _.join(['Hello', 'webpack'], ' ')
 8 | 
 9 |   return element
10 | }
11 | 
12 | document.body.appendChild(component())
13 | 


--------------------------------------------------------------------------------
/test-webpack/src/b.js:
--------------------------------------------------------------------------------
 1 | require('./b.less')
 2 | const sum = require('./common.js')
 3 | const _ = require('lodash')
 4 | 
 5 | function component() {
 6 |   var element = document.createElement('div')
 7 | 
 8 |   // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
 9 |   element.innerHTML = _.join(['Hello', 'webpack'], ' ')
10 | 
11 |   return element
12 | }
13 | 
14 | document.body.appendChild(component())
15 | 


--------------------------------------------------------------------------------
/test-cross/jsonp/server.js:
--------------------------------------------------------------------------------
 1 | const url = require('url')
 2 | const http = require('http')
 3 | http
 4 |   .createServer((req, res) => {
 5 |     const data = {
 6 |       a: 10
 7 |     }
 8 | 
 9 |     const callback = url.parse(req.url, true).query.callback
10 |     res.writeHead(200)
11 |     res.end(`${callback}(${JSON.stringify(data)})`)
12 |   })
13 |   .listen(3000, '127.0.0.1')
14 | console.log('服务启动，监听127.0.0.1')
15 | 


--------------------------------------------------------------------------------
/test-cross/jsonp/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>test jsonp</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 | </body>
14 | <script>
15 |   function jsonpCallback(data) {
16 |     alert('获得 X 数据:' + data.a);
17 |   }
18 | </script>
19 | <script src="http://127.0.0.1:3000?callback=jsonpCallback"></script>
20 | 
21 | </html>


--------------------------------------------------------------------------------
/test-cross/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "test-cross",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "jsonp": "node ./jsonp/server.js & http-server ./jsonp",
 8 |     "cors": "node ./cors/server.js & http-server ./cors",
 9 |     "proxy": "node ./serverProxy/server.js",
10 |     "postMessage":
11 |       "http-server ./postMessage/client/ -p 8080 & http-server ./postMessage/server/ -p 8081"
12 |   },
13 |   "author": "lip.fan",
14 |   "license": "ISC",
15 |   "dependencies": {
16 |     "http-server": "^0.11.1"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/vue.md:
--------------------------------------------------------------------------------
 1 | #### Vue 相关知识点总结
 2 | 
 3 | vue 在初始化的时候实际上执行的方法
 4 | 
 5 | ```js
 6 | initLifecycle(vm)
 7 | initEvents(vm)
 8 | initRender(vm)
 9 | callHook(vm, 'beforeCreate')
10 | initInjection(vm)
11 | initProps(vm)
12 | initMethods(vm)
13 | initData(vm)
14 | initComputed(vm)
15 | initWatch(vm)
16 | initPrivode(vm)
17 | callHook(vm, 'created')
18 | if (vm.$option.el) {
19 |   vm.$mount(vm.$option.el)
20 | }
21 | ```
22 | 
23 | mounted 调用逻辑判断是否存在 template 选项有的话就直接获取 dom 字符串。没有的话就是通过 el 选择器选择出 dom。在获得模版后，会将模版编译成为渲染函数。这里生成的渲染函数有两个一个是静态节点的渲染函数，一个是动态的渲染函数。最后会把渲染函数挂在 vue.$options 上面。最后就调用缓存下来的$mount
24 | 


--------------------------------------------------------------------------------
/webpack.md:
--------------------------------------------------------------------------------
 1 | ### webpack 相关知识点总结
 2 | 
 3 | **chunkid 和 moduleid**
 4 | 
 5 | * 每个 chunkid 对应的是一个 js 文件
 6 | * 每个 moduleid 对应的是一个个 js 文件的内容的模块（一个 js 文件里面可以 require 多个资源，每 个资源分配一个 moduleid）
 7 | 
 8 | **compiler 和 compilation**
 9 | 
10 | * compiler 对象代表了完整的 webpack 环境配置。这个对象在启动 webpack 时被一次性建立，并配置好所有可操作的设置，包括 options，loader 和 plugin。当在 webpack 环境中应用一个插件时，插件将收到此 compiler 对象的引用。可以使用它来访问 webpack 的主环境。
11 | 
12 | * compilation 对象代表了一次资源版本构建。当运行 webpack 开发环境中间件时，每当检测到一个文件变化，就会创建一个新的 compilation，从而生成一组新的编译资源。一个 compilation 对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息。compilation 对象也提供了很多关键时机的回调，以供插件做自定义处理时选择使用。
13 | 


--------------------------------------------------------------------------------
/test-webpack/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "test-webpack",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "build": "webpack --color  --config ./webpack.config.js"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC",
12 |   "devDependencies": {
13 |     "css-loader": "^0.28.7",
14 |     "extract-text-webpack-plugin": "^3.0.2",
15 |     "less": "^2.7.3",
16 |     "less-loader": "^4.0.5",
17 |     "lodash": "^4.17.4",
18 |     "style-loader": "^0.19.0",
19 |     "webpack": "^3.8.1"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Blog
 2 | 
 3 | A blog for learning knowledge
 4 | 
 5 | ## Articles
 6 | 
 7 | * [x] 1、[从观察者模式（发布订阅模式）到 vue 响应系统](https://github.com/Copyes/Articles/blob/master/observer.md)
 8 | * [x] 2、[html&css 知识点总结](https://github.com/Copyes/Articles/blob/master/html%26css.md)
 9 | * [x] 3、[javascript 知识点总结](https://github.com/Copyes/Articles/blob/master/javascript.md)
10 | * [x] 4、[原型和原型链的简单总结](https://github.com/Copyes/Articles/blob/master/prototype.md)
11 | * [x] 5、[http 知识点总结](https://github.com/Copyes/Articles/blob/master/http.md)
12 | * [x] 6、[XSS 和 CSRF 知识点总结](https://github.com/Copyes/Articles/blob/master/xss%26csrf.md)
13 | 


--------------------------------------------------------------------------------
/test-cross/cors/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>test cors</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 | </body>
14 | <script>
15 |   const xhr = new XMLHttpRequest();
16 |   xhr.open('GET', 'http://127.0.0.1:3000', true);
17 |   xhr.onreadystatechange = function () {
18 |     if (xhr.readyState === 4 && xhr.status === 200) {
19 |       alert(xhr.responseText);
20 |     }
21 |   }
22 |   xhr.send(null);
23 | </script>
24 | 
25 | </html>


--------------------------------------------------------------------------------
/test-html&css/3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Flex布局</title>
 9 |   <style>
10 |     .container {
11 |       display: flex;
12 |       width: 100%;
13 |     }
14 | 
15 |     .container>div {
16 |       height: 200px;
17 |       flex: 1;
18 |       border: 1px solid red;
19 |     }
20 |   </style>
21 | </head>
22 | 
23 | <body>
24 |   <div class="container">
25 |     <div class="col-1"></div>
26 |     <div class="col-2"></div>
27 |     <div class="col-3"></div>
28 |   </div>
29 | </body>
30 | 
31 | </html>


--------------------------------------------------------------------------------
/test-cross/serverProxy/server.js:
--------------------------------------------------------------------------------
 1 | const url = require('url')
 2 | const http = require('http')
 3 | const https = require('https')
 4 | 
 5 | http
 6 |   .createServer((req, res) => {
 7 |     const path = url.parse(req.url).path.slice(1)
 8 |     if (path === 'topics') {
 9 |       https.get('https://cnodejs.org/api/v1/topics', resp => {
10 |         let data = ''
11 |         resp.on('data', chunk => {
12 |           data += chunk
13 |         })
14 |         resp.on('end', () => {
15 |           res.writeHead(200, {
16 |             'Content-Type': 'application/json; charset=utf-8'
17 |           })
18 |           res.end(data)
19 |         })
20 |       })
21 |     }
22 |   })
23 |   .listen(3000, '127.0.0.1')
24 | console.log('The server is listening to 127.0.0.0')


--------------------------------------------------------------------------------
/test-cross/postMessage/client/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>postMessage</title>
 9 | </head>
10 | 
11 | <body>
12 |   <iframe src="http://localhost:8081/data.html" style='display: none;'></iframe>
13 |   <script>
14 |     window.onload = function () {
15 |       let targetOrigin = 'http://localhost:8081';
16 |       window.frames[0].postMessage('index.html 的 data!', targetOrigin);
17 |     }
18 |     window.addEventListener('message', function (e) {
19 |       console.log('index.html 接收到的消息:', e.data);
20 |     });
21 |   </script>
22 | </body>
23 | 
24 | </html>


--------------------------------------------------------------------------------
/test-html&css/4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>用 Flex 画出一个直径 100px 的圆，并放在屏幕中间</title>
 9 |   <style>
10 |     html {
11 |       width: 100%;
12 |       height: 100%;
13 |     }
14 | 
15 |     body {
16 |       display: flex;
17 |       justify-content: center;
18 |       align-items: center;
19 |       margin: 0;
20 |       padding: 0;
21 |       height: 100%;
22 |     }
23 | 
24 |     .circle {
25 |       width: 100px;
26 |       height: 100px;
27 |       border-radius: 50%;
28 |       background: red;
29 |     }
30 |   </style>
31 | </head>
32 | 
33 | <body>
34 |   <div class="circle"></div>
35 | </body>
36 | 
37 | </html>


--------------------------------------------------------------------------------
/test-html&css/5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>css实现垂直居中</title>
 9 |   <style>
10 |     html,
11 |     body {
12 |       margin: 0;
13 |       padding: 0;
14 |       width: 100%;
15 |       height: 100%;
16 |     }
17 | 
18 |     .container {
19 |       width: 100%;
20 |       height: 100%;
21 |     }
22 | 
23 |     .vertical {
24 |       width: 100px;
25 |       height: 100px;
26 |       background: red;
27 |       margin: 0 auto;
28 |       position: relative;
29 |       top: 50%;
30 |       transform: translateY(-50%);
31 |       /* 将元素沿 Y 轴方向移动自身的 50% */
32 |     }
33 |   </style>
34 | </head>
35 | 
36 | <body>
37 |   <div class="container">
38 |     <div class="vertical">
39 | 
40 |     </div>
41 |   </div>
42 | </body>
43 | 
44 | </html>


--------------------------------------------------------------------------------
/test-webpack/dist/pageA-8ddb2f0f51a8139475bb.js:
--------------------------------------------------------------------------------
 1 | webpackJsonp(["pageA"],{
 2 | 
 3 | /***/ "645S":
 4 | /***/ (function(module, exports) {
 5 | 
 6 | // removed by extract-text-webpack-plugin
 7 | 
 8 | /***/ }),
 9 | 
10 | /***/ "MvGc":
11 | /***/ (function(module, exports, __webpack_require__) {
12 | 
13 | /* WEBPACK VAR INJECTION */(function(module) {__webpack_require__("645S")
14 | module.export = function sum(a, b) {
15 |   return a + b
16 | }
17 | 
18 | /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__("3IRH")(module)))
19 | 
20 | /***/ }),
21 | 
22 | /***/ "aQZI":
23 | /***/ (function(module, exports, __webpack_require__) {
24 | 
25 | const sum = __webpack_require__("MvGc")
26 | const _ = __webpack_require__("M4fF")
27 | function component() {
28 |   var element = document.createElement('div')
29 | 
30 |   // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
31 |   element.innerHTML = _.join(['Hello', 'webpack'], ' ')
32 | 
33 |   return element
34 | }
35 | 
36 | document.body.appendChild(component())
37 | 
38 | 
39 | /***/ })
40 | 
41 | },["aQZI"]);


--------------------------------------------------------------------------------
/async.md:
--------------------------------------------------------------------------------
 1 | async函数是generator函数的语法糖
 2 | 
 3 | 同样的一个函数用async替换的时候只需要吧 function*(){}替换成 async 把yield替换成await即可
 4 | 
 5 | 但是async函数有4点改进
 6 | 
 7 | 1. 内置执行器 (generator需要用co模块)
 8 | 2. 更好的语义 await表示需要等待异步结果
 9 | 3. 更广的适用性
10 | 4. 返回值与generator不同返回Promise对象(即使你返回的是一个值也会被包装成Promise.resolve(值))
11 | 
12 | async返回的是Promise对象,可以再被await做为参数
13 | 
14 | async函数可以放在对象,类,表达式,函数声明,箭头函数中
15 | 
16 | async的错误机制是个难点
17 | 
18 | > async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。
19 | 
20 | async函数返回的promise对象,必须等return前的所有await的promise执行完成之后才会执行
21 | 
22 | unhandledRejection事件可以捕获错误
23 | 
24 | await后面是一个promise对象如果不是会立即被转化成一个resolve的promise对象
25 | 
26 | await中的任何一个promise被reject之后都会中断后续执行,如果不想因为其中一个reject就影响后面的执行可以使用try...catch,或者还有一种方法是对await的promise直接调用.catch
27 | 
28 | 在async函数中如果两个异步可以并行,就不要写成串行,并行不一定非要用promise.all
29 | 
30 | 
31 | 
32 | 注意点:
33 | - [ ] yield 和 await 后面可以是原始类型的值(string,number,boolean)(实际测试能返回任何值)或者promise对象, 但是co模块约定yield后面只能返回Thunk函数或Promise对象
34 | - [ ] async 函数执行过程如果报错可以在最后返回的promise里.catch捕获错误
35 | - [ ] async 函数在执行的时候一旦遇到await就会返回Promise
36 | 
37 | 
38 | 


--------------------------------------------------------------------------------
/test-html&css/1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>圣杯布局</title>
 9 |   <style>
10 |     .container {
11 |       padding: 0 200px;
12 |     }
13 | 
14 |     .container>div {
15 |       height: 200px;
16 |       float: left;
17 |     }
18 | 
19 |     .middle {
20 |       width: 100%;
21 |       background: blue;
22 |     }
23 | 
24 |     .left {
25 |       margin-left: -100%;
26 |       position: relative;
27 |       left: -200px;
28 |       width: 200px;
29 |       background: red;
30 |     }
31 | 
32 |     .right {
33 |       margin-left: -200px;
34 |       position: relative;
35 |       right: -200px;
36 |       width: 200px;
37 |       background: yellow;
38 |     }
39 |   </style>
40 | </head>
41 | 
42 | <body>
43 |   <div class="container">
44 |     <div class="middle"></div>
45 |     <div class="left"></div>
46 |     <div class="right"></div>
47 |   </div>
48 | </body>
49 | 
50 | </html>


--------------------------------------------------------------------------------
/test-html&css/2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>双飞翼布局</title>
 9 |   <style>
10 |     .container>div {
11 |       float: left;
12 |       height: 200px;
13 |     }
14 | 
15 |     .middle {
16 |       width: 100%;
17 |       background: red;
18 |     }
19 | 
20 |     .middle-container {
21 |       height: 200px;
22 |       margin: 0 200px;
23 |       background: darkred;
24 |     }
25 | 
26 |     .left {
27 |       width: 200px;
28 |       margin-left: -100%;
29 |       background: blue;
30 |     }
31 | 
32 |     .right {
33 |       width: 200px;
34 |       margin-left: -200px;
35 |       background: yellow;
36 |     }
37 |   </style>
38 | </head>
39 | 
40 | <body>
41 |   <div class="container">
42 |     <div class="middle">
43 |       <div class="middle-container"></div>
44 |     </div>
45 |     <div class="left"></div>
46 |     <div class="right"></div>
47 |   </div>
48 | </body>
49 | 
50 | </html>


--------------------------------------------------------------------------------
/careful.md:
--------------------------------------------------------------------------------
 1 | ### 小程序审核注意事项
 2 | 
 3 | 以下为育儿宝和育儿宝成长记录以及早教宝小程序开发以及审核相关注意事项。
 4 | 
 5 | **审核**
 6 | 
 7 | > 1、类目不完善或者是类目选择不当
 8 | 
 9 | 提交审核前一定要仔细看区分，可以了解下竞品发的是什么类目。
10 | 
11 | > 2、“功能不完善/功能不完整”
12 | 
13 | 这个有时候是审核人员不会用误以为你的小程序没开发完整，如果你确定没问题的话可以多提交一次试试。
14 | 
15 | > 3、含有声音视频类目
16 | 
17 | 这个就要把音视频类目选择上
18 | 
19 | > 4、不得展示和推荐第三方小程序
20 | 
21 | 不能做小程序导航、小程序排行榜之类的产品或功能。
22 | 
23 | > 5、不能含有诱导分享的内容
24 | 
25 | 这个已经不用多说了，微信在诱导分享方面的规则有多严大家应该都了解了。
26 | 
27 | > 6、必须登录才能体验的小程序，必须提供测试账号
28 | 
29 | 测试账号目前是产品 3 君提供了一个自己的账号如有需要请自行想法，账号如下：
30 | 
31 | 账号：xiaohao3jun
32 | 密码：ylj9694
33 | 
34 | > 7、一些建议
35 | 
36 | * 1.尽量早提交，虽然目前小程序的审核期已经比公测时短了不少，但是审核依然严格，早提交早发现问题。
37 | * 2.仔细阅读官方文档！！！这点非常重要！不看文档活该一直被拒。
38 | * 3.可以通过邮件跟微信团队沟通。
39 | 
40 | **注意**
41 | 
42 | * 1、育儿宝 APP 和育儿成长记录是两个小程序共用一套代码，通过 type 来区分。
43 | 
44 | ```js
45 | // utils下面的user.js文件中
46 | method: 'POST',
47 | data: {
48 |   method: 'yuerbao.user.applet.auth',
49 |   code,
50 |   type: 14   // 7 是育儿宝app ， 14是育儿成长记录
51 | },
52 | ```
53 | 
54 | * 2、架构问题
55 | 
56 | 目前育儿宝 app 小程序和早教宝的架构是不同的。育儿宝这边是一年半前小程序才出来的时候封装的。育儿宝是前段时间才封装的。育儿宝小程序主要是异步回调的开发方式，早教宝主要是同步的开发方式。（如果有问题育儿宝可以找金金，早教宝找万利）
57 | 
58 | * 3、后期可以思考的点
59 | 
60 | 1、早教宝和育儿宝中的落地页可以换成小程序即分享出去的是小程序。
61 | 
62 | 2、小程序来做拉新的活动
63 | 


--------------------------------------------------------------------------------
/test-webpack/dist/pageA-b5b4e2893bce99fd5c57.js:
--------------------------------------------------------------------------------
 1 | webpackJsonp(["pageA"],{
 2 | 
 3 | /***/ "645S":
 4 | /***/ (function(module, exports) {
 5 | 
 6 | // removed by extract-text-webpack-plugin
 7 | 
 8 | /***/ }),
 9 | 
10 | /***/ "LJbA":
11 | /***/ (function(module, exports) {
12 | 
13 | // removed by extract-text-webpack-plugin
14 | 
15 | /***/ }),
16 | 
17 | /***/ "MvGc":
18 | /***/ (function(module, exports, __webpack_require__) {
19 | 
20 | /* WEBPACK VAR INJECTION */(function(module) {__webpack_require__("645S")
21 | module.export = function sum(a, b) {
22 |   return a + b
23 | }
24 | 
25 | /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__("3IRH")(module)))
26 | 
27 | /***/ }),
28 | 
29 | /***/ "aQZI":
30 | /***/ (function(module, exports, __webpack_require__) {
31 | 
32 | __webpack_require__("LJbA")
33 | const sum = __webpack_require__("MvGc")
34 | const _ = __webpack_require__("M4fF")
35 | function component() {
36 |   var element = document.createElement('div')
37 | 
38 |   // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
39 |   element.innerHTML = _.join(['Hello', 'webpack'], ' ')
40 | 
41 |   return element
42 | }
43 | 
44 | document.body.appendChild(component())
45 | 
46 | 
47 | /***/ })
48 | 
49 | },["aQZI"]);


--------------------------------------------------------------------------------
/test-webpack/dist/pageB-34be879b3374ac9b2072.js:
--------------------------------------------------------------------------------
 1 | webpackJsonp(["pageB"],{
 2 | 
 3 | /***/ "645S":
 4 | /***/ (function(module, exports) {
 5 | 
 6 | // removed by extract-text-webpack-plugin
 7 | 
 8 | /***/ }),
 9 | 
10 | /***/ "JIOT":
11 | /***/ (function(module, exports, __webpack_require__) {
12 | 
13 | __webpack_require__("lhZZ")
14 | const sum = __webpack_require__("MvGc")
15 | const _ = __webpack_require__("M4fF")
16 | 
17 | function component() {
18 |   var element = document.createElement('div')
19 | 
20 |   // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
21 |   element.innerHTML = _.join(['Hello', 'webpack'], ' ')
22 | 
23 |   return element
24 | }
25 | 
26 | document.body.appendChild(component())
27 | 
28 | 
29 | /***/ }),
30 | 
31 | /***/ "MvGc":
32 | /***/ (function(module, exports, __webpack_require__) {
33 | 
34 | /* WEBPACK VAR INJECTION */(function(module) {__webpack_require__("645S")
35 | module.export = function sum(a, b) {
36 |   return a + b
37 | }
38 | 
39 | /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__("3IRH")(module)))
40 | 
41 | /***/ }),
42 | 
43 | /***/ "lhZZ":
44 | /***/ (function(module, exports) {
45 | 
46 | // removed by extract-text-webpack-plugin
47 | 
48 | /***/ })
49 | 
50 | },["JIOT"]);


--------------------------------------------------------------------------------
/test-html&css/6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |   <div id="container">
13 |     <button id="all">all</button>
14 |   </div>
15 | </body>
16 | <script>
17 |   function foo(n) {
18 |     var oCon = document.getElementById('container')
19 |     for (let i = 1; i <= n; ++i) {
20 |       var oButton = document.createElement('button')
21 |       oButton.innerText = i
22 |       oCon.appendChild(oButton)
23 |     }
24 |     oCon.addEventListener('click', function (e) {
25 |       if (e.target.nodeName === 'BUTTON' && e.target.innerText !== 'all') {
26 |         alert(e.target.innerText)
27 |       }
28 |     })
29 |     return function () {
30 |       let oAll = document.getElementById('all')
31 |       oAll.addEventListener('click', function () {
32 |         let i = 1
33 |         while (i <= n) {
34 |           (function (j) {
35 |             setTimeout(function () {
36 |               console.log(j)
37 |             }, j * 1000)
38 |           })(i)
39 |           i++
40 |         }
41 |       })
42 |     }
43 |   }
44 |   let bar = foo(5)
45 |   bar()
46 | </script>
47 | 
48 | </html>


--------------------------------------------------------------------------------
/test-webpack/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const webpack = require('webpack')
 3 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
 4 | module.exports = {
 5 |   entry: {
 6 |     pageA: './src/a.js',
 7 |     pageB: './src/b.js',
 8 |     vendor: ['lodash']
 9 |   },
10 |   output: {
11 |     filename: '[name]-[chunkhash].js',
12 |     path: path.resolve(__dirname, 'dist')
13 |   },
14 |   module: {
15 |     rules: [
16 |       {
17 |         test: /\.css$/,
18 |         use: ExtractTextPlugin.extract({
19 |           fallback: 'style-loader',
20 |           use: ['css-loader?minimize']
21 |         })
22 |       },
23 |       {
24 |         test: /\.less$/, // ['css-loader?minimize&-autoprefixer!postcss-loader', 'less-loader']
25 |         use: ExtractTextPlugin.extract({
26 |           fallback: 'style-loader',
27 |           use: ['css-loader?minimize', 'less-loader']
28 |         })
29 |       }
30 |     ]
31 |   },
32 |   plugins: [
33 |     new ExtractTextPlugin('[name]-[contenthash].css'),
34 |     new webpack.HashedModuleIdsPlugin(),
35 |     new webpack.NamedChunksPlugin(chunk => {
36 |       if (chunk.name) {
37 |         return chunk.name
38 |       }
39 | 
40 |       return chunk
41 |         .mapModules(m => path.relative(m.context, m.request))
42 |         .join('_')
43 |     }),
44 |     new webpack.optimize.CommonsChunkPlugin({
45 |       name: 'vendor',
46 |       minChunks: Infinity
47 |     }),
48 |     new webpack.optimize.CommonsChunkPlugin({
49 |       name: 'runtime'
50 |     })
51 |   ]
52 | }
53 | 


--------------------------------------------------------------------------------
/koa2/compose.js:
--------------------------------------------------------------------------------
 1 | function compose(middleware) {
 2 |   // 传入的 middleware 参数必须是数组
 3 |   if (!Array.isArray(middleware))
 4 |     throw new TypeError('Middleware stack must be an array!')
 5 |   // middleware 数组的元素必须是函数
 6 |   for (const fn of middleware) {
 7 |     if (typeof fn !== 'function')
 8 |       throw new TypeError('Middleware must be composed of functions!')
 9 |   }
10 | 
11 |   // 返回一个函数闭包, 保持对 middleware 的引用
12 |   return function(context, next) {
13 |     // 这里的 context 参数是作为一个全局的设置, 所有中间件的第一个参数就是传入的 context, 这样可以
14 |     // 在 context 中对某个值或者某些值做"洋葱处理"
15 | 
16 |     // 解释一下传入的 next, 这个传入的 next 函数是在所有中间件执行后的"最后"一个函数, 这里的"最后"并不是真正的最后,
17 |     // 而是像上面那个图中的圆心, 执行完圆心之后, 会返回去执行上一个中间件函数(middleware[length - 1])剩下的逻辑
18 | 
19 |     // index 是用来记录中间件函数运行到了哪一个函数
20 |     let index = -1
21 |     // 执行第一个中间件函数
22 |     return dispatch(0)
23 | 
24 |     function dispatch(i) {
25 |       // i 是洋葱模型的记录已经运行的函数中间件的下标, 如果一个中间件里面运行两次 next, 那么 i 是会比 index 小的.
26 |       // 如果对这个地方不清楚可以查看下面的图
27 |       if (i <= index)
28 |         return Promise.reject(new Error('next() called multiple times'))
29 |       index = i
30 |       let fn = middleware[i]
31 |       if (i === middleware.length) {
32 |         // 这里的 next 就是一开始 compose 传入的 next, 意味着当中间件函数数列执行完后, 执行这个 next 函数, 即圆心
33 |         fn = next
34 |       }
35 |       // 如果没有函数, 直接返回空值的 Promise
36 |       if (!fn) return Promise.resolve()
37 |       try {
38 |         // 为什么这里要包一层 Promise?
39 |         // 因为 async 需要后面是 Promise, 然后 next 函数返回值就是 dispatch 函数的返回值, 所以运行 async next(); 需要 next 包一层 Promise
40 |         // next 函数是固定的, 可以执行下一个函数
41 |         return Promise.resolve(
42 |           fn(context, function next() {
43 |             return dispatch(i + 1)
44 |           })
45 |         )
46 |       } catch (err) {
47 |         return Promise.reject(err)
48 |       }
49 |     }
50 |   }
51 | }
52 | 
53 | async function first(ctx, next) {
54 |   console.log('1')
55 |   // async 与 co + yield 的模型不同, await 是需要后面是 promise 的函数, 并且自己执行一次, 而 co 是自己拿到 value 然后帮你自动执行.
56 |   await next()
57 |   await next() // 两次调用 next
58 |   console.log(ctx)
59 | }
60 | 
61 | async function second(ctx, next) {
62 |   console.log('2')
63 |   await next()
64 | }
65 | 
66 | async function third(ctx, next) {
67 |   console.log('3')
68 |   await next()
69 |   console.log('4')
70 | }
71 | 
72 | const middleware = [first, second, third]
73 | 
74 | const com = compose(middleware)
75 | 
76 | com('ctx', function() {
77 |   console.log('hey')
78 | })
79 | 


--------------------------------------------------------------------------------
/test-javascript/4.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | var _createClass = (function() {
 4 |   function defineProperties(target, props) {
 5 |     for (var i = 0; i < props.length; i++) {
 6 |       var descriptor = props[i]
 7 |       descriptor.enumerable = descriptor.enumerable || false
 8 |       descriptor.configurable = true
 9 |       if ('value' in descriptor) descriptor.writable = true
10 |       Object.defineProperty(target, descriptor.key, descriptor)
11 |     }
12 |   }
13 |   return function(Constructor, protoProps, staticProps) {
14 |     if (protoProps) defineProperties(Constructor.prototype, protoProps)
15 |     if (staticProps) defineProperties(Constructor, staticProps)
16 |     return Constructor
17 |   }
18 | })()
19 | 
20 | function _possibleConstructorReturn(self, call) {
21 |   if (!self) {
22 |     throw new ReferenceError(
23 |       "this hasn't been initialised - super() hasn't been called"
24 |     )
25 |   }
26 |   return call && (typeof call === 'object' || typeof call === 'function')
27 |     ? call
28 |     : self
29 | }
30 | 
31 | function _inherits(subClass, superClass) {
32 |   if (typeof superClass !== 'function' && superClass !== null) {
33 |     throw new TypeError(
34 |       'Super expression must either be null or a function, not ' +
35 |         typeof superClass
36 |     )
37 |   }
38 |   subClass.prototype = Object.create(superClass && superClass.prototype, {
39 |     constructor: {
40 |       value: subClass,
41 |       enumerable: false,
42 |       writable: true,
43 |       configurable: true
44 |     }
45 |   })
46 |   if (superClass)
47 |     Object.setPrototypeOf
48 |       ? Object.setPrototypeOf(subClass, superClass)
49 |       : (subClass.__proto__ = superClass)
50 | }
51 | 
52 | function _classCallCheck(instance, Constructor) {
53 |   if (!(instance instanceof Constructor)) {
54 |     throw new TypeError('Cannot call a class as a function')
55 |   }
56 | }
57 | 
58 | var A = (function() {
59 |   function A() {
60 |     _classCallCheck(this, A)
61 |   }
62 | 
63 |   _createClass(A, [
64 |     {
65 |       key: 'a',
66 |       value: function a() {}
67 |     }
68 |   ])
69 | 
70 |   return A
71 | })()
72 | 
73 | var B = (function(_A) {
74 |   _inherits(B, _A)
75 | 
76 |   function B() {
77 |     _classCallCheck(this, B)
78 | 
79 |     return _possibleConstructorReturn(
80 |       this,
81 |       (B.__proto__ || Object.getPrototypeOf(B)).call(this)
82 |     )
83 |   }
84 | 
85 |   _createClass(B, [
86 |     {
87 |       key: 'b',
88 |       value: function b() {}
89 |     }
90 |   ])
91 | 
92 |   return B
93 | })(A)
94 | 


--------------------------------------------------------------------------------
/test-webpack/dist/bundle.js:
--------------------------------------------------------------------------------
 1 | /******/ (function(modules) { // webpackBootstrap
 2 | /******/ 	// The module cache
 3 | /******/ 	var installedModules = {};
 4 | /******/
 5 | /******/ 	// The require function
 6 | /******/ 	function __webpack_require__(moduleId) {
 7 | /******/
 8 | /******/ 		// Check if module is in cache
 9 | /******/ 		if(installedModules[moduleId]) {
10 | /******/ 			return installedModules[moduleId].exports;
11 | /******/ 		}
12 | /******/ 		// Create a new module (and put it into the cache)
13 | /******/ 		var module = installedModules[moduleId] = {
14 | /******/ 			i: moduleId,
15 | /******/ 			l: false,
16 | /******/ 			exports: {}
17 | /******/ 		};
18 | /******/
19 | /******/ 		// Execute the module function
20 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21 | /******/
22 | /******/ 		// Flag the module as loaded
23 | /******/ 		module.l = true;
24 | /******/
25 | /******/ 		// Return the exports of the module
26 | /******/ 		return module.exports;
27 | /******/ 	}
28 | /******/
29 | /******/
30 | /******/ 	// expose the modules object (__webpack_modules__)
31 | /******/ 	__webpack_require__.m = modules;
32 | /******/
33 | /******/ 	// expose the module cache
34 | /******/ 	__webpack_require__.c = installedModules;
35 | /******/
36 | /******/ 	// define getter function for harmony exports
37 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
38 | /******/ 		if(!__webpack_require__.o(exports, name)) {
39 | /******/ 			Object.defineProperty(exports, name, {
40 | /******/ 				configurable: false,
41 | /******/ 				enumerable: true,
42 | /******/ 				get: getter
43 | /******/ 			});
44 | /******/ 		}
45 | /******/ 	};
46 | /******/
47 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
48 | /******/ 	__webpack_require__.n = function(module) {
49 | /******/ 		var getter = module && module.__esModule ?
50 | /******/ 			function getDefault() { return module['default']; } :
51 | /******/ 			function getModuleExports() { return module; };
52 | /******/ 		__webpack_require__.d(getter, 'a', getter);
53 | /******/ 		return getter;
54 | /******/ 	};
55 | /******/
56 | /******/ 	// Object.prototype.hasOwnProperty.call
57 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
58 | /******/
59 | /******/ 	// __webpack_public_path__
60 | /******/ 	__webpack_require__.p = "";
61 | /******/
62 | /******/ 	// Load entry module and return exports
63 | /******/ 	return __webpack_require__(__webpack_require__.s = 0);
64 | /******/ })
65 | /************************************************************************/
66 | /******/ ([
67 | /* 0 */
68 | /***/ (function(module, exports) {
69 | 
70 | function component() {
71 |   var element = document.createElement('div')
72 | 
73 |   // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
74 |   element.innerHTML = _.join(['Hello', 'webpack'], ' ')
75 | 
76 |   return element
77 | }
78 | 
79 | document.body.appendChild(component())
80 | 
81 | 
82 | /***/ })
83 | /******/ ]);


--------------------------------------------------------------------------------
/xss&csrf.md:
--------------------------------------------------------------------------------
 1 | ### 关于 XSS 攻击和 CSRF 攻击的总结
 2 | 
 3 | > 对于跨站脚本攻击（XSS 攻击）的理解和总结
 4 | 
 5 | **什么是 XSS 攻击**
 6 | 
 7 | * XSS 是跨站脚本攻击的缩写，是一种网站应用程序的安全漏洞攻击，是代码注入的一种。
 8 | * 通常是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。
 9 | * 这些恶意网页程序通常是 JavaScript，但实际上也可以包括 Java，VBScript，ActiveX，Flash 或者甚至是普通的 HTML。
10 | * 攻击成功后，攻击者可能得到更高的权限（如执行一些操作）、私密网页内容、会话和 cookie 等各种内容。
11 | 
12 | **XSS 攻击基本原理---代码注入**
13 | 
14 | 在 web 的世界里有各种各样的语言，于是乎对于语句的解析大家各不相同，有一些语句在一种语言里是合法的，但是在另外一种语言里是非法的。这种二义性使得黑客可以用代码注入的方式进行攻击——将恶意代码注入合法代码里隐藏起来，再诱发恶意代码，从而进行各种各样的非法活动。只要破坏跨层协议的数据/指令的构造，我们就能攻击。历史悠久的 SQL 注入和 XSS 注入都是这种攻击方式的典范。现如今，随着参数化查询的普及，我们已经离 SQL 注入很远了。但是，历史同样悠久的 XSS 却没有远离我们。
15 | XSS 的基本实现思路很简单——比如持久型 XSS 通过一些正常的站内交互途径，例如发布评论，提交含有 JavaScript 的内容文本。这时服务器端如果没有过滤或转义掉这些脚本，作为内容发布到了页面上，其他用户访问这个页面的时候就会运行这些脚本，从而被攻击。
16 | 
17 | **攻击分类**
18 | 
19 | * 反射型 XSS
20 | 
21 | 反射性 XSS，也就是被动的非持久性 XSS。诱骗用户点击 URL 带攻击代码的链接，服务器解析后响应，在返回的响应内容中隐藏和嵌入攻击者的 XSS 代码，被浏览器执行，从而攻击用户。
22 | URL 可能被用户怀疑，但是可以通过短网址服务将之缩短，从而隐藏自己。
23 | 
24 | * 持久型 XSS
25 | 
26 | 也叫存储型 XSS——主动提交恶意数据到服务器，攻击者在数据中嵌入代码，这样当其他用户请求后，服务器从数据库中查询数据并发给用户，用户浏览此类页面时就可能受到攻击。可以描述为:恶意用户的 HTML 或 JS 输入服务器->进入数据库->服务器响应时查询数据库->用户浏览器。
27 | 
28 | **防范**
29 | 
30 | * 使用 XSS Filter
31 | 
32 | 输入过滤，对用户提交的数据进行有效性验证，仅接受指定长度范围内并符合我们期望格式的的内容提交，阻止或者忽略除此外的其他任何数据。
33 | 
34 | 输出转义，当需要将一个字符串输出到 Web 网页时，同时又不确定这个字符串中是否包括 XSS 特殊字符，为了确保输出内容的完整性和正确性，输出 HTML 属性时可以使用 HTML 转义编码（HTMLEncode）进行处理，输出到<script>中，可以进行 JS 编码。
35 | 
36 | * 使用 HttpOnly Cookie
37 | 
38 | 将重要的 cookie 标记为 httponly，这样的话当浏览器向 Web 服务器发起请求的时就会带上 cookie 字段，但是在 js 脚本中却不能访问这个 cookie，这样就避免了 XSS 攻击利用 JavaScript 的 document.cookie 获取 cookie
39 | 
40 | > 对于跨站伪造请求（CSRF）的理解和总结
41 | 
42 | **什么是 CSRF 攻击**
43 | 
44 | CSRF 是跨站请求伪造的缩写，也被称为 XSRF， 是一种挟制用户在当前已登录的 Web 应用程序上执行非本意的操作的攻击方法。跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。因为 CSRF 攻击利用的是冲着浏览器分不清发起请求是不是真正的用户本人。，也就是说，简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。
45 | 
46 | **XSS 攻击基本原理**
47 | 
48 | * 最简单的 csrf 攻击
49 | 
50 | 用户 Alice 登录和访问某银行网站 A，保留 cookie。
51 | Alice 被某些信息诱导访问危险网站 B。危险网站 B 上有一个`<img>`标签：`<img src="http://www.examplebank.com/account=Alice&amount=1000&payfor=Badman" >`
52 | 这个标签的 src 不指向一张图片，而是一个 http 请求，这个请求向银行要求将 Alice 的 1000 元转给 Badman，由于 Alice 的浏览器上有 cookie，这样浏览器发出的这个请求就能得到响应执行。这样 Alice 的钱就被偷了。
53 | 
54 | * 进阶攻击
55 | 
56 | 危险网站可以伪造一个表单并隐藏，并在自己网站的 onload 事件中，触发这个表单的提交事件，就可以改 GET 攻击为 POST 攻击
57 | 
58 | **防范**
59 | 
60 | * 最基本的手段：涉及敏感操作的请求改为 POST 请求
61 | 
62 | 这个方法的确可以防范一些 CSRF 攻击，但是对于进阶攻击就无能为力了——POST 请求一样可以伪造。
63 | 
64 | 输出转义，当需要将一个字符串输出到 Web 网页时，同时又不确定这个字符串中是否包括 XSS 特殊字符，为了确保输出内容的完整性和正确性，输出 HTML 属性时可以使用 HTML 转义编码（HTMLEncode）进行处理，输出到<script>中，可以进行 JS 编码。
65 | 
66 | * 用户操作限制——验证码机制
67 | 
68 | 方法：添加验证码来识别是不是用户主动去发起这个请求，由于一定强度的验证码机器无法识别，因此危险网站不能伪造一个完整的请求。优点：简单粗暴，低成本，可靠，能防范 99.99%的攻击者。缺点：对用户不友好。
69 | 
70 | * 请求来源限制——验证 HTTP Referer 字段
71 | 
72 | 方法：在 HTTP 请求头中有一个字段叫 Referer，它记录了请求的来源地址。 服务器需要做的是验证这个来源地址是否合法，如果是来自一些不受信任的网站，则拒绝响应。
73 | 
74 | 优点：零成本，简单易实现。
75 | 
76 | 缺点：由于这个方法严重依赖浏览器自身，因此安全性全看浏览器。
77 | 
78 | 兼容性不好：每个浏览器对于 Referer 的具体实现可能有差别。
79 | 
80 | 并不一定可靠：在一些古老的垃圾浏览器中，Referer 可以被篡改。对用户不友好：Referer 值会记录下用户的访问来源，有些用户认为这样会侵犯到他们自己的隐私权。因此有些用户可能会开启浏览器防止跟踪功能，不提供 Referer，从而导致正常用户请求被拒绝。
81 | 
82 | * 额外的验证机制--token 的使用
83 | 
84 | [token](http://www.imooc.com/article/13552)
85 | 


--------------------------------------------------------------------------------
/test-javascript/2.js:
--------------------------------------------------------------------------------
  1 | // code man 实现
  2 | function CodingMan(name) {
  3 |   function Man(name) {
  4 |     setTimeout(() => {
  5 |       console.log(`This is ${name}`)
  6 |     }, 0)
  7 |   }
  8 |   Man.prototype.sleep = function(time) {
  9 |     let now = new Date()
 10 |     let delay = time * 1000
 11 | 
 12 |     setTimeout(() => {
 13 |       while (new Date() - now < delay) {}
 14 |       console.log(`wake up after ${time}`)
 15 |     }, 0)
 16 |     return this
 17 |   }
 18 |   Man.prototype.eat = function(food) {
 19 |     setTimeout(() => {
 20 |       console.log(`Eat ${food}`)
 21 |     }, 0)
 22 |     return this
 23 |   }
 24 |   Man.prototype.sleepFirst = function(time) {
 25 |     let now = new Date()
 26 |     let delay = time * 1000
 27 | 
 28 |     while (new Date() - now < delay) {}
 29 |     console.log(`wake up after ${time}`)
 30 |     return this
 31 |   }
 32 | 
 33 |   return new Man(name)
 34 | }
 35 | 
 36 | CodingMan('Peter')
 37 | CodingMan('Peter')
 38 |   .sleep(3)
 39 |   .eat('dinner')
 40 | CodingMan('Peter')
 41 |   .eat('dinner')
 42 |   .eat('supper')
 43 | CodingMan('Peter')
 44 |   .sleepFirst(5)
 45 |   .eat('supper')
 46 | 
 47 | //2、实现一个compose
 48 | let fn1 = a => a + 1
 49 | let fn2 = b => b + 2
 50 | let fn3 = c => c + 3
 51 | 
 52 | let fnArr = [fn1, fn2, fn3]
 53 | function componse(fnArr) {
 54 |   return arg => fnArr.reduceRight((composed, fn) => fn(composed), arg)
 55 | }
 56 | 
 57 | console.log(componse(fnArr)(100))
 58 | 
 59 | // 实现bind
 60 | Function.prototype._bind = function(context) {
 61 |   let func = this // 当前上下文
 62 |   let params = [].slice.call(arguments, 1) // 参数
 63 |   return function() {
 64 |     params = params.concat([].slice.call(arguments, 0))
 65 |     func.apply(context, params)
 66 |   }
 67 | }
 68 | 
 69 | let obj = {
 70 |   id: '1'
 71 | }
 72 | function a() {
 73 |   console.log(this, arguments)
 74 | }
 75 | 
 76 | let fn = a._bind(obj, obj.id)
 77 | fn()
 78 | 
 79 | // 当我们使用new 关键字的时候发生了什么？
 80 | function new2(func) {
 81 |   let o = Object.create(func.prototype)
 82 |   let k = func.call(o)
 83 | 
 84 |   return Object.prototype.toString.call(k) === '[object Object]' ? k : o
 85 | }
 86 | 
 87 | // 封装一个promisify
 88 | var promisify = (func, ctx) => {
 89 |   // 返回一个新的function
 90 |   return function() {
 91 |     // 初始化this作用域
 92 |     var ctx = ctx || this
 93 |     // 新方法返回的promise
 94 |     return new Promise((resolve, reject) => {
 95 |       // 调用原来的非promise方法func，绑定作用域，传参，以及callback（callback为func的最后一个参数）
 96 |       func.call(ctx, ...arguments, function() {
 97 |         // 将回调函数中的的第一个参数error单独取出
 98 |         var args = Array.prototype.map.call(arguments, item => item)
 99 |         var err = args.shift()
100 |         // 判断是否有error
101 |         if (err) {
102 |           reject(err)
103 |         } else {
104 |           // 没有error则将后续参数resolve出来
105 |           args = args.length > 1 ? args : args[0]
106 |           resolve(args)
107 |         }
108 |       })
109 |     })
110 |   }
111 | }
112 | var func1 = function(a, b, c, callback) {
113 |   callback(null, a + b + c)
114 | }
115 | var func2 = promisify(func1)
116 | // 调用后输出6
117 | func1(1, 2, 3, (err, result) => {
118 |   if (!err) {
119 |     console.log(result) //输出6
120 |   }
121 | })
122 | func2(1, 2, 3).then(console.log) //输出6
123 | 


--------------------------------------------------------------------------------
/test-javascript/1.js:
--------------------------------------------------------------------------------
  1 | function parse(obj, exp) {
  2 |   exp
  3 |     .replace('[', '.')
  4 |     .replace(']', '')
  5 |     .split('.')
  6 |     .map(ele => (obj = obj[ele.trim()]))
  7 |   return obj || undefined
  8 | }
  9 | var object = {
 10 |   b: { c: 4 },
 11 |   d: [{ e: 5 }, { e: 6 }]
 12 | }
 13 | 
 14 | function getNthFibonacci(count) {
 15 |   if (count < 0) return 0
 16 |   if (count <= 1) return 1
 17 |   let first = 1
 18 |   let second = 1
 19 |   let third = 0
 20 |   for (let i = 2; i < count; i++) {
 21 |     third = first + second
 22 |     first = second
 23 |     second = third
 24 |   }
 25 |   return third
 26 | }
 27 | 
 28 | function sum() {
 29 |   let result = 0
 30 |   for (let i = 0; i < arguments.length; i++) {
 31 |     result += (!isNaN(arguments[i]) && parseFloat(arguments[i])) || 0
 32 |   }
 33 |   return result.toFixed(3) * 1000 / 1000
 34 | }
 35 | 
 36 | // 数组去重
 37 | function unique(array) {
 38 |   let res = []
 39 |   for (let i = 0, l = array.length - 1; i < l; ++i) {
 40 |     var current = array[i]
 41 |     if (res.indexOf(current) === -1) {
 42 |       res.push(current)
 43 |     }
 44 |   }
 45 | 
 46 |   return res
 47 | }
 48 | function unique2(array) {
 49 |   var res = array.filter((item, index, arr) => {
 50 |     return array.indexOf(item) !== index
 51 |   })
 52 |   return res
 53 | }
 54 | 
 55 | function unique3(array) {
 56 |   return array
 57 |     .concat()
 58 |     .sort()
 59 |     .filter((item, index, array) => {
 60 |       return !index || item !== array[index - 1]
 61 |     })
 62 | }
 63 | 
 64 | function unique4(array) {
 65 |   return [...new Set(array)]
 66 |   //return Array.from(new Set(array))
 67 | }
 68 | 
 69 | function debounce(func, wait, immediate) {
 70 |   let timer = null
 71 |   return function() {
 72 |     let context = this
 73 |     let args = arguments
 74 |     if (timer) clearTimeout(timer)
 75 |     if (immediate) {
 76 |       var callNow = !timer
 77 |       timer = setTimeout(function() {
 78 |         timer = null
 79 |       }, wait)
 80 |       if (callNow) func.apply(context, args)
 81 |     } else {
 82 |       timer = setTimeout(function() {
 83 |         func.apply(context, args)
 84 |       }, wait)
 85 |     }
 86 |   }
 87 | }
 88 | 
 89 | function throttle1(func, wait) {
 90 |   var context, args
 91 |   var previous = 0
 92 |   return function() {
 93 |     var now = +new Date()
 94 |     context = this
 95 |     args = arguments
 96 |     if (now - previous > wait) {
 97 |       func.apply(context, args)
 98 |       previous = now
 99 |     }
100 |   }
101 | }
102 | 
103 | function throttle(func, wait) {
104 |   var timer = null
105 |   var context, args
106 |   return function() {
107 |     context = this
108 |     args = arguments
109 | 
110 |     if (!timer) {
111 |       timer = setTimeout(function() {
112 |         timer = null
113 |         func.apply(context, args)
114 |       }, wait)
115 |     }
116 |   }
117 | }
118 | 
119 | function shallowCopy(obj) {
120 |   if (typeof obj !== 'object') return
121 |   var newObj = obj instanceof Array ? [] : {}
122 |   for (var key in obj) {
123 |     if (obj.hasOwnProperty(key)) {
124 |       newObj[key] = obj[key]
125 |     }
126 |   }
127 |   return newObj
128 | }
129 | 
130 | function deepCopy(obj) {
131 |   if (typeof obj !== 'object') return
132 |   var newObj = obj instanceof Array ? [] : {}
133 |   for (var key in obj) {
134 |     if (obj.hasOwnProperty(key)) {
135 |       newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key]
136 |     }
137 |   }
138 |   return newObj
139 | }
140 | 


--------------------------------------------------------------------------------
/brower.md:
--------------------------------------------------------------------------------
  1 | #### 浏览器相关知识点总结
  2 | 
  3 | > 1、浏览器进程
  4 | 
  5 | * 主进程：只有一个主要是负责各个进程之间的调控
  6 | * gpu 进程：只要是用于 3d 渲染
  7 | * 后台修复进程
  8 | * tab 进程（浏览器渲染进程）：开多个 tab 的时候相互之间不会受到影响。控制各个 tab 自己的渲染，脚本执行，事件处理等等事情。
  9 | * 插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
 10 | 
 11 | > 2、多线程的浏览器渲染进程
 12 | 
 13 | * GUI 渲染线程
 14 | * JS 引擎线程（单线程）
 15 | * 事件触发线程
 16 | * 定时器线程
 17 | * 网络请求线程
 18 | 
 19 | > 3、网络请求都是单独的线程
 20 | 
 21 | 每次网络请求时都需要开辟单独的线程进行，譬如如果 URL 解析到 http 协议，就会新建一个网络线程去处理资源下载
 22 | 
 23 | 因此浏览器会根据解析出得协议，开辟一个网络线程，前往请求资源（这里，暂时理解为是浏览器内核开辟的，如有错误，后续修复）
 24 | 
 25 | > 4、tcp/ip 并发限制
 26 | 
 27 | 浏览器在同一域名下的并发 tcp 链接限制一般是 2 到 10 个。
 28 | 
 29 | > 5、performance
 30 | 
 31 | ```js
 32 | // 计算加载时间
 33 | function getPerformanceTiming() {
 34 |   var performance = window.performance
 35 | 
 36 |   if (!performance) {
 37 |     // 当前浏览器不支持
 38 |     console.log('你的浏览器不支持 performance 接口')
 39 |     return
 40 |   }
 41 | 
 42 |   var t = performance.timing
 43 |   var times = {}
 44 | 
 45 |   //【重要】页面加载完成的时间
 46 |   //【原因】这几乎代表了用户等待页面可用的时间
 47 |   times.loadPage = t.loadEventEnd - t.navigationStart
 48 | 
 49 |   //【重要】解析 DOM 树结构的时间
 50 |   //【原因】反省下你的 DOM 树嵌套是不是太多了！
 51 |   times.domReady = t.domComplete - t.responseEnd
 52 | 
 53 |   //【重要】重定向的时间
 54 |   //【原因】拒绝重定向！比如，http://example.com/ 就不该写成 http://example.com
 55 |   times.redirect = t.redirectEnd - t.redirectStart
 56 | 
 57 |   //【重要】DNS 查询时间
 58 |   //【原因】DNS 预加载做了么？页面内是不是使用了太多不同的域名导致域名查询的时间太长？
 59 |   // 可使用 HTML5 Prefetch 预查询 DNS ，见：[HTML5 prefetch](http://segmentfault.com/a/1190000000633364)
 60 |   times.lookupDomain = t.domainLookupEnd - t.domainLookupStart
 61 | 
 62 |   //【重要】读取页面第一个字节的时间
 63 |   //【原因】这可以理解为用户拿到你的资源占用的时间，加异地机房了么，加CDN 处理了么？加带宽了么？加 CPU 运算速度了么？
 64 |   // TTFB 即 Time To First Byte 的意思
 65 |   // 维基百科：https://en.wikipedia.org/wiki/Time_To_First_Byte
 66 |   times.ttfb = t.responseStart - t.navigationStart
 67 | 
 68 |   //【重要】内容加载完成的时间
 69 |   //【原因】页面内容经过 gzip 压缩了么，静态资源 css/js 等压缩了么？
 70 |   times.request = t.responseEnd - t.requestStart
 71 | 
 72 |   //【重要】执行 onload 回调函数的时间
 73 |   //【原因】是否太多不必要的操作都放到 onload 回调函数里执行了，考虑过延迟加载、按需加载的策略么？
 74 |   times.loadEvent = t.loadEventEnd - t.loadEventStart
 75 | 
 76 |   // DNS 缓存时间
 77 |   times.appcache = t.domainLookupStart - t.fetchStart
 78 | 
 79 |   // 卸载页面的时间
 80 |   times.unloadEvent = t.unloadEventEnd - t.unloadEventStart
 81 | 
 82 |   // TCP 建立连接完成握手的时间
 83 |   times.connect = t.connectEnd - t.connectStart
 84 | 
 85 |   return times
 86 | }
 87 | ```
 88 | 
 89 | > 6、性能优化
 90 | 
 91 | * DNS 查询 ============
 92 | 
 93 | 1、控制域名数量，推荐是两个。
 94 | 
 95 | 2、使用缓存 Last-Modified，If-Modified-Since，ETag，If-None-Match，Expires，Cache-Control。
 96 | 
 97 | 3、使用 CDN，提高缓存命中率。
 98 | 
 99 | 4、服务根据需要设置合理的 TTL。
100 | 
101 | 5、DNS 的预解析。
102 | 
103 | * 建立连接=================
104 | 
105 | 1、合并请求，减少请求次数。
106 | 
107 | 2、持久连接 keep-alive，避免重新建立连接。
108 | 
109 | 3、避免重定向。
110 | 
111 | * 发送请求 ===================
112 | 
113 | 1、请求数据最小化。
114 | 
115 | 2、避免重定向。
116 | 
117 | * 接收数据================
118 | 
119 | 1、使用缓存 Last-Modified，If-Modified-Since，ETag，If-None-Match，Expires，Cache-Control
120 | 
121 | 2、降低传输数据量，避免冗余的数据，适当的压缩后再进行传输。
122 | 
123 | 3、传输过程中的压缩。
124 | 
125 | 4、使用 CDN，缩短传输链路。
126 | 
127 | * 解析 DOM 树 ===================
128 | 
129 | 1、简化 DOM 结构，嵌套不要太深。
130 | 
131 | 2、css 放头部，js 放底部（？有争议~）
132 | 
133 | 3、延迟或者异步加载资源。
134 | 
135 | 4、按照规范书写 html 文档，浏览器会有很多容错机制，但是这些会带来一些额外的消耗。所以没有必要的情况下，请严格按照 html 规范来。
136 | 
137 | 5、同步加载的 js 除了会阻塞页面的解析，如果其中有修改 DOM 结构的相关代码，还会导致 DOM 重新解析，非常划不来。
138 | 
139 | * DOMContentLoaded 事件耗时
140 | 
141 | 1、避免多余操作，延迟加载或者按需加载。
142 | 
143 | 2、精简代码。
144 | 
145 | 3、提高执行效率。
146 | 
147 | 
148 | 
149 | 优化方向
150 | 
151 | 优化手段
152 | 
153 | 请求数量
154 | 
155 | 合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
156 | 
157 | 请求带宽
158 | 
159 | 开启GZip，精简JavaScript，移除重复脚本，图像优化
160 | 
161 | 缓存利用
162 | 
163 | 使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存
164 | 
165 | 页面结构
166 | 
167 | 将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
168 | 
169 | 代码校验
170 | 
171 | 避免CSS表达式，避免重定向
172 | 


--------------------------------------------------------------------------------
/test-drag/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |   <title>测试拖拽</title>
  9 |   <style>
 10 |     .test {
 11 |       width: 100px;
 12 |       height: 100px;
 13 |       background: red;
 14 |     }
 15 |   </style>
 16 | </head>
 17 | 
 18 | <body>
 19 |   <div class="test"></div>
 20 | </body>
 21 | <script>
 22 |   ;
 23 |   (function () {
 24 |     function getTransform() {
 25 |       let transform = ''
 26 |       let divStyle = document.createElement('div').style
 27 | 
 28 |       let transfomArr = ['transform', 'webkitTransform', 'msTransform', 'oTransform', 'mozTransform']
 29 | 
 30 |       let i = 0
 31 |       let len = transfomArr.length
 32 | 
 33 |       for (; i < len; ++i) {
 34 |         if (transfomArr[i] in divStyle) {
 35 |           return transform = transfomArr[i]
 36 |         }
 37 |       }
 38 |       return transform
 39 |     }
 40 |     let transform = getTransform()
 41 | 
 42 |     function Drag(selector) {
 43 |       this.startX = 0
 44 |       this.startY = 0
 45 |       this.sourceX = 0
 46 |       this.sourceY = 0
 47 |       this.elem = typeof selector === 'Object' ? selector : document.querySelector(selector)
 48 |       this.init()
 49 |     }
 50 |     Drag.prototype.init = function () {
 51 |       this.setDrag()
 52 |     }
 53 |     // 获取当前节点的属性
 54 |     Drag.prototype.getStyle = function (property) {
 55 |       return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(this.elem, false)[
 56 |         property] : this.elem.currentStyle[property]
 57 |     }
 58 |     // 获取当前元素坐标
 59 |     Drag.prototype.getPosition = function () {
 60 |       let pos = {
 61 |         x: 0,
 62 |         y: 0
 63 |       }
 64 |       if (transform) {
 65 |         let transformVal = this.getStyle(transform)
 66 |         if (transformVal === 'none') {
 67 |           this.elem.style[transform] = 'tanslate(0,0)'
 68 |         } else {
 69 |           let temp = transformVal.match(/-?\d+/g)
 70 |           pos = {
 71 |             x: parseInt(temp[4].trim()),
 72 |             y: parseInt(temp[5].trim())
 73 |           }
 74 |         }
 75 |       } else {
 76 |         if (this.getStyle('position') === 'static') {
 77 |           this.elem.style.position = 'relative'
 78 |         } else {
 79 |           pos = {
 80 |             x: parseInt(this.getStyle('left') ? this.getStyle('right') : 0),
 81 |             y: parseInt(this.getStyle('top') ? this.getStyle('bottom') : 0)
 82 |           }
 83 |         }
 84 |       }
 85 |       return pos
 86 |     }
 87 |     // 给当前元素设置坐标
 88 |     Drag.prototype.setPosition = function (pos) {
 89 |       if (transform) {
 90 |         this.elem.style[transform] = `translate(${pos.x}px,${pos.y}px)`
 91 |       } else {
 92 |         this.elem.style.left = `${pos.x}px`
 93 |         this.elem.style.top = `${pos.y}px`
 94 |       }
 95 |     }
 96 |     // 给当前元素添加事件
 97 |     Drag.prototype.setDrag = function () {
 98 |       let self = this
 99 |       this.elem.addEventListener('mousedown', start, false)
100 | 
101 |       function start(e) {
102 |         self.startX = e.pageX
103 |         self.startY = e.pageY
104 | 
105 |         let pos = self.getPosition()
106 |         self.sourceX = pos.x
107 |         self.sourceY = pos.y
108 | 
109 |         document.addEventListener('mousemove', move, false)
110 |         document.addEventListener('mouseup', end, false)
111 |       }
112 | 
113 |       function move(e) {
114 |         let currentX = e.pageX
115 |         let currentY = e.pageY
116 | 
117 |         let distanceX = currentX - self.startX
118 |         let distanceY = currentY - self.startY
119 |         // 设置移动的距离
120 |         self.setPosition({
121 |           x: (self.sourceX + distanceX).toFixed(),
122 |           y: (self.sourceY + distanceY).toFixed()
123 |         })
124 |       }
125 | 
126 |       function end(e) {
127 |         document.removeEventListener('mousemove', move)
128 |         document.removeEventListener('mouseup', end)
129 |       }
130 |     }
131 |     window.Drag = Drag
132 |   })()
133 | 
134 |   new Drag('.test')
135 | </script>
136 | 
137 | </html>


--------------------------------------------------------------------------------
/javascript.md:
--------------------------------------------------------------------------------
  1 | ### JavaScript 相关知识总结
  2 | 
  3 | > JavaScript 的基本数据类型和引用数据类型分别有哪些？
  4 | 
  5 | * 基本类型的数据：Undefined, Null, String, Number, Boolean, Symbol(ES6 新增)
  6 | * 引用类型的数据：Object, Array, RegExp, Date, Function, 基本包装类型（Boolean, Number, String 这是三种特殊的引用类型，也可以算作基本类型）
  7 | * 需要注意的是，typeof 的返回值（number, boolean, string, object, function, undefined, symbol）和 JS 的基本类型不一样。
  8 | 
  9 | > JavaScript 哪些类型存在堆上，哪些存在栈上？
 10 | 
 11 | * 栈：原始数据类型
 12 | 
 13 |   原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
 14 | 
 15 | * 堆：引用数据类型
 16 | 
 17 |   * 引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能
 18 |   * 引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体
 19 | 
 20 | > JavaScript 继承有的方式总结
 21 | 
 22 | * 原型继承
 23 | 
 24 |   ```js
 25 |   let Base = function() {
 26 |     this.name = 'base'
 27 |     this.toString = function() {
 28 |       return this.name
 29 |     }
 30 |   }
 31 | 
 32 |   let Sub = function() {}
 33 |   Sub.prototype = new Base()
 34 |   Sub.name = 'Sub'
 35 | 
 36 |   let a = new Sub()
 37 |   console.log(a instanceof Sub) // true
 38 |   console.log(a instanceof Base) // true
 39 |   ```
 40 | 
 41 |   原型链继承是一种非常传统的继承方式。如果从 instanceof 关键字来看，实例既是父类的实例，也是子类的实例。但是这样的继承也有一个明显的问题：子类区别于父类的属性和方法需要在完成原型链继承之后再进行，同时，由于使用了 prototype ，无法实现多重继承
 42 | 
 43 | * 构造继承
 44 | 
 45 | ```js
 46 | let Base = function() {
 47 |   this.name = 'Base'
 48 |   this.toString = function() {
 49 |     return this.name
 50 |   }
 51 | }
 52 | 
 53 | let Sub = function() {
 54 |   Base.call(this)
 55 |   this.name = 'Sub'
 56 | }
 57 | ```
 58 | 
 59 | 这种继承解决了原型链继承的问题，但它也有一些问题：使用 instanceof 运算符的时候会发现，它的实例并不是父类的实例（因为父类没有在它的原型链上）
 60 | 
 61 | * 实例继承
 62 | 
 63 | ```js
 64 | let Base = function() {
 65 |   this.name = 'Base'
 66 |   this.toString = function() {
 67 |     return this.name
 68 |   }
 69 | }
 70 | let Sub = function() {
 71 |   let instance = new Base()
 72 |   instance.name = 'Sub'
 73 | 
 74 |   return instance
 75 | }
 76 | ```
 77 | 
 78 | 这种继承方法只能强行被归类为继承。因为它实际上是返回了一个父类的实例，与子类可以说毫无关系。同样，这种方法也不支持多继承。
 79 | 
 80 | * 拷贝继承
 81 | 
 82 | ```js
 83 | let Base = function() {
 84 |   this.name = 'Base'
 85 |   this.toString = function() {
 86 |     return this.name
 87 |   }
 88 | }
 89 | 
 90 | let Sub = function() {
 91 |   let base = new Base()
 92 |   for (let i in base) {
 93 |     Sub.prototype[i] = base[i]
 94 |   }
 95 |   Sub.prototype[name] = 'Sub'
 96 | }
 97 | ```
 98 | 
 99 | 首先，只有可枚举的对象类型才能使用 foreach 的方式获取到，其次，这种写法真的快绝迹了。它的优点是可以实现多继承，缺点是写起来真的难受，而且效率很低。
100 | 
101 | > 原型链的简单描述
102 | 
103 | * 判断某个对象是不是另一个对象的原型
104 | 
105 | ```js
106 | // ES3
107 | Object.prototype.isPrototypeOf(o) // 返回true值可以确定Object.prototype就是o对象的原型
108 | // ES5
109 | Object.getPrototypeOf(o) === Object.prototype
110 | // ES6
111 | o.__proto__ === Object.prototype
112 | // 设置一个原型
113 | Object.setPrototypeOf(Child.prototype, Father.prototype) // 将父类的原型设置为子类的原型
114 | ```
115 | 
116 | 原型链是 JavaScript 实现继承最重要的一种方式。每一个对象都有自己的原型对象，根原型对象没有原型，所以其 **proto** 属性值为 null 。在调用时，如果访问的对象属性没有找到，JavaScript 会顺着原型链继续往下找，直到触碰到根原型为止。
117 | 
118 | > ES5 和 ES6 中的继承的区别
119 | 
120 | ![ES5](https://user-images.githubusercontent.com/10307282/37136881-681c1d28-22de-11e8-946e-03983e9e4426.png)
121 | ![ES6](https://user-images.githubusercontent.com/10307282/37136911-818dac0e-22de-11e8-9990-483273493e92.png)
122 | 
123 | > JavaScript 垃圾回收机制
124 | 
125 | **标记清除**
126 | 
127 | 这是 JavaScript 最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。至于怎么标记有很多种方式，比如特殊位的反转、维护一个列表等，这些并不重要，重要的是使用什么策略，原则上讲不能够释放进入环境的变量所占的内存，它们随时可能会被调用的到。
128 | 
129 | 垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了，因为环境中的变量已经无法访问到这些变量了，然后垃圾回收器相会这些带有标记的变量机器所占空间。
130 | 
131 | **引用计数**
132 | 
133 | 在低版本 IE 中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加 1，如果该变量的值变成了另外一个，则这个值得引用次数减 1，当这个值的引用次数变为 0 的时候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为 0 的值占用的空间。
134 | 
135 | > JavaScript 内存泄漏
136 | 
137 | * 全局变量引起的内存泄漏
138 | 
139 | ```js
140 | function leaks() {
141 |   leak = 'xxxxxx' //leak 成为一个全局变量，不会被回收
142 | }
143 | ```
144 | 
145 | * 闭包引起的内存泄漏
146 | 
147 | ```js
148 | var leaks = (function() {
149 |   var leak = 'xxxxxx' // 被闭包所引用，不会被回收
150 |   return function() {
151 |     console.log(leak)
152 |   }
153 | })()
154 | ```
155 | 
156 | * dom 清空或删除时，事件未清除导致的内存泄漏
157 | 
158 | ```html
159 | <div id="container">  
160 | </div>
161 | ```
162 | 
163 | ```js
164 | $('#container')
165 |   .bind('click', function() {
166 |     console.log('click')
167 |   })
168 |   .remove() // 未把事件移除
169 | ```
170 | 
171 | * 子元素存在引用引起的内存泄漏
172 | 
173 | > AMD,CMD,CommonJs, ES6 module 各种模块规范
174 | 
175 | * AMD：requirejs 在推广过程中对模块定义的规范化产出，提前执行，推崇依赖前置
176 | * CMD：seajs 在推广过程中对模块定义的规范化产出，延迟执行，推崇依赖就近
177 | * CommonJs：模块输出的是一个值的 copy，运行时加载，加载的是一个对象（module.exports 属性），该对象只有在脚本运行完才会生成
178 | * ES6 Module：模块输出的是一个值的引用，编译时输出接口，ES6 模块不是对象，它对外接口只是一种静态定义，在代码静态解析阶段就会生成。
179 | 
180 | > Hybrid 应用知识点总结
181 | 


--------------------------------------------------------------------------------
/http.md:
--------------------------------------------------------------------------------
  1 | ### http 和 https 相关知识点总结
  2 | 
  3 | ##### 网络模型
  4 | 
  5 | * 7 层网络模型
  6 | 
  7 | ![7层网络模型](http://img.blog.csdn.net/20160127132708631?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
  8 | 
  9 | 1》应用层：提供给操作系统或者应用程序，用来进行网络通信的标准接口
 10 | 
 11 | 2》表示层：不同的 pc 机拥有不同的编码方式，需要在这里进行转换，转换成网络通信中采用的标准表现形式
 12 | 
 13 | 3》会话层：负责在不同的 PC 的不同进程之间建立或者拆除连接，另外，还有插入同步点的机制（保证断线重新从这个位置传输）
 14 | 
 15 | 4》传输层：负责两个主机之间的端对端的数据连接&传输
 16 | 
 17 | 5》网络层：选择合适的路由，职责就是正确的找着目的站
 18 | 
 19 | 6》数据链路层：负责在两个相邻的节点之间准确的传输数据（以帧为单位，每一帧：数据+控制信息）
 20 | 
 21 | 7》物理层：让原始的数据比特流能在物理介质上传输
 22 | 
 23 | * 4 层网络模型
 24 | 
 25 | ![4层网络模型](http://img.blog.csdn.net/20160127132929760?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
 26 | 
 27 | 1》应用层：向网络应用提供接口，并且对应用内的数据格式进行统一编码
 28 | 
 29 | 2》传输层：负责两个主机之间的端对端的数据连接&传输&传输控制、错误恢复
 30 | 
 31 | 3》网络层：选择合适的路由，职责就是正确的找着目的站
 32 | 
 33 | 4》网络接口层：负责通过网络发送和接收 IP 数据报
 34 | 
 35 | ##### DNS 查询过程
 36 | 
 37 | * 查找浏览器缓存
 38 | * 查找系统缓存
 39 | * 查找路由器缓存
 40 | * 查找 ISP DNS 缓存
 41 | * 递归从根域开始搜索
 42 | 
 43 | **耗时**
 44 | 
 45 | ```js
 46 | let pt = window.performance.timeing
 47 | let dns = pt.domainLookupEnd - pt.domainLookuoStart
 48 | ```
 49 | 
 50 | **优化建议**
 51 | 
 52 | * 控制域名数量，推荐是两个。
 53 | * 使用缓存 Last-Modified，If-Modified-Since，ETag，If-None-Match，Expires，Cache-Control。
 54 | * 使用 CDN，提高缓存命中率。
 55 | * 服务根据需要设置合理的 TTL。
 56 | * DNS 的预解析。
 57 | 
 58 | ##### 缓存协商
 59 | 
 60 | **Last-Modified 与 If-Modified-Since**
 61 | 
 62 | * 浏览器第一次请求资源时，服务器会把资源的最新修改时间 Last-Modified:Thu, 29 Dec 2011 18:23:55 GMT 放在响应头中返回给浏览器
 63 | * 第二次请求时，浏览器就会把上一次服务器返回的修改时间放在请求头 If-Modified-Since:Thu, 29 Dec 2011 18:23:55 发送给服务器，服务器就会拿这个时间跟服务器上的资源的最新修改时间进行对比
 64 | 
 65 | 如果两者相等或者大于服务器上的最新修改时间，那么表示浏览器的缓存是有效的，此时缓存会命中，服务器就不再返回内容给浏览器了，同时 Last-Modified 头也不会返回，因为资源没被修改，返回了也没什么意义。如果没命中缓存则最新修改的资源连同 Last-Modified 头一起返回。
 66 | 
 67 | **ETag 与 If-None-Match**
 68 | 
 69 | ETag/If-None-Match 与 Last-Modified/If-Modified-Since 的流程其实是类似的，唯一的区别是它基于资源的内容的摘要信息（比如 MD5 hash）来判断
 70 | 
 71 | 浏览器发送第二次请求时，会把第一次的响应头信息 ETag 的值放在 If-None-Match 的请求头中发送到服务器，与最新的资源的摘要信息对比，如果相等，取浏览器缓存，否则内容有更新，最新的资源连同最新的摘要信息返回。用 ETag 的好处是如果因为某种原因到时资源的修改时间没改变，那么用 ETag 就能区分资源是不是有被更新。
 72 | 
 73 | ##### 加密算法相关
 74 | 
 75 | > 1、对称加密
 76 | 
 77 | 有流式、分组两种，加密和解密都是使用的同一个密钥。
 78 | 
 79 | 例如：DES、AES-GCM、ChaCha20-Poly1305 等，最常用的就是 DES
 80 | 
 81 | > 2、非对称加密
 82 | 
 83 | 加密使用的密钥和解密使用的密钥是不相同的，分别称为：公钥、私钥，公钥和算法都是公开的，私钥是保密的。非对称加密算法性能较低，但是安全性超强，由于其加密特性，非对称加密算法能加密的数据长度也是有限的。
 84 | 
 85 | 例如：RSA、DSA、ECDSA、 DH、ECDHE,最常用的就是 RSA
 86 | 
 87 | > 3、哈希算法
 88 | 
 89 | 将任意长度的信息转换为较短的固定长度的值，通常其长度要比信息小得多，且算法不可逆。
 90 | 
 91 | 例如：MD5、SHA-1、SHA-2、SHA-256 等
 92 | 
 93 | > 4、数字签名
 94 | 
 95 | 签名就是在信息的后面再加上一段内容（信息经过 hash 后的值），可以证明信息没有被修改过。hash 值一般都会加密后（也就是签名）再和信息一起发送，以保证这个 hash 值不被修改。
 96 | 
 97 | ##### http 详情
 98 | 
 99 | > 1、http 访问过程
100 | 
101 | 主要就是三次握手的过程。
102 | ![三次握手](http://pic4.zhimg.com/v2-e367a5e3bc28fb7fd083ddc201e7e693_b.png)
103 | 从上图可以看出客户端和服务端之间的数据传输都是“裸奔”的
104 | 
105 | ![中间人](http://pic4.zhimg.com/v2-831635f04f3732e866af0ec6ce1040e7_b.png)
106 | 从上图可以看出，http 请求在发送过程中，客户端与服务端之间没有任何身份确认的步骤，数据全部是裸奔在网络上。有人存心想攻击你的话，直接在客户端和服务端之间截获消息的传递。消息截获后，黑客就可以冒充服务端给客户端返回消息了。这一现象也是我们常说的劫持。
107 | 
108 | 所以 http 传输所面临的风险就是：
109 | 
110 | * 窃听风险：黑客可以获取通信内容
111 | * 篡改风险：黑客可以修改通信内容
112 | * 冒充风险：黑客可以冒充他人的身份参与通信
113 | 
114 | ##### http 向 https 演化的过程
115 | 
116 | > 1、传输内容对称加密
117 | 
118 | 因为信息泄露大概率是因为信息的明文传输，所以想到这点，于是就产生了加密传输内容的方法。（黑客在不知道密钥的情况下是不能解密来知道传输内容的）
119 | ![传输内容对称加密](http://pic1.zhimg.com/v2-8d8138e883455e4d316d644c79a89314_b.png)
120 | 
121 | 这种方式还是有很多缺点的：
122 | 
123 | * 不同客户端和服务端众多，那么就要维护很多的密钥，导致维护成本会很高
124 | * 因为每个客户端和服务端的安全级别不一样，所以也会导致密钥的泄露
125 | 
126 | > 2、传输内容非对称加密
127 | 
128 | 因为传输内容对称加密的缺点，那么我们就可以换种思路了。就将传输内容非对称加密后传输。
129 | ![传输内容非对称加密](http://pic2.zhimg.com/v2-660bec42419281a9ec47c029089a77c9_b.png)
130 | 
131 | 如上图所示，客户端用公钥对请求内容加密，服务器使用私钥对内容解密，反之亦然，但上述过程也存在缺点：
132 | 
133 | * 公钥是公开的（也就是黑客也会有公钥），所以第 ④ 步私钥加密的信息，如果被黑客截获，其可以使用公钥进行解密，获取其中的内容
134 | 
135 | > 3、对称加密和非对称加密的结合
136 | 
137 | 通过上面的两步，我们发现两种方式都有着自己的优缺点。那么我们就将这两种方式结合起来。取其精华，去其糟粕，发挥各自的优点就好了。
138 | 
139 | ![两种方式结合](http://pic3.zhimg.com/v2-22570e3e422de7951ce7c5c3e8435312_b.png)
140 | 
141 | * 如上图所示第 ③ 步时，客户端说：（咱们后续回话采用对称加密吧，这是对称加密的算法和对称密钥）这段话用公钥进行加密，然后传给服务器
142 | * 服务器收到信息后，用私钥解密，提取出对称加密算法和对称密钥后，服务器说：（好的）对称密钥加密
143 | * 后续两者之间信息的传输就可以使用对称加密的方式了
144 | 
145 | 上面还是会有问题的：
146 | 
147 | * 第一步中的公钥怎么获取
148 | * 怎么确信当前送到服务器是真实的服务器而不是黑客呢？
149 | 
150 | > 4、获取公钥和身份确认
151 | 
152 | ![获取公钥和身份确认](http://pic3.zhimg.com/v2-f2ac6567fa1a3c10e73eba59eab3823a_b.png)
153 | 
154 | **获取公钥**
155 | 
156 | * 提供一个下载公钥的地址，回话前让客户端去下载。（缺点：下载地址有可能是假的；客户端每次在回话前都先去下载公钥也很麻烦）
157 | * 回话开始时，服务器把公钥发给客户端（缺点：黑客冒充服务器，发送给客户端假的公钥）
158 | 
159 | 那有木有一种方式既可以安全的获取公钥，又能防止黑客冒充呢？ 那就需要用到终极武器了：SSL 证书
160 | 
161 | ![带证书](http://pic1.zhimg.com/v2-5e2241fae8b593ff7f3b3a308ef81c10_b.png)
162 | 
163 | **SSL 证书包括：**
164 | 
165 | * 证书颁发机构的 CA
166 | * 证书的有效期
167 | * 公钥
168 | * 证书所有者
169 | * 签名
170 | * 等等
171 | 
172 | > 5、SSL 证书校验
173 | 
174 | * 首先浏览器读取证书中的证书所有者、有效期等信息进行一一校验
175 | * 浏览器开始查找操作系统中已内置的受信任的证书发布机构 CA，与服务器发来的证书中的颁发者 CA 比对，用于校验证书是否为合法机构颁发
176 | * 如果找不到，浏览器就会报错，说明服务器发来的证书是不可信任的。
177 | * 如果找到，那么浏览器就会从操作系统中取出 颁发者 CA 的公钥，然后对服务器发来的证书里面的签名进行解密
178 | * 浏览器使用相同的 hash 算法计算出服务器发来的证书的 hash 值，将这个计算的 hash 值与证书中签名做对比
179 | * 对比结果一致，则证明服务器发来的证书合法，没有被冒充
180 | * 此时浏览器就可以读取证书中的公钥，用于后续加密了
181 | 


--------------------------------------------------------------------------------
/prototype.md:
--------------------------------------------------------------------------------
  1 | ### 开始
  2 | 
  3 | 原型和原型链的理解和学习
  4 | 
  5 | ### 正文
  6 | 
  7 | 从一个常见的例子开始吧：
  8 | 
  9 | ```js
 10 | function Person() {}
 11 | var person = new Person()
 12 | person.name = 'kobe'
 13 | console.log(person.name) // kobe
 14 | ```
 15 | 
 16 | 这个简单的例子就是我们定义一个构造函数，然后使用这个构造函数生成一个 person 的实例对象。给这个实例对象添加一个属性 name。接下来我们就来分析一波。
 17 | 
 18 | > 0、对象
 19 | 
 20 | 浓情原型和原型链就要弄清楚对象。
 21 | 
 22 | * 普通对象
 23 |   * 最普通的对象：有\_\_proto\_\_属性，没有 prototype 属性
 24 |   * 原型对象
 25 | * 函数对象
 26 |   * 凡是通过 new Function()创建的都是函数对象。（拥有\_\_proto\_\_、prototype 属性（指向原型对象））
 27 | 
 28 | ```js
 29 | //函数对象  
 30 | function F1(){}
 31 | var F2 = function(){}
 32 | var F3 = function("n1","n2","return n1+n2")
 33 | console.log(typeof F1); //function  
 34 | console.log(typeof F2); //function  
 35 | console.log(typeof F3); //function  
 36 | console.log(typeof Object); //function  
 37 | console.log(typeof Array); //function  
 38 | console.log(typeof String); //function  
 39 | console.log(typeof Date); //function  
 40 | console.log(typeof Function); //function
 41 | ```
 42 | 
 43 | > 1、prototype
 44 | 
 45 | 学习前端的人或多或少都听说过 prototype, 我们在很多的地方都可以看到对 prototype 的使用，就像下面的例子。
 46 | 
 47 | ```js
 48 | function Person() {}
 49 | // prototype 本身只有函数才会有的
 50 | Person.prototype.name = 'kobe'
 51 | var person1 = new Person()
 52 | var person2 = new Person()
 53 | 
 54 | console.log(person1.name) // kobe
 55 | console.log(person2.name) // kobe
 56 | ```
 57 | 
 58 | 看了上面的例子，你可能会有个疑问。就是这个函数的 prototype 属性到底是指向什么地方呢？是指向这个函数的原型么？
 59 | 
 60 | 我们可以去浏览器里面试着访问下`Person.prototype`我们就可以发现端倪。经过手动测试，我们发现函数的 prototype 是指向的一个对象，这个对象就是传说中的实例的原型，就是上面`person1`和`person2`的原型。这个对象包含两个属性：
 61 | 
 62 | ```js
 63 | {
 64 |   contructor: xxx,
 65 |   __proto__: Object
 66 | }
 67 | ```
 68 | 
 69 | 对于我们来说，我们怎么理解这个原型对象呢？我们可以大致理解为：JavaScript 函数对象在创建的时候，都会为它关联一个对象，这个对象就是我们说的原型。
 70 | 
 71 | ```js
 72 | // 注意：系统内置的函数对象有下面
 73 | Function, Object, Array, String, Number
 74 | Function.prototype
 75 | Object.prototype
 76 | Array.prototype
 77 | String.prototype
 78 | Number.prototype
 79 | ```
 80 | 
 81 | 下面这个图能够简单说明构造函数和实例原型对象（其实原型对象就是构造函数的一个实例对象）之间的关系。
 82 | ![image](https://raw.githubusercontent.com/mqyqingfeng/Blog/master/Images/prototype1.png)
 83 | 
 84 | 看了上面的关系后，那实例和构造函数还有实例原型的关系是什么呢？
 85 | 
 86 | > 2、\_\_proto\_\_
 87 | 
 88 | 每一个 JavaScript 对象都有一个属性 \_\_proto\_\_,这个属性是指向的该对象的是原型。
 89 | 
 90 | ```js
 91 | function Person() {}
 92 | var person = new Person()
 93 | console.log(person.__proto__ === Person.prototype) // true
 94 | ```
 95 | 
 96 | 所以根据上面的代码可以得到下面的图：
 97 | 
 98 | ![ssss](https://github.com/mqyqingfeng/Blog/raw/master/Images/prototype2.png)
 99 | 
100 | `person`就是我们通过 new 方式创建的普通对象。因此它有\_\_proto\_\_属性。根据上面的代码就可以验证上面的图了。
101 | 
102 | 既然实例和构造函数都可以通过自己的方式指向原型对象，那我们的原型能够反向指向构造函数和实例么？
103 | 
104 | > 4、contructor
105 | 
106 | 上面的问题的答案就是：指向实例是没有办法了，指向构造函数倒是有办法。不能指向实例主要是因为一个构造函数能够创建多个实例。
107 | 
108 | 最后就有了下面的关系：
109 | 
110 | ```js
111 | function Person() {}
112 | console.log(Person === Person.prototype.constructor) // true
113 | ```
114 | 
115 | 更新下关系图：
116 | ![xxx](https://github.com/mqyqingfeng/Blog/raw/master/Images/prototype3.png)
117 | 
118 | 经过上面的一系列的 操作，我们可以得出如下结论：
119 | 
120 | ```js
121 | function Person() {}
122 | 
123 | var person = new Person()
124 | 
125 | console.log(person.__proto__ == Person.prototype) // true
126 | console.log(Person.prototype.constructor == Person) // true
127 | console.log(Person.prototype.isPrototypeOf(person)) // true
128 | console.log(Object.getPrototypeOf(person) === Person.prototype) // true
129 | ```
130 | 
131 | 看了上面的一系列操作，大致的理清楚了构造函数，实例，以及原型三者之间的关系。
132 | 
133 | > 5、实例与原型
134 | 
135 | 当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。
136 | 
137 | ```js
138 | function Person() {}
139 | Person.prototype.name = 'Curry'
140 | var person = new Person()
141 | person.name = 'kobe'
142 | console.log(person.name)
143 | delete person.name
144 | console.log(person.name)
145 | ```
146 | 
147 | 看看上面这个例子，我给实例对象 person 添加了一个属性 name，当我们打印 person.name 的时候我们就可以看到输出的是 curry。当我们把这个属性删掉的时候就会打印出 kobe 了。这就验证了上面的话，先找对象自身的属性，找不到就延原型链找，直到最后。
148 | 
149 | > 6、原型的原型
150 | 
151 | 在控制台里面打印 Person.prototype 的时候我们可以看到打印出来的对象（普通对象）是有\_\_proto\_\_属性的。所以我们可以展开查看下。
152 | ![image](https://user-images.githubusercontent.com/10307282/34213261-a6fd85fa-e5d9-11e7-8f50-20c88df03abd.png)
153 | 因为原型也是一个普通对象，那么就可以通过 Object 的方式构造。下面就是构造一个对象的方式
154 | 
155 | ```js
156 | var obj = new Object()
157 | obj.name = 'Kevin'
158 | console.log(obj.name) // Kevin
159 | ```
160 | 
161 | 原型对象是由下面的方式
162 | 
163 | ```js
164 | var Person.prototype = new Object()
165 | Person.prototype.xxx = 'xxx'
166 | ```
167 | 
168 | 所以可以理解 Person.prototype.\_\_proto\_\_指向的是 Object.prototype。
169 | ![xxx](https://github.com/mqyqingfeng/Blog/raw/master/Images/prototype4.png)
170 | 
171 | > 7、原型链与最上级
172 | 
173 | Object.prototype 的原型是啥呢？
174 | 
175 | ```js
176 | console.log(Object.prototype.__proto__ === null) // true
177 | ```
178 | 
179 | 最后这个 null 是什么呢？null 值表示一个空对象指针。null 表示“没有对象”，即该处不应该有值。所以 Object.prototype.\_\_proto\_\_ 的值为 null 跟 Object.prototype 没有原型，其实表达了一个意思。
180 | 
181 | 所以查找属性的时候查到 Object.prototype 就可以停止查找了。
182 | 
183 | 最后产生的原型链的图：
184 | 
185 | ![xxxx](https://github.com/mqyqingfeng/Blog/raw/master/Images/prototype5.png)
186 | 
187 | ### 感谢
188 | 
189 | [深入理解原型与原型链](https://github.com/mqyqingfeng/Blog/issues/2)
190 | [JS 重点整理之 JS 原型链彻底搞清楚](https://zhuanlan.zhihu.com/p/22787302)
191 | 《你不知道的 javascript 上卷》《javascript 高级程序设计》
192 | 


--------------------------------------------------------------------------------
/koa2/application.md:
--------------------------------------------------------------------------------
  1 | #### 关于 koa2 的源码学习总结
  2 | 
  3 | 通过一个简单的例子来看看 koa2 的源码
  4 | **示例**
  5 | 
  6 | 原生 http 请求方式
  7 | 
  8 | ```js
  9 | const http = require('http')
 10 | 
 11 | const server = http.createServer((req, res) => {
 12 |   res.statusCode = 200
 13 |   res.setHeader('Content-Type', 'text/plain')
 14 |   res.end('Hello World\n')
 15 | })
 16 | 
 17 | server.listen(3000)
 18 | ```
 19 | 
 20 | koa2 使用方式
 21 | 
 22 | ```js
 23 | const Koa = require('koa')
 24 | const app = new Koa()
 25 | 
 26 | app.use(ctx => {
 27 |   ctx.body = 'Hello Koa'
 28 | })
 29 | 
 30 | app.listen(3000)
 31 | ```
 32 | 
 33 | > 1、构造函数 `application.js`
 34 | 
 35 | 这个文件里面主要是在做`new` 一个`koa`实例的初始化工作，以及收集中间件等操作。关键操作就是下面这几步。
 36 | 
 37 | ```js
 38 | this.middleware = [] // 用于存储中间件的数组
 39 | this.context = Object.create(context) // 创建上下文
 40 | this.request = Object.create(request) // 创建request
 41 | this.response = Object.create(response) // 创建response
 42 | ```
 43 | 
 44 | > 2、注册中间件
 45 | 
 46 | ```js
 47 | use(fn) {
 48 |   if (typeof fn !== 'function') throw new TypeError('middleware must be a function!');
 49 |   if (isGeneratorFunction(fn)) {
 50 |     deprecate('Support for generators will be removed in v3. ' +
 51 |               'See the documentation for examples of how to convert old middleware ' +
 52 |               'https://github.com/koajs/koa/blob/master/docs/migration.md');
 53 |     fn = convert(fn);
 54 |   }
 55 |   debug('use %s', fn._name || fn.name || '-');
 56 |   this.middleware.push(fn);
 57 |   return this;
 58 | }
 59 | ```
 60 | 
 61 | 初始化构造函数完成后，如果我们有很多中间件的话，那么这个时候就是调用 use 来注册中间件了。上面就是注册中间件的方法。这个方法里面主要就是判断，传进来的是不是一个函数，如果是一个迭代器函数，那么会调用 convert 方法，将迭代器函数转化成为普通的函数，当然还会提示你不要用迭代器了。最后就是将传进来的函数存在构造函数里面声明的 middleware 数组中。
 62 | 
 63 | > 3、调用 listen 方法
 64 | 
 65 | ```js
 66 | listen(...args) {
 67 |   debug('listen');
 68 |   const server = http.createServer(this.callback());
 69 |   return server.listen(...args);
 70 | }
 71 | ```
 72 | 
 73 | 在构造函数里面初始化完成后，按照我们的使用方式就是注册中间件，然后在最后的时候调用 listen 方法。这个方法很简单，就是以向原生 http.createServer 传入一个函数的形式来创建自身的一个实例。listen 方法就做了这么简单的一个事。
 74 | 
 75 | > 4、在看 this.callback()
 76 | 
 77 | 看到这里我们就明白我们实际上最关心的就是这个 this.callback 函数。其实这个也是 koa2 的核心所在。
 78 | 
 79 | ```js
 80 | callback() {
 81 |   const fn = compose(this.middleware);
 82 |   // 这里是调用Emitter类里面的方法
 83 |   if (!this.listeners('error').length) this.on('error', this.onerror);
 84 |   // 包装函数，将ctx和中间件和并函数传给内部
 85 |   const handleRequest = (req, res) => {
 86 |     // 基于req和req封装出我们使用的ctx对象。
 87 |     const ctx = this.createContext(req, res);
 88 |     return this.handleRequest(ctx, fn);
 89 |   };
 90 | 
 91 |   return handleRequest;
 92 | }
 93 | ```
 94 | 
 95 | this.callback 执行的结果是一个函数，这个函数的主要作用就是根据 req 获取请求信息，然后向 res 中写入返回内容。具体做法就是在一开始的时候合并中间件返回一个函数。然后基于 res 和 req 封装出我们平时使用的 ctx 对象。接着就是调用 koa 自己的 handleRequest 方法，将合并好的中间件函数和刚生成的 ctx 对象传入。
 96 | 
 97 | > 5、创建 ctx---createContext
 98 | 
 99 | 前面已经说过了 ctx 这个对象就是基于 res 和 res 封装来的，接下来就看看是怎么封装的。
100 | 
101 | ```js
102 | createContext(req, res) {
103 |   const context = Object.create(this.context);
104 |   const request = context.request = Object.create(this.request);
105 |   const response = context.response = Object.create(this.response);
106 |   context.app = request.app = response.app = this;
107 |   context.req = request.req = response.req = req;
108 |   context.res = request.res = response.res = res;
109 |   request.ctx = response.ctx = context;
110 |   request.response = response;
111 |   response.request = request;
112 |   context.originalUrl = request.originalUrl = req.url;
113 |   context.cookies = new Cookies(req, res, {
114 |     keys: this.keys,
115 |     secure: request.secure
116 |   });
117 |   request.ip = request.ips[0] || req.socket.remoteAddress || '';
118 |   context.accept = request.accept = accepts(req);
119 |   context.state = {};
120 |   return context;
121 | }
122 | ```
123 | 
124 | 上面的主要操作就是创建了三个对象 context，request，response
125 | 
126 | > 6、关于 handleRequest 函数
127 | 
128 | 上面我们知道传进 handleRequest 方法的参数就是经过封装的 ctx 和合并后的中间件函数。并且将他们的原型指定为我们 app 中对应的对象，然后将原生的 req 和 res 赋值给相应的属性，就完成了。
129 | 
130 | ```js
131 | handleRequest(ctx, fnMiddleware) {
132 |   const res = ctx.res;
133 |   res.statusCode = 404;
134 |   const onerror = err => ctx.onerror(err);
135 |   // response 辅助函数
136 |   const handleResponse = () => respond(ctx);
137 |   // onFinished 是确保一个流在关闭、完成和报错时都会执行相应的回调函数
138 |   onFinished(res, onerror);
139 |   return fnMiddleware(ctx).then(handleResponse).catch(onerror);
140 | }
141 | ```
142 | 
143 | 这里做的主要是将封装的 ctx 传给合并后的中间件函数 fnMiddleware，中间件函数返回的是一个 promise。resolve 的话就调用 handleResponse，reject 的话就调用 onerror。handleResponse 里面主要做的操作就是通过 ctx 中的信息向 res 中写入信息。
144 | 
145 | > 7、respond 的分析
146 | 
147 | respond 方法就是一个辅助方法，主要作用就是根据 ctx 中的相关信息向 res 中写入信息。
148 | 
149 | ```js
150 | function respond(ctx) {
151 |   // allow bypassing koa
152 |   if (false === ctx.respond) return
153 | 
154 |   const res = ctx.res
155 |   if (!ctx.writable) return
156 | 
157 |   let body = ctx.body
158 |   const code = ctx.status
159 | 
160 |   // ignore body
161 |   if (statuses.empty[code]) {
162 |     // strip headers
163 |     ctx.body = null
164 |     return res.end()
165 |   }
166 | 
167 |   if ('HEAD' == ctx.method) {
168 |     if (!res.headersSent && isJSON(body)) {
169 |       ctx.length = Buffer.byteLength(JSON.stringify(body))
170 |     }
171 |     return res.end()
172 |   }
173 | 
174 |   // status body
175 |   if (null == body) {
176 |     body = ctx.message || String(code)
177 |     if (!res.headersSent) {
178 |       ctx.type = 'text'
179 |       ctx.length = Buffer.byteLength(body)
180 |     }
181 |     return res.end(body)
182 |   }
183 | 
184 |   // responses
185 |   if (Buffer.isBuffer(body)) return res.end(body)
186 |   if ('string' == typeof body) return res.end(body)
187 |   if (body instanceof Stream) return body.pipe(res)
188 | 
189 |   // body: json
190 |   body = JSON.stringify(body)
191 |   if (!res.headersSent) {
192 |     ctx.length = Buffer.byteLength(body)
193 |   }
194 |   res.end(body)
195 | }
196 | ```
197 | 


--------------------------------------------------------------------------------
/test-webpack/dist/runtime-12168eb5ce29428d6ad5.js:
--------------------------------------------------------------------------------
  1 | /******/ (function(modules) { // webpackBootstrap
  2 | /******/ 	// install a JSONP callback for chunk loading
  3 | /******/ 	var parentJsonpFunction = window["webpackJsonp"];
  4 | /******/ 	window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
  5 | /******/ 		// add "moreModules" to the modules object,
  6 | /******/ 		// then flag all "chunkIds" as loaded and fire callback
  7 | /******/ 		var moduleId, chunkId, i = 0, resolves = [], result;
  8 | /******/ 		for(;i < chunkIds.length; i++) {
  9 | /******/ 			chunkId = chunkIds[i];
 10 | /******/ 			if(installedChunks[chunkId]) {
 11 | /******/ 				resolves.push(installedChunks[chunkId][0]);
 12 | /******/ 			}
 13 | /******/ 			installedChunks[chunkId] = 0;
 14 | /******/ 		}
 15 | /******/ 		for(moduleId in moreModules) {
 16 | /******/ 			if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
 17 | /******/ 				modules[moduleId] = moreModules[moduleId];
 18 | /******/ 			}
 19 | /******/ 		}
 20 | /******/ 		if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);
 21 | /******/ 		while(resolves.length) {
 22 | /******/ 			resolves.shift()();
 23 | /******/ 		}
 24 | /******/ 		if(executeModules) {
 25 | /******/ 			for(i=0; i < executeModules.length; i++) {
 26 | /******/ 				result = __webpack_require__(__webpack_require__.s = executeModules[i]);
 27 | /******/ 			}
 28 | /******/ 		}
 29 | /******/ 		return result;
 30 | /******/ 	};
 31 | /******/
 32 | /******/ 	// The module cache
 33 | /******/ 	var installedModules = {};
 34 | /******/
 35 | /******/ 	// objects to store loaded and loading chunks
 36 | /******/ 	var installedChunks = {
 37 | /******/ 		"runtime": 0
 38 | /******/ 	};
 39 | /******/
 40 | /******/ 	// The require function
 41 | /******/ 	function __webpack_require__(moduleId) {
 42 | /******/
 43 | /******/ 		// Check if module is in cache
 44 | /******/ 		if(installedModules[moduleId]) {
 45 | /******/ 			return installedModules[moduleId].exports;
 46 | /******/ 		}
 47 | /******/ 		// Create a new module (and put it into the cache)
 48 | /******/ 		var module = installedModules[moduleId] = {
 49 | /******/ 			i: moduleId,
 50 | /******/ 			l: false,
 51 | /******/ 			exports: {}
 52 | /******/ 		};
 53 | /******/
 54 | /******/ 		// Execute the module function
 55 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 56 | /******/
 57 | /******/ 		// Flag the module as loaded
 58 | /******/ 		module.l = true;
 59 | /******/
 60 | /******/ 		// Return the exports of the module
 61 | /******/ 		return module.exports;
 62 | /******/ 	}
 63 | /******/
 64 | /******/ 	// This file contains only the entry chunk.
 65 | /******/ 	// The chunk loading function for additional chunks
 66 | /******/ 	__webpack_require__.e = function requireEnsure(chunkId) {
 67 | /******/ 		var installedChunkData = installedChunks[chunkId];
 68 | /******/ 		if(installedChunkData === 0) {
 69 | /******/ 			return new Promise(function(resolve) { resolve(); });
 70 | /******/ 		}
 71 | /******/
 72 | /******/ 		// a Promise means "currently loading".
 73 | /******/ 		if(installedChunkData) {
 74 | /******/ 			return installedChunkData[2];
 75 | /******/ 		}
 76 | /******/
 77 | /******/ 		// setup Promise in chunk cache
 78 | /******/ 		var promise = new Promise(function(resolve, reject) {
 79 | /******/ 			installedChunkData = installedChunks[chunkId] = [resolve, reject];
 80 | /******/ 		});
 81 | /******/ 		installedChunkData[2] = promise;
 82 | /******/
 83 | /******/ 		// start chunk loading
 84 | /******/ 		var head = document.getElementsByTagName('head')[0];
 85 | /******/ 		var script = document.createElement('script');
 86 | /******/ 		script.type = 'text/javascript';
 87 | /******/ 		script.charset = 'utf-8';
 88 | /******/ 		script.async = true;
 89 | /******/ 		script.timeout = 120000;
 90 | /******/
 91 | /******/ 		if (__webpack_require__.nc) {
 92 | /******/ 			script.setAttribute("nonce", __webpack_require__.nc);
 93 | /******/ 		}
 94 | /******/ 		script.src = __webpack_require__.p + "" + chunkId + "-" + {"vendor":"ed00d7222262ac99e510","pageA":"b5b4e2893bce99fd5c57","pageB":"34be879b3374ac9b2072"}[chunkId] + ".js";
 95 | /******/ 		var timeout = setTimeout(onScriptComplete, 120000);
 96 | /******/ 		script.onerror = script.onload = onScriptComplete;
 97 | /******/ 		function onScriptComplete() {
 98 | /******/ 			// avoid mem leaks in IE.
 99 | /******/ 			script.onerror = script.onload = null;
100 | /******/ 			clearTimeout(timeout);
101 | /******/ 			var chunk = installedChunks[chunkId];
102 | /******/ 			if(chunk !== 0) {
103 | /******/ 				if(chunk) {
104 | /******/ 					chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));
105 | /******/ 				}
106 | /******/ 				installedChunks[chunkId] = undefined;
107 | /******/ 			}
108 | /******/ 		};
109 | /******/ 		head.appendChild(script);
110 | /******/
111 | /******/ 		return promise;
112 | /******/ 	};
113 | /******/
114 | /******/ 	// expose the modules object (__webpack_modules__)
115 | /******/ 	__webpack_require__.m = modules;
116 | /******/
117 | /******/ 	// expose the module cache
118 | /******/ 	__webpack_require__.c = installedModules;
119 | /******/
120 | /******/ 	// define getter function for harmony exports
121 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
122 | /******/ 		if(!__webpack_require__.o(exports, name)) {
123 | /******/ 			Object.defineProperty(exports, name, {
124 | /******/ 				configurable: false,
125 | /******/ 				enumerable: true,
126 | /******/ 				get: getter
127 | /******/ 			});
128 | /******/ 		}
129 | /******/ 	};
130 | /******/
131 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
132 | /******/ 	__webpack_require__.n = function(module) {
133 | /******/ 		var getter = module && module.__esModule ?
134 | /******/ 			function getDefault() { return module['default']; } :
135 | /******/ 			function getModuleExports() { return module; };
136 | /******/ 		__webpack_require__.d(getter, 'a', getter);
137 | /******/ 		return getter;
138 | /******/ 	};
139 | /******/
140 | /******/ 	// Object.prototype.hasOwnProperty.call
141 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
142 | /******/
143 | /******/ 	// __webpack_public_path__
144 | /******/ 	__webpack_require__.p = "";
145 | /******/
146 | /******/ 	// on error function for async loading
147 | /******/ 	__webpack_require__.oe = function(err) { console.error(err); throw err; };
148 | /******/ })
149 | /************************************************************************/
150 | /******/ ([]);


--------------------------------------------------------------------------------
/test-webpack/dist/runtime-1b40e842c0decf252041.js:
--------------------------------------------------------------------------------
  1 | /******/ (function(modules) { // webpackBootstrap
  2 | /******/ 	// install a JSONP callback for chunk loading
  3 | /******/ 	var parentJsonpFunction = window["webpackJsonp"];
  4 | /******/ 	window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
  5 | /******/ 		// add "moreModules" to the modules object,
  6 | /******/ 		// then flag all "chunkIds" as loaded and fire callback
  7 | /******/ 		var moduleId, chunkId, i = 0, resolves = [], result;
  8 | /******/ 		for(;i < chunkIds.length; i++) {
  9 | /******/ 			chunkId = chunkIds[i];
 10 | /******/ 			if(installedChunks[chunkId]) {
 11 | /******/ 				resolves.push(installedChunks[chunkId][0]);
 12 | /******/ 			}
 13 | /******/ 			installedChunks[chunkId] = 0;
 14 | /******/ 		}
 15 | /******/ 		for(moduleId in moreModules) {
 16 | /******/ 			if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
 17 | /******/ 				modules[moduleId] = moreModules[moduleId];
 18 | /******/ 			}
 19 | /******/ 		}
 20 | /******/ 		if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);
 21 | /******/ 		while(resolves.length) {
 22 | /******/ 			resolves.shift()();
 23 | /******/ 		}
 24 | /******/ 		if(executeModules) {
 25 | /******/ 			for(i=0; i < executeModules.length; i++) {
 26 | /******/ 				result = __webpack_require__(__webpack_require__.s = executeModules[i]);
 27 | /******/ 			}
 28 | /******/ 		}
 29 | /******/ 		return result;
 30 | /******/ 	};
 31 | /******/
 32 | /******/ 	// The module cache
 33 | /******/ 	var installedModules = {};
 34 | /******/
 35 | /******/ 	// objects to store loaded and loading chunks
 36 | /******/ 	var installedChunks = {
 37 | /******/ 		"runtime": 0
 38 | /******/ 	};
 39 | /******/
 40 | /******/ 	// The require function
 41 | /******/ 	function __webpack_require__(moduleId) {
 42 | /******/
 43 | /******/ 		// Check if module is in cache
 44 | /******/ 		if(installedModules[moduleId]) {
 45 | /******/ 			return installedModules[moduleId].exports;
 46 | /******/ 		}
 47 | /******/ 		// Create a new module (and put it into the cache)
 48 | /******/ 		var module = installedModules[moduleId] = {
 49 | /******/ 			i: moduleId,
 50 | /******/ 			l: false,
 51 | /******/ 			exports: {}
 52 | /******/ 		};
 53 | /******/
 54 | /******/ 		// Execute the module function
 55 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 56 | /******/
 57 | /******/ 		// Flag the module as loaded
 58 | /******/ 		module.l = true;
 59 | /******/
 60 | /******/ 		// Return the exports of the module
 61 | /******/ 		return module.exports;
 62 | /******/ 	}
 63 | /******/
 64 | /******/ 	// This file contains only the entry chunk.
 65 | /******/ 	// The chunk loading function for additional chunks
 66 | /******/ 	__webpack_require__.e = function requireEnsure(chunkId) {
 67 | /******/ 		var installedChunkData = installedChunks[chunkId];
 68 | /******/ 		if(installedChunkData === 0) {
 69 | /******/ 			return new Promise(function(resolve) { resolve(); });
 70 | /******/ 		}
 71 | /******/
 72 | /******/ 		// a Promise means "currently loading".
 73 | /******/ 		if(installedChunkData) {
 74 | /******/ 			return installedChunkData[2];
 75 | /******/ 		}
 76 | /******/
 77 | /******/ 		// setup Promise in chunk cache
 78 | /******/ 		var promise = new Promise(function(resolve, reject) {
 79 | /******/ 			installedChunkData = installedChunks[chunkId] = [resolve, reject];
 80 | /******/ 		});
 81 | /******/ 		installedChunkData[2] = promise;
 82 | /******/
 83 | /******/ 		// start chunk loading
 84 | /******/ 		var head = document.getElementsByTagName('head')[0];
 85 | /******/ 		var script = document.createElement('script');
 86 | /******/ 		script.type = 'text/javascript';
 87 | /******/ 		script.charset = 'utf-8';
 88 | /******/ 		script.async = true;
 89 | /******/ 		script.timeout = 120000;
 90 | /******/
 91 | /******/ 		if (__webpack_require__.nc) {
 92 | /******/ 			script.setAttribute("nonce", __webpack_require__.nc);
 93 | /******/ 		}
 94 | /******/ 		script.src = __webpack_require__.p + "" + chunkId + "-" + {"vendor":"ed00d7222262ac99e510","pageA":"8ddb2f0f51a8139475bb","pageB":"34be879b3374ac9b2072"}[chunkId] + ".js";
 95 | /******/ 		var timeout = setTimeout(onScriptComplete, 120000);
 96 | /******/ 		script.onerror = script.onload = onScriptComplete;
 97 | /******/ 		function onScriptComplete() {
 98 | /******/ 			// avoid mem leaks in IE.
 99 | /******/ 			script.onerror = script.onload = null;
100 | /******/ 			clearTimeout(timeout);
101 | /******/ 			var chunk = installedChunks[chunkId];
102 | /******/ 			if(chunk !== 0) {
103 | /******/ 				if(chunk) {
104 | /******/ 					chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));
105 | /******/ 				}
106 | /******/ 				installedChunks[chunkId] = undefined;
107 | /******/ 			}
108 | /******/ 		};
109 | /******/ 		head.appendChild(script);
110 | /******/
111 | /******/ 		return promise;
112 | /******/ 	};
113 | /******/
114 | /******/ 	// expose the modules object (__webpack_modules__)
115 | /******/ 	__webpack_require__.m = modules;
116 | /******/
117 | /******/ 	// expose the module cache
118 | /******/ 	__webpack_require__.c = installedModules;
119 | /******/
120 | /******/ 	// define getter function for harmony exports
121 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
122 | /******/ 		if(!__webpack_require__.o(exports, name)) {
123 | /******/ 			Object.defineProperty(exports, name, {
124 | /******/ 				configurable: false,
125 | /******/ 				enumerable: true,
126 | /******/ 				get: getter
127 | /******/ 			});
128 | /******/ 		}
129 | /******/ 	};
130 | /******/
131 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
132 | /******/ 	__webpack_require__.n = function(module) {
133 | /******/ 		var getter = module && module.__esModule ?
134 | /******/ 			function getDefault() { return module['default']; } :
135 | /******/ 			function getModuleExports() { return module; };
136 | /******/ 		__webpack_require__.d(getter, 'a', getter);
137 | /******/ 		return getter;
138 | /******/ 	};
139 | /******/
140 | /******/ 	// Object.prototype.hasOwnProperty.call
141 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
142 | /******/
143 | /******/ 	// __webpack_public_path__
144 | /******/ 	__webpack_require__.p = "";
145 | /******/
146 | /******/ 	// on error function for async loading
147 | /******/ 	__webpack_require__.oe = function(err) { console.error(err); throw err; };
148 | /******/ })
149 | /************************************************************************/
150 | /******/ ([]);


--------------------------------------------------------------------------------
/test-javascript/3.js:
--------------------------------------------------------------------------------
  1 | const destructuringArray = (values, keys) => {
  2 |   try {
  3 |     const obj = {}
  4 |     if (typeof keys === 'string') {
  5 |       keys = JSON.parse(keys.replace(/\w+/g, '"$&"'))
  6 |     }
  7 |     const iterate = (values, keys) => {
  8 |       keys.forEach((key, i) => {
  9 |         if (Array.isArray(key)) iterate(values[i], key)
 10 |         else obj[key] = values[i]
 11 |       })
 12 |     }
 13 |     iterate(values, keys)
 14 |     return obj
 15 |   } catch (e) {
 16 |     console.log(e)
 17 |   }
 18 | }
 19 | 
 20 | // 将 destructuringArray([1, [2, 3], 4], "[a, [b], c]") => {a: 1, b: 2, c: 4}
 21 | const targetArray = [1, [2, 3], 4]
 22 | const formater = '[a, [b], c]'
 23 | //console.log(destructuringArray(targetArray, formater))
 24 | 
 25 | // 数组展平，主要利用map返回新的数组
 26 | const flatten = arr => {
 27 |   return [].concat(
 28 |     ...arr.map(item => (Array.isArray(item) ? flatten(item) : item))
 29 |   )
 30 | }
 31 | 
 32 | //console.log(flatten([[1, 2], 3, [[[4], 5]]]))
 33 | 
 34 | // 二分查找，非递归手段
 35 | function binarySearch(arr, dest) {
 36 |   let low = 0
 37 |   let high = arr.length - 1
 38 | 
 39 |   while (low <= high) {
 40 |     let mid = Math.floor((low + high) / 2)
 41 |     if (dest > arr[mid]) {
 42 |       low = mid + 1
 43 |     } else if (dest < arr[mid]) {
 44 |       high = mid - 1
 45 |     } else {
 46 |       return mid
 47 |     }
 48 |   }
 49 |   return -1
 50 | }
 51 | const arr = [1, 2, 3, 4, 5, 6, 7, 8]
 52 | //console.log(binarySearch(arr, 3)) // 2
 53 | 
 54 | // 找出数组中重复出现的元素
 55 | // 例如：[1，2，4，4，3，3，1，5，3]
 56 | // 输出：[1，3，4]
 57 | let arr1 = [1, 2, 4, 4, 3, 3, 1, 5, 3]
 58 | 
 59 | function findRepeat(arr) {
 60 |   var result = [],
 61 |     map = {}
 62 |   arr.forEach(item => {
 63 |     if (map[item] === 1) result.push(item)
 64 |     map[item] = (map[item] || 0) + 1
 65 |   })
 66 |   return result
 67 | }
 68 | //console.log(findRepeat(arr1))
 69 | 
 70 | function createArray(len, arr = []) {
 71 |   if (len > 0) {
 72 |     arr[--len] = len
 73 |     createArray(len, arr)
 74 |   }
 75 |   return arr
 76 | }
 77 | 
 78 | function findDocList(docs, keys) {
 79 |   let result = []
 80 |   docs.forEach(doc => {
 81 |     keys.forEach(key => {
 82 |       doc.words.indexOf(key) > -1 && result.push(doc.id)
 83 |     })
 84 |   })
 85 |   return result
 86 | }
 87 | var docs = [
 88 |   {
 89 |     id: 1,
 90 |     words: ['hello', 'world']
 91 |   },
 92 |   {
 93 |     id: 2,
 94 |     words: ['hello', 'hihi']
 95 |   },
 96 |   {
 97 |     id: 3,
 98 |     words: ['haha', 'hello']
 99 |   },
100 |   {
101 |     id: 4,
102 |     words: ['world', 'nihao']
103 |   }
104 | ]
105 | //console.log(findDocList(docs, ['hello'])) // 文档id1，文档id2，文档id3
106 | //findDocList(docs, ['hello', 'world']) // 文档id1
107 | 
108 | class EventEmitter {
109 |   constructor() {
110 |     this.events = {}
111 |     this.onceEvents = {}
112 |   }
113 | 
114 |   on(event, fn) {
115 |     let callback = this.events[event] || []
116 |     callback.push(fn)
117 |     this.events[event] = callback
118 |   }
119 |   fire(obj) {
120 |     let { type, value } = obj
121 |     let handle = function(list) {
122 |       for (let i in list) {
123 |         if (i === type) {
124 |           for (let j in list[i]) {
125 |             list[i][j](value)
126 |           }
127 |         }
128 |       }
129 |     }
130 |     handle(this.events)
131 |     handle(this.onceEvents)
132 |   }
133 |   off(event, fn) {
134 |     let callback = this.events[event]
135 |     let index = callback.indexOf(fn)
136 |     index > -1 && callback.splice(index, 1)
137 |   }
138 |   once(event, fn) {
139 |     let callback = this.onceEvents[event] || []
140 |     callback.push(fn)
141 |     this.onceEvents[event] = callback
142 |   }
143 | }
144 | 
145 | const cycleObj = {
146 |   foo: {
147 |     name: 'foo',
148 |     bar: {
149 |       name: 'bar',
150 |       baz: {
151 |         name: 'baz',
152 |         aChild: null
153 |       }
154 |     }
155 |   }
156 | }
157 | cycleObj.foo.bar.baz.aChild = cycleObj.foo
158 | function cycleDetector(obj) {
159 |   let res = false
160 |   let stack = []
161 |   // 判断是不是在栈中
162 |   let inCycle = function(item) {
163 |     if (stack.indexOf(item) > -1) {
164 |       return true
165 |     }
166 |     return false
167 |   }
168 |   // panduan
169 |   let read = function(_obj) {
170 |     for (let prop in _obj) {
171 |       if (Object.prototype.toString.call(_obj[prop]) === '[object Object]') {
172 |         if (!inCycle(_obj[prop])) {
173 |           stack.push(_obj[prop])
174 |           read(_obj[prop])
175 |         } else {
176 |           res = true
177 |         }
178 |       }
179 |     }
180 |   }
181 |   read(obj)
182 |   return res
183 | }
184 | // console.log(cycleDetector(cycleObj))
185 | 
186 | function template(str) {
187 |   let replace = {}
188 |   var result
189 |   var reg = new RegExp('\\<\\%\\=\\w+\\%\\>', 'g')
190 |   while ((result = reg.exec(str))) {
191 |     let _re = new RegExp('\\w+', 'g')
192 |     var item = result[0].match(_re)[0]
193 |     replace[item] = {}
194 |     replace[item].origin = result[0]
195 |   }
196 |   return function(obj) {
197 |     for (let i in obj) {
198 |       if (replace[i]) {
199 |         str = str.replace(replace[i].origin, replace[i])
200 |       }
201 |     }
202 |     return str
203 |   }
204 | }
205 | 
206 | function parseUrl(url) {
207 |   let obj = {}
208 |   let index = url.indexOf('?')
209 |   if (index > -1) {
210 |     let param = url.substring(index + 1, url.length).split('&')
211 |     for (let i = 0, l = param.length; i < l; ++i) {
212 |       let arr = param[i].split('=')
213 |       obj[arr[0]] = arr[1]
214 |     }
215 |   }
216 |   return obj
217 | }
218 | 
219 | // crash
220 | class Cash {
221 |   constructor(num) {
222 |     this.num = num
223 |   }
224 |   init(args) {
225 |     if (args.length === 1) {
226 |       if (typeof args[0] === 'number') {
227 |         const num = (this.num || 0) + args[0]
228 | 
229 |         return `${parseInt(num / 100)}元${parseInt(num / 10) % 10}角${num %
230 |           10}分`
231 |       }
232 | 
233 |       if (typeof args[0] === 'object' && args[0] instanceof Cash) {
234 |         const num = this.num + args[0].num
235 | 
236 |         return `${parseInt(num / 100)}元${parseInt(num / 10) % 10}角${num %
237 |           10}分`
238 |       }
239 |     }
240 | 
241 |     if (args.length > 1) {
242 |       let num = 0
243 | 
244 |       args.forEach(item => (num += item))
245 | 
246 |       return `${parseInt(num / 100)}元${parseInt(num / 10) % 10}角${num % 10}分`
247 |     }
248 |   }
249 |   add(...args) {
250 |     return this.init(args)
251 |   }
252 | 
253 |   static add(...args) {
254 |     if (args.length === 1) {
255 |       if (typeof args[0] === 'number') {
256 |         const num = (this.num || 0) + args[0]
257 | 
258 |         return `${parseInt(num / 100)}元${parseInt(num / 10) % 10}角${num %
259 |           10}分`
260 |       }
261 | 
262 |       if (typeof args[0] === 'object' && args[0] instanceof Cash) {
263 |         const num = this.num + args[0].num
264 | 
265 |         return `${parseInt(num / 100)}元${parseInt(num / 10) % 10}角${num %
266 |           10}分`
267 |       }
268 |     }
269 | 
270 |     if (args.length > 1) {
271 |       let num = 0
272 | 
273 |       args.forEach(item => (num += item))
274 | 
275 |       return `${parseInt(num / 100)}元${parseInt(num / 10) % 10}角${num % 10}分`
276 |     }
277 |   }
278 | 
279 |   valueOf() {
280 |     return this.num
281 |   }
282 | }
283 | 
284 | const cash1 = new Cash(105)
285 | const cash2 = new Cash(66)
286 | const cash3 = cash1.add(cash2)
287 | const cash4 = Cash.add(cash1, cash2)
288 | const cash5 = Cash.add(cash1 + cash2)
289 | console.log(`${cash3}`, `${cash3}`, `${cash3}`)
290 | 
291 | function isDuplicate() {
292 |   let n = arguments.length
293 |   for (let i = 0; i < n; ++i) {
294 |     for (let j = i + 1; j < n; ++j) {
295 |       if (arguments[i] === arguments[j]) {
296 |         return true
297 |       }
298 |     }
299 |   }
300 |   return false
301 | }
302 | 
303 | // console.log(isDuplicate(1, 2, 3, 2))
304 | 


--------------------------------------------------------------------------------
/html&css.md:
--------------------------------------------------------------------------------
  1 | ### HTML & CSS 相关知识总结
  2 | 
  3 | > 圣杯布局
  4 | 
  5 | 主要是对负边距的利用。使用负边距，将左右两边的盒子移动到中间盒子的两边。
  6 | 
  7 | ```html
  8 | <div class="container">
  9 |   <div class="middle"></div>
 10 |   <div class="left"></div>
 11 |   <div class="right"></div>
 12 | </div>
 13 | ```
 14 | 
 15 | ```css
 16 | .container {
 17 |   padding: 0 200px;
 18 | }
 19 | 
 20 | .container > div {
 21 |   height: 200px;
 22 |   float: left;
 23 | }
 24 | 
 25 | .middle {
 26 |   width: 100%;
 27 |   background: blue;
 28 | }
 29 | 
 30 | .left {
 31 |   margin-left: -100%;
 32 |   position: relative;
 33 |   left: -200px;
 34 |   width: 200px;
 35 |   background: red;
 36 | }
 37 | 
 38 | .right {
 39 |   margin-left: -200px;
 40 |   position: relative;
 41 |   right: -200px;
 42 |   width: 200px;
 43 |   background: yellow;
 44 | }
 45 | ```
 46 | 
 47 | [一篇关于圣杯布局的文章](https://alistapart.com/article/holygrail)
 48 | 
 49 | > 双飞翼布局
 50 | 
 51 | 这个是淘宝出来的布局。也是利用了负边距，相对于圣杯布局，这里的样式写法好理解点。
 52 | 
 53 | ```html
 54 | <div class="container">
 55 |     <div class="middle">
 56 |       <div class="middle-container"></div>
 57 |     </div>
 58 |     <div class="left"></div>
 59 |     <div class="right"></div>
 60 |   </div>
 61 | ```
 62 | 
 63 | ```css
 64 | .container > div {
 65 |   float: left;
 66 |   height: 200px;
 67 | }
 68 | 
 69 | .middle {
 70 |   width: 100%;
 71 |   background: red;
 72 | }
 73 | 
 74 | .middle-container {
 75 |   height: 200px;
 76 |   margin: 0 200px;
 77 |   background: darkred;
 78 | }
 79 | 
 80 | .left {
 81 |   width: 200px;
 82 |   margin-left: -100%;
 83 |   background: blue;
 84 | }
 85 | 
 86 | .right {
 87 |   width: 200px;
 88 |   margin-left: -200px;
 89 |   background: yellow;
 90 | }
 91 | ```
 92 | 
 93 | > Flex 布局
 94 | 
 95 | Flex 是 CSS3 中的提供的属性。
 96 | 
 97 | ```html
 98 | <div class="container">
 99 |   <div class="col-1"></div>
100 |   <div class="col-2"></div>
101 |   <div class="col-3"></div>
102 | </div>
103 | ```
104 | 
105 | ```css
106 | .container {
107 |   display: flex;
108 |   width: 100%;
109 | }
110 | 
111 | .container > div {
112 |   height: 200px;
113 |   flex: 1;
114 |   border: 1px solid red;
115 | }
116 | ```
117 | 
118 | > 使用 Flex 居中一个圆
119 | 
120 | ```html
121 | <body>
122 |   <div class="circle"></div>
123 | </body>
124 | ```
125 | 
126 | ```css
127 | html {
128 |   width: 100%;
129 |   height: 100%;
130 | }
131 | 
132 | body {
133 |   display: flex;
134 |   justify-content: center;
135 |   align-items: center;
136 |   margin: 0;
137 |   padding: 0;
138 |   height: 100%;
139 | }
140 | 
141 | .circle {
142 |   width: 100px;
143 |   height: 100px;
144 |   border-radius: 50%;
145 |   background: red;
146 | }
147 | ```
148 | 
149 | > 使用 css 实现垂直居中
150 | 
151 | 简单的居中大概是可以分为两类的：
152 | 
153 | * 文本居中，只需要在他的父标签上指定高度（height）与相同的行高（line-height）即可。
154 | * 标签元素的居中方式比较多，也比较复杂
155 | 
156 | ```html
157 | <div class="container">
158 |   <div class="vertical">
159 | 
160 |   </div>
161 | </div>
162 | ```
163 | 
164 | ```css
165 | html,
166 | body {
167 |   margin: 0;
168 |   padding: 0;
169 |   width: 100%;
170 |   height: 100%;
171 | }
172 | 
173 | .container {
174 |   width: 100%;
175 |   height: 100%;
176 | }
177 | 
178 | .vertical {
179 |   width: 100px;
180 |   height: 100px;
181 |   background: red;
182 |   margin: 0 auto;
183 |   position: relative;
184 |   top: 50%;
185 |   transform: translateY(-50%);
186 |   /* 将元素沿 Y 轴方向移动自身的 50% */
187 | }
188 | ```
189 | 
190 | > CSS 的怪异盒模型
191 | 
192 | 由于某些历史遗留问题，CSS 的盒子模型有两种标准：W3C 和 IE 。怪异盒模型主要表现在 IE 上，当不对 Doctype 进行定义时，会触发怪异模式。
193 | 
194 | 标准盒模型中，一个 `block` 的总宽度 = `width + margin-left + margin-right + padding-left + padding-right + border-left + border-right`
195 | 而怪异盒模型中，一个 `block` 的总宽度 = `width + margin-left + margin-right` ，`width` 包含了 `padding` 和 `border` ；高度也是一样的区别。在 CSS3 中，box-sizing 指定为 border-box 时，会采用怪异盒计算。
196 | 
197 | > BFC 的相关理解
198 | 
199 | 块级格式化上下文，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此(按照这个理念来想，只要脱离文档流，肯定就能产生 BFC)。
200 | 
201 | 触发 BFC 的条件
202 | 
203 | * float 值不为 node
204 | * overflow 值不为 visible
205 | * position 值不为 relative 和 static
206 | * display 值为 table-cell,table-caption, inline-block 中的任何一个
207 | 
208 | **相关 IFC**
209 | 内联格式化上下文，IFC 的 line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin 影响)。
210 | 
211 | 水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过 text-align 则可以使其水平居中。垂直居中：创建一个 IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align: middle，其他行内元素则可以在此父元素下垂直居中
212 | 
213 | > rem , em 和 px 的区别
214 | 
215 | 在 CSS 中，em 和 rem 都属于灵活的单位，都会由浏览器根据实际情况转换成 px 值。
216 | 
217 | * 任何浏览器的默认字体高度都是 16px 。当然我们可以通过设置 font-size 强行改变这个高度。
218 | * em 是相对长度单位。相对于当前对象内文本的字体尺寸。em 会继承父级元素的字体大小
219 | * rem 是 CSS3 新增的一个相对长度单位，r 是 root 的缩写。使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。
220 | 
221 | px 根据不同人理解是不同的。比如说设计师理解的 px 是设备像素，而相对于前端工程师来说 px 是逻辑像素。在 CSS 规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px 是一个相对单位，相对的是设备像素(device pixel)。
222 | 
223 | 要做设备像素与 CSS 像素之间的转换，现来看两个概念：
224 | 
225 | * 每英寸像素：ppi，表示每英寸所拥有的像素(pixel)数目，数值越高，代表显示屏能够以越高的密度显示图像
226 | * 设备像素比：根据计算出的 ppi 和基本密度分界，获得默认缩放比例，即设备像素比。（先规定密度分界基数为 160，然后设备像素比=ppi 除以密度分界基数 160）
227 |   ![密度分界](https://upload-images.jianshu.io/upload_images/8133-ef1f05dc254add2e.jpg)
228 | 
229 | > 移动端布局方案
230 | 
231 | 由于移动端的屏幕尺寸的比例不固定，所以布局的时候大多采用的是流式布局。移动端布局需要注意下面几点：
232 | 
233 | * 指定好相关的 viewport
234 |   * `width`: 设置 `viewport` 的宽度（即之前所提及到的，浏览器的宽度详），这里可以为一个整数，又或者是字符串"width-device"
235 |   * `initial-scale`: 页面初始的缩放值，为数字，可以是小数
236 |   * `minimum-scale`: 允许用户的最小缩放值，为数字，可以是小数
237 |   * `maximum-scale`: 允许用户的最大缩放值，为数字，可以是小数
238 |   * `height`: 设置`viewport`得高度（一般不设置）
239 |   * `user-scalable`: 是否允许用户进行缩放，'no' 为不允许，'yes' 为允许
240 | 
241 | ```html
242 | <script type="text/javascript">
243 |   ! function(a) {
244 |     function b() {
245 |         a.rem = f.getBoundingClientRect().width / 16, f.style.fontSize = a.rem + "px"
246 |     }
247 |     var c, d = a.navigator.appVersion.match(/iphone/gi) ? a.devicePixelRatio : 1,
248 |         e = 1 / d,
249 |         f = document.documentElement,
250 |         g = document.createElement("meta");
251 |     if (a.dpr = d, a.addEventListener("resize", function() {
252 |             clearTimeout(c), c = setTimeout(b, 300)
253 |         }, !1), a.addEventListener("pageshow", function(a) {
254 |             a.persisted && (clearTimeout(c), c = setTimeout(b, 300))
255 |         }, !1), f.setAttribute("data-dpr", d), g.setAttribute("name", "viewport"), g.setAttribute("content", "initial-scale=" + e + ", maximum-scale=" + e + ", minimum-scale=" + e + ", user-scalable=no"), f.firstElementChild) {
256 |           f.firstElementChild.appendChild(g);
257 |     } else {
258 |       var h = document.createElement("div");
259 |       h.appendChild(g), document.write(h.innerHTML)
260 |     }
261 |     b();
262 | }(window);
263 | ```
264 | 
265 | 以上代码是动态计算 viewport 的。根据不通的 dpr 计算出不通的 rem。目前已经应用在线上项目了。
266 | 
267 | * 利用好 rem
268 |   经过上面的代码后，设计稿就按照 750px 来设计了。写的时候就按照尺寸／rem 就好了
269 |   ```css
270 |   @base: 46.875rem;
271 |   div {
272 |     width: 200 / @base;
273 |     height: 200 / @base;
274 |   }
275 |   ```
276 |   移动端适配方案：
277 |   [https://github.com/riskers/blog/issues/17](https://github.com/riskers/blog/issues/17)
278 |   [https://github.com/riskers/blog/issues/18](https://github.com/riskers/blog/issues/18)
279 | 
280 | > CSS 边距折叠的问题
281 | 
282 | 块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷(margin collapsing)，有的地方翻译为外边距合并。
283 | 
284 | 发生外边距塌陷的三种情况：
285 | 
286 | * 相邻的兄弟姐妹元素
287 |   ```html
288 |   <p style="margin-bottom: 30px;">这个段落的下外边距被合并...</p>
289 |   <p style="margin-top: 20px;">...这个段落的上外边距被合并。</p>
290 |   ```
291 | * 块级父元素与其第一个/最后一个子元素
292 | 
293 |   如果块级父元素中，不存在上边框、上内边距、内联元素、块格式化上下文、 清除浮动 这五条（也可以说，当上边框宽度及上内边距距离为 0 时），那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生上外边距合并现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的 margin-top 的较大者。
294 | 
295 | * 空块元素
296 | 
297 |   如果存在一个空的块级元素，其 border、padding、inline content、height、min-height 都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并
298 | 
299 |   ```html
300 |   <p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p>
301 |   <div style="margin-top: 20px; margin-bottom: 20px;"></div>
302 |   <p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>
303 |   ```
304 | 


--------------------------------------------------------------------------------
/observer.md:
--------------------------------------------------------------------------------
  1 | #### 概念
  2 | 
  3 | 发布-订阅模式又称为观察者模式，它定义的是一种一对多的依赖关系，当一个状态发生改变的时候，所有以来这个状态的对象都会得到通知。
  4 | 
  5 | #### 生活中的发布-订阅模式
  6 | 
  7 | 上面事发布-订阅模式的一个比较正式的解释，可能这个解释不大好理解。所以我们通过实际生活中的例子来理解。
  8 | 
  9 | 比如看中了一套房子，等到去了售楼处的说以后才被告知房子已经售罄了。但是售楼小姐告知，将来会有尾盘推出。具体什么时候推出，目前没人知道。
 10 | 
 11 | 但是买家又不想频繁的跑，于是就把自己的电话号码登记在售楼处，在登记的花名册上有很多类似的买家。售楼小姐答应买家，新的房源一出来就一一通知买家。
 12 | 
 13 | 所以上面就是一个发布订阅模式的简单例子。购房者（订阅者）订阅房源信息，售楼处（发布者）发布新房源消息给购房者（订阅者），购房者（订阅者）接收到消息后作出相应的反应。
 14 | 
 15 | #### 适用性
 16 | 
 17 | * 发布订阅模式可以广泛的应用于异步编程中。
 18 | * 发布订阅模式可以取代对象之间的硬编码通知机制。
 19 | 
 20 | #### 典型实现例子
 21 | 
 22 | > 1、售楼处的例子
 23 | 
 24 | 一步步实现发布订阅模式：
 25 | 
 26 | * 首先指定好谁充当发布者（售楼处）
 27 | * 然后给发布者添加一个缓存列表，用语存放回调函数，以便通知订阅者（售楼处花名册）。
 28 | * 最后发布消息的时候，发布者会遍历这个缓存列表，依次触发里面存放的订阅者的回调函数。
 29 | 
 30 | ```js
 31 | let salesOffices = {} // 售楼处
 32 | salesOffices.books = [] // 缓存列表，存放订阅者的回调函数。
 33 | // 增加订阅者
 34 | salesOffices.listen = function(fn) {
 35 |   this.books.push(fn) // 订阅的消息添加近缓存列表里面
 36 | }
 37 | salesOffices.trigger = function() {
 38 |   // 发布消息
 39 |   for (let i = 0, fn; (fn = salesOffices.books[i++]); ) {
 40 |     fn.apply(this, arguments) // arguments 是发布消息的时候带上的参数
 41 |   }
 42 | }
 43 | 
 44 | salesOffices.listen(function(price, squareMeter) {
 45 |   // 购买者a
 46 |   console.log(`价格是：${price}`)
 47 |   console.log(`面积大小：${squareMeter}`)
 48 | })
 49 | salesOffices.listen(function(price, squareMeter) {
 50 |   // 购买者b
 51 |   console.log(`价格是：${price}`)
 52 |   console.log(`面积大小：${squareMeter}`)
 53 | })
 54 | 
 55 | salesOffices.trigger(2000000, 88)
 56 | salesOffices.trigger(3000000, 128)
 57 | ```
 58 | 
 59 | 上面实现了一个最简单的发布订阅模式。肯定还有很多问题的，例如订阅者只订阅了某一个消息，但是上面会把所有消息发给每一个订阅者。所以还得通过其他的方式让订阅者只订阅自己感兴趣的消息。
 60 | 
 61 | > 2、vue 对发布订阅模式的使用
 62 | 
 63 | 我们都知道 Vue 有个最显著的特性，便是侵入性不是很强的响应式系统。这个特性就是对发布订阅模式非常好的应用。我们接下来就来看看这个特性是怎么应用的。
 64 | 
 65 | vue 的数据初始化：
 66 | 
 67 | ```js
 68 | var v = new Vue({
 69 |   data() {
 70 |     return {
 71 |       a: 'hello'
 72 |     }
 73 |   }
 74 | })
 75 | ```
 76 | 
 77 | 这个初始化的代码的背后包含着发布订阅模式的思想，接下来看看官网的一个图
 78 | 
 79 | ![响应式系统](https://vuefe.cn/images/data.png)
 80 | 
 81 | 接下来就是网友的一个图：[@xuqiang521](https://github.com/xuqiang521)
 82 | ![响应系统源码版](https://pic4.zhimg.com/v2-c5581c68ade5d3503d9791ca1be4010f_b.jpg)
 83 | 
 84 | ##### 1. 数据劫持
 85 | 
 86 | 从上图可以看到，数据劫持的核心方法就是使用`Object.defineProperty`把属性转化成`getter/setter`。（因为这个是 ES5 中的方法，所以这也是 Vue 不支持 ie8 及以下浏览器的原因之一。）在数据传递变更的时候，会进入到我们封装的`Dep`和`Watcher`中进行处理。
 87 | 
 88 | ##### 1.1 遍历劫持
 89 | 
 90 | 数据不紧紧是基本类型的数据，也有可能是对象或者数组。基本类型的数据和对象的处理起来比较简单。
 91 | 
 92 | ```js
 93 | walk(obj) {
 94 |   const keys = Object.keys(obj)
 95 |   for (let i = 0; i < keys.length; ++i) {
 96 |     defineReactive(obj, keys[i], obj[keys[i]])
 97 |   }
 98 | }
 99 | ```
100 | 
101 | 核心的劫持相关函数以及属性的订阅和发布
102 | 
103 | ```js
104 | /**
105 |  * Define a reactive property on an Object.
106 |  */
107 | export function defineReactive(
108 |   obj: Object,
109 |   key: string,
110 |   val: any,
111 |   customSetter?: Function
112 | ) {
113 |   /*在闭包中定义一个dep对象*/
114 |   const dep = new Dep()
115 | 
116 |   const property = Object.getOwnPropertyDescriptor(obj, key)
117 |   if (property && property.configurable === false) {
118 |     return
119 |   }
120 | 
121 |   /*如果之前该对象已经预设了getter以及setter函数则将其取出来，新定义的getter/setter中会将其执行，保证不会覆盖之前已经定义的getter/setter。*/
122 |   // cater for pre-defined getter/setters
123 |   const getter = property && property.get
124 |   const setter = property && property.set
125 | 
126 |   /*对象的子对象递归进行observe并返回子节点的Observer对象*/
127 |   let childOb = observe(val)
128 |   Object.defineProperty(obj, key, {
129 |     enumerable: true,
130 |     configurable: true,
131 |     get: function reactiveGetter() {
132 |       /*如果原本对象拥有getter方法则执行*/
133 |       const value = getter ? getter.call(obj) : val
134 |       if (Dep.target) {
135 |         /*进行依赖收集*/
136 |         dep.depend()
137 |         if (childOb) {
138 |           /*子对象进行依赖收集，其实就是将同一个watcher观察者实例放进了两个depend中，一个是正在本身闭包中的depend，另一个是子元素的depend*/
139 |           childOb.dep.depend()
140 |         }
141 |         if (Array.isArray(value)) {
142 |           /*是数组则需要对每一个成员都进行依赖收集，如果数组的成员还是数组，则递归。*/
143 |           dependArray(value)
144 |         }
145 |       }
146 |       return value
147 |     },
148 |     set: function reactiveSetter(newVal) {
149 |       /*通过getter方法获取当前值，与新值进行比较，一致则不需要执行下面的操作*/
150 |       const value = getter ? getter.call(obj) : val
151 |       /* eslint-disable no-self-compare */
152 |       if (newVal === value || (newVal !== newVal && value !== value)) {
153 |         return
154 |       }
155 |       /* eslint-enable no-self-compare */
156 |       if (process.env.NODE_ENV !== 'production' && customSetter) {
157 |         customSetter()
158 |       }
159 |       if (setter) {
160 |         /*如果原本对象拥有setter方法则执行setter*/
161 |         setter.call(obj, newVal)
162 |       } else {
163 |         val = newVal
164 |       }
165 | 
166 |       /*新的值需要重新进行observe，保证数据响应式*/
167 |       childOb = observe(newVal)
168 | 
169 |       /*dep对象通知所有的观察者*/
170 |       dep.notify()
171 |     }
172 |   })
173 | }
174 | ```
175 | 
176 | 最开始在初始化的时候是对 data 里面的数据就开始劫持监听了。初始化的时候就调用了`observe`方法
177 | 
178 | ```js
179 | /**
180 |  * Attempt to create an observer instance for a value,
181 |  * returns the new observer if successfully observed,
182 |  * or the existing observer if the value already has one.
183 |  */
184 | /*
185 |  尝试创建一个Observer实例（__ob__），如果成功创建Observer实例则返回新的Observer实例，如果已有Observer实例则返回现有的Observer实例。
186 |  */
187 | export function observe(value: any, asRootData: ?boolean): Observer | void {
188 |   /*判断是否是一个对象*/
189 |   if (!isObject(value)) {
190 |     return
191 |   }
192 |   let ob: Observer | void
193 | 
194 |   /*这里用__ob__这个属性来判断是否已经有Observer实例，如果没有Observer实例则会新建一个Observer实例并赋值给__ob__这个属性，如果已有Observer实例则直接返回该Observer实例*/
195 |   if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
196 |     ob = value.__ob__
197 |   } else if (
198 |     /*这里的判断是为了确保value是单纯的对象，而不是函数或者是Regexp等情况。*/
199 |     observerState.shouldConvert &&
200 |     !isServerRendering() &&
201 |     (Array.isArray(value) || isPlainObject(value)) &&
202 |     Object.isExtensible(value) &&
203 |     !value._isVue
204 |   ) {
205 |     ob = new Observer(value)
206 |   }
207 |   if (asRootData && ob) {
208 |     /*如果是根数据则计数，后面Observer中的observe的asRootData非true*/
209 |     ob.vmCount++
210 |   }
211 |   return ob
212 | }
213 | ```
214 | 
215 | ##### 1.2 返回值
216 | 
217 | 上面的数据`observe`之后返回的就是一个 `Observer` 的实例
218 | 
219 | ```js
220 | ob = new Observer(value)
221 | 
222 | return ob
223 | ```
224 | 
225 | ##### 2."中转站"
226 | 
227 | 在第一步数据劫持的时候，数据的获取或者修改的时候，都会做出对应的操作。这些操作的目的很简单，就是“通知”到“中转站”。这个“中转站”主要就是对数据的变更起通知作用以及存放依赖这些数据的“地方”。
228 | 
229 | 这个"中转站"就是由"Dep"和“Watcher” 类构成的。每个被劫持的数据都会产生一个这样的“中转站”
230 | 
231 | ##### 2.1 Dep
232 | 
233 | Dep，全名 Dependency，从名字我们也能大概看出 Dep 类是用来做依赖收集的，但是也有通知对应的订阅者的作用 ，让它执行自己的操作，具体怎么收集呢？
234 | 
235 | ```js
236 | /**
237 |  * A dep is an observable that can have multiple
238 |  * directives subscribing to it.
239 |  */
240 | export default class Dep {
241 |   static target: ?Watcher
242 |   id: number
243 |   subs: Array<Watcher>
244 | 
245 |   constructor() {
246 |     this.id = uid++
247 |     this.subs = []
248 |   }
249 | 
250 |   /*添加一个观察者对象*/
251 |   addSub(sub: Watcher) {
252 |     this.subs.push(sub)
253 |   }
254 | 
255 |   /*移除一个观察者对象*/
256 |   removeSub(sub: Watcher) {
257 |     remove(this.subs, sub)
258 |   }
259 | 
260 |   /*依赖收集，当存在Dep.target的时候添加观察者对象*/
261 |   depend() {
262 |     if (Dep.target) {
263 |       Dep.target.addDep(this)
264 |     }
265 |   }
266 | 
267 |   /*通知所有订阅者*/
268 |   notify() {
269 |     // stabilize the subscriber list first
270 |     const subs = this.subs.slice()
271 |     for (let i = 0, l = subs.length; i < l; i++) {
272 |       subs[i].update()
273 |     }
274 |   }
275 | }
276 | 
277 | // the current target watcher being evaluated.
278 | // this is globally unique because there could be only one
279 | // watcher being evaluated at any time.
280 | Dep.target = null
281 | /*依赖收集完需要将Dep.target设为null，防止后面重复添加依赖。*/
282 | const targetStack = []
283 | export function pushTarget(_target: Watcher) {
284 |   if (Dep.target) targetStack.push(Dep.target)
285 |   // 改变目标指向
286 |   Dep.target = _target
287 | }
288 | 
289 | export function popTarget() {
290 |   // 删除当前目标，重算指向
291 |   Dep.target = targetStack.pop()
292 | }
293 | ```
294 | 
295 | 代码很简短，但它做的事情却很重要
296 | 
297 | * 定义 subs 数组，用来收集订阅者 Watcher
298 | * 当劫持到数据变更的时候，通知订阅者 Watcher 进行 update 操作
299 | 
300 | ##### 2.2 Watcher
301 | 
302 | Watcher 就是订阅者（观察者）。 主要的作用就是就是订阅 Dep(每个属性都会有一个 dep)，当 Dep 发出消息传递（notify）的时候，所以订阅着 Dep 的 Watchers 会进行自己的 update 操作。
303 | 
304 | ```js
305 | export default class Watcher {
306 |   vm: Component
307 |   expression: string
308 |   cb: Function
309 |   id: number
310 |   deep: boolean
311 |   user: boolean
312 |   lazy: boolean
313 |   sync: boolean
314 |   dirty: boolean
315 |   active: boolean
316 |   deps: Array<Dep>
317 |   newDeps: Array<Dep>
318 |   depIds: ISet
319 |   newDepIds: ISet
320 |   getter: Function
321 |   value: any
322 | 
323 |   constructor(
324 |     vm: Component,
325 |     expOrFn: string | Function,
326 |     cb: Function,
327 |     options?: Object
328 |   ) {
329 |     this.vm = vm
330 |     /*_watchers存放订阅者实例*/
331 |     vm._watchers.push(this)
332 |     // options
333 |     if (options) {
334 |       this.deep = !!options.deep
335 |       this.user = !!options.user
336 |       this.lazy = !!options.lazy
337 |       this.sync = !!options.sync
338 |     } else {
339 |       this.deep = this.user = this.lazy = this.sync = false
340 |     }
341 |     this.cb = cb
342 |     this.id = ++uid // uid for batching
343 |     this.active = true
344 |     this.dirty = this.lazy // for lazy watchers
345 |     this.deps = []
346 |     this.newDeps = []
347 |     this.depIds = new Set()
348 |     this.newDepIds = new Set()
349 |     this.expression =
350 |       process.env.NODE_ENV !== 'production' ? expOrFn.toString() : ''
351 |     // parse expression for getter
352 |     /*把表达式expOrFn解析成getter*/
353 |     if (typeof expOrFn === 'function') {
354 |       this.getter = expOrFn
355 |     } else {
356 |       this.getter = parsePath(expOrFn)
357 |       if (!this.getter) {
358 |         this.getter = function() {}
359 |         process.env.NODE_ENV !== 'production' &&
360 |           warn(
361 |             `Failed watching path: "${expOrFn}" ` +
362 |               'Watcher only accepts simple dot-delimited paths. ' +
363 |               'For full control, use a function instead.',
364 |             vm
365 |           )
366 |       }
367 |     }
368 |     this.value = this.lazy ? undefined : this.get()
369 |   }
370 | 
371 |   /**
372 |    * Evaluate the getter, and re-collect dependencies.
373 |    */
374 |   /*获得getter的值并且重新进行依赖收集*/
375 |   get() {
376 |     /*将自身watcher观察者实例设置给Dep.target，用以依赖收集。*/
377 |     pushTarget(this)
378 |     let value
379 |     const vm = this.vm
380 | 
381 |     /*
382 |     执行了getter操作，看似执行了渲染操作，其实是执行了依赖收集。
383 |     在将Dep.target设置为自生观察者实例以后，执行getter操作。
384 |     譬如说现在的的data中可能有a、b、c三个数据，getter渲染需要依赖a跟c，
385 |     那么在执行getter的时候就会触发a跟c两个数据的getter函数，
386 |     在getter函数中即可判断Dep.target是否存在然后完成依赖收集，
387 |     将该观察者对象放入闭包中的Dep的subs中去。
388 |     */
389 |     if (this.user) {
390 |       try {
391 |         value = this.getter.call(vm, vm)
392 |       } catch (e) {
393 |         handleError(e, vm, `getter for watcher "${this.expression}"`)
394 |       }
395 |     } else {
396 |       value = this.getter.call(vm, vm)
397 |     }
398 |     // "touch" every property so they are all tracked as
399 |     // dependencies for deep watching
400 |     /*如果存在deep，则触发每个深层对象的依赖，追踪其变化*/
401 |     if (this.deep) {
402 |       /*递归每一个对象或者数组，触发它们的getter，使得对象或数组的每一个成员都被依赖收集，形成一个“深（deep）”依赖关系*/
403 |       traverse(value)
404 |     }
405 | 
406 |     /*将观察者实例从target栈中取出并设置给Dep.target*/
407 |     popTarget()
408 |     this.cleanupDeps()
409 |     return value
410 |   }
411 | 
412 |   /**
413 |    * Add a dependency to this directive.
414 |    */
415 |   /*添加一个依赖关系到Deps集合中*/
416 |   addDep(dep: Dep) {
417 |     const id = dep.id
418 |     if (!this.newDepIds.has(id)) {
419 |       this.newDepIds.add(id)
420 |       this.newDeps.push(dep)
421 |       if (!this.depIds.has(id)) {
422 |         dep.addSub(this)
423 |       }
424 |     }
425 |   }
426 | 
427 |   /**
428 |    * Clean up for dependency collection.
429 |    */
430 |   /*清理依赖收集*/
431 |   cleanupDeps() {
432 |     /*移除所有观察者对象*/
433 |     let i = this.deps.length
434 |     while (i--) {
435 |       const dep = this.deps[i]
436 |       if (!this.newDepIds.has(dep.id)) {
437 |         dep.removeSub(this)
438 |       }
439 |     }
440 |     let tmp = this.depIds
441 |     this.depIds = this.newDepIds
442 |     this.newDepIds = tmp
443 |     this.newDepIds.clear()
444 |     tmp = this.deps
445 |     this.deps = this.newDeps
446 |     this.newDeps = tmp
447 |     this.newDeps.length = 0
448 |   }
449 | 
450 |   /**
451 |    * Subscriber interface.
452 |    * Will be called when a dependency changes.
453 |    */
454 |   /*
455 |   调度者接口，当依赖发生改变的时候进行回调。
456 |   */
457 |   update() {
458 |     /* istanbul ignore else */
459 |     if (this.lazy) {
460 |       this.dirty = true
461 |     } else if (this.sync) {
462 |       /*同步则执行run直接渲染视图*/
463 |       this.run()
464 |     } else {
465 |       /*异步推送到观察者队列中，由调度者调用。*/
466 |       queueWatcher(this)
467 |     }
468 |   }
469 | 
470 |   /**
471 |    * Scheduler job interface.
472 |    * Will be called by the scheduler.
473 |    */
474 |   /*
475 |         调度者工作接口，将被调度者回调。
476 |         */
477 |   run() {
478 |     if (this.active) {
479 |       const value = this.get()
480 |       if (
481 |         value !== this.value ||
482 |         // Deep watchers and watchers on Object/Arrays should fire even
483 |         // when the value is the same, because the value may
484 |         // have mutated.
485 |         /*
486 |           即便值相同，拥有Deep属性的观察者以及在对象／数组上的观察者应该被触发更新，因为它们的值可能发生改变。
487 |         */
488 |         isObject(value) ||
489 |         this.deep
490 |       ) {
491 |         // set new value
492 |         const oldValue = this.value
493 |         /*设置新的值*/
494 |         this.value = value
495 | 
496 |         /*触发回调渲染视图*/
497 |         if (this.user) {
498 |           try {
499 |             this.cb.call(this.vm, value, oldValue)
500 |           } catch (e) {
501 |             handleError(e, this.vm, `callback for watcher "${this.expression}"`)
502 |           }
503 |         } else {
504 |           this.cb.call(this.vm, value, oldValue)
505 |         }
506 |       }
507 |     }
508 |   }
509 | 
510 |   /**
511 |    * Evaluate the value of the watcher.
512 |    * This only gets called for lazy watchers.
513 |    */
514 |   /*获取观察者的值*/
515 |   evaluate() {
516 |     this.value = this.get()
517 |     this.dirty = false
518 |   }
519 | 
520 |   /**
521 |    * Depend on all deps collected by this watcher.
522 |    */
523 |   /*收集该watcher的所有deps依赖*/
524 |   depend() {
525 |     let i = this.deps.length
526 |     while (i--) {
527 |       this.deps[i].depend()
528 |     }
529 |   }
530 | 
531 |   /**
532 |    * Remove self from all dependencies' subscriber list.
533 |    */
534 |   /*将自身从所有依赖收集订阅列表删除*/
535 |   teardown() {
536 |     if (this.active) {
537 |       // remove self from vm's watcher list
538 |       // this is a somewhat expensive operation so we skip it
539 |       // if the vm is being destroyed.
540 |       /*从vm实例的观察者列表中将自身移除，由于该操作比较耗费资源，所以如果vm实例正在被销毁则跳过该步骤。*/
541 |       if (!this.vm._isBeingDestroyed) {
542 |         remove(this.vm._watchers, this)
543 |       }
544 |       let i = this.deps.length
545 |       while (i--) {
546 |         this.deps[i].removeSub(this)
547 |       }
548 |       this.active = false
549 |     }
550 |   }
551 | }
552 | ```
553 | 
554 | 通过上面对 vue 的响应系统的  学习，就可以了解到这个发布订阅模式就是这样的：
555 | 
556 | * Dep 负责收集所有相关的的订阅者 Watcher ，具体谁不用管，具体有多少也不用管，只需要根据 target 指向的计算去收集订阅其消息的 Watcher 即可，然后做好消息发布 notify 即可。
557 | * Watcher 负责订阅 Dep ，并在订阅的时候让 Dep 进行收集，接收到 Dep 发布的消息时，做好其 update 操作即可。
558 | 
559 | > 3、vue 中更多的应用
560 | 
561 | vue 中还有个组件之间的时间传递也是用到了发布订阅模式。
562 | $emit 负责发布消息， $on  负责消费消息（执行 cbs 里面的事件）
563 | 
564 | ```js
565 | Vue.prototype.$on = function(
566 |   event: string | Array<string>,
567 |   fn: Function
568 | ): Component {
569 |   const vm: Component = this
570 |   if (Array.isArray(event)) {
571 |     for (let i = 0, l = event.length; i < l; i++) {
572 |       this.$on(event[i], fn)
573 |     }
574 |   } else {
575 |     ;(vm._events[event] || (vm._events[event] = [])).push(fn)
576 |   }
577 |   return vm
578 | }
579 | 
580 | Vue.prototype.$emit = function(event: string): Component {
581 |   const vm: Component = this
582 |   let cbs = vm._events[event]
583 |   if (cbs) {
584 |     cbs = cbs.length > 1 ? toArray(cbs) : cbs
585 |     const args = toArray(arguments, 1)
586 |     for (let i = 0, l = cbs.length; i < l; i++) {
587 |       cbs[i].apply(vm, args)
588 |     }
589 |   }
590 |   return vm
591 | }
592 | ```
593 | 
594 | #### 总结
595 | 
596 | 本文通过对 vue 相关源码的学习，了解了发布订阅模式（观察者模式）的概念和应用。还了解了该模式的  一些优缺点：
597 | 
598 | * 时间上的解耦，对象之间的解耦。
599 | * 创建订阅者本身会消耗一定的时间和内存，并且订阅者订阅一个消息后，该消息一直不发生的话，那么该订阅者  会一直存在在内存中
600 | 
601 | #### 感谢
602 | 
603 | [从源码角度再看数据绑定](https://github.com/answershuto/learnVue/blob/master/docs/%E4%BB%8E%E6%BA%90%E7%A0%81%E8%A7%92%E5%BA%A6%E5%86%8D%E7%9C%8B%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A.MarkDown)
604 | 
605 | 《javascript 设计模式与开发实践》
606 | 


--------------------------------------------------------------------------------