Browser Object Model

Browser Object Model

2011-04-15

• 拔赤
淘宝前端开发工程师
http://jayli.github.com

JavaScript是世界上 Douglas Crockford
最被误解的语言

JS丰富的表达能力让
人以为它是为外行设 Douglas Crockford
计的,而不是专业程序
员,这显然不是事实

Google Code中语言出现
fuck一词的比率
0.56%

0.29%
0.26%
0.24%

0.15%
0.13% 0.13% 0.12%
0.10%
0.04% 0.05%

• ECMAScript
EMCA指定的标准化语言，JavaScript,ActionScript…
http://www.ecmascript.org/

Browsers’ history
1991 ~ present

高调的
NetScape

我来打酱油

NetScape遭
到致命打击

微软免费捆绑
销售IE

划时代意义的
IE6诞生

继续打酱油,囧

NetScape的重生

划时代意义的
Firefox诞生

拜拜了
NetScape

从IE7到IE8并
无本质的飞跃

Chrome火爆发布
惊艳的v8引擎

We should know:

• DOM、BOM
• Ajax
• Event
• YUI3

Javascript

ECMAScript DOM BOM

浏览器JavaScript的组成

• DOM
W3C标准提供的文档模型，浏览器均实现了这个标准
• BOM
浏览器对象模型，浏览器各自的实现

BOM
• Document对象 - DOM根节点
• Frames数组 – 历史记录
• History对象 – 窗口浏览历史
• Location对象 – 地址栏相关
• Navigator对象 – 浏览器版本信息

浏览器提供的全局方法

方法名说明
alert/confirm/prompt 弹框
set(clear)Timeout 设置(清除)延时执行
set(clear)Interval 设置(清除)循环执行
close/open 关闭/打开窗口
scroll(To) 窗口滚动
move(resize)To 窗口移动到(改变为)
eval 执行js代码
blur/focus 失去/得到焦点

帧(window)相关的变量

方法名说明
parent 如果当前窗口为frame，指向
包含该frame的窗口的frame
self 指向当前的window对象
top 如果当前窗口为frame，指向
包含该frame的top-level的
window对象
window 指向当前的window对象

DOM

HTML 文档对象模型（HTML Document
Object Model）定义了访问和处理 HTML
文档的标准方法。

注意：渲染过程中的Javascript操作

执行脚本过程中的渲染

<!DOCTYPE HTML>
<html lang="zh">
<head>head</head>
<body>
<script> error
//error
alert(document.getElementById('a'));
</script>
<span id="a“>error</span>
</body>
</html>

<!DOCTYPE HTML>
<html lang="zh">
<head>head</head>
<body>
<span id="a">ok</span>
<script> ok
//ok
alert(document.getElementById('a'));
</script>
</body>
</html>

<!DOCTYPE HTML>
<html lang="zh">
<head>head</head>
<body>
<div id=“J”>
<span id=“b">ok</span>
</div>
</body>
</html>

<!DOCTYPE HTML> document

<html lang="zh">
<head>head</head> head

<body>
<div id=“J”>
</div>
</body>
</html>


<html lang="zh">

<body> body
<div id=“J”>
<span id="a">ok</span> div#J

</div>
div#J available
</body>
</html>


<html lang="zh">

<body> body
<div id=“J”>

span#a
</div>
</body>
</html> span#a available


<html lang="zh">

<body> body
<div id=“J”>

span#a
</div> div#J contentready
</body> span#b

</html>
span#b available


<html lang="zh">

<body> body
<div id=“J”>

span#a
</div>
</body> span#b

</html>
domready

<!DOCTYPE HTML>
<html lang="zh">
<head>head</head>
<body> ok
<script>
Y.on(‘available’,function(){
alert(Y.one(‘#a’));
},’#a’);
</script>
</body>
</html>

Ajax(Asynchronous JavaScript And Xml)

• Post
• Get
• Xdr
• Jsonp

推荐：返回unicode转码后的数据

广义的 Ajax

异步加载数据用户体验的提升

异步加载文档内容页面性能的提升

更广义的 Ajax

短链接的限制，单向！？

Events

JavaScript是一种事件
驱动的编程语言

Y.on(‘domready’,function(){
//your code here…
});

绑定回调，等待事件发生

事件委托
<div id="container">
<ul>
<li id="item-1"><em>1</em></li>
<li id="item-2"><em>2</em></li>
</ul>
</div>

Y.delegate(‘click’,function(e){
//当事件冒泡至li处，触发回调
},’#continer’,’li’);

库提供了更多自定义事件

Y.on(‘mouseenter’,function(e){
//鼠标移入
},’#continer’);

Y.on(‘mouseleave’,function(e){
//鼠标移出
},’#continer’);

http://developer.yahoo.com/yui/3/event/

http://developer.yahoo.com/yui/3/

ref

• http://www.w3.org/DOM/
• http://www.yuiblog.com/blog/2009/04/27/vi
deo-ppk-jsevents/
• http://www.slideshare.net/lijing00333/yui3-
7203908

Browser Object Model

Recommended

Recommended

More Related Content

What's hot

What's hot (13)

Similar to Browser Object Model

Similar to Browser Object Model (20)

More from jay li

More from jay li (20)

Browser Object Model