引见

近来最先给本身每周订个进修使命，进修效果反应为一篇文章的输出，做好进修纪录。
这一周(02.25-03.03)我定的目标是《JavaScript 情势》的第七章进修一遍，进修效果的反应就是本篇文章啦。
由于内容着实太长，我将本文分为两部份：

• 《JavaScript 情势》知识点整顿（上）
• 《JavaScript 情势》知识点整顿（下）

本文内容中重要参考《JavaScript 情势》，个中也有些案例是来自网上材料，有备注出处啦，如形成不轻易，请联络我编削。

过两天我会把这篇文章收录到我整顿的知识库 【Cute-JavaScript】 中，并已同步到 【github】上面。

一、单体情势(Singleton Pattern)

1.观点引见

单体情势(Singleton Pattern)的头脑在于保证一个特定类唯一一个实例，即不论运用这个类建立多少个新对象，都邑取得与第一次建立的对象完整雷同。

它让我们能将代码组织成一个逻辑单位，并可以经由过程单一变量举行接见。

单体情势有以下长处：

• 用来分别定名空间，削减全局变量数目。
• 使代码组织的更一致，进步代码浏览性和保护性。
• 只能被实例化一次。

但在JavaScript中没有类，只需对象。当我们建立一个新对象，它都是个新的单体，由于JavaScript中永久不会有完整相称的对象，除非它们是同一个对象。
因而，我们每次运用对象字面量建立对象的时刻，现实上就是在建立一个单例。

let a1 = { name : 'leo' };
let a2 = { name : 'leo' };
a1 === a2;  // false
a1 == a2;   // false

这里须要注重，单体情势有个前提，是该对象能被实例化，比方下面如许就不是单体情势，由于它不能被实例化：

let a1 = {
    b1: 1, b2: 2,
    m1: function(){
        return this.b1;
    },
    m2: function(){
        return this.b2;
    }
}
new a1();  // Uncaught TypeError: a1 is not a constructor

下面展现一个单体情势的基础组织：

let Singleton = function (name){
    this.name = name;
    this.obj = null;
}
Singleton.prototype.getName = function(){
    return this.name;
}
function getObj(name){
    return this.obj || (this.obj = new Singleton(name));
}
let g1 = getObj('leo');
let g2 = getObj('pingan');
g1 === g2;    // true
g1 == g2;     // true
g1.getName(); // 'leo'
g2.getName(); // 'leo'

从这里可以看出，单体情势只能实例化一次，背面再挪用的话，都是运用第一次实例化的效果。

2.运用场景

单例情势只允许实例化一次，能进步对象接见速率而且勤俭内存，一般被用于下面场景：

• 须要频仍建立再烧毁的对象，或频仍运用的对象：如：弹窗，文件；
• 经常使用的东西类对象；
• 经常使用的资本斲丧大的对象；

3.完成弹框案例

这里我们要用单体情势，建立一个弹框，也许须要完成：元素值建立一次，运用的时刻直接挪用。
因而我们这么做：

let create = (() => {
    let div;
    return () => {
        if(!div){
            div = document.createElement('div');
            div.innderHTML = '我是leo建立的弹框';
            div.style.display = 'none';
            div.setAttribute("id", "leo");
            document.body.appendChild(div);
        }
        return div;
    }
})();
// 触发事宜
document.getElementById('otherBtn').onclick = () => {
    let first = create();
    first.style.display = 'block';
}

4.运用new操纵符

由于JavaScript中没有类，但JavaScript有new语法来用组织函数建立对象，并可以运用这类要领完成单体情势。
当运用同一个组织函数以new操纵符建立多个对象，取得的是指向完整雷同的对象的新指针。

一般我们运用new操纵符建立单体情势的三种挑选，让组织函数总返回最初的对象：

• 运用全局对象来存储该实例（不引荐，轻易全局污染）。
• 运用静态属性存储该实例，没法保证该静态属性的私有性。

function Leo(name){
    if(typeof Leo.obj === 'object'){
        return Leo.obj;
    }
    this.name = name;
    Leo.obj = this;
    return this;
}
let a1 = new Leo('leo');
let a2 = new Leo('pingan');
a1 === a2 ; // true
a1 ==  a2 ; // true

唯一的瑕玷就是obj属性是公然的，轻易被修正。

• 运用闭包将该实例包裹，保证实例是私有性并不会被外界修正。

我们这经由过程重写上面的要领，到场闭包：

function Leo(name){
    let obj;
    this.name = name;
    obj = this;       // 1.存储第一次建立的对象
    Leo = function(){ // 2.修正本来的组织函数
        return obj;
    }
}
let a1 = new Leo('leo');
let a2 = new Leo('pingan');
a1 === a2 ; // true
a1 ==  a2 ; // true

当我们第一次挪用组织函数，像平常一样返回this，而背面再挪用的话，都将重写组织函数，并接见私有变量obj并返回。

二、工场情势(Factory Pattern)

1.观点引见

工场情势的目标在于建立对象，完成以下目标：

• 可反复实行，来建立相似对象；
• 当编译时位置详细范例（类）时，为挪用者供应一种建立对象的接口；

经由过程工场要领（或类）建立的对象，都继承父对象，下面一个简朴工场要领明白：

function Person(name, age, sex){
    let p = {}; // 或 let p = new Object(); 建立一个初始对象
    p.name = name;
    p.age = age;
    p.sex = sex;
    p.ask = function(){
        return 'my name is' + this.name;
    }
    return p;
}
let leo = new Person('leo', 18, 'boy');
let pingan = new Person('pingan', 18, 'boy');
console.log(leo.name, leo.age, leo.sex);          // 'leo', 18, 'boy'
console.log(pingan.name, pingan.age, pingan.sex); // 'pingan', 18, 'boy'

经由过程挪用Person组织函数，我们可以像工场那样，生产出无数个包含三个属性和一个要领的对象。
可以看出，工场情势可以处置惩罚建立多个相似对象的题目。

2.优瑕玷

2.1长处

• 一个挪用者想建立一个对象，只需晓得其称号就可以够了。
• 扩大性高，假如想增添一个产物，只需扩大一个工场类就可以够。
• 屏障产物的详细完成，挪用者只体贴产物的接口。

2.2瑕玷

每次增添一个产物时，都须要增添一个详细类和对象完成工场，使得体系中类的个数成倍增添，在肯定程度上增添了体系的庞杂度，同时也增添了体系详细类的依靠。这并不是什么功德。

3.完成庞杂工场情势

在庞杂工场情势中，我们将其成员对象的实列化推晚到子类中，子类可以重写父类接口要领以便建立的时刻指定本身的对象范例。
父类相似一个大众函数，只处置惩罚建立过程当中的题目，而且这些处置惩罚将被子类继承，然后在子类完成特地功用。

比方这里我们须要完成这么一个实例：

• 须要一个大众父函数CarMaker；
• 父函数CarMaker有个factor静态要领，用于建立car对象；
• 定义三个静态属性，值为三个函数，用于继承父函数CarMaker；

然后我们愿望这么运用这个函数：

let c1 = CarMaker.factory('Car1');
let c2 = CarMaker.factory('Car2');
let c3 = CarMaker.factory('Car3');
c1.drirve();  // '我的编号是6'
c2.drirve();  // '我的编号是3'
c3.drirve();  // '我的编号是12'

可以看出，挪用时吸收以字符串情势指定范例，并返回要求范例的对象，而且如许运用是不须要用new操纵符。

下面看代码完成：

// 建立父组织函数
function CarMaker(){};
CarMaker.prototype.drive = function(){
    return `我的编号是${this.id}`;
}
// 增加静态工场要领
CarMaker.factory = function (type){
    let types = type, newcar;
    // 若组织函数不存在 则发作毛病
    if(typeof CarMaker[types] !== 'function'){
        throw{ name: 'Error', message: `${types}不存在`};
    }
    // 若组织函数存在，则让原型继承父类，但仅继承一次
    if(CarMaker[types].prototype.drive !== 'function'){
        CarMaker[types].prototype = new CarMaker();
    }
    // 建立新实例，并返回
    newcar = new CarMaker[types]();
    return newcar;
}
// 挪用
CarMaker.c1 = function(){
    this.id = 6;
}
CarMaker.c2 = function(){
    this.id = 3;
}
CarMaker.c3 = function(){
    this.id = 12;
}

定义完成后，我们再实行前面的代码：

let c1 = CarMaker.factory('Car1');
let c2 = CarMaker.factory('Car2');
let c3 = CarMaker.factory('Car3');
c1.drirve();  // '我的编号是6'
c2.drirve();  // '我的编号是3'
c3.drirve();  // '我的编号是12'

就可以一般打印效果了。

完成该工场情势并不难题，重如果要找到可以穿件所需范例对象的组织函数。
这里运用简朴的映照来建立该对象的组织函数。

4.内置对象工场

内置的对象工场，就像全局的Object()组织函数，也是工场情势的行动，依据输入范例建立差别对象。
如传入一个原始数字，返回一个Number()组织函数建立一个对象，传入一个字符串或布尔值也建立。
关于传入任何其他值，包含无输入的值，都邑建立一个通例的对象。

不管是不是运用new操纵符，都可以挪用Object()，我们这么测试：

let a = new Object(), b = new Object(1),
    c = Object('1'),  d = Object(true);

a.constructor === Object;  // true 
b.constructor === Number;  // true 
c.constructor === String;  // true 
d.constructor === Boolean; // true 

事实上，Object()用处不大，这里列出来是由于它是我们比较罕见的工场情势。

三、迭代器情势(Iterator Pattern)

1.观点引见

迭代器情势(Iterator Pattern)是供应一种要领，递次接见一个聚合对象中每一个元素，而且不暴露该对象内部。

这类情势属于行动型情势，有以下几个特征：

• 接见一个聚合对象的内容，而无需暴露它的内部示意。
• 供应一致接口来遍历差别组织的数据鸠合。
• 遍历的同事变动迭代器地点的鸠合组织可能会致使题目。

在迭代器情势中，一般包含有一个包含某种数据鸠合的对象，须要供应一种简朴的要领来接见每一个元素。
这里对象须要供应一个next()要领，每次挪用都必须返回下一个一连的元素。

这里假定建立一个对象leo，我们经由过程挪用它的next()要领接见下一个一连的元素：

let obj;
while(obj = leo.next()){
    // do something
    console.log(obj);
}

别的迭代器情势中，聚合对象还会供应一个越发渐变的hasNext()要领，来搜检是不是已抵达数据末端，我们这么修正前面的代码：

while(leo.hasNext()){
    // do something
    console.log(obj);
}

2.优瑕玷和运用场景

2.1长处

• 它简化了聚合类，并支撑以差别的体式格局遍历一个聚合对象。
• 在同一个聚合上可以有多个遍历。
• 在迭代器情势中，增添新的聚合类和迭代器类都很轻易，不必修正原有代码。

2.2瑕玷

由于迭代器情势将存储数据和遍历数据的职责星散，增添新的聚合类须要对应增添新的迭代器类，类的个数成对增添，这在肯定程度上增添了体系的庞杂性。

2.3运用场景

• 接见一个聚合对象的内容而不必暴露它的内部示意。
• 须要为聚合对象供应多种遍历体式格局。
• 为遍历差别的聚合组织供应一个一致的接口。

3.简朴案例

依据上面的引见，我们这里完成一个简朴案例，将设我们数据只是一般数组，然后每次检索，返回的是距离一个的数组元素（即不是一连返回）：

let leo = (function(){
    let index = 0, data = [1, 2, 3, 4, 5],
        len = data.length;
    return {
        next: function(){
            let obj;
            if(!this.hasNext()){
                return null;
            };
            obj = data[index];
            index = index + 2;
            return obj;
        },
        hasNext: function(){
            return index < len;
        }
    }
})()

然后我们还要给它供应更简朴的接见体式格局和屡次迭代数据的才能，我们须要增加下面两个要领：

• rewind() 重置指针到初始位置；
• current() 返回当前元素，由于当指针步行进时没法运用next()操纵；

代码变成如许：

let leo = (function(){
    //.. 
    return {
         // .. 
         rewind: function(){
             index = 0;
         },
         current: function(){
             return data[index];
         }
    }
})();

如许这个案例就完整了，接下来我们来测试：

// 读取纪录
while(leo.hasNext()){
    console.log(leo.next());
};  // 打印 1 3 5
// 回退
leo.rewind();
// 猎取当前
console.log(leo.current()); // 回到初始位置，打印1

4.运用场景

迭代器情势通经常使用于：关于鸠合内部效果经常变化各别，我们不想暴露其内部组织的话，但又响让客户代码通明底接见个中的元素，这类情况下我们可以运用迭代器情势。

简朴明白：遍历一个聚合对象。

• jQuery运用例子：

jQuery中的$.each()要领，可以让我们传入一个要领，完成对一切项的迭代操纵：

$.each([1,2,3,4,5],function(index, value){
    console.log(`${index}: ${value}`)
})

• 运用迭代器情势完成each()要领

let myEach = function(arr, callback){
    for(var i = 0; i< arr.length; i++){
        callback(i, arr[i]);
    }
}

4.小结

迭代器情势是一种相对简朴的情势，如今绝大多数言语都内置了迭代器。而且迭代器情势也是异常经常使用，有时刻不经意就是用了。

四、装潢者情势(Decorator Pattern)

1.观点引见

装潢者情势（Decorator Pattern）：在不转变原类和继承情况下，动态增加功用到对象中，经由过程包装一个对象完成一个新的具有原对象雷同接口的新对象。

装潢者情势有以下特征：

1. 增加功用时不转变原对象组织。
2. 装潢对象和原对象供应的接口雷同，轻易根据源对象的接口来运用装潢对象。
3. 装潢对象中包含原对象的援用。即装潢对象是真正的原对象包装后的对象。

现实上，装潢着情势的一个比较轻易的特征在于其预期行动的可定制和可设置特征。从只需基础功用的一般对象最先，不停加强对象的一些功用，并根据递次举行装潢。

2.优瑕玷和运用场景

2.1长处

• 装潢类和被装潢类可以自力生长，不会互相耦合，装潢情势是继承的一个替换情势，装潢情势可以动态扩大一个完成类的功用。

2.2瑕玷

• 多层装潢比较庞杂。

2.3运用场景

• 扩大一个类的功用。
• 动态增添功用，动态打消。

3.基础案例

我们这里完成一个基础对象sale，可以经由过程sale对象猎取差别项目标价钱，并经由过程挪用sale.getPrice()要领返回对应价钱。而且在差别情况下，用分外的功用来装潢它，会取得差别情况下的价钱。

3.1建立对象

这里我们假定客户须要付出国度税和省级税。根据装潢者情势，我们就须要运用国度税和省级税两个装潢者来装潢这个sale对象，然后在对运用价钱格式化功用的装潢者装潢。现实看起来是如许：

let sale = new Sale(100);
sale = sale.decorate('country');
sale = sale.decorate('privince');
sale = sale.decorate('money');
sale.getPrice();

运用装潢者情势后，每一个装潢都异常天真，重要依据其装潢者递次，因而假如客户不须要上缴国度税，代码就可以够这么完成：

let sale = new Sale(100);
sale = sale.decorate('privince');
sale = sale.decorate('money');
sale.getPrice();

3.2完成对象

接下来我们须要斟酌的是怎样完成Sale对象了。

完成装潢者情势的个中一个要领是使得每一个装潢者成为一个对象，而且该对象包含了应当被重载的要领。每一个装潢者现实上继承了如今已被前一个装潢者举行装潢后的对象，每一个装潢要领在uber（继承的对象）上挪用一样的要领并猎取值，另外还继承实行一些操纵。

uber关键字相似Java的
super，它可以让某个要领挪用父类的要领，
uber属性指向父类原型。

即：当我们挪用sale.getPrice()要领时，会挪用money装潢者的要领，然后每一个装潢要领都邑先挪用父对象的要领，因而一向往上挪用，直到最先的Sale组织函数完成的未被装潢的getPrice()要领。明白如下图：

我们这里可以先完成组织函数Sale()和原型要领getPrice()：

function Sale (price){
    this.price = price || 100;
}
Sale.prototype.getPrice = function (){
    return this.price;
}

而且装潢者对象都将以组织函数的属性来完成：

Sale.decorators = {};

接下来完成country这个装潢者并完成它的getPrice()，改要领起首从父对象的要领猎取值再做修正：

Sale.decorators.country = {
    getPrice: function(){
        let price = this.uber.getPrice(); // 猎取父对象的值
        price += price * 5 / 100;
        return price;
    }
}

根据雷同要领，完成其他装潢者：

Sale.decorators.privince = {
    getPrice: function(){
        let price = this.uber.getPrice();
        price += price * 7 / 100;
        return price;
    }
}
Sale.decorators.money = {
    getPrice: function(){
        return "￥" + this.uber.getPrice().toFixed(2);
    }
}

末了我们还须要完成前面的decorate()要领，它将我们一切装潢者拼接一同，而且做了下面的事变：
建立了个新对象newobj，继承如今我们所具有的对象(Sale)，不管是原始对象照样末了装潢后的对象，这里就是对象this，并设置newobj的uber属性，便于子对象接见父对象，然后将一切装潢者的分外属性复制到newobj中，返回newobj，即成为更新的sale对象：

Sale.prototype.decorate = function(decorator){
    let F = function(){}, newobj,
        overrides = this.constructor.decorators[decorator];
    F.prototype = this;
    newobj = new F();
    newobj.user = F.prototype;
    for(let k in overrides){
        if(overrides.hasOwnProperty(k)){
            newobj[k] = overrides[k];
        }
    }
    return newobj;
}

4.革新基础案例

这里我们运用列表完成雷同功用，这个要领应用JavaScript言语的动态性子，而且不须要运用继承，也不须要让每一个装潢要领挪用链中前面的要领，可以简朴的将前面要领的效果作为参数通报给下一个要领。

如许完成也有个优点，支撑反装潢或打消装潢，我们照样完成以下功用：

let sale = new Sale(100);
sale = sale.decorate('country');
sale = sale.decorate('privince');
sale = sale.decorate('money');
sale.getPrice();

如今的Sale()组织函数中多了个装潢者列表的属性：

function Sale(price){
    this.price = (price > 0) || 100;
    this.decorators_list = [];
}

然后照样须要完成Sale.decorators，这里的getPrice()将变得更简朴，也没有去挪用父对象的getPrice()，而是将效果作为参数通报：

Sale.decorators = {};
Sale.decorators.country = {
    getPrice: function(price){
        return price + price * 5 / 100;
    }
}
Sale.decorators.privince = {
    getPrice: function(price){
        return price + price * 7 / 100;
    }
}
Sale.decorators.money = {
    getPrice: function(price){
        return "￥" + this.uber.getPrice().toFixed(2);
    }
}

而这时刻父对象的decorate()和getPrice()变得庞杂，decorate()用于追加装潢者列表，getPrice()须要完成包含遍历当前增加的装潢者一级挪用每一个装潢者的getPrice()要领、通报夙昔一个要领取得的效果：

Sale.prototype.decorate = function(decorators){
    this.decorators_list.push(decorators);
}

Sale.propotype.getPrice = function(){
    let price = this.price, name;
    for(let i = 0 ;i< this.decorators_list.length; i++){
        name = this.decorators_list[i];
        price = Sale.decorators[name].getPrice(price);
    }
    return price;
}

5.对照两个要领

很显然，第二种列表完成要领会更简朴，不必设想继承，而且装潢要领也简朴。
案例中getPrice()是唯一可以装潢的要领，假如想完成更多可以被装潢的要领，我们可以抽一个要领，来将每一个分外的装潢要领反复遍历装潢者列表中的这块代码，经由过程它来吸收要领并使其成为“可装潢”的要领。如许完成，sale的decorators_list属性会成为一个对象，且该对象每一个属性都是以装潢者对象数组中的要领和值定名。

五、战略情势(Strategy Pattern)

1.观点引见

战略情势(Strategy Pattern)：封装一系列算法，支撑我们在运转时，运用雷同接口，挑选差别算法。它的目标是为了将算法的运用与算法的完成星散开来。

战略情势一般会有两部份构成，一部份是战略类，它担任完成通用的算法，另一部份是环境类，它用户吸收客户端要求并托付给战略类。

2.优瑕玷

2.1长处

• 有效地防止多重前提挑选语句；
• 支撑开闭准绳，将算法自力封装，使得越发便于切换、明白和扩大；
• 越发便于代码复用；

2.2瑕玷

• 战略类会增加；
• 一切战略类都须要对外暴露；

3.基础案例

我们可以很简朴的将战略和算法直接做映照：

let add = {
    "add3" : (num) => num + 3,
    "add5" : (num) => num + 5,
    "add10": (num) => num + 10,
}
let demo = (type, num) => add[type](num);
console.log(demo('add3', 10));  // 13
console.log(demo('add10', 12)); // 22

然后我们再把每一个战略的算法抽出来：

let fun3  = (num) => num + 3;
let fun5  = (num) => num + 5;
let fun10 = (num) => num + 10;
let add = {
    "add3" : (num) => fun3(num),
    "add5" : (num) => fun5(num),
    "add10": (num) => fun10(num),
}
let demo = (type, num) => add[type](num);
console.log(demo('add3', 10));  // 13
console.log(demo('add10', 12)); // 22

4.表单考证案例

我们须要运用战略情势，完成一个处置惩罚表单考证的要领，不管表单的详细范例是什么都邑挪用考证要领。我们须要让考证器能挑选最好的战略来处置惩罚使命，并将详细的考证数据托付给恰当算法。

我们假定须要考证下面的表单数据的有效性：

let data = {
    name    : 'pingan',
    age     : 'unknown',
    nickname: 'leo',
}

这里须要先设置考证器，对表单数据中差别的数据运用差别的算法：

validator.config = {
    name    : 'isNonEmpty',
    age     : 'isNumber',
    nickname: 'isAlphaNum',
}

而且我们须要将考证的毛病信息打印到控制台：

validator.validate(data);
if(validator.hasErrors()){
    console.log(validator.msg.join('\n'));
}

接下来我们才要完成validator中详细的考证算法，他们都有一个雷同接口validator.types，供应validate()要领和instructions协助信息：

// 非空值搜检
validator.types.isNonEmpty = {
    validate: function(value){
        return value !== '';
    }
    instructions: '该值不能为空'
}

// 数值范例搜检
validator.types.isNumber = {
    validate: function(value){
        return !isNaN(value);
    }
    instructions: '该值只能是数字'
}

// 搜检是不是只包含数字和字母
validator.types.isAlphaNum = {
    validate: function(value){
        return !/[^a-z0-9]/i.test(value);
    }
    instructions: '该值只能包含数字和字母，且不包含特别字符'
}

末了就是要完成最中心的validator对象：

let validator = {
    types: {}, // 一切可用的搜检
    msg:[],    // 当前考证的毛病信息
    config:{}, // 考证设置
    validate: function(data){ // 接口要领
        let type, checker, result;
        this.msg = []; // 清空毛病信息
        for(let k in data){
            if(data.hasOwnProperty(k)){
                type = this.config[k];
                checker = this.types[type];
                if(!type) continue;  // 不存在范例 则 不须要考证
                if(!checker){
                    throw {
                        name: '考证失利',
                        msg: `不能考证范例：${type}`
                    }
                }
                result = checker.validate(data[k]);
                if(!result){
                    this.msg.push(`无效的值：${k}，${checker.instructions}`);
                }
            }
        }
        return this.hasErrors();
    }
    hasErrors: function(){
        return this.msg.length != 0;
    }
}

总结这个案例，我们可以看出validator对象是通用的，须要加强validator对象的要领只需增加更多的范例搜检，后续针对每一个新的用例，只需设置考证器和运转validator()要领就可以够。

5.小结

一样平常开辟的时刻，照样须要依据现实情况来挑选设想情势，而不能为了设想情势而去设想情势。经由过程上面的进修，我们运用战略情势来防止多重前提推断，而且经由过程开闭准绳来封装要领。我们应当多在开辟中，逐步积聚本身的开辟东西库，便于今后运用。

参考材料

1. 《JavaScript Patterns》