zoukankan      html  css  js  c++  java
  • 《JavaScript 模式》读书笔记(2)— 基本技巧1

      这篇文章的主要内容,介绍了一些js编程中的基本技巧,其实这些技巧,大家在开发的过程中,或多或少都在使用,或者已经可以熟练的应用于自己的代码或项目中了。那么,这篇文章,就一起来回顾下这些“基本技巧”。

    编写可维护的代码

      我们想象一下,在我们的工作过程中,要去改一个bug,这个bug可能是由于之前十几个人维护的项目,没有规范,没有JSLint,代码就像在大草原上弛聘一样,随心所欲,无欲无求。到了今天,刚好你接受了这个项目,测试发现了这个潜藏在系统中已久但今天才暴露的问题。然后,你看着这些代码,心里面问候了代码作者的祖宗十六代,但是,不管怎么样,你还是要坐下来,安心的,潜心的从这些凌乱的,毫无规则的代码中,解决这个bug。

      我相信很多人都遇到过这样的问题,甚至在一些无规范的公司,企业,项目上,这实在是很普遍的事情(我现在正在经历的)。那时,你就会发现,编写可维护的代码有多重要。

      易维护的代码意味着代码具有以下特性:

        1. 阅读性好。

        2. 具有一致性。

        3. 预见性好。

        4. 看起来如同一个人编写。

        5. 有文档。

    尽量少用全局变量

      全局变量的问题在于,它们在整个JavaScript应用或Web页面内共享。它们生存于一个全局命名空间内,总有可能发生命名冲突。

      JavaScript总是在不知不觉中就出人意料地创建了全局变量,其原因在于JavaScript 的两个特性。第一个特性是JavaScript可直接使用变量,甚至无需声明。第二个特性是JavaScript有一个暗示全局变量的概念,即任何变量,如果未经声明,就为全局对象所有(也就像正确生命过的全局变量一样可以访问)。比如:

    function sum (x,y) {
      //反模式:暗示全局变量  
      result = x + y;
      return result;            
    } 

      这个例子中,函数内部的变量result未经声明就使用了,当然,在简单环境下,这样并不会有什么问题,但是一旦在调用函数后,在外部空间使用了另外的result变量:

    function sum(x, y) {
        result = x + y;
        return result;
    }
    sum(1, 2)
    var result = 6
    console.log(result)
    

      所以,一个首要规则就是,使用var声明变量。

    function sum (x,y) {
      var  result = x + y;
      return result;            
    }

      另外一种创建隐式全局变量的反模式式带有var声明的链式赋值:

    //反模式,不要使用
    function foo() {
        var a = b = 0;
    
        //...
    }
    

      上面的代码,由于从右至左的操作符优先级。所以,上面的代码实际是这样的:

    function foo() {
        var a = ( b = 0 );
    
        //...
    }
    

      但是,如果对链式赋值的所有变量都进行了声明,那么就不用担心会意想不到的创建了全局变量:

    function foo() {
        var a ,b;
        //...
        a = b = 0;  
    }
    

      另外,假设你的代码想要在不同的宿主环境(比如node和window)中都可以跑的很欢快,那么就一定要注意全局变量的使用。因为,或许在window中不存在的变量,早已被node的全局变量所使用了。

    变量释放时的副作用

      隐含全局变量与明确定义的全局变量有细微的不同,不同之处在于能否使用delete操作符撤销变量。

    • 使用var创建的全局变量(这类变量在函数外部创建)不能删除。
    • 不实用var创建的隐含全局变量(尽管它是在函数内部创建)可以删除。

      这表明隐含全局变量严格来讲并不是真正的变量,而是全局对象的属性。属性可以通过delete操作符删除,但是变量不可以。

    var a = '1';
    b = 2;
    (function () {
        c = 3;
    }()) 
    delete a;
    delete b;
    delete c;
    
    console.log(typeof a)
    console.log(typeof b)
    console.log(typeof c)

    单一var模式

      只使用一个var在函数顶部进行变量声明是一种非常有用的模式。它的好处在于:

    •   提供方一个单一的地址以查找到函数需要的所有局部变量。
    •       防止出现变量在定义前就被使用的逻辑错误。
    •   抱住牢记要声明变量,以尽可能少的地使用全局变量。
    •       更少的编码(无论是输入代码还是传输代码都更少了)。

      比如:

    function func() {
        var a = 1,
            b = 2,
            sum = a + b,
            obj = {},
            i,
            j;
    }
    

       要记住,所有未初始化,且未声明的变量,其值都为undefined。这句话不太容易理解,既然未声明,那就说明不存在啊,没错,不存在就是undefined。那既然说到了undefined,简单说下null的含义,null代表着存在,但是空。

    提升:凌散变量的问题

      JavaScript允许在函数的任意地方声明多个变量,无论在哪里声明,效果都等同于在函数顶部进行声明。这就是所谓的“提升”。当先使用后声明的时候,就可能会导致逻辑错误。对于JavaScript而言,只要变量是在同一个范围(同一个函数)里,就视为已经声明,那排是在变量声明前就使用。比如:

    // 反模式
    name = 'global'; // 全局变量 function func() { alert(name); // "未定义" var name = 'local'; alert(name); // "局部变量" } func();

      你以为第一个alert的结果是global么?那么请再读一遍加粗的那段话,实际上,代码是这样执行的:

    name = 'global'; // 全局变量
    function func() {
        var name;
        alert(name); // "未定义"
        name = 'local';
        alert(name); // "局部变量"
    }
    func();

      注意:事实上,代码处理上分为两个阶段:第一,这个阶段创建变量、函数声明及形式参数。这是解析和进入上线问的阶段。第二个阶段是代码运行时执行过程,创建函数表达和不合格标识符(未定义变量)。但为了实际使用的目的,我们使用了“提升”这个概念,尽管在ECMAScript标准中并不存在。

      
    好了,我们这一篇的内容就到这里,实际上,仅仅是基本技巧,后面还有不少的内容。我希望篇幅短一点,读起来不那么让人厌烦。

  • 相关阅读:
    CodeForces 219D Choosing Capital for Treeland (树形DP)
    POJ 3162 Walking Race (树的直径,单调队列)
    POJ 2152 Fire (树形DP,经典)
    POJ 1741 Tree (树的分治,树的重心)
    POJ 1655 Balancing Act (树的重心,常规)
    HDU 2196 Computer (树形DP)
    HDU 1520 Anniversary party (树形DP,入门)
    寒门子弟
    JQuery选择器(转)
    (四)Web应用开发---系统架构图
  • 原文地址:https://www.cnblogs.com/zaking/p/12467121.html
Copyright © 2011-2022 走看看