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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
详解js类型判断
May 22 Javascript
JavaScript实现一键复制内容剪贴板
Jul 23 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
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
Array对象方法参考
2006/10/03 Javascript
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
virtualenv实现多个版本Python共存
2017/08/21 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
Django 内置权限扩展案例详解
2019/03/04 Python
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
中学老师的自我评价
2013/11/07 职场文书
服装行业创业计划书范文
2014/02/05 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
婚内房产协议书范本
2014/10/02 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
关于EntityWrapper的in用法
2022/03/22 Java/Android