这篇文章主要介绍了如何编写高质量 JS 代码的方法及相关资料, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
想写出高效的 javascript 类库却无从下手;
尝试阅读别人的类库,却理解得似懂给懂;
打算好好钻研 js 高级函数,但权威书上的内容太零散,
即使记住 "用法",但到要 "用" 的时候却没有想 "法"。
也许你和我一样,好像有一顾无形的力量约束着我们的计划,让我们一再认为知识面的局限性,致使我们原地踏步,难以向前跨越。
这段时间,各种作业、课程设计、实验报告,压力倍增。难得挤出一点点时间,绝不睡懒觉,整理总结往日所看的书,只为了可以离写自己的类库近一点。
本文参考自《javascript 语言精粹》和《Effective JavaScript》。例子都被调试过,理解过后,我想把一些 "深奥" 的道理说得浅显一点点。
1. 变量作用域
作用域对于程序员来说就像氧气。它无处不在,甚至,你往往不会去想他。但当它被污染时(例如使用全局对象),你会感觉到窒息(例如应用响应变慢)。javascript 核心作用域规则很简单,被精心设计,且很强大。有效地使用 javascript 需要掌握变量作用域的一些基本概念,并了解一些可能导致难以捉摸的、令人讨厌的问题的极端情况。
1.1 尽量少用全局变量
javascript 很容易在全局命名空间中创建变量。创建全局变量毫不费力,因为它不需要任何形式的声明,而且能被整个程序的所有代码自动地访问。
对于我们这些初学者,遇到某些需求(例如,传输的数据被记录下来、等待某时机某函数调用时使用;或者是某函数被经常使用)时,好不犹豫想到全局函数,甚至大一学到的 C 语言面向过程思想太根深蒂固,系统整整齐齐地都是满满函数。定义全局变量会污染共享的公共命名空间,并可能导致意外的命名冲突。全局变量也不利于模块化,因为它会导致程序中独立组件间的不必要耦合。严重地说,过多的全局(包括样式表,直接定义 div 或者 a 的样式),整合到多人开发过称将会成为灾难性错误。这就是为什么 jQuery 的所有代码都被包裹在一个立即执行的匿名表达式——自调用匿名函数。当浏览器加载完 jQuery 文件后,自调用匿名函数立即开始执行,初始化 jQuery 的各个模块,避免破坏和污染全局变量以至于影响到其他代码。
- (function(window,undefined){
- var jQuery = ...
- //...
- window.jQuery = window.$ = jQuery;
- })(window);
另外,你或许会认为,"先怎么怎么写,日后再整理" 比较方便,但优秀的程序员会不断地留意程序的结构、持续地归类相关的功能以及分离不相关的组件,并这些行为作为编程过称中的一部分。
由于全局命名空间是 javascript 程序中独立的组件经行交互的唯一途径,因此,利用全局命名控件的情况是不可避免的。组件或程序库不得不定义一些全局变量。以便程序中的其他部分使用。否则最好使用局部变量。
- this.foo ;//undefined
- foo = " global foo";
- this.foo ;//"global foo"
- var foo = "global foo";
- this.foo = "changed";
- foo ;//changed
javascript 的全局命名空间也被暴露在程序全局作用域中可以访问的全局对象,该对象作为 this 关键字的初始值。在 web 浏览器中,全局对象被绑定在全局 window 变量。这就意味你创建全局变量有两种方法:在全局作用域内使用 var 声明他,或者将其加入到全局对象中。使用 var 声明的好处是能清晰地表达全局变量在程序范围中的影响。
鉴于引用为绑定的全局变量会导致运行时错误,因此,保存作用域清晰和简洁会使代码的使用者更容易理解程序声明了那些全局变量。
由于全局对象提供了全局环境的动态反应机制,所以可以使用它查询一个运行环境,检测在这个平台下哪些特性可用。
eg.ES5 引入了一个全局的 JSON 对象来读写 JSON 格式的数据。
- if(!this.JSON){
- this.JSON = {
- parse : ..,
- stringify : ...
- }
- }
如果你提供了 JSON 的实现,你当然可以简单无条件地使用自己的实现。但是由宿主环境提供的内置实现几乎更适合的,因为它们是用 C 语言写进浏览器的。因为它们按照一定的标准对正确性和一致性进行了严格检查,并且普遍来说比第三方实现提供更好的性能。
当初数据结构课程设计模拟串的基本操作,要求不能使用语言本身提供的方法。javascript 对数组的基本操作实现得很好,如果只是出于一般的学习需要,模拟语言本身提供的方法的想法很好,但是如果真正投入开发,无需考虑第一时间选择使用 javascript 内置方法。
1.2 避免使用 with
with 语句提供任何 "便利",让你的应用变得不可靠和低效率。我们需要对单一对象依次调用一系列方法。使用 with 语句可以很方便地避免对对象的重复引用:
- function status(info){
- var widget = new Widget();
- with(widget){
- setBackground("blue");
- setForeground("white");
- setText("Status : "+info);
- show();
- }
- }
使用 with 语句从模块对象中 "导入"(import)变量也是很有诱惑力的。
- function f(x,y){
- with(Math){
- return min(round(x),sqrt(y));//抽象引用
- }
- }
事实上,javascript 对待所有的变量都是相同的。javascript 从最内层的作用域开始向外查找变量。with 语言对待一个对象犹如该对象代表一个变量作用域,因此,在 with 代码块的内部,变量查找从搜索给定的变量名的属性开始。如果在这个对象中没有找到该属性,则继续在外部作用域中搜索。with 块中的每个外部变量的引用都隐式地假设在 with 对象(以及它的任何原型对象)中没有同名的属性。而在程序的其他地方创建或修改 with 对象或其原型对象不一定会遵循这样的假设。javascript 引擎当然不会读取局部代码来获取你使用了那些局部变量。javascript 作用域可被表示为高效的内部数据结构,变量查找会非常快速。但是由于 with 代码块需要搜索对象的原型链来查找 with 代码里的所有变量,因此,其运行速度远远低于一般的代码块。
替代 with 语言,简单的做法,是将对象绑定在一个简短的变量名上。
- function status(info){
- var w = new Widget();
- w.setBackground("blue");
- w.setForeground("white");
- w.setText("Status : "+info);
- w.show();
- }
其他情况下,最好的方法是将局部变量显式地绑定到相关的属性上。
- function f(x,y){
- var min = Math.min,
- round = Math.round,
- sqrt = Math.sqrt;
- return min(round(x),sqrt(y));
- }
1.3 熟练掌握闭包
理解闭包有单个概念:
a)javascript 允许你引用在当前函数以外定义的变量。
- function makeSandwich(){
- var magicIngredient = "peanut butter";
- function make(filling){
- return magicIngredient + " and " + filling;
- }
- return make("jelly");
- }
- makeSandwich();// "peanut butter and jelly"
b)即使外部函数已经返回,当前函数仍然可以引用在外部函数所定义的变量
- function makeSandwich(){
- var magicIngredient = "peanut butter";
- function make(filling){
- return magicIngredient + " and " + filling;
- }
- return make;
- }
- var f = sandwichMaker();
- f("jelly"); // "peanut butter and jelly"
- f("bananas"); // "peanut butter and bananas"
- f("mallows"); // "peanut butter and mallows"
javascriptd 的函数值包含了比调用它们时所执行所需要的代码还要多的信息。而且,javascript 函数值还在内部存储它们可能会引用的定义在其封闭作用域的变量。那些在其所涵盖的作用域内跟踪变量的函数被称为闭包。
make 函数就是一个闭包,其代码引用了两个外部变量:magicIngredient 和 filling。每当 make 函数被调用时,其代码都能引用这两个变量,因为闭包存储了这两个变量。
函数可以引用在其作用域内的任何变量,包括参数和外部函数变量。我们可以利用这一点来编写更加通用的 sandwichMaker 函数。
- function makeSandwich(magicIngredient){
- function make(filling){
- return magicIngredient + " and " + filling;
- }
- return make;
- }
- var f = sandwichMaker("ham");
- f("cheese"); // "ham and cheese"
- f("mustard"); // "ham and mustard"
闭包是 javascript 最优雅、最有表现力的特性之一,也是许多习惯用法的核心。
c)闭包可以更新外部变量的值。事实上,闭包存储的是外部变量的引用,而不是它们的值的副本。因此,对于任何具有访问这些外部变量的闭包,都可以进行更新。
- function box() {
- var val = undefined;
- return { set: function(newval) {
- val = newval;
- },
- get: function() {
- return val;
- },
- type: function() {
- return typeof val;
- }
- };
- }
- var b = box();
- b.type(); //undefined
- b.set(98.6);
- b.get(); //98.6
- b.type(); //number
该例子产生一个包含三个闭包的对象。这三个闭包是 set,type 和 get 属性,它们都共享访问 val 变量,set 闭包更新 val 的值。随后调用 get 和 type 查看更新的结果。
1.4 理解变量声明提升
javascript 支持此法作用域(对变量 foo 的引用会被绑定到声明 foo 变量最近的作用域中),但不支持块级作用域(变量定义的作用域并不是离其最近的封闭语句或代码块)。
不明白这个特性将会导致一些微妙的 bug:
- function isWinner(player,others){
- var highest = 0;
- for(var i = 0,n = others.length ;i<n;i++){
- var player = others[i];
- if(player.score > highest){
- highest = player.score;
- }
- }
- return player.score > highest;
- }
1.5 当心命名函数表达式笨拙的作用域
- function double(x) {
- return x * 2;
- }
- var f = function(x) {
- return x * 2;
- }
同一段函数代码也可以作为一个表达式,却具有截然不同的含义。匿名函数和命名函数表达式的官方区别在于后者会绑定到与其函数名相同的变量上,该变量作为该函数的一个局部变量。这可以用来写递归函数表达式。
- var f = function find(tree,key){
- //....
- return find(tree.left , key) ||
- find(tree.right,key);
- }
值得注意的是,变量 find 的作用域只在其自身函数中,不像函数声明,命名函数表达式不能通过其内部的函数名在外部被引用。
- find(myTree, "foo"); //error : find is not defined;
- var constructor = function() {
- return null;
- }
- var f = function() {
- return constructor();
- };
- f(); //{}(in ES3 environments)
该程序看起来会产生 null,但其实会产生一个新的对象。
因为命名函数变量作用域内继承了 Object.prototype.constructor(即 Oject 的构造函数),就像 with 语句一样,这个作用域会因 Object.prototype 的动态改变而受到影响。在系统中避免对象污染函数表达式作用域的办法是避免任何时候在 Object.prototype 中添加属性,以避免使用任何与标准 Object.prototype 属性同名的局部变量。
在流行的 javascript 引擎中另外一个缺点是对命名函数表达式的声明进行提升。
- var f = function g() {
- return 17;
- }
- g(); //17 (in nonconformat environment)
一些 javascript 环境甚至把 f 和 g 这两个函数作为不同的对象,从而导致不必要的内存分配。
1.6 当心局部块函数声明笨拙的作用域
- function f() {
- return "global";
- }
- function test(x) {
- function f() {
- return "local";
- }
- var result = [];
- if (x) { result.push(f());
- } result.push(f()); result result;
- }
- test(true); //["local","local"]
- test(false); //["local"]
- function f() {
- return "global";
- }
- function test(x) {
- var result = [];
- if (x) {
- function f() {
- return "local";
- } result.push(f());
- } result.push(f()); result result;
- }
- test(true); //["local","local"]
- test(false); //["local"]
javascript 没有块级作用域,所以内部函数 f 的作用域应该是整个 test 函数。一些 javascript 环境确实如此,但并不是所有 javascript 环境都这样,javascript 实现在严格模式下将这类函数报告为错误(具有局部块函数声明的处于严格模式下的程序将报告成一个语法错误),有助于检测不可移植代码,为未来的标准版本在给局部块函数声明给更明智和可以的语义。针对这种情况,可以考虑在 test 函数内声明一局部变量指向全局函数 f。
来源: