1. 程式人生 > >js設計模式——1.代理模式

js設計模式——1.代理模式

any 區別 pan ash 設計模式 dash ... href ocs

js設計模式——1.代理模式

技術分享圖片

技術分享圖片

技術分享圖片

以下是代碼示例

/*js設計模式——代理模式*/

class ReadImg {
    constructor(fileName) {
        this.fileName = fileName;
        this.loadFromDisk();   // 初始化即從硬盤中加載,模擬
    }
    // display 對外提供一個方法
    display() {
        console.log(‘display...‘ + this.fileName);
    }
    loadFromDisk() {
        console.log(‘loading...‘ + this.fileName);
    }
}

// 生成代理 class ProxyImg { constructor(fileName) { this.realImg = new ReadImg(fileName) } display() { this.realImg.display() } } // test let proxyImg = new ProxyImg(‘1.png‘) proxyImg.display() // 打印結果為 1. loading...1.png 2. display...1.png

  

代理模式使用場景

技術分享圖片

技術分享圖片

技術分享圖片

技術分享圖片

附帶阮大神es6 proxy介紹:http://es6.ruanyifeng.com/#docs/proxy

最後說下模式區別

  技術分享圖片

技術分享圖片

js設計模式——1.代理模式