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实现键盘按键监听
May 11 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
javascript数组定义的几种方法
Oct 06 Javascript
JS实现瀑布流布局
Oct 21 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
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
PHP函数microtime()用法与说明
2013/12/04 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
利用Python如何生成随机密码
2016/04/20 Python
python数据处理实战(必看篇)
2017/06/11 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
Python属性和内建属性实例解析
2020/01/14 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
django 模型中的计算字段实例
2020/05/19 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
Python中的全局变量如何理解
2020/06/04 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
大学生志愿者活动总结
2014/06/27 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
2016年情人节问候语
2015/11/11 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript