美文网首页
【读书笔记】:《编写可维护的JavaScript》第06章 避免

【读书笔记】:《编写可维护的JavaScript》第06章 避免

作者: 龍天下 | 来源:发表于2020-11-16 16:57 被阅读0次

    第06章 避免使用全局变量(未完)

    “全局对象”是一个神秘的对象,它表示了脚本的最外层上下文。
    在浏览器中,window对象往往重载并等同于全局变量,因此任何在全局作用域中声明的变量和函数都是window对象的属性,比如:

    var color = "red";
    function sayColor() {
        console.log(color);
    }
    
    console.log(window.color); // "red"
    console.log(typeof window.sayColor); // "function"
    

    这段代码定义了全局变量color和全局函数sayColor(),两者都是window对象的属性,尽管我们并没有显式的执行给window对象挂载属性的操作。

    6.1 全局变量带来的问题

    一般来讲,创建全局变量被认为是最为糟糕的实践,尤其是在团队开发的大背景下。全局变量越多,引入错误的概率将会变得越来越高。

    6.1.1 命名冲突

    当脚本中的全局变量和全局函数越来越多时,发生命名冲突的概率也会随之增高。

    6.1.2 代码的脆弱性

    一个依赖于全局变量得到函数是深耦合于上下文环境中的。如果环境发生改变,函数很可能就失效了。
    定义 函数时,最好尽可能多地将数据置于局部作用域内,在函数内定义的任何“东西”都应当采用这种写法。任何来自函数外部的数据都应当以参数的形式传进来。这样做可以将函数和其外部环境隔离开来,并且你的修改不会对程序其他部分造成影响。

    6.1.3 难以测试

    确保你的函数不会对全局变量有依赖,这将增强你的代码的可测试性。当然,你的函数可能会依赖原生的(native)JavaScript全局变量,比如Date、Array等。它们是全局环境的一部分,是和JavaScript引擎相关的,你的函数总是会用到这些全局对象。总之,为了保证你的代码具有最佳的可测试性,不要让函数对全局变量有依赖。

    6.2 意外的全局变量

    JavaScript陷阱之一:不小心创建全局变量。当你给一个未被 var 语句声明过的变量赋值时,JavaScript会自动创建一个全局变量:

    function doSomething(){
        var count = 10; // 错误的写成分号
            title = "this is a bad idea"; // 不好的写法,创建了全局变量
    }
    
    doSomething();
    
    console.log(title); // 能够输出 因为 这里的 title 是一个全局变量
    console.log(count); // 报错
    

    最好的规则就是总是使用 var 来定义变量,哪怕是定义全局变量。这样做能大大降低某些场景里省略 var 所导致错误的可能性。

    避免意外的全局变量
    当你不小心创建了全局变量时,JavaScript并不会报任何错误。这时就需要诸如JSLint和JSHint 的工具了。如果你给一个未声明的变量赋值,这两个工具都会报警告。

    6.3 单全局变量方式

    依赖尽可能少的全局变量,即只创建一个全局变量。
    单全局变量模式已经在各种流行的JavaScript类库中广泛使用。

    • YUI定义了唯一一个YUI全局对象。
    • jQuery定义了两个全局对象,$和jQuery。
    • Dojo定义了一个dojo全局对象。

    “单全局变量”的意思是所创建的这个唯一全局对象名士独一无二的(不会和内置API产生冲突),并将你所有的功能代码都挂载到这个全局对象上。比如,假设我想让一个对象表示本书的一章,代码看起来会像下面这样:

    function Book(title) {
        "use strict";
        this.title = title;
        this.page = 1;
    }
    
    Book.prototype.trunPage = function (direction) {
        "use strict";
        this.page += direction;
    };
    
    var Chapter1 = new Book("第一章");
    var Chapter2 = new Book("第二章");
    var Chapter3 = new Book("第三章");
    

    这段代码创建了4个全局对象:Book,Chapter1,Chapter2,Chapter3。单全局变量则只会创建一个全局对象,并将这些对象都赋值为它的属性。

    var MaintinableJS = {};
    MaintinableJS.Book = function (title) {
        "use strict";
        this.title = title;
        this.page = 1;
    };
    
    MaintinableJS.Book.prototype.trunPage = function (direction) {
        "use strict";
        this.page += direction;
    };
    
    MaintinableJS.Chapter1 = new MaintinableJS.Book("第一章");
    MaintinableJS.Chapter2 = new MaintinableJS.Book("第二章");
    MaintinableJS.Chapter3 = new MaintinableJS.Book("第三章");
    

    这段代码只有一个全局变量,即MaintinableJS,其他任何信息都挂载到这个对象上。因为团队的每个人都知道这个全局对象,因此很容易做到继续为它添加属性以避免全局污染。

    相关文章

      网友评论

          本文标题:【读书笔记】:《编写可维护的JavaScript》第06章 避免

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