美文网首页
小白的JS之路--入职第一天

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

作者: 阿古瓜 | 来源:发表于2018-07-16 14:11 被阅读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设计模式》

相关文章

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

    第一份JS代码 队长点评:你创建了太多变量!从功能上讲没问题,但在团队开发中这样的代码可能影响到其他人,如果别人也...

  • 入职之路

    人任何时候都不能缺了自信和勇气,当然,如果可以的话,还要加上冷静和思考

  • Check of  Integration(FT)

    入职前 入职第一天 入职一周 入职一个月

  • 入职第一天便被要求做分享

    那是10年的11月,已经想不起具体是哪一天,只记得是入职的第一天,当时我还是个设计小白。 我正在座位上看入职的相关...

  • 入职“小白”第一天

    001 回炉重造:从零开始、逐步挑战、持续学习,这事回华青的描述和心态。 大约半年的休息调整,思维方面变得秀气了,...

  • 入职小白的心态

    一个月的新人培训结束,8月1号正式上岗,显得格外有仪式感。上岗三周以来,时间虽短,但已经陆陆续续接触了不少游戏运营...

  • 入职小白的感想

    毕业后一直寻寻觅觅着想要找一份工作,一份与所学专业对口、工资还算体面的工作。一直挑挑拣拣,心高气傲,总觉得该来的会...

  • 小植物们

    《小白和小植物》 今天是小白入职的第一天,满心忐忑、不安,小心翼翼。 经理办公室阳台上有几个小植物,像是考古才发现...

  • 日更第七天(入职第一天该做什么)2019-1-21

    关键词:入职新人,,同事关系, 内容摘要:入职第一天感想,迷茫 01 今天入职第一天,对于我来说,减少了一些心惊胆...

  • 流程:入职引导流程

    入职引导走一波,让新进员工顺利入职,并让新员工感受到团队的氛围; 第一天 【HR】基本入职引导,相关人力资源入职流...

网友评论

      本文标题:小白的JS之路--入职第一天

      本文链接:https://www.haomeiwen.com/subject/blmvpftx.html