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开发之三数组对象实例介绍
Nov 12 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
Js实现自定义右键行为
Mar 26 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 Javascript
微信小程序(订阅消息)功能
Oct 25 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文件操作相关类实例
2015/06/18 PHP
php多重接口的实现方法
2015/06/20 PHP
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
js和as的稳定传值问题解决
2013/07/14 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
Python可变参数用法实例分析
2017/04/02 Python
Python网络编程详解
2017/10/31 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
python yield和Generator函数用法详解
2020/02/10 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
普通员工辞职信
2014/01/17 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
地理教师岗位职责
2014/03/16 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
培训班开班主持词
2015/07/02 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
go goroutine 怎样进行错误处理
2021/07/16 Golang