require.js掃盲版

Javascript模塊規範有兩種：commonJs和AMD

commonJs起源於nodeJs。nodeJs標誌着模塊化編程正式誕生。在commonJs中，有一個全局性方法require（），應用於加載模塊

舉例---require()主要用於加載模塊

var math = require('math');
math.add(2,3); // 5

 

問題：愈來愈多的項目採用「模塊化」，可是，對於瀏覽器而言，全部的模塊化的語言都放置在---服務器端，頁面的渲染取決於網速的快慢。若是待加載的數據過多，會致使瀏覽器處於假死的狀態。因此：異步加載應時而生

AMD規範：它採用異步加載模塊，模塊的加載不影響後面的語句的運行，全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完，這個回調函數纔會運行

　 require([module], callback);

   require(['math'], function (math) {

　　　　math.add(2, 3);

　 });

解釋上面的函數：math這個模塊加載完畢，纔會執行math.add這個函數。因此，瀏覽器就不會產生假死的狀態

 

require.js出現的緣由

1）：實現js文件的異步加載，避免網頁失去響應

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

 

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

加載徹底部的require以後，就要加載咱們本身編寫的代碼---main.js

data-main 屬性的做用：指定網頁程序的主模塊，指定的文件會第一個被requireJs加載。主模塊--顧名思義：整個網頁代碼的入口

 

requireJs經常使用的方法和命令

require.config({});  咱們對模塊的加載行爲進行自定義。path:表示指定各個模塊的加載路徑。

   require.config({
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"

　　　　}

　　});

 

2.模塊必須採用特定的define()函數來定義。若是一個模塊不依賴其餘模塊，那麼能夠直接定義在define()函數中，若是還依賴於其餘的模塊，那麼define()函數的第一個參數，必須是數組，指明該模塊的依賴性，因而先加載myLib.js這個文件

    define(['myLib'], function(myLib){
　　　　function foo(){
　　　　　　myLib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});

 

加載非規範的模塊

requireJs能加載非規範的模塊。若是要加載它們，必須先定義它們的特徵。

　require.config({
　　　　shim: {
　　　　　　'underscore':{
　　　　　　　　exports: '_'
　　　　　　},
　　　　　　'backbone': {
　　　　　　　　deps: ['underscore', 'jquery'],
　　　　　　　　exports: 'Backbone'
　　　　　　}
　　　　}
　　});

require.config()接受一個配置對象，這個對象除了有前面說過的paths屬性以外，還有一個shim屬性，專門用來配置不兼容的模塊。具體來講，每一個模塊要定義（1）exports值（輸出的變量名），代表這個模塊外部調用時的名稱；（2）deps數組，代表該模塊的依賴性。