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

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

　　很多人对于web标准化的理解就是“DIV+CSS”，或者“IE、FF、Chrome、Opera、Safari测试无错”，或者就是“通过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和事件属性。比如：

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

　　但是在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/

（编辑：好传媒网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!