对于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

对于javaScript设计模式的认知与学习相关推荐

JavaScript设计模式之观察者模式（学习笔记）
设计模式(Design Pattern)对于软件开发来说其重要性不言而喻,代码可复用.可维护.可扩展一直都是软件工程中的追求!对于我一个学javascript的人来说,理解设计模式似乎有些困难,对仅切 ...
JavaScript设计模式之创建型设计模式
此系列总结与<JavaScript设计模式>,总共分为创建型设计模式.结构型设计模式.行为型设计模式.技巧型设计模式和架构性设计模式五大类. github原文地址:YOU-SHOULD-K ...
JavaScript设计模式与开发实践(网课学习)
Js设计模式与开发实践面向对象 5大设计原则 23种设计模式(实际只有21种) 设计模式主要分为下面三大类创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模 ...
再起航，我的学习笔记之JavaScript设计模式23(中介者模式)
中介者模式概念介绍中介者模式(Mediator):通过中介者对象封装一系列对象之间的交互,使对象之间不再相互引用降低他们之间的耦合,有时中介者对象也可以改变对象之间的交互. 创建一个中介中介者模 ...
javascript设计模式_JavaScript 设计模式学习总结
---------------------------------------------------------------------------------------------------- ...
16种JavaScript设计模式（中）
简介上文中介绍了学习设计模式前需要了解的一些基础概念和js的基础模式-原型模式,没看过的同学可以点这里,本章将介绍以下几种模式单例模式策略模式代理模式迭代器模式发布订阅模式命令模式组合 ...
javascript 设计模式（一）
1.为什么要深入学习Javascript? 用户对页面的美观性,易用性要求越来越高 Javascript+HTMl5+CSS3将是未来客户端技术的潮流学好JS有助于更好学习JS库.JS框架开发自己 ...
专访《Javascript设计模式与开发实践》作者曾探：爱编程爱生活
专访<Javascript设计模式与开发实践>作者曾探:爱编程爱生活发表于12小时前| 2742次阅读| 来源CSDN| 8 条评论| 作者夏梦竹专访曾探图书作者Javascr ...
JavaScript设计模式总结-组合模式
使用场景 1.对象存在整体-部分的结构,如树.数组等: 2.使用者希望对数据结构中的所有对象统一处理. 需要注意的是 1.组合模式所谓的结构并非"继承",而是"包含&qu ...

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

对于javaScript设计模式的认知与学习相关推荐

最新文章

热门文章