关于设计模式:前端比较实用的设计模式总结

设计模式不分前端与后端，它是一种编程思维，无论在任何语言、任何环境中运行的程序，他们都会有一些雷同的设计思路。而咱们通过理解这些思维，能力进步本人的编程能力，写代码才会变成享受的事件。咱们不仅仅只是在实现工作，更是在发明一件作品，一件属于你本人的而且令人赏心悦目的艺术品。– 我本人的了解

做什么事都须要遵循一些准则，设计模式也不例外。咱们在设计一些设计模式时，个别遵循如下七项根本准则。

繁多职责准则 (Single Responsibility Principle)
凋谢 - 敞开准则 (Open-Closed Principle)
里氏替换准则 (Liskov Substitution Principle)
依赖倒转准则 (Dependence Inversion Principle)
接口隔离准则 (Interface Segregation Principle)
起码晓得准则（The Least Knowledge Principle）
组合 / 聚合复用准则 (Composite/Aggregate Reuse Principle)

这些准则里，我认为比拟实用而且很重要的是： 繁多职责准则、凋谢 - 敞开准则、起码晓得准则 。因为有这些根本的准则作为公约，咱们的我的项目将会倒退的很衰弱，扩展性很强，具体解释一下这三个准则，其余准则有趣味能够本人搜寻一下，比拟好找。

Single Responsibility Principle

一个对象或办法只做一件事件。
如果一个办法承当了过多的职责，那么在需要的变迁过程中，须要改写这个办法的可能性就越大。
应该把对象或办法划分成较小的粒度，进步代码可读性，进步零碎可维护性。

Open for extension, close for modification

对扩大凋谢：有新的需要或变动时，能够对现有代码进行扩大，以适应新的状况。
对批改关闭：一旦设计实现，模块的源代码不能被进犯，任何人不容许批改已有源代码。
凋谢关闭的核心思想就是对形象编程，而不对具体编程，因为形象绝对稳固。
让类依赖于固定的形象，所以对批改就是关闭的；
而通过面向对象的继承和多态机制，能够实现对形象体的继承，通过覆写其办法来扭转固有行为，实现新的扩大办法，所以对于扩大就是凋谢的。

The Least Knowledge Principle

或者称迪米特法令（Law of Demeter），它形容了一种放弃代码松耦合的策略，每个单元对其余单元只领有无限的常识，只理解与以后单元紧密联系的单元；
古代面向对象程序设计语言通常应用 “.” 作为拜访标识，LoD 能够被简化为 “ 仅应用一个点（use only one dot）”。
也就是说，代码 a.b.Method() 违反了 LoD，而 a.Method() 则合乎 LoD。打个比方，人能够命令一条狗行走，然而不应该间接指挥狗的腿行走，应该由狗去指挥它的腿行走。

在 JS 设计模式中，最外围的思维：封装变动。
将变与不变拆散，确保变动的局部灵便、不变的局部稳固。

Constructor Pattern 特点：

结构器是一个当新建对象的内存被调配后，用来初始化该对象的一个非凡函数，在 JavaScript 中简直所有的货色都是对象。
同时结构器能够应用的参数，以在第一次创建对象时，设置成员属性的办法的值。
对象定义：状态、属性、行为

示例代码：

function GirlFriend(name, age, cup, height) {
    this.name = name;
    this.age = age;
    this.cup = cup;
    this.height = height;
}

GirlFriend.prototype.myIndentity = function () {console.log(` 我是被发明进去的女朋友，我叫 ${this.name}`);
};

const aGirl = new GirlFriend('小 A 女朋友', 28, '36F', 'LOL');
const bGirl = new GirlFriend('小 B 女朋友', 19, '36C', 'DOTA');

Module Pattern 特点：

模块模式是前端最罕用的模式，特地适宜保护一段独立的代码片段。
模块模式简直是所有 JS 风行的插件、框架的根底，比方 jQuery、Backbone、Ember 等。
能够创立公有（private）、私有（public）属性。
模块模式要利用 IIFE（立刻调用函数表达式）和闭包来造成公有作用域。

示例代码：

const Exposer = (function () {
    let privateVariable = 10;

    const privateMethod = function () {console.log('Inside a private method!');
        privateVariable++;
    }

    return {first: function () {console.log('This is a method I want to expose!');
        },
        second: function () {privateMethod();
        }
    };
})();

Exposer.first();        // Output: This is a method I want to expose!
Exposer.second();       // Output: Inside a private method!
Exposer.privateMethod;  // undefined

Singleton Pattern 特点：

单例模式限度实例的数量必须是一个，这个惟一的实例被称作单例（singleton）。
单例模式适宜利用在一个宽泛的零碎范畴内、在一个集中的中央来解决某些逻辑。
缩小了全局变量的应用，从而革除了命名空间净化和命名抵触的危险。
例子：数据库连接池，连接池须要治理很多连贯的生命周期，以便在未来须要对数据库发出请求时能够重用连贯。

示例代码：

const Singleton = (function () {
    let instance; // 实例

    function init() {
        return {
            publicProperty: 'I am a property',
            publicMethod: function () {console.log('I am a mehtod');
            },
        };
    }

    return {getInstance: function () {if (!instance) {instance = init();
            }
            return instance;
        }
    };
})();

// 获取实例
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();

Adapter Pattern 特点：

适配器模式能够将一个接口转换到另一种齐全不同的接口，它容许接口不同的组件在一起工作。
例子：新研发出的组件和以往接口齐全不同，能够通过适配器模式来兼容已有的老代码。

示例代码：

// 包裹计价 - 老服务
function Shipping() {this.request = function (zipStart, zipEnd, weight) {
        // ...
        return "$49.75";
    }
}

// 包裹计价 - 新服务（带权限验证且逻辑解耦）function AdvancedShipping() {this.login = function (credentials) {/* ... */};
    this.setStart = function (start) {/* ... */};
    this.setDestination = function (destination) {/* ... */};
    this.calculate = function (weight) {return "$39.50";};
}

// 适配器
function ShippingAdapter(credentials) {
    // 创立新服务
    const shipping = new AdvancedShipping();
    // 验证登录权限
    shipping.login(credentials);

    return {
        // 放弃老服务接口，内容逻辑适配到新服务
        request: function (zipStart, zipEnd, weight) {shipping.setStart(zipStart);
            shipping.setDestination(zipEnd);
            return shipping.calculate(weight);
        }
    };
}
// 调用老服务
const shipping = new Shipping();
const cost = shipping.request("78701", "10010", "2 lbs");
// 调用新服务代码
const credentials = {token: "30a8-6ee1"};
const adapter = new ShippingAdapter(credentials);
const cost = adapter.request("78701", "10010", "2 lbs");

Simple Factory Pattern 定义：

工厂模式，顾名思义，就是为了发明对象。
工厂模式相似于事实的工厂生产线，能够生产出大量相似的商品。
工厂模式的长处在于：能解决多个类似的问题，缩小大量冗余代码。

示例代码：

const FactoryGirlFriend = function () {function GirlFriend(name, age, cup, height, nationality) {
        this.name = name;
        this.age = age;
        this.cup = cup;
        this.height = height;
        this.nationality = nationality
    }
    this.create = function (category) {switch (category) {
            case '御姐型':
                return new GirlFriend('小 A 女朋友', 28, '36F', 170, '中国')
                break;
            case '萝莉型':
                return new GirlFriend('小 B 女朋友', 19, '36C', 160, '日本')
                break;
            default:
                throw new Error('参数谬误')
        }
    };
}

const aGirl = FactoryGirlFriend.create('御姐型');
const bGirl = FactoryGirlFriend.create('萝莉型');

Strategy Pattern 特点：

策略模式定义一系列的算法，把它们一个个封装起来，并且使它们能够互相替换。
策略模式能够无效防止很多 if 条件语句。
策略模式合乎凋谢 - 关闭准则，使代码更容易了解和扩大。
策略模式中的代码能够复用。

示例代码：

const express = {'顺丰': function (package) {
        // 门路计算...
        return "￥45.95";
    },
    '京东': function (package) {
        // 门路计算...
        return "￥39.40";
    },
    '韵达': function (package) {
        // 门路计算...
        return "￥24.45";
    }
};
const calculateExpense = function (type, package) {return express[type] ? express[type](package) : 0;
};
calculateExpense('京东', 1); // ￥39.40
calculateExpense('韵达', 1); // ￥24.45

Observer Pattern 特点：

观察者模式蕴含察看指标和观察者两类对象，
一个指标能够有任意数目的与之相依赖的观察者，
一旦察看指标的状态产生扭转，所有的观察者都将失去告诉。

示例代码：

// 定义一个主体对象
class Subject {constructor() {this.observers = []; // 观察者
    }
    add(observer) { // 增加
        this.observers.push(observer)
    }
    remove(observer) { // 移除
        this.observers = this.observers.filter(item => item !== observer);
    }
    notify() { // 告诉
        this.observers.forEach(item => {item.update();
        })
    }
}
// 定义察看着对象
class Observer {constructor(name) {this.name = name;}
    update() {console.log(`my name is:${this.name}`);
    }
}

// 调用
const observer1 = new Observer('observer1');
const observer2 = new Observer('observer2');

const subject = new Subject();
subject.add(observer1);
subject.add(observer2);
subject.notify();

Publish-subscribe Pattern 特点：

公布 + 订阅 = 观察者模式？
在观察者模式中，观察者是晓得 Subject 的，Subject 始终放弃对观察者进行记录。然而，在公布订阅模式中，发布者和订阅者不晓得对方的存在，它们只有通过音讯代理进行通信。
在公布订阅模式中，组件是涣散耦合的，正好和观察者模式相同。

示例代码：

const publisher = {topics: [], // 可订阅的主题
    subscribe(key, fn) { // 订阅
        if (!this.topics[key]) {this.topics[key] = [];}
        this.topics[key].push(fn);
    },
    unSubscribe(key, fn) { // 删除
        let fns = this.topics[key];
        for (let i = 0; i < fns.length; ++i) {if (fns[i] === fn) {fns.splice(i, 1);
            }
        }
    },
    publish(...args) { // 公布
        let key = args.shift();
        let fns = this.topics[key];
        if (!fns || fns.length <= 0) return;
        for (let i = 0, len = fns.length; i < len; i++) {fns[i].apply(this, args);
        }
    }
}

// 调用
publisher.subscribe('name', (name) => {console.log(`your name is ${name}`);
})
publisher.subscribe('gender', (gender) => {console.log(`your gender is ${gender}`);
})
publisher.publish('name', '奥特曼');  // your name is 奥特曼
publisher.publish('gender', '男');  // your gender is 男

示例代码：公布 - 订阅模式在 vue 中的作用

// 遍历传入实例的 data 对象的属性，将其设置为 Vue 对象的拜访器属性
function observe(obj, vm) {Object.keys(obj).forEach(function (key) {defineReactive(vm, key, obj[key]);
    });
}
// 设置为拜访器属性，并在其 getter 和 setter 函数中，应用订阅公布模式。相互监听。function defineReactive(obj, key, val) {
    // 这里用到了观察者模式, 它定义了一种一对多的关系，让多个观察者监听一个主题对象，// 这个主题对象的状态产生扭转时会告诉所有观察者对象，观察者对象就能够更新本人的状态。// 实例化一个主题对象，对象中有空的观察者列表
    let dep = new Dep();
    // 将 data 的每一个属性都设置为 Vue 对象的拜访器属性，属性名和 data 中雷同
    // 所以每次批改 Vue.data 的时候，都会调用下边的 get 和 set 办法。而后会监听 v -model 的 input 事件，// 当扭转了 input 的值，就相应的扭转 Vue.data 的数据，而后触发这里的 set 办法
    Object.defineProperty(obj, key, {get: function () {
            // Dep.target 指针指向 watcher，减少订阅者 watcher 到主体对象 Dep
            if (Dep.target) {dep.addSub(Dep.target);
            }
            return val;
        },
        set: function (newVal) {if (newVal === val) {return}
            val = newVal;
            // console.log(val);
            // 给订阅者列表中的 watchers 发出通知
            dep.notify();}
    });
}

// 主题对象 Dep 构造函数
function Dep() {this.subs = [];
}
// Dep 有两个办法，减少订阅者  和  公布音讯
Dep.prototype = {addSub: function (sub) {this.subs.push(sub);
    },
    notify: function () {this.subs.forEach(function (sub) {sub.update();
        });
    }
}

Proxy Pattern 特点：

为其余对象提供一种代理以管制对这个对象的拜访，客户端甚至感知不到代理层的存在。
代理对象能够代替本体对象被实例化，此时本体对象未真正实例化，等到适合机会再实例化。
代理模式能够提早创立开销很大的本体对象，他会把本体的实例化推延到有办法被调用时。

示例代码：图片加载

// 一般模式
const myImage = (function () {const imgNode = document.createElement('img');

    return {setSrc: function (src, id) {
            imgNode.src = src;
            document.getElementById(id).appendChild(imgNode);
        }
    }
})();

// 一般模式加载图片
myImage.setSrc('https://tengmed.com/a.png', "avatar");

// 代理模式
const ProxyImage = (function () {const img = new Image();
    img.onload = function () {myImage.setSrc(this.src, this.id);
    };
    return {setSrc: function (src, id) {myImage.setSrc('http://loading.gif', id); // 增加默认 loading 图片
            img.src = src;
            img.id = id;
        }
    }
})();

// 代理模式加载图片
ProxyImage.setSrc('https://tengmed.com/a.png', "avatar");

示例代码：缓存代理

let mult = function () {
    let a = 1;
    for (let i = 0, ilen = arguments.length; i < ilen; i += 1) {a = a * arguments[i];
    }
    return a;
};
// 计算加法
let plus = function () {
    let a = 0;
    for (let i = 0, ilen = arguments.length; i < ilen; i += 1) {a += arguments[i];
    }
    return a;
}
// 代理函数
let proxyFunc = function (fn) {let cache = {};  // 缓存对象
    return function () {let args = Array.prototype.join.call(arguments, ',');
        if (args in cache) {return cache[args];   // 应用缓存代理
        }
        return cache[args] = fn.apply(this, arguments);
    }
};
let proxyMult = proxyFunc(mult);
console.log(proxyMult(1, 2, 3, 4)); // 24
console.log(proxyMult(1, 2, 3, 4)); // 缓存取 24

let proxyPlus = proxyFunc(plus);
console.log(proxyPlus(1, 2, 3, 4));  // 10
console.log(proxyPlus(1, 2, 3, 4));  // 缓存取 10

关于设计模式:前端比较实用的设计模式总结

设计准则

繁多职责准则

凋谢 - 敞开准则

起码晓得准则

设计模式

结构器模式

模块模式

单例模式

适配器模式

工厂模式

策略模式

观察者模式

公布 - 订阅模式

代理模式

Just My Socks（注册教程内含优惠码）

关于设计模式:前端比较实用的设计模式总结

设计准则

繁多职责准则

凋谢 - 敞开准则

起码晓得准则

设计模式

结构器模式

模块模式

单例模式

适配器模式

工厂模式

策略模式

观察者模式

公布 - 订阅模式

代理模式

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）