JavaScript学习之： MooTools 1.4.5 源码阅读
No 废话. Start!
/*
---
MooTools: the javascript framework
web build:
- http://mootools.net/core/dce97d7a88c57a1b0474a9a90f0687e1
packager build:
- packager build Core/Core Core/Array Core/String Core/Number Core/Function Core/Object Core/Class Core/Class.Extras Core/JSON
...
*/
/*
---
name: Core
description: The heart of MooTools.
license: MIT-style license.
copyright: Copyright (c) 2006-2012 [Valerio Proietti](http://mad4milk.net/).
authors: The MooTools production team (http://mootools.net/developers/)
inspiration:
- Class implementation inspired by [Base.js](http://dean.edwards.name/weblog/2006/03/base/) Copyright (c) 2006 Dean Edwards, [GNU Lesser General Public License](http://opensource.org/licenses/lgpl-license.php)
- Some functionality inspired by [Prototype.js](http://prototypejs.org) Copyright (c) 2005-2007 Sam Stephenson, [MIT License](http://opensource.org/licenses/mit-license.php)
provides: [Core, MooTools, Type, typeOf, instanceOf, Native]
...
*/
// MT1.4.5 部分代码解读 -- by PunCha 2012/12/23
(function () {
// 这里所有的代码都被包在一个匿名函数的内部，所以this指针很肯定指向的是JS世界的全局对象！
// Track版本信息
this.MooTools = {
version: '1.4.5',
build: 'ab8ea8824dc3b24b6666867a2c4ed58ebb762cf0'
};
//
// MT库自己提供了typeOf， instanceOf函数。这两个函数是为了MT库设计的，来替代
// JS原生的typeof, instanceof 运算符（注意大小写）。
//
// 这个是MT自定义的typeOf全局函数，是在JS的小写的typeof运算符的基础上做了定制和扩展。
// 规则：
// 1）null --> "null"
// 2) 有$family属性的，直接返回$family属性值（MT特殊的对象）。MT把所有内置对象的原型都添加了这个属性，所以array，Number这些会在这里返回。
// 3）有nodeName属性的，根据nodeType返回: element, textnode, whitespace
// 4) 有length属性的，且length是数字类型，则返回arguments(如果有callee属性)或collection（如果有item属性）。不会返回'array'，或'string'
// 5）一般不会不满足。假如不满足，则返回js typeof运算符的结果："number"、"string"、"boolean"、"object"、"function" 和 "undefined"。
var typeOf = this.typeOf = function (item) {
if (item == null) return 'null';
if (item.$family != null) return item.$family();
if (item.nodeName) {
if (item.nodeType == 1) return 'element';
if (item.nodeType == 3) return (/\S/).test(item.nodeValue) ? 'textnode' : 'whitespace';
} else if (typeof item.length == 'number') {
if (item.callee) return 'arguments';
if ('item' in item) return 'collection';
}
return typeof item;
};
// 这个是MT自定义的instanceOf全局函数，是在JS的小写的instanceof运算符的基础上做了定制和扩展。
// 规则：
// 1) null --> false.
// 2) 根据对象的constructor属性（或者$constructor属性，这个是自定义Class时使用的），匹配对象类型。
// 3) 使用JS的instanceof运算符。
var instanceOf = this.instanceOf = function (item, object) {
if (item == null) return false;
var constructor = item.$constructor || item.constructor;
while (constructor) {
if (constructor === object) return true;
constructor = constructor.parent;
}
/*<ltIE8>*/
if (!item.hasOwnProperty) return false;
/*</ltIE8>*/
return item instanceof object;
};
// MT扩充了JS原生的Function对象/构造函数，这个是所有JS函数的始祖。
//
// this.Function是全局的Function对象（就是JS内置的Function对象）
var Function = this.Function;
// [Refer to 棍子上的萝卜]
// 这里先对IE不能遍历对象中类似toString方法的bug做一个修正
// 有些浏览器不会枚举Object中定义部分属性即使重新在对象中定义了这些属性，比如toString
// PunCha: NodeJs的世界没有这个问题，所以enumerables永远是null。
var enumerables = true;
for (var i in { toString: 1 }) enumerables = null;
if (enumerables) enumerables = ['hasOwnProperty', 'valueOf', 'isPrototypeOf', 'propertyIsEnumerable', 'toLocaleString', 'toString', 'constructor'];
// MT的灵魂函数。总的来说，是包装一下原函数，并返回强化过的新函数。
// 这个对原函数有限制，原函数必须有2个参数key/value。强化后的版本，可以传入key/value，也可以传入有多个key/value的一个对象。
// 这个函数很难理解，可以结合Function.prototype.extend一起来看。
// 这个是蛮精妙的函数，MT为在Function的原型上添加了这个方法，所以JS的所有函数都自动继承了这个方法，但是文档上面没有这个方法，说明作者是不想expose的。
// 所有的操作都是应用在this对象上的。
Function.prototype.overloadSetter = function (usePlural) {
// self指代的是原函数对象（是一个函数哦）
var self = this;
// 包装之后的函数
return function (a, b) {
// Tricky：假如不带参数的调用包装后的函数，返回非强化的版本（原函数），注意不会执行原函数的逻辑。
if (a == null) return this;
if (usePlural || typeof a != 'string')
{
// 强化！假如第一个参数不是string，那么就假设传入的是对象（并忽略参数b），枚举传入对象的每个属性，并对this对象执行原函数的逻辑（将属性,属性值作为参数传入）。
for (var k in a) self.call(this, k, a[k]);
if (enumerables) for (var i = enumerables.length; i--;) {
k = enumerables[i];
if (a.hasOwnProperty(k)) self.call(this, k, a[k]);
}
}
else
{
// 这个就是执行原函数：传入a,b两个参数。维持this指针不变。在后面的应用中可以看到这个是为了在this对象上附加属性。
self.call(this, a, b);
}
return this;
};
};
// [Refer to 棍子上的萝卜]
// 使得一个类似getStyle(name)的方法(本来返回value)接受一个数组参数如[name1,name2,name3],然后返回一个返回值的字面量对象如{name1:value1,name2:value,name3:value3}.
Function.prototype.overloadGetter = function (usePlural) {
var self = this;
return function (a) {
var args, result;
if (typeof a != 'string') args = a;
else if (arguments.length > 1) args = arguments;
else if (usePlural) args = [a];
if (args) {
result = {};
for (var i = 0; i < args.length; i++) result[args[i]] = self.call(this, args[i]);
} else {
result = self.call(this, a);
}
return result;
};
};
// 这个是作者想暴露的API，逻辑简单，在this对象上附加key,value。最后wrap了一下，让这个逻辑可以应用于多次。
// 但是要注意，wrap后的参数可以是key（字符串类型）和value，也可以是包含多个属性/值对的一个对象。
Function.prototype.extend = function (key, value) {
this[key] = value;
}.overloadSetter();
// 这个是作者想暴露的API，逻辑简单，在this的*原型*对象上附加key,value。最后wrap了一下，让这个逻辑可以应用于多次。
// 注意点同上。
Function.prototype.implement = function (key, value) {
this.prototype[key] = value;
}.overloadSetter();
// slice函数快捷方式
var slice = Array.prototype.slice;
// 一切皆函数！
Function.from = function (item) {
return (typeOf(item) == 'function') ? item : function () {
return item;
};
};
// 一切皆数组！将类数组转化成数组；将对象转换成一个成员的数组。
Array.from = function (item) {
if (item == null) return [];
return (Type.isEnumerable(item) && typeof item != 'string') ? (typeOf(item) == 'array') ? item : slice.call(item) : [item];
};
// 转化成数字或者null
Number.from = function (item) {
var number = parseFloat(item);
return isFinite(number) ? number : null;
};
// 这个实现倒是简单（自动调用toString()）
String.from = function (item) {
return item + '';
};
// 为函数添加$hidden, $protected “访问修饰符”。~OO之封装~
// 但是严格的说，OO思想里面所有的变量、函数都有访问修饰符，但是作者仅仅为
// 函数做了处理。
//
// 这2个函数设计的可以级联（返回this）。
Function.implement({
// 隐藏起来的意思是，别人“拿不走”我的这个函数。把我传给别的对象implement, extend的话，
// 别人是得不到这个函数的。
hide: function () {
this.$hidden = true;
return this;
},
// 把方法保护起来，这个是保护自己的方法不受别人篡改。一旦受保护，那么
// 他就不会被同名函数覆盖；同时类的实例也不能访问该方法。
protect: function () {
this.$protected = true;
return this;
}
});
// Type是MT的灵魂类型之一
// 注意，虽然这个是构造函数，但是构造出来的Type的实例是完全没有实际用处的，这个从他的返回值也可以验证。
// 这个函数本身只用来注册类型的。object参数取名有点问题，其实他要求传入是类型的构造函数，是函数！
// 作用是添加$family属性、添加Type.isXXXX()快捷方法，并附加上Type类的静态方法。（同时也重载掉了
// Function.implement、extend函数，替换成Type.implement() 和 Type.extend()。)
var Type = this.Type = function (name, object) {
if (name) {
var lower = name.toLowerCase();
var typeCheck = function (item) {
return (typeOf(item) == lower);
};
// 在Type类附加了一个类静态方法，用来检查类型。
// 所以你最好也遵从这些规范，自己写的类型也注册下，不过假如你使用MT的Class类打造你
// 自己的类型的话，就不用了，因为Class类会帮你注册。
Type['is' + name] = typeCheck;
// 附加$family属性，这样typeOf就能更好的工作了。看到没，还被hide起来了。
if (object != null) {
object.prototype.$family = (function () {
return lower;
}).hide();
}
}
// 假如没有传入object参数，会使这个注册函数“失色”不少。功能变得就仅仅是提供个isXXX的快捷检查方法。
if (object == null) return null;
// 注意，这个this指针是正在构建的Type实例。就是说，对传入的对象构造函数，会在本身附加Type原型的成员。
// 注意：
// 1）是原型的成员，而不是Type本身的，比如上面的Type[is+name]是不会有的。
// 2）是对传入的对象的构造函数本身，而不是其原型，所以构造出来的对象是不会有Type的成员的。
// 3）不同类型的object，其extend实现实不同的。一般是调用Fuction.extend。
object.extend(this);
// 注册了之后，会附加$constructor属性，这样instanceOf就能工作了。
object.$constructor = Type;
// 呵呵，做事做全套。
object.prototype.$constructor = object;
return object;
};
// 导出Object始祖对象的toString()实现。
var toString = Object.prototype.toString;
// 对象有length属性，且不是函数。
Type.isEnumerable = function (item) {
return (item != null && typeof item.length == 'number' && toString.call(item) != '[object Function]');
};
// 这是一个Map，key是不同的类别。唯一有可能往这个数组里面添加项目的是Type.mirror()函数。
var hooks = {};
// 根据对象的类别取得该类别所有相关类型的数组。
var hooksOf = function (object) {
var type = typeOf(object.prototype);
return hooks[type] || (hooks[type] = []);
};
// 这个方法是附属于对象的，因为他里面用到了this.prototype，所以this指针是对象的构造函数！
// 这个函数被Type.implement使用，一大作用就是会重载掉在Type里面注册的类型的Function.implement函数！
var implement = function (name, method) {
// 跳过私有函数，私有函数不能赋予其他对象。
if (method && method.$hidden) return;
// 获取对象类别
var hooks = hooksOf(this);
// 对于该类别的每个相关类型
for (var i = 0; i < hooks.length; i++) {
var hook = hooks[i];
if (typeOf(hook) == 'type') {
// 如果是Type类型，则为Type类型的原型定义（implement）此方法或属性！
implement.call(hook, name, method);
}
else {
// 否则运行这个钩子函数（hook[i]是外部通过调用mirror时提供的，只要是函数就行）
// 感觉就是给了某些特殊的应用一次处理的时间。
hook.call(this, name, method);
}
}
// 在this的原型上（重）定义该方法（跳过受保护的方法），所以该类型的实例会继承这个方法。
var previous = this.prototype[name];
if (previous == null || !previous.$protected) this.prototype[name] = method;
// 如果本身没有这个方法，那么定义一个同名的可以调用它实例的方法（类级别的静态方法！）
// MT的原则是函数多多益善啊！
if (this[name] == null && typeOf(method) == 'function') extend.call(this, name, function (item) {
return method.apply(item, slice.call(arguments, 1));
});
};
// Type.extend
var extend = function (name, method) {
// 私有方法不能给别人。
if (method && method.$hidden) return;
// 没有当然给一个。已经有了，而且被保护了，那么不能改写。
var previous = this[name];
if (previous == null || !previous.$protected) this[name] = method;
};
// Type本身是一个函数，所以这里implement是调用Function.implement，相当于把这些方法附属到Type原型上
// 所以任何type实例，或继承自Type都有了这些方法。
Type.implement({
// Type实例将使用特有的implement（非Function.implement）
implement: implement.overloadSetter(),
// Type实例将使用特有的extend（非Function.extend）
extend: extend.overloadSetter(),
// 为这个函数取一个别名。注意，别名定义在implement和类本身上
alias: function (name, existing) {
implement.call(this, name, this.prototype[existing]);
}.overloadSetter(),
// 增加一个同类别的类型，注意这是唯一一个地方push一个对象到hooks数组。
// [Refer to 棍子上的萝卜]
// 将hook（一般为一个函数）暂时存放在hooks[type]的数组中,不作处理,直到这个Type类型的构造函数implement的时候
// 其中type是这个Type类型的构造函数指定的name属性，
// 如果传入hook为另外一个Type类型则在implement时另外一个Type类型也会被连带处理。
// mirror方法非常重要，相当于1.2中的afterImplement，比如Element类implement了一个方法 setStyle ，如果在连带的hook中处理了Elements
// 那它implement的同时也会影响到Elements了！！！所以$$(".className").setStyle(xx,xx)是正确的语法!!!太高端了mootools
// PunCha: 其实我还是完全不懂，但是我写了个example:
// function A() {}
// function B() {}
// new Type("banana", A).mirror(function (name) {console.log("A-" + name);});
// new Type("banana", B).mirror(function (name) {console.log("B-" + name);});
// A.implement("Wow", "value");
// 输出： A-Wow B-Wow
// 啥用处？？？！
mirror: function (hook) {
hooksOf(this).push(hook);
return this;
}
});
// 对Type本身进行注册，所以Type本身也有了Type原型的方法。
new Type('Type', Type);
// 简而言之,new Type(name,func)即仅仅只对输入的func做了一点加工，
// 比如使其对typeOf以及instanceOf有效。使其可以使用implement以及
// extend, mirror等等方法，还有Type.isname的快捷方法。
//------------------------------------------------------------
// 开始构建MT的Type大军，将内置类型一个一个变成Type
//
// 为传入的类型注册。对传入的类型的原型附加多个成员函数；
// 注意！Object类型，没有注册，只不过做了下保护。
var force = function (name, object, methods) {
// 只有在object是Object类型的时候，isType才会是false。也就是始祖对象。
var isType = (object != Object),
prototype = object.prototype;
// 注册。注意object还是传入的object，其实没变（Type内部返回object)
if (isType) object = new Type(name, object);
for (var i = 0, l = methods.length; i < l; i++) {
var key = methods[i],
generic = object[key],
proto = prototype[key];
// 如果该类型本身有这个方法，保护起来免得被改写！比如Array.push()
if (generic) generic.protect();
// 如果原型上有这个方法，粗鲁的将他改成受保护的。
// TODO：搞不懂，为什么不直接调用下proto.protect()?
if (isType && proto) object.implement(key, proto.protect());
}
// 对于非Object类型
if (isType) {
// 赠送一个方法？
var methodsEnumerable = prototype.propertyIsEnumerable(methods[0]);
// 反正就是挨个调用成员函数。你传入的fn必须支持2个参数，第一个是值，第二个是属性
object.forEachMethod = function (fn) {
if (!methodsEnumerable) for (var i = 0, l = methods.length; i < l; i++) {
fn.call(prototype, prototype[methods[i]], methods[i]);
}
for (var key in prototype) fn.call(prototype, prototype[key], key)
};
}
return force;
};
// 构建Type大军，注册了所有内置类型！且这些方法都被保护了起来。
force('String', String, [
'charAt', 'charCodeAt', 'concat', 'indexOf', 'lastIndexOf', 'match', 'quote', 'replace', 'search',
'slice', 'split', 'substr', 'substring', 'trim', 'toLowerCase', 'toUpperCase'
])('Array', Array, [
'pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift', 'concat', 'join', 'slice',
'indexOf', 'lastIndexOf', 'filter', 'forEach', 'every', 'map', 'some', 'reduce', 'reduceRight'
])('Number', Number, [
'toExponential', 'toFixed', 'toLocaleString', 'toPrecision'
])('Function', Function, [
'apply', 'call', 'bind'
])('RegExp', RegExp, [
'exec', 'test'
])('Object', Object, [
'create', 'defineProperty', 'defineProperties', 'keys',
'getPrototypeOf', 'getOwnPropertyDescriptor', 'getOwnPropertyNames',
'preventExtensions', 'isExtensible', 'seal', 'isSealed', 'freeze', 'isFrozen'
])('Date', Date, ['now']);
// 对Object进行特殊的扩展，Object没有$family、以及implement, extend属性。在这里，为其附加extend方法，也就说
// 所有的{}都可以用这个函数附加方法了。而且这个是强化版的。
Object.extend = extend.overloadSetter();
// 替换了Date的默认now实现。
Date.extend('now', function () {
return +(new Date);
});
// 为boolean做了注册，为什么要单独注册？可能是因为他没有成员函数
new Type('Boolean', Boolean);
// 修正NaN会返回number类型的问题
Number.prototype.$family = function () {
return isFinite(this) ? 'number' : 'null';
}.hide();
// 这个比Math.Random好用多了。
Number.extend('random', function (min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
});
var hasOwnProperty = Object.prototype.hasOwnProperty;
// forEach方法，仅对真正的property才调用。
Object.extend('forEach', function (object, fn, bind) {
for (var key in object) {
if (hasOwnProperty.call(object, key)) fn.call(bind, object[key], key, object);
}
});
Object.each = Object.forEach;
Array.implement({
forEach: function (fn, bind) {
for (var i = 0, l = this.length; i < l; i++) {
if (i in this) fn.call(bind, this[i], i, this);
}
},
each: function (fn, bind) {
Array.forEach(this, fn, bind);
return this;
}
});
// Array & Object cloning, Object merging and appending
// 深度克隆啊，只对array和object处理就够了吗？
var cloneOf = function (item) {
switch (typeOf(item)) {
case 'array': return item.clone();
case 'object': return Object.clone(item);
default: return item;
}
};
Array.implement('clone', function () {
var i = this.length, clone = new Array(i);
while (i--) clone[i] = cloneOf(this[i]);
return clone;
});
var mergeOne = function (source, key, current) {
switch (typeOf(current)) {
case 'object':
if (typeOf(source[key]) == 'object') Object.merge(source[key], current);
else source[key] = Object.clone(current);
break;
case 'array': source[key] = current.clone(); break;
default: source[key] = current;
}
return source;
};
// Object又多了3个类的静态方法。
Object.extend({
merge: function (source, k, v) {
if (typeOf(k) == 'string') return mergeOne(source, k, v);
for (var i = 1, l = arguments.length; i < l; i++) {
var object = arguments[i];
for (var key in object) mergeOne(source, key, object[key]);
}
return source;
},
clone: function (object) {
var clone = {};
for (var key in object) clone[key] = cloneOf(object[key]);
return clone;
},
append: function (original) {
for (var i = 1, l = arguments.length; i < l; i++) {
var extended = arguments[i] || {};
for (var key in extended) original[key] = extended[key];
}
return original;
}
});
// Object-less types
// 这里其实不是严格意义上的注册，因为第二个参数没传进去。所以，这里仅仅是为Type添加isXXX的快捷方法。
['Object', 'WhiteSpace', 'TextNode', 'Collection', 'Arguments'].each(function (name) {
new Type(name);
});
// Unique ID
var UID = Date.now();
String.extend('uniqueID', function () {
return (UID++).toString(36);
});
})();
/*
---
name: Array
description: Contains Array Prototypes like each, contains, and erase.
license: MIT-style license.
requires: Type
provides: Array
...
*/
// 这里的implement方法是Type.implement。这些函数没什么多说的，都很简单。
Array.implement({
/*<!ES5>*/
every: function (fn, bind) {
for (var i = 0, l = this.length >>> 0; i < l; i++) {
if ((i in this) && !fn.call(bind, this[i], i, this)) return false;
}
return true;
},
filter: function (fn, bind) {
var results = [];
for (var value, i = 0, l = this.length >>> 0; i < l; i++) if (i in this) {
value = this[i];
if (fn.call(bind, value, i, this)) results.push(value);
}
return results;
},
indexOf: function (item, from) {
var length = this.length >>> 0;
for (var i = (from < 0) ? Math.max(0, length + from) : from || 0; i < length; i++) {
if (this[i] === item) return i;
}
return -1;
},
map: function (fn, bind) {
var length = this.length >>> 0, results = Array(length);
for (var i = 0; i < length; i++) {
if (i in this) results[i] = fn.call(bind, this[i], i, this);
}
return results;
},
some: function (fn, bind) {
for (var i = 0, l = this.length >>> 0; i < l; i++) {
if ((i in this) && fn.call(bind, this[i], i, this)) return true;
}
return false;
},
/*</!ES5>*/
clean: function () {
return this.filter(function (item) {
return item != null;
});
},
invoke: function (methodName) {
var args = Array.slice(arguments, 1);
return this.map(function (item) {
return item[methodName].apply(item, args);
});
},
associate: function (keys) {
var obj = {}, length = Math.min(this.length, keys.length);
for (var i = 0; i < length; i++) obj[keys[i]] = this[i];
return obj;
},
link: function (object) {
var result = {};
for (var i = 0, l = this.length; i < l; i++) {
for (var key in object) {
if (object[key](this[i])) {
result[key] = this[i];
delete object[key];
break;
}
}
}
return result;
},
contains: function (item, from) {
return this.indexOf(item, from) != -1;
},
append: function (array) {
this.push.apply(this, array);
return this;
},
getLast: function () {
return (this.length) ? this[this.length - 1] : null;
},
getRandom: function () {
return (this.length) ? this[Number.random(0, this.length - 1)] : null;
},
include: function (item) {
if (!this.contains(item)) this.push(item);
return this;
},
combine: function (array) {
for (var i = 0, l = array.length; i < l; i++) this.include(array[i]);
return this;
},
erase: function (item) {
for (var i = this.length; i--;) {
if (this[i] === item) this.splice(i, 1);
}
return this;
},
empty: function () {
this.length = 0;
return this;
},
flatten: function () {
var array = [];
for (var i = 0, l = this.length; i < l; i++) {
var type = typeOf(this[i]);
if (type == 'null') continue;
array = array.concat((type == 'array' || type == 'collection' || type == 'arguments' || instanceOf(this[i], Array)) ? Array.flatten(this[i]) : this[i]);
}
return array;
},
pick: function () {
for (var i = 0, l = this.length; i < l; i++) {
if (this[i] != null) return this[i];
}
return null;
},
// 这个array参数是boolean类型的。。这设计的超奇怪，呵呵。
hexToRgb: function (array) {
if (this.length != 3) return null;
var rgb = this.map(function (value) {
if (value.length == 1) value += value;
return value.toInt(16);
});
return (array) ? rgb : 'rgb(' + rgb + ')';
},
rgbToHex: function (array) {
if (this.length < 3) return null;
if (this.length == 4 && this[3] == 0 && !array) return 'transparent';
var hex = [];
for (var i = 0; i < 3; i++) {
var bit = (this[i] - 0).toString(16);
hex.push((bit.length == 1) ? '0' + bit : bit);
}
return (array) ? hex : '#' + hex.join('');
}
});
/*
---
name: String
description: Contains String Prototypes like camelCase, capitalize, test, and toInt.
license: MIT-style license.
requires: Type
provides: String
...
*/
String.implement({
test: function (regex, params) {
return ((typeOf(regex) == 'regexp') ? regex : new RegExp('' + regex, params)).test(this);
},
contains: function (string, separator) {
return (separator) ? (separator + this + separator).indexOf(separator + string + separator) > -1 : String(this).indexOf(string) > -1;
},
trim: function () {
return String(this).replace(/^\s+|\s+$/g, '');
},
clean: function () {
return String(this).replace(/\s+/g, ' ').trim();
},
camelCase: function () {
return String(this).replace(/-\D/g, function (match) {
return match.charAt(1).toUpperCase();
});
},
hyphenate: function () {
return String(this).replace(/[A-Z]/g, function (match) {
return ('-' + match.charAt(0).toLowerCase());
});
},
capitalize: function () {
return String(this).replace(/\b[a-z]/g, function (match) {
return match.toUpperCase();
});
},
escapeRegExp: function () {
return String(this).replace(/([-.*+?^${}()|[\]\/\\])/g, '\\$1');
},
toInt: function (base) {
return parseInt(this, base || 10);
},
toFloat: function () {
return parseFloat(this);
},
hexToRgb: function (array) {
var hex = String(this).match(/^#?(\w{1,2})(\w{1,2})(\w{1,2})$/);
return (hex) ? hex.slice(1).hexToRgb(array) : null;
},
rgbToHex: function (array) {
var rgb = String(this).match(/\d{1,3}/g);
return (rgb) ? rgb.rgbToHex(array) : null;
},
substitute: function (object, regexp) {
return String(this).replace(regexp || (/\\?\{([^{}]+)\}/g), function (match, name) {
if (match.charAt(0) == '\\') return match.slice(1);
return (object[name] != null) ? object[name] : '';
});
}
});
/*
---
name: Number
description: Contains Number Prototypes like limit, round, times, and ceil.
license: MIT-style license.
requires: Type
provides: Number
...
*/
Number.implement({
limit: function (min, max) {
return Math.min(max, Math.max(min, this));
},
round: function (precision) {
precision = Math.pow(10, precision || 0).toFixed(precision < 0 ? -precision : 0);
return Math.round(this * precision) / precision;
},
times: function (fn, bind) {
for (var i = 0; i < this; i++) fn.call(bind, i, this);
},
toFloat: function () {
return parseFloat(this);
},
toInt: function (base) {
return parseInt(this, base || 10);
}
});
// 这个比较有意思！取了个别名。Number.each == Number.times
Number.alias('each', 'times');
(function (math) {
var methods = {};
math.each(function (name) {
if (!Number[name]) methods[name] = function () {
return Math[name].apply(null, [this].concat(Array.from(arguments)));
};
});
Number.implement(methods);
})(['abs', 'acos', 'asin', 'atan', 'atan2', 'ceil', 'cos', 'exp', 'floor', 'log', 'max', 'min', 'pow', 'sin', 'sqrt', 'tan']);
/*
---
name: Function
description: Contains Function Prototypes like create, bind, pass, and delay.
license: MIT-style license.
requires: Type
provides: Function
...
*/
Function.extend({
// 安全的执行多个无参函数，这个是类静态方法。
attempt: function () {
for (var i = 0, l = arguments.length; i < l; i++) {
try {
return arguments[i]();
} catch (e) { }
}
return null;
}
});
Function.implement({
// 这个是实例方法。
attempt: function (args, bind) {
try {
return this.apply(bind, Array.from(args));
} catch (e) { }
return null;
},
// 假如没有bind函数，那么我们写一个！
/*<!ES5-bind>*/
bind: function (that) {
var self = this,
args = arguments.length > 1 ? Array.slice(arguments, 1) : null,
F = function () { };
var bound = function () {
var context = that, length = arguments.length;
if (this instanceof bound) {
F.prototype = self.prototype;
context = new F;
}
var result = (!args && !length)
? self.call(context) // 无参
: self.apply(context, args && length ? args.concat(Array.slice(arguments)) : args || arguments);
return context == that ? result : context;
};
return bound;
},
/*</!ES5-bind>*/
pass: function (args, bind) {
var self = this;
if (args != null) args = Array.from(args);
return function () {
return self.apply(bind, args || arguments);
};
},
delay: function (delay, bind, args) {
return setTimeout(this.pass((args == null ? [] : args), bind), delay);
},
periodical: function (periodical, bind, args) {
return setInterval(this.pass((args == null ? [] : args), bind), periodical);
}
});
/*
---
name: Object
description: Object generic methods
license: MIT-style license.
requires: Type
provides: [Object, Hash]
...
*/
(function () {
var hasOwnProperty = Object.prototype.hasOwnProperty;
Object.extend({
subset: function (object, keys) {
var results = {};
for (var i = 0, l = keys.length; i < l; i++) {
var k = keys[i];
if (k in object) results[k] = object[k];
}
return results;
},
map: function (object, fn, bind) {
var results = {};
for (var key in object) {
if (hasOwnProperty.call(object, key)) results[key] = fn.call(bind, object[key], key, object);
}
return results;
},
filter: function (object, fn, bind) {
var results = {};
for (var key in object) {
var value = object[key];
if (hasOwnProperty.call(object, key) && fn.call(bind, value, key, object)) results[key] = value;
}
return results;
},
every: function (object, fn, bind) {
for (var key in object) {
if (hasOwnProperty.call(object, key) && !fn.call(bind, object[key], key)) return false;
}
return true;
},
some: function (object, fn, bind) {
for (var key in object) {
if (hasOwnProperty.call(object, key) && fn.call(bind, object[key], key)) return true;
}
return false;
},
keys: function (object) {
var keys = [];
for (var key in object) {
if (hasOwnProperty.call(object, key)) keys.push(key);
}
return keys;
},
values: function (object) {
var values = [];
for (var key in object) {
if (hasOwnProperty.call(object, key)) values.push(object[key]);
}
return values;
},
getLength: function (object) {
return Object.keys(object).length;
},
keyOf: function (object, value) {
for (var key in object) {
if (hasOwnProperty.call(object, key) && object[key] === value) return key;
}
return null;
},
contains: function (object, value) {
return Object.keyOf(object, value) != null;
},
toQueryString: function (object, base) {
var queryString = [];
Object.each(object, function (value, key) {
if (base) key = base + '[' + key + ']';
var result;
switch (typeOf(value)) {
case 'object': result = Object.toQueryString(value, key); break;
case 'array':
var qs = {};
value.each(function (val, i) {
qs[i] = val;
});
result = Object.toQueryString(qs, key);
break;
default: result = key + '=' + encodeURIComponent(value);
}
if (value != null) queryString.push(result);
});
return queryString.join('&');
}
});
})();
/*
---
name: Class
description: Contains the Class Function for easily creating, extending, and implementing reusable Classes.
license: MIT-style license.
requires: [Array, String, Function, Number]
provides: Class
...
*/
(function () {
// 这里其实分2步写会比较清楚：
// function Class (params) { .... }
// new Type('Class', Class);
// Type注册函数会返回定义的function(params)。
var Class = this.Class = new Type('Class', function (params) {
// 如果参数是一个函数，那么就当成是initialize（初始化）函数
if (instanceOf(params, Function)) params = { initialize: params };
// 这个函数很关键，调用new Class()就会返回这个函数。当然这个函数的constructor是Function。
// 所以不要去管返回的类型的constructor了。new Class(xxx).constructor == 这个函数。
// 注意，外部函数的this是正在构建的Class的实例，而其内部的this是指向将来被构造的该类型的实例，
// 这个和Class对象无关。
// 细节：新建这个函数作为新建的类的原型， 然后调用extend函数把Class所有的成员复制给newClass，
// 然后params对象implement到newClass类中，这里调用的implement是Class的implement方法。
var newClass = function () {
// 剥离这个this对象的外部一切关联。因为是原型继承，所以怕引用的类型会被所有实例共享。
reset(this);
// 在构造子类的过程中，MT会自动创建一个父类的实例，作为子类的原型，那么在构造父类的过程中
// 是不应该调用其initialize函数的。应该由子类的initialize函数显式调用。
if (newClass.$prototyping) return this;
this.$caller = null;
// 调用构造函数，这个initialize函数是通过implement(params)生成的。
var value = (this.initialize) ? this.initialize.apply(this, arguments) : this;
this.$caller = this.caller = null;
return value;
}.extend(this).implement(params); // 这里的this是Class对象了！
// 其实构造出来的实例的constructor都不太对，所以真实的一些信息都在这里保存。
// 我们在使用过程中，应该使用$constructor，就像instanceOf那样。
newClass.$constructor = Class;
newClass.prototype.$constructor = newClass;
// 这里的Parent是下面定义的Parent函数。这个是原型上的parent。
newClass.prototype.parent = parent;
// 注意哦，这里返回的是函数，而不是对象！所以 var Foo = new Class(XXX)；Foo不是对象是构造函数。
return newClass;
});
// 这个是让子类调用父类被override的函数用的， 在子类的成员函数里面调用下this.parent()
// 就可以了，连函数名都不用指定，因为这些必要的调用信息在wrap函数时提供。
var parent = function () {
// parent方法只能在子类里面调用，也就是说这个方法肯定是在wrap的wrapper函数内部被
// 触发的，那么$caller肯定也就会被正确的设置了。$caller就是wrapper。
if (!this.$caller) throw new Error('The method "parent" cannot be called.');
var name = this.$caller.$name, // 函数名
parent = this.$caller.$owner.parent, // 其实就是该对象的父类，可以用this.$constrcutor替代。
previous = (parent) ? parent.prototype[name] : null; // 父对象的函数
if (!previous) throw new Error('The method "' + name + '" has no parent.');// 父对象一定要有子类的这个函数，不然怎么调用！
return previous.apply(this, arguments); // 用this指针进行调用。
};
// [Refer to 棍子上的萝卜]
// 对象的剥离(也就是clone),这里要详细说明一下reset函数的工作原理：
// 首先创建了一个新的空函数F，然后将F的prototype属性设置为作为参数object传入的原型对象，prototype属性就是用来指向原型对象的，通过原型链机制，
// 它提供了到所有继承而来的成员的链接，最后通过new运算符作用于F创建出一个新对象返回。这个新的对象就是一个以给定对象为原型对象的空对象，
// 以下面的例子来解说，先执行reset(b)语句，然后读取b.ref.x的值，这时你得到的是其原型对象的同名属性值，其实是一个返指最初的a.x的链接，
// 而在这之后你写入b.ref.x一个新值，也就是直接为b.ref对象定义了一个新的属性x，这时你再读取b.ref.x就不是指向a.x了
// 如果想详细了解原型式继承可翻阅JavaScript设计模式一书，非常棒的一本书，真的很棒!!!哈哈......
// var a = { x: 1 };
// var b = { y: 2, ref: a };
// log.info('b.ref == a : ' + (b.ref == a)); //输出true
// log.info(b.y); // 输出2
// log.info(b.ref.x); // 输出1
// reset(b); //解除引用
// log.info('b.ref == a : ' + (b.ref == a)); //输出false
// log.info(b.y); // 输出2
// log.info(b.ref.x); // 输出1
// b.ref.x = 10;
// log.info(b.ref.x); // 输出10
// log.info(a.x); // 输出1
var reset = function (object) {
for (var key in object) {
var value = object[key];
switch (typeOf(value)) {
case 'object':
var F = function () { };
F.prototype = value;
object[key] = reset(new F);
break;
case 'array': object[key] = value.clone(); break;
}
}
return object;
};
// 把成员函数包一下，并添加$owner, $origin, $name3个属性。最终真正执行的是被包过的wrapper。
// 注意，这个函数配合parent函数是实现回溯调用的关键。回溯的意思是，假如类库有多级（C继承B，
// B继承A，而且ABC上都实现了foo()函数，每一级的foo()都会调用其父类的foo。那么:
// var c = new C(); c.foo()； 会一级一级正确的调用上去！
var wrap = function (self, key, method) {
if (method.$origin) method = method.$origin;
// 真正执行的是这个函数，注意这里用了extend，保存了必要的信息。这些信息很重要！举个例子，
// D是B的子类，B和D都有foo(), bar()，且B的foo()会调用bar()，那么D.foo()执行的时候，首先会调用B.foo()，
// 而这时候B.foo()内部调用的bar()不是B的，而是D的！这个就是多态！
var wrapper = function () {
// 这里的设计真的很奇怪！假如这个成员函数是受保护的，那么只有在子类的同名函数里
// 通过parent()来调用外，其他情况下都不能调用！包括这个类的实例或者其他成员函数！
// 这个实在不知道为什么这么设计。。。。
if (method.$protected && this.$caller == null) throw new Error('The method "' + key + '" cannot be called.');
// 保留caller信息
var caller = this.caller;
// 保留$caller信息（最后一级的调用，this.$caller是空，但是回溯到上一级，
// 那么$caller就指向前一次的wrapper函数。
var current = this.$caller;
// caller设置到$caller
this.caller = current;
// $caller指向wrapper本身，所以parent才能正确调用。因为parent每次都会从$caller取信息
// 同时要注意，每次的回溯，$caller值会不一样。
this.$caller = wrapper;
// 触发成员函数的调用（注意，parent()会在这里面被调用，而一旦parent被调用，又会触发wrapper被
// 再次调用，但是这个时候$caller已经不同了。
var result = method.apply(this, arguments);
// 还原，把$caller设置为null是重要的。
this.$caller = current; this.caller = caller;
return result;
}.extend({ $owner: self, $origin: method, $name: key }); // this指针，函数本身，函数名。
return wrapper;
};
// 核心函数：实现Extends/Implements，成员函数的包装，普通属性的附加。
var implement = function (key, value, retain) {
// 对于特定的key，即：Extends, Implements，把逻辑交给Clas.Mutators类处理。
// 该类负责把对value进行一些处理。这个很灵活，但是你的成员函数就不能取这2个
// 名字了。
if (Class.Mutators.hasOwnProperty(key)) {
value = Class.Mutators[key].call(this, value);
// 假如处理后的value变成了null，那么就停止后续的处理了。Extends和
// Implements的返回值都是null。
if (value == null) return this;
}
// 所有的成员函数，都会被包在wrap函数内部，wrap负责保存一些场景信息，以便
// 子类调用父类用。要注意，hidden函数会被跳过。(Extends和Implements都回
// 返回null）
if (typeOf(value) == 'function') {
// 拿不走hidden的
if (value.$hidden) return this;
// 在Impements内部调用本函数时retain参数设为ture，表明只是合并方法到原型中，
// 不用包一下。而在其他时候，用wrap函数包
this.prototype[key] = (retain) ? value : wrap(this, key, value);
} else {
// 普通的属性是会被覆盖的。
Object.merge(this.prototype, key, value);
}
return this;
};
// 构建一个实例。注意klass是一个构造函数！
var getInstance = function (klass) {
// 标记一下，防止klass的initialize函数被调用。
klass.$prototyping = true;
var proto = new klass;
delete klass.$prototyping;
return proto;
};
// 设置Class.implement方法
Class.implement('implement', implement.overloadSetter());
// [Refer to 棍子上的萝卜]
// Mutator是一个可以改变你的类的结构的一个很特殊的函数，它们是产生特别功能和优雅化继承和掺元的的有力工具。
// 建立一个Mutatorr有二个部分：mutator的关键字 和mutator的实际函数，关键字既是mutator的名字，
// 也是在构建类时候的keyword。Mootools把mutators 储存在Class.Mutators对象中。
// 当你传一个对象给Class构造函数的时候，Mootools检查这个对象的的每一个键在Class.Mutators对象的是不是有
// mutator函数的对应的名字在里面。如果找到了，它就调用这个函数并且把键的值传给它做处理。
// Class.Mutators对象包含了两个内建的Mutator: Extends 和 Implements，分别实现原型式继承和多亲继承。
// MooTools在Class.Extras模块中提供了三个掺元类Chain、Events、Options，至于作用就不用多说了吧，呵呵。
Class.Mutators = {
// 这里会重写原型，所以Extends属性一定要放在最前面传入！
Extends: function (parent) {
// 添加了parent属性。注意和原型上的parent这个parent是新的类型上的，而不是原型上的。
// 原型上还有另外一个parent函数。。。这2个Parent好乱。
this.parent = parent;
// 改写了原型链，而且注意，是新建了一个实例，所以不存在信息会共享的情况。但是MT在
// 这里没有修正constrcutor信息。还有，那些基类的成员函数，自动的被继承过来了，这个
// 对于实现回溯调用也起到了一定的作用。
this.prototype = getInstance(parent);
},
// items必须是一个或多个构造函数，而不能是简单的对象。
Implements: function (items) {
Array.from(items).each(function (item) {
var instance = new item;
for (var key in instance) implement.call(this, key, instance[key], true);
}, this);
}
};
})();
/*
---
name: Class.Extras
description: Contains Utility Classes that can be implemented into your own Classes to ease the execution of many common tasks.
license: MIT-style license.
requires: Class
provides: [Class.Extras, Chain, Events, Options]
...
*/
(function () {
// 这个就是一个很普通的队列的实现
this.Chain = new Class({
$chain: [],
// 入队
chain: function () {
this.$chain.append(Array.flatten(arguments));
return this;
},
// 出队并执行，使用这个语句让他出队执行完毕：
// while (false !== XXX.callChain()) {}
callChain: function () {
return (this.$chain.length) ? this.$chain.shift().apply(this, arguments) : false;
},
// 清楚队列
clearChain: function () {
this.$chain.empty();
return this;
}
});
// 把onXyyy变成xyyy（把前缀on去掉，把去调之后的第一个字符变成小写）
// 其实隐含的限制就是：事件类型必须是on开头的。
var removeOn = function (string) {
return string.replace(/^on([A-Z])/, function (full, first) {
return first.toLowerCase();
});
};
this.Events = new Class({
$events: {},
// 往事件队列里面塞一个事件处理程序。根据文档，internal是为了避免被remove。。。
addEvent: function (type, fn, internal) {
type = removeOn(type);
// 建立一个改事件类型的数组，把事件处理程序塞进去（不会重复）。
this.$events[type] = (this.$events[type] || []).include(fn);
// 标记为internal，这个标记在原函数对象上。。。is it OK？
if (internal) fn.internal = true;
return this;
},
// 往事件队列里面塞多个事件处理程序，传入的时对象字面量
addEvents: function (events) {
for (var type in events) this.addEvent(type, events[type]);
return this;
},
// 触发事件，传入“事件类型、参数、延迟”。还支持延迟，HOHO
fireEvent: function (type, args, delay) {
type = removeOn(type);
var events = this.$events[type];
// 该事件类型没注册，直接走人
if (!events) return this;
args = Array.from(args);
// 使用this指针绑定调用事件处理程序
events.each(function (fn) {
if (delay) fn.delay(delay, this, args);
else fn.apply(this, args);
}, this);
return this;
},
// 移除掉某一事件处理程序（不能移除被标记为internal的）
removeEvent: function (type, fn) {
type = removeOn(type);
var events = this.$events[type];
if (events && !fn.internal) {
var index = events.indexOf(fn);
if (index != -1) delete events[index];
}
return this;
},
// 移除掉某一事件处理程序（不能移除被标记为internal的）。哎，这个函数提供的功能有点不一致啊！！真头痛！
removeEvents: function (events) {
var type;
if (typeOf(events) == 'object') {
// 这种情况下，移除多个事件处理程序。
for (type in events) this.removeEvent(type, events[type]);
return this;
}
// 移除该事件类型的所有事件处理程序（internal的不会被移除，因为其内部调用removeEvent）
if (events) events = removeOn(events);
for (type in this.$events) {
if (events && events != type) continue;
var fns = this.$events[type];
for (var i = fns.length; i--;) if (i in fns) {
this.removeEvent(type, fns[i]);
}
}
return this;
}
});
this.Options = new Class({
// 一种功能是：统一添加事件处理程序。传入类似于{onClick: fuction(){}, onDblClick: function(){}}这种的。
// 另外种功能就是把key/value插入到options成员中（但是会做深拷贝），比如： {"size": 3, "color" : red },
// 具体可以看文档，要避免深拷贝的话，可以把值用函数封装：{ "size": function(){ return mSize; }
setOptions: function () {
// 把属性/值合并到options数组（我觉得可能这个Extras是为了客户端代码服务的吧！因为太specific了。
var options = this.options = Object.merge.apply(null, [{}, this.options].append(arguments));
// 和Events Extras协同工作。
if (this.addEvent) for (var option in options) {
// 假如key/value匹配： onXXX : function(){}的话，就注册一个事件。
if (typeOf(options[option]) != 'function' || !(/^on[A-Z]/).test(option)) continue;
this.addEvent(option, options[option]);
delete options[option];
}
return this;
}
});
})();
/*
---
name: JSON
description: JSON encoder and decoder.
license: MIT-style license.
SeeAlso: <http://www.json.org/>
requires: [Array, String, Number, Function]
provides: JSON
...
*/
if (typeof JSON == 'undefined') this.JSON = {};
(function () {
var special = { '\b': '\\b', '\t': '\\t', '\n': '\\n', '\f': '\\f', '\r': '\\r', '"': '\\"', '\\': '\\\\' };
var escape = function (chr) {
return special[chr] || '\\u' + ('0000' + chr.charCodeAt(0).toString(16)).slice(-4);
};
JSON.validate = function (string) {
string = string.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@').
replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']').
replace(/(?:^|:|,)(?:\s*\[)+/g, '');
return (/^[\],:{}\s]*$/).test(string);
};
JSON.encode = JSON.stringify ? function (obj) {
return JSON.stringify(obj);
} : function (obj) {
if (obj && obj.toJSON) obj = obj.toJSON();
switch (typeOf(obj)) {
case 'string':
return '"' + obj.replace(/[\x00-\x1f\\"]/g, escape) + '"';
case 'array':
return '[' + obj.map(JSON.encode).clean() + ']';
case 'object': case 'hash':
var string = [];
Object.each(obj, function (value, key) {
var json = JSON.encode(value);
if (json) string.push(JSON.encode(key) + ':' + json);
});
return '{' + string + '}';
case 'number': case 'boolean': return '' + obj;
case 'null': return 'null';
}
return null;
};
JSON.decode = function (string, secure) {
if (!string || typeOf(string) != 'string') return null;
if (secure || JSON.secure) {
if (JSON.parse) return JSON.parse(string);
if (!JSON.validate(string)) throw new Error('JSON could not decode the input; security is enabled and the value is not secure.');
}
return eval('(' + string + ')');
};
})();
