网站开发——前端篇

我们就从最耳熟的DIV+CSS说起吧，DIV是Html中的一个元素，CSS是一种解释性的语言，一个元素与一种语言中间加上个“+”号，有没有感觉有点“差辈”了？而如果从更深一层意义上来讲，“DIV+CSS”这种叫法又是合理的：它是在阐述内容与外观分离的思想，事实上，更严谨的名子应该叫作“Html+Css”。把一个网页纵向分解，我们只会得到三个部分：内容、外观和功能，时间关系，功能暂且不谈。既然内容与外观是分离的，那么，我们需要改变网站的外观部分时，内容和功能的部分是不需要考虑的，也不需要实质性改动。比如五洲的这次改版，是不需要技术参与的，编辑也不需要作数据更新之外的事情，因为只是在改外观而已。当然，我说的是规范化、标准化之后的情况。Html的实质是标签节点被限制、被固化了的Xml(一个标准的描述数据的语言)。而Html用于描述网页的内容结构、Css 用于控制网页的外观。Html +CSS的本质是：使用Html对网站进行标准化、规范化的内容结构上的描述；然后使用CSS描述网页的外观。这样就实现了网页内容与外观的分离。可是，为什么要分离呢？把内容与外观分离的最根本、最主要的原因，是为了让网站有更高的可扩展性能，让网站的可伸缩性达到极致。而因此带来的好处还有很多，比如：简化了网页代码，使页面载入得更快，与搜索引擎更友好，我们分离后的代码能让搜索引擎的爬虫更高效、更顺畅的采集到数据，这样有利于网站的收录与排名。

 

 

  

前面提到过，Css是用来描述网站外观的一种解释性的语言，它不是面向对象的编程语言，但我们对网站可扩展性的要求越来越高了，那么，如何让Css也具有“继承、封装、多态和重用”的高级特征呢？最现成的方法就是让Css对象化，而面向对象编程语言当中现有的模块对象化，并不能最大化网站的可扩展性，那么，最完美的方法就是模块对象化与属性对象化相结合，这样才能让网站更趋智能化，让我们的代码足够聪明，也减少了代码量并降低了将来的维护成本。

 

说到底，我们时刻不能忘记提高网站系统的可扩展性能，而我们编码工作者的天职，就是让让最纯净、最完美的代码，把我们的网站系统打造成一个足够聪明的智能工具，而不是让网站的多样化需求把我们变成的制作工具! 

 

这些理论运用到现实中的情况是这样的：比如我们现在要作一个两列布局的网页，右边一列宽度为200px，而左侧一列的宽度是700px，右侧有一个“专家在线”的模块，宽度为180px，内侧留空白10px,还要1px的灰色边框，里面标题的字体为白色并加粗，背景为深绿色……,我们定义相应的Css属性，而另一个页面也有一个“专家在线”的模块，但是在左侧一列，宽度相差500px，我们如何重用？这时就需要分离Css属性：把描述外观的属性和描述结构的属性分离出来，封装在两个不同的样式类里面，在随后引用时，我们只需要以多态的形式赋予相应的的模块外观属性和结构属性。