当前位置:首页 > 经验 >

javascript全套自学教程(javascript语言入门自学)

来源:原点资讯(www.yd166.com)时间:2022-11-01 09:48:26作者:YD166手机阅读>>

你应该已经知道,没有什么简单方法可以创建有效且跨浏览器的JavaScript 代码,除了编写整洁代码的常规挑战外,我们还要额外应对各种浏览器的差异和复杂性。为了应对这些挑战,JavaScript开发人员通常使用JavaScript库来实现通用和可重用的功能。

这些库虽然在方法、内容和复杂性方面有很大差异,但唯一不变的是:它们都需要简单易用,产生最少的开销,并能兼容所有浏览器,这些都是我们所希望的。

1. 即将探索的JavaScript库

创建现代JavaScript库所用到的技术和实践是我们所关注的焦点。我们要选择一个最重要的库,当然就是jQuery,其已经跃升为目前最普遍使用的JavaScript库了。

jQuery(http://jquery.com)由John Resig创建,并在2006年1月发布。jQuery将用于匹配DOM内容的CSS选择器进行了普及。在众多功能中,它还提供了DOM操作、Ajax、事件处理以及动画功能。

jQuery已经主导了JavaScript库的市场,它被用于成千上万的网站,数以百万计的用户与之交互。通过大量的使用和反馈,该库一直在精练——继续优化——成为目前我们正在使用的最优代码。

除了研究jQuery示例代码以外,我们也会了解以下库所利用的技术。

※Prototype(http://prototypejs.org/)——现代JavaScript库之父,Sam Stephenson于2005年创建并发布。除了面向对象编程、面向切面编程以及函数式编程技术以外,该库还包含了DOM、Ajax和事件功能。

※Yahoo!UI(http://developer.yahoo.com/yui)——雅虎内部JavaScript框架发展的结果,在2006年2月向公众发布。除了一些预先定义的部件(日历、网格、手风琴等)以外,Yahoo !UI(YUI)还包括DOM、Ajax、事件以及动画功能。

※base2(http://code.google.com/p/base2)——由Dean Edwards创建,于2007年3月发布。该库支持DOM和事件功能。它的闻名之处在于它尝试以通用且跨浏览器的方式实现各种W3C规范。

这些库都经过了全面的构建并且解决了目标问题。基于这些原因,这些库对于我们进一步分析并理解代码库的基础建设,从而洞察世界级JavaScript库建设的过程打下了良好的基础。

但是这些技术,并不只用于构建大型库;它们也可以应用于所有的JavaScript代码,且无论代码大小。

一个JavaScript库的组成可以分为如下三个方面。

※ JavaScript语言的高级使用。

※ 跨浏览器代码的精心构建。

※ 当前能够聚众合一的最佳实践应用。

针对每个库,我们会仔细分析这三个方面,从而收集整理完整的知识体系,以便创建自己的高效JavaScript代码。

2. 理解JavaScript语言

很多JavaScript程序员,在工作中不断进步,直到能够熟练使用大量的JavaScript语言元素,包括对象、函数(如果他们始终关注编码趋势)甚至是匿名内联函数。然而,在许多情况下,这些技巧可能并没有超出基础水平。此外,这些程序员,通常对JavaScript中闭包(closures)的目的和实现有着非常匮乏的理解,而闭包从根本上例证了函数对于该语言的重要性。

JavaScript中,对象、函数和闭包之间有着很密切的关系(如图1.1所示)。理解这三个概念之间的牢固关系,可以大大提高我们的JavaScript编程能力,为我们进行任意类型程序的开发打下坚实的基础。

javascript全套自学教程,javascript语言入门自学(1)

图1.1 JavaScript中,对象、函数和闭包之间的密切关系

很多JavaScript开发人员,尤其是有面向对象背景的开发人员,可能会更多地关注对象,但却没有了解函数和闭包对于整个程序的作用。

除了这些基本概念,还有两个JavaScript特性远远未被充分利用:定时器和正则表达式。这两个概念,几乎在任何程序的JavaScript代码中都有,但由于易于被误解,因此它们并没有发挥全部潜力。

熟练掌握定时器如何在浏览器内运行(通常很神秘的),可以让我们有能力解决复杂的编码任务,如长时间运行的计算和平滑的动画。而理解正则表达式是如何工作的,可以让我们简化原本相当复杂的代码段。

作为JavaScript语言之旅的另一个高潮,我们将研究第10章中的with语句,以及第9章中有争议的eval()方法——两个重要但是具有争议的语言特性,这两个特性已经被滥用、误用,甚至有很多JavaScript程序员对其怨声载道。

注意:

持续关注Web开发技术发展趋势的人会知道这两个主题是有争议的,在未来版本的JavaScript中会被弃用或者被限制使用。 但由于在现有代码中可能会遇到这些概念,所以即使在将来的代码中不使用它们,理解它们也是非常重要的。

观察一些高级JavaScript程序员的工作,我们将会看到,恰当使用一些高级语言特性可以创建一些神奇的代码片段,而其他方式则往往不太可能。在很大程度上,这些高级特性也可以用于一些有趣的元编程练习,将JavaScript代码编写成任意我们想要的。

学习如何高效使用高级语言特性,以及如何发挥其最大优势,将代码质量提升到更高的水平。提升我们运用这些概念和特性的能力,提高我们的理解力,熟练掌握如何创建任意类型的JavaScript应用程序。这些基础知识,将为我们开始编写稳定跨浏览器代码的道路奠定坚实的基础。

3. 跨浏览器注意事项

完善JavaScript编程技能将引导我们不断前行,尤其是目前,除了浏览器端以外,JavaScript还能够使用Rhino、V8或Node.js库等JavaScript引擎在服务器端运行。但开发基于浏览器的JavaScript应用程序时,越早越好的是,我们首先要应对:浏览器及其令人恼火的问题和矛盾。

理想世界中,所有的浏览器中都没有bug,并且支持以一致的方式支持Web标准,但是我们都知道我们并不生活在这种世界里。

近来浏览器的质量已经有了大大改善,但仍有一些bug、缺失的API和不同浏览器的特定缺陷,我们需要解决这些问题。制定解决这些浏览器问题的综合性策略并熟悉不同浏览器之间的区别和缺陷,和精通JavaScript本身同等重要。

对于这些差异,在编写浏览器应用程序或JavaScript库时,决定支持哪些浏览器是一个重要考虑事项。我们可能想支持所有的浏览器,但却受限于开发和测试的资源限制。那么,我们如何决定支持哪些浏览器,支持到什么程度?

有一个方法,是来自古老Yahoo!的一个松耦合方式,称为分级浏览器支持(graded browser support)。在这种技术中,我们创建一个浏览器支持矩阵,作为记录浏览器和其平台的重要性的快照。

在这样一个表格中,我们在一个轴上列出目标平台,在另外一个轴上列出浏览器。然后,在每个单元格中,对每个浏览器/平台组合,我们给出一个“等级”(从A到F,或者是其他能够满足我们需要的评分系统)。

注意,我们还没有填写任何等级。如何对特定平台和浏览器分配等级,完全取决于项目的需要和需求,以及其他重要的因素,例如目标受众的组成。使用这种方式,我们制定出相应平台/浏览器重要性的等级,并将这些信息和成本进行结合,尝试找出最优化的浏览器支持。我们将在第11章更深入地探索这些内容。

由于支持大部分的平台和浏览器组合是不切实际的,因此我们必须权衡支持各种浏览器的成本与收益。任何类似的分析,都必须要考虑多个因素,主要有如下几点。

※目标受众的期望和需求。 ※浏览器的市场份额。 ※览器所需的工作量。

第一点是主观的,只有具体项目才能够确定。第二点是市场份额,可以通过互联网信息得到。支持每个浏览器的工作量,可以通过考虑该浏览器的功能和对现代浏览器标准的遵守情况进行粗略估计。

图1.2所示的图表,展示了主流浏览器的使用情况(信息来自2012年8月的StatCounter)以及我们对排名靠前的桌面浏览器开发成本的个人建议。

javascript全套自学教程,javascript语言入门自学(2)

图1.2 各种桌面浏览器的支持成本与收益分析,揭示了我们要努力的方向

图表以“收益”与“成本”的方式进行展示,大概一看就可以知道怎么做“最划算”。跳出该图表,如下还有几点要注意的事项。

尽管与标准兼容的浏览器相比,支持IE 7和IE 8需要更多的工作量,但它们仍然有很大的市场份额,如果这些用户是我们程序的一个重要目标观众,那么这些额外的工作就是值得的。

IE 9,在标准兼容性方面取得明显进展,与之前的IE版本相比更容易得到支持,并已经取得了一定的市场份额。

支持Firefox和Chrome是显而易见的,因为它们有很大的市场份额,并且很容易支持。

尽管Safari浏览器的市场份额相对较低,它仍然值得支持,因为它符合标准的特性使得其支持成本很小(作为一个经验法则,如果能在Chrome浏览器下使用,那也就能在Safari下使用——尽管是在推理情况下)。

Opera,虽然需要的工作量比Safari还少,但因为它的市场份额很小,所以可以从桌面浏览器市场上忽略它。但如果移动平台对你来说很重要,移动版的Opera则可以发挥更大的作用,如图1.3所示。

javascript全套自学教程,javascript语言入门自学(3)

图1.3 移动市场,开发成本和收益相当,实际源于统计数据

对于IE 6,真的没什么可说的了。(参见www.ie6countdown.com。)

看一下移动市场,情况就完全不同了,如图1.3所示。

当然,任何事情都不是那么枯燥。也许更恰当的说法是,好处比成本更重要,但这最终要看决策者的选择,他们要考虑市场需求和其他业务问题等因素来制定决策。但量化成本和收益是做出这些重要支持决策的一个良好起点。

另外,要注意,市场份额和支持成本的变化是很迅速的。密切关注像http://gs.statcounter.com这样的网站不失为一个明智的预防措施。

资源受限组织的另一个潜在因素是开发团队的技能。开发应用程序的主要原因就是让最终用户使用,开发人员可能需要发展必要的技能来开发该应用程序,以满足最终用户的需求。在成本分析阶段就需要考虑这些因素。

跨浏览器开发的成本,主要取决于开发人员的技能和经验,所以让我们首先来看一下当前的最佳实践。

4. 当前最佳实践

掌握JavaScript语言和跨浏览器编码问题是成为Web应用程序开发专家的重要条件,但它们并不是全部。要进军专家行列,还需要秀出以下很多开发人员之前都已经掌握的高质量代码。我们将在第2章深入研究这些被称为最佳实践(best practices)的特征,除了熟练掌握语言外,还包括如下元素。

※ 测试。

※ 性能分析。

※ 调试技巧。

在我们的编程过程中,时常遵守这些最佳实践是极其重要的;跨浏览器开发的复杂性也直接证明了这一点。让我们来看看这些实践。

4.1 当前最佳实践:测试

我们将使用大量的测试技术,以确保示例代码的运行符合我们的预期,同样也作为测试一般代码的示例。对于测试,我们将使用的一个主要工具是assert()函数,其目的是断言代码是true还是false。

该函数的一般形式是:

javascript全套自学教程,javascript语言入门自学(4)

首页 12下一页

栏目热文

javascript开发手册(javascript官方手册)

javascript开发手册(javascript官方手册)

JavaScript 是世界上最流行的编程语言之一。我相信这是您第一个绝佳选择的编程语言。我们主要使用JavaScrip...

2022-11-01 10:18:23查看全文 >>

javascript 菜鸟教程(javascript基础语法菜鸟教程)

javascript 菜鸟教程(javascript基础语法菜鸟教程)

/* * 创建文本框 * _id:文本框编号 * _text:文本框上的文字 * _x:文本框的x位置 * _y:文本...

2022-11-01 10:15:53查看全文 >>

javascript快速入门教程(javascript学习方法)

javascript快速入门教程(javascript学习方法)

JavaScript(通常缩写为JS)是一种解释型、面向对象、多范式的高级编程语言。它被世界上的绝大多数网站所使用,也被...

2022-11-01 09:32:09查看全文 >>

js教程从入门到精通(编程必背50个代码)

js教程从入门到精通(编程必背50个代码)

目录一个简单vue应用的创建选择什么方式创建vue应用创建项目结构分析运行vue.js知识点的学习vue.js是怎么构成...

2022-11-01 10:08:48查看全文 >>

js100个经典实例(js编程100例)

js100个经典实例(js编程100例)

《大数据和人工智能交流》头条号向广大初学者新增C 、Java 、Python 、Scala、javascript 等目...

2022-11-01 09:34:43查看全文 >>

javascript实例教程(javascript 开发实例)

javascript实例教程(javascript 开发实例)

摘要: 本篇文章教你如何使用JavaScript在浏览器中完整地定义、训练和部署机器学习算法。虽然它可能不是机器学习传统...

2022-11-01 09:33:58查看全文 >>

javascript教程零基础(javascript全套教程)

javascript教程零基础(javascript全套教程)

怎么自学javascript?下面本篇文章就来给大家介绍一下系统学习JavaScript的方法。有一定的参考价值,有需要...

2022-11-01 10:20:49查看全文 >>

菜鸟教程javascript(零基础javascript教程)

菜鸟教程javascript(零基础javascript教程)

0x1. 起因得到 APP 中有个文稿模块,这部分是内嵌的前端开发的 Web 页面,支持在客户端和微信中访问,其中有一个...

2022-11-01 10:17:36查看全文 >>

js教程案例(js基础的简单例子)

js教程案例(js基础的简单例子)

小编为大家收集了11个web前端开发,大企业实战项目案例 5W行源码!拿走玩去吧!获取途径:转发 关注并私信小编:“前端...

2022-11-01 10:01:34查看全文 >>

javascript从入门到精通(javascript全套教程)

javascript从入门到精通(javascript全套教程)

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页...

2022-11-01 09:44:43查看全文 >>

文档排行