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 相关文章推荐
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 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实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
PDO::getAttribute讲解
2019/01/28 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
机械电子工程毕业生自荐信
2013/11/23 职场文书
助人为乐表扬信范文
2014/01/14 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
四年级学生期末评语
2014/12/26 职场文书
行政经理岗位职责
2015/04/15 职场文书
水知道答案观后感
2015/06/08 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL