web前端结构与行为的分离(转)-代码 (2006-12-13 11:13:02)
函数initBehavior()的作用就是建立一个操作序列,为每个html文档结构中需要使用行为的对象进行事件触发与相应操作处理函数的连接,即生成行为。如例子中对id为holder的div元素添加的onclick事件函数,同理也可以添加onmouseover,onmouseout……等事件。于是我们分离的第一步完成了,这一步要做的就是重复initBehavior函数里面的内容,添加其他触发事件。
接下来要做的就是具体实现每个触发函数了,如上例showNode()函数,问题的核心也就在这里,因为定义的是事件处理入口,函数中没办法在定义事件的时候就确定参数,于是参数表就隐式被传递了。为什么说有参数表,这也是在查阅了网上一些资料才知道的,每个函数也是一个对象,函数对象就有一个属性是arguments:Array(),而当函数被调用时,参数都是arguments里的元素,这个大家可以另外做测试。要说的是,不同的浏览器在这里有一点小小的区别,对于IE,每当一个事件被触发时他的一个全局对象window.event就会接收到信息,在处理函数的参数表里并没有体现。而FF则不同,一个事件触发时,则与这个事件连接的处理函数会带有一个默认的事件参数,作为参数表里的第一个参数传递给处理函数,这里参数表就派上用场了,看上面的程序,由于函数没有定义形参,IE解析的参数表里面是空的,所以函数里定义的evt得到的是event的引用,FF则因为事件作为第一个参数表里的元素也得到一个事件对象。下一句也就容易理解了,对于不同浏览器,FF的事件来源属性是target,IE的是srcElement,那么到这里就通过解析得到事件来源对象,也就可以对这个对象进行相关操作了,那么本来需要从函数传递过来的对象参数也就不必要了。这里说到上面提到的一个不允许传递参数的机制,这个是在flash的ActionScript里也碰到的,仔细思考了一下,似乎明白了设置这个机制的道理,因为当一个事件触发函数时,其实需要传递的参数都是在外部暂时静态存在的,那么直接在函数里调用外部的对象或其他数据,也就完成了需求。
<html>
<head>
<title>结构与行为分离的测试</title>
<script type=”text/javascript” language=”javascript”>
function showNode(){
var evt=showNode.arguments[0]||window.event;//根据FF和IE的不同取得相应的事件对象
var element=evt.target||evt.srcElement;//根据FF和IE的不同取得事件触发对象
var showText=element.innerHTML;
alert(showText);//显示事件触发对象的内容,或者一些事件触发对象的相关操作
}
function initBehavior(){
document.getElementById(”holder”).onclick=showNode;//为特定对象触发事件连接函数
}
onload=initBehavior;//页面加载完毕后调用函数进行行为连接
</script>
</head>
<body>
<div id=”holder”>
<a href=”#”>列表标题</a>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
</div>
</body>
</html>
分享到:
相关推荐
结合Web前端开发中内容-结构-表现-行为相分离的开发标准,提出一种将Web页面代码分为视图(View,页面静态部分,包括内容、结构、表现)、模型(Model,负 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
前端开发基本准则:符合web标准,语义化HTML,结构表现行为分离,兼容性优良。页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证解析速度。
WEB前端开发规范文档 基本准则 符合web标准,语义化html, 结构、表现、行为分离, 兼容性优良。 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度。
符合 web 标准, 诧义化 html, 结构表现行为分离, 兼容性优良
符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的 解析速度. 文件规范 1. html, css, js, images文件均归档至<系统...
内容介绍热点排行相关文章下载地址↓ 基本准则:符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度。
1.2 Web标准——结构、样式和行为的分离 1.3 前端的现状 1.4 打造高品质的前端代码,提高代码的可维护性——精简、重用、有序 第2章 团队合作 2.1 揭秘前端开发工程师 2.2 欲精一行,必先通十行 2.3 增加代码...
基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度。 总规范 1.忽略(Omit)协议:如 background: url...
这个文档包含了HTML/css的...j、行为与结构分离 k、支持丰富的插件 l、完善的文档 m、开源 12、Jquery.on这个方法怎么看? 答: jQuery.on()方法可以给匹配元素(可以是多个)绑定一个或多个函数, off 可以解除绑定
此外,jQuery中完善的Ajax功能、行为与结构层的分离、可靠的事件处理机制也同样使得Web后端开发者如虎添翼,使用少量代码就可以实现复杂的功能。特别是新版本1.4.X的发布,jQuery在功能和性能方面都有质的提升,极大...
基于web开发技术实 习报告 一、Web开发前端技术总结 什么是前端技术: 前端技术包括JavaScript、jquery、html5等"传统"技术与Adobe RIA、Google Gears,以及概念性较强的交互式设计,艺术性较强的视觉设计等等。...
1、语义化 Amaze UI开发遵循语义化原则,意图通过类名(class)等信息直观传达元素的功能角色,同时关注结构、样式、行为分离,降低各部分的耦合程度,提高开发效率和可维护性。2、移动优先,跨屏适配 遵循 “移动...
符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的 解析速度.
Web标准由一系列标准组合而成,其核心理念是将网页的结构、样式和行为分离开来,所以它可以分为三大部分:结构标准、样式标准和行为标准
最开始接触前端的时候,是从简单的html、css、js开始的,当时盛行的WEB理念是结构样式行为相分离,即html、css、js分离,独立开发,互相之间通过link和script来互相调用。最开始我所接触到的小项目,都是直接将html...
OOP引入封装、继承和多态性等概念来建立一种对象层次结构,用以模拟公共行为的一个集合。当我们需要为分散的对象引入公共行为的时候,OOP则显得无能为力。也就是说,OOP允许你定义从上到下的关系,但并不适合定义从...
HTML为中心的前端开发也差不多是web标准的意思。它们的共同点就在于“分离”思想。 1、HTML是基础 2、CSS依靠选择符提供视觉; 3、Javascript 依靠HTML事件去驱动行为; 4、DOM提供API修改HTML DOM结构的API...