标签：
最近想边学边整一下模块化编程，那么先从为何要使用模块化编程说起吧，可能你刚听说模块化编程，也没有关系，本篇讲的是很基础的东西。
一开始写代码的时候，我们可能只需要一个js文件，去实现一个很小的功能，比如下面这样：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> javascript模块化 </title> <style type="text/css"> </style> </head> <body> <script> function add(a, b) { return a + b; } var ans = []; for(var i = 0; i < 5; i++) { var a = Math.random(); var b = Math.random(); var c = add(a, b); console.log(c); ans.push(c); } </script> </body> </html>
这段代码初始化了5个-2~2之间的数据，并存放在ans数组里。随着代码量的增加，你会渐渐发现把代码写在一个js文件中会很繁琐，于是我们写了好几个js文件，如上代码把函数写在一个script标签内，同时把初始化写在另一个script标签内，如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> javascript模块化 </title> <style type="text/css"> </style> </head> <body> <script> function add(a, b) { return a + b; } </script> <script> var ans = []; for(var i = 0; i < 5; i++) { var a = Math.random(); var b = Math.random(); var c = add(a, b); console.log(c); ans.push(c); } </script> </body> </html>
我们把两个js片段写在了一个html文件中，但是通常我们不会这么做，我们会把它们写在两个js文件中然后在html中引用，这里就不提了。
如上代码有什么问题吗？通常情况下，代码中的全局变量对我们来说是越少越好，但是如上代码暴露了a、b、c以及i四个我们不需要的全局变量，我们需要的只是一个初始化成功的ans数组以供后面的代码使用，也就是说第二个script的片段我们只需要一个ans变量的值，如何？一个很简单的方法便是写一个自动执行函数，因为只有函数里的变量才是局部变量：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> javascript模块化 </title> <style type="text/css"> </style> </head> <body> <script> function add(a, b) { return a + b; } </script> <script> (function() { window.ans = []; for(var i = 0; i < 5; i++) { var a = Math.random(); var b = Math.random(); var c = add(a, b); ans.push(c); } }()); </script> <script> console.log(a); // 报错 console.log(b); // 报错 console.log(c); // 报错 console.log(i); // undefined for(var i = 0; i < 5; i++) console.log(ans[i]) </script> </body> </html>
第二个script标签内的代码便是一种简单的模块化机制，不同的是实际生产中通常将所需要的值直接返回或是暴露在接口下，而非采用全局变量的方式。我们看到用了模块化的写法，世界仿佛干净了许多，我们只需提供需要的变量，而不用去管其他的东西。
简单了解了为何要使用模块化的原因，那么第二篇接着会来学习下模块化的几种经典写法~
标签：
原文地址：http://www.cnblogs.com/zichi/p/4392737.html
