Decorator修飾器的作用

本篇內(nèi)容主要講解“Decorator修飾器的作用”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Decorator修飾器的作用”吧!

10年積累的網(wǎng)站建設(shè)、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有汪清免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

修飾器（Decorator）是ES7的一個(gè)提案，熟悉javascript設(shè)計(jì)模式的讀者，肯定知道用es5語(yǔ)法來(lái)實(shí)現(xiàn)修飾器模式是多么的麻煩，而用ES7的修飾器本身實(shí)現(xiàn)了修飾者模式，修飾器主要的作用有兩個(gè)：

1. 不同類(lèi)間共享方法

2. 編譯期對(duì)類(lèi)和方法的行為進(jìn)行改變

首先來(lái)了解一下decorator的語(yǔ)法：

decorator就是一個(gè)函數(shù)，這個(gè)函數(shù)既可以修飾類(lèi)，也可以修飾類(lèi)的屬性和方法，decorator在修飾類(lèi)的時(shí)候只能傳遞一個(gè)參數(shù)，這個(gè)參數(shù)指的就是被修飾的類(lèi)，decorator在修飾類(lèi)里面的屬性的時(shí)候可以傳遞三個(gè)參數(shù)，target指的是類(lèi)本身，key被修飾的屬性，descriptor屬性描述符。

下面演示deractor的使用方法，首先演示第一種，用deractor修飾類(lèi)，代碼如下：

@setProp
class User {}

function setProp(target) {
   console.log(target)
   target.age = 30
}

console.log(User.age);

打印結(jié)果如圖：

我們使用修飾器給User這個(gè)類(lèi)增加了一個(gè)屬性，并且可以看到target就是類(lèi)本身。

上面的案例為User這個(gè)類(lèi)設(shè)置的age屬性是寫(xiě)死的，能不能再調(diào)用修飾類(lèi)的時(shí)候，通過(guò)傳遞參數(shù)設(shè)置不同的age呢？看如下代碼：

@setProp(20)
class User {}

function setProp(value) {
   return function (target) {
       target.age = value
   }
}

console.log(User.age)

仔細(xì)觀察代碼，我們發(fā)現(xiàn)修飾器就是一個(gè)函數(shù)，我們將這個(gè)修飾器包裹在另外一個(gè)函數(shù)中，將變量提取為參數(shù)，在使用的地方調(diào)用這個(gè)函數(shù)，傳入?yún)?shù)，函數(shù)內(nèi)部返回修飾器，這也是開(kāi)發(fā)中經(jīng)常用到的修飾器的方式。

deractor修飾類(lèi)的時(shí)候除了直接為類(lèi)增加屬性，也可以修飾類(lèi)的prototype，看如下代碼：

我們通過(guò)deractor為類(lèi)的原型設(shè)置屬性。

說(shuō)完了deractor修飾類(lèi)，下面數(shù)一下，deractor修飾類(lèi)的屬性和方法代碼如下：

class User {
   @readonly
   getName() {
       return 'Hello World'
   }
}

// readonly修飾函數(shù)，對(duì)方法進(jìn)行只讀操作
function readonly(target, name, descriptor) {
   console.log(target, name, descriptor)
   descriptor.writable = false
   return descriptor
}

let u = new User()
// 嘗試修改函數(shù)，在控制臺(tái)會(huì)報(bào)錯(cuò)
u.getName = () => {
   return 'I will override'
}

觀察以上代碼，首先定義了一個(gè)類(lèi)，這個(gè)類(lèi)的原型上有一個(gè)getName的方法，此方法返回hello world，然后定義了一個(gè)deractor，這個(gè)修飾器里面?zhèn)髁巳齻€(gè)參數(shù)，并打印，打印結(jié)果如下：

可以看出來(lái)，分別是對(duì)應(yīng)著類(lèi)本身，屬性key值，屬性描述符。在修飾器函數(shù)里面我們將屬性描述符的writable改成了false，這個(gè)屬性就是只讀的了，不能被修改了。代碼最后兩行，我們定義了一個(gè)實(shí)例，然后修改實(shí)例的getName方法，程序就會(huì)報(bào)錯(cuò)。

那這個(gè)修飾器用在實(shí)際應(yīng)用中，有哪些場(chǎng)景呢?

實(shí)際應(yīng)用1：日志管理在用webpack打包時(shí)，我們經(jīng)常需要好多步驟，比如第一步讀取package.json文件，第二步處理該文件，第三步加載webpack.base.js文件，第四步進(jìn)行打包...為了直觀，我們經(jīng)常在每一步打印一些日志文件，比如這步都干了些什么事，很明顯打印日志的操作和業(yè)務(wù)代碼根本就一點(diǎn)關(guān)系沒(méi)有，我們不應(yīng)該把日志和業(yè)務(wù)摻和在一起，這樣使用修飾器就是避免這個(gè)問(wèn)題，以下為代碼：

實(shí)際應(yīng)用2：檢查登錄這個(gè)例子在實(shí)際的開(kāi)發(fā)中常用得到，我們一些操作前，必須得判斷用戶(hù)是否登錄，比較點(diǎn)贊、結(jié)算、發(fā)送彈幕...按照之前的寫(xiě)法，我們必須在每一個(gè)方法中判斷用戶(hù)的登錄情況，然后再進(jìn)行業(yè)務(wù)的操作，很顯然前置條件和業(yè)務(wù)又混到了一起，用修飾器，就可以完美的解決這一問(wèn)題，代碼如下：

class User {
   // 獲取已登錄用戶(hù)的用戶(hù)信息
   @checkLogin
   getUserInfo() {
       /**
        * 之前，我們都會(huì)這么寫(xiě)：
        *      if(checkLogin()) {
        *          // 業(yè)務(wù)代碼
        *      }
        *  這段代碼會(huì)在每一個(gè)需要登錄的方法中執(zhí)行
        *  還是上面的問(wèn)題，執(zhí)行的前提和業(yè)務(wù)又混到了一起
        */
       console.log('獲取已登錄用戶(hù)的用戶(hù)信息')
   }
   // 發(fā)送消息
   @checkLogin
   sendMsg() {
       console.log('發(fā)送消息')
   }
}

// 檢查用戶(hù)是否登錄，如果沒(méi)有登錄，就跳轉(zhuǎn)到登錄頁(yè)面
function checkLogin(target, name, descriptor) {
   let method = descriptor.value

   // 模擬判斷條件
   let isLogin = true

   descriptor.value = function (...args) {
       if (isLogin) {
           method.apply(this, args)
       } else {
           console.log('沒(méi)有登錄，即將跳轉(zhuǎn)到登錄頁(yè)面...')
       }
   }
}
let u = new User()
u.getUserInfo()
u.sendMsg()

實(shí)際應(yīng)用3：前端埋點(diǎn)，在工作中有得時(shí)候我們需要埋點(diǎn)，從而統(tǒng)計(jì)一下交互數(shù)據(jù)，代碼如下：

在上面的函數(shù)中我們定義了一個(gè)類(lèi)，這個(gè)類(lèi)里面包含一些方法，這些方法是需要被被埋點(diǎn)監(jiān)控的，然后我們將埋點(diǎn)函數(shù)抽離到了裝飾器中，并為其設(shè)置參數(shù)，不同的用戶(hù)操作行為，傳遞不同的參數(shù)，然后，在定義類(lèi)的時(shí)候，修飾具體的方法，這樣的代碼易于維護(hù)，邏輯表達(dá)更加清晰。

到此，相信大家對(duì)“Decorator修飾器的作用”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！

當(dāng)前標(biāo)題：Decorator修飾器的作用
轉(zhuǎn)載源于：http://www.muchs.cn/article12/ghgidc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、移動(dòng)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、靜態(tài)網(wǎng)站、面包屑導(dǎo)航、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)