软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > 工具与技巧 > 前台开发从头说起:关于web标准化

前台开发从头说起:关于web标准化

  虽然CSS在表现方面天生具有很多优势,但是如果不是web标准化的盛行,估计CSS不会达到今天这样的热门。所以要说CSS,肯定要从web标准化说起。实际上,对CSS的理解越深,才能越好地理解和使用CSS。

  很多人对于web标准化的理解就是“DIV+CSS”,或者“IE、FF、ChromeOperaSafari测试无错”,或者就是“通过w3c校验”。实际上,这些都只是web标准化以后附带的一些好处或者说一些表现。web标准化的精髓并不是为了抛弃表格,或者浏览器兼容,或者通过w3c校验。有时候,标准化了的网页未必一定能达到上述这些特征。

  web标准化的精髓或者说本质到底是什么呢?其实很简单,就是“结构、表现、行为分离”。这句话看起来简单,但是真的实现起来,就不那么容易了。分离,分离到什么程度算是标准?分离的目的是什么?举例来说吧。

  既然要分离,那么耦合度当然是越低越好。

  以样式为例。我们可以把所有的样式都放到外部CSS文件中,那么,CSS规则如何影响你的页面元素呢?有时候用到ID,有时候用到class。如果你的页面充满了ID和class,那么实际上分离得就不怎么彻底,因为你的页面上仍然有大量的ID或者class实际上是为了样式表现而存在的,他们并不是文档结构本身的要求。所以现在有“class hell”的说法。就是为了完全由外部css对页面实现精确控制,而在页面文档中加入大量,甚至过多的class。

  再以行为为例。很多时候我们需要和用户交互,于是要给页面上的元素添加“onclick”,“onchange”,“onmouseover”等属性,这些属性编写在页面文档中,依赖于外部javascript。一旦外部的javascript被拿走,页面就出现执行脚本错误,甚至完全不能正常阅读。在这种情况下,javascript实际上和xhtml就没有能够解除耦合。

  实际上,由于只有xhtml、css、javascript三者存在,我们不可能在网页开发中引入“面向接口编程”之类的设计模式。那么,我们所谓的彻底分离,其实从三者分离的最根本目的来说,就是要实现xhtml对另外两者不依赖。即使去除了所有的css和javascript,xhtml本身也能很好地完成自己的职责——文档结构。而css和javascript呢?依赖于xhtml是必然的。

  如此一来,如何解除耦合呢?其实答案就呼之欲出了。那就是尽量避免和文档结构无关的元素嵌套,尽量去除class和事件属性。比如:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
<ul>
<li><a href="#">国内新闻</a></li>
<li><a href="#">国际新闻</a></li>
<li><a href="#">财经新闻</a></li>
<li><a href="#">体育新闻</a></li>
</ul>

  这样一段源代码,从文档结构的角度来理解,它就是一组彼此关联,没有先后和主次之分的列表,可以理解为列表,也可以理解为目录。

  但是在css的作用下,它可以变成菜单、导航条等各种形式,如果css和javascript相结合起来,它还可以变成滑动门、三态菜单等。在这种情况下,css负责表现,javascript负责行为,而xhtml并没有因为css想实现什么样式或者javascript想实现什么交互行为而改变自己。不管css和javascript想做什么,都跟它没关系。那么实际上就真正达到了我们“彻底分离”的目的。保证了文档结构的纯粹性。这就是web标准的思维模式。

  随之而来的好处,那就是页面的兼容性,不管在什么样的浏览器里,这段xhtml都是合法有效的。w3c校验也不会有任何问题。并且SEO也会非常好。因为搜索引擎想要的并不是class或者onmouseover,搜索引擎想要的只不过是链接地址和链接文字。

  那么,没有class,怎么实现样式呢?没有onmouseover或者onclick,怎么实现javascript事件呢?这就需要网页开发人员的css功力和javascript功力了。

  所以,越是标准化,对css和javascript的技术要求越高。反过来,css的能力达不到,或者javascript的能力达不到,那就需要借助于class(id和文档结构有关,不算在这里,后面我们再谈)、借助于onmouseover或者onclick这些与结构无关的属性来帮助实现样式或者行为。

  在博客园上,暴牙齿提出“独立于根”的想法。我个人认为从文档结构的角度,并没有“独立于根”的要求。但是如果能够达到“独立于根”的开发能力,那么实现起标准化来就绝对会非常得心应手。因为连“独立于根”都能实现自己的设计样式和行为的话,有了结构的文档就更不在话下了。

  理解了标准化的本质和终极目标,如何通过css和javascript来达到这个目标呢?这个问题,留到本系列以后的文章再谈。

  【说明:一直在园子里学习各位高手的经验技巧,自己写得比较少。最近给学生上课的时候,针对学生关于前台开发提问比较多的问题,结合平时上网看到的很多观点和争论,小小地总结了一下,计划写个关于前台开发的系列文章。计划以web标准化为根本出发点,主要谈css和javascript的问题。两天左右更新一篇。水平有限,希望各位高手多多指点,欢迎大家讨论。本系列首发我的个人博客,在博客园同步更新。如果转载,请注明作者出处。谢谢。】

  转自:http://www.cnblogs.com/dvbhack/

    相关阅读
    栏目导航
    推荐软件