1. 首页
  2. 深入理解JavaScript系列

深入理解JavaScript系列(47)- 对象创建模式(上篇)

介绍

本篇主要是介绍创建对象方面的模式,利用各种技巧可以极大地避免了错误或者可以编写出非常精简的代码。

模式1:命名空间(namespace)

命名空间可以减少全局命名所需的数量,避免命名冲突或过度。一般我们在进行对象层级定义的时候,经常是这样的:


var app = app || {}; app.moduleA \= app.moduleA || {}; app.moduleA.subModule \= app.moduleA.subModule || {}; app.moduleA.subModule.MethodA \= function () { console.log("print A"); }; app.moduleA.subModule.MethodB \= function () { console.log("print B"); };

如果层级很多的话,那就要一直这样继续下去,很是混乱。namespace模式就是为了解决这个问题而存在的,我们看代码:


// 前端进阶题库 - 每天一道面试题 https://www.javascriptc.com/interview-tips/ // 不安全,可能会覆盖已有的MYAPP对象 var MYAPP = {}; // 还好 if (typeof MYAPP === "undefined") { var MYAPP = {}; } // 更简洁的方式 var MYAPP = MYAPP || {}; //定义通用方法 MYAPP.namespace = function (ns\_string) { var parts = ns\_string.split('.'), parent \= MYAPP, i; // 默认如果第一个节点是MYAPP的话,就忽略掉,比如MYAPP.ModuleA if (parts\[0\] === "MYAPP") { parts \= parts.slice(1); } for (i = 0; i < parts.length; i += 1) { // 如果属性不存在,就创建 if (typeof parent\[parts\[i\]\] === "undefined") { parent\[parts\[i\]\] \= {}; } parent \= parent\[parts\[i\]\]; } return parent; };

调用代码,非常简单:


// 通过namespace以后,可以将返回值赋给一个局部变量 var module2 = MYAPP.namespace('MYAPP.modules.module2'); console.log(module2 \=== MYAPP.modules.module2); // true // 跳过MYAPP MYAPP.namespace('modules.module51'); // 非常长的名字 MYAPP.namespace('once.upon.a.time.there.was.this.long.nested.property');

模式2:定义依赖

有时候你的一个模块或者函数可能要引用第三方的一些模块或者工具,这时候最好将这些依赖模块在刚开始的时候就定义好,以便以后可以很方便地替换掉。


var myFunction = function () { // 依赖模块 var event = YAHOO.util.Event, dom \= YAHOO.util.dom; // 其它函数后面的代码里使用局部变量event和dom };

模式3:私有属性和私有方法

JavaScript本书不提供特定的语法来支持私有属性和私有方法,但是我们可以通过闭包来实现,代码如下:


function Gadget() { // 私有对象 var name = 'iPod'; // 公有函数 this.getName = function () { return name; }; } var toy = new Gadget(); // name未定义,是私有的 console.log(toy.name); // undefined // 公有方法访问name console.log(toy.getName()); // "iPod" var myobj; // 通过自执行函数给myobj赋值 (function () { // 自由对象 var name = "my, oh my"; // 实现了公有部分,所以没有var myobj = { // 授权方法 getName: function () { return name; } }; } ());

模式4:Revelation模式

也是关于隐藏私有方法的模式,和《深入理解JavaScript系列(3):全面解析Module模式》里的Module模式有点类似,但是不是return的方式,而是在外部先声明一个变量,然后在内部给变量赋值公有方法。代码如下:


var myarray; (function () { var astr = "\[object Array\]", toString \= Object.prototype.toString; function isArray(a) { return toString.call(a) === astr; } function indexOf(haystack, needle) { var i = 0, max \= haystack.length; for (; i < max; i += 1) { if (haystack\[i\] === needle) { return i; } } return -1; } //通过赋值的方式,将上面所有的细节都隐藏了 myarray = { isArray: isArray, indexOf: indexOf, inArray: indexOf }; } ()); //测试代码 console.log(myarray.isArray(\[1, 2\])); // true console.log(myarray.isArray({ 0: 1 })); // false console.log(myarray.indexOf(\["a", "b", "z"\], "z")); // 2 console.log(myarray.inArray(\["a", "b", "z"\], "z")); // 2 myarray.indexOf \= null; console.log(myarray.inArray(\["a", "b", "z"\], "z")); // 2

模式5:链模式

链模式可以你连续可以调用一个对象的方法,比如obj.add(1).remove(2).delete(4).add(2)这样的形式,其实现思路非常简单,就是将this原样返回。代码如下:


var obj = { value: 1, increment: function () { this.value += 1; return this; }, add: function (v) { this.value += v; return this; }, shout: function () { console.log(this.value); } }; // 链方法调用 obj.increment().add(3).shout(); // 5 // 也可以单独一个一个调用 obj.increment(); obj.add(3); obj.shout();

总结

本篇是对象创建模式的上篇,敬请期待明天的下篇。

参考:http://shichuan.github.com/javascript-patterns/#object-creation-patterns

同步与推荐

本文已同步至目录索引:深入理解JavaScript系列

深入理解JavaScript系列文章,包括了原创,翻译,转载等各类型的文章,如果对你有用,请推荐支持一把,给大叔写作的动力。

作者: 汤姆大叔
链接:http://www.cnblogs.com/TomXu/archive/2012/04/25/2439527.html

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:深入理解JavaScript系列(47)- 对象创建模式(上篇)

链接:https://www.javascriptc.com/3657.html

« 【JS 小书】第 4 章:JS 引擎底层的工作原理
送你27 个提升开发人员幸福指数的 VsCode 插件»
Flutter 中文教程资源

相关推荐

QR code