第一章.进入忍者的世界(1.Enter the ninja)[完成]

翻译 Secrets of the JavaScript Ninja (JavaScript忍者禁术)

第一章 进入忍者的世界(1.Enter the ninja)

本章重点:

1.介绍本书的目的和结构

2.我们将要关注的类库,我们将要讲解的比较cool的亮点都会在这些类库中找到具体的实现。

3.什么是JavaScript的高级编程(世界级的开发者用什么方式来编写JavaScript)

4.什么是跨浏览器编程

5.展示测试组件(如何测试你的代码)

目录链接:http://yannhe.com/secrets-of-the-javascript-ninja-javascript

本文链接:http://yannhe.com/1-enter-the-ninja

如果你在阅读本书,你一定使用过JavaScript,你一定会感到编写有效并且可以跨浏览器的JavaScript代码并不轻松。

我们的挑战,除了要写出干净的代码,还要考虑不同浏览器之间的差异。

为了可以解决这些复杂问题,我们想到将可重用的功能以类库的形式实现。

这些类库,虽然彼此之间很不同,但是他们的统一原则是:

它们要很容易的被使用,构建的开支要尽量的小,并且可以在所有的浏览器中正常运行。

通过分析这些类库的构造,我们可以学习到很多非常牛逼的经验,如果你可以学以致用,你一样可以构建出同样牛逼的代码。

本书将那些世界级的大牛写的代码融合在一起,目的就是想为你开启探索JavaScript精髓的大门。

1.1 JavaScript类库 #

在本书中,到处都是一些有趣的技术和代码示例,目的是想通过这些技术和示例让你体会到其背后的思想和理念。

那些世界级的类库,正是基于这些思想构建和理念构建而成。

它们是:

·Prototype(http://prototypejs.org/):2005年由现代JavaScript库教父Sam Stephenson创建并发布的。封装了DOM,Ajax和event事件功能,此外还有涉及到面向对象编程技术、面向方面编程技术和函数式编程技术。

·jQuery(http://jquery.com):2006年1月由John Resig发布,通过CSS选择器来匹配DOM这种技术也因此库而流行起来。还包括:DOM,Ajax,event,等灵活的功能。

现在,这两个库统治者JavaScript类库市场,被无数web站点和个人使用。

除了这两个类库,我们还会提到两个类库:

·Yahoo UI(http://developer.yahoo.com/yui/):由雅虎公司在2006年2月公开发布,是其公司内部开发的JavaScript框架。包含DOM、Ajax、事件和动画处理能力,除此之外还有一系列预先构建好的小部件(日历、网格、手风琴折叠控件)

·base2(http://code.google.com/p/base2/):由Dean Edwards创建并于2007年3月发布,支持DOM和事件功能。它名声鹊起的原因是它试图用一种通用的、跨浏览器的方式实现各种W3C规范。

所有这些库,都是世界级的,构建精良,历经沉淀。因此,这些库都是值得深入学习的。

但是,这些技术并不只是为了用于构建大型的类库,而是适用于任何规模的JavaScript代码。

构建JavaScript类库需要重点关注三个方面:

1.如何用一种卓越的方式编写JavaScript

2.全面实用的跨浏览器代码

3.如何将所有涉及到的技术整合在一起

1.2 理解JavaScript这门语言 #

很多JavaScript开发者(包括那些有很多年工作经验的JavaScript coder),都对自己的JavaScript的编程水平没有一个清醒的认知。

他们以为牛逼的JavaScript代码就是要用很多JavaScript的特色元素,

例如用很多的对象和函数,甚至是匿名函数。

但是真实的情况是,这些技巧并不是所谓的JavaScript高级编程,这些都是花拳绣腿的假把式。

还有一点值得一提的是,他们对闭包(closures)这个概念的理解极其的匮乏,包括闭包的目的和实现。

其实在JavaScript这门语言中,闭包是个十分重要的概念。

由于闭包的存在,函数才能在JavaScript中显得如此基本和重要。

在JavaScript中,对象(objects),函数(functions)-在JavaScript中函数是自然类型的元素(first class elements)和闭包(closures)之间拥有十分紧密的关系。

1-1.jpg

深刻理解他们之间的关系,可以提高我们的JavaScript编程能力。这可以视为JavaScript编程的基础内功。

很多JavaScript开发者,尤其那些之前使用例如Java,C++这种面向对象语言的开发者,

他们可能会过多的关注对象(objects)而忽视了函数(functions)和闭包(closures)所发挥的价值。

另外还有两个经常在JavaScript开发中遇到,但没有被充分利用的概念:定时器(timers)和正则表达式(regular expressions)。这两个概念会经常的被用到,但是由于经常被误解,他们的真正的能量没有完全的发挥出来。

对我们来说定时器在浏览器中的执行原理是一个很神秘的事,但是如果真正理解了它的本质,我们就可以编写出这样一些复杂的情景的代码:常驻的运算能力,平滑的动画效果。

另外如果能真正的理解正则表达式,可以让你将一些复杂又零碎的工作,变得简单和高效。

在JavaScript高级编程的旅程中,我们会遇到with和eval()这两个概念,他们分别在第10章和第9章。

这两个概念被大部分JavaScript开发者忽视,误用,甚至是全盘否定。

但看一下那些世界级的开发者的代码,我们会了解到,当这些特性被适当的使用时候,它们可以创造出不可思议的代码。

如果你想将JavaScript玩的发烧一些,我们可以利用他们来进行有趣的元编程,我们可以通过改造JavaScript本身,创造出你想要的语言。

通过学习这些内容,你可以不断的升级你的编程能力。

将我们所学的这些概念和亮点结合在一起,我们将拥有很强的的理解力和编写稳定并且跨浏览器的代码的能力。

1.3 介绍跨浏览器编程(Cross-browser considerations) #

当我们具备了很好的JavaScript编程能力之后,并想利用他们开发一个基于浏览器的应用的时候,我们经常会陷入各种因为浏览器的差异导致的困境之中。

浏览器之间之间相距甚远,他们有很多的问题,bug,未实现的API。

我们需要一个综合的对策来应付这些浏览器差异性导致的问题。

我们在本书中使用的最终对策是基于雅虎公司的浏览器分级概念,叫做浏览器分级支持(Graded Browser Support)。

雅虎为他们希望支持的浏览器分了不同的等级,如下所示:

.A:最高支持力度,在这一级中的浏览器,会得到最全面的支持和最强大的功能和测试。

.C:很小的支持力度,这里的浏览器一般都是比较旧的,并且是很难用的。通常只会为这种浏览器提供Html和CSS,没有JavaScript

.X:不支持,一般都是未知浏览器

1-2.jpg

1.4 最佳实践 #

如果你想称为最佳的JavaScript开发者,良好的编程和跨浏览器能力是不够的,你还需要拥有测试能力,性能分析能力和debug能力。

让我们来看看一些实践:

1.4.1 最佳实践:测试(testing) #

assert()函数,即:断言函数,这是一个用于测试的功能函数,他的目的是判断传入次函数的第一个参数是true还是false。

一般代码结构如下:

assert(condition, message);

如果condition如果不为true,message就会被显示出来,例如:

assert(a == 1, “Disaster! A is not 1!”);

如果a不等于1那么后面的那句话就会显示出来。

由于assert函数并不是JavaScript的内置函数,所以我们要自己实现一个assert函数,我们会在第二章来讨论。

1.4.2 最佳实践: 性能分析(performance analysis) #

另一个很重要的实践是性能分析。我们会自己实现一个函数来分析我们自己写的代码的性能。

例如:

perf(“String Concatenation”, function(){

var name = “fred”;

for (var i = 0; i < 20; i++){

name += name;

}

})

在复杂的浏览器环境下开发我们的JavaScript应用,拥有一套完整的开发技巧是很必要的。

1.5 总结 #

跨浏览器编程是很困难的,比大多数人想象的还要困难。

为了搞定它,除了成为JavaScript这们语言的大师,我们还要了解浏览器的知识,这样才能写出健壮的最佳代码。

面对JavaScript编程的这些困难的挑战,已经有一些勇敢的灵魂为我们作出了贡献:他们就是类库开发者。

在这些类库蕴含的光芒的指引下,我们会一步一步攀登,最终成为世界级的JavaScript开发者。

这段旅程将会是丰富,受益的。

让我们开始有趣的探索吧。

(转载本文章请注明作者和出处 Yann (yannhe.com),请勿用于任何商业用途)

 
153
Kudos
 
153
Kudos

Now read this

第六章.原型与面向对象(6.Object-orientation with prototypes)[完成]

翻译 Secrets of the JavaScript Ninja (JavaScript忍者禁术) 第六章.原型与面向对象(6.Object-orientation with prototypes) 本章重点: 1.利用函数实现构造器 2.解释prototyes 3.利用prototypes实现对象的扩展 4.avoiding common gotchas 5.利用inheritace构建classes... Continue →