前端模塊化和RequireJS的用法

模塊化

CommonJS 規範

引用模塊：

require('./module')

定義模塊：

module.exports = {}

例如：Nodejs

AMD規範

引用模塊：

require([module], callback)

定義模塊：

define([module], function(module) {})

例如：requirejs

CMD

引用模塊：

seajs.use(['module'], function(module) {})

定義模塊：

define(function(require, exports, module) {
  var $ = require('jquery.js')
})

例如：seajs

AMD和CMD區別

AMD推崇依賴前置，在定義模塊的時候就要聲明其依賴的模塊

CMD推崇依賴就近，在用到某個模塊的時候再去require

ES6

引用模塊：

import module

定義模塊：

export module

RequireJS的用法

• 實現js文件的異步加載，避免網頁失去響應
• 管理模塊之間的依賴性，便於代碼的編寫和維護

1. 加載RequireJS

避免加載RequireJS造成頁面失去響應：

<script src="js/require.js" defer async="true" ></script>

注： IE不支持async只支持defer

2. 主模塊

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

採用AMD規範定義的require()函數

// main.js

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){

　　// some code here

})

第一個參數是一個數組表示所依賴的模塊，第二個參數是一個回調函數

3. 模塊加載

使用require.config()方法，我們可以對模塊的加載行爲進行自定義。require.config()就寫在主模塊main.js的頭部。參數就是一個對象