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实现复选框成对选择及对应取消的方法
Mar 03 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
vue的路由映射问题及解决方案
Oct 14 Javascript
微信小程序如何实现在线客服功能
Oct 16 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 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
数据库相关问题
2006/10/09 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
php经典算法集锦
2015/11/14 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
单链表反转python实现代码示例
2018/02/08 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
Python 支持向量机分类器的实现
2020/01/15 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
九年级体育教学反思
2014/01/23 职场文书
探亲邀请信范文
2014/01/30 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
送达通知书
2015/04/25 职场文书
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫
mysql数据库隔离级别详解
2022/06/16 MySQL