对象,类,模块的概念可以让系统更清晰,亦能增强代码的重用性。目前 JavaScript 规范本身并不支持类或模块,正在制定中的 ECMAScript 6th Edition 将会纳入类,模块的概念,不过不知会是何年马月的事,毕竟这不能像 JDK 升级那么干脆。
还有种办法来写模块化的 JavaScript 就是使用微软的 TypeScript 或是 Google 的 Dart,它们是面向对象的编程语言,能直接编译成兼容的 JavaScript 代码,有条件的可以去尝试。
回到现实来,就现有的 JavaScript 规范怎么去模块化。众所周知,JavaScript 中函数是第一等公民,所以我们早先是这样使用函数来声明对象的:
1. 原始写法(比直接调用函数显得高级些):
| 1 2 3 4 5 6 7 8 9 10 | function Module(){     this.count = 10;     this.foo = function(x){         return x+1;     } } var m1 = new Module(); console.log(m1.count); console.log(m1.foo(3)); | 
2. 简单写法,借助 JSON 就无需写成 new Object({}) 的形式:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var module1 = {     _count : 10,     m1 : function() {         console.info("do something");     },     m2 : function() {         // ...     } }; module1.m1(); console.log(module1._count); | 
这不能很好的保护好内部成员,象这里你直接访问了 _count 属性。
3. 立即执行函数(Immediately-Invoked Function Expression, IIFE):
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | var module1 = (function() {     var _count = 0;     var _m1 = function() {         // ...     };     var _m2 = function() {         // ...     };     return {         m1 : _m1,         m2 : _m2     }; })(); console.log(module1.m1); | 
形式 (function(){}(); 就是声明函数并立即执行,你只能访问到 return 语句把暴露的有限的成员。
4. 扩展模式(Augmentation)
| 1 2 3 4 5 6 7 8 | var module2 = (function(mod) {     mod.m3 = function() {         //...     };     return mod; })(module1); | 
其实就是在前一种模式的基础上传入一个参数,却很有意义,例如上面完成了 module2 对 module1 的继承,module2 不仅拥有 module1 所有的属性和方法,还增加了一个 m3 方法。
同时扩展模式还有其他的用途,例如引入其他的 JavaScript 函数库,像 jQuery 等。
下面叫做宽松的扩展模式(Loose augmentation) 是个更保险的做法。比如在浏览器环境下,可能 module1 还未初始化好会导致传入一个空对象,所以加个判断
| 1 2 3 4 5 | var module1 = ( function (mod){      //...     return mod; })(window.module1 || {}); | 
再比如引入全局对象,模块中需使用到 jQuery 和 YUI 库
| 1 2 3 4 5 | var module1 = (function ($, YAHOO) {     //$("div") ... })(jQuery, YAHOO); | 
本文主要参考自:Javascript模块化编程(一):模块的写法
我们可以多读读那些著名的 JavaScript 库的源码,从中取经。像 jQuery 的模式就是
| 1 2 3 4 | (function( window, undefined ) {     //......     ow.jQuery = window.$ = jQuery; })( window ); | 
上面这个函数立即执行,并把 jQuery 赋值为 window 的 $ 变量,从而让你在任何时候可以使用 $。
现在似乎不太怎么用 prototype 了,原型链感觉有点深奥,它与传统的面象对象编程中继承的概念有些差异。
另参考:1. JavaScript 模块化编程 - Module Pattern
                2. JavaScript Module Pattern: In-Depth
本文链接 https://yanbin.blog/javascript-object-declaration/, 来自 隔叶黄莺 Yanbin Blog
[版权声明]  本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。
 本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。
[…] JavaScript 对象声明,可以作为是 JavaScript […]