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 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
intro.js 页面引导简单用法 分享
Aug 06 Javascript
学习vue.js计算属性
Dec 03 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
jQuery操作css样式
May 15 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
vue 父组件调用子组件方法及事件
Mar 29 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
JavaScript 中的六种循环方法
Jan 06 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二维数组的去重问题解析
2011/07/17 PHP
mac下Apache + MySql + PHP搭建网站开发环境
2014/06/02 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
Python函数学习笔记
2008/10/07 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
python 把数据 json格式输出的实例代码
2016/10/31 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
thinkphp5 路由分发原理
2021/03/18 PHP
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
戴尔英国官网:Dell英国
2017/05/27 全球购物
巴西宠物商店:Cobasi
2019/04/19 全球购物
《孙权劝学》教学反思
2014/04/23 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
只用Python就可以制作的简单词云
2021/06/07 Python
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers