`
mismo
  • 浏览: 4763 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类
最新评论

MooTools源码分析一 —— Native

阅读更多
转自: http://mooui.com/blog/view.aspx?id=1

// 框架名,对象
var MooTools = {
	'version' : '1.2dev', // 里程碑版本
	'build' : '1519' // trac系统每次change的版本号
};
/*
 * Native 是对内置或将之作为内置的对象的包装化
 */
var Native = function(options) {
	/*
	 * 这种写法随处可见,根据ECMA规范,||运算会自动将两侧表达式转化为布尔值,
	 * 仅当表达式为0/undefined/null/false时为假,而且||的特性是当前表达式为false时才会执行后表达式,
	 * 用在这里的目的是使没传参时设置options的默认值,以避免下面的代码出错
	 */
	options = options || {};
	// 继续上面的写法,设默认值为一空方法,用于add中执行implement的后续操作
	var afterImplement = options.afterImplement || function() {
	};
	// 方法静态化标记,为真时实例方法将被复制到类名下作为静态方法,此时静态方法的第一个参数会被作为实例方法内的this执行
	var generics = options.generics;
	// 用!==比较,当且仅当generics为false时为false,其它值按true处理,这是比较提高可靠性的一种处理方式
	generics = (generics !== false);
	// 用于对内置对象包装时的原对象
	var legacy = options.legacy;
	// Prototype风格的初始化方法
	var initialize = options.initialize;
	// 是否保护原对象的原型方法,以免被继承的同名方法覆盖
	var protect = options.protect;
	// 指定类名,以用于$type方法的取值
	var name = options.name;
	// 又是||的写法,在不提供初始化方法时直接使用内置的对象作为原型
	var object = initialize || legacy;
	// 设置构造器
	object.constructor = Native;
	// 用于$type方法的取值
	object.$family = {
		name : 'native'
	};
	// 继承legacy
	if (legacy && initialize)
		object.prototype = legacy.prototype;
	object.prototype.constructor = object;
	if (name) {
		// 全部用小写,可以避免大小写敏感,当然可以换成大写,只是大写不美观、不直观
		var family = name.toLowerCase();
		// 写在原型链上
		object.prototype.$family = {
			name : family
		};
		// 类型化,现在可以使用object.type(object1)判断object与object1是否同一家族/类型
		Native.typize(object, family);
	}
	// 总的为对象添加方法的处理
	var add = function(obj, name, method, force) {
		// 仅当不指定对象受保护,或指定强制覆盖或原对象原型中不存在该方法时添加
		if (!protect || force || !obj.prototype[name])
			obj.prototype[name] = method;
		// 方法静态化,此时的静态方法的第一个参数会被作为实例方法中的this执行
		if (generics)
			Native.genericize(obj, name, protect);
		// 后续处理
		afterImplement.call(obj, name, method);
		return obj;
	};
	// implement静态方法
	object.implement = function(a1, a2, a3) {
		if (typeof a1 == 'string')
			return add(this, a1, a2, a3);
		for (var p in a1)
			add(this, p, a1[p], a2);
		// 返回当前对象可以使方法支持链式写法,如object.implement(...).implement(...),jQueryer的最爱
		return this;
	};
	// 实现方法别名的静态方法
	object.alias = function(a1, a2, a3) {
		if (typeof a1 == 'string') {
			a1 = this.prototype[a1];
			if (a1)
				add(this, a2, a1, a3);
		} else {
			// 使alias支持object.alias({a : 'a1', b : 'b1'});这样的多个方法进行别名处理
			for (var a in a1)
				this.alias(a, a1[a], a2);
		}
		// 使支持链式写法
		return this;
	};
	return object;
};
// 用于同时对多个对象进行扩展实现,子对象须被Native化,或者实现了名为implement的静态方法
Native.implement = function(objects, properties) {
	for (var i = 0, l = objects.length; i < l; i++)
		objects[i].implement(properties);
};
// 方法静态化
Native.genericize = function(object, property, check) {
	if ((!check || !object[property]) && typeof object.prototype[property] == 'function')
		object[property] = function() {
			// 将arguments数组化,一种技巧.(注:arguments并非数组而只是一个类似数组的对象)
			var args = Array.prototype.slice.call(arguments);
			// 将第一个参数作为原来实例方法的this指向
			return object.prototype[property].apply(args.shift(), args);
		};
};
// 使类支持类型比较,闭包使用技巧
Native.typize = function(object, family) {
	if (!object.type)
		object.type = function(item) {
			return ($type(item) === family);
		};
};
// 用于同时对多个对象进行别名操作
Native.alias = function(objects, a1, a2, a3) {
	for (var i = 0, j = objects.length; i < j; i++)
		objects[i].alias(a1, a2, a3);
};
/*
 * 模块化写法 
 * 因为js中的变量作用域只存在于function和with中,此处使用模块化写法避免全局变量污染,就地执行匿名方法
 * 使Boolean/Native/Object支持类型比较操作
 */
(function(objects) {
	for (var name in objects)
		Native.typize(objects[name], name.toLowerCase());
})({
	'boolean' : Boolean,
	'native' : Native,
	'object' : Object
});
/*
 * 模块化写法 
 * 对下列内置类型进行Native化包装,使之支持类型化,别名,继承等
 */
(function(objects) {
	// 其实new Native跟Native的结果应该是一样的,但是有时为了安全起见,用new能避免很多无法考虑的数据引用
	for (var name in objects)
		new Native({
			name : name,
			initialize : objects[name],
			protect : true
		});
})({
	'String' : String,
	'Function' : Function,
	'Number' : Number,
	'Array' : Array,
	'RegExp' : RegExp,
	'Date' : Date
});
/*
 * 模块化写法 
 * 让数组和字符串的实例方法静态化(因为数组和字符串的应用比较多) 现在可以使用Array.pop
 */
(function(object, methods) {
	for (var i = 0, l = methods.length; i < l; i++)
		Native.genericize(object, methods[i], true);
	// 虽然是匿名方法,但是仍然可以通过arguments.callee找到指向,这里return使(function(){})()()()()的写法成为可能
	return arguments.callee;
})(Array, ['pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift', 'concat', 'join',
		'slice', 'toString', 'valueOf', 'indexOf', 'lastIndexOf'])(String, ['charAt', 'charCodeAt',
		'concat', 'indexOf', 'lastIndexOf', 'match', 'replace', 'search', 'slice', 'split',
		'substr', 'substring', 'toLowerCase', 'toUpperCase', 'valueOf']);
分享到:
评论

相关推荐

    mootools源码分析.rar

    通过分析源码,我们可以看到如何使用`Class`和`Package`来组织代码并实现模块间的依赖管理。 2. **Class系统**:MooTools的`Class`系统是其核心之一,它允许创建可复用的面向对象结构。`Class`支持继承、混入...

    Mootools 源码分析文档与完整文档打包下载.zip

    这个压缩包包含了Mootools的源码分析文档和完整的官方文档,是深入理解Mootools工作原理和使用技巧的重要资源。 首先,我们来看"使用须知.txt"。这个文件通常会包含关于如何正确使用压缩包内资源的提示和注意事项。...

    mootools源码分析

    在对MooTools源码进行分析时,我们可以关注以下几个关键知识点: 1. **类与对象系统**:MooTools提供了基于原型的面向对象系统,通过`Class`和`extend`方法创建类,并可以通过`implement`方法添加或扩展类的方法。`...

    mootools源码,中文帮助文档

    MooTools是一个轻量级的JavaScript库,设计用于提高Web开发效率,提供了一套优雅的API,让开发者能够更高效地编写可维护的JavaScript代码。这个压缩包包含了MooTools的核心库文件`mootools.js`以及MooTools的中文...

    mootools-1.2 源码分析

    01-native.js 02-utils.js 03-hash.js 04-array.js 05-browser.js 06-window.js 07-document.js 08-function.js 09-number.js 10-string.js 11-event.js 12-class.js 13-class.extras.js mootools1.2中文文档(html...

    (一) mootools介绍

    Mootools 包含一个强大的动画引擎——Fx,可以实现平滑的CSS3动画,如淡入淡出、移动、缩放等。例如,`Fx.Tween` 用于改变元素的样式属性,`Fx.Morph` 可以平滑地过渡到任意CSS样式。 #### 2.5 AJAX 通信 Mootools...

    JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools

    JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools

    Mootools 1.2教程(21)——类(二)

    在MooTools 1.2中,类的创建和继承是一个强大的特性,使得代码复用和组织更加高效。本教程将深入讲解如何使用`Class`构造器创建类以及如何通过`Implements`关键字进行类的继承。 首先,我们定义一个基类`BaseClass`...

    一套基于Mootools技术 实现的动画效果导航菜单源码例子

    这个源码例子展示了如何利用Mootools技术实现一个具有动画效果的导航菜单,这在现代网页设计中是非常常见且重要的功能。 在网页设计中,导航菜单是用户与网站互动的关键部分,它帮助用户轻松地找到网站上的各个部分...

    mootools

    MooTools是一个JavaScript库,它的全称是"More Object-Oriented Tools",寓意...同时,结合标签中的"源码",你可以进一步研究MooTools的源代码,理解其内部机制,这对于深入学习JavaScript和提升编程技巧非常有帮助。

    mootools 1.1 源码(详细注释)

    mootools 1.1 源码,带有详细的注释。

    Mootools v1.11 文档 pdf html Mootools v1.2.1 js

    MooTools 是一个轻量级、模块化的JavaScript库,它为Web开发提供了强大的工具和功能。这个压缩包包含了MooTools的两个主要版本——v1.11和v1.2.1的相关文档,以及可能的HTML和JavaScript文件,帮助开发者理解和使用...

    mootools分析.rar

    MooTools是一个轻量级、模块化的JavaScript库,它为开发者提供了丰富的工具和功能,以构建高效、可维护的Web应用程序。MooTools的设计理念是让JavaScript编程更加优雅,通过提供一套面向对象的API,使得代码更加简洁...

    Mootools 1.2教程 类(一)

    在MooTools中,我们使用`new Class`来定义一个新的类。例如,创建一个名为`Class_one`的类,包含两个内部变量`variable_one`和`variable_two`,可以这样写: ```javascript var Class_one = new Class({ variable_...

    mootools详细教程chm

    MooTools 是一个轻量级且功能强大的JavaScript库,它提供了一种优雅的方式来处理DOM操作、事件、动画效果以及Ajax交互。这个“mootools详细教程chm”包含了丰富的资源,旨在帮助开发者深入理解和熟练运用MooTools。 ...

    Mootools1.2.3各版本下载

    提到的"svn组件"可能是指MooTools的源码是通过Subversion(SVN)版本控制系统管理的。开发者可以通过SVN工具获取MooTools的源代码,查看历史版本,甚至参与项目的贡献。 6. **Mootools与现代前端框架** 虽然现代...

    mootools tree and table

    在IT领域,JavaScript库MooTools是一个非常受欢迎的框架,用于增强网页的交互性和功能。MooTools提供了许多工具和组件,其中包括对于tree(树形结构)和table(表格)的处理,使得开发者能够轻松创建复杂的用户界面...

    mootools详细教程

    在本文档中,我们将重点介绍MooTools中的核心组件——Element模块,以及如何利用它来进行DOM操作。 1. **Element方法完全解析** - `Element`类是MooTools的核心之一,它允许开发者以更加面向对象的方式处理DOM元素...

    MooTools 帮助文档 中文

    MooTools是一个简洁,模块化,面向对象的JavaScript框架。它能够帮助你更快,更简单地编写可扩展和兼容性强的JavaScript代码。Mootools从Prototype.js中汲取了许多有益的设计理念,语法也和其极其类似。但它提供的...

Global site tag (gtag.js) - Google Analytics