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 相关文章推荐
javascript实现yield的方法
Nov 06 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 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
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
在python中画正态分布图像的实例
2019/07/08 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
python 装饰器的基本使用
2021/01/13 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
J2EE面试题大全
2016/08/06 面试题
高三毕业典礼主持词
2014/03/27 职场文书
股份转让协议书
2014/04/12 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
学校志愿者活动总结
2014/06/27 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript