require.js模塊化開發

模塊化開發的緣由：

一、引入的js過多而後在加載的過程當中容易出現假死的狀態，致使頁面會發生白屏

二、變量名的問題 在多人協做開發的時候容易出現變量名的衝突 面向對象

三、引入優先級的問題

模塊化開發分類：

 (1).requireJS:

    參考網址：http://www.requirejs.cn/ 

    RequireJS 是基於 AMD 規範的模塊加載器，它不依賴於任何 JavaScript 新語言特性，能夠直接運行在瀏覽器環境中。這是個比較老、曾經很是流行的模塊加載器，它主要提供的功能是： 

1. 提供了模塊化得支持。
2. 能夠異步、按需加載模塊，這樣就能夠在用到某個 JS 模塊的時候再去加載它，能提升首屏加載速度。

ES6 的 Modules：

1. 提供了模塊化的支持。

可是 es6 Modules 是JavaScript新特性，目前瀏覽器還不支持，不能直接用，就算之後能夠直接用了，若是但願作到按需、異步加載的話也須要配合相應的加載器來加載 JS 文件。

可是若是你用 webpack 的話，直接用 ES6 是最好的選擇。由於：

1. webpack 能夠經過 babel-loader 來轉義 ES6 爲瀏覽器能夠支持的方式。
2. webpack 的 code split 功能能夠實現按需、異步加載。

是徹底覆蓋 RequireJS 的全部功能的。

 (2).seaJs

 (3).commonJS

 (4).module

AMD CMD commonjs

模塊化：將一個大的功能拆分紅若干個小的功能 每個功能都是一個模塊

原則：高內聚 低耦合

require使用

0、require其實就是一個js模塊加載器

一、引入requirejs

二、設置異步加載 defter async="true"

三、data-main：加載一個入口文件

四、遵循requirejs的規範AMD

 

無論AMD規範仍是CMD規範仍是COMMONJS規範
所謂的規範就是若是定義模塊 如何接受模塊

AMD如何定義模塊

define()

 

 

 

/*

 

require：第一個參數是模塊名字  第二個參數是一個回調函數 

回調函數裏面有（n：有多少個模塊就有多少個參數）個參數

 */

//先去引入配置文件  當配置文件引入之後再去加載你須要的一些模塊

require(["config"],function() {

require(["jquery","highcharts","layer","alert"],function($,his,layer,alert) {

alert.init();

console.log($,layer,alert)

})

})

步驟

一、引入require

二、引入入口文件

三、配置config文件

四、將config文件在appjs文件內進行引入  而後在去加載其餘模塊

五、書寫本身的模塊 必須遵循AMD規範 用define定義  定義完畢之後將當前函數return出去

六、配置當前模塊的路徑

七、在app.js中引入改模塊 

八、調用該方法

 */