資訊專欄INFORMATION COLUMN
摘要：面向對象設計里的設計模式之代理模式，相信很多朋友已經很熟悉了。代表當前執(zhí)行方法的實例，即方法調用者。代表具體的方法名稱。現(xiàn)在我們再次調用，傳入構造器返回的代理對象打印輸出，代理邏輯生效了和的一樣優(yōu)雅地實現(xiàn)了代理設計模式。
面向對象設計里的設計模式之Proxy（代理）模式，相信很多朋友已經很熟悉了。比如我之前寫過代理模式在Java中實現(xiàn)的兩篇文章：
Java代理設計模式(Proxy)的四種具體實現(xiàn)：靜態(tài)代理和動態(tài)代理
Java動態(tài)代理之InvocationHandler最簡單的入門教程
其實和Java一樣，JavaScript從語言層面來講，也提供了對代理這個設計模式的原生支持。我們用一個不到100行代碼的例子來看看吧。
下面的代碼創(chuàng)建了一個名叫Jerry的Employee對象，然后用函數(shù)hireEmployee雇用該Employee進行JavaScript開發(fā)：
function Employee(name){
this.name = name;
};
Employee.prototype.work = function(language){
console.log(this.name + " is developing with: " + language);
}
let jerry = new Employee("Jerry");
function hireEmployee(employee, language){
employee.work(language);
}
hireEmployee(jerry, "JavaScript");
打印輸出：
Jerry is developing with: JavaScript
現(xiàn)在Jerry在他的業(yè)余時間里想學習一些其他的編程語言，但是不想影響自己的本職工作。用技術語言來講，就是希望Employee原型方法work執(zhí)行時，打印一行額外的信息，但是不允許修改Employee函數(shù)和Employee.prototype.work本身。這時Proxy這種代理模式就派上用場了。
我們?yōu)閣ork方法創(chuàng)建一個代理邏輯：
var proxyLogic = {
get: function(target, name) {
if( name == "work"){
var oriFun = target[name].bind(target);
return function(language){
oriFun(language);
console.log("and also study other language in spare time");
}
}
}
}
;
重點看第二行的get方法。兩個輸入參數(shù)，target和name。Target代表當前執(zhí)行方法的實例，即方法調用者。Name代表具體的方法名稱。第4行我們把原始方法取出來，存放到變量oriFun里。第五行返回一個新的JavaScript函數(shù)，該函數(shù)體的實現(xiàn)邏輯為首先在第六行調用原始方法，然后在第七行執(zhí)行額外的邏輯。
大家在回憶我之前介紹Java InvocationHandler實現(xiàn)動態(tài)代理的文章：
Java動態(tài)代理之InvocationHandler最簡單的入門教程
是不是思路完全一樣？都是在代理邏輯里調用原始方法，然后再執(zhí)行額外的代碼。
這個proxyLogic生成后，怎么把它同我們原始的需要被代理的代碼關聯(lián)起來呢？
只需要1行代碼：
var jerryProxy = new Proxy(jerry, proxyLogic );
Proxy函數(shù)是JavaScript提供的原生代理構造器，需要兩個輸入參數(shù)：
第一個輸入參數(shù)是我們的Employee實例，即需要被代碼的對象實例，第二個輸入參數(shù)是我們開發(fā)好的代理邏輯。返回的即是裝配好的代理對象，該代理對象的work方法實現(xiàn)在第二個輸入參數(shù)里。
現(xiàn)在我們再次調用hireEmployee，傳入Proxy構造器返回的代理對象：
hireEmployee(jerryProxy, "JavaScript");
打印輸出，代理邏輯生效了：
和Java的Invocation一樣優(yōu)雅地實現(xiàn)了代理設計模式。
使用Proxy代理設計模式的一個實際例子，請參考我的文章：
巧用代理設計模式(Proxy Design Pattern)改善前端圖片加載體驗
要獲取更多Jerry的原創(chuàng)技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98587.html
摘要：為了便于您更清晰的理解的體系架構，在這里我將為您展示年開發(fā)者知識圖譜，它包含了所有開發(fā)過程中的關鍵部分。在數(shù)據展示前端導入導出圖表面板數(shù)據綁定等場景無需大量代碼開發(fā)和測試，可極大節(jié)省企業(yè)研發(fā)成本并降低交付風險。 作為 Vue 的初學者，您或許已經聽過很多關于它的專業(yè)術語了，例如：單頁面應用程序、異步組件、服務器端呈現(xiàn)等，您可能還聽過和Vue經常一起被提到的工具和庫，如Vuex、Webp...
摘要：網上有很多前端的學習路徑文章，大多是知識點羅列為主或是資料的匯總，數(shù)據量讓新人望而卻步。天了解一個前端框架。也可以關注微信公眾號曉舟報告，發(fā)送獲取資料，就能收到下載密碼，網盤地址在最下方，獲取教程和案例的資料。 前言 好的學習方法可以事半功倍，好的學習路徑可以指明前進方向。這篇文章不僅要寫學習路徑，還要寫學習方法，還要發(fā)資料，干貨滿滿，準備接招。 網上有很多前端的學習路徑文章，大多是知...
摘要：用函數(shù)式編程對進行斷舍離當從業(yè)的老司機學會函數(shù)式編程時，他扔掉了的特性，也不用面向對象了，最后發(fā)現(xiàn)了真愛啊作用域和閉包作用域和閉包在里非常重要。旨在幫助非函數(shù)式編程的同學，能快速切入到函數(shù)式編程的理念。 1、用函數(shù)式編程對JavaScript進行斷舍離 當從業(yè)20的JavaScript老司機學會函數(shù)式編程時，他扔掉了90%的特性，也不用面向對象了，最后發(fā)現(xiàn)了真愛啊！！！ https:/...
摘要：用函數(shù)式編程對進行斷舍離當從業(yè)的老司機學會函數(shù)式編程時，他扔掉了的特性，也不用面向對象了，最后發(fā)現(xiàn)了真愛啊作用域和閉包作用域和閉包在里非常重要。旨在幫助非函數(shù)式編程的同學，能快速切入到函數(shù)式編程的理念。 1、用函數(shù)式編程對JavaScript進行斷舍離 當從業(yè)20的JavaScript老司機學會函數(shù)式編程時，他扔掉了90%的特性，也不用面向對象了，最后發(fā)現(xiàn)了真愛啊！！！ https:/...
摘要：用函數(shù)式編程對進行斷舍離當從業(yè)的老司機學會函數(shù)式編程時，他扔掉了的特性，也不用面向對象了，最后發(fā)現(xiàn)了真愛啊作用域和閉包作用域和閉包在里非常重要。旨在幫助非函數(shù)式編程的同學，能快速切入到函數(shù)式編程的理念。 1、用函數(shù)式編程對JavaScript進行斷舍離 當從業(yè)20的JavaScript老司機學會函數(shù)式編程時，他扔掉了90%的特性，也不用面向對象了，最后發(fā)現(xiàn)了真愛啊！！！ https:/...
閱讀 1661·2019-08-30 15:55
閱讀 982·2019-08-30 15:44
閱讀 874·2019-08-30 10:48
閱讀 2048·2019-08-29 13:42
閱讀 3191·2019-08-29 11:16
閱讀 1272·2019-08-29 11:09
閱讀 2060·2019-08-26 11:46
閱讀 622·2019-08-26 11:44
