- 浏览: 452360 次
- 性别:
- 来自: 西安
文章分类
最新评论
-
进退取舍:
谢谢,这个用上了!!
Java 一个线程池的示例 -
pb_water:
感谢楼主,打算买楼主的书,支持一下,楼主功德无量
JavaScript内核系列第0版整理稿下载 -
lancezhcj:
有图会直观的多呢,再摸索摸索
有限自动机与建模 -
hsmsyy:
这里应该是原创了吧,楼主我觉得闭包的作用:实现面向对象。有待商 ...
JavaScript内核系列 第7章 闭包 -
wll52:
在应用退出之前,需要释放连接 con.disconnect() ...
使用smack与GTalk通信
第十一章 客户端的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模型的目的是降低层次间的耦合,降低开发的复杂度,使得软件尽量的到重用,我们不妨建立这样一套规则:
<!--[if !supportLists]-->l <!--[endif]-->用HTML表示模型
<!--[if !supportLists]-->l <!--[endif]-->用CSS来负责渲染视图
<!--[if !supportLists]-->l <!--[endif]-->用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的深入的研究已经大大的超出了本书的范围(事实上每一个框架都足以写一本书),有兴趣的读者可以参考相关的书籍。
评论
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的对象就可以自动找到这些方法了
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只知道皮毛怎么用,但不知道为什么要那样,希望楼主指点迷津~
http://dean.edwards.name/weblog/2006/03/base/
在“内核”第八章讨论过。很不错的OO包装。
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(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内如何调用外部引用他的对象
本来说吧LZ的前面写的章节都看看。结果发现自己是在是静不下心看不下去。也可能是犀牛书造成的先入为主的原因。只能大概的浏览了下。总体感觉还是比较浅显易懂的,实在是辛苦LZ了。
其实JS给我个人的感觉,最头疼的地方就是确实太灵活了。各种各样的写法都有。而更加头疼的,就是现下的帮助文档似乎只有MS的一个56版本的CHM。。。
很多老程序员都喜欢在自己理解的范畴上去改造js的部分,导致各种风格的JS五花八门。比如C程序员喜欢把JS写成过程化的风格;面向对象的程序员就喜欢把JS写成面向对象的风格;经常做界面开发的就喜欢把JS写成事件响应的风格。。。。。
如果说吧JS认为是做界面控制的语言,很容易就会把JS写成是事件响应和过程化的的形式。而如果把JS写成组件的形式,更多会把JS写成面向对象或单纯的过程化语言的形式。
呵呵,也就随便一说。
本人未经作者同意做了前两章的PDF,若作者没意见我可以完成它,PDF上会保留作者的信息,不添油加醋,
如果作者本人提供所有章节的PDF版本则更好。下图为我做的PDF的截图和前两章的PDF文件:如果冒犯了作者,
请告知,本人将停止PDF的制作,谢谢。
之前发过一个前九章的版本-第0版
http://www.iteye.com/topic/895099
本人未经作者同意做了前两章的PDF,若作者没意见我可以完成它,PDF上会保留作者的信息,不添油加醋,
如果作者本人提供所有章节的PDF版本则更好。下图为我做的PDF的截图和前两章的PDF文件:如果冒犯了作者,
请告知,本人将停止PDF的制作,谢谢。
不要像一些所谓的专家一样把很简单的东西说得很复杂,把本来听得懂的东西说成听不懂了。。
写得很不错 支持楼主!!!!!!
希望楼主继续保持这种简单、明了、透彻、生动的风格!
简单的例子能够明确的说明问题的就是好的。不用写的东西太过复杂。
实际项目中应用的部分可以单独出附录一类的方式供别人参考。
如果思维模式不能把问题具现化到点,你写再多的东西也是没有意义的。
个人感觉程序的初学者不太适合学习js。容易被多变的语法和陷阱搞的思维混乱。
而针对从其他语言转到研究js的读者,很多通用的部分不用写的太过详细,把要说明的问题在结构上弄的太分散,容易导致看的时候注意力无法集中,比如:数据类型,计算和保留字相关的内容建立速查表,而语言特性和陷阱的部分可以着重讲解。
有时候也要看读者群。。。。。
很好,感谢你的意见!前面章节部分内容还在重构,呵呵。
简单的例子能够明确的说明问题的就是好的。不用写的东西太过复杂。
实际项目中应用的部分可以单独出附录一类的方式供别人参考。
如果思维模式不能把问题具现化到点,你写再多的东西也是没有意义的。
个人感觉程序的初学者不太适合学习js。容易被多变的语法和陷阱搞的思维混乱。
而针对从其他语言转到研究js的读者,很多通用的部分不用写的太过详细,把要说明的问题在结构上弄的太分散,容易导致看的时候注意力无法集中,比如:数据类型,计算和保留字相关的内容建立速查表,而语言特性和陷阱的部分可以着重讲解。
有时候也要看读者群。。。。。
实际项目中的例子一般要考虑到很多方面的因素,如跨浏览器,跨操作系统,浏览器的不同版本,操作系统的不同类别等等,例子会非常庞大。如何选择更好的,小巧的,足以说明问题的示例还在思考。
发表评论
-
JavaScript内核系列出版了!
2013-05-11 22:34 3036JavaScript内核系列出版了! ... -
JavaScript内核系列 V0.9.9 beta版下载
2012-02-21 22:17 3553经过了近2年的断断 ... -
JavaScript内核系列 第15章 服务器端的JavaScript
2012-02-12 21:39 2325第15章已经在icodeit上发布,这一章分为上/下两篇,请朋 ... -
JavaScript内核系列 第14章 Java应用中的JavaScript
2012-02-09 21:54 2092第十四章内容已经在icodeit发表,请朋友们移步此处阅 ... -
JavaScript内核系列 第12章 前端JavaScript框架:jQuery
2012-02-03 19:55 2564第十二章 前端JavaScript框架:jQuery ... -
JavaScript内核系列 第10章 深入核心概念
2011-05-02 11:20 5211第十章 核心概念深入 在前半部分章节中,涉及到 ... -
JavaScript内核系列第0版整理稿下载
2011-01-25 15:19 81752010年的前半年,我在Javaeye上发表过一个系列文章《J ...
相关推荐
JavaScript的核心是其语言内核,包含了操作符、表达式、语句和子程序等基本元素。此外,JavaScript还有两个主要的应用领域:客户机端和服务器端。在客户机端,JavaScript主要用于增强用户体验,控制浏览器行为,如...
第11章 01 Python 字符串的魔法 02 Python range的用法以及练习 03 Python 课上练习解释 04 Python 基础知识练习题试题 第12章 01 今日内容介绍以及基础测试题答案讲解 02 Python 列表的魔法 03 Python 元组的...
这个"pdf预览兼容ie9 10 11 demo.rar"文件很可能包含了一个演示或解决方案,旨在帮助用户在这些老版IE浏览器上顺利预览PDF文档。 在IE9、IE10和IE11中预览PDF文件时,常见的问题包括渲染不完整、功能缺失、性能低下...
第11章ActionScript3.0可视对象 225 11.1可视对象类DisplayObject 225 11.1.1可视对象列表 225 11.1.2位置、尺寸、透明度与可见性 227 11.1.3缩放与旋转 228 11.1.4坐标体系 231 11.1.5背景色 232 11.1.6区域与范围 ...
总的来说,搜狗高速浏览器通过一系列的技术优化,实现了从网络访问到页面渲染,再到用户体验的全方位加速,展示了客户端优化的深度和广度。这些实践为其他软件开发者提供了有价值的参考,如何在快节奏的互联网时代中...
18. **数组方法**:pop()移除并返回数组最后一个元素,push()在末尾添加元素,unshift()在开头添加元素,shift()移除并返回数组第一个元素。 19. **事件绑定**:包括传统的事件处理程序(如onclick)和DOM2级事件...
### 三十一、Vue、React生命周期 Vue和React都有一套完整的生命周期机制,它们通过不同的生命周期钩子函数帮助开发者管理组件的不同阶段。了解这些生命周期对于优化应用性能至关重要。 ### 三十二、垃圾回收机制 ...
第二章 多窗口类浏览器设计 11 2.1 多窗口类浏览器需求分析 11 2.1.1 Activity简介 11 2.1.2 Fragment简介 11 2.1.3 多窗口类浏览器需求 12 2.2 多窗口浏览器模式的实现机制 12 2.2.1安卓移动端多窗口浏览器框架 12 ...
#### 第11篇 Chromium的沙盒Sandbox - **Sandbox概念**: - Sandboxing(沙盒)是一种安全机制,用于隔离应用程序的不同部分,限制它们访问系统的权限。 - Chromium使用沙盒来保护用户的系统免受恶意网站的攻击。...
4. **静态资源处理**:Nginx对静态文件(如HTML、CSS、JavaScript、图片等)的处理非常高效,直接由内核进行I/O操作,无需经过解释器,大大提升了性能。 5. **SSL/TLS支持**:Nginx支持HTTPS协议,可以配置SSL证书...
文档类型声明 (`DOCTYPE`) 是 HTML 文档的第一行,用来告诉浏览器该文档遵循的是哪种标准或规范。例如: ```html <!DOCTYPE html> ``` 这表示文档遵循的是 HTML5 标准。 ##### 3. Quirks 模式与 Standards 模式的...
1. **Linux**:Linux 是一个开源的操作系统内核,由林纳斯·托瓦兹(Linus Torvalds)开发,支持多种计算机硬件平台。它为各种服务器、桌面环境和个人设备提供了稳定和高效的运行环境。 2. **Windows**:Windows是...
Chrome是一款由Google开发的流行的网页浏览器,其源代码结构复杂且功能强大。下面将详细介绍标题和描述中涉及的几个关键目录及其功能。 1. **app**:这个目录包含与操作系统平台紧密相关的应用层代码,例如剪贴板...
具体来说,文件中提到了一系列的技术要点,包括Android开发环境、网络通信、数据库管理、传感器数据采集以及Web服务的应用等。 1. Android开发环境的建立与配置 文件中提到了不同版本的Android系统,例如Android 11...
Nginx处理静态文件(如HTML、图片、CSS、JavaScript等)非常高效,直接由内核进行I/O操作,减少了CPU和内存的占用。 7. **HTTPS支持**: 在1.14.0版本中,Nginx可能加强了对TLSv1.3的支持,提高了加密安全性和...
Chrome在启动时可以使用用户喜欢的某个标签的配置,其它浏览器需要第三方插件才能够提供这一功能。 更加安全 黑名单(Blacklists):“Google Chrome”会定期地更新防止网络钓鱼和恶意软件的黑名单,并在用户试图...
AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下更新部分网页内容的技术。结合异步Servlet,可以实现更高效的页面更新。 **14.3 Comet** Comet是一种用于实现服务器推送的技术,它...