架构师速成6.12-开发框架-前端封装

标签：

做一个网站不只有写后端代码，为了更好的用户体验以及更优雅的代码实现，我们也需要对前端进行封装。但是在谈封装之前还是要先提一下统一的规范，前端统一的规范尤为重要，这是给用户一致性体验最核心的关键点。我举一个反面的例子，大家可能一下就明白前端规范的重要性了。之前做过一个网站，流程如下：

1. 设计给图片
2. 前端照图片进行静态页面生成
3. 后端再加入代码，最终成为一个网站

这个流程没有什么问题，但是设计没有统一的规范，他给出的每一页文字大小，表单，分页几乎都不太一样，都有些许的区别。前端做页面的同学，也严格要求自己，每一页都做的很符合原图。后端同学发现不能重用，那也只好每页单独做分页，做表单，做js校验，严重的是光用户头像就7个size，我们到最后都要哭了。最后做出的网站给人感觉不太像一个网站，因为每页有些相似，但是又有细微不同。而且css，js超多，几乎每页都对应一个单独的css和js。维护起来很费劲，比如加一些字段，还得设计再修改原图，前端再照着切，否则有些地方就不美观。设计，前端，后端每个人都疲于奔命，结果还是工期大大延后。

所有前端规范非常重要：

1. 除首页外，统一定义列表页，详情页，表单维护页的模板，全站使用一套。
2. 模板要抽取公用部分，统一头，统一尾，统一头像（大，中，小），统一翻页
3. 字体大小统一（大，中，小），网站所有的输入框，标题，错误提示都规范等等
4. 统一颜色，不能超过3个配色
5. 页面其他元素也要统一，例如 提示，弹框等等
6. 业务相关的元素也要统一设计，举个例子：比如当当的图书，淘宝的商品
7. 其他需要统一的部分

后来统一之后，设计只需要设计好那几个关键模板就可以了，有了新的业务元素设计一下，非常轻松。前端统一样式之后，css就只有一个也是无比轻松，而且也不需要切页面了。后端同学也轻松了，拷贝一个模板，改改里面信息项就ok了。这个要向bootstrap学习。

另外前端需要的文件也很多，css,js,html,img等等，文件夹规范也是很重要的。必要时请考虑动静分离，使用nginx加载静态资源，你会觉得爽多了。

说完规范，再说一下其他的关键点：

1. 前端模块化开发 例如:SeaJS，RequireJS，如果要进行前端规模化开发，必须要考虑。如果只有一个前端，也尽量使用模块化开发方式。好处自己google。
2. 采用统一的底层类库，JQuery目前是使用率最高的了。不要张三说我用A，李四说我用B，结果互不妥协。必须只能选一个，就像后端你不能选了spring，又选nutz。
3. UI类库封装，弹框，消息，tooltip，翻页，form校验，tab页，日期，图表等等与界面相关的
4. 功能类库封装：ajax，异常处理，前端计算，模板加载等等
5. 无js化，参见angularjs jui(国内前端框架)，毕竟写js对初学者还是有些难，如果不需要写js，而只是加上一些属性，就可以实现js效果，初学者还是很喜欢的。

网站开发一前一后是必备的，必须进行完美的封装，让初学者也能很快上手。

架构师速成6.12-开发框架-前端封装

标签：

原文地址：http://blog.csdn.net/for5million/article/details/47249041