[JavaScript] requireJS基本使用

requireJS 是一個 AMD 規範的模塊加載器
主要解決的js開發的4個問題
1. 異步加載,防止阻塞頁面渲染
2. 解決js文件之間的依賴關係和保證js的加載順序
3. 按需加載

來實現一個 require 的實例
目錄結構以下：

- 首先咱們如今 require.html 中將 requireJS 引入

<script type=」text/javascript」 defer async=」true」 src=」./require.js」 data-main=」js/init.js」></script>

> - 爲了防止加載的時候阻塞，須要異步進行加載
( async=」true」 defer) 其中 defer 是爲了兼容 ie 不識別 async 的兼容寫法
固然還有簡單粗暴的方法，直接將文件加載放在最後執行 
> - 同時寫入 data-main=’js/init.js’，這會在 requireJS 加載完成的時候將統一目錄下的 indexJS 加載進入
或者能夠使用兩條 script 引入
相似這樣：
```
<script type=」text/javascript」 defer async=」true」 src=」./require.js」></script>
<script type=」text/javascript」 defer async=」true」 src=」js/init.js」></script>
```

- 接下來，打開 init.js

進入文件路徑的配置，其中 paths 是在 lib 下面的文件地址，baseUrl 是修改默認的根目錄，shim 是指定插件引入的依賴文件不然會報錯（bootstrap’JavaScript requires jquery）
同時，因爲 require 默認後面的後綴是.js 因此咱們不能再加後綴，不然會報錯

baseUrl用於定位根目錄,其餘路徑都是相對根目錄,
paths用來執行文件,或者也能夠用來定位新路徑

將jquery和underscore引入,寫個窗口拖動變色
```
//require.config主要是用來對要加載文件的目錄進行自定義
require.config({
    baseUrl: 'js',
    paths: {
        "jquery": "../lib/jquery",
        "undersocre": "../lib/underscore",
    }
})

require(['jquery', 'underscore'], function ($, _) {
    $(window).resize(function () {

        var color = ["rgba(", Math.floor(Math.random() * 255), ",", Math.floor(Math.random() * 255), ",", Math.floor(Math.random() * 255), ")"];

        $(".background").css({
            position: "fixed",
            top: "0px",
            bottom: "0px",
            left: "0px",
            right: "0px",
            background: color.join("")
        });
    })
});
```
...有點閃眼

- 註冊一個模塊
新建js/color.js
```
define(function () {
    var color = ["rgba(", Math.floor(Math.random() * 255), ",", Math.floor(Math.random() * 255), ",", Math.floor(Math.random() * 255), ")"];

    return {
        color: color,
    }
});
```
結構

- paths定義別名
新建js/common/date/date.js , js/common/date/format.js
```
require.config({
    baseUrl: 'js',
    paths: {
        "jquery": "../lib/jquery",
        "underscore": "../lib/underscore",
        "date": "./common/date", //對層級深的起個別名
    }
})

require(['jquery', 'underscore', 'color', 'date/date', 'date/format'], function ($, _, c, d, f) {
    ......

    console.log(d.date);
    console.log(f.format(d.date))
});
```

[avascript模塊化編程（三）：require.js的用法]

http://www.ruanyifeng.com/blog/2012/11/require_js.html