RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

隨著網(wǎng)站功能逐漸豐富，網(wǎng)頁中的js也變得越來越復雜和臃腫，原有通過script標簽來導入一個個的js文件這種方式已經(jīng)不能滿足現(xiàn)在互聯(lián)網(wǎng)開發(fā)模式，我們需要團隊協(xié)作、模塊復用、單元測試等等一系列復雜的需求。

requirejs

RequireJS是一個非常小巧的JavaScript模塊載入框架，是AMD規(guī)范最好的實現(xiàn)者之一。RequireJS壓縮后只有14K，輕量。它還同時可以和其他的框架協(xié)同工作。

RequireJS核心功能：

聲明不同js文件之間的依賴
可以按需、并行、延時載入js庫
可以讓我們的代碼以模塊化的方式組織
初看起來并不復雜。

HOW TO

在HTML中，添加這樣的 <script> 標簽：

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

屬性 data-main 是告訴requirejs：你下載完require.js以后，馬上去載入真正的入口文件main.js。它一般用來對requirejs進行配置，并且載入真正的程序模塊。

main.js

在main.js 中通常做兩件事：

1. 配置requirejs 比如項目中用到哪些模塊，文件路徑是什么

2. 載入程序主模塊

/**
 * 真正的入口文件main.js。它一般用來對requirejs進行配置，并且載入真正的程序模塊。
 */

require.config({

    paths: {
        jquery: 'libs/jquery-2.1.4.min',
        jqueryUi: 'libs/jquery-ui.min',
        underscore: 'libs/underscore-min',
        backbone: 'libs/backbone-min',
        bootstarp: 'libs/bootstrap.min',
        fancytree: 'libs/jquery.fancytree-all.min',
        selectize: 'libs/selectize.min',
        mCustomScrollbar: 'libs/jquery.mCustomScrollbar.concat.min',
        text: 'libs/require/text',
        typeahead: 'libs/typeahead.bundle.min',
        bloodhound: 'libs/typeahead.bundle.min',
        bootpag: 'libs/bootpag.min',
        moment: 'libs/moment',
        datatables: 'plugin/datatables/jquery.dataTables',
        jsonview: 'plugin/jsonview/jquery.jsonview',
        bootstrapDialog: 'plugin/bootstrap-dialog/bootstrap-dialog'

    },
    shim: {
        'underscore': {
            exports: '_'
        },
        'jqueryUi': {
            deps: ['jquery']
        },
        'bootstarp': {
            deps: ['jquery', 'jqueryUi']
        },
        'fancytree': {
            deps: ['jquery', 'jqueryUi']
        },
        'common/base': {
            deps: ['underscore']
        },
        'views/conversation-view/': {
            deps: ['jquery']
        },
        'views/app-view/': {
            deps: ['jquery']
        },
        'typeahead': {
            deps: ['jquery', 'bloodhound']
        },
        'datatables': {
            deps: ['jquery']
        },
        'jsonview': {
            deps: ['jquery']
        },
        'bootstrapDialog': {
            deps: ['jquery']
        }

    }
});

這里的 define 是requirejs提供的函數(shù)。requirejs一共提供了兩個全局變量：

requirejs/require: 用來配置requirejs及載入入口模塊。如果其中一個命名被其它庫使用了，我們可以用另一個
define: 定義一個模塊

使用 shim

shim是將依賴中的全局變量暴露給requirejs，當作這個模塊本身的引用。

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

requirejs(['hello'], function(hello) {
  hello();
});

上面代碼 exports: 'hello' 中的 hello ，是我們在 hello.js 中定義的 hello 函數(shù)。當我們使用 function hello() {} 的方式定義一個函數(shù)的時候，它就是全局可用的。如果我們選擇了把它 export 給requirejs，那當我們的代碼依賴于 hello 模塊的時候，就可以拿到這個 hello 函數(shù)的引用了。