讀懂ES7中javascript修飾器

kelvinlee 發布于2019-08-21 16:56 / 3386人閱讀

摘要：例子修飾類自定義參數值此例和上面功能基本一致，唯一差別在于值是參考修飾函數傳過來的例子修飾方法修飾函數，對方法進行只讀操作嘗試修改函數，在控制臺會報錯上例中，我們對類中的方法使用修飾器進行修飾，使得方法不能被修改。

什么是修飾器

修飾器（Decorator）是ES7的一個提案，它的出現能解決兩個問題：

不同類間共享方法

編譯期對類和方法的行為進行改變

用法也很簡單，就是在類或方法的上面加一個@符，在vue in typescript中經常用到

以上的兩個用處可能不太明白，沒關系，我們開始第一個例子

例子1：修飾類

@setProp
class User {}

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

console.log(User.age)

這個例子要表達的是對User類使用setProp這個方法進行修飾，用來增加User類中age的屬性，setProp方法會接收3個參數，我們現在接觸第一個，target代表User類本身。

例子2：修飾類(自定義參數值)

@setProp(20)
class User {}

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

console.log(User.age)

此例和上面功能基本一致，唯一差別在于值是參考修飾函數傳過來的

例子2：修飾方法

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

// readonly修飾函數，對方法進行只讀操作
function readonly(target, name, descriptor) {
    descriptor.writable = false
    return descriptor
}

let u = new User()
// 嘗試修改函數，在控制臺會報錯
u.getName = () => {
    return "I will override"
}

上例中，我們對User類中的getName方法使用readonly修飾器進行修飾，使得方法不能被修改。第一個參數我們已經知道了，參數name為方法名，也就是readonly，參數descriptor是個啥東西呢，看到這行descriptor.writable = false，我們大家猜的也差不多了，這三個參數對應的就是Object.defineProperty的三個參數，我們來看一下：

我們設置descriptor.writable = false就是讓函數不可以被修改，如果我們寫成

descriptor.value = "function (){ console.log("Hello decorator") }"

那么，輸出就是Hello World了，而是Hello decorator，是不是已經意識到修飾器的好處了。現在我們來看看實際工作中，我們用到修飾器的例子

實際應用1：日志管理

在用webpack打包時，我們經常需要好多步驟，比如第一步讀取package.json文件，第二步處理該文件，第三步加載webpack.base.js文件，第四步進行打包...為了直觀，我們經常在每一步打印一些日志文件，比如這步都干了些什么事，很明顯打印日志的操作和業務代碼根本就一點關系沒有，我們不應該把日志和業務摻和在一起，這樣使用修飾器就是避免這個問題，以下為代碼：

class Pack {
    @log("讀取package.json文件")
    step1() {
        // do something...
        // 沒有修飾器之前，我們通常把console.log放到這里寫
        // 放到函數里面寫會有兩個壞處
        //     1.console和業務無關，會破壞函數單一性原則
        //     2.如果要刪除所有的console，那我們只能深入到每一個方法中
    }
    @log("合并webpack配置文件")
    step2() {
        // do something...
    }
}

function log(value) {
    return function (target, name, descriptor) {
        // 在這里，我們還可以拿到函數的參數，打印更加詳細的信息
        console.log(value)
    }
}

let pack = new Pack()
pack.step1()
pack.step2()

實際應用2：檢查登錄

這個例子在實際的開發中常用得到，我們一些操作前，必須得判斷用戶是否登錄，比較點贊、結算、發送彈幕...按照之前的寫法，我們必須在每一個方法中判斷用戶的登錄情況，然后再進行業務的操作，很顯然前置條件和業務又混到了一起，用修飾器，就可以完美的解決這一問題，代碼如下：

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

// 檢查用戶是否登錄，如果沒有登錄，就跳轉到登錄頁面
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("沒有登錄，即將跳轉到登錄頁面...")
        }
    }
}
let u = new User()
u.getUserInfo()
u.sendMsg()

結語

以上只是修飾器的基本應用，只要我們掌握了原理，在實際的工作中，要思考自己的應用場景，只要我們涉及需要在執行前做一些處理的應用，不管是修改函數的參數值，還是增加屬性，還是執行的先決條件，我們都可以使用修飾器，這種編程的方式，就是面向切面編程

源碼以及使用方法，請移步GitHub

GPU云服務器云服務器修飾器 Python修飾器 python類修飾器 es7

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88933.html

JavaScript修飾器-讓代碼更干凈

摘要：修飾器是一個函數，用于修改類行為。結論以上只是一個很簡單的修飾器示例，你可以根據需要生產一些有意思的修飾器，讓編寫的代碼更優雅更干凈。一般在JavaScript中為了讓部分代碼延遲執行，一想起的自然是 setTimeout，比如： setTimeout(() => { // doing }, 0); 這種代碼或許你不知道寫過多少遍，但，我們在 setTimeout 中多數情況下會...

luqiuwen 2019-08-20 14:51 評論0 收藏0
5 分鐘即可掌握的 JavaScript 裝飾者模式與 AOP

摘要：下裝飾者的實現了解了裝飾者模式和的概念之后，我們寫一段能夠兼容的代碼來實現裝飾者模式原函數拍照片定義函數裝飾函數加濾鏡用裝飾函數裝飾原函數這樣我們就實現了抽離拍照與濾鏡邏輯，如果以后需要自動上傳功能，也可以通過函數來添加。 showImg(https://segmentfault.com/img/bVbueyz?w=852&h=356); 什么是裝飾者模式當我們拍了一張照片準備發朋友...

chunquedong 2019-08-23 18:16 評論0 收藏0
ES7 Decorators（修飾器）

ES6 Decorators（修飾器）修飾器（Decorator）是一個函數，用來修改類的行為。這是ES7的一個提案，目前Babel轉碼器已經支持我們在游戲大型項目種經常會用到的方法，現在es6直接支持想要使用Decorator的話需要我們配置一下文件夾，配置一下環境 npm install babel-plugin-transform-decorators-legacy --save-de...

張漢慶 2019-08-20 18:11 評論0 收藏0
在 Web 應用中使用 ES7 裝飾器（Decorator）初體驗

摘要：前言今天閑來時看了看中的新標準之一，裝飾器。過程中忽覺它和中的注解有一些類似之處，并且當前版本的中已經支持它了，所以，就動手在一個應用中嘗鮮初體驗了一番。另外，由于裝飾器目前還是中的一個提案，其中具體細節可能還會更改。前言今天閑來時看了看ES7中的新標準之一，裝飾器（Decorator）。過程中忽覺它和Java中的注解有一些類似之處，并且當前版本的TypeScript中已經支持它了...

ivan_qhz 2019-08-19 17:27 評論0 收藏0
學習es7的Decorator(順帶寫個react高階組件)

摘要：為了代碼進一步解耦，可以考慮使用高階組件這種模式。開源的高階組件使用提供了一系列使用的高階組件，可以增強組件的行為，可以利用此庫學習高階組件的寫法。通過使用此庫提供的高階組件，可以方便地讓列表元素可拖動。 1. Decorator基本知識在很多框架和庫中看到它的身影，尤其是React和Redux，還有mobx中，那什么是裝飾器呢。修飾器（Decorator）是一個函數，用來修改類的...

xiyang 2019-08-23 12:32 評論0 收藏0