www.qitongnet.com网站设计web前端结构与行为的分离_网页设计 -网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

北京网站设计简单好用的 HTML 卷标与属性
 企通互联带有图片预览功能的上传表单的完整HTML
网站设计网页设计应用：使用CSS截字
 北京网站设计网页表单元素Input的高级用法11例
 网站设计精彩网页配色设计
 网站设计网页设计中HTML常犯的五个错误
 北京网页设计Adobe Fireworks CS3的新特性
 网页设计关于中英文正文字体比较
 网页设计良好用户体验的网站主页需具备12个特征
 网站建设页面载入时提示消息层

品牌理念

北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!

友好连接

文章搜索

你的位置：首页 >> 网页设计 >> www.qitongnet.com网站设计web前端结构与行为的分离

www.qitongnet.com网站设计web前端结构与行为的分离

作者：北京网站建设日期：2008-03-27 06:14:06 来源： http://www.qitongnet.com

资深北京网站建设公司企通互联网站制作,专业致力于北京网站建设,北京网站制作,北京网站设计,北京网页设计领域,千余网站建设案例，公司拥有国内一流的网站建设、网站制作、网页设计团队，如果您已经有网站的,看看我们精美的网站建设案例也无妨.北京网站建设网址：http://www.qitongnet.com =======================================================================================

如今的web开发也需要越来越接近MVC框架模式，web的前端可视为由结构+表现+行为组成，根据 www.qitongnet.comW3C的标准，使用xhtml+css已经使得结构和表现成功分离。在网上看到越来越多被重构过的网站是件非常令人欣喜的事情，如果现在要让我再做一个表格布局的网页，当我看到那一堆可以被一句CSS代替的表格代码时，我甚至会恶心到想吐！标准给挣扎在混沌的淤泥里的我们带来了清新空气，良好重构过的页面也像出淤泥而不染的清莲，香馨沁人心脾！那么下一步就应该是结构和行为的分离了，因为表现和行为本来是不相关的，就算微软的浏览器标准支持一个我当时非常喜欢的css里的behavior，但现在看来表现依然不能包括行为，不应该去代替行为行事。在这个三角形里，结构可以说是重点，表现依赖于结构，行为也依赖于结构，表现和行为的联系相对较少（除了一些特效操作），表现是被结构导入的，于是开始思考，行为是否也可以完全由外部导入，在结构即html页面里完全看不到一句javascript代码？

经过本人一番研究，至少一半左右简单应用的行为是可以分离开的。为什么说是一半呢，由于通过对对象定义的事件函数还存在参数传递的一些问题，但绕过这个障碍实施全部应用的可行性正在研究中，而且态势也在逐渐明朗，将在下文提及。所以答案是肯定的——结构（html）与行为（javascript）可以实现分离！

北京网站建设下面来看分离面临的核心问题，一个我的实例（为方便调试，js代码仍写在script标签里，但其他任何北京网站设计body里的对象都不再添加js代码）：

运行代码框网站建设
<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;// <a href="http://www.qitongnet.com" target="_blank">网站设计</a>根据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> <a href="http://www.qitongnet.com" target="_blank">北京网页设计</a>列表项5</li> </ul> </div> </body> </html>网站设计
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

函数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里也碰到的，仔细思考了一下，似乎明白了设置这个机制的道理，因为当一个事件触发函数时，其实需要传递的参数都是在外部暂时静态存在的，那么直接在函数里调用外部的对象或其他数据，也就完成了需求。

说是完成了，但心里总是隐隐约约觉得不妥，好象还是不完美，不过到这已经足够了，我们的目的是结构与行为的分离，那么已经实现了，收工大吉！

网页设计

字体：【大】【中】【小】

上一篇：网站制作关于web标准的思考

下一篇：北京网页设计细谈网页优化和网站优化的几种方式

这是一个与众不同的品牌，企通互联只专注于网站建设领域！中小型企业网站建设最佳合作伙伴！网站建设咨询热线：010-65587978/77/76/75!

网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

http://www.qitongnet.com 网站建设咨询热线：010-65587978/77/76/75

相关文章

品牌理念

友好连接

文章搜索

www.qitongnet.com网站设计web前端结构与行为的分离