一、节流器
有一些高频事件，触发多次和触发一次的效果是一样，但是多次触发会导致性能消耗增加，所以针对于类似事件使用节流器（函数节流）
实例代码：
1/*
2 节流器:
3 添加节流器(延迟执行，将高频事件变为一次性的事件)
4 移除节流器
5 调用方式：
6 添加：
7 fn：要执行的程序
8 options；配置选项对象(可选参数)
9 []：调用函数fn时放置参数
10 context:执行上下文
11 time；延迟执行时间
12 调用:throttle(fn, options)
13 移除:
14 调用；throttle(false,fn)
15 实质：
16 clearTimeout(fn.timer)
17
18 函数重载：
19 1、函数的个数不同，调用不同的函数------执行不同的程序
20 2、实参的类型不同，调用不同的函数------执行不同的程序
21
22
23 开启延时器，第一次为赋值，其他次为更改值,多次调用函数节流器都要使其值相互独立
24 采用对象属性的方式
25 给fn添加一个timer属性
26
27*/
28function throttle() {
29 if (typeof arguments[0] === ‘function’) {
30 // 添加
31 // 接收参数
32 // 函数
33 var fn = arguments[0];
34 // 配置选项
35 var options = arguments[1] || {
36 // args: [1,2,3],
37 arg: [],
38 time: 1000,
39 context: null // 等价于默认指向了window
40 };
41 // 清除上一次的延时器
42 clearTimeout(fn.timer);
43 // 延时器
44 fn.timer = setTimeout(function() {
45 // 改变this指向，传入调用函数时的参数
46 fn.apply(options.context, options.args);
47 }, options.time);
48
49 } else {
50 // 移除
51 // 接收参数
52 // 函数
53 var fn = arguments[1];
54 if (fn.timer) {
55 clearTimeout(fn.timer);
56 }
57 }
58}
二、迭代器
1var $ = (function() {
2 // 声明一个局部变量
3 var obj = {
4 each: function(type, fn) {
5 // console.log(arguments);
6 // 判断是数组还是对象
7 if (Array.isArray(type)) {
8 // 遍历数组
9 for (var i = 0; i < type.length; i++) {
10 fn.call(type[i], i, type[i]);
11 }
12 } else if (Object.prototype.toString.call(type) === ‘[object Object]’) {
13 // 遍历对象
14 for (var i in type) {
15 fn.call(type[i], i, type[i]);
16 }
17 }
18 }
19 }
20 // 返回一个对象
21 return obj;
22 })();
三、适配器
主要解决在软件系统中，常常要将一些"现存的对象"放到新的环境中，而新环境要求的接口是现对象不能满足的。
将一个类的接口转换成客户希望的另外一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。
例子：
电脑 转换器(适配器) 网线的接口
苹果手机 耳机的转换头(适配器) 森海塞尔

1// 建立一个适配器对象
2var zh = {
3 // 根据id查找指定的元素对象
4 find: function(id) {
5 return $(’#’+id)[0];
6 },
7 // html方法:有参数代表写入，没有参数代表读取
8 html: function(dom,content) {
9 if (content === undefined) {
10 return $(dom).html();
11 } else {
12 $(dom).html(content);
13 }
14 }
15}
16var box = zh.find(‘box’);
17console.log(box);
18console.log(zh.html(box));
19zh.html(box, ‘i love you’);
四、命令模式
每个命令都代表一个功能的集合
命令模式（Command Pattern）是一种数据驱动的设计模式，它属于行为型模式。请求以命令的形式包裹在对象中，并传给调用对象。调用对象寻找可以处理该命令的合适的对象，并把该命令传给相应的对象，该对象执行命令。
ls:展示文件
ctrl+c:终止程序
ctrl+l:清屏
命令模式和策略模式的区别：
策略模式:多种策略实现一个目标（最终结果是相同）
命令模式:每个命令是一个结果，命令之间不同
实例：
1// 获得canvas元素
2var canvas = document.querySelector(‘canvas’);
3// 获得画笔对象
4var ctx = canvas.getContext(‘2d’);
5// 命令模式
6var Cmd = {
7 // 创建一个画猫的命令
8 drawCat: function() {
9 // 平移坐标系
10 ctx.translate(canvas.width / 2, canvas.height / 2);
11 // 画大圆
12 this.fillCircle(0, 0, 150, ‘blue’);
13 // 画圆
14 this.strokeCircle(0, 0, 150);
15 this.fillCircle(0, 20, 130, ‘white’);
16 this.strokeCircle(0, 20, 130);
17 this.fillCircle(-40, -100, 25, ‘white’);
18 this.fillCircle(40, -100, 25, ‘white’);
19 this.strokeCircle(-40, -100, 25);
20 this.strokeCircle(40, -100, 25);
21 this.fillCircle(-35, -100, 6);
22 this.fillCircle(35, -100, 6);
23 this.fillCircle(-35, -100, 1.5, ‘white’);
24 this.fillCircle(35, -100, 1.5, ‘white’);
25
26
27 },
28 // 创建一个填充画圆的命令
29 fillCircle: function(x, y, r, color = ‘black’) {
30 // 设置填充颜色
31 ctx.fillStyle = color;
32 // 开启路径
33 ctx.beginPath();
34 // 画圆
35 ctx.arc(x, y, r, 0, Math.PI * 2);
36 // 填充
37 ctx.fill();
38 // 关闭路径
39 ctx.closePath();
40 },
41 // 创建一个描边画圆的命令
42 strokeCircle: function(x, y, r, color = ‘black’) {
43 // 设置填充颜色
44 ctx.strokeStyle = color;
45 // 开启路径
46 ctx.beginPath();
47 // 画圆
48 ctx.arc(x, y, r, 0, Math.PI * 2);
49 // 描边
50 ctx.stroke();
51 // 关闭路径
52 ctx.closePath();
53 }
54}
55
56// 画猫
57Cmd.drawCat();
五、组合模式
组合模式，又叫部分整体模式，是用于把一组相似的对象当作一个单一的对象。组合模式依据树形结构来组合对象，用来表示部分以及整体层次。这种类型的设计模式属于结构型模式，它创建了对象组的树形结构。

这种模式创建了一个包含自己对象组的类。该类提供了修改相同对象组的方式。
组合模式会有一个基类，不会产生对象只会让其他类继承该类。
执行代码：
1// 创建一个基类，该基类只能被继承，不能用于创建对象
2 // 在使用的时候一定要先创建树叶在创建树枝
3 function Tree(mark, content) {
4 // 创建元素的对象
5 this.el = document.createElement(mark);
6 // 写入内容
7 this.el.innerHTML = content;
8 // 设置该元素的子元素
9 this.children = [];
10 }
11 // 添加子类
12 Tree.prototype.add = function(child) {
13 this.children.push(child);
14 return this;
15 }
16
17 // 渲染的方法
18 Tree.prototype.render = function() {
19 // 备份this
20 var me = this;
21 this.children.forEach(function(value) {
22 // console.log(value);
23 me.el.appendChild(value.el);
24 });
25 }
26
27 // 创建树枝和树叶的类
28 function Leaf(el,content) {
29 // 构造函数继承
30 Tree.apply(this, arguments);
31 }
32
33 // 树枝和树叶继承基类（Tree）
34 Leaf.prototype = Object.create(Tree.prototype);
35
36 // 创建手机
37 /*
38 手机分类
39 国产手机
40 华为
41 小米
42 红米系列
43 小米系列
44 小米1
45 小米2
46 64G
47 128G
48
49 国外手机
50 */
51 var l1 = new Leaf(‘ul’, ‘手机分类’);
52 var l21 = new Leaf(‘li’, ‘国产手机’);
53 var l22 = new Leaf(‘li’, ‘国外手机’);
54 var l31 = new Leaf(‘li’, ‘华为’);
55 var l32 = new Leaf(‘li’, ‘小米’);
56 var l41 = new Leaf(‘li’, ‘红米系列’);
57 var l42 = new Leaf(‘li’, ‘小米系列’);
58 var l51 = new Leaf(‘li’, ‘小米1’);
59 var l52 = new Leaf(‘li’, ‘小米2’);
60 var l61 = new Leaf(‘li’, ‘64G’);
61 var l62 = new Leaf(‘li’, ‘128G’);
62 // 封装函数产生指定树枝对象
63 function createBranch() {
64 return new Leaf(‘ul’, ‘’);
65 }
66 // 将树叶或者树枝添加到上一级的树枝中
67 l1.add(l21).add(l22);
68 var l20 = createBranch();
69 l21.add(l20);
70 l20.add(l31).add(l32);
71 var l30 = createBranch();
72 l32.add(l30);
73 l30.add(l41).add(l42);
74 var l40 = createBranch();
75 l42.add(l40);
76 l40.add(l51).add(l52);
77 var l50 = createBranch();
78 l52.add(l50);
79 l50.add(l61).add(l62);
80
81 // 反向渲染
82 l50.render();
83 l52.render();
84 l40.render();
85 l42.render();
86 l30.render();
87 l32.render();
88 l20.render();
89 l21.render();
90 l1.render();
91
92 // 将所有分类显示到页面上
93 document.body.appendChild(l1.el);
结果：
1
六、jquery
执行代码：
1var $box = KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲box'); 2console…box);
结果：
1
为什么jquery的对象，不是只想jquery的构造函数，而是指向了init?
解释：
1var jQuery = function() {
2 return new init();
3};
4
5// init的函数
6var init = function() {
7
8}