javascript 设计模式学习随笔（1）

一、面向对象编程

1、javascript 的灵活性

1.1、团队开发中的全局变量污染

验证用户名，邮箱和密码

function checkName () {} 与 var checkName = function () {}

验证邮箱

function checkEmail() {} 与 var checkEmail = function () {}

验证密码

function checkPassword (){} 与 var checkPassword = function () {}

注释：

一、全局变量的问题。在开始接触js的时候，我们只关心一个方法能不能实现功能，只关注它的语法，而很少去考虑多人开发，而随着工作的时间和团队人数的增加我们突然发现，自己写的功能，不知不觉的被人修改了。这就是全局变量带来的问题，你的同事不小心的使用了你的方法名，并且覆盖了它。这里还涉及到声明式函数和赋值式。这是因为JavaScript引擎首先会扫墓所有的变量声明，然后将这些变量声明移动到顶部。你需要理解该题目的意思是，变量声明被提前了，但变量赋值没有，因为这行代码包括了变量声明和变量赋值。这里有这一个面试的坑，通常考察的是调用执行时两种的区别。

　　　　　　　当变量声明和赋值在一起用的时候，JavaScript引擎会自动将它分为两部以便将变量声明提前，不将赋值的步骤提前是因为他有可能影响代码执行出不可预期的结果。

二、方法名尽量采用驼峰命名法，第一个单词小写，第二个大写，这样更容易增加代码的可读性。

1.2 用对象收编变量

var checkObject = {

checkName : function () {},

checkEmail : function () {},

checkPassword: function () {}

}

注释

我们将同一类型的功能放在同一个对象里面，减少了全局变量的污染概率。当然我们还可以通过点语法给一个对象添加方法：

• var checkObject = function () {}
• checkObjiect.checkName = function () {}
• ......

在不需要考虑团队开发中别人复用你的代码的时候，这样写是没有问题的，而我也曾经很长时间都是这么写的，自己感觉自己写的还可以吧，最起码看起来没那么low，但是后来被后台开发嫌弃了。。。

当你的同事过来和你说，你在哪个页面是不是写了几个方法，他也刚好需要，就用你的吧，你说好，毕竟这是一件值得开心的事情。然后你犹豫着不知道怎么把你的方法给你的同事用，总不能直接粘贴整改文件给他吧。而公用同一个的话，有些地方是需要更改的，就又造成了污染。于是你想到了new 一个新的对象，让每次调用函数的时候，都反回一个新的对象。毕竟在程序猿的世界里，是不缺对象的，如果你现在还没有就new 一个吧。

于是为了更好的满足团队开发协作代码复用，你对自己的方法进行了一些调整。

1.3 真假对象

var checkObject = function () {
return {
  checkNmae : function () {},
  checkEmai : function () {},
  checkPassword: function () {}
  }
 }
 调用： checkObject.checkEmail ();

### 1.4 类的创建

  
    var checkObject = function () {
      this.checkName = function () {
      }
      this.checkEmail = function () {}
      this.checkPassword = function () {}
    }
    通过关键词this 绑定的方法，就可以看成是类了。类的新建方式要用我们的new 关键字。也就是对类实例化（用类创建一个对象）
  

### 1.5 利用原型，减少内存消耗 #####上面的方式每次调用都会对属性进行复制，也就满足了每个对象都有自己的一套方法，有时候这么做对内存消耗式很大的。

 
    var checkObject = function () {}
    checkObject.prototype.checkName = function () {}
 

#### 这样创建出来的对象所拥有的是一个方法，是通过prototype 依次查找实现的。

  var checkObject = function () {}
  checkObject.prototype = {
        checkName: fuction ()  {},
        checkEmail: function () {},
        checkPassword: function () {}
    }
    var checkMethod = new checkObject ();
    checkMethod.chckName ();
    checkMethod.checkEmail ();
    checkMethod.checkPassword ();
    

### 1.6 我们要尽可能的偷懒 #### 上面的方式重复的写了三次checkMethod,避免写重复的东西是提高水平的一个重要标准。下面我们对上面的代码进行一些调整。

 
    var checkObject = {
      checkName: function () {
            return this;
      },
      checkEmail: function () {
            return this;
      },
      checkPassword: function () {
            return this;
      }
      
    }
    checkObject.checkName ().checkEmail().checkPassword();
 
 
 原型对象的写法： 
 var checkObject = function () {}
 checkObject.prototype = {
 checkName: function () {
        return this;
   },
 chckEmail: function () {
        return this;
 },
 checkPassword: function () {
        return this;
   }
 }
 var checkMethod = new checkObject ();
 checkMethod.checkName().checkPassword().checkEmail();
 

#### 小结： 如何判断调用的时候是否进行new 。我总结的是，1。和原型有关的都是要new进行实力化的。 2、没用到原型的方法，是通过this绑定的方法也都是要new的，这样是要通过this复制当前的方法到新的对象里。 ### 

1.7、函数的祖先 

Function.prototype.addMethod = function (name, fn ) {
      this[name] = fn;
      return this;
    }
    var methods = function () {};
    methods.addMethod('checkName',function () {
        console.log(1)
        // return this;
    }).addMethod('checkEmail',function () {
       console.log(2)
       // return this;
    })
    methods.addMethod().checkName())
    输出1 ，执行了checkName
    methods.addMethod().checkName().checkEmail()
    demo1.html:22 Uncaught TypeError: Cannot read property 'checkEmail' of undefined 原型里返回的this是为了实现方法封装时链式的。而要想调用的时候也可以必须在每个方法编写的时候再次返回this。


    Function.prototype.addMethod = function (name, fn ) {
      this[name] = fn;
      return this;
    }
    var methods = function () {};
    methods.addMethod('checkName',function () {
        console.log(1)
        return this;
    }).addMethod('checkEmail',function () {
       console.log(2)
       return this;
    })
    methods.checkName().checkEmail()
    

### 方法太多？ 记住下面这种写法就可以了

    Function.prototype.addMethod = function (name, fn ) {
      this.prototype[name] = fn;
      return this;
    }
    var Methods = function () {};
    Methods.addMethod('checkName',function () {
        console.log(1)
        return this;
    }).addMethod('checkEmail',function () {
       console.log(2)
       return this;
    })
    var checkMethod = new Methods()
    checkMethod.checkName().checkEmail()

Function.prototype.addMethod = function (name, fn ) {
      this[name] = fn;
      return this;
    }
    var methods = function () {};
    methods.addMethod('checkName',function () {
        console.log(1)
        // return this;
    }).addMethod('checkEmail',function () {
       console.log(2)
       // return this;
    })
    methods.addMethod().checkName())
    输出1 ，执行了checkName
    methods.addMethod().checkName().checkEmail()
    demo1.html:22 Uncaught TypeError: Cannot read property 'checkEmail' of undefined 原型里返回的this是为了实现方法封装时链式的。而要想调用的时候也可以必须在每个方法编写的时候再次返回this。


    Function.prototype.addMethod = function (name, fn ) {
      this[name] = fn;
      return this;
    }
    var methods = function () {};
    methods.addMethod('checkName',function () {
        console.log(1)
        return this;
    }).addMethod('checkEmail',function () {
       console.log(2)
       return this;
    })
    methods.checkName().checkEmail()
    

### 方法太多？ 记住下面这种写法就可以了

    Function.prototype.addMethod = function (name, fn ) {
      this.prototype[name] = fn;
      return this;
    }
    var Methods = function () {};
    Methods.addMethod('checkName',function () {
        console.log(1)
        return this;
    }).addMethod('checkEmail',function () {
       console.log(2)
       return this;
    })
    var checkMethod = new Methods()
    checkMethod.checkName().checkEmail()

声明一下：这个系列是我看设计模式的读书笔记，里面大部分是书中内容，再加上我自己的理解。