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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
js同时按下两个方向键
Dec 01 Javascript
JsDom 编程小结
Aug 09 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
vue实现点击展开点击收起效果
Apr 27 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
小程序实现列表倒计时功能
Jan 29 Javascript
JavaScript ES6的函数拓展
Jan 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
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
php的urlencode()URL编码函数浅析
2011/08/09 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
python改变日志(logging)存放位置的示例
2014/03/27 Python
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
python清除函数占用的内存方法
2018/06/25 Python
python操作链表的示例代码
2020/09/27 Python
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
物流管理应届生求职信
2013/11/07 职场文书
国际商务系学生个人的自我评价
2013/11/26 职场文书
社区志愿者心得体会
2014/01/03 职场文书
社区工作者思想汇报
2014/01/13 职场文书
甜点店创业计划书
2014/01/27 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
2015年元旦标语大全
2014/12/09 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书