1、CommonJs模塊規範：每一個文件就是一個模塊，每一個模塊都有自己的作用域，在一個文件裏面定義的變量、函數、類都是私有的，對於其他模塊不可見。如果想對其他模塊可見，必須定義爲global對象屬性。當然這種最好不用，不容易維護。
CommonJs模塊規範規定，每個模塊都是一個module，module對象代表當前變量，是一個對象{ }，它的屬性就是對外的接口。加載模塊其實是加載對象的屬性。
require用於加載模塊。如：
var exampleModule=require（../example.js）;
console.log(exampleModule.x);//x是模塊中的屬性或者方法
CommonJs模塊的特點：1、所有的代碼都運行在模塊的作用域內，不會污染全局變量。2、模塊可以多次加載，但是隻在第一次加載時運行一次，後面再加載直接讀取緩存，如果要重新加載，必須清楚緩存。3、模塊加載順序按照在代碼中出現的順序。
2、AMD與CommonJs規範的區別
commonjs加載模塊是同步的，只有加載完才能執行後面的操作，而AMD規範是非同步加載模塊，可以指定回調函數，對於Nodejs主要用於服務器編程，文件都是存在本地的，加載非常快，所以不用考慮非同步加載方式，所以CommonJs規範比較適用，但是對於瀏覽器環境，要從服務器端加載文件，這時就必須採用非同步模式加載文件，因此，一般採用AMD規範加載文件。AMD規範適用define方法定義模塊。同時AMD模塊允許兼容CommonJs規範。只是define方法定義不同。
3、nodejs使用CommonJs規範 ，requireJs使用AMD規範。
4、requireJs加載不符合AMD規範的js文件,通過shim來加載。跟我們直接在HTML中通過<script>加載沒有特別大的區別，js中引入的全局變量依然會存在。shim的兩個配置參數deps和exports。deps配置依賴的js,所以沒有依賴的模塊參數爲空數[]，有依賴的模塊配置的時候要保證加載順序，依賴的模塊要提前加載。exports是模塊的返回值。
shim配置參數中init的作用。init可以指定一個函數主要就是用來避免類庫之間的衝突。由於不符合AMD規範的js文件，會使用全局變量。所以當加載多個模塊的時候存在名字衝突的可能。比如JQuery、UnderScore等框架都會提供一個noConflict()函數來避免名字衝突。
requireJs使用方法，例子如下，main.js文件：
require.config({
baseUrl: "/項目根目錄",
waitSeconds: 5,
urlArgs: "version=項目版本號" ,
paths: { //符合AMD規範的js文件
"jquery": "jquery/1.12.4/jquery.min",
"bootstrap": "bootstrap/js/bootstrap", //bootstrap JS庫
"functions": "common/functions",
"jqueryExt": "extends/jquery-ext",
"pageComponent": "extends/pageComponent",
"pageRender": "extends/page-render",
"datatables.net": "plugins/datatables/1.10.15/media/js/jquery.dataTables",//不可改名，datatables依賴
"dataTables": "plugins/datatables/1.10.15/media/js/dataTables.bootstrap",
"my97Datepicker": "plugins/my97Datepicker/WdatePicker",
"ztree": "plugins/ztree/js/jquery.ztree.all",
"ztreeExt": "extends/ztree-ext",
"validationEngine.language": "plugins/validationEngine/js/jquery.validationEngine-zh_CN",
"validationEngine": "plugins/validationEngine/js/jquery.validationEngine",
"bootbox": "plugins/bootbox/bootbox",
//富文本編輯器
"ueditor.config": "plugins/ueditor1_4_3/ueditor.config",
"ueditor.all": "plugins/ueditor1_4_3/ueditor.all",
"ueditor1_4_3.zh-cn": "plugins/ueditor1_4_3/lang/zh-cn/zh-cn",
"richText": "extends/richText",
"echarts": "plugins/echarts/3.7.2/echarts.min",
//滾動條插件
"mousewheel": "plugins/mCustomScrollbar/js/jquery.mousewheel",
"scrollbar": "plugins/mCustomScrollbar/js/jquery.mCustomScrollbar",
//Jquery 框架
"jquery.ui.widget": "plugins/fileupload/js/vendor/jquery.ui.widget",
"jquery.iframe-transport": "plugins/fileupload/js/jquery.iframe-transport",
"jquery.fileupload": "plugins/fileupload/js/jquery.fileupload",
"fileuploadExt": "extends/fileupload-ext",
//jquery-ui-1.12.1.custom(模塊拖拉)
"jqueryUI": "plugins/jqueryui/1.12.1.custom/jquery-ui.min",
//選擇提示的下拉框
"magicsuggest": "plugins/magicsuggest/js/magicsuggest-1.2.2",
"bootSelect": "plugins/bootstrapSelect/js/bootstrap-select",
"imgareaselect": "plugins/imgareaselect/scripts/jquery.imgareaselect.min",
"mainJs": "module/main",
"jqueryPage": "extends/jquery.z-pager.all",
"pageInit": "module/pageInit"
},
shim: {//加載不符合AMD規範的js文件
"bootstrap": {
deps: ['jquery']//依賴的js 文件
},
"functions": {
deps: ['jquery']
},
"validationEngine.language": {
deps: ['jquery']
}
<script type="text/javascript"
src="../require.min.js"
data-main="./main" type="text/javascript"></script>
加載完執行方法：
if (typeof JQuery !== "undefined" {
onload(JQuery) ;
} else if (typeof require === "function") {
require(["JQuery ","a1", "swiper"], onload);
}
有時候傻傻分不清，requireJs是JS模塊化工具，JQuery是一種前端框架庫。還有一種規範是CMD（通用模塊定義），典型應用是淘寶的seajs。requireJs是加載完立即執行，而seaJS是進入主函數需要執行的時候再執行。
定義js爲AMD規範：
/*===========================
Swiper AMD Export
===========================*/
if (typeof(module) !== 'undefined')
{
module.exports = window.Swiper;
}
else if (typeof define === 'function' && define.amd) {
define([], function () {
'use strict';
return window.Swiper;
});
}
