《现代javscript编程》由会员分享，可在线阅读，更多相关《现代javscript编程（16页珍藏版）》请在金锄头文库上搜索。
1、现代 javscript 编程第 1 页 摘要第 2 页 面向对象的 JavaScript第 3 页 测试你的代码第 4 页 为分发而进行的封装第 5 页 不唐突的 DOM 脚本编程第 6 页 Ajax第 7 页 浏览器支持阅读前：Pro Javascript Techniques 翻译连载说明和目录JavaScript 的演化是渐进而稳固的。历经过去十年的进程，JavaScript 在人们的认知里已经从一门简单的玩物式的语言逐渐发展成为一门倍受推崇的编程语言，被全世界的公司和开发者用来构造种种不可思议的应用。现代 JavaScript 编程语言一如既往地可靠、健壮，强大得令人难以置信。在本书
2、中我进行的许多论述，将揭示是什么使得现代 JavaScript 应用程序与从前有着那么明显的不同。本章中出现的许多概念远不能算新奇，然而成千上万聪明的程序员的认同促使它们的运用得以升华并最终形成今天的格局。既如此，我们干脆这就来着眼现代 JavaScript 程序设计。第一章：现代 javscript 编程本书试图完全包括所有现代、专业的 JavaScript 编程技术，以期它们被从独立开发者到大型公司的每一个人使用，使得其代码更加可用、可读、具有交互性。在这一章里我们对这本书里将会出现的每一个知识点做了一个简短的总览。这包括专业 JavaScript 编程的基础：编写面象对代码，测试代码，为
3、分发而进行封装。随后你看到了 Unobtrusive DOM 脚本编程的主要方面，包括一个关于文档对象模型，事件，JavaScript与 CSS 交互的简短的总览。最后你看到了 Ajax 背后的前提和在现代浏览器中 JavaScript 的支持。这些话题加在一起，足够带你步入专业级 JavaScript 程序员的行列。面向对象的 JavaScript从语言的视角来看，面向对象的程序设计和面向对象的 JavaScript 语言绝对不是什么摩登的东西；JavaScript 最开始就是被设计成一种彻底的面向对象语言。然而，随着JavaScript 在其使用和接受的过程中的“逐步发展” ，其它语言(
4、如 Ruby,Python,和 Perl 等)的程序员留意到了它并开始将他们的编程模式引入了 JavaScript。面向对象的 JavaScript 代码的外观和内部运作都有别于其它具有对象能力的语言。在第二章我将深入论述使它如此独特的方方面面，而在这里，先来看一点基础的东西以体会编写现代 JavaScript 代码的初步感觉。程序 1-1 中的两个对象构造器的例子，演示了可用于学校课程的简单的对象搭配。程序 1-1. 课程和课程表的面向对象 JavaScript 表述/类 Lecture 的构造器/使用两个字符串参数，name 和 teacherfunction Lecture( name,
5、 teacher ) /把它们作为对象的本地属性保存this.name = name;this.teacher = teacher;/类 Lecture 的方法，生成一个显示该课程信息的字符串Lecture.prototype.display = function()return this.teacher + is teaching + this.name;/类 Schedule 的构造器/使用一个 lectures 类型的数组作为参数function Schedule( lectures ) this.lectures = lectures;/类 Schedule 的方法，用来构造一个描述该
6、课程表的字符串Schedule.prototype.display = function()var str = ;/遍历每门课程，累加构成信息字符串for ( var i = 0; i 指针无须任何变动就能正常工作的能力是开发一个成功的 JavaScript 库的精诣所在。开发者用以保持代码清洁和普遍兼容的的技术或解决方案有许多种。使用命名空间是广泛使用的保证代码不与其它 JavaScript 代码互相影响和抵触的一种技术。这方面一个极端的（但未必是最好或最有用的）运作中的例子就是 Yahoo开发的任何人都可使用的用户界面库。使用该库的一个示例见程序 1-3.程序 1-3. 使用重度名称空间化
7、的 YahooUI 库给一个元素添加事件/给 ID 为body的元素添加 mouseover 事件监听器YAHOO.util.Event.addListener(body,mouseover,function()/and change the background color of the element to redthis.style.backgroundColor = red;);然而，这种命名空间方法存在一个问题，即库与库之间在构造和使用的方式上缺乏内在的一致性。正是在这一点上，中心代码仓库如 JSAN(JavaScript Archive Network)变得非常有用。JSAN 提供
8、一套代码库需遵从的一致规则，以及一种快捷导入代码所依赖的其它库的方式。图 1-2 展示了 JSAN 的主分发中心的一个截屏。图 1-2. 公共代码仓库 JSAN 的截屏我将在第三章阐述开发清洁的可封装代码的细节。此外，其它常见的事故多发点如事件处理冲突，将在第六章论述。Unobtrusive DOM 脚本编程基于一个优良的可测试的核心创建你的代码和兼容的分发，是 Unobtrusive DOM脚本编程的基本概念。编写 unobtrusive 代码意味着与你的 HTML 内容的彻底分离：数据来自服务器，而 JavaScript 代码用来使其动态化。达到这一彻底分离的最重要的副作用就是你的代码在不
9、同的浏览器之间可以完美的升/降级。利用这一点，你可以提供高级的内容给支持它的浏览器，而在不支持的浏览器上从容隐藏之。编写现代的、Unobtrusive 代码包括两个方面：文档对象模型(DOM)和 JavaScript事件。本书中我对这两个方面都将作深入的解释。文档对象模型DOM 是表示 XML 文档的流行的方法。它未必是最快的、最轻便的、或者最易使用的，却是是最普及的，绝大多数 web 开发语言（如 Java，Perl，PHP，Ruby，Python，及Javascript)都实现了对它的支持。DOM 旨在为开发者提供一种直观的方式来导航于XML 的层次结构中。因为有效的 HTML 只是 XM
10、L 的一个子集，保有一个方式来有效地解析和浏览 DOM 文档对于简化 JavaScript 开发来说是必不可少的。从根本上讲，出现在 JavaScript 中的大多数的交互是发生在 JavaScript 与页面所包含的不同 HTML 元素之间的；DOM 是使这此过程简单化的卓越工具。程序 1-4 展示了使用 DOM 在页内导航和查找不同的元素然后操作它们的一些例子。程序 1-4. 使用文档对象模型定位并操纵不同的 DOM 元素Introduction to the DOM/直到文档完全载入，我们才能操作 DOMwindow.onload = function() /找到文档中所有的元素var
11、li = document.getElementsByTagName(li); /然后给它们全部加上边框for ( var j = 0; jIntroduction to the DOMThere are a number of reasons why the DOM is awesome,here are some: It can be found everywhere.Its easy to use.It can help you to find what you want,really quickly.DOM 是开发 UnobtrusiveJavaScript 代码的第一步。借助简单快速
12、导航 HTML 文档的能力，所有随之而来的 JavaScript/HTML 交互将变得如此简单。事件事件将一个应用程序之内所有的用户交互结合在一起。在一个设计良好的JavaScript 应用程序里，你将拥有数据源和它的视觉的表示(在 HTML DOM 内部)。为了同步这两个方面，你必须监视用户的交互动作并试图相应地更新用户界面。使用 DOM和 JavaScript 事件的结合是使得现代 web 应用程序赖以工作的基本组合。所有的现代浏览器都提供一系列的只要特定交互动作发生即被触发的事件，如用户移动鼠标，敲击键盘，或离开页面等等。使用这些事件，你可以注册代码到特定事件，一旦该事件发生，你的代码就
13、会被执行。程序 1-5 展示了这种交互的一个实例，该网页中的元素在用户鼠标经过的时候会改变背景色。程序 1-5. 使用 DOM 和事件来提供一些视觉效果Introduction to the DOM/直到文档完全载入，我们才能操作 DOMwindow.onload = function()/查找所有的元素，附以事件处理程序var li = document.getElementsByTagName(li);for ( var i = 0; i 元素上，/该程序改变背景颜色为蓝色lii.onmouseover = function() this.style.backgroundColor = b
14、lue;/将鼠标移出事件处理程序附在 元素上，/该程序将的背景颜色改回白色lii.onmouseout = function() this.style.backgroundColor = white;Introduction to the DOMThere are a number of reasons why the DOM is awesome, here are some:It can be found everywhere.Its easy to use.It can help you to find what you want,really quickly.JavaScript 事件
15、是复杂多样的。本书中的大多数代码或应用程序都以某种方式利用了事件。第六章和附属完全专注于事件及其交互。JavaScript 与 CSS动态 HTML 建立在 DOM 和事件交互的基础上。在核心层面上，动态 HTML 表示发生在 JavaScript 和附着在 DOM 元素上的 CSS 信息的交互。层叠式样式表(CSS)作为布局的标准服务于简单的不唐突的网页，在最小化了用户端兼容性问题的同时，提供给开发者以强大的可控制性。从根本上讲，动态 HTML 就是探索 JavaScript 和 CSS 彼此交互作用时能够达到什么以及怎样最好地利用该联合达成令人印象深刻的效果。更高级的交互示例如拖放元素和动
16、画效果见第七章。在那里我将围绕它们展开深入论述。Ajax，或曰异步 Javascript 与 XML，是由 Adaptive Path 公司的创办人之一兼董事长Jesse James Garrett 在其论文Ajax:Web 应用程序的新途径(http:/ . archives/000385.php)中创造的一个术语。它描述了请求和提交额外的信息时发生于客户和服务器之间的高级交互。术语 Ajax 包括了许多种数据据通讯的可能组合，但它们都围绕一个中心前提：附加的数据请求是在页面完全载入之后由客户端向服务器发起的。这允许应用程序开发者超越缓慢的、传统的应用程序流程，创建与用户相关的额外交互。图 1-3 是来自Garrett 的 Ajax 论文的一个图示，说明了应用程序中由于额外的请求发生
