JavaScript重构(九):自定义的JavaScript产品框架
2011-08-14 18:14
218 查看
产品做到一定程度,JavaScript不仅仅需要几个层面上的重构,而需要将这些合理的、零散的重构集成起来、系统化,最终形成一套适合自己产品的前端框架。
以某套产品的前端框架为例,包含了这么几个组件:
1、通用工具组件,提供了UI组件最基础的通用能力,包括:日志、缓存、数据共享、数据异步加载、原生对象扩展、Ajax产品定制化等等。
2、共享UI组件,包括:通用弹出框、通用按钮等。
3、产品基础模块,在所有页面均加载该JS,包括:评论模块、打分模块、基本资费模块、下载模块、播放模块等等。
4、扩展产品模块,仅在特定页面加载该JS,包括:播放器组件、直播频道组件等等。
5、关联常量预置模块,这部分主要是一些系统常量无法在JavaScript中确定下来,需要外部传值进去。
(依赖关系:5->1->2->3->4)
上述JS在开发过程中需要细化,并且需要严格限定互相之间的依赖关系,但在发布时,使用脚本或者JS聚合压缩工具整合到特定的一个或几个JS文件中。
UI模型和业务模型:
这部分可以说是框架的核心,包括模型的定义和模型数据的存储,所有的接口都是围绕模型制定的。
产品框架实施中遇到的几个典型问题:
1、页面JavaScript脚本对于不同语种下需要保持的差异:
譬如阿拉伯语是从右至左排的,那么对于操纵DOM的脚本来说,很可能和英文下有不同的差异,通常语种引起的差异可以用问题抽象和语种归类的办法化解:
比如语言文字从右向左排列和从左向右排列是造成某些展示不同的根本原因,那么在关联常量预置模块中设置好语种,涉及到的语种和左右排列方向的对应关系应当存放在代码中,最后在JavaScript代码中区分对待就可以了。
2、页面上的一些非通用的DOM操纵密切相关的代码和页面展示耦合紧密,这部分代码是不宜置入框架中的,置入后反而不便于产品定制,需要明确这个框架内外的分界线是什么。
3、结合开发团队技能情况制定详细的产品框架实现方案。
比如开发团队成员普遍缺乏JavaScript面向对象能力,这时候就不应当把框架做得太厚,应该对框架外的JavaScript使用适当放宽限制,同时做好命名规约。
4、API接口把关。
需要由有经验的程序员对于框架发布的接口把关,保证接口设计的合理性。
以某套产品的前端框架为例,包含了这么几个组件:
1、通用工具组件,提供了UI组件最基础的通用能力,包括:日志、缓存、数据共享、数据异步加载、原生对象扩展、Ajax产品定制化等等。
2、共享UI组件,包括:通用弹出框、通用按钮等。
3、产品基础模块,在所有页面均加载该JS,包括:评论模块、打分模块、基本资费模块、下载模块、播放模块等等。
4、扩展产品模块,仅在特定页面加载该JS,包括:播放器组件、直播频道组件等等。
5、关联常量预置模块,这部分主要是一些系统常量无法在JavaScript中确定下来,需要外部传值进去。
(依赖关系:5->1->2->3->4)
上述JS在开发过程中需要细化,并且需要严格限定互相之间的依赖关系,但在发布时,使用脚本或者JS聚合压缩工具整合到特定的一个或几个JS文件中。
UI模型和业务模型:
这部分可以说是框架的核心,包括模型的定义和模型数据的存储,所有的接口都是围绕模型制定的。
产品框架实施中遇到的几个典型问题:
1、页面JavaScript脚本对于不同语种下需要保持的差异:
譬如阿拉伯语是从右至左排的,那么对于操纵DOM的脚本来说,很可能和英文下有不同的差异,通常语种引起的差异可以用问题抽象和语种归类的办法化解:
比如语言文字从右向左排列和从左向右排列是造成某些展示不同的根本原因,那么在关联常量预置模块中设置好语种,涉及到的语种和左右排列方向的对应关系应当存放在代码中,最后在JavaScript代码中区分对待就可以了。
2、页面上的一些非通用的DOM操纵密切相关的代码和页面展示耦合紧密,这部分代码是不宜置入框架中的,置入后反而不便于产品定制,需要明确这个框架内外的分界线是什么。
3、结合开发团队技能情况制定详细的产品框架实现方案。
比如开发团队成员普遍缺乏JavaScript面向对象能力,这时候就不应当把框架做得太厚,应该对框架外的JavaScript使用适当放宽限制,同时做好命名规约。
4、API接口把关。
需要由有经验的程序员对于框架发布的接口把关,保证接口设计的合理性。
相关文章推荐
- Javascript测试框架Jasmine(四):自定义Matcher
- JavaScript 框架开发笔记 [三] 自定义HTML对像的扩展与继承
- WPF自定义产品框架
- javascript自定义 error事件
- 详解开源的JavaScript插件化框架MinimaJS
- JavaScript 单元测试框架:Jasmine 初探
- 2013年人气最高的JavaScript框架排名
- javaScript创建自定义的StrngBuffer类
- 帮助自定义选择框样式的Javascript - DropKick.js
- ArcGIS JS 版军事标绘图(燕尾箭头、钳击箭头、集结地)扇形等自定义图形, ArcGIS For JavaScript API Drawing Tool(绘图工具)————(十七)
- 浅谈javascript中自定义模版
- bootstrap后台框架源码 java图片爬虫 自定义表单
- 16 款最流行的 JavaScript 框架
- JavaScript实现防止网页被嵌入Frame框架的代码分享
- 深入学习JavaScript的AngularJS框架中指令的使用方法
- JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
- RDIFramework.NET-.NET快速信息化系统开发整合框架 【开发实例 EasyUI】之产品管理(MVC版)
- Netty学习8-自定义复杂序列化框架
- 10个最好的 JavaScript 动画库和开发框架
- HTML、CSS和JavaScript学习五(案例分析一框架窗体分割、超链接和热点区域)