小白的JS之路--入职第一天

2018-07-16  本文已影响0人  阿古瓜

第一份JS代码

/* 入职第一天写的js  */
    function checkName() {
        // 验证姓名 
    }
    function checkEmail() {
        // 验证邮箱 
    }
    function checkPassword() {
        // 验证密码 
    }

队长点评:
你创建了太多变量!从功能上讲没问题,但在团队开发中这样的代码可能影响到其他人,如果别人也定义了同样的方法,将会导致相互覆盖的问题。

第二份JS代码

/*  2.用对象收编变量 */
var CheckOject = {
        checkName : function(){
            // 验证姓名 
        },
        checkEmail : function(){
            // 验证邮箱
        },
        checkPassword: function(){
            // 验证密码
        }
    }

队长点评:
你看,这样对外我们就只有一个变量了。

第三份JS代码

/* 3.对象的另一种形式,函数对象 */
    var CheckObject = function(){};
    CheckObject.checkName = function(){
        // 验证姓名
    }
    CheckOject.checkEmail = function(){
        // 验证邮箱
    }
    CheckObject.checkPassword = function(){
        // 验证密码
    }

队长点评:
第二份和第三份代码都实现了全局变量的最小化,但当别人使用你这个对象类用new关键字创建新的对象时,新创建的对象是不能继承这些方法的。

第四份JS代码

 /* 4.对象方法的简单复制 */
         var CheckObject = function () {
            return {
                age : 0,
                    //  初值为0
                checkName: function () {
                    // 验证姓名 
                },
                checkEmail: function () {
                    // 验证邮箱
                },
                checkPassword: function () {
                    // 验证密码
                }
            }
        }

        var a = CheckObject();
        a.age = 20;     
        var b = CheckObject();
        b.age = 18; 
        var c = CheckObject();

        console.log(a.age);      // 20
        console.log(b.age);      // 18
        console.log(c.age);      // 0

队长点评:
当每次调用这个函数,就返回之前写的对象,而且是一个新的对象;这样每个人使用时就互不影响。
但这不是一个真正意义的类的创建方式,创建的对象a和CheckObject没有任何关系(返回出来的对象本身与CheckObject对象无关)。

第五份JS代码

/*  函数中使用this创建类*/*/
    var CheckObject = function(){
        this.checkName = function(){
            // 验证姓名 
        }
        this.checkEmail = function(){
            // 验证邮箱 
        }
        this.checkPassword = function(){
            // 验证密码
        }
    }

    var d = new CheckObject();
    d.checkEmail();

队长点评:
把所有方法都放在函数内部,通过this定义,每次通过new关键字创建新对象的时候,新创建的对象都会对this上的属性进行复制。所以这些新创建的对象都会有自己的一套方法。然而有时候这么做造成的消耗是奢侈的。

第六份JS代码

/* 用原型创建类 */
var CheckObject = function(){};
CheckObject.prototype.checkName = function () {
    // 验证姓名
}
CheckOject.prototype.checkEmail = function () {
    // 验证邮箱
}
CheckObject.prototype.checkPassword = function () {
    // 验证密码
}

var a = new CheckOject();
a.checkName();
a.checkEmail();
a.checkPassword();

队长点评:
如果你想把方法像JQuery一样链式的调用,可以试试

第七份JS代码

/* 用链式写法改造 */ 
var CheckObject = function(){};
CheckObject.prototype.checkName = function () {
    // 验证姓名
    return this;
}
CheckOject.prototype.checkEmail = function () {
    // 验证邮箱
    return this;
}
CheckObject.prototype.checkPassword = function () {
    // 验证密码
    return this;
}

var a = new CheckOject();
a.checkName().checkEmail().checkPassword();

队长点评:
小白,辛苦了,明天继续。( ˇˍˇ )

本文实例来源于张容铭大神写的《JavaScript设计模式》

上一篇 下一篇

猜你喜欢

热点阅读