第一章--JavaScript灵活的语言

JavaScript设计模式

需求: 验证用户名、邮箱、密码

1. 函数声明与函数表达式

创建了全局变量, 会污染全局

// 1.1 函数声明
function checkName () {
    console.log("验证用户名");
}
function checkEmail () {
    console.log("验证邮箱");
}
function checkPassword () {
    console.log("验证密码");
}
// 1.2 函数表达式
var checkName = function () {
    console.log("验证用户名");
};
var checkEmail = function () {
    console.log("验证邮箱");
};
var checkPassword = function () {
    console.log("验证密码");
};

2. 用对象收编

只是一个单例, 不能复制多份

// 变为对象中的方法
var checkObject = {
    checkName : function () {
        console.log("验证用户名");
    },
    checkEmail : function () {
         console.log("验证邮箱");
    },
    checkPassword : function () {
    console.log("验证密码");
    }
};

// 变为函数(特殊的对象)的方法
var checkObjec = function () {};
checkObject.checkName = function () {
    console.log("验证用户名");
};
checkObject.checkEmail = function () {
    console.log("验证邮箱");
};
checkObject.checkPassword = function () {
    console.log("验证密码");
};

3. 函数调用返回新对象

新对象与函数之间没有关系

var checkObject = function () {
    return {
        checkName : function () {
            console.log("验证用户名");
            return this;
        },
        checkEmail : function () {
             console.log("验证邮箱");
             return this;
        },
        checkPassword : function () {
            console.log("验证密码");
            return this;
        }
    };
};
// 调用
var a = checkObject();
a.checkName().checkEmail().checkPassword();

4. 用构造函数

比较完美的方案

// 构造函数
var CheckObject = function () {};
CheckObject.prototype = {
        checkName : function () {
            console.log("验证用户名");
            return this;
        },
        checkEmail : function () {
             console.log("验证邮箱");
             return this;
        },
        checkPassword : function () {
            console.log("验证密码");
            return this;
        }
};
// 调用
var a = new CheckObject();
a.checkName().checkEmail().checkPassword();

5. 向Function的prototype中拓展插件

不能直接向Funtction的原型中添加方法, 会污染
编写一个插件管理器

// 函数式调用方法
// 插件管理器
Function.prototype.addMethod = function (name, fn) {
    this[name] = fn;    // 在函数上调用
    return this;
};
var m1 = function () {}; // function是Function的实例
m1.addMethod("checkName", function () {
    console.log("验证用户名");
    return this;
}).addMethod("checkEmail", function () {
    console.log("验证邮箱");
    return this;
}).addMethod("checkPassword", function () {
    console.log("验证密码");
    return this;
});
// 调用
m1.checkName().checkEmail().checkPassword();

// 类式调用方法
// 插件内部实现不同
Function.prototype.addMethod = function (name,fn) {
    this.prototype[name] = fn;  // 添加在了原型上,所有类式调用
    return this;
};
var M1 = function () {}; // function是Function的实例
M1.addMethod("checkName", function () {
    console.log("验证用户名");
    return this;
}).addMethod("checkEmail", function () {
    console.log("验证邮箱");
    return this;
}).addMethod("checkPassword", function () {
    console.log("验证密码");
    return this;
});
// 调用
var a = new M1();
a.checkName().checkEmail().checkPassword();
var b = new M1();
b.checkName().checkEmail().checkPassword();