求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Modeler   Code  
会员   
 
  
 
 
 
JS重构计划
 

2011-6-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. 加快脚本响应,提高用户体验


重构-使代码更简洁优美
Visitor Parttern
由表及里看模式
设计模式随笔系列
深入浅出设计模式-介绍
.NET中的设计模式
更多...   

相关培训课程

J2EE设计模式和性能调优
应用模式设计Java企业级应用
设计模式原理与应用
J2EE设计模式指南
单元测试+重构+设计模式
设计模式及其CSharp实现


某电力公司 设计模式原理
蓝拓扑 设计模式原理及应用
卫星导航 UML & OOAD
汤森路透研发中心 UML& OOAD
中达电通 设计模式原理
西门子 嵌入式设计模式
更多...