JavaScript内核系列第11章客户端JavaScript

abruzzi

浏览: 452361 次
性别:
来自: 西安

最近访客更多访客>>

wyx065747

zw1127

ymgjava

coolsteen

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript内核

JavaScript Firebug Chrome Ajax jQuery

第十一章客户端的JavaScript

毫无疑问，到目前为止，JavaScript应用最为广泛，也最为成功的领域就是客户端，或者称为浏览器上的JavaScript。JavaScript为页面开发注入了活力，如与服务器交互形成的局部刷新，鼠标事件的响应，动态的页面风格变换等等，都直接依靠与JavaScript的支持。

11.1客户端JavaScript执行环境

我们在基础部分提到过，JavaScript代码都有一个执行环境，所有的JavaScript代码均被包含在一个全局对象中，比如在所有函数之外声明：

var x = 3;
var str = "global";

这两个变量声明语句事实上是为全局对象添加了两个属性x和str。可以将全局对象想象成一个大的匿名自执行函数：

(function(){
    var x = 3;
    var str = "global";
    //...
})();

在浏览器端，这个全局的对象称为window，window是所有JavaScript对象的根，我们可以通过window对象的属性document来访问页面本身，也可以调用window的一些方法来与用户交互，比如：

window.alert("This is a message");
alert("This is a message");

这两个语句事实上的效果是相同的，在引用全局对象window的方法时，我们可以忽略前缀，只使用方法名本身。

window对象是对浏览器当前窗口的引用，因为浏览器会将window与自身绘制出来的窗口绑定起来，我们对window的操作事实上会映射到浏览器窗口上。正是浏览器本身提供了这种脚本化的能力，我们才有机会通过JavaScript代码来完成诸如改变页面标题，弹出警告框，修改页面内容(通过对window.document的修改)等操作。

11.2文档对象模型(DOM)

DOM即文档对象模型，它是一个平台，提供语言无关的API，允许程序访问并更改文档的内容，结构以及样式。HTML文档是一个树形的结构，与浏览器中的页面中的结构一一对应。

图 W3C站点中的一个HTML结构示例

JavaScript通过修改/遍历DOM，即可映射到对WEB页面的操作上，比如一个简单的页面如下：

<html>
    <head>
    </head>
    <body>
       <div id="con">
       </div>
    </body>
</html>

通过JavaScript操作DOM：

var con = document.getElementById("con");

即可对应到WEB页面中的id为”con”的div标签，可以为该标签设置背景色，或者绑定click事件的处理函数等等。JavaScript可以通过一些浏览器内置的方法来对DOM进行遍历，增加，删除DOM的子节点，访问DOM上的Form，Frame，Image等节点，修改他们的CSS样式，注册/注销事件处理函数，从而使页面“活动”起来。

11.3事件驱动模型

由于客户端JavaScript的开发属于用户界面开发的范畴，因此使用事件驱动模型就显得非常自然了，事件驱动的特点在于：代码块的运行与否与程序流程无关。而传统的流式代码的特点是，从函数的入口进入，依次调用各个子模块的处理函数，最后退出。这种编程模式主要适用于与UI关系不大的场合，很少有异步的过程，这些特点可能要追溯到计算机程序的最初模型：批处理。

而事件驱动模型主要是面向用户的，你在实现无法知道用户会如何使用你的程序，因此就只能通过回调，事件监听等方式，当用户做出某个动作时才会触发之前已经注册好的监听器，从而执行相关代码，而不是顺序的执行。甚至在一次运行中，部分代码始终没有被触发，也就根本不会被执行到。

比如在页面中，我们为按钮的点击事件注册了事件监听器，当点击的时候弹出一个对话框，但是用户打开页面后，浏览完内容后就直接关闭了，没有点击按钮，那么相关的代码就没有被触发，我们来看一个简单的示例：

我们有一个页面，内容如下：

<html>
<head>
<style>
body{
    margin: 20px;
    font-family : "Verdana";
    font-size : normal;
    background-color : #eee;
}
</style>
</head>
<body onload="init()">
    <p>
        <label for="toclick">Please click the button:</label>
        <input id="toclick" type="button" value="Click me" />
    </p>
</body>
</html>

图页面click-me的展示

可以看到body标签的onload属性被赋予一个值”init()”，这是一个对JavaScript代码的调用，时机发生在当页面加载完成之后，也就是浏览器已经创建了所有body中的DOM对象之后。

我们来看看这个init函数的内容：

<script type="text/javascript" language="javascript">
function init(){
    var button = document.getElementById('toclick');
    button.onclick = function(){
        alert('button is clicked');
    }
}
</script>

这段代码先从document中获取id为”toclick”的元素(也就是我们刚才在html中声明的button)，然后为其click事件绑定一个函数，当click事件被触发时，弹出一个警告框。

图警告框效果

11.4 与服务器端交互(Ajax)

Ajax本身被作为前端技术，提出的时间是比较早的，但是由于种种原因，没有引起人们的普遍关注，而当Google的很多产品如Google Map，GMail等横空出世的之后，Ajax才被越来越多的公司所接受并引入到自己的产品中。现在几乎所有的网站都有不同层次的Ajax交互，纯静态的页面已经非常少了。

简而言之，Ajax表示异步JavaScript与XML，事实上，Ajax与XML几乎没有任何关系，因为是异步交互，所以用户的页面不用刷新，在同一个页面中，客户端请求服务数据，当服务数据返回时，通过JavaScript将数据片段填充到页面的某个部分，即实现了局部刷新，这个过程对用户来说实际上是透明的。

Ajax对服务器端没有限制，一个Ajax请求和普通的请求一样，发送数据(GET/POST)到一个服务端URL上。服务端的实现可以是php,可以是ASP或者JSP等。以J2EE为例，数据发送到servlet，servlet对请求进行处理，最后向输出流写入数据，浏览器得到这些数据之后，会按照Ajax调用时的注册情况来回调JavaScript函数，JavaScript在操作DOM上具有天生的优势，因此可以很方便的在无刷新的情况下更新页面的部分或者全部。

下面我们来看一个具体的实例，通过异步的向后端的php脚本发送请求，页面的内容得到了局部更新，而无需重刷整个页面。首先编写一个简单的php脚本：

<?php
 
$type = $_REQUEST['type'];
$string = $_REQUEST['string'];
 
if($type == 0){
    echo strtoupper($string);
}else{
    echo strtolower($string);
}
 
?>

php的逻辑很简单，请求中包含两个参数，type和string，如果type为0，则将第二个参数string转换为大写返回，否则转换为小写返回。

XMLHttpRequest对象是进行Ajax的核心，所有的主流浏览器都已各自不同的方式进行了实现，如果不使用客户端JavaScript框架，那么使用起来会有所差异：

function initxhr(){
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else if(window.ActionXObject){
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }else{
        throw new Error("xhr is not supported");
    }
}

创建了XMLHttpRequest对象之后，我们即可使用它来进行与服务端的异步通信：

function doajax(url, panelId){
    if(xhr == null){
        initxhr();
    }
 
    if(xhr != null){
        xhr.open("GET", url, true);
        xhr.onreadystatechange = updatePanel(panelId);
        xhr.send(null);
    }else{
        throw new Error("xhr is not inited");
    }
}

通过设置XMLHttpRequest对象的onreadystatechange属性，当服务端产生响应时，浏览器会回调此处注册的函数:

function updatePanel(panelId){
    return function(){
        if(xhr.readyState == 4){
            var response = xhr.responseText;
            alert(response);
            document.getElementById(panelId).innerHTML = response;
        }
    }
}

运行结果如下：

图 Ajax示例

11.5调试

在实际的开发环境中，不可能做到代码没有bug，变量的拼写错误，使用了未经初始化的变量，死循环等等，这些都是比较容易解决的错误，但是如果有隐藏的比较深的bug，时隐时现，我们就需要一个调试环境了。脚本语言的调试尤其艰难，因为一切都是运行时决定的，因此不可能预先知道代码有错误(不包括显式的词法错误)。

我们这一节中介绍集中浏览器中的调试JavaScript的方式：

11.5.1 FireFox

FireFox以速度，可扩展性，标准性深受广大开发人员的喜爱。FireFox具有强大的插件机制，用户可以自己为FireFox增添新的功能(很多插件只需要有JavaScript/CSS/XUL经验即可)，而WEB开发人员最喜爱的插件之一即为：FireBug。FireBug是一个FireFox的插件，使用它，使前端开发人员丢弃了老旧的alert，FireBug提供一个控制台，开发人员可以直接像在windows的控制台那样，通过简单的命令来查看变量的值，状态等。

作为一个调试工具，FireBug提供如其他IDE中那样的基本功能，断点，步进，watch等等功能，下面我们来详细介绍FireBug：

通过在提示符”>>>”之后键入JavaScript代码即可执行这些代码，由图可见FireBug有6个标签：控制台，HTML查看器，CSS查看器，脚本查看器，DOM查看器，以及网络性能监控。

图 HTML查看器标签

在FireBug处于“查看”状态时，通过鼠标在页面上移动，页面的一部分区域会高亮，点击此高亮区域即进入查看状态，注意此时FireBug的HTML查看窗口中的内容：它会高亮显示当前选中区域的HTML代码，而且你可以动态的编辑这些标签的属性和样式，对于页面大小，风格的微调十分有用。

图 FireBug DOM查看器

通过DOM查看器，我们可以清晰的看到页面中所有JavaScirpt对象，而且是以树的形式，可以逐层点开，查看详情，这对于调试页面非常有用。

图 FireBug的调试界面

通过使用FireBug，我们就可以丢弃alert方式的调试了，FireBug的调试与其他的IDE的使用非常类似，通过在代码左侧的行号旁边单击打断点，然后刷新页面进入调试环境，可以单步执行，直接返回等。右侧的面板上包含watch，栈情况，以及关于所有断点的信息，调试起来非常方便。

FireBug的控制台中常用的一些命令：

记录日志，一般用于调试时将JavaScript字符串打印出来

console.log(object[, object, ...])

打印消息，用于调试

console.info(obj)

用于打印一个对象，将JavaScript对象的各个属性树以直观的形式展现。

console.dir(obj)

console.trace()

11.5.2 Chrome

Chrome是Google的浏览器，渲染引擎为苹果公司(Apple)的开源项目WebKit，而JavaScript引擎为V8，根据作者经验，Chrome为当前浏览器界综合性能最好的一款浏览器，无论是速度，资源的占用，响应时间，以及界面，可扩展性等方面，远远的超过了同侪。

Chrome一开始就附有开发人员工具，前端开发人员可以使用这个工具进行类似与FireBug那样对代码进行调试，同时可以动态增删HTML属性，查看页面响应时间，以便找出系统的瓶颈等。

像FireBug一样，Chrome的内置开发人员工具也可以查看JavaScript的运行时结构，我们可以通过下面的一些图例来看Chrome的调试工具的用法：

在chrome中，CTRL-SHIFT-I启动开发人员工具：

图 chrome开发人员工具

在console标签中，可以进行一些脚本的测试：

图 chrome的console界面

在实际的项目中，console系列的方法非常有用，特别是web容器如tomcat等返回的是复杂的JavaScript对象时，console.dir(object)可以直观的让开发人员看到对象的结构，非常便于调试。

11.6客户端的MVC

MVC模型是在实际应用中使用的较多的一种模式，它在很大程度上降低了整个应用开发的复杂度。在J2EE应用中，使用了MVC的框架不计其数，比如structs,JSF等等。当然MVC作为一种应用程序的模型并不限制其使用的场景，比较著名的Swing工具包也是建立在MVC模型上的。

在MVC模型中，应用被分为三个功能块，M表示模型(Model)，通常为后台的数据；V表示视图(View)，表示数据的展现，如Web页面或者2D库渲染出来的其他UI组件，而C表示控制器(Controller)，负责逻辑部分的控制，协调模型和视图的关系。使用这个模型，可以降低个层次之间的耦合度，使得软件可以较大程度上得到重用。

一般而言，MVC是构建在整个系统中的，比如应用的数据来自于远程数据库或本地的文件系统，视图则在前端，直接展示给用户，控制器部分则运行在容器端。我们这个小节要讨论的并不是这个结构，而是纯粹建立在前端的MVC。

图 MVC模型示意图

既然MVC模型的目的是降低层次间的耦合，降低开发的复杂度，使得软件尽量的到重用，我们不妨建立这样一套规则：

l 用HTML表示模型

l 用CSS来负责渲染视图

l 用JavaScript负责控制前两者

在HTML中，只是将文档的结构和内容组织起来，通过CSS进行渲染，布局等工作，而与用户交互的部分则由JavaScript来控制，我们来看这样一个例子：我们有一个页面，其中有一个panel，当点击这个panel时其背景色会发生变化。

这个HTML文件看起来应该是这样的：

<html>
	<head>
		<script src="jquery-1.3.2.js" type="text/javascript" ></script>
		<script src="controller.js" type="text/javascript"></script>
		<link rel="stylesheet" href="style.css" type="text/css" />
	</head>
	<body>
		<div class="contentGray" id="content">
			This is the content of a panel
		</div>
	</body>
</html>

它引入了两个脚本文件(控制器)和一个样式表文件(视图风格)，而HTML本身只不过定义了div的结构和其位于body中的层次关系。

我们的视图渲染部分：样式表的内容是这样的：

.contentGray{
	background : #ccc;
	color : blue;
	border : 1px solid black;
	font: 13px 'Courier New';
	width : 300px;
	height : 30px;
	padding-top : 10px;
	padding-left : 10px;
}

.contentDark{
	background : #666;
	color : white;
	border : 1px solid black;
	font : 13px 'Courier New';
	width : 300px;
	height : 30px;
	padding-top : 10px;
	padding-left : 10px;	
}

CSS文件定义了类(contentGray)的样式及另外一个类(contentDark)的样式，这样HTML文件就可以看起来比较漂亮：

我们的需求是，当我们点击这个panel的时候，它的背景色加深，文字变成白色，当再次点击的时候又恢复之前的颜色和背景色。这种“动态”的就交给JavaScript来处理了：

$(document).ready(function(){
	$("div#content").click(function(){
		$(this).toggleClass("contentDark");
	})
});

使用jQuery可以为我们带来很多便利，我们选择id为content的div，然后注册事件处理函数，当click事件发生的时候，我们就切换CSS类contentDark：

当然，这个只是一个简单的例子，如果你的应用所涉及的页面比较多，而且控制器部分(JavaScript脚本)的工作量比较大，那么你会发现，客户端的MVC模型对你有很大的帮助，不但是界面的统一风格，而且JavaScript代码会更加模块化，从而可能一定程度上提高应用程序的效率，同时降低维护的难度。

11.7 Javascript/Ajax框架

随着富客户端的流行，基于WEB的应用越来越多，人们在开发过程中不再满足于DOM提供的简单API，特别是DOM对页面的操作比较繁琐，而且容易出错。当页面越来越华丽，页面UI越来越复杂(事件处理，特效处理)的时候，就有大量第三方JavaScript框架被开发出来了，比如较早的prototype，dojo，以及yahoo的YUI，后来的jQuery，以及jQuery的UI插件jQuery-UI，最早基于YUI而后来又进行了重构的ExtJs，号称纯OO的Mootools等等。

这些JavaScript框架的开发，大大的简化了页面的开发速度，也提高了开发效率，同时比较注重用户体验，这里列举出的框架几乎都是完全免费，所以应用十分广泛。我们在随后的两章中将列举两个最流行的框架做一些介绍，以期读者可以有一些感性的认识，关于jQuery和ExtJS的深入的研究已经大大的超出了本书的范围(事实上每一个框架都足以写一本书)，有兴趣的读者可以参考相关的书籍。

查看图片附件

分享到：

使用vim开发python及graphviz绘图 | JavaScript内核系列第10章深入核心概念

2011-05-05 19:36
浏览 3776
评论(20)
论坛回复 / 浏览 (18 / 8294)
分类:Web前端
查看更多

20 楼 helloworlda 2011-07-16

！！！！！！！！！！！

19 楼 helloworlda 2011-07-16

真强大啊！！！

18 楼 kkvsyy 2011-06-30

写这么篇文章的目的何在呢？

17 楼 smiky 2011-06-26

fywxin 写道

问楼主一个困扰我很久的问题
var User=function(arguObj){
    this.id=arguObj.id;
    this.name=arguObj.name;
}

user.prototype.showUserInfo=function(id){
return "";
}

user.prototype.getDate=function(){
    $.ajax({
            url: "user.spr?action=getDate",
            type: 'get',
            data: null,
            success: function(date){
                  //这里怎么调用user的showUserInfo（id）；
            })
        })
}

//这里怎么调用user的showUserInfo（id）；
在ajax内如何调用外部引用他的对象

根据楼主的第十章解释：
this与执行期上下文有关，那么这个success方法是谁调用的呢？是$.ajax调用的，那么它有showUserInfo这个方法吗？没有，所以你调用不了，
要调用怎么办？不是有scope chain吗,让$.ajax的活动对象可以找到showUserInfo这个自由变量就可以了啊，而$.ajax的活动对象会指向User的getDate的活动对象，因此你在getDate内加一个变量var showUserInfo = this.showUserInfo();这里的this是指向user的，就OK了,这样在success里面直接调用showUserInfo()

方法都写在User.prototype里面才对啊，User的对象就可以自动找到这些方法了

16 楼 esanone 2011-05-23

,断续关注.

15 楼 fywxin 2011-05-13

abruzzi 写道

fywxin 写道

问楼主一个困扰我很久的问题
var user=function(arguObj){
    this.id=arguObj.id;
    this.name=arguObj.name;
}

user.prototype.showUserInfo=function(id){
return "";
}

user.prototype.getDate=function(){
    $.ajax({
            url: "user.spr?action=getDate",
            type: 'get',
            data: null,
            success: function(date){
                  //这里怎么调用user的showUserInfo（id）；
            })
        })
}

//这里怎么调用user的showUserInfo（id）；
在ajax内如何调用外部引用他的对象

这些方法为什么要写在user.prototype上呢？user.getData() is just fine.如果要使用OO，建议使用base包。

var user=function(arguObj){
    this.id=arguObj.id;
    this.name=arguObj.name;
}

user.prototype={
    showUserInfo : function(){
         ....
    },

    getDate : function(){
        .....
    },

    N多方法。。。
}

这样写在结构上是不是会好些，将方法放到直接对象之下如：user.getData() 和放到prototype原型之下如：user.prototype.getData()，两种方式楼主可以做个详细的比较吗，如性能，方法调用是否有区别，哪种更好等方面介绍下，可以吗？

还有之前的那个问题，在javascript对象里的方法中的ajax方法体内如何调用对象的方法，this关键字不行，总不能用new出来的对象去调用那方法吧。

user.prototype.getDate=function(){
    $.ajax({
            url: "user.spr?action=getDate",
            type: 'get',
            data: null,
            success: function(date){
                  //这里怎么调用user的showUserInfo（id）；
            })
        })
}

呵呵，javascript只知道皮毛怎么用，但不知道为什么要那样，希望楼主指点迷津~

14 楼 abruzzi 2011-05-12

guoqingcun 写道

base包指的是什么呀？

http://dean.edwards.name/weblog/2006/03/base/

在“内核”第八章讨论过。很不错的OO包装。

13 楼 guoqingcun 2011-05-12

base包指的是什么呀？

12 楼 abruzzi 2011-05-12

fywxin 写道

这些方法为什么要写在user.prototype上呢？user.getData() is just fine.如果要使用OO，建议使用base包。

11 楼 fywxin 2011-05-12

10 楼 la_ka 2011-05-11

跟着LZ的笔记上来的，收益非浅啊，感谢LZ奉献出自己的智慧帮助其他人～～

9 楼 jackra 2011-05-10

LZ确实辛苦了。
本来说吧LZ的前面写的章节都看看。结果发现自己是在是静不下心看不下去。也可能是犀牛书造成的先入为主的原因。只能大概的浏览了下。总体感觉还是比较浅显易懂的，实在是辛苦LZ了。
其实JS给我个人的感觉，最头疼的地方就是确实太灵活了。各种各样的写法都有。而更加头疼的，就是现下的帮助文档似乎只有MS的一个56版本的CHM。。。
很多老程序员都喜欢在自己理解的范畴上去改造js的部分，导致各种风格的JS五花八门。比如C程序员喜欢把JS写成过程化的风格；面向对象的程序员就喜欢把JS写成面向对象的风格；经常做界面开发的就喜欢把JS写成事件响应的风格。。。。。
如果说吧JS认为是做界面控制的语言，很容易就会把JS写成是事件响应和过程化的的形式。而如果把JS写成组件的形式，更多会把JS写成面向对象或单纯的过程化语言的形式。
呵呵，也就随便一说。

8 楼 abruzzi 2011-05-10

mmtye 写道

本系列教程从第一张开始看了下，感觉很不错，作者能否提供PDF版本的教程呢？

本人未经作者同意做了前两章的PDF，若作者没意见我可以完成它，PDF上会保留作者的信息，不添油加醋，

如果作者本人提供所有章节的PDF版本则更好。下图为我做的PDF的截图和前两章的PDF文件：如果冒犯了作者，

请告知，本人将停止PDF的制作，谢谢。

之前发过一个前九章的版本-第0版
http://www.iteye.com/topic/895099

7 楼 mmtye 2011-05-10

6 楼 yizhl 2011-05-10

不要像一些所谓的专家一样把很简单的东西说得很复杂，把本来听得懂的东西说成听不懂了。。

写得很不错支持楼主！！！！！！
希望楼主继续保持这种简单、明了、透彻、生动的风格！

5 楼 abruzzi 2011-05-09

jackra 写道

改天拜读吧。
简单的例子能够明确的说明问题的就是好的。不用写的东西太过复杂。
实际项目中应用的部分可以单独出附录一类的方式供别人参考。
如果思维模式不能把问题具现化到点，你写再多的东西也是没有意义的。

个人感觉程序的初学者不太适合学习js。容易被多变的语法和陷阱搞的思维混乱。
而针对从其他语言转到研究js的读者，很多通用的部分不用写的太过详细，把要说明的问题在结构上弄的太分散，容易导致看的时候注意力无法集中，比如：数据类型，计算和保留字相关的内容建立速查表，而语言特性和陷阱的部分可以着重讲解。

有时候也要看读者群。。。。。

很好，感谢你的意见！前面章节部分内容还在重构，呵呵。

4 楼 jackra 2011-05-09

3 楼 abruzzi 2011-05-06

childrentown 写道

感觉这章的内容比较简单，希望能看到一些实际项目中的例子。

实际项目中的例子一般要考虑到很多方面的因素，如跨浏览器，跨操作系统，浏览器的不同版本，操作系统的不同类别等等，例子会非常庞大。如何选择更好的，小巧的，足以说明问题的示例还在思考。

2 楼 childrentown 2011-05-06

感觉这章的内容比较简单，希望能看到一些实际项目中的例子。

1 楼 jamesmos 2011-05-06

MVC哈。虽然以前自己写的时候也有意识的将渲染的东西从控制函数里分离出去，但一直没想到把这与MVC分层联系起来。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论