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

 更新时间:2015年03月04日 10:43:07   投稿:junjie  
这篇文章主要介绍了深入理解JavaScript系列(47):对象创建模式(上篇),本文讲解了命名空间、定义依赖、私有属性和私有方法 、Revelation模式、链模式等内容,需要的朋友可以参考下

介绍

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

模式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模式就是为了解决这个问题而存在的,我们看代码:
复制代码 代码如下:

// 不安全,可能会覆盖已有的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();


总结

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

相关文章

  • 浅析用prototype定义自己的方法

    浅析用prototype定义自己的方法

    下面小编将通过实例由浅入深讲解 prototype 的具体使用方法。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • 深入理解JavaScript系列(48):对象创建模式(下篇)

    深入理解JavaScript系列(48):对象创建模式(下篇)

    这篇文章主要介绍了深入理解JavaScript系列(48):对象创建模式(下篇),本篇主要是介绍创建对象方面的模式的下篇,利用各种技巧可以极大地避免了错误或者可以编写出非常精简的代码,需要的朋友可以参考下
    2015-03-03
  • js的匿名函数使用介绍

    js的匿名函数使用介绍

    匿名函数的作用是创建一块封闭区域,外面不能够访问里面的变量和方法,下面为大家介绍下什么是匿名函数及其如何使用
    2013-12-12
  • javascript三元运算符用法实例

    javascript三元运算符用法实例

    这篇文章主要介绍了javascript三元运算符用法实例,本文讲解了三元运算符用法实例和编程语言中的三元运算符介绍,需要的朋友可以参考下
    2015-04-04
  • javascript中FOREACH数组方法使用示例

    javascript中FOREACH数组方法使用示例

    本文给大家介绍的是Array.prototype.forEach()的使用方法示例,希望对大家学习javascript能够有所帮助。
    2016-03-03
  • 举例讲解JavaScript中关于对象操作的相关知识

    举例讲解JavaScript中关于对象操作的相关知识

    这篇文章主要介绍了举例讲解javaScript中关于对象操作的相关知识,"一切皆对象"是学习JS过程中经常可以见到的一句话,本文便用一些小例子来讲解JS中的对象操作,需要的朋友可以参考下
    2015-11-11
  • JavaScript之编码规范 推荐

    JavaScript之编码规范 推荐

    JavaScript是一种语法灵活,简单易懂的脚本语言。正因为灵活,因此很多人在编写代码时,显得很随意,这就导致后期的修改、扩展和维护变得异常困难。遵循统一的编码规范,不仅对C++和Java这种编译型语言很重要,对JavaScript脚本语言也同样如此
    2012-05-05
  • 深入分析原生JavaScript事件

    深入分析原生JavaScript事件

    这篇文章主要介绍了原生JavaScript事件,包括DOM0事件模型、DOM2事件模型等的相关知识,需要的朋友可以参考下
    2014-12-12
  • 详解javascript中的变量提升和函数提升

    详解javascript中的变量提升和函数提升

    这篇文章主要介绍了详解javascript中的变量提升和函数提升的相关资料,需要的朋友可以参考下
    2018-05-05
  • JavaScript 对话框和状态栏使用说明

    JavaScript 对话框和状态栏使用说明

    平时工作中,无论是调试 javascript 代码还是进行页面提示,我们都会经常使用 javascript 的对话框。除了创建明确不使用状态栏的浏览器窗口,每个浏览器窗口的底部都有一个状态栏,用来向用户显示一些特定的消息。
    2009-10-10

最新评论