Javascript設計模式

設計原則(SOLID)

單一職責模式

李式替換原則

開放封閉原則

接口隔離原則

依賴倒置原則

設計模式

工廠模式

• 將new操作單獨封裝
• 遇到new時，就要考慮是否該使用工廠模式了

示例

你去購買漢堡，直接點餐、取餐，不會自己親手做
商店要“封裝”做漢堡的工作，做好直接給買者

UML類圖：

代碼示例：

class Product {
    constructor(name) {
        this.name = name;
    }
    init() {
        console.log('init')
    }
    fn1() {
        console.log('fn1')
    }
    fn2() {
        console.log('fn2')
    }
}

class Creator {
    create(name) {
        return new Product(name)
    }
}

let create = new Creator();
let p = create.create('p')
p.init()
p.fn1()
p.fn2()

應用場景

1、jQuery:

$('div')和new $('div')有何區別？

• 第一：書寫麻煩，jQuery的鏈式操作將成爲噩夢
• 第二：一旦jQuery名字變化，將是災難性的

//仿jQuery代碼
class jQuery {
    constructor(selector) {
        let slice = Array.prototype.slice;
        let dom = slice.call(document.querySelectorAll(selector))
        let len = dom ? dom.length : 0
        for (let i = 0; i < len; i++) {
            this[i] = dom[i]
        }
        this.length = len
        this.selector = selector || ''
    }
    append() {
        console.log('append');
    }
    addClass() {
        console.log('addClass')
    }

}

window.$ = function(selector) {
    return new jQuery(selector);
}

var $p = $('p')
console.log($p)
console.log($p.addClass)

2、React.crateElement:

var profile = <div>
    <img src="avater.png" className="profile"/>
    <h3>{[user.firstName,user.lastName].join('')}</h3>
    </div>;

編譯完之後：

var profile = React.createElement("div",null,
    React.createElement("img",{src:"avater.png",className:"profile"}),
    React.createElement("h3",null,[user.firstName,user.lastName].join(" "))
);

//源碼實現
class vnode(tag, attrs, children) {
    //...省略內部代碼...
}

React.createElement = function(tag,attrs,children){
    return new vnode(tag,attrs,children)
}

3、Vue的異步組件:

Vue.component('async-example', funciton(resolve, reject) {
    setTimeout(function() => {
        resolve({
            template: '<div>I am async!</div>'
        })
    }, 1000);
})

設計原則驗證：

• 構造函數和創建者分離
• 符合開放封閉原則

單例模式

• 系統中被唯一使用
• 一個類中只有一個實例

 

實例：

登錄框、購物車

代碼演示

java版的單例模式演示

public class SingleObject{
     //注意：私有化構造函數，外部不能new，只能內部new！！！！
     private SingleObject(){}
     //唯一被new出來的對象
     private SingleObject getInstance(){
         if(instance == null){
             //只new一次
             instance = new SingleObject();
         }
         return instance;
     }
     //對象方法
     public void login(username,password){
         System.out.println("login...")
     }
 }
 
 
 public class SingletonPatternDemo{
     public static void main(String[] args){
        //不合法的構造函數
        //編譯時報錯：構造函數 SingleObject()是不可見的！！！
        //SingleObject object = new SingleObject();
        //獲取唯一可用的對象
        SingleObject object = SingleObject.getInstance();
     }     
}

Javascript版的單例模式演示

class SingleObject {
    login() {
        console.log('login...')
    }
}

//靜態方法
SingleObject.getInstance = (function() {
    let instance
    return function() {
        if (!instance) {
            instance = new SingleObject();
        }
        return instance;
    }
})()

var login = SingleObject.getInstance().login();

javascript的單例模式缺點：

如果強制new也不會報錯:

var loginnew = new SingleObject();
loginnew.login()

測試：

//注意這裏只能用靜態函數getInstance，不能new SingleObject()!!!
let obj1 = SingleObject.getInstance()
obj1.login()
let obj2 = SingleObject.getInstance()
obj2.login()
console.log(obj1 === obj2); //兩者必須完全相同

適配器模式

裝飾器模式

代理模式

外觀模式

觀察者模式

迭代器模式

狀態模式

未完待續，每日更新