设计模式

设计模式，工具库，框架，架构区别：

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

设计模式的分类及作用：

  1. 创建型设计模式：解决了创建对象时候的问题
  • 简单工厂模式 ✔︎
  • 工厂方法模式 ✔︎
  • 抽象工厂模式
  • 创建者模式
  • 原型模式
  • 单例模式 ✔︎
  1. 结构型设计模式：解决了对象和类组合在一起时候的问题
  • 外观模式
  • 适配器模式
  • 适配器模式
  • 代理模式
  • 装饰模式
  • 桥接模式
  • 组合模式
  • 享元模式
  1. 行为型设计模式：解决了对象和类耦合，职责之间的问题
  • 模板方法模式 ✔︎
  • 观察者模式 ✔︎
  • 状态模式
  • 策略模式 ✔︎
  • 职责链模式
  • 命令模式
  • 访问者模式
  • 调停者模式
  • 备忘录模式 ✔︎
  • 迭代器模式
  • 解释器模式

面向对象设计原则

  • 单一职责原则
  • 开闭原则
  • 里氏替代原则
  • 依赖注入原则
  • 接口分离原则
  • 迪米特原则
  • 组合/聚合复用原则

创建型工厂模式

1.工厂模式

应用场景

网页端存储token，支不支持h5的localstorage，一个工厂的两个产品

1.1 简单工厂

function factory(name,sex,age){
  return {
    name: name,
    sex: sex,
    age: age
  }
}
factory('zs','男'，18)
factory('ww','女'，16)

1.2 工厂方法模式

function Tiger (type,name,age) {
  this.type = type;
  this.name = name;
  this.age = age;
  this.beharie= function() {
    console.log('tiger')
  }
}
function Cat (type,name,age) {
  this.type = type;
  this.name = name;
  this.age = age;
  this.beharie= function() {
    console.log('cat')
  }
}
// 动物通用类
function Animal (type,name,age) {
  this.type = type;
  this.name = name;
  this.age = age;
}
// 定义一个方法来管理上面两个类
function FactoryMethod(type,name,age){
  if(type==='tiger'){
    return new Tiger(type,name,age) 
  } else if(type==='cat'){
    return new Cat(type,name,age)
  } else {
    return new Animal(type,name,age)
  }
}
// 实例化
var tiger = FactoryMethod('tiger','lh',10);
var cat = FactoryMethod('cat','xmm',3);
var dog = FactoryMethod('dog','bigdog',6)


function FruitMaker() {
}
FruitMaker.prototype.make = function(type,meta) {
  if(typeof this.[type] === 'functon') {
    var func = this[type];
    func.prototype = FruitMaker.prototype;
    return new func(meta)
  } else {
    throw '很抱歉，工厂不能生产这个产品'
    }
}
// 扩展生产线
FruitMaker.prototype.extend = function (obj) {
  for(var key in obj) {
    this.[key] = obj[key];
  }
}

FruitMaker.prototype.extend({
  'Apple': function (meta) {
    console.log('苹果汁',meta)
  }，
  'Pear': function (meta) {
    console.log('梨汁',meta)
  }
})
// 实例化
var maker = new FritMaker();

var appleObj = maker.make('Apple','苹果，水')
console.log(appleObj.constructor.name)

var pearObj = maker.make('Pear','梨子，水')
console.log(pearObj.constructor.name)

1.3 原型模式

1.4 继承模式

继承种类：

  1. 类式继承（原型继承）
//  定义基类
function People(name,sex,age) {
  this.name = name;
  this.sex = sex;
  this.age = age;
}
// 基类的原型定义方法
People.prototype.sayHi = function(){
  return '姓名'+this.name
}
// 定义子类
function Doctor(name,sex,age,country) {
  this.name = name;
  this.sex = sex;
  this.age = age;

  this.country = country
}
// 类式继承： 子类的原型指向父类的实例化
Doctor.prototype = new People();
// 修正子类的构造函数
Doctor.prototype.constructor = Doctor
// 定义子类的方法
  Doctor.prototype.behavior = function (){
  return '救死扶伤'
}
//  实例化一个子类对象
var d = new Doctor('终南山', '男',60,'中国')
d.sayHi();
d.behavior();
// 实例化一个父类对象
var p = new People('zs','女',18)
d.sayHi();  //
d.behavior(); //报错

2.构造函数继承（apply或call方法）（不是真正的继承，不能访问原型方法）

//  定义基类
function People(name,sex,age) {
  this.name = name;
  this.sex = sex;
  this.age = age;
}
// 基类的原型定义方法
People.prototype.sayHi = function(){
  return '姓名'+this.name
}
// 定义子类
function Doctor(name,sex,age,country) {
// 不是真正的继承，只改变了调用对象，不可以调用原型方法
  People.apply(this, arguments);

  this.country = country
}
// 定义子类的方法
  Doctor.prototype.behavior = function (){
  return '救死扶伤'
}
//  实例化一个子类对象
var d = new Doctor('终南山', '男',60,'中国')
d.sayHi(); //报错，不能调用
d.behavior();
// 实例化一个父类对象
var p = new People('zs','女',18)
d.sayHi();  //
d.behavior(); //报错

3.组合式继承（类式继承+构造函数式继承）

//  定义基类
function People(name,sex,age) {
  this.name = name;
  this.sex = sex;
  this.age = age;
}
// 基类的原型定义方法
People.prototype.sayHi = function(){
  return '姓名'+this.name
}
// 定义子类
function Doctor(name,sex,age,country) {
// 不是真正的继承，只改变了调用对象，不可以调用原型方法
  People.apply(this, arguments);

  this.country = country
}
// 类式继承： 子类的原型指向父类的实例化
Doctor.prototype = new People();
// 修正子类的构造函数
Doctor.prototype.constructor = Doctor
// 定义子类的方法
  Doctor.prototype.behavior = function (){
  return '救死扶伤'
}
//  实例化一个子类对象
var d = new Doctor('终南山', '男',60,'中国')
d.sayHi();
d.behavior();
// 实例化一个父类对象
var p = new People('zs','女',18)
d.sayHi();  //
d.behavior(); //报错

4.寄生式继承

//  定义基类
function People(name,sex,age) {
  this.name = name;
  this.sex = sex;
  this.age = age;
}
// 基类的原型定义方法
People.prototype.sayHi = function(){
  return '姓名'+this.name
}
// 定义子类
function Doctor(name,sex,age,country) {
// 不是真正的继承，只改变了调用对象，不可以调用原型方法
  People.apply(this, arguments);

  this.country = country
}
// 类式继承会在原型中，存在几个无用的属性undefind，
// 寄生式继承：定义一个方法，实现去除原型中的空参数
function extent(Child,Parent){
  // 创建一个空的类
  var F = function (){}
 // 空类的原型指向父类实例化对象
  F.prototype = Parent.prototype;
 // 子类的原型指向空类的实例化对象
 Child.prototype = new F();
 // 修正构造函数指向子类
  Child.prototype.constructor = Child;
}
extent(Doctor, People)
// 定义子类的方法
  Doctor.prototype.behavior = function (){
  return '救死扶伤'
}
//  实例化一个子类对象
var d = new Doctor('终南山', '男',60,'中国')
d.sayHi();
d.behavior();
// 实例化一个父类对象
var p = new People('zs','女',18)
d.sayHi();  //
d.behavior(); //报错

5.组合寄生式寄生（寄生式继承+组合式继承）

2.单列模式

概念： 保证一个类只有一个实例（通过指定的构造函数，无论创建多少次对象，都只有一个）

场景： 只需要有一个对象的时候（登录/注册）

作用：

  • 模块间通信
  • 系统中某个类的对象只能存在一个
  • 保护自己的属性和方法

注意事项

  • 注意this的使用
  • 闭包容易造成内存泄漏
  • 注意new的成本

实现方式

  • 全局变量
  • 静态属性
  • 优化（即时函数）
  • 闭包-惰性函数

js实战

// 最终效果
function Tool() {}
var t1 = new Tool()
var t2 = new Tool()
var t3 = new Tool()
var t4 = new Tool()
// t1,t2,t3,t4返回同一个对象
// 全局变量方式
var instance = null;
 function Tool() {
  if(instance) {
    return instance;
  }
  instance = this;
  this.name = 'zs';
  this.age = '18';
}
var t1 = new Tool()
var t2 = new Tool()
var t3 = new Tool()
var t4 = new Tool()
t1===t2;t3===t4;
// 缺点：使用全局变量，变量污染
// 优化 即时函数
 (function(w) {
   var instance = null;
   function Tool() {
    if(instance) {
      return instance;
    }
    instance = this;
    this.name = 'zs';
    this.age = '18';
  }
  w.Tool = Tool;
  })(window)
var t1 = new Tool()
var t2 = new Tool()
var t3 = new Tool()
var t4 = new Tool()
t1===t2;t3===t4;
// 闭包-惰性函数
fuction Tool() {
  var instance = this;
  var oldPrototype = Tool.prototype;
  this.name = 'zs'
  this.age = 18;
  // 惰性函数（函数只会被执行一次，后面直接调用）
  Tool = function () {
    return instance;
  }
  Tool.prototype = oldPrototype;
  instance = new Tool();
  instance.constructor = Tool;
   return instance; 
}
var t1 = new Tool()
var t2 = new Tool()
t1 === t2;

3.观察者模式（promise前置知识——4.发布订阅和观察者模式）

4.备忘录模式

5.命名空间模式

6.策略模式

var Celue = {
    slow: function(distance) {
        console.log('慢速，耗时',distance*2,'小时')
    },
    normal: function(distance) {
        console.log('正常，耗时',distance,'小时')
    },
    fast: function(distance) {
        console.log('快速，耗时',distance/2,'小时')
    },
}
function PersonRun(from, to) {
    this.from = from;
    this.to = to;
}
PersonRun.prototype.run = function(celue) {
    celue(this.to - this.from)
}
var p = new PersonRun(0, 20);
p.run(Celue.slow)
p.run(Celue.normal)
p.run(Celue.fast)

7.模版模式

     function Fruit() {
     }
     Fruit.prototype.make = function () {
       // 1. 烧水
       this.wather();
       // 2. 材料
       this.cailiao();
       // 3.搅拌
       this.jiaoban();
       // 4.晾凉
       this.cool();
     }
     Fruit.prototype.wather = function (){
       console.log('烧水')
     }
     Fruit.prototype.cailiao = function (){
       console.log('材料')
     }
     Fruit.prototype.jiaoban = function (){
       console.log('搅拌')
     }
     Fruit.prototype.cool = function (){
       console.log('晾凉')
     }
    
    function Apple(){}
    Apple.prototype = new Fruit()
    Apple.prototype.cailiao = function() { // 重写不一样的方法
      console.log('苹果')
    }
    var apple = new Apple();
    console.log(apple)
    apple.make();

8.命令模式

    // 点餐人员 关注：菜单
    // 厨房老大 关注：分配
    // 厨师 关注：菜单
    var cook1 = {
      name: '王小儿',
      make: function(foodType) {
        switch(foodType) {
          case 'tudou':
            console.log(this.name,'做土豆');
            break;
          case 'jidan':
            console.log(this.name,'做鸡蛋');
            break;
          case 'fanqie':
            console.log(this.name,'做番茄');
            break;
          default:
            console.log('不会做！');
            break;
        }
      }
    }
    var cook2 = {
      name: '王大儿',
      make: function(foodType) {
        switch(foodType) {
          case 'tudou':
            console.log(this.name,'做土豆加辣椒');
            break;
          case 'jidan':
            console.log(this.name,'做鸡蛋加辣椒');
            break;
          case 'fanqie':
            console.log(this.name,'做番茄加辣椒');
            break;
          default:
            console.log('不会做！');
            break;
        }
      }
    }
// 菜单
var foodList = ['tudou','jidan', 'fanqie'];
// 厨师长
function MakFoodCommand(cook, foodType){
  this.cook = cook;
  this.foodType = foodType;
}
MakFoodCommand.prototype.execute = function(){
  this.cook.make(this.foodType)
}
// 做菜命令
var commands = [];
for(var i = 0; i<foodList.length;i++) {
  var command = null;
  if(i % 2 === 0) {
    command = new MakFoodCommand(cook1, foodList[i])
  } else {
    command = new MakFoodCommand(cook2, foodList[i])
  }
  commands.push(command)
}
commands.forEach(function(cmd){
  console.log(cmd);
  cmd.execute()
})
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容