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 前端开发者需要遵循一系列标准,包括结构标准语言、表现标准语言和行为标准语言。 ...
这份规范由中兴通讯股份有限公司制定,旨在提升代码质量、增强跨浏览器兼容性,以及实现WEB前端的结构、样式与行为的分离。 1. **XHTML部分** - **规则**:遵循XHTML的基本语法规则,包括正确闭合标签、使用小写...
首先,Web标准是由W3C制定的一系列规范,旨在促进Web的有序发展,确保内容的结构、表现和行为分离。这主要包括结构化标准语言(如XHTML和XML)、表现标准语言(CSS)以及行为标准(如DOM和ECMAScript)。 XML(可...
在IT行业中,Web前端与Spring MVC是两个非常关键的技术领域,它们共同构成了现代Web应用程序的基础。Web前端主要关注用户交互和界面设计,而Spring MVC则是后端开发中的一个强大框架,用于构建服务端应用程序。 ...
- **结构、表现与行为分离**:这是Web前端开发的基本原则之一。结构负责网页的内容组织,表现则关注页面的外观,而行为则涉及交互逻辑。 - **结构标准(HTML/XHTML/XML)** - **HTML**:HyperText Markup Language...
结构、表现和行为的分离是前端开发的另一个核心原则。结构(HTML)负责内容的组织,表现(CSS)处理视觉样式,而行为(JavaScript)处理用户交互。保持这三者的独立性可以使得代码更易于理解和维护,同时减少样式和...
结合Web前端开发中内容-结构-表现-行为相分离的开发标准,提出一种将Web页面代码分为视图(View,页面静态部分,包括内容、结构、表现)、模型(Model,负 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
首先,前端开发的核心原则是实现结构、样式和行为的分离,这有助于保持代码的清晰和可维护性。结构由HTML负责,样式由CSS处理,而行为则通过JavaScript实现。在编码过程中,遵循精简、重用和有序的原则至关重要。...
- 开发准则强调符合Web标准,使用语义化的HTML,遵循结构、表现和行为分离的原则,并确保良好的浏览器兼容性,优化页面性能。 2. **文件规范** - **基本要求**:所有标签的属性值都应使用双引号括起,页面编码...
**WEB前端开发规范** 规范的目的在于提升开发团队的协作效率,确保后台开发人员能便捷地添加新功能,并使前端开发者在后期的优化和维护中更加高效。为了达到这个目标,前端开发人员必须按照本规范进行页面开发。若...
《Web前端开发规范手册参考》是一份旨在提升团队协作效率和代码质量的文档,它涵盖了前端开发的基本准则、命名规则、文件存放位置以及CSS书写规范等方面。以下是对这些内容的详细解释: 1. **规范目的**: - 提高...
**ActionScript**是与Web前端开发密切相关的脚本语言,特别是在Flash开发中。早期的ActionScript主要用于简单的交互和动画控制,但随着版本的升级,尤其是ActionScript 3.0,它成为了一个完全基于OOP(面向对象编程...
- **结构表现行为分离**:将网页的内容结构、样式表现和交互行为分开处理。 - **兼容性**:确保网站能在主流浏览器(如Chrome、Firefox、Safari等)中正常显示。 - **页面性能**:优化代码结构,减少服务器负载,...
### Web前端面试宝典知识点详解 #### 一、HTML和CSS ##### 1. 页面测试过的浏览器及其内核 - **Chrome**: Blink引擎 - **Firefox**: Gecko引擎 - **Safari**: WebKit引擎 - **Edge (旧版)**: EdgeHTML引擎 - **IE**...
符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的 解析速度. 文件规范 1. html, css, js, images文件均归档至<系统...
1. **HTML和CSS**:HTML(HyperText Markup Language)用于创建网页结构,CSS(Cascading Style Sheets)用于样式设计,两者是Web前端的基础。 2. **JavaScript**:用于客户端脚本编程,处理用户交互、动态更新页面...
Web前端开发是构建互联网应用程序和网站的关键组成部分,它涉及到用户在浏览器端所看到和交互的所有内容。这个领域涉及多种技术和标准,旨在确保网页内容的有效呈现、互动性和可访问性。 首先,我们要理解Web标准,...