JS 的应用开发初探(mootools)


Posted in Javascript onDecember 19, 2009

做了三个小demo,本来想做一个类似Gmail的界面出来后来突然发现机器上没有Office,就干脆做了一个类PPT演示的小玩意。

基于js的应用开发总结起来主要有如下几点:

封装粒度
常用功能封装为可重复使用的组件,需要合理选择组件封装粒度,粒度过大不便于复用,粒度过小则得不偿失。

代码结构规划
吸收传统软件开发的思想将代码按功能划分为不同的区块:初始化,事件绑定,事件逻辑处理,外部Callback调用

Js的面向对象
简单起见可以使用构造函数(其实就是普通的Function)+ prototype定义,虽然看起来不是很优雅不过却是比较直接的解决办法。演示代码中使用了Mootools类库,相比jQuery来说,这个类库的面向对象特性使用起来个人感觉更好一些,当然也可以使用它自带的Class申明方式来编写你自己的Class:

Meta.Controls.Pager = new Class({ 
Implements: [Events, Options], 
options: { 
pageIndex :1, // 当前页码, 从1开始 
size : 10, // 每页显示记录数 
maxButtons : 5,// 显示的分页按钮数量 
showPageSize:true, // 显示分页大小选项. 
sizeArray:[10, 25] 
}, 
initialize: function (A) { 
this.setOptions(A); 
this.pageIndex = this.options.pageIndex; 
this.size = this.options.size; 
this.maxButtons = this.options.maxButtons; 
this.itemCount = 0; 
this.pageCount =0 ; 
}, 
...... 
}

这样的方式也是不错的选择,代码逻辑结构清晰一目了然。

单元测试
通常认为浏览器上的js 应用要做单元测试不好做,原因主要是跟DOM关系太紧密,但也不是完全没有办法,比如Google的Closure就做得不错,使用Mock的对象来模拟Dom元素并解耦代码逻辑与Dom对象操作。
下面是本次实例的代码,感兴趣的童鞋自行下载。

Javascript 相关文章推荐
JavaScript 获取事件对象的注意点
Jul 29 Javascript
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
Json对象替换字符串占位符实现代码
Nov 17 Javascript
JS重要知识点小结
Nov 06 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 Javascript
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 #Javascript
javascript demo 基本技巧
Dec 18 #Javascript
IE和Firefox下event事件杂谈
Dec 18 #Javascript
替代window.event.srcElement效果的可兼容性的函数
Dec 18 #Javascript
JavaScript 序列化对象实现代码
Dec 18 #Javascript
让div层随鼠标移动的实现代码 ie ff
Dec 18 #Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 #Javascript
You might like
php下保存远程图片到本地的办法
2010/08/08 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
destoon二次开发入门示例
2014/06/20 PHP
php制作文本式留言板
2015/03/18 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
nginx 设置多个站跨域
2021/03/09 Servers
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
js实现全选和全不选
2020/07/28 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
函授本科毕业自我鉴定
2013/10/09 职场文书
幼儿园大班新学期寄语
2014/01/18 职场文书
内衣营销方案
2014/03/15 职场文书
法学院毕业生求职信
2014/06/25 职场文书
四风问题查摆材料
2014/08/25 职场文书
个人剖析材料范文
2014/09/30 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
高三英语复习计划
2015/01/19 职场文书
高三物理教学反思
2016/02/20 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
PyMongo 查询数据的实现
2021/06/28 Python
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL