你的位置:首页 > ASP.net教程

[ASP.net教程]架构师速成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效果,初学者还是很喜欢的。

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