js 模块化的一些理解和es6模块化学习

　　模块化

　　　　1 IIFE

　　　　2 commonjs

        　3 浏览器中js的模块化　

 　　　 4 简单理解模块加载器的原理

　　　  5 es6

　　以前在参加百度前端技术学院作的小题目的时候，本身写模块的时候 都是写成当即调用表达式（IIFE）的模式，好比单个功能的时候当时想到是不会涉及到全局变量的污染，在封装基础的模块(好比里面的表单验证功能) 

        (function(win){
            var obj = {};
            function add() {
                console.log("add");
            }
            obj.add = add;
            win.obj = obj;

        }(window));
        obj.add();

是在当即调用表达中咱们想要的功能 绑定在一个对象上 最后绑定到window上 这样的模式在写功能很少的时候，的确是不错的 可是随着你的功能愈来愈多，就会出现必定的问题

1)window上是否是挂载太多的对象

2)模块内部是否存在相同的变量的名字挂载window上   好比两个模块内部都挂载 window.obj  那么后来加载执行的必定是会覆盖以前的模块的

3)依赖的解决问题 必定在作好依赖的维护  也就是本模块需求的模块必须在以前被加载和执行 想一想在页面中好多js的样子

4)在扩展上也并非很友好 每次都须要将新的功能扩展到内部的对象或者window上 存在变量的污染问题 跟2)有点类似

上面的只是个人一些浅显的理解 对这种IIFE模式实现模块化的一点理解

　　commonjs commonjs是JavaScript模块化的一种规范 它为JavaScript实现模块化定义了一种规范 引用官网上的一句话 JavaScript:not just for browsers any more!

简单理解就是经过commonjs,JavaScript能作的事情更多了

如何写一个最简单的commonjs模块

/*模块引用部分  引用其余的模块
*/

/*模块定义部分  
*/
function add(a,b) {
    return a+b;
}
function multiple(a,b) {
    return a*b;
}
/* 模块导出部分 导出模块的功能
*/  
module.exports.add = add;
module.exports.multiple = multiple; 

commonjs 规范定义实现一个模块分为模块引用 模块定义 模块标识(require()时候使用的标识)  这个是官网上一个简单的例子 这个是例子

　　浏览器中的js模块化 上面的这种方式在node中是彻底没有问题的  可是在浏览器中首先出现的问题就是require module.exports 这些关键字在浏览器中不支持 也就是咱们须要模块加载器帮咱们实现require帮咱们去加载commonjs模块   还有一个点就是浏览器中的环境不一样于服务端  require是同步的  它会等待模块的下载和执行完毕以后在运行下面的代码  服务器端是从本地的磁盘读取对应的模块 这样的加载速度是能够接受的 可是在浏览器中 就涉及到从服务端加载对应的js 这样就会形成页面的锁死  这时候就出现了require.js 和sea.js 

　　简单理解模块加载器的原理  首先经过将加载过的对象进行缓存  在进行多个依赖加载的时候，记录加载的数目 ，每加载一个模块 在回调中减小数目 当全部的依赖加载完毕后执行外层的回调    参考 理解requirejs-实现一个简答的模块加载器

     es6  es6中推出了模块系统  能够参考这篇文章去学习es6的模块化  深刻浅出ES6(十六)：模块  这个系列的文章写得真的不错