JS重构计划
 

2011-06-08 来源:网络

 

记录我的JS重构计划,以后但凡有所改变都会更新直到重构完毕!目前“某网站”的JS处于一个混乱时期,可以看出除了我之外有不少人的code在里面…

计划分为三个部分:

1. 梳理代码风格

目前使用了jQuery但是没有正确使用jQuery…

例如出现了“this.value = “值”;”原作者为了追求速度而放弃了稳定性,这就失去了使用jQuery的意义。并且还有自己实现的事件代理,这些都可以使用delegate方法优雅的实现。

统一代码风格

目前代码风格有很多,例如同一份文件出现了字符串用单引号和双引号同时使用的问题。这对代码的阅读造成了障碍。

2. 形成组件库

目前有很多相同的功能但是使用了不同的代码实现,做了重复工作且对于维护相当不利!

例如:验证组件在登录、注册、修改个人资料等很多地方都用到了,但是都在各个地方重新写了一份。

注意点

确保组件不过度设计,够用即可,精简为重!

组件的设计模板使用“书写模块化JS(一)”一文中提到的方式进行,而非以jQuery插件形式。目的是为了保持对CommonJS模块化标准的支持,以备下一步重构!

所有的模块独立成一个文件,在打包时包括到具体的相应js中!

3. 使用Script loader和模块化机制

主要目标是实现更好的脚本载入与更快的页面响应。

主要工作是:

一. 找到或实现好的JS seed库能实现以下功能:

  1. 模块化JS机制
  2. 并行的脚本载入
  3. 脚本的载入与执行分离
  4. 自动按需载入
  5. 版本控制

二. 实现一个更好的版本管理机制,后台为JS添加上cache标签;

总结

最终实现后每个页面的JS结构如下:

  1. seed.js放置于script标签中,用于页面的载入;
  2. page.js页面特有的JS,放置于script标签中;page.js还会包含本页面所使用到的库的载入代码;
  3. 其余的ku.js为本页使用的库,此js可能为多个。比如:jquery.js/tab.js/validate.js等等。虽然会增加链接数,但是由于有并行下载,且这些JS的载入不会影响浏览器的载入提示符!

重构的三个大原则:

  1. 任务重、时间长,一步一步慢慢来(不设期限,但早完成早开心);
  2. 确保任何时候都可以上线(不影响正常工作);
  3. 加快脚本响应,提高用户体验


十天学会DIV+CSS(WEB标准)
HTML 5的革新:结构之美
介绍27款经典的CSS框架
35个有创意的404错误页面
最容易犯的13个JavaScript错误
设计易理解和操作的网站
更多...   


设计模式原理与应用
从需求过渡到设计
软件设计原理与实践
如何编写高质量代码
单元测试、重构及持续集成
软件开发过程指南


东软集团 代码重构
某金融软件服务商 技术文档
中达电通 设计模式原理与实践
法国电信 技术文档编写与管理
西门子 嵌入式设计模式
中新大东方人寿 技术文档编写
更多...   
 
 
 
 
 

组织简介 | 联系我们 |   Copyright 2002 ®  UML软件工程组织 京ICP备10020922号

京公海网安备110108001071号