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 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
JS数组去重详情
Nov 07 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和ACCESS写聊天室(六)
2006/10/09 PHP
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
特步官方商城:Xtep
2017/03/21 全球购物
应届生护士求职信
2013/11/01 职场文书
幼师专业求职推荐信
2013/11/08 职场文书
基层工作经验证明样本
2014/11/16 职场文书
拾金不昧通报表扬范文
2015/05/05 职场文书
失恋33天观后感
2015/06/11 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
解析Java中的static关键字
2021/06/14 Java/Android
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang