夏日博客

A-A+

深入理解JavaScript 对象创建模式详解

2016年01月13日 前端设计 暂无评论 阅读 5 views 次

文章来介绍的简单的介绍一下关于深入理解JavaScript 对象创建模式,有需要了解的朋友可以参考一下,这是对象创建模式的下篇，两篇一起总共9种模式,是我们在日常JavaScript编程中经常使用的对象创建模式,不同的场景起到了不同的作用,希望大家根据各自的需求选择适用的模式.

介绍:

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

模式6:函数语法糖

函数语法糖是为一个对象快速添加方法(函数)的扩展,这个主要是利用prototype的特性,代码比较简单,我们先来看一下实现代码:

  1. if (typeof Function.prototype.method !== "function") {  
  2.     Function.prototype.method = function (name, implementation) {  
  3.         this.prototype[name] = implementation;  
  4.         return this;  
  5.     };  
  6. }  

扩展对象的时候,可以这么用,代码如下:

  1. var Person = function (name) {  
  2.     this.name = name;  
  3. }  
  4. .method('getName',  
  5.             function () {  
  6.                 return this.name;  
  7.             })  
  8. .method('setName', function (name) {  
  9.     this.name = name;  
  10.     return this;  
  11. });  

这样就给Person函数添加了getName和setName这2个方法,接下来我们来验证一下结果,代码如下:

  1. var a = new Person('Adam');  
  2. console.log(a.getName()); // 'Adam'  
  3. console.log(a.setName('Eve').getName()); // 'Eve'  

模式7:对象常量

对象常量是在一个对象提供set,get,ifDefined各种方法的体现，而且对于set的方法只会保留最先设置的对象，后期再设置都是无效的，已达到别人无法重载的目的。实现代码如下：

  1. var constant = (function () {  
  2.     var constants = {},  
  3.         ownProp = Object.prototype.hasOwnProperty,  
  4.     // 只允许设置这三种类型的值  
  5.         allowed = {  
  6.             string: 1,  
  7.             number: 1,  
  8.             boolean: 1  
  9.         },  
  10.         prefix = (Math.random() + "_").slice(2);  
  11.     return {  
  12.         // 设置名称为name的属性  
  13.         set: function (name, value) {  
  14.             if (this.isDefined(name)) {  
  15.                 return false;  
  16.             }  
  17.             if (!ownProp.call(allowed, typeof value)) {  
  18.                 return false;  
  19.             }  
  20.             constants[prefix + name] = value;  
  21.             return true;  
  22.         },  
  23.         // 判断是否存在名称为name的属性  
  24.         isDefined: function (name) {  
  25.             return ownProp.call(constants, prefix + name);  
  26.         },  
  27.         // 获取名称为name的属性  
  28.         get: function (name) {  
  29.             if (this.isDefined(name)) {  
  30.                 return constants[prefix + name];  
  31.             }  
  32.             return null;  
  33.         }  
  34.     };  
  35. } ());  

验证代码如下:

  1. // 检查是否存在  
  2. console.log(constant.isDefined("maxwidth")); // false  
  3. // 定义  
  4. console.log(constant.set("maxwidth", 480)); // true  
  5. // 重新检测  
  6. console.log(constant.isDefined("maxwidth")); // true  
  7. // 尝试重新定义  
  8. console.log(constant.set("maxwidth", 320)); // false  
  9. // 判断原先的定义是否还存在  
  10. console.log(constant.get("maxwidth")); // 480  

模式8:沙盒模式

沙盒(Sandbox)模式即时为一个或多个模块提供单独的上下文环境,而不会影响其他模块的上下文环境,比如有个Sandbox里有3个方法event,dom,ajax,在调用其中2个组成一个环境的话,和调用三个组成的环境完全没有干扰,Sandbox实现代码如下:

  1. function Sandbox() {  
  2.     // 将参数转为数组  
  3.     var args = Array.prototype.slice.call(arguments),  
  4.     // 最后一个参数为callback  
  5.         callback = args.pop(),  
  6.         // 除最后一个参数外，其它均为要选择的模块  
  7.         modules = (args[0] && typeof args[0] === "string") ? args : args[0],  
  8.         i;  
  9.     // 强制使用new操作符  
  10.     if (!(this instanceof Sandbox)) {  
  11.         return new Sandbox(modules, callback);  
  12.     }  
  13.     // 添加属性  
  14.     this.a = 1;  
  15.     this.b = 2;  
  16.     // 向this对象上需想添加模块  
  17.     // 如果没有模块或传入的参数为 "*" ，则以为着传入所有模块  
  18.     if (!modules || modules == '*') {  
  19.         modules = [];  
  20.         for (i in Sandbox.modules) {  
  21.             if (Sandbox.modules.hasOwnProperty(i)) {  
  22.                 modules.push(i);  
  23.             }  
  24.         }  
  25.     }  
  26.     // 初始化需要的模块  
  27.     for (i = 0; i < modules.length; i += 1) {  
  28.         Sandbox.modules[modules[i]](this);  
  29.     }  
  30.     // 调用 callback  
  31.     callback(this);  
  32. }  
  33. // 默认添加原型对象  
  34. Sandbox.prototype = {  
  35.     name: "My Application",  
  36.     version: "1.0",  
  37.     getName: function () {  
  38.         return this.name;  
  39.     }  
  40. };  

然后我们再定义默认的初始模块,代码如下:

  1. Sandbox.modules = {};  
  2. Sandbox.modules.dom = function (box) {  
  3.     box.getElement = function () {  
  4.     };  
  5.     box.getStyle = function () {  
  6.     };  
  7.     box.foo = "bar";  
  8. };  
  9. Sandbox.modules.event = function (box) {  
  10.     // access to the Sandbox prototype if needed:  
  11.     // box.constructor.prototype.m = "mmm";  
  12.     box.attachEvent = function () {  
  13.     };  
  14.     box.detachEvent = function () {  
  15.     };  
  16. };  
  17. Sandbox.modules.ajax = function (box) {  
  18.     box.makeRequest = function () {  
  19.     };  
  20.     box.getResponse = function () {  
  21.     };  
  22. };  

调用方式如下:

  1. // 调用方式  
  2. Sandbox(['ajax', 'event'], function (box) {  
  3.     console.log(typeof (box.foo));  
  4.     // 没有选择dom，所以box.foo不存在  
  5. });  
  6. Sandbox('ajax', 'dom', function (box) {  
  7.     console.log(typeof (box.attachEvent));  
  8.     // 没有选择event,所以event里定义的attachEvent也不存在  
  9. });  
  10. Sandbox('*', function (box) {  
  11.     console.log(box); // 上面定义的所有方法都可访问  
  12. });  

通过三个不同的调用方式，我们可以看到，三种方式的上下文环境都是不同的，第一种里没有foo; 而第二种则没有attachEvent，因为只加载了ajax和dom，而没有加载event; 第三种则加载了全部。

模式9：静态成员

静态成员（Static Members）只是一个函数或对象提供的静态属性，可分为私有的和公有的，就像C#或Java里的public static和private static一样。

我们先来看一下公有成员,公有成员非常简单,我们平时声明的方法,函数都是公有的,比如如下代码:

  1. // 构造函数  
  2. var Gadget = function () {  
  3. };  
  4. // 公有静态方法  
  5. Gadget.isShiny = function () {  
  6.     return "you bet";  
  7. };  
  8. // 原型上添加的正常方法  
  9. Gadget.prototype.setPrice = function (price) {  
  10.     this.price = price;  
  11. };  
  12. // 调用静态方法  
  13. console.log(Gadget.isShiny()); // "you bet"  
  14. // 创建实例，然后调用方法  
  15. var iphone = new Gadget();  
  16. iphone.setPrice(500);  
  17. console.log(typeof Gadget.setPrice); // "undefined"  
  18. console.log(typeof iphone.isShiny); // "undefined"  
  19. Gadget.prototype.isShiny = Gadget.isShiny;  
  20. console.log(iphone.isShiny()); // "you bet"  

而私有静态成员，我们可以利用其闭包特性去实现，以下是两种实现方式。

第一种实现方式,代码如下:

  1. var Gadget = (function () {  
  2.     // 静态变量/属性  
  3.     var counter = 0;  
  4.     // 闭包返回构造函数的新实现  
  5.     return function () {  
  6.         console.log(counter += 1);  
  7.     };  
  8. } ()); // 立即执行  
  9. var g1 = new Gadget(); // logs 1  
  10. var g2 = new Gadget(); // logs 2  
  11. var g3 = new Gadget(); // logs 3  

可以看出，虽然每次都是new的对象，但数字依然是递增的，达到了静态成员的目的。

第二种方式,代码如下:

  1. var Gadget = (function () {  
  2.     // 静态变量/属性  
  3.     var counter = 0,  
  4.         NewGadget;  
  5.     //新构造函数实现  
  6.     NewGadget = function () {  
  7.         counter += 1;  
  8.    };  
  9.     // 授权可以访问的方法  
  10.     NewGadget.prototype.getLastId = function () {  
  11.         return counter;  
  12.     };  
  13.     // 覆盖构造函数  
  14.     return NewGadget;  
  15. } ()); // 立即执行  
  16. var iphone = new Gadget();  
  17. iphone.getLastId(); // 1  
  18. var ipod = new Gadget();  
  19. ipod.getLastId(); // 2  
  20. var ipad = new Gadget();  
  21. ipad.getLastId(); // 3  

数字也是递增了，这是利用其内部授权方法的闭包特性实现的。

总结:在javascript中很多种模式，我上面写了9种模式，这些对于我们日常编程就己经差不多了，九种模式在不同的场景起不同的作用了。

标签：

给我留言