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的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
js实现有时间限制消失的图片方法
Feb 27 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
Angular学习教程之RouterLink花式跳转
May 03 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
微信小程序实现消息框弹出动画
Apr 18 Javascript
jQuery实现增删改查
Dec 22 jQuery
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 删除cookie和浏览器重定向
2009/03/16 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
页面使用密码保护代码
2013/04/10 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
js微信分享实现代码
2020/10/11 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
python实现人机五子棋
2020/03/25 Python
Python request操作步骤及代码实例
2020/04/13 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
python安装及变量名介绍详解
2020/12/12 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
聚美优品恶搞广告词
2014/03/14 职场文书
产品推广策划方案
2014/05/10 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript