前端模块化

前端中有几个需要深入理解的重要知识点，比如语义化，模块化，作用域，原型链，继承和面向对象等问题，今天我们先来整理下前端模块化问题。模块化是为了将实现特定功能的代码文件封装在一起，有了模块可以更方便地使用别人的代码，需要什么功能，加载什么模块。模块开发需要遵循一定的规范不然会乱套。

1. 函数封装：

function setAttribute( name, value){ }

函数封装，将程序中设计的变量，语句进行封装，来执行某尔特定功能，比如说上面这个函数，就是完成给属性赋值的功能，在需要使用这个功能时，就调用该函数即可。

  缺点：污染了全局变量，可能会与其他模块发生命名冲突，且模块成员之间没什么联系。

2. 对象

  var myModule={

                var1 :1;

                var2: 2;

                function fn1(){}

                function fn2(){}

}

在javascript中没有类，但是也有和类具有相似功能的，那就是对象，这样在引用的时候，myModule.fn2(); 这样避免了变量污染，只要保证模块名唯一即可，同时同一模块内也有了关系。但是也有缺陷，外部可以随意修改内部成员，这样会产生安全问题：

 myModule.var1= 100;

3. 立即执行函数

可以通过立即执行函数，来达到隐藏细节的目的

var myModule = (function(){

var var1 = 1;

var var2 = 2;

function fn1(){}

function fn2(){}

return {fn1: fn1,fn2: fn2};})();

这样模块外部就无法修改没有暴露的内部数据、函数

上述做法就是模块化的基础，目前，通行的JavaScript模块规范主要有两种：CommonJS和AMD

立即执行函数：

    function fn(){}();  //这样书写不行，因为function fn(){}部分是一个声明，需要有解析器比如eval()来执行，所以后面的()不会执行

只要把声明变成表达式即可。常见的有用括号括起来：

    (function fn(){})();  //等价于下面的

    var foo=function fn(){};

    foo();