技术文章 | Technical articles

设计模式源码笔记1.1——爱创课堂专业前端培训

一、设计模式简介

1.1 定义

什么叫做设计模式?

设计模式指的是一套编目分明,广为人知, 可以复用的代码书写经验的总结。

1.2 分类

所有的设计模式基本可以分成三类。

1 创建型设计模式

2 结构型设计模式

3 行为型设计模式

1.3 功能

创建型设计模式: 解决了对象在创建的时候的问题。

结构型设计模式: 解决了对象和类组合在一起的时候的问题。

行为型设计模式: 解决了对象和类之间的耦合、职责关系的问题。

1.4 历史

图片1.png 

设计模式最初是由外国的一个GOFGang of Four)。一共有23种。注:设计模式发展到今天,已经远远超过了23种。

 

 

二、工厂模式

2.1 简单工厂模式

/* 所谓的简单工厂模式 指的是创建对象的函数。*/

function createPerson(name, age, sex, job) {

var person = {

 name: name,

 age: age,

 sex: sex,

 job: job

}

return person;

10 }

11 var p = createPerson("老王", 30, "", "厨师");

12 var p1 = createPerson("老四", 31, "", "程序员"); 

此时 createPerson就是一个简单“工厂”。 我们将“原料”放入,得到的是“产品”。

至于工厂内部如何执行,使用该工厂的人不关心。

 

 

 

2.2 寄生增强工厂

// 每一个设计模式都有它独特的适用场景

// 比如 当你想要给某一类对象添加方法但是又不影响原类

function People(name, age, sex) {

this.name = name;

this.age = age;

this.sex = sex;

}

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 工厂方法

定义:管理多个类,可以返回多种产品。

// 工厂方法: 一个工厂,内部包含多个工厂的实例创建。

 

// 定义一个构造函数

function Dog() {

this.type = "dog";

}

// 定义一个构造函数

function Cat() {

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 原型

// 原型 指的是构造函数的一个属性 它是一个对象

function People(name, age, sex) {

this.name = name;

this.age = age;

this.sex = sex;

}

// People的原型上添加内容

People.prototype.sayHello = function() {

console.log("大家好,我的名字是" + this.name + "我的年龄是" + this.age + "我是一个" + this.sex + "孩子")

10 }

2.5 继承

// 继承 指的是类与类的继承关系

// 例如: 人类具备的方法 地球人一定具备 地球人具备的方法 亚洲人一定具备 亚洲人具备的方法 中国人一定具备 中国人具备的方法 北京人一定具备 北京人具备的方法 昌平人一定具备

// 在代码中 如何实现继承?

// 1 类式继承

// 将子类的原型设置为父类的实例 继承的是原型上的内容

// 2 构造函数式继承

// 在子类的构造函数中调用父类的构造函数 并该变父类的构造函数的指向 继承的是父类的属性

// 3 组合式继承

// 类式继承+构造函数式继承

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”

上一篇文章: 爱创课堂前端源码笔记——canvas
下一篇文章: web前端_Ajax源码笔记
更多详细内容请访问爱创官网首页:http://www.icketang.com/

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>