位置：首页>> 网络编程>> 网页设计>> web前端结构与行为的分离

web前端结构与行为的分离

作者：mytharcher　　发布时间：2014-07-02 22:43:52　

标签：

如今的web开发也需要越来越接近MVC框架模式，web的前端可视为由结构+表现+行为组成，根据W3C的标准，使用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;//根据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>
[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前端结构与行为的分离

猜你喜欢