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;
});
}