Javascript模块化编程系列一: 模块化的驱动

Javascript 函数编程

初涉Javascript ,会以为Javascript 是面向过程的编程语言， 和C类似，使用函数来达成效果。

Javascript 对象编程

Javascript 本身是没有类的概念，但是确确实实是面向对象的编程语言。

更多相关请参见：

JavaScript实现类与继承

原型(prototype)可以让你直接给一个变量对象添加属性或是函数。

你也可以用以下方式来定义一个对象:

 更多相关，请参见：

JavaScript 对象和字串之间的转换

模块化需求

不管是使用以上那种方式编程，js代码编写或导入的方式都是相同的。
或是写在 html 的标记块内，或是独立成js 文件，再导入到页面中。
当页面代码很多的时候，有可能还会拆分成多个js文件来导入。
如此，实际的开发中， 就有可能会遇到一些困扰：
困扰1.  变量值被意外篡改
使用函数化的方式的状况：  有可能我们会定义一些js全局变量， 这个全局变量会就被所有的function 用到， 如果这些function 本身又使用了同名的变量。我们知道，js 的变量无须定义就可以使用，最后，那个全局变量的值是什么，就真的很难知道和控制了。
使用对象的方式的状况： 对象内定义的属性和方法对外部来说都是可以获取和改变的， 这个对象也就没有私有变量之说了。而且，如果不同的js 中定义了同名的对象，就会出现覆盖的状况。对于开发和调试的困扰比较大。
困扰2. js 导入附带的问题
拆分成多个js导入，可能这些js直接有先后和依赖关系，顺序不对，有可能导致问题。
困扰3. 导入的文件量较大，页面载入较慢
现在的web开发，伴随着Ajax技术的盛行， 同一个页面需要展现的功能较多，很多时候都是局部的替换，更新，隐藏/展现功能。如此，单个页面的需要导入的js文件的量势必非常大。而这些文件是从服务端传输过来的。

模块化解决探求

针对这些问题，如何寻求一种比较好的解决方式？

• 立即执行函数解决困扰1

通过以上方式， module1对象里的属性 _v1 就无法访问了。私有变量得以保护。

关于立即执行函数的介绍可以参考：

JS 立即执行的函数表达式(function)写法

• 使用带入参数方式解决困扰2(也称为放大模式， augmentation)
  

看以上代码， module2 是在module1 之上进行的扩展。
如果module2执行时， module1尚未准备好，就要使用宽放大模式了。

总结

此篇仅为抛砖引玉，介绍模块化动机的探讨和方案的预设， 在目前这个 js library 丰富的时代， 已经有一些很好的library 可以直接使用帮我们达成模块化的效果。
在此篇之后的后续章节会详细介绍