Avoid Globals
JS执行环节有很多独特之处相对于其他语言来说,如全局变量和函数的使用。
JS本身的初始执行环境就是有多种多样的全局变量所定义的,这些全局变量在环境创始之初就存在了。
全局对象是一个神秘的对象,表示脚本的最外层上下文。
浏览器中 window对象往往重载并等于全局对象,因此任何在全局对象中声明的变量或者函数都为window对象的属性。
而不需要显式的将这些挂在到 window 对象上。
var color = "red";
function getColor(){
alert(color);
}
color === window.color;
getColor === window.getColor;
6.1 全局变量带来的问题
随着代码的增长,全局变量毫无疑问的会导致一些非常重要的可维护性问题。
6.1.1 命名冲突
当全局变量和全局函数越来越多的时候,发生命名冲突概率就会越来越大。各种变量,函数将会被重置,那么很多各种各样的BUG就会随之而来。
比如:
function getColor(){
alert(color);
}
中的 color 由于依赖与全局的变量,那么这种依赖关系将很难被追踪到,我在不小心重置了 color 后不知道有多少像该函数一样的函数进行了全局依赖的行为。
接下来,全局变量与一些浏览器内置API冲突的风险。
6.1.2 代码的脆弱性
一个依赖于全局变量的函数即是深耦合于上下文环境之中。环境的变化就可能会导致函数的失效。
但是当 color 被作为参数传递进函数的话,那么情况就大大不一样了。
function getColor( color ){
alert(color);
}
不在依赖全局变量,并且从与上下文的深耦合之中脱离出来。所以当定义函数尽可能的将数据置于局部变量之中,任何外部数据都应当以参数的形式传递进入函数,保证函数与其外部环境隔离开,不至于形成深度耦合的关系。
6.1.3 难以测试
任何依赖于全局变量才能正常工作的函数,只有为其重新创建完整的全局变量才能正确的测试,然后,就木有然后了。
保证函数不多全局变量有依赖,将大大增强代码的可测试性,当然不包括JS中原生的对象,如Date,Array等。
6.2 意外的全局变量
JS 中有很多陷阱会使我们一不小心就创建了全局变量,如:
function doSomething(){
var count = 10;
title = "abcdefg";
var a = b = 0;
}
对于意外的全局变量一些工具,比如JSLint和JSHint就可以起到作用了,因为意外创建全局变量并不会引起JS引擎的报错,有时候很难察觉到,而这些工具就是我们很好的预防,消除一些意外创建的情况。还有严格模式下也会报错来提醒程序猿。
6.3 单全局变量方式
YUI 引入 唯一 YUI全局变量。
jQuery 引入 $ 和 jQuery 全局变量。
Dojo 引入 dojo 全局变量。
Closure 引入 goog 全局变量。
单全局变量意味着创建一个唯一的全局对象名,将所有你的功能代码挂在到该对象上,都成为该对象的属性,从而不创建其他的全局变量。
function Book( title ){
this.title = title;
this.page = 1;
}
Book.prototype.turnPage = function( desc_num ){
this.page += desc_num;
}
var chapter1 = new Book("one");
var chapter2 = new Book("two");
var chapter3 = new Book("three");
会有好多全局变量,那么:
var MainJS = {};
MainJS.Book = function( title ){
this.title = title;
this.page = 1;
}
MainJS.Book.prototype.turnPage = function( desc_num ){
this.page += desc_num;
}
MainJS. chapter1 = new MainJS.Book("one");
MainJS. chapter2 = new MainJS.Book("two");
MainJS. chapter3 = new MainJS.Book("three");
其实,很简单,但是带来的效果确是非常不错的。
6.3.1 命名空间
JS中的命名空间,其实质就是不断的往一个定义的全局对象中,合理有规则的塞东西。
var MyGlobal = {
namespace : function( ns ){
var parts = ns.split("."),
object = this,
i, len;
if( parts[0] === "MyGlobal" ){
parts = parts.slice(1);
}
for( i = 0,len = parts.length; i<len; i++ ){
if( !object[parts[i]] ){
object[parts[i]] = {};
}
object = object[parts[i]];
}
return object;
}
}
然后可以自由的创建命名空间了,
MyGlobal.namespace("aa.bb.cc.dd");
MyGlobal.namespace("MyGlobal.aa.bb.cc.dd");
6.3.2 模块
另外一种基于单全局变量的扩充方法是使用模块。
模块是一种通用的功能片段,并不创建全局变量和命名空间,而是将这些代码存放在一个表示执行一个任务或者发布一个借口的单函数中。两种流行的模块是 YUI模块 和 异步模块定义(AMD)。
YUI模块
是使用YUI JS类库创建新模块的一种模式,写法:
YUI.add("module-name", function(Y){
// 模块正文
}, "version", { requires: ["depend1", "depend2"] });
异步模块定义 AMD
define( "module-name", ["depend1", "depend2"] , function(d1, d2){
// 模块正文
});
6.4 零全局变量
JS代码注入到页面的时候可以实现不创建全局变量。当然使用的场景不会非常多。在一段完全独立的代码,或者代码非常小且不提供任何接口的时候。
(function(win){
// 代码 不暴露任何接口
}( window ));
只要代码需要被其他的代码所依赖的时候,就不可以使用零全局变量方式。在对于代码块的代码合并时候有挺大作用。
分享到:
相关推荐
每个人都有固定的一套编码习惯,但在团队协作过程中,则需要每个人都遵守统一的编码约定和编程方法。...使用多种工具创建JavaScript自动化打包系统 使用诸如YUITest Selenium引擎来集成基于浏览器的JavaScript测试。
原版编写可维护的JavaScript(英文)
《编写可维护的JavaScript》向开发人员阐述了如何在团队开发中编写具备高可维护性的JavaScript代码,书中详细说明了作为团队一分子,应该怎么写JavaScript。本书内容涵盖了编码风格、编程技巧、自动化、测试等几...
当你写代码的时候,你有很多的...可维护的JavaScript不仅推荐一套准则,它检查使用指南和推荐的其他行业,所以你了解什么是常见的JavaScript运行良好的项目。现在保存这本书的副本。这是唯一的资源,只关注JavaScript约定
完整版 PDF 英文原版 javascript maintainable o'reilly
5.8 小结对象在 JavaScript 中被称为引用类型的值,而且有一些内置的引用类型可以用来创建特定的对象,现简要总结如下:引用类型与传统面向对象程序设计中
Maintainable+JavaScript(编写可维护的JavaScript).pdf
This book provides you with a technical foundation to implement animation in a way that’s both visually stunning and programmatically maintainable. Throughout, we consider the balance between ...
Chapter 6: Versioning REST APIs Chapter 7: Encoding Actions on Resources Chapter 8: Implementing Synchronous and Asynchronous REST APIs Chapter 9: Documenting REST APIs Chapter 10: Testing REST APIs ...
pdf Nicholas C. Zakas's books readable code
3.7.1. 目的 3.7.2. 例子 3.7.3. 注意 3.7.5. 代码 3.7.6. 测试
"Test-Driving JavaScript Applications: Rapid, Confident, Maintainable Code" English | ISBN: 1680501747 | 2016 | Debunk the myth that JavaScript is not easily testable. Whether you use Node.js, ...
With Learning JavaScript Design Patterns, you’ll learn how to write beautiful, structured, and maintainable JavaScript by applying classical and modern design patterns to the language. If you want to...
Chapter 6 Understanding Asynchronous Flow Control Methods In Javascript Chapter 7 Leveraging The Model-View-Controller Chapter 8 Testing Javascript Components Chapter 9 Rest Api Design And Layered ...
可维护JavaScript 设置 如果您已经在本地安装了node & npm ,请转到步骤2。 与Node.js一起安装npm brew update brew install node 全局安装Bower npm install -g bower 全局安装Gulp npm install -g gulp 安装...
oriented features introduced in ECMAScript 6 It makes object-oriented programming accessible and understandable to web developers Write better and more maintainable JavaScript code while exploring ...
数据科学中的可维护代码 使用SKlearn的变压器和管道。 安装 pip install -r requirements.txt 锻炼 打开笔记本exercise/Exercise.ipynb然后按照说明进行操作。
罗斯塔图! Roostagram 由 Bocoup 的工程师创建,用于演示和教授使用现代工具和工作流程的软件开发过程。 此应用程序是在和期间协作构建。 不过,我们希望每个人都能从这个存储库中学习! 代码注释文档应用程序是...
Mastering JavaScript Object-Oriented Programming 2016 | ISBN: 1785889109... This book is your one-way ticket to becoming a JavaScript Jedi who can be counted on to deliver flexible and maintainable code.