JavaScript修飾器-讓代碼更干凈

luqiuwen 發布于2019-08-20 14:51 / 1214人閱讀

摘要：修飾器是一個函數，用于修改類行為。結論以上只是一個很簡單的修飾器示例，你可以根據需要生產一些有意思的修飾器，讓編寫的代碼更優雅更干凈。

一般在JavaScript中為了讓部分代碼延遲執行，一想起的自然是 setTimeout，比如：

setTimeout(() => {
  // doing
}, 0);

這種代碼或許你不知道寫過多少遍，但，我們在 setTimeout 中多數情況下會去調用另一個方法：

setTimeout(() => {
  this.fn();
}, 0);

你會發現，我們一直都在重復寫著 setTimeout，再套用一個匿名函數，最后才真正去編寫我們需要執行的方法。我越來越討厭這種寫法，老是寫著一些無關系要多余的代碼。

使用Angular的同學對 @Component 不陌生，里面大量的使用這種ES7才會有的“修飾器”。

修飾器是一個函數，用于修改類行為。

那，應該怎么編寫一個更干凈的 setTimeout，比如，我希望這樣來編寫我的timeout：

@timeout(1000)
fn() {
  // doing
}

this.fn();

對應的 timeout 修飾器代碼：

// timeout.ts
export function timeout(milliseconds: number = 0) {
  return function(target, key, descriptor) {
    // value 值相當于上面示例中 `change` 方法。
    var orgMethod = descriptor.value;
    descriptor.value = function(...args) {
      setTimeout(() => {
        orgMethod.apply(this, args);
      }, milliseconds);
    };
    return descriptor;
  }
}

target：實例對象，即 IndexComponent 實例化對象。
key：方法名稱，即 _fn_。
descriptor：對象描述，同Object.getOwnPropertyDescriptor()?。

怎么樣，這樣子寫的代碼是不是更酷？

修飾器目前只能在ES7才會有，但一些在Typescript、Babel等轉碼器已經被支持，特別是Angular2應用中更是給予非常重要的地位。而且應用范圍可以非常廣，比如類、類方法和屬性。

結論

以上只是一個很簡單的修飾器示例，你可以根據需要生產一些有意思的修飾器，讓編寫的代碼更優雅、更干凈。完整示例。

GPU云服務器云服務器如何讓服務器更安全、修飾器 Python修飾器 python類修飾器

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

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

CSS || 功能分類

摘要：組件的外觀可以通用，但是位置卻不能。總結出現上述問題的愿意一個承擔的樣式太多。在使用等簡寫屬性時，注意其中關于位置和布局的樣式等布局和位置由單獨的布局類或單獨容器元素構成。降低現有類名沖突使用規則進行命名。 CSS模塊化規則 CSS模塊的設計原則：可重用可維護可擴展 1 常見的問題 1.1 基于父組件直接修改樣式 .widget { background: yello...

xuhong 2019-08-29 12:13 評論0 收藏0
Vue 基礎語法

摘要：在生成的項目中，我們打開文件夾下組件，為便于演示，刪減了一部分內容本文中的例子都將改造組件來演示語法一創建組件在中，有好幾種方式用來創建組件，后面會單獨寫一篇文章來介紹。表達式插值中也支持表達式插值用雙大括號將表達式括起來。 Vue 的官方文檔寫的非常棒(另一個我覺得中文文檔寫的很好地是 Ant-Design)。這篇文章以使用 vue-cli 生成的項目為基礎，以完整 demo 的...

saucxs 2019-08-23 14:59 評論0 收藏0
關于BEM的反思

摘要：反思在學習愛中，我要表明我對語法的新感受。縮短修飾符長度在中，修飾符類用兩個連接符表示。在中，它可能是這樣的在的指南中，有一個關于修飾符的部分。對于很多營銷網站來說，甚至是完全多余的。我贊揚對外公開它們的內部規范。反思BEM 在學習愛BEM中，我要表明我對BEM語法的新感受。我很高興地報告說，經過2年以上，我仍然對我的選擇感到滿意。當我們在項目中選擇代碼風格時，我們使用BEM和I...

xbynet 2019-08-29 13:27 評論0 收藏0
Smarty（一）

摘要：還有安全特性，可以令模板源碼有強制的約束。并且業務邏輯和顯示邏輯分離，是的一個設計理念。是一個模板引擎，在應用程序中，當作層視圖層的組件來使用。不一定保證良好的程序設計或者達成顯示分離的目的，這還得需要開發者和模板設計師的努力。一、 Smarty的由來 Smarty的主要設計理念是：干凈的分離顯示邏輯和程序代碼，在PHP為后端情況下，Smarty模板應用在前端，增強PHP的前后端交互...

aboutU 2019-08-21 17:38 評論0 收藏0
Smarty（一）

摘要：還有安全特性，可以令模板源碼有強制的約束。并且業務邏輯和顯示邏輯分離，是的一個設計理念。是一個模板引擎，在應用程序中，當作層視圖層的組件來使用。不一定保證良好的程序設計或者達成顯示分離的目的，這還得需要開發者和模板設計師的努力。一、 Smarty的由來 Smarty的主要設計理念是：干凈的分離顯示邏輯和程序代碼，在PHP為后端情況下，Smarty模板應用在前端，增強PHP的前后端交互...

chenjiang3 2019-06-28 14:15 評論0 收藏0