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 01 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
javascript针对DOM的应用分析(三)
Apr 15 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
JQuery datepicker 用法详解
Dec 25 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
React Router基础使用
Jan 17 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
Feb 20 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 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
php部分常见问题总结
2008/03/27 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
python正则实现计算器功能
2017/12/14 Python
Django中url的反向查询的方法
2018/03/14 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
python烟花效果的代码实例
2020/02/25 Python
Python实现对adb命令封装
2020/03/06 Python
Python求凸包及多边形面积教程
2020/04/12 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
python函数超时自动退出的实操方法
2020/12/28 Python
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
中学推普周活动总结
2015/05/07 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
tomcat下部署jenkins的方法
2022/05/06 Servers