柠檬铺

立即咨询

柠檬铺

深入理解JavaScript系列（48）：对象创建模式（下

介绍

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

模式6：函数语法糖

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

双击代码全选

1

2

3

4

5

6

if (typeof Function.prototype.method !== "function") {

    Function.prototype.method = function (name, implementation) {

        this.prototype[name] = implementation;

        return this;

    };

}

 

扩展对象的时候，可以这么用：

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

var Person = function (name) {

    this.name = name;

}

.method('getName',

            function () {

                return this.name;

            })

.method('setName', function (name) {

    this.name = name;

    return this;

});

 

这样就给Person函数添加了getName和setName这2个方法，接下来我们来验证一下结果：

双击代码全选

1

2

3

var a = new Person('Adam');

console.log(a.getName()); // 'Adam'

console.log(a.setName('Eve').getName()); // 'Eve'

 

模式7：对象常量

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

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

var constant = (function () {

    var constants = {},

        ownProp = Object.prototype.hasOwnProperty,

    // 只允许设置这三种类型的值

        allowed = {

            string: 1,

            number: 1,

            boolean: 1

        },

        prefix = (Math.random() + "_").slice(2);

    

    return {

        // 设置名称为name的属性

        set: function (name, value) {

            if (this.isDefined(name)) {

                return false;

            }

            if (!ownProp.call(allowed, typeof value)) {

                return false;

            }

            constants[prefix + name] = value;

            return true;

        },

        // 判断是否存在名称为name的属性

        isDefined: function (name) {

            return ownProp.call(constants, prefix + name);

        },

        // 获取名称为name的属性

        get: function (name) {

            if (this.isDefined(name)) {

                return constants[prefix + name];

            }

            return null;

        }

    };

} ());

 

验证代码如下：

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

// 检查是否存在

console.log(constant.isDefined("maxwidth")); // false

    

// 定义

console.log(constant.set("maxwidth", 480)); // true

    

// 重新检测

console.log(constant.isDefined("maxwidth")); // true

    

// 尝试重新定义

console.log(constant.set("maxwidth", 320)); // false

    

// 判断原先的定义是否还存在

console.log(constant.get("maxwidth")); // 480

 

模式8：沙盒模式

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

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

function Sandbox() {

    // 将参数转为数组

    var args = Array.prototype.slice.call(arguments),

    // 最后一个参数为callback

        callback = args.pop(),

        // 除最后一个参数外，其它均为要选择的模块

        modules = (args[0] && typeof args[0] === "string") ? args : args[0],

        i;

    

    // 强制使用new操作符

    if (!(this instanceof Sandbox)) {

        return new Sandbox(modules, callback);

    }

    

    // 添加属性

    this.a = 1;

    this.b = 2;

    

    // 向this对象上需想添加模块

    // 如果没有模块或传入的参数为 "*" ，则以为着传入所有模块

    if (!modules || modules == '*') {

        modules = [];

        for (i in Sandbox.modules) {

            if (Sandbox.modules.hasOwnProperty(i)) {

                modules.push(i);

            }

        }

    }

    

    // 初始化需要的模块

    for (i = 0; i < modules.length; i += 1) {

        Sandbox.modules[modules[i]](this);

    }

    

    // 调用 callback

    callback(this);

}

    

// 默认添加原型对象

Sandbox.prototype = {

    name: "My Application",

    version: "1.0",

    getName: function () {

        return this.name;

    }

};

 

然后我们再定义默认的初始模块：

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

Sandbox.modules = {};

    

Sandbox.modules.dom = function (box) {

    box.getElement = function () {

    };

    box.getStyle = function () {

    };

    box.foo = "bar";

};

    

Sandbox.modules.event = function (box) {

    // access to the Sandbox prototype if needed:

    // box.constructor.prototype.m = "mmm";

    box.attachEvent = function () {

    };

    box.detachEvent = function () {

    };

};

    

Sandbox.modules.ajax = function (box) {

    box.makeRequest = function () {

    };

    box.getResponse = function () {

    };

};

 

调用方式如下：

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

// 调用方式

Sandbox(['ajax', 'event'], function (box) {

    console.log(typeof (box.foo));

    // 没有选择dom，所以box.foo不存在

});

    

Sandbox('ajax', 'dom', function (box) {

    console.log(typeof (box.attachEvent));

    // 没有选择event,所以event里定义的attachEvent也不存在

});

    

Sandbox('*', function (box) {

    console.log(box); // 上面定义的所有方法都可访问

});

 

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

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Grow your business fast with

Suku

Subscribe Now