javascript 写类方式之十


Posted in Javascript onJuly 05, 2009

10、mootools.js的写类方式
mootools.js的最新版本是1.2.3,这里使用的是1.2.0。mootool被设计成非常紧凑的,模块化的,面向对象的的js库。mootool中写类用Class类。Class类由Native类new出来的:

/* 
*Script: Class.js 
*/ 
var Class = new Native({ 
name: 'Class', initialize: function(properties){ 
properties = properties || {}; 
var klass = function(empty){ 
for (var key in this) this[key] = $unlink(this[key]); 
for (var mutator in Class.Mutators){ 
if (!this[mutator]) continue; 
Class.Mutators[mutator](this, this[mutator]); 
delete this[mutator]; 
} 
this.constructor = klass; 
if (empty === $empty) return this; 
var self = (this.initialize) ? this.initialize.apply(this, arguments) : this; 
if (this.options && this.options.initialize) this.options.initialize.call(this); 
return self; 
}; 
$extend(klass, this); 
klass.constructor = Class; 
klass.prototype = properties; 
return klass; 
} 
});

Native方法是mootools中一个非常重要的方法,很多类都用它去组装。如Window,Document,Event。当然还有这里的Class,导入mootools后我们写类时只需要用Class就行了。一个Person类:
/** 
* Person类 
* @param {Object} name 
*/ 
var Person = new Class({ 
initialize: function(name){ 
this.name = name; 
}, 
setName : function(name) { 
this.name = name; 
}, 
getName : function() { 
return this.name; 
} 
}) //new一个对象 
var p = new Person("jack"); 
//测试set,get方法 
console.log(p.getName());//jac 
p.setName('andy'); 
console.log(p.getName());//andy 
//测试instanceof及p.constructor是否正确指向了Person 
console.log(p instanceof Person); //true 
console.log(p.constructor == Person); //true

Native实际上只是一个普通函数,它通过所传参数组装了一个类(function),最后返回该类(function)。既然Native是函数,函数调用的方式是(),call,apply。但在mootools中却用new Native(obj)方式。为何?原因只是使Native看起来更像一个类而已。
Javascript 相关文章推荐
js URL参数的拼接方法比较
Feb 15 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
JavaScript window.location对象
Nov 14 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
javascript 写类方式之九
Jul 05 #Javascript
javascript 写类方式之八
Jul 05 #Javascript
javascript 写类方式之七
Jul 05 #Javascript
javascript 写类方式之六
Jul 05 #Javascript
javascript 写类方式之五
Jul 05 #Javascript
javascript 写类方式之四
Jul 05 #Javascript
javascript 写类方式之三
Jul 05 #Javascript
You might like
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
用Zend Encode编写开发PHP程序
2010/02/21 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
php代码架构的八点注意事项
2016/01/25 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
详解Python中类的定义与使用
2017/04/11 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
航空大学应届生求职信
2013/11/10 职场文书
销售个人求职信范文
2014/04/28 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书