对于javaScript设计模式的认知与学习

一、设计模式
设计模式： 它是一套编目分明、广为人知、可复用的代码经验的总结
工具库：一些常用方法的集合体，例如jQuery、underscore，这些方法之间通常是没有联系的
框架：一套半成品代码，它里面也支持一些方法，但是这些方法之间通常是有联系的
架构：一套大型项目的设计思路

1.1设计模式的分类
设计模式大致可以分为三类：
1 创建型设计模式
2 结构型设计模式
3 行为型设计模式

1.2设计模式的作用
创建型设计模式的作用： 解决了创建对象时候的问题
结构型设计模式的作用： 解决了对象和类组合在一起时候的问题
行为型设计模式的作用： 解决了对象和类耦合、职责之间的问题

1.3设计模式的历史
设计模式最初是由国外的GOF(gang of four)合著完成，设计模式一共分为23种， 当发展至今已经远远超过23种

二、工厂模式
2.1 简单工厂
实例代码：
1function Factory(name, sex, age) {
2 // 声明一个对象
3 var obj = {};
4
5 // 给对象添加属性的过程
6 obj.name = name;
7 obj.sex = sex;
8 obj.age = age;
9
10 // 产生一个对象
11 return obj;
12}
2.2 寄生增强工厂
1function Person(name, sex, age) {
2 this.name = name;
3 this.sex = sex;
4 this.age = age;
5}
6
7// 添加say方法
8Person.prototype.say = function() {
9 console.log(‘this is say’);
10}
11
12// 寄生增强工厂
13function Factory(name, sex, age) {
14 // 获得对象
15 var obj = new Person(name, sex, age);
16 // 添加自定义的属性和方法
17 obj.hobby = ‘围棋’;
18 obj.show = function() {
19 console.log(‘this is show’);
20 }
21
22 // 返回一个对象
23 return obj;
24}
2.3 工厂方法
1function Dog() {
2 this.name = ‘汪汪’;
3}
4
5function Cat() {
6 this.name = ‘喵喵’;
7}
8
9function Pig() {
10 this.name = ‘哼哼’;
11}
12
13// 工厂方法，会根据传入的参数不同，产生不同的对象，但是不是直接产生，而是通过工厂调用产生
14function Factory(type) {
15 //根据你传入的type的类别，产生对应的对象
16 if (type == ‘Dog’) {
17 return new Dog();
18 } else if (type == ‘Cat’) {
19 return new Cat();
20 } else if (type == ‘Pig’) {
21 return new Pig();
22 }。
23}
24
三、原型和继承
原型：
每一个构造函数都拥有一个属性(prototype),指向一个对象；
指向的这个对象中的属性和方法，可以被所有该函数的实例所共享。
原型对象、构造函数、实例之间的关系
构造函数—》 原型对象：prototype
实例—>原型对象;proto
原型对象----》构造函数: constructor
原型链：(对象属性和方法的调用)
对象查找属性，首先会在当前对象中进行查找，如果找不到则会到对象的原型对象中去查找，
如果找不到则去原型对象的原型对象中去查找， 依次类推，这样就形成了一个链式结构，
我们将其称之为原型链
继承：
1、类式继承：子类的原型对象指向父类的实例
2、构造函数式继承： 不是真正的继承，在子类中使用父类的函数体，对对象进行简化赋值
3、组合继承： 1 + 2
4、寄生式继承： 声明一个空构造函数，将该函数的原型对象指向父类的原型对象
5、寄生组合式继承： 2 + 4
1/*
2 原型：
3 每一个构造函数都拥有一个属性(prototype),指向一个对象；
4 指向的这个对象中的属性和方法，可以被所有该函数的实例所共享。
5 原型对象、构造函数、实例之间的关系
6 构造函数—》 原型对象：prototype
7 实例—>原型对象;proto
8 原型对象----》构造函数: constructor
9 原型链：(对象属性和方法的调用)
10 对象查找属性，首先会在当前对象中进行查找，如果找不到则会到对象的原型对象中去查找，
11 如果找不到则去原型对象的原型对象中去查找， 依次类推，这样就形成了一个链式结构，
12 我们将其称之为原型链
13*/
14/*
15 继承：
16 1、类式继承：子类的原型对象指向父类的实例
17 2、构造函数式继承： 不是真正的继承，在子类中使用父类的函数体，对对象进行简化赋值
18 3、组合继承： 1 + 2
19 4、寄生式继承： 声明一个空构造函数，将该函数的原型对象指向父类的原型对象
20 5、寄生组合式继承： 2 + 4
21*/
22// 两个类： 人类， 学生类
23// function Person(name, sex, age) {
24// this.name = name;
25// this.age = age;
26// this.sex= sex;
27// }
28// Person.prototype.show = function() {
29// console.log(111);
30// }
31
32// function Student(name, sex, age, grade) {
33// this.name = name;
34// this.age = age;
35// this.sex= sex;
36// this.grade = grade;
37// }
38
39// // 类式继承
40// Student.prototype = new Person();
41// // 重新定义constructor
42// Student.prototype.constructor = Student;
43// // 给子类添加方法，必须在继承之后
44// Student.prototype.say = function() {
45// console.log(222);
46// }
47
48
49
50// 构造函数式继承
51
52// function Student(name, sex, age, grade) {
53// Person.apply(this, arguments)
54// this.grade = grade;
55// }
56// Student.prototype.say = function() {
57// console.log(222);
58// }
59
60// 组合继承
61// 构造函数继承
62// function Student(name, sex, age, grade) {
63// Person.apply(this, arguments)
64// this.grade = grade;
65// }
66// // 类式继承
67// Student.prototype = new Person();
68// // 重新定义constructor
69// Student.prototype.constructor = Student;
70// // 给子类添加方法，必须在继承之后
71// Student.prototype.say = function() {
72// console.log(222);
73// }
74
75// 寄生式继承
76// function Person(name, sex, age) {
77// this.name = name;
78// this.age = age;
79// this.sex= sex;
80// }
81// Person.prototype.show = function() {
82// console.log(111);
83// }
84
85// function Student(name, sex, age, grade) {
86// this.name = name;
87// this.age = age;
88// this.sex= sex;
89// this.grade = grade;
90// }
91
92// // 创建一个空的构造函数
93// function F() {
94
95// }
96// // 该函数的原型对象指向父类的原型对象
97// F.prototype = Person.prototype;
98// // 子类的原型对象指向空函数的实例
99// Student.prototype = new F();
100// Student.prototype.constructor = Student;
101// Student.prototype.say = function() {
102// console.log(222);
103// }
104// 寄生组合式继承
105function Person(name, sex, age) {
106 this.name = name;
107 this.age = age;
108 this.sex= sex;
109}
110Person.prototype.show = function() {
111 console.log(111);
112}
113
114function Student(name, sex, age, grade) {
115 Person.apply(this, arguments);
116 this.grade = grade;
117}
118
119// 创建一个空的构造函数
120function F() {
121
122}
123// 该函数的原型对象指向父类的原型对象
124F.prototype = Person.prototype;
125// 子类的原型对象指向空函数的实例
126Student.prototype = new F();
127Student.prototype.constructor = Student;
128Student.prototype.say = function() {
129 console.log(222);
130}
131
132
133
134
135var xiaoming = new Student(‘小明’, ‘男’, 18, 27);
136console.log(xiaoming);
137xiaoming.show();
138xiaoming.say();
四、安全类
无论new还是直接调用都产生对象
实例：
1function Student(name, sex) {
2 if (!(this instanceof Student)) {
3 return new Student(name, sex);
4 }
5 this.name = name;
6 this.sex = sex;
7}
8
五、垃圾回收机制和闭包
js的垃圾回收机制：
不用就删掉
全局变量和局部变量
全局变量： 脚本运行结束
局部变量: 函数调用产生，函数调用结束消亡
闭包：延长局部变量声明周期
思路：
1、延长一个变量声明周期
2、声明为一个全局变量
3、不想增加全局变量
4、让全局变量引用局部变量
实现：
1、函数内存在局部变量
2、该局部变量被一个内部函数引用
3、函数的返回值为内部的函数
应用：
保护变量，只能使用对外提供的方式来访问变量
实例：
1/* function xxoo() {
2 var a = 1;
3 function fun() {
4 console.log(++a);
5 }
6 return fun;
7}
8var res1 = xxoo();
9res1();
10res1(); */
11// function xxoo() {
12// var a = 1;
13// return function() {
14// console.log(++a);
15// }
16
17// }
18// var res1 = xxoo();
19// res1();// 2
20// res1();// 3
21
22// var res2 = xxoo();
23// res2();// 2
24// res2();// 3
25
26var res = (function() {
27 var a = 1;
28 return function() {
29 console.log(++a);
30 }
31
32})();
33res();
34res();
六、单例和闭包类
单例：
一个类只产生一个对象
在全局声明一个类，则该类会被无限制的new，将类设计为闭包类
简单单例：
在闭包中，直接实例化一个对象，该对象被外部所引用
缺陷：没有按需实例化
惰性单例：
按需实例化
6.1 闭包类
将一个类封装在一个闭包中
1var res = (function() {
2 function Student(name, sex, age) {
3 this.name = name;
4 this.sex = sex;
5 this.age = age;
6 }
7
8 return function() {
9 return Student;
10 }
11})();
6.2 普通单例
执行代码：
1var res = (function() {
2 function Student(name, sex, age) {
3 this.name = name;
4 this.sex = sex;
5 this.age = age;
6 }
7
8 // 产生一个对象
9 var instance = new Student();
10
11 return function() {
12 // 返回对象
13 return instance;
14 }
15})();
16
17var obj1 = res();
18var obj2 = res();
19console.log(obj1, obj2);
20console.log(obj1 === obj2);
6.3 惰性单例
1var res = (function() {
2 function Student(name, sex, age) {
3 console.log(1111);
4 this.name = name;
5 this.sex = sex;
6 this.age = age;
7 }
8 // 产生一个对象
9 var instance = null;
10
11 return function(name, sex, age) {
12 // 判断
13 if (!(instance instanceof Student)) {
14 instance = new Student();
15 }
16 // 设置对象的参数
17 instance.name = name;
18 instance.sex = sex;
19 instance.age = age;
20 // 返回对象
21 return instance;
22 }
23})();
24
25var obj1 = res(‘小明’, ‘男’, 18);
26console.log(obj1);
27var obj2 = res(‘莉莉’, ‘女’, 20);
28console.log(obj2);
29console.log(obj1 === obj2);
作业：
1// 需求: 在全局中只有一个namespace函数， 可以实现两种功能， 一种是存储数据，另一种是读取数据
2 // 存储数据的时候: namespace(‘a.b.c’, 123);
3 // 读取数据的时候: namespace(‘a.b.c’) => 123
4 // 读取: namespace(‘a.b’) => {c: 123}
5 // 读取: namespace(‘a’) => {b: {c: 123}}
6 // {
7 // b: {
8 // c: 123
9 // }
10 // }
11
12
13 // 该函数可以实现两种功能：
14 // 第一种是可以存储数据: 当存储数据的时候需要接受两个参数，第一个参数是存储的路径，第二个参数存储的数据
15 // 第二种是可以读取数据: 当读取数据的时候，需要接受一个参数就是要读取的路径
16