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中根据字数截取字符串,不能截断url
Jan 12 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
node.js中的Socket.IO使用实例
Nov 04 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 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 file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
php邮件发送的两种方式
2020/04/28 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
jQuery 白痴级入门教程
2009/11/11 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
Python使用gensim计算文档相似性
2016/04/10 Python
Python做简单的字符串匹配详解
2017/03/21 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
python类的实例化问题解决
2019/08/31 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
python如何爬取动态网站
2020/09/09 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
美国精油公司:Plant Therapy
2019/05/17 全球购物
《胖乎乎的小手》教学反思
2014/02/26 职场文书
教师考核材料
2014/05/21 职场文书
签约仪式策划方案
2014/06/02 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
公司员工培训管理制度
2015/08/04 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS