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 相关文章推荐
jQuery针对各类元素操作基础教程
Aug 29 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
基于axios 的responseType类型的设置方法
Oct 29 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
php实现的SESSION类
2014/12/02 PHP
学习php开源项目的源码指南
2014/12/21 PHP
php判断两个浮点数是否相等的方法
2015/03/14 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
Puppet的一些技巧
2018/09/17 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
python字典序问题实例
2014/09/26 Python
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
Python数据类型之List列表实例详解
2019/05/08 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
乐高官方旗舰店:LEGO积木玩具
2019/04/06 全球购物
营销总经理的岗位职责
2013/12/15 职场文书
2014年教师节寄语
2014/08/11 职场文书
设备收款委托书范本
2014/10/02 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
遗嘱格式范本
2015/08/07 职场文书
防溺水主题班会教案
2015/08/12 职场文书