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 相关文章推荐
JQuery从头学起第三讲
Jul 06 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 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合并js请求的例子
2013/11/01 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
分享Javascript实用方法二
2015/12/13 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
vue实现评价星星功能
2020/06/30 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
Python操作列表的常用方法分享
2014/02/13 Python
在Python的循环体中使用else语句的方法
2015/03/30 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
对python中的logger模块全面讲解
2018/04/28 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
python定义类的简单用法
2020/07/24 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
医院护士求职自荐信格式
2013/09/21 职场文书
销售总监岗位职责
2014/01/04 职场文书
主管会计岗位责任制
2014/02/10 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
交通安全月活动总结
2015/05/08 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书