js模塊化載入器實現

『壹』 jquery layer插件,拓展模塊layer.ext.js如何正確載入

jquery layer插件,拓展模塊layer.ext.js正確載入需要進行全局配置。

解決方法如下：

layer.config(options)- 初始化全局配置

這是一個可以重要也可以不重要的方法，重要的是，它的權利真的很大，尤其是在模塊化載入layer時，你會發現你必須要用到它。它不僅可以配置一些諸如路徑、載入的模塊，甚至還可以決定整個彈層的默認參數。而說它不重要，是因為多數情況下，你會發現，你似乎不是那麼十分需要它。但你真的需要認識一下這位伙計。

如果您是採用seajs或者requirejs載入layer，你需要執行該方法來完成初始化的配置。

如果你是採用<script src="?a.js&layer.js">這種合並的方式引入layer，那麼您需要在script標簽上加一個自定義屬性merge="true"。

layer.ready(path, callback)- 初始化就緒

由於我們的layer內置了輕量級載入器，所以你根本不需要單獨引入css等文件。但是載入總是需要過程的。當你在頁面一打開就要執行彈層時，layer.ready()會是一個不錯的幫手。它也可以做一些layer.config可以做的事，比如指向layer.js所在目錄。但是如果你已經通過layer.config配置了path，你在使用layer.ready時，是不需要path的

『貳』 labjs，requirejs，sea.js 哪個最好用為什麼

LABjs 的核心是 LAB（Loading and Blocking）：Loading 指非同步並行載入，Blocking 是指同步等待執行。LABjs 通過優雅的語法（script 和 wait）實現了這兩大特性，核心價值是性能優化。LABjs 是一個文件載入器。
RequireJS 和 SeaJS 則是模塊載入器，倡導的是一種模塊化開發理念，核心價值是讓 javaScript 的模塊化開發變得更簡單自然。
模塊載入器一般可降級為文件載入器用，因此使用 RequireJS 和 SeaJS，也可以達成 LABjs 的性能優化目的。
RequireJS 和 SeaJS 都是很不錯的模塊載入器，兩者區別如下：
1. 兩者定位有差異。RequireJS 想成為瀏覽器端的模塊載入器，同時也想成為 Rhino / Node 等環境的模塊載入器。SeaJS 則專注於 Web 瀏覽器端，同時通過 Node 擴展的方式可以很方便跑在 Node 伺服器端
2. 兩者遵循的標准有差異。RequireJS 遵循的是 AMD（非同步模塊定義）規范，SeaJS 遵循的是 CMD （通用模塊定義）規范。規范的不同，導致了兩者 API 的不同。SeaJS 更簡潔優雅，更貼近 CommonJS Moles/1.1 和 Node Moles 規范。
3. 兩者社區理念有差異。RequireJS 在嘗試讓第三方類庫修改自身來支持 RequireJS，目前只有少數社區採納。SeaJS 不強推，而採用自主封裝的方式來「海納百川」，目前已有較成熟的封裝策略。
4. 兩者代碼質量有差異。RequireJS 是沒有明顯的 bug，SeaJS 是明顯沒有 bug。
5. 兩者對調試等的支持有差異。SeaJS 通過插件，可以實現 Fiddler 中自動映射的功能，還可以實現自動 combo 等功能，非常方便便捷。RequireJS 無這方面的支持。
6. 兩者的插件機制有差異。RequireJS 採取的是在源碼中預留介面的形式，源碼中留有為插件而寫的代碼。SeaJS 採取的插件機制則與 Node 的方式一致：開放自身，讓插件開發者可直接訪問或修改，從而非常靈活，可以實現各種類型的插件。
還有不少細節差異就不多說了。
總之，SeaJS 從 API 到實現，都比 RequireJS 更簡潔優雅。如果說 RequireJS 是 Prototype 類庫的話，則 SeaJS 是 jQuery 類庫。
最後，向 RequireJS 致敬！RequireJS 和 SeaJS 是好兄弟，一起努力推廣模塊化開發思想，這才是最重要的。

『叄』 怎樣提高前端工程師開發效率，都在這里

（一）地圖

那是在將軍面前最基本的技能之一，我們使用PS圖象處理軟體或煙花基本可以交付給我們的設計方案的設計師，但對提高切削效率你必須使用一些技巧，如PS行動中的使用來實現「一張圖」功能。

（二）編寫

對於編碼部分，我們首先需要找到一個合適的IDE工具。建議不要使用記事本+或Dreamweaver。這些工具不再符合前端的趨勢，也不能使自己優雅地敲打代碼。蕭邊在這里推薦崇高的文本，主要是原子或webstrom，因為它們除了人機界面和支持語法高亮，還可以安裝各種插件來擴展你的IDE工具，下面主要介紹幾種小崇高文本提高插件的開發效率：

元素用於快速編寫HTML。例如，進入UL >里後，按下TAB鍵可以生成一個UL標簽包含一個李標簽，其官方文件的HTTP：/ /文檔。埃米特。IO /小抄/。

JS jsformat格式；一種樣式屬性csscomb；html-css-js美化可以我們的HTML、CSS、JS規范的關鍵，和JSON格式；sublimetmpl可以快速創建新的HTML、CSS、JS文件；器是用來調用本地調色板功能。這些工具在一定程度上是非常實用的，以提高我們的編碼效率。

（三）前端自動化

談到提高開發效率，我們不得不提到一些前端自動化工具。畢竟，前端自動化是當前和未來的發展趨勢。它可以大大減少前端的不必要的工作量，這樣我們就可以把重點放在前端本身。

在這里，我們可以使用NPM管理我們的項目文件；使用WebPACK包裝和壓縮我們的代碼；使用Node.js建立本地伺服器；使用的業力和茉莉來測試我們的前端代碼。

使用前端自動化工具可以幫助我們處理許多瑣碎的事情，比如一個按鈕壓縮代碼、圖片、一鍵合並JS、檢測文件更新等等。

（四）前端模塊化

前端模塊化的實現，有利於維護項目代碼，實現按需載入，有利於提高項目的長期開發效率。

6出來之前，我們應該說，前端代碼本身沒有實現模塊的功能。我們不得不使用一些插件庫來實現，如require.js，sea.js等等。隨著6的普及，工具如require.js和sea.js不再是必要的。所以在6基礎開發環境，我建議使用ES6模塊功能實現前端模塊化。

（五）前端組件化

前端組件的概念也是由來已久的。我們可以將代碼分為不同的組件，以實現公共和方便的維護，這也提高了我們的開發效率。以下是在流行的前端框架Vue單文件組件的概念圖：

『肆』 requirejs模塊化編程怎麼理解

一、Javascript模塊化編程

目前，通行的Javascript模塊規范共有兩種：CommonJS和AMD。

1、commonjs

2009年，美國程序員Ryan Dahl創造了node.js項目，將javascript語言用於伺服器端編程，這標志」Javascript模塊化編程」正式誕生。

在瀏覽器環境下，沒有模塊也不是特別大的問題，畢竟網頁程序的復雜性有限；但是在伺服器端，一定要有模塊，與操作系統和其他應用程序互動，否則根本沒法編程。

node.js的模塊系統，就是參照CommonJS規范實現的。在CommonJS中，有一個全局性方法require()，用於載入模塊。

假定有一個數學模塊math.js，就可以像下面這樣載入。

var math = require('math');

然後，就可以調用模塊提供的方法：

var math = require('math');

math.add(2,3); // 5

因為這個系列主要針對瀏覽器編程，不涉及node.js，所以對CommonJS就不多做介紹了。我們在這里只要知道，require()用於載入模塊就行了。

2、AMD

AMD是」Asynchronous Mole Definition」的縮寫，意思就是」非同步模塊定義」。它採用非同步方式載入模塊，模塊的載入不影響它後面語句的運行。所有依賴這個模塊的語句，都定義在一個回調函數中，等到載入完成之後，這個回調函數才會運行。

模塊定義
define(id?, dependencies?, factory);
其中：

id: 模塊標識，可以省略。
dependencies: 所依賴的模塊，可以省略。
factory: 模塊的實現，或者一個JavaScript對象。

模塊載入

AMD也採用require()語句載入模塊，但是不同於CommonJS，它要求兩個參數：
require([mole], callback);

第一個參數[mole]，是一個數組，裡面的成員就是要載入的模塊；第二個參數callback，則是載入成功之後的回調函數。如果將前面的代碼改寫成AMD形式，就是下面這樣：

require(['math'], function (math) {
math.add(2, 3);
});

math.add()與math模塊載入不是同步的，瀏覽器不會發生假死。所以很顯然，AMD比較適合瀏覽器環境。

目前，主要有兩個Javascript庫實現了AMD規范：require.js和curl.js。本系列的第三部分，將通過介紹require.js，進一步講解AMD的用法，以及如何將模塊化編程投入實戰。

二、requirejs模塊化編程

require.js載入的模塊，採用AMD(非同步模塊定義規范) 規范。也就是說，模塊必須按照AMD的規定來寫。

require.js的兩個重要的特點：

1、實現js文件的非同步載入，避免網頁失去響應

2、管理模塊之間的依賴性，便於代碼的編寫和維護

載入requirejs：

<script src="js/require.js" data-main="js/main"></script>

data-main屬性的作用是，指定網頁程序的主模塊。在上例中，就是js目錄下面的main.js，這個文件會第一個被require.js載入。由於require.js默認的文件後綴名是js，所以可以把main.js簡寫成main。

main.js常見實例：

require.config({
paths: {
moleA: '',
moleB:'',
moleC:''
}
});

require(['moleA', 'moleB', 'moleC'], function (moleA, moleB, moleC){
// some code here

});

1、require.config

require.config用來配置一些參數，它將影響到requirejs庫的一些行為。

require.config的參數是一個JS對象，常用的配置有baseUrl，paths等。

這里配置了paths參數，使用模塊名「jquery」，其實際文件路徑jquery-1.7.2.js（後綴.js可以省略）。

我們知道jQuery從1.7後開始支持AMD規范，即如果jQuery作為一個AMD模塊運行時，它的模塊名是「jquery」。注意「jquery」是固定的，不能寫「jQuery」或其它。

註：如果文件名「jquery-1.7.2.js」改為「jquery.js」就不必配置paths參數了。

如果將jQuery應用在模塊化開發時，其實可以不使用全局的，即可以不暴露出來。需要用到jQuery時使用require函數即可。

2、require()函數

require()函數接受兩個參數。第一個參數是一個數組，表示所依賴的模塊，上例就是['moleA', 'moleB',
'moleC']，即主模塊依賴這三個模塊；第二個參數是一個回調函數，當前面指定的模塊都載入成功後，它將被調用。載入的模塊會以參數形式傳入該函數，從而在回調函數內部就可以使用這些模塊。