原文地址:How browsers work

简介

Web浏览器恐怕是用户最多的软件了。本文将介绍浏览器的工作原理。想知道从你在地址栏中输入“google.com”,到窗口中显示Google主页的过程中都发生了什么?本文会为你揭开这个秘密。

要讨论的浏览器

今天,人们主要使用5种浏览器:Internet Explorer、Firefox、Safari、Chrome和Opera。这篇文章的分析源自开源浏览器——Firefox、Chrome和Safari,Safari是部分开源的。根据W3C对浏览器使用情况的统计信息,当前(2009年10)Firefox、Safari和Chrome共同的市场占有率已接近60%。因此,可以说开源浏览器已经占据了浏览器市场的半壁江山。

浏览器的主要功能

浏览器的主要功能就是呈现你选择的网络资源,换句话说,就是你向服务器请求资源,然后浏览器把它们显示在自己的窗口中。资源的格式通常是HTML,当然也有PDF、图像等等。资源的位置是使用URI(Uniform Resource Indentifier,统一资源标识符)来指定的。与此相关的内容在后面讨论网络的时候还会详细介绍。

浏览器如何解释HTML文件是由HTML和CSS规范规定的。这些规范是由W3C(World Wide Web Consortium,万维网联盟)维护的,W3C是负责制定Web标准的组织。

HTML当前的版本号是4(http://www.w3.org/TR/html401/),HTML5还在制定中。CSS当前的版本号是2(http://www.w3.org/TR/CSS2/),CSS3也正在制定过程中。

多少年来,浏览器厂商各自为战,纷纷埋头开发自己的扩展,对规范的支持始终不给力。结果就给Web开发人员带来了生死攸关的兼容性问题。而今天,大多数浏览器对规范的支持程度仍然参差不齐。

浏览器的用户界面大同小异,其中相同的界面元素包括:

  • 用于输入URI的地址栏
  • 后退和前进按钮
  • 书签选项
  • 用于刷新和停止加载当前文档的刷新及停止按钮
  • 返回主页的主页按钮

说来也怪,并没有哪个正式公布的规范对浏览器的用户界面作出规定,浏览器目前的外观是多年来浏览器厂商之间互相模仿和不断改进的结果。HTML5规范中没有定义浏览器必须具备的UI元素,但列出了一些公共元素,其中就包括地址栏、状态栏和工具栏。当然,有些浏览器还有自己专有的一些功能,如Firefox的下载管理器。相关的更多内容将在后面讨论用户界面时介绍。
查看全文 »

JavaScript库“解构”系列旨在以可视化和可交互的方式剖析JavaScript库的源代码,包括 jQuery、Prototype 和 MooTools。
通过将 JavaScript 源代码以可见块元素的方式标记出来,可以更方便查找和学习。点开每个块元素,即可查看相应的代码。点击代码中的链接,即可在程序流中纵情畅游。

——Dave Stewart

这么好的东西,还用多说吗?你懂的。(见下图)
唯一需要说明的是,Dave Stewart原创的这个JavaScript库解构系列不知何故被挡在“墙”外头了,我只是把它搬到了“墙”里面来而已。换句话说,这个解构系列并非出自我手,我只是在自己的站点上提供了它的一个镜像,以方便“墙”内的JavaScript学习者参考。

现在就开始:解构JavaScript库!

HTML5设计原理

2010年10月21日 Web开发, 翻译

Jeremy Keith在 Fronteers 2010 上的主题演讲

特别感谢以下朋友指出翻译错误。

今天我想跟大家谈一谈HTML5的设计。主要分两个方面:一方面,当然了,就是HTML5。我可以站在这儿只讲HTML5,但我并不打算这样做,因为如果你想了解HTML5的话,你可以Google,可以看书,甚至可以看规范。

实际上,确实有人会谈到规范的内容。史蒂夫·福克纳(Steve Faulkner)会讲HTML5与可访问性。而保罗·艾里什(Paul Irish)则会讲HTML5提供的各种API。因此,我今天站在这里,不会光讲一讲HTML5就算完事了。

说老实话,在正式开始之前,我想先交待清楚我所说的HTML5到底是什么意思。这话听起来有点搞笑:这会子你一直在说HTML5,难道我们还不知道什么是HTML5吗?大家知道,有一个规范,它的名字叫HTML5。我所说的HTML5,指的就是这个规范。但问题是,有些人所说的HTML5,指的不仅仅是这个规范,还有别的意思。比如说,用HTML5来代指CSS3就是一种常见的叫法。我可不是这样的。我所说的HTML5,不包含CSS3,就是HTML5。

类似的术语问题以前也有过。Ajax本来是一种含义明确的技术,但过了不久,它的含义就变成了“用JavaScript来做一切好玩的东西”。这就是Ajax,对不对?今天,HTML5也面临同样的问题,它本来指的是一个特定的规范,但如今含义却成了“在Web上做一切好玩的事。”我说的不是这种HTML5,不是这种涵盖了最近刚刚出现的各种新东东的HTML5。我说的仅仅是规范本身:HTML5。

刚才已经说了,我今天想要讲的内容不多,也没有打算介绍HTML5都包含什么。今天我要讲的是它的另一方面,即HTML5的设计。换句话说,我要讲的不是规范里都包含什么,而是规范里为什么会包含它们,以及在设计这个规范的时候,设计者们是怎么看待这些东西的。

设计原理

设计原理本质上是一种信念、一种想法、一个概念,是你行动的支柱。不管你是制定规范,还是制造一种有形的物品,或者编写软件,甚至发明编程语言。你都能找到背后的一个或者多个设计原理,多人协作的任何成果都是例证。不仅仅Web开发领域是这样。纵观人类历史,像国家和社会这样大规模的构建活动背后,同样也有设计原理。

就拿美国为例吧,美国的设计原理都写在了《独立宣言》中了。

我们认为这些真理是不言而喻的,人人生而平等,造物主赋予了每个人不可剥夺的权利,包括生存、自由和追求幸福。

这里有一句口号:生存、自由和追求幸福。这是被写进宪法中的核心理念,它关系到我们所有人的一切,也就是我们构建自己社会的原则。
查看全文 »

原文链接:A Brief History of Markup
2010年9月23日校毕

A Book Apart 的第一本书,由Jeremy Keith执笔;本文是该书第1章。

HTML是World Wide Web上统一的语言。使用它所提供的标签,人类已经创建了令人惊奇、姿态万千的超链接的文档网络。看看AmazoneBayWikipedia,再看看个人博客和专为猫咪建立的站点,无一不是HTML的杰作。

HTML5是这门通用语言的最新版。虽然这次升级的变化之大史无前例,但HTML更新换代已经不是第一次了。这门语言从诞生之日起一直在发展。

在发明Web的同时,Tim Berners-Lee先生创造了HTML(HyperText Markup Language,超文本标记语言)。1991年,他写了一篇名为“HTML Tags”的文档另见更早的www-talk上的记录),其中建议人们使用20来个元素编写网页。

说到用尖括号包围文本的标签,并不是Tim先生的首创。更早的SGML(Standard Generalized Markup Language,标准通用标记语言)中就开始使用这种标签了。Tim先生当时并没有发明新语言,而是着眼于利用已经存在的技术——在HTML5的发展过程中,这个倾向依然得到了体现。

从IETF到W3C:HTML 4诞生记

HTML 1?这个版本实际上是不存在的。最早的HTML官方规范,是由IETF(Internet Engineering Task Force,因特网工程任务组)发布的HTML 2.0。这一规范中的许多特性,都是在已有实现的基础上归纳总结出来的。比如说,1994年居于市场领导地位的Mosaic浏览器提供了一个<img>标签,作者可以通过它在自己的文档中嵌入图像。后来,img元素就出现在了HTML 2.0中。

W3C(World Wide Web Consortium,万维网联盟)继IETF之后成为HTML后续标准的制定者,其官方网站是http://www.w3.org。20世纪90年代中期以后,W3C对HTML进行了几次升级,直至1999年发布HTML 4.01

此时,HTML的发展走到了一个十字路口上。
查看全文 »

要在Windows平台的Apache中使用Python,当然必须得先安装Apache和Python。Apache我使用的是XAMPP,而Python则随便一搜,就可以找到下载链接。由于这个解决方案要通过安装Apache模块mod_python来实现,而mod_python的当前版本3.3.1只支持Apache 2.2和Python 2.5,所以不得不先缷载已经装好的Python 3.0,重新下载安装了Python 2.5。mod_python是一个Apache模块,它可以将Python解释器嵌入到Apache服务器中(详情可以看这里)。

让Apache支持Python的过程很简单,只要3步。

  1. 下载mod_python模块安装程序(注意文件名后面Python和Apache的版本号要与自己已经安装的版本一致;文件名前面的版本号则是mod_python的,文件名示例:mod_python-3.3.1.win32-py2.5-Apache2.2.exe),然后安装,安装向导会自动找到Python路径,但可能需要我们手工指定Apache路径,安装到最后,向导还会提示你如何修改Apache配置文件(参见下一步)并给出了后续步骤的英文说明
  2. 让Apache加载mod_python模块。在Apache安装目录下找到其配置文件apache\conf\httpd.conf,打开,搜“LoadModule”,找到加载模块的地方,然后添加一条语句:LoadModule python_module modules/mod_python.so,重新启动Apache。
  3. 在htdocs目录下新建一个目录,如:“py”。进入py目录,新建一个文本文件,并命名为“.htaccess”,加入下列3条指令:
    
    AddHandler mod_python .py
    PythonHandler mptest
    PythonDebug On
    

    这里第一条指令是将所有URL末尾为.py的请求转发给mod_python处理程序,mod_python接收到请求之后再寻找适当的PythonHandler处理程序。第二条指令只定义了一个mptest处理程序。最后一条是启用Python代码调试功能,以便在代码运行出错时输出Python解释器返回的错误。

完成以上3步之后,就可以编写Python文件并进行测试了。在py目录下新建 mptest.py 文件,打开后添加如下代码:


from mod_python import apache

def handler(req):
	req.content_type = 'text/plain'
	req.write("Hello World!")
	return apache.OK

保存。打开浏览器,输入http://localhost/py/mptest.py,回车。看到“Hello World!”了吗?

实际上,由于前面只明确将mptest设置为处理程序,所以无论浏览器URL中的.py文件名是什么(如:login.py、default.py),都将被转发给mptest.py文件来处理,都会返回“Hello World!”。怎么办呢?长话短说,可以将上面第3步中的代码替换成如下所示:


AddHandler mod_python .py
PythonHandler mod_python.publisher
PythonDebug On

更多内容,参见Mod_python ManualIntroducing mod_python

《JavaScript高级程序设计(第2版)》

寻人启示

lyongde 同学,请尽快将你的名字发到我的邮箱里面(lsf.email[at]gmail.com),以便在第二次印刷时加到译者序中以表感谢。

儒家经典《大学》将“格物致知”奉为做学问、养身性的最高境界。

尼古拉斯•扎卡斯重新修订的这个最新版本,为各层次的JavaScript爱好者和Web前端开发人员提供了一条“格物致知”的捷径。

新版本的原书不仅篇幅由原来的600多页增加到800页,而且几乎全部更新、重写了上一版的内容,删除了上一版中与今天的职业需求无关的主题,新增了大量比上一版更有价值、更能反映JavaScript最新发展成果的内容。从颇具深度的JavaScript语言基础到作用域(链),从JavaScript引用类型到面向对象编程,从极其灵活的匿名函数到闭包的内部机制,从浏览器对象模型(BOM)到客户端检测,从文档对象模型(DOM)到基于事件的Web脚本编程,从错误处理到前端调试,从XML(E4X)到Ajax及JSON,从高级前端开发技术到前沿的客户端存储,从最佳编程实践到展望即将成为现实的API,直至JavaScript未来的发展。全书基本上囊括了JavaScript技术的各个方面,几乎涉及到了Web前端开发的所有热门话题。值得一提的是,本书还涵盖了当前最受开发人员关注的HTML5和移动设备(如iPhone)开发的内容。可以预见,本书一定会成为Web前端开发人员不可多得的经典之作。

需要提请读者注意的是,本书第22章讲到了JavaScript未来的变化,里面大部分讲的是ECMAScript 4/JavaScript 2,而ECMAScript 4已经被放弃了,新标准是ECMAScript 5。请读者参考http://www.ecmascript.org/。感谢周涛(Snandy)指出此问题。

本书文前和第1章至第17章由李松峰翻译,第18章至第22章及附录由曹力翻译。武卫东老师审读斧正了序的翻译,责任编辑朱巍为本书早日出版多方协调,执行编辑毛倩倩发现了译稿中多处错译和漏译,排校负责人董秋霞、谢凌老师严把三道排校质量关、谢廷晟全面审校了第1章至第17章,吴玺喆(George Wing)、吴生辉(千年一梦)、周裕波、梁超(LC)、张树恒(shuzai)、罗永德(lyongde)也审校了前17章的部分内容,为确保本书翻译质量起到了重要作用,在此对上述老师和同学致以深深的谢意。

译者
2010年5月

说明:《JavaScript高级程序设计(第2版)》(预计2010年7月份上市)的审校者谢廷晟针对书中一句关键的表述,给出了如下分析说明。虽然译者也同样意识到将this关键字函数执行时所处的作用域简单地等同起来不恰当,但在书中其他章节里,还有多处类似表述。本着不擅自修改原文的原则,谨以此说明帮助读者慎思明辨(书中也通过译者注形式给出了此文的链接)。感谢廷晟的认真审校。

第5章中有这样一句话:“this是函数在执行时所处的作用域”(《JavaScript高级程序设计(第2版)》第5章5.5.4节正文倒数第3段中)。我觉得作者的这种说法大有问题。对JavaScript不熟悉的读者会越看越糊涂。这里首先需要明确两个概念:函数执行时所处的作用域、在哪个作用域中调用函数函数调用发生的作用域,否则讨论就无法继续深入。把后一概念明确为“函数调用语句所处的那个作用域”应该没有问题。而前一个概念,实际上就是函数的定义所处的那个作用域。以下面的代码为例:


function a() {
 // ...
}

function b() {
 /// ...

 return function c() {
  // ...
 };
}

var d = b();
a();
d();

在这里,函数a、b和d(实际上就是c)都是在全局作用域中调用的。a和b执行时所处的作用域都是全局作用域。但是d执行时所处的作用域并不是全局作用域,而是函数b的局部作用域。说到这里,就可以看到“this是函数在执行时所处的作用域”这一说法的不妥了。假如函数c中引用到了this(在本例中,d是直接调用的,所以this指向的是全局对象),那么按作者的说法,c 岂不是直接运行在全局作用域中而不是b的局部作用域中了?再看下述例子:


var greeting = 'Hello from global scope!';

function e() {
 alert(greeting);
 alert(this.greeting);
}

var tom = {
 greeting:'Hello from Tom!'
};
tom.f = e;
tom.f();

这个例子中的this指向的是什么?显然是tom。那么f(即e)执行时所处的作用域是什么?显然是全局作用域。假如f执行时所处的作用域如作者所说为this所指对象的话,那就意味着在本例中f执行时所处的作用域为tom,也就是说在f执行过程中,与其作用域链相对应的那个变量对象链的最前端那个对象是tom,而这就意味着在此时函数体内对名称greeting进行解析时首先遇到的是tom中定义的greeting,于是两条输出语句的结果都应该是“Hello from Tom!”,这不符合事实,所以按作者的说法所做的那个假设是错误的。

对于this这个关键字,我认为不应该扯什么作用域的事儿,只要向读者说明以下几项这样一句话就够了:函数作为哪个对象的方法调用,函数体内的this(不包括嵌套定义在其中的函数中的this)指向的就是那个对象。直接调用一个函数,相当于把它当作全局对象的方法调用。JavaScript 中没有类作用域的概念,因此方法内部要访问据以调用此方法的那个对象的属性,必须使用this关键字,按‘this.属性名’的语法来访问

  1. 函数作为哪个对象的方法调用,函数体内的this(不包括嵌套定义在其中的函数中的this)指向的就是那个对象。
  2. 结合new运算符调用一个构造函数时,系统会先自动生成一个对象,然后在该对象上调用构造函数。此时在构造函数体内,this指向的就是这个对象。
  3. 直接调用一个函数,相当于把它当作全局对象的方法调用。
  4. JavaScript中没有类作用域的概念,因此方法内部要访问据以调用此方法的那个对象的属性,必须使用this关键字,按“this.属性名”的语法来访问。

与这个问题相关的还有一个函数体内的名称解析的问题。我看过的JavaScript教材上都说得不太全面。实际上,那种直接引用的名称,其名称解析是在作用域链上进行的;而那种按“obj.属性名”方式引用的名称,其名称解析是在obj的原型对象链上进行的(首先检查obj是否直接定义了同名属性,如果没有,则在其原型对象链上逐层查找)。理解了这一点,就更能搞清前面的this与作用域的瓜葛。

谢廷晟,《JavaScript设计模式》和《深入浅出HTML》的译者。

《JavaScript设计模式》    《深入浅出HTML》

查看全文 »

Tags: , ,

在一年一度的新春佳节即将到来之际,应热心读者的要求,为满足大家先睹为快的愿望,也为了答谢朋友们对本博客长期以来的支持,即日起到春节前夕,本站将发布尚未出版的《JavaScript高级程序设计(第2版)》一书的样章(暂定为3章,约115页)。

申请办法

1、发邮件到:[email protected]
2、邮件主题:《JavaScript高级程序设计(第2版)》样章;邮件内容:您的Email地址。
3、24小时内收到样章,先睹为快!

备注:样章格式为PDF,托管在“Google文件”,可以在线查看(无须登录),也可以下载和打印。希望在线查看PDF的朋友,请在邮件正文中注明“希望接收Google文件”字样,即可收到样章的链接(也可以下载);否则,将收到PDF文件(*请确保有5M以上的空余邮箱空间)
样章列表(详细目录

第3章 基本概念
第4章 变量、作用域及内存问题
第5章 引用类型

《JavaScript高级程序设计(第2版)》简介

本书是人民邮电出版社图灵公司引进出版的大畅销书、JavaScript权威著作《JavaScript高级程序设计》的最新升级版。《JavaScript高级程序设计》自2006年11月出版以来,已经累计销售逾30000册,而且至今仍然十分畅销。这一点可以通过北京新华文化发展有限公司(新华书店)近期的店面销售数据看出来(大家可以自行比较一下其他畅销书的销量)。应该说,在Web 2.0革命爆发的同时,人民邮电出版社图灵公司引进出版的本书成就了计算机图书市场上难得一见的奇迹。

本书作者尼古拉斯·扎卡斯(Nicholas C. Zakas)现为Yahoo!公司首席前端工程师,世界顶级Web技术专家。原书第1版曾被选为Yahoo!公司YUI(Yahoo! User Interface Library,Yahoo!用户界面库)团队的内部培训教材。

2009年初,本书第2版面世(《Professional JavaScript for Web developers, 2nd Edition》)。新版本不仅篇幅由原来的600多页增加到800页,而且几乎全部更新、重写了上一版的内容,删除了上一版中与今天的职业需求无关的主题,新增了大量比上一版更有价值、更能反映JavaScript最新发展成果的内容。从颇具深度的JavaScript语言基础到作用域(链),从JavaScript引用类型到面向对象编程的最佳实践,从极其灵活的匿名函数到闭包的内部机制,从浏览器对象模型(BOM)到客户端检测,从文档对象模型(DOM)到基于事件的Web脚本编程,从错误处理到前端调试,从XML(E4X)到Ajax及JSON,从高级前端开发技术到前沿的客户端存储,从最佳编程实践到展望即将成为现实的API,直至JavaScript未来的发展。全书彻底涵盖了JavaScript技术的各个方面,几乎涉及到了Web前端开发的每一处细节。可以预见,这部著作一定会成为Web前端开发人员不可多得的又一部经典。

目前,《JavaScript高级程序设计(第2版)》的翻译工作已经进入后期阶段(全书22章,所剩不到5章)。而且,为确保新版及时上市与读者见面,出版社采取了与译者同步翻译、同步编辑审校的特别措施。新版本预计2010年上半年可以上市;当然,在确保出版品质的前提下一定会尽量往前赶!

样章详细目录

第3章 基本概念 1
3.1 语法 1
3.1.1 区分大小写 1
3.1.2 标识符 1
3.1.3 注释 2
3.1.4 语句 2
3.2 关键字和保留字 3
3.3 变量 4
3.4 数据类型 5
3.4.1 typeof操作符 5
3.4.2 Undefined类型 6
3.4.3 Null类型 7
3.4.4 Boolean类型 7
3.4.5 Number类型 8
3.4.6 String类型 14
3.4.7 Object类型 16
3.5 操作符 17
3.5.1 一元操作符 17
3.5.2 位操作符 20
3.5.3 布尔操作符 26
3.5.4 乘性操作符 29
3.5.5 加性操作符 30
3.5.6 关系操作符 32
3.5.7 相等操作符 34
3.5.8 条件操作符 35
3.5.9 赋值操作符 36
3.5.10 逗号操作符 36
3.6 语句 37
3.6.1 if语句 37
3.6.2 do-while语句 38
3.6.3 while语句 38
3.6.4 for语句 38
3.6.5 for-in语句 40
3.6.6 label语句 40
3.6.7 break和continue语句 41
3.6.8 with语句 42
3.6.9 switch语句 43
3.7 函数 45
3.7.1 理解参数 47
3.7.2 没有重载 48
3.8 小结 49

第4章 变量、作用域和内存问题 1
4.1 基本类型和引用类型的值 1
4.1.1 动态属性 2
4.1.2 复制变量值 3
4.1.3 传递参数 4
4.1.4 检测类型 6
4.2 执行环境及作用域 6
4.2.1 延长作用域链 9
4.2.2 没有块级作用域 10
4.2.3 声明变量 10
4.2.4 查询标识符 11
4.3 垃圾收集 12
4.3.1 标记清除 12
4.3.2 引用计数 13
4.3.3 性能问题 14
4.3.4 管理内存 15
4.4 小结 15

第5章 引用类型 1
5.1 Object类型 1
5.2 Array类型 3
5.2.1 转换方法 6
5.2.2 栈方法 7
5.2.3 队列方法 8
5.2.4 重排序方法 9
5.2.5 操作方法 11
5.3 Date类型 12
5.3.1 继承的方法 14
5.3.2 日期格式化方法 15
5.3.3 日期/时间组件方法 15
5.4 RegExp类型 17
5.4.1 RegExp实例属性 19
5.4.2 RegExp实例方法 19
5.4.3 RegExp构造函数属性 21
5.4.4 模式的局限性 23
5.5 Function类型 23
5.5.1 没有重载(深入理解) 25
5.5.2 函数声明与函数表达式 25
5.5.3 作为值的函数 26
5.5.4 函数内部属性 27
5.5.5 函数属性和方法 29
5.6 基本包装类型 31
5.6.1 Boolean类型 32
5.6.2 Number类型 33
5.6.3 String类型 35
5.7 内置对象 42
5.7.1 Global对象 43
5.7.2 Math对象 46
5.8 小结 49