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自动打开页面上链接的实现代码
Sep 25 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
js实现移动端轮播图滑动切换
Dec 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中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
python从ftp下载数据保存实例
2013/11/20 Python
python字符串对其居中显示的方法
2015/07/11 Python
python交互式图形编程实例(二)
2017/11/17 Python
Python工厂函数用法实例分析
2018/05/14 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
python实现手机销售管理系统
2019/03/19 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
python redis存入字典序列化存储教程
2020/07/16 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
英语系本科生个人求职信
2013/09/21 职场文书
高三毕业生自我鉴定
2013/12/20 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
跳槽求职信范文
2014/05/26 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
和谐拯救危机观后感
2015/06/15 职场文书