摘要：模塊化工具學習文檔作為一個開發(fā)者，原來寫代碼都是流水賬式的，一直想寫出模塊化的，但是前端工具多如牛毛，確都是針對于的打包工具。之中導入對應模塊即可。如果設為，則禁用等待超時。

作為一個Java開發(fā)者，原來寫js代碼都是流水賬式的，一直想寫出模塊化的js，但是前端工具多如牛毛，確都是針對于nodejs的打包工具。但是我在實際的開發(fā)過程中，并沒有使用到太多的js庫，一般只使用到boostrap、jquery和其相關的插件，并不想引入nodejs和各種前端插件來增加項目的復雜度。requirejs完全符合我的要求，還可以配合maven實現(xiàn)自動打包和壓縮代碼。下面我們來簡單介紹一下requirejs,實現(xiàn)在開發(fā)階段，不打包，不壓縮，模塊化開發(fā);部署階段,自動打包、壓縮。

requirejs是JS模塊化開發(fā)的框架，它遵循AMD(Asynchronous Module Definition)規(guī)范，實現(xiàn)js腳本的異步加載，不阻塞頁面的渲染和其后的腳本的執(zhí)行。使用requirejs可以簡化js的依賴，我們無需在html文件中使用

使用本地文件

如果需要使用其他的js，只需在require。config.js之中導入對應模塊即可。

在模塊中引入其他模塊的語法為：

    require(["jquery"], function($) {
      //回調函數(shù)
    });

在回調函數(shù)中我們就可以使用jquery中的$符號了。
當然我們只會引用其他的模塊是肯定不行的，我們還需要定義符合AMD規(guī)范的模塊。

自定義模塊的語法為：

    define(["jquery"], function($) {
        
    });

define({
    username: "yoojoo",
    email： "yookoo@163.com",
    gender: "男"
})

這個模塊是一個依賴于jquery的匿名模塊，在requirejs中定義匿名模塊也是模塊定義的最佳實踐，他將以對應的文件名作為模塊的模塊名。

    requirejs.config({
      baseUrl: "/public/js",
      paths: {
        hello: "hello"
      },
      shims: {
        hello: { exports: "hello" }
      }
    });

baseUrl用于配置js文件的根目錄

 baseUrl: "/public/js",

paths用于配置js模塊的模塊名和文件位置

    paths: {
        "jquery": "./lib/jquery.min"
    }
    

上面表示jquery的js文件位置為public/js/lib/jquery.min.js

shims、exports、deps配置

shim：｛
    "modernizr": {         //不支持AMD的模塊
        depts:["jquery"]， //依賴的模塊
        exports： "Modernizr",//全局變量作為模塊對象
        init : function($){
            return $; //初始化函數(shù)，返回的對象代替exports作為模塊對象
        }            
    },
    "bootstrap": ["jquery"] //只配置依賴可以省略
｝

項目開發(fā)初期使用jquery1.12.3，后期以為需要支持移動開發(fā)，升級到jquery2.2.3。但是又擔心之前依賴jquery1.12.3的代碼升級到2.2.3后可能會有問題，就保守的讓這部分代碼繼續(xù)使用1.12.3版本

map: {
    "app/api":{
        "jquery": "./lib/jquery"
    },
    "app/api2":{
        "jquery": "./lib/jquery2"
    }
}

當app/api模塊里加載jquery模塊時，將加載jquery.js
當app/api2模塊里加載jquery模塊時，將加載jquery2.js

下載js等待的時間，默認7秒。如果設為0，則禁用等待超時。

下載文件時，在url后面增加額外的query參數(shù)

e.g. urlArgs: “_=" + (new Date()).getTime()

是json的一種使用模式，可以跨域獲取數(shù)據(jù)，如json
同源策略：www.baidu.com通過ajax不能獲取www.qq.com的數(shù)據(jù)

//www.qq.com中

//在www.baidu.com/user下
onload({
    username: "yoojoo",
    email： "yookoo@163.com",
    gender: "男"
})

這樣通過