require.js模塊化寫法

    模塊化 模塊就是實現特定功能的一組方法。只要把不同的函數（以及記錄狀態的變量）簡單地放在一起，就算是一個模塊。

下述兩種寫法等價

   exports 對象是當前模塊的導出對象，用於導出模塊公有方法和屬性。別的模塊通過require函數使用當前模塊時得到的就是當前模塊的exports對象

//聲明一個函數
var math = function(a, b) {
    return a+b;
}
/*
 * exports對象是當前模塊的導出對象，用於導出模塊公有方法和屬性。
 * 別的模塊通過require函數使用當前模塊時得到的就是當前模塊的exports對象
 */
exports.math = math;

   require.js  require函數用於在當前模塊中加載和使用別的模塊，傳入一個模塊名，返回一個模塊導出對象。

 (說明：NodeJS與requireJS區別 NodeJS沒有最外層的Wrapper包裝  define(function(require, exports){}))

require.js  官網文檔 http://requirejs.org

require.js解決兩個問題 

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

        ( require.js JavaScript庫文件實現AMD 【requireAsynchronous Module Definition】規范；實現js模塊文件的異步加載 )

（2）管理模塊之間的依賴性，便於代碼的編寫和維護。   具體參考 Javascript模塊化編程（三）：require.js的用法

   requireJS寫法  [實現選項卡切換功能模塊化]

data-main屬性的作用是，指定網頁程序的主模塊。在上例中，就是js目錄下面的main.js，這個文件會第一個被require.js加載。

由於require.js默認的文件后綴名是js，所以可以把main.js簡寫成main.

其中在main.js中，require.config({}) 配置參數說明

baseUrl配置模塊根目錄，baseUrl可以是絕對路徑也可以是相對路徑

在paths參數中，我們設置了模塊名稱(可以隨意指定)和js文件路徑的映射

shim參數中，指定了模塊名和它依賴的數組（Bootstrap's JavaScript requires jQuery）

選項卡切換功能模塊化寫法如下

選項卡功能模塊化寫法源代碼下載 【請點擊】

作者：Avenstar

出處：http://www.cnblogs.com/zjf-1992/p/6403111.html

關於作者：專注於前端開發

本文版權歸作者所有,轉載請標明原文鏈接

【資料參考】

  https://cnodejs.org/getstart

  http://www.tuicool.com/articles/vMZBnyr

  http://www.ruanyifeng.com/blog/2012/10/javascript_module.html

  http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html

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