JavaScript代碼組織結構良好的5個特點[reuqire.js]

wushuiyong 發布于2019-08-21 10:23 / 2008人閱讀

摘要：可重用的代碼變得更可靠，單元測試的數量增加了倍也是一個因素。模塊不應依賴全局變量為了進一步加強我們的代碼庫，我們已經幾乎完全消滅了全局變量除了由提供的全局變量，如和。

隨著JavaScript項目的成長，如果你不小心處理的話，他們往往會變得難以管理。我們發現自己常常陷入的一些問題：當在創建新的頁面時發現，很難重用或測試之前寫的代碼。
當我們更深處地研究這些問題，我們發現根本原因是無效的依賴管理造成的。比如，腳本A依賴腳本B，并且腳本B又依賴腳本C，當C沒有被正確引入時，整個依賴鏈就無法正常工作了。
為了解決這個問題，我們已經采取了異步模塊定義（AMD）的模式，并引入require.js到我們的技術堆棧。經過對AMD的進一步探索，我們已經基本確定，組織嚴密的JavaScript一般都呈現以下五個特點：

始終聲明我們的依賴

為第三方代碼庫添加shim（墊片）

定義跟調用應該分離

依賴應該異步加載

模塊不應依賴全局變量

讓我們詳細討論一下。

始終聲明我們的依賴

我們最常碰到了的一個問題是，我們會經常忽略那些會被確定加載的依賴項。舉例來說，如果我們創建了一個jQuery插件，一般認為沒有必要申報jQuery的依賴，因為它在大多數頁面都是默認裝載的。雖然這似乎適用于大多數的網頁，但當我們試圖進行單元測試或在一個全新的頁面加載時，它就變成一個問題。
始終聲明我們的依賴，我們就消除了JavaScript中90％的問題。可重用的代碼變得更可靠，單元測試的數量增加了4倍也是一個因素。

為第三方代碼庫添加shim（墊片）

在管理JavaScript依賴時經常碰到的一個有趣問題是，較舊的第三方庫可能無法和您的依賴關系管理系統配合工作。例如，你們內部使用了jQuery的一個很酷的插件，但它對require.js一無所知。這會成為一個問題，因為第一個特點，我們來添加對這個插件的引用。
解決的辦法是通過依賴管理工具為這個插件制作一個墊片。在require.js中，這可以很容易地通過配置來完成：

var require = {
    "shim": {
        "lib/cool-plugin": {
            "deps": ["lib/jquery"]
        }
    }
}

有了這個簡單的配置，每一個加載 lib/cool-plugin.js 的腳本都會自動加載jQuery。將有助于滿足所有相關性.
最終的結果是代碼更容易測試和重用，因為你總是有一個require()來調用所需的功能。

定義跟調用應該分離

這是限制JavaScript代碼的可重用性和可測試性的一個常見問題。問題表現在一個單一的文件即定義了一個類/函數又調用了它。考慮下面的代碼：

## js/User.js

define(functino(require) {
   var User = function(name, greeter) {
        this.name = name;
        this.greeter = greeter;
   };

   User.prototype.sayHello = function() {
        this.greeter("Hello, " + this.name);
   };

   var user = new User("Alice", window.alert);
   user.sayHello();
});

在這個例子中，一個單一的文件即定義了User類又調用它。這將很難重用這個代碼，因為只要加載這個腳本就會出現alert。同樣greeter這個非常難以測試。
解決的辦法是保持定義和執行的分離。這有助于確保可重用性和可測性：

## js/User.js

define(functino(require) {
   var User = function(name, greeter) {
        this.name = name;
        this.greeter = greeter;
   };

   User.prototype.sayHello = function() {
        this.greeter("Hello, " + this.name);
   };

   return User;
});



## js/my-page.js

define(functino(require) {
    var User = require("js/User");
    var user = new User("Alice", window.alert);
    user.sayHello();
});

這種變化，User類可以安全地在許多腳本中重用。

依賴應該異步加載

因為試圖同步加載腳本會導致瀏覽器鎖死，這是非常重要的，你的腳本和你的模塊應該使用異步加載機制。 Require.js在默認情況下，所有異步加載你的模塊,只有所有的的依賴都加載完以后才會執行你的模塊代碼的函數。
通過使用一個閉包，我們可以進一步利用“use strict”的好處。

模塊不應依賴全局變量

為了進一步加強我們的JavaScript代碼庫，我們已經（幾乎）完全消滅了全局變量（除了由require.js提供的全局變量，如require()和define()）。全局變量是臭名昭著的潛在的進入模塊的“隱藏的依賴關系”，它會使代碼很難重用或測試。
Require.js也讓我們轉換第三方全局變量，require() - 通過墊補功能能模塊。在這個例子中，lib/calculator 創建一個全局的計算器對象，這個庫是被require化的。

var require = {
    "shim" : {
        "lib/calculator": {
            "export": "Calc"
        }
    }
}

結論

管理依賴是挺難的(hard)，但肯定不是做不到的(difficult)。通過使用依賴管理，你的代碼將更可靠。

via ourjs

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

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

require.js學習記錄

摘要：工作方式為使用將每一個依賴加載為一個標簽。然后在被瀏覽器加載完畢后，便會自動繼承之前配置的參數。可以單獨定義鍵值隊數據，作為配置文件來使用還可以定義依賴的關系壓縮使用來進行壓縮時，需要指定文件。在鏈接中有很好的示例，可以參看學習。 1、簡介官方對requirejs的描述：RequireJS is a JavaScript file and module loader. It is o...

鄒強 2019-08-23 12:18 評論0 收藏0
前端工程師的知識體系

摘要：目前只有和有這個概率。是快速開發應用程序的前端工具包。調試工具前端的調試工具很多，比如，核心的的。前端流程部署，和現在幾乎是前端最流行的自動化的項目構建工具正則表達式瀏覽器插件開發瀏覽器原理溝通能力優秀下圖是前端工程師圖解：showImg(http://upload-images.jianshu.io/upload_images/1807893-de7c7404345922b6.jp...

itvincent 2019-08-20 17:22 評論0 收藏0
前端工程師的知識體系

摘要：目前只有和有這個概率。是快速開發應用程序的前端工具包。調試工具前端的調試工具很多，比如，核心的的。前端流程部署，和現在幾乎是前端最流行的自動化的項目構建工具正則表達式瀏覽器插件開發瀏覽器原理溝通能力優秀下圖是前端工程師圖解：showImg(http://upload-images.jianshu.io/upload_images/1807893-de7c7404345922b6.jp...

raise_yang 2019-08-29 12:47 評論0 收藏0
前端工程師的知識體系

摘要：目前只有和有這個概率。是快速開發應用程序的前端工具包。調試工具前端的調試工具很多，比如，核心的的。前端流程部署，和現在幾乎是前端最流行的自動化的項目構建工具正則表達式瀏覽器插件開發瀏覽器原理溝通能力優秀下圖是前端工程師圖解：showImg(http://upload-images.jianshu.io/upload_images/1807893-de7c7404345922b6.jp...

Sanchi 2019-08-01 17:00 評論0 收藏0