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弹窗返回值详解(window.open方式)
Jan 11 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
浅析vue数据绑定
Jan 17 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
小程序实现文字循环滚动动画
Jun 14 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 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的控制语句
2006/10/09 PHP
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
php上传文件常见问题总结
2015/02/03 PHP
js style动态设置table高度
2014/10/21 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
Python的面向对象编程方式学习笔记
2016/07/12 Python
解决Python requests 报错方法集锦
2017/03/19 Python
python中字符串的操作方法大全
2018/06/03 Python
python实现黑客字幕雨效果
2018/06/21 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
给我一面国旗 python帮你实现
2019/09/30 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
付款委托书范本
2014/10/05 职场文书
研究生导师评语
2014/12/31 职场文书
安全责任书
2015/01/29 职场文书
python源码剖析之PyObject详解
2021/05/18 Python