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 相关文章推荐
JavaScript EasyPager 分页函数
May 25 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
热点新闻滚动特效的js代码
Aug 17 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
js实现密码强度检验
Jan 15 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
用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
URL Rewrite的设置方法
2007/01/02 PHP
学习php开源项目的源码指南
2014/12/21 PHP
javascript获取当前ip的代码
2009/05/10 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
详解vue axios二次封装
2018/07/22 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
对于Python的框架中一些会话程序的管理
2015/04/20 Python
python实现简单图片物体标注工具
2019/03/18 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
农民工创业典型事迹
2014/01/25 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
供电工程专业求职信
2014/08/09 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
2015年端午节活动方案
2015/05/05 职场文书
工作年限证明范本
2015/06/15 职场文书
工作简历的自我评价
2019/05/16 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers