前端模塊化開發

今天談談前端模塊化開發，類似的介紹在網上有很多，有不少大佬做過這方面的講解，在這裡就自己對模塊化談談自己的認知，可能有不到位的地方，也希望大家提出指正。

模塊化開發，顧名思義，就是將功能點拆分成各個模塊，然後按需載入需要的模塊。

在將模塊化開發之前，先來看看我們之前大部分是怎麼載入頁面資源的：

大家肯定很熟悉這種寫法，就是將資源一個一個的通過script引入到頁面文件中，這種是CommonJS規範，即每個文件都是一個模塊，模塊之間不能互相訪問。但如果資源文件比較多，這樣的寫法就暴露出弊端了，你就要寫很多script標籤了，而且如果每個js文件載入不出，也會造成js阻塞瀏覽器渲染頁面。所以我們需要模塊化，它的優點：

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

2、管理模塊間的依賴關係，便於開發；

模塊化有兩種規範：AMD和CMD

兩者的區別：

1、AMD推崇依賴前置，CMD推崇就近依賴；

2、AMD使用requireJS，CMD使用seaJS;

這裡就主要講講requireJS的用法。

首先，介紹requireJS的三個API，define、require、requireJS;

define

define(id?, dependencies?, factory);

用來定義模塊，它有三個參數，第一個參數可加可不加，表示定義模塊名；第二個參數可加可不加，表示當前模塊依賴的其他模塊名，必須是數組形式；第三個參數是模塊初始化執行的函數或對象，如果是函數，應該只被執行一次，如果是對象，應該為模塊的輸出值，即需要把這個對象return出去；

require

require([dependencies], function(){});

用來載入模塊，它有兩個參數，第一個參數必須是一個數組，表示所依賴的模塊；第二個參數是個回調函數，表示所有依賴的模塊都載入成功後執行的函數。

require.confg

用來載入配置模塊載入位置，具體如圖：

了解了API後，我們來試試到底怎麼用。

首先，需要下載require.js，並引入到頁面文件中，這裡是官方文檔含下載地址：http://www.requirejs.cn/docs/download.html

然後script引入：

async="true"的意思是非同步載入該文件，但IE不識別，所以加上defer,也是同樣的意思。

然後，新建main.js文件，作為入口文件，載入模塊。

另外，強調一點，require載入模塊不需要加上.js，也不能加上後綴。

然後，再定義demo1和demo2模塊；

demo1:

demo2:

然後在頁面文件中引入main.js：

data-main表示網頁程序的主模塊，src表示主程序的依賴模塊

index.html

main.js

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！