一、设计模式简介
1.1 定义
什么叫做设计模式?
设计模式指的是一套编目分明,广为人知, 可以复用的代码书写经验的总结。
1.2 分类
所有的设计模式基本可以分成三类。
1 创建型设计模式
2 结构型设计模式
3 行为型设计模式
1.3 功能
创建型设计模式: 解决了对象在创建的时候的问题。
结构型设计模式: 解决了对象和类组合在一起的时候的问题。
行为型设计模式: 解决了对象和类之间的耦合、职责关系的问题。
1.4 历史
设计模式最初是由外国的一个GOF(Gang of Four)。一共有23种。注:设计模式发展到今天,已经远远超过了23种。
二、工厂模式
2.1 简单工厂模式
1 /* 所谓的简单工厂模式 指的是创建对象的函数。*/ 2 function createPerson(name, age, sex, job) { 3 var person = { 4 name: name, 5 age: age, 6 sex: sex, 7 job: job 8 } 9 return person; 10 } 11 var p = createPerson("老王", 30, "男", "厨师"); 12 var p1 = createPerson("老四", 31, "男", "程序员"); |
此时 createPerson就是一个简单“工厂”。 我们将“原料”放入,得到的是“产品”。
至于工厂内部如何执行,使用该工厂的人不关心。
2.2 寄生增强工厂
1 // 每一个设计模式都有它独特的适用场景 2 // 比如 当你想要给某一类对象添加方法但是又不影响原类 3 function People(name, age, sex) { 4 this.name = name; 5 this.age = age; 6 this.sex = sex; 7 8 } 9 People.prototype.sayWords = function(words) { 10 console.log(words); 11 } 12 13 // 实例化一个对象 14 var p = new People("小明", 13, "男"); 15 p.sayWords("asdewfewafea"); 16 17 18 var p1 = new People("小红", 14, "女"); 19 p1.sayWords("我是小红"); 20 21 22 // 现在我们希望 从People中出来的实例 有一部分是拥有独特的方法的。同时 不影响原类 23 // 因为不可以直接将新属性或者方法添加到原类上。所以我们定义一个新的工厂。对People的实例进行改造(增强) 24 function StrongPeople(name, age, sex) { 25 // 这就是工厂 26 // 在这里面初始化People的实例 叫做寄生 27 var p = new People(name, age, sex); 28 // 对p进行改造 增加新的属性和方法 29 p.money = 120; 30 p.sayHello = function() { 31 console.log("大家好,我有" + this.money + "元钱"); 32 } 33 return p; 34 } 35 // 初始化StrongPeople的实例 36 var strongPeople = new StrongPeople("老王", 20, "男"); 37 console.log(strongPeople); |
2.3 工厂方法
定义:管理多个类,可以返回多种产品。
1 // 工厂方法: 一个工厂,内部包含多个工厂的实例创建。 2 3 // 定义一个构造函数 4 function Dog() { 5 this.type = "dog"; 6 } 7 // 定义一个构造函数 8 function Cat() { 9 this.type = "cat"; 10 } 11 // 定义一个构造函数 12 function Pig() { 13 this.type = "pig"; 14 } 15 // 定义工厂方法 16 function FactoryMethod(type) { 17 // 判断传递进来的是什么 18 if(type === "Cat") { 19 return new Cat(); 20 } else if(type === "Dog") { 21 return new Dog(); 22 } else if(type === "Pig") { 23 return new Pig(); 24 } 25 } |
2.4 原型
1 // 原型 指的是构造函数的一个属性 它是一个对象 2 function People(name, age, sex) { 3 this.name = name; 4 this.age = age; 5 this.sex = sex; 6 } 7 // 给People的原型上添加内容 8 People.prototype.sayHello = function() { 9 console.log("大家好,我的名字是" + this.name + "我的年龄是" + this.age + "我是一个" + this.sex + "孩子") 10 } |
2.5 继承
1 // 继承 指的是类与类的继承关系 2 // 例如: 人类具备的方法 地球人一定具备 地球人具备的方法 亚洲人一定具备 亚洲人具备的方法 中国人一定具备 中国人具备的方法 北京人一定具备 北京人具备的方法 昌平人一定具备 3 // 在代码中 如何实现继承? 4 // 1 类式继承 5 // 将子类的原型设置为父类的实例 继承的是原型上的内容 6 // 2 构造函数式继承 7 // 在子类的构造函数中调用父类的构造函数 并该变父类的构造函数的指向 继承的是父类的属性 8 // 3 组合式继承 9 // 类式继承+构造函数式继承 10 11 12 // 定义父类 13 function People(name, age, sex) { 14 this.name = name; 15 this.age = age; 16 this.sex = sex; 17 } 18 19 People.prototype.sayHello = function() { 20 console.log("大家好,我的名字是" + this.name + "我的年龄是" + this.age + "我是一个" + this.sex + "孩子") 21 } 22 23 // 定义子类 24 function Student(name, age, sex, grade) { 25 // 继承父类的属性 26 People.apply(this, arguments); 27 // 子类自己的属性 28 this.grade = grade; 29 } 30 // 继承方法 31 // Student.prototype = new People();// 这种继承 可以是可以但是会在子类的原型对象身上有父类的属性个无用属性 于是我们使用ES5新增的Object.create方法修改一下 32 Student.prototype = Object.create(People.prototype); 33 // 这种继承方式会丢失子类的原本的原型对象 补回 34 Student.prototype.constructor = Student; 35 // 子类自己的方法 36 Student.prototype.intro = function() { 37 console.log("大家好,我的名字是" + this.name + "我的年龄是" + this.age + "我是一个" + this.sex + "孩子" + "我今年上" + this.grade + "年级了"); 38 } 39 // 初始化子类 40 var student = new Student("小明", 13, "男", 6); 41 console.log(student); 42 // 调用自身的方法 43 student.intro(); 44 // 调用父类的方法 45 student.sayHello(); |
额外拓展知识:
闭包: 它是一种特性。函数每执行一次,都会生成一个闭包。
垃圾回收机制: 该机制可以及时的清理内存中的垃圾。
垃圾: 指的是没有用的内容。
关注微信公众号“icketang”,获取最新前端资讯,学习资料
B站搜索“爱创课堂专业前端培训” 免费观看前端视频以及项目实战
学习咨询 请添加微信“haomei0452”