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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 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从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
对pandas中apply函数的用法详解
2018/04/10 Python
Python实现端口检测的方法
2018/07/24 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
德国PC硬件网站:CASEKING
2016/10/20 全球购物
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
本科毕业生自荐信
2014/05/26 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
《雷雨》教学反思
2016/02/20 职场文书
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python