JavaScript強化教程 —— 對象創建模式

本文爲 H5EDU 機構官方 HTML5培訓 教程,主要介紹:JavaScript強化教程 —— 對象創建模式
 

介紹

本篇主要是介紹創建對象方面的模式的下篇,利用各種技巧可以極大地避免了錯誤或者可以編寫出非常精簡的代碼。

模式:函數語法糖

函數語法糖是爲一個對象快速添加方法(函數)的擴展,這個主要是利用prototype的特性,代碼比較簡單,我們先來看一下實現代碼:

if (typeof Function.prototype.method !== "function") {
    Function.prototype.method = function (name, implementation) {
        this.prototype[name] = implementation;
        return this;
    };
}
擴展對象的時候,可以這麼用:

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個方法,接下來我們來驗證一下結果:

var a = new Person('Adam');
console.log(a.getName()); // 'Adam'
console.log(a.setName('Eve').getName()); // 'Eve'
模式7:對象常量

對象常量是在一個對象提供set,get,ifDefined各種方法的體現,而且對於set的方法只會保留最先設置的對象,後期再設置都是無效的,已達到別人無法重載的目的。實現代碼如下:

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;
        }
    };
} ());
驗證代碼如下:

// 檢查是否存在
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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章