🎨 update: JavaScript

Author: ConardLi

docs/.vuepress/config.js

@@ -8,10 +8,30 @@ module.exports = {
         nav: [
             { text: '数据结构分类', link: '/dataStructure/' },
             { text: '算法分类', link: '/algorithm/' },
+            { text: 'JavaScript', link: '/JavaScript/' },
             { text: '博客', link: 'http://www.conardli.top/blog/article/' },
             { text: 'github', link: 'https://github.com/ConardLi' },
         ],
         sidebar: {
+            '/JavaScript/': [
+                '/JavaScript/',
+                '/JavaScript/手动实现call、apply、bind',
+                '/JavaScript/EventEmitter',
+                '/JavaScript/防抖',
+                '/JavaScript/节流',
+                '/JavaScript/浅拷贝和深拷贝',
+                '/JavaScript/数组去重、扁平、最值',
+                '/JavaScript/数组乱序-洗牌算法',
+                '/JavaScript/函数柯里化',
+                '/JavaScript/手动实现JSONP',
+                '/JavaScript/模拟实现promise',
+                '/JavaScript/手动实现ES5继承',
+                '/JavaScript/手动实现instanceof',
+                '/JavaScript/基于Promise的ajax封装',
+                '/JavaScript/单例模式',
+                '/JavaScript/异步循环打印',
+                '/JavaScript/图片懒加载',
+            ],
             '/algorithm/': [
                 '/algorithm/',
                 {

docs/JavaScript/EventEmitter.md

@@ -0,0 +1,180 @@
+---
+{
+  "title": "EventEmitter",
+}
+---
+## 观察者模式
+
+![image](http://img.blog.csdn.net/20161126191512446)
+
+这就类似我们在微信平台订阅了公众号 , 当它有新的文章发表后，就会推送给我们所有订阅的人。
+
+我们作为订阅者不必每次都去查看这个公众号有没有新文章发布，公众号作为发布者会在合适时间通知我们。
+
+我们与公众号之间不再强耦合在一起。公众号不关心谁订阅了它， 不管你是男是女还是宠物狗，它只需要定时向所有订阅者发布消息即可。
+
+### 观察者模式的优点
+
+- 可以广泛应用于异步编程，它可以代替我们传统的回调函数 
+- 我们不需要关注对象在异步执行阶段的内部状态，我们只关心事件完成的时间点
+- 取代对象之间硬编码通知机制，一个对象不必显式调用另一个对象的接口，而是松耦合的联系在一起 。
+
+虽然不知道彼此的细节，但不影响相互通信。更重要的是，其中一个对象改变不会影响另一个对象。
+
+## Nodejs的EventEmitter
+
+`Nodejs`的`EventEmitter`就是观察者模式的典型实现，`Nodejs`的`events`模块只提供了一个对象： `events.EventEmitter``。EventEmitter` 的核心就是事件触发与事件监听器功能的封装。
+
+> Node.js 里面的许多对象都会分发事件：一个 net.Server 对象会在每次有新连接时触发一个事件， 一个 fs.readStream 对象会在文件被打开的时候触发一个事件。 所有这些产生事件的对象都是 events.EventEmitter 的实例。
+
+### Api
+
+**addListener(event, listener)**
+
+为指定事件添加一个监听器，默认添加到监听器数组的尾部。
+
+**removeListener(event, listener)**
+
+移除指定事件的某个监听器，监听器必须是该事件已经注册过的监听器。它接受两个参数，第一个是事件名称，第二个是回调函数名称。
+
+**setMaxListeners(n)**
+
+默认情况下， EventEmitters 如果你添加的监听器超过 10 个就会输出警告信息。 setMaxListeners 函数用于提高监听器的默认限制的数量。
+
+**once(event, listener)**
+
+为指定事件注册一个单次监听器，即 监听器最多只会触发一次，触发后立刻解除该监听器。
+
+**emit(event, [arg1], [arg2], [...])**
+
+按监听器的顺序执行执行每个监听器，如果事件有注册监听返回 `true`，否则返回 `false`。
+
+### 基本使用
+
+```js
+var events = require('events');
+var eventEmitter = new events.EventEmitter();
+
+// 监听器 #1
+var listener1 = function listener1() {
+   console.log('监听器 listener1 执行。');
+}
+
+// 监听器 #2
+var listener2 = function listener2() {
+  console.log('监听器 listener2 执行。');
+}
+
+// 绑定 connection 事件，处理函数为 listener1 
+eventEmitter.addListener('connection', listener1);
+
+// 绑定 connection 事件，调用一次，处理函数为 listener2
+eventEmitter.once('connection', listener2);
+
+// 处理 connection 事件 
+eventEmitter.emit('connection');
+
+// 处理 connection 事件 
+eventEmitter.emit('connection');
+```
+
+## 手动实现EventEmitter
+
+```js
+    function EventEmitter() {
+      this._maxListeners = 10;
+      this._events = Object.create(null);
+    }
+
+    // 向事件队列添加事件
+    // prepend为true表示向事件队列头部添加事件
+    EventEmitter.prototype.addListener = function (type, listener, prepend) {
+      if (!this._events) {
+        this._events = Object.create(null);
+      }
+      if (this._events[type]) {
+        if (prepend) {
+          this._events[type].unshift(listener);
+        } else {
+          this._events[type].push(listener);
+        }
+      } else {
+        this._events[type] = [listener];
+      }
+    };
+
+    // 移除某个事件
+    EventEmitter.prototype.removeListener = function (type, listener) {
+      if (Array.isArray(this._events[type])) {
+        if (!listener) {
+          delete this._events[type]
+        } else {
+          this._events[type] = this._events[type].filter(e => e !== listener && e.origin !== listener)
+        }
+      }
+    };
+
+    // 向事件队列添加事件，只执行一次
+    EventEmitter.prototype.once = function (type, listener) {
+      const only = (...args) => {
+        listener.apply(this, args);
+        this.removeListener(type, listener);
+      }
+      only.origin = listener;
+      this.addListener(type, only);
+    };
+
+    // 执行某类事件
+    EventEmitter.prototype.emit = function (type, ...args) {
+      if (Array.isArray(this._events[type])) {
+        this._events[type].forEach(fn => {
+          fn.apply(this, args);
+        });
+      }
+    };
+
+    // 设置最大事件监听个数
+    EventEmitter.prototype.setMaxListeners = function (count) {
+      this.maxListeners = count;
+    };
+```
+
+测试代码：
+
+```js
+    var emitter = new EventEmitter();
+
+    var onceListener = function (args) {
+      console.log('我只能被执行一次', args, this);
+    }
+
+    var listener = function (args) {
+      console.log('我是一个listener', args, this);
+    }
+
+    emitter.once('click', onceListener);
+    emitter.addListener('click', listener);
+
+    emitter.emit('click', '参数');
+    emitter.emit('click');
+
+    emitter.removeListener('click', listener);
+    emitter.emit('click');
+```
+
+## JavaScript自定义事件
+
+`DOM`也提供了类似上面`EventEmitter`的`API`，基本使用：
+
+```js
+//1、创建事件
+var myEvent = new Event("myEvent");
+
+//2、注册事件监听器
+elem.addEventListener("myEvent",function(e){
+  
+})
+
+//3、触发事件
+elem.dispatchEvent(myEvent);
+```

docs/JavaScript/README.md

@@ -0,0 +1,36 @@
+---
+{
+  "title": "JavaScript专题",
+}
+---
+
+### 二叉树
+
+- [二叉树的基本操作](./二叉树/二叉树的基本操作.md)⭐⭐
+- [二叉树的中序遍历](./二叉树/二叉树的中序遍历.md)⭐⭐
+- [二叉树的前序遍历](./二叉树/二叉树的前序遍历.md)⭐⭐
+- [二叉树的后序遍历](./二叉树/二叉树的后序遍历.md)⭐⭐
+- [重建二叉树](./二叉树/重建二叉树.md)⭐⭐
+- [求二叉树的遍历](./二叉树/重建二叉树.html/#求二叉树的遍历)⭐⭐
+- [对称的二叉树](./二叉树/对称的二叉树.md)⭐⭐
+- [二叉树的镜像](./二叉树/二叉树的镜像.md)⭐⭐
+- [二叉搜索树的第k个节点](./二叉树/二叉搜索树的第k个节点.md)⭐⭐
+- [二叉搜索树的后序遍历](./二叉树/二叉搜索树的后序遍历.md)⭐⭐
+- [二叉树的最大深度](./二叉树/二叉树的最大深度.md)⭐⭐
+- [二叉树的最小深度](./二叉树/二叉树的最小深度.md)⭐⭐
+- [平衡二叉树](./二叉树/平衡二叉树.md)⭐⭐
+- [不分行从上到下打印二叉树](./二叉树/从上到下打印二叉树.html/#题目1-不分行从上到下打印)⭐⭐
+- [把二叉树打印成多行](./二叉树/从上到下打印二叉树.html/#题目2-把二叉树打印成多行)⭐⭐
+- [二叉树中和为某一值的路径](./二叉树/二叉树中和为某一值的路径.md)⭐⭐⭐
+- [二叉搜索树与双向链表](./二叉树/二叉搜索树与双向链表.md)⭐⭐⭐
+- [按之字形顺序打印二叉树](./二叉树/从上到下打印二叉树.html/#题目3-按之字形顺序打印二叉树)⭐⭐⭐
+- [序列化二叉树](./二叉树/序列化二叉树.md)⭐⭐⭐
+- [二叉树的下一个节点](./二叉树/二叉树的下一个节点.md)⭐⭐⭐
+- [树的子结构](./二叉树/树的子结构.md)⭐⭐⭐
+
+
+### 堆
+
+- [堆的基本操作](./堆/堆的基本操作.md)⭐⭐⭐
+- [数据流中的中位数](./堆/数据流中的中位数.md)⭐⭐⭐
+- [最小的k个数](./堆/最小的k个数.md)⭐⭐⭐

docs/JavaScript/函数柯里化.md

@@ -0,0 +1,56 @@
+---
+{
+  "title": "函数柯里化",
+}
+---
+
+## 定义
+
+在数学和计算机科学中，柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。
+
+> 通俗易懂的解释：用闭包把参数保存起来，当参数的数量足够执行函数了，就开始执行函数。
+
+
+## 实现
+
+- 判断当前函数传入的参数是否大于或等于`fn`需要参数的数量，如果是，直接执行`fn`
+- 如果传入参数数量不够，返回一个闭包，暂存传入的参数，并重新返回`currying`函数
+
+```js
+    function currying(fn, ...args) {
+      if (args.length >= fn.length) {
+        return fn(...args);
+      } else {
+        return (...args2) => currying(fn, ...args, ...args2);
+      }
+    }
+```
+
+我们来一个简单的实例验证一下：
+
+```js
+    const curryingFun = currying(fun)
+    curryingFun(1)(2)(3);  // 1 2 3 
+    curryingFun(1, 2)(3);  // 1 2 3 
+    curryingFun(1, 2, 3);  // 1 2 3 
+```
+
+## 应用场景
+
+### 参数复用
+
+```js
+    function getUrl(protocol, domain, path) {
+      return protocol + "://" + domain + "/" + path;
+    }
+
+    var page1 = getUrl('http', 'www.conardli.top', 'page1.html');
+    var page2 = getUrl('http', 'www.conardli.top', 'page2.html');
+```
+
+我们使用`currying`来简化它：
+
+```js
+let conardliSite = currying(simpleURL)('http', 'www.conardli.top');
+let page1 = conardliSite('page1.html');    
+```

docs/JavaScript/单例模式.md

@@ -0,0 +1,36 @@
+---
+{
+  "title": "单例模式",
+}
+---
+
+在合适的时候才创建对像，并且只创建唯一的一个。
+
+创建对象和管理单例的职责被分布在两个不同的方法中，这两个方法组合起来才具有单例模式的威力。
+
+使用闭包实现：
+
+```js
+var Singleton = function(name) {
+    this.name = name;
+};
+
+Singleton.prototype.getName = function() {
+    alert(this.name);
+};
+
+Singleton.getInstance = (function(name) {
+    var instance;
+    return function(name){
+        if (!instance) {
+            instance = new Singleton(name);
+        }
+        return instance;
+    }
+})();
+
+var a = Singleton.getInstance('ConardLi');
+var b = Singleton.getInstance('ConardLi2');
+
+console.log(a===b);   //true
+```