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字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
javascript 事件处理程序介绍
Jun 27 Javascript
JS画5角星方法介绍
Sep 17 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
JS实现炫酷轮播图
Nov 15 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
webpack多入口多出口的实现方法
2018/08/17 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
《学棋》教后反思
2014/04/14 职场文书
新学期开学演讲稿
2014/05/24 职场文书
面试通知单大全
2015/04/20 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技