模块化

模块化简介

• 具有相同属性和行为的事物的集合。在前端中，将一些属性比较类似和行为比较类似的内容放在同一个js文件里面，把这个js文件称为模块，为了每个js文件只关注与自身有关的事情，让每个js文件各行其职。
• 模块要有几个特点： 独立、完整、依赖关系
• 在最开始的阶段，Js并没有这些模块机制，各种Js到处飞，也就是你们现在的野生代码，得不到有效妥善的管理。后来前端圈开始制定规范，最耳熟能详的是CommonJs和AMD。

模块化的实现

• 函数
• 对象写法
• 匿名函数、返回对象
• 依赖传入实参

以上缺点依赖关系不好处理，需要按顺序加载，会阻塞页面

CommonJs

• 根CommonJs规范，每一个文件就是一个模块，其内部定义的变量是属于这个模块的，不会对外暴露，也就是说不会污染全局变量。
• 该规范最初是用在服务器端的node的，前端的webpack也是对CommonJS原生支持的。
• CommonJS的核心思想就是通过 require 方法来同步加载所要依赖的其他模块，然后通过 exports 或者
  module.exports 来导出需要暴露的接口

        var module = require('module.js');
        moudule.aa('hi');

        //module.js
        module.esports = {
            aa: function(t) {
                console.log(t);
            }
        }

• 浏览器不兼容CommonJs，原因是浏览器缺少module、exports、require、global四个环境变量。
• CommonJS采用同步加载不同模块文件，适用于服务器端的。因为模块文件都存放在服务器的各个硬盘上，读取加载时间快，适合服务器端，不适应浏览器。

AMD

• CommonJs为服务器端而生，采用的同步加载方式。因此不适用浏览器。因为浏览器需要到服务器加载文件，请求时间远大于本机读取的时间，倘若文件较多，网络迟缓就会导致页面瘫痪，所以浏览器更希望能够时间异步加载的方式。
• AMD规范则是异步加载模块，允许指定回调函数。等模块异步加载完成后即可调用回调函数。
• AMD的核心思想就是通过define来定义一个模块，然后使用require来加载一个模块。

        require("jquery" ,'module'), function($, math) {
            //..
        }

        //module.js
        define(function(){
            //..
        })

使用require.js，提前加载所有依赖，方可使用

CMD

• CMD异步加载，跟AMD的主要区别在于，AMD依赖前置，提前加载依赖。而CMD就近加载，按需加载，seajs和requirejs相似。
• CMD的核心思想就是通过define来定义一个模块，然后使用require来加载一个模块。

        //index.html
        seajs,use('main.js');

        // main.js
        define(function(require,exports,module) {
            var module = require('module1.js');
            console.log(module1)
        })

        //module1.js
        define(function(require,exports,module){
            var arr = [1,3,4]
            exports,module = arr;
        })

ES6