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 相关文章推荐
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
javascript加号"+"的二义性说明
Mar 04 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
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的一个登录的类 [推荐]
2007/03/16 PHP
PHPMyAdmin 快速配置方法
2009/05/11 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
判定是否原生方法的JS代码
2013/11/12 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
python实现最大优先队列
2019/08/29 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
Pytorch之contiguous的用法
2019/12/31 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
半年思想汇报
2013/12/30 职场文书
学校与家长安全责任书
2014/07/23 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
老人节主持词
2015/07/04 职场文书
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android