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

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

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

使用本地文件

如果需要使用其他的js，只需在require。config.js之中導(dǎo)入對應(yīng)模塊即可。

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

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

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

自定義模塊的語法為：

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

define({
    username: "yoojoo",
    email： "[email protected]",
    gender: "男"
})

這個(gè)模塊是一個(gè)依賴于jquery的匿名模塊，在requirejs中定義匿名模塊也是模塊定義的最佳實(shí)踐，他將以對應(yīng)的文件名作為模塊的模塊名。

    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"] //只配置依賴可以省略
｝

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

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

當(dāng)app/api模塊里加載jquery模塊時(shí)，將加載jquery.js
當(dāng)app/api2模塊里加載jquery模塊時(shí)，將加載jquery2.js

下載js等待的時(shí)間，默認(rèn)7秒。如果設(shè)為0，則禁用等待超時(shí)。

下載文件時(shí)，在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： "[email protected]",
    gender: "男"
})

這樣通過