CommonJs规范-相关学习记录

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