灵活的js

245 阅读3分钟

前言

如果你觉得写基本的赋值语句,或定义几个方法,或者使用下对象的内置方法就算会了js,那其实还差的远。 还差什么呢?还差一些编程的思维,以及优化的编程思想。

案例

  • 全局函数(不推荐方式)

顾名思义全局函数就是没有任何命名空间或者封装的函数,缺点是容易覆盖原有代码或者被覆盖,在团队内不易维护。

  function checkName(){
  // 验证姓名
  }
function checkMail(){
  // 验证邮箱
  }
function checkPhone(){
  // 验证手机号
  }
  • 用对象收编变量(推荐方式1)

    放在一个对象里保存,减少代码被覆盖的影响,使用可以通过点语法。

    备注:可能你会想到函数对象的写法,函数是特殊的对象类型,当然也可以这样用。这里只提示一点,如果你通过点语法在函数外部申明的方法,再通过new创建的对象是无法使用这些方法的。

     var checkObj={
         checkName:function(){
           // 验证姓名
         },
         checkMail:function(){
           // 验证邮箱
         },
         checkPhone:function(){
           // 验证手机号
         },
    
    } 
     //使用
    checkObj.checkName()
    
  • 用类收编变量(推荐方式2)

    优点:每个新创建的对象都可以使用这个方法,因为通过this定义到新创建的对象了。 缺点:每个实例化对象都会有自己的一套方法,很耗性能。(可以通过原型的方式改进,让他们共用原型的一套方法)

    // 类实例化增加方法
    var checkObj=function(){
       this.checkName=function(){
         // 验证姓名
       },
       this.checkMail=function(){
         // 验证邮箱
       },
       this.checkPhone=function(){
         // 验证手机号
       }
    } 
     //使用
    var checkDemo=new checkObj();
    checkDemo.checkName();
    // 原型方式 (与前面直接定义方式不能混用)
    var checkObj=function(){ },
    checkObj.protoype={
         checkName:function(){
           // 验证姓名
         },
         checkMail:function(){
         // 验证邮箱
         },
         checkPhone:function(){
         // 验证手机号
         }
    }
    // 使用方式
    var checkDemo=new checkObj();
    checkDemo.checkName();
    
  • 链式使用(理解当前对象this)

    在上面使用方法的时候也许你发现只能分别调用,比如checkDemo.checkName();checkDemo.checkMail();这里可以通过返回当前对象实现链式调用,简化语法。(联想到jq的很多方法支持链式操作,其实同理,很棒有没有?)

     var checkObj={
         checkName:function(){
            // 验证姓名
            return this;
          },
          checkMail:function(){
          // 验证邮箱
           return this;
          },
          checkPhone:function(){
          // 验证手机号
             return this;
          }
      
    
     }
      // 使用方式
       checkObj.checkName().checkMail()
    
  • 函数的祖先(prototype)

    prototype.js 是一款js的框架,对很多原生对象拓展了很多函数方法,比如Function,String等。

    拓展:那么如果你想给某个原始的对象类型添加原型方法,必须通过prototype关键字改变其原型对象。

    Function.prototype.checkName=function(){}
    // 那么你在定义任何一个函数的时候 都有这个原型对象方法
    var test=function(){}
    test.checkName()
    // 但是这样是被不允许的,因为你污染了原生对象,所以别人创建的函数也会被你的方法污染。
    //建议你可以抽象出一个功能方法来实现添加。你也可以优化下,返回this,这样就可以链式添加方法了。
      Function.prototype.addMethod=function(name,fn){
         this[name]=fn;
    }
    //使用这个功能方法
    var test=function(){}
     test.addMethod('checkName',function(){
       //验证姓名
    }) 
    test.checkName();