页面重构中的设计模式.pdfVIP

页面重构中的设计模式

@Ghostzhang2014.7.01

目录

页面重构中的设计模式

目录

写在前面

关于设计模式

分离——内容、结构、表现、行为

关于模块化思维

页面重构中的模块化

HTML模块化

模块类型

布局容器

内容模块

内容模块原型

CSS模块化

类OOP方式

基本原则

继承

误区

对分离思想的误区

面向“效果”的模块化设计

模块的类型

基类

扩展类

实例类

模块样式的定义

解决样式定义的冲突

样式的作用域

样式的优先级

样式的作用域与标签的关系

样式的作用域与在文件中的位置的关系

不可入侵的区域

样式命名规则

1

内容模块的命名

基类命名

扩展类命名

实例类命名

用于模块内部的命名

模块框架命名

其它命名

状态类

元素类

CSS样式属性义类型

表现属性

布局属性

样式注释

模块管理的问题

使用“桥文件”解决文件更新问题

写在前面

首先，本文不适合初学者，如果你不知道HTML、CSS的实现原理，没有掌握常用的布局实现

方法，更不知道为什么要做模块化，那么以下的内容并不适合你。

如果你已经有相当的页面重构工作经验，参与过项目的合作开发，对模块化有所思考，那么本

文将帮你更深入的理解页面重构中的模块化。

关于设计模式

“设计模式”这个词也许你已经听过了很多次，知道的同学不需要我再重复，不知道的同学，我

也没把握在这短短的时间里跟你明白，以我的理解归纳了一下：

●设计模式是被发现而不是被发明的。

●设计模式是在解决特定问题时，所独立开发出类似的技术来解决这些问题，它们的共通

性即为模式。

●设计模式是用来解决一类相关问题的通用技术，而不是解决问题的特解。

●设计模式是一种解决问题的思路，而不是解决方案本身。

简单的说，我们想通过设计模式来解决问题（某种或某类问题的解决方案）。于是，随之而来

2

的问题就是：我们要解决什么样的问题？或者说，我们遇到了什么问题？

我们一直追求这样的代码：

简洁：

HTML：最少的、语义化的标签，实现所需要的结构

CSS：高复用、低冗余的定义

灵活：

HTML、CSS：最少改动，最多效果

可维护：

HTML、CSS：最快的速度定位到问题，最少的改动解决问题

于是，问题的根源就是“如何实现HTML、和CSS代码的简洁与灵活”，如何在HTML、CSS中

实现脚本编程语言中的：“封装”、“组件”、“可移植”等等特性。