这是每一个框架都遇到的问题，是使用原型扩展实现链式调用，还是把方法都绑定都一个对象中。如果使用原型扩展就意味着与其他所有走这条路的框架为敌，在这条路上有两个令人望而生畏的对手——Prototype与mootools。如果把方法都绑定都一个对象中（我通常称之为命名空间对象），方法调用起来就不那么优雅，即使是jQuery，也只能让实现节点的链式操作。但一个框架所能达到的高度，是由它的基础设施决定。jQuery在它所涉及的方面算是做得尽善尽美了，但有没有想到，mootools实现与此相同的功能，所需的代码少多了。这是因为jQuery就一个jQuery对象在干活，而mootools那边却都是武装到牙齿的Array,String,Number,Class,Event,Element等一大堆对象。原型扩展的好处显然易见，我们直接就可以在字面量上实现链式操作。如果是第二种，想实现链式操作，就需要在一个自定义对象进行原型扩展，但这也意呋着链式操作只能在实例的方法中进行，需要new一下。John Resigs想歪脑，搞了个无new实例化，减轻这种调用的痛苦（可能对其他语言的人来说，一大堆分开的方法调用不算什么，但在JS界，已经大规模使用链式操作，而你写JS时还是一个个方法地调用，明显是不合潮流，会“被落后”！）
// jQuery
$.trim(" abc ");
// Google Closure Library
goog.string.trim(" abc ");
// Dojo Toolkit
dojo.string.trim(" abc ");
像jquery这样分层结构不明显的库，会把这些工具方法都依附到命名空间对象上，但如果库的规模很大，像Google Closure那样就不行，会很乱很乱，调用方法时内部有一个方法寻找的过程，这里会出现性能耗消。由于直接是返回没有什么扩展的原生对象，第二次调用就可能“链”不起来了。
//假设我已为jQuery添加了capitalize方法
$.capitalize($.trim(" abc "));
是不是很丑鄙呢?!但现在我想通了，我的框架现在还很弱小，绝对不能与Prototype、mootools为敌，要不就会被它们扼杀于襁褓之中。我想了好久，把原生对象的（原型）方法划分为三个层次。第一种是所有浏览器都支持的，第二种是IE6不支持，但已列入ECMA草案的，如javascript1.6的迭代器，它们不使用新的语言特征就能模拟出来的，第三种是自定义方法，话需如此，有些方法，许多主流框架都实现了的，如string的capitalize、camelize、substitute，array的unique、flatten，object的each或forEach。第一种我们不用管，第二种只是个兼容的问题，实现方法大同小异，反正效果出来是一样就行了。第三种如果也加入到原型中，很容易与其他类库造成命名冲突，因为它们有时仅仅是名字一样，要达到的目的完全是两码事。嗯，又是时候隆重推介我全新的链式操作。
我们知道，query之所以能链式调用，它的方法每次都返回拥有所有方法的对象。这种对象，我们称之为实例，因为它可以廉价地调用其原型链上的方法。我们反过来想，原型链其实也是一个个对象。我们可以独立地实现这些对象，我称之为扩展方法集合体，如stringExt、numberExt、arrayExt。剩下的是“实例”问题，“实例”能拥有所有方法，包括原生的以及自定义的。很明显，让一个对象干四种原生对象的活是不现实的，我相应地搞了四种对象。这些对象，我称之为代理对象，都是方法集体合，但这些方法与扩展方法集合体的截然不同，它们都是代理方法，里面的逻辑一模一样，不同的是函数体上附了一个方法名，如“toArray”、"camelize"啦。最开始的时候，我们把这个操作对象放进一个入口函数（chain）。这其实是一个适配器，但为了简单起见，我暂时略去这些逻辑，在里面直接调用链式函数（adjustProxy）就算。此函数会根据操作对象的类型，选择不同的代理对象，或者干脆不做，直接返回。最着就等这个代理对象的某个方法被调用了，我说过它只是代理方法，唯一不同的是方法名与所在对象。被调用时，它会先从自己身上得到方法名与从内部的this那里得到操作对象target与其类型。就算这类型其实也可以通过计算得到，但既然上次已计算过，就不谓重复而已。有了方法名，我们就判定操作对象是否天生支持此方法，没有则从相应扩展方法集合体寻找相应同名方法。然后是调用方法，把得到的结果再放进链式函数(adjustProxy)中……这样就实现链式操作了。
//by 司徒正美 http://www.cnblogs.com/rubylouvre/ 2010.10.17
var lang = {};
// get from qwap
function getType(obj){
var type = typeof obj;
if(type === 'object'){
if(obj===null) return 'null';
else if(obj.window==obj) return 'window'; //window
else if(obj.nodeName) return (obj.nodeName+'').replace('#',''); //document/element
else if(!obj.constructor) return 'unknown';
//to_s 为Object.prototype.toString
else return to_s.call(obj).slice(8,-1).toLowerCase();
}
return type;
}
function oneObject(array,val){
var result = {},value = val !== void 0 ? val :1;
for(var i=0,n=array.length;i < n;i++)
result[array[i]] = value;
return result;
}
function makeProxy(type,method){
var object = lang[type+"Proxy"] = {};
method.forEach(function(name){
object[name] = function(){
var name = arguments.callee.name,
obj = this.target,
method = obj[name] ? obj[name] : lang[this.type+"Ext"][name];
return adjustProxy(method.apply(obj,arguments));
}
object[name].name = name;
})
}
var adjustOne = oneObject(["string","array","number","object"]);
function adjustProxy(obj){
var type = getType(obj);
if(adjustOne[type]){
var proxy = lang[type+"Proxy"];
proxy.target = obj;
proxy.type = type;
proxy.toString = function(){
return this.target+"";
}
proxy.valueOf = function(){
return this.target;
}
return proxy;
}else{
return obj
}
}
function chain(obj){
return adjustProxy(obj)
}
- lang，这是内部的私有对象，负责存放四种类型的扩展方法集合体与相应的代理对象。
- getType，辅助函数，功能同is。
- oneObject，我框架中一个重要辅助函数，目的是生成用于if分支的哈希对象。
- makeProxy，创建一个代理对象。它里面的方法都有一个name，用于反射。这些代理方法会返回另一个代理对象，并把真正的返回值附于其上。
- adjustProxy，调整代理对象。这方法会在代理方法中调用，其valueOf与toString用于打破链式操作，返回我们想要的结果。
// lang的全貌
lang = {
stringProxy:{/*……*/},
stringExt:{/*……*/},
numberProxy:{/*……*/},
numberExt:{/*……*/},
arrayProxy:{/*……*/},
arrayExt:{/*……*/},
objectProxy:{/*……*/},
objectExt:{/*……*/}
}
接着我们就定义这些扩展方法集合体吧，里面的函数就像定义原型函数那样就行了。
String的扩展：
//by 司徒正美 http://www.cnblogs.com/rubylouvre/ 2010.10.17
var stringExt = lang.stringExt = {
//判断一个字符串是否包含另一个字符
contains: function(string, separator){
return (separator) ? (separator + this + separator).indexOf(separator + string + separator) > -1 : this.indexOf(string) > -1;
},
startsWith: function (pattern) {
return this.indexOf(pattern) === 0;
},
endsWith: function (pattern) {
var d = this.length - pattern.length;
return d >= 0 && this.lastIndexOf(pattern) === d;
},
toArray:function(crash){
return !!crash ? this.split('') : this.split(/\s+/g);
},
//得到字节长度
byteLen:function(){
return this.replace(/[^\x00-\xff]/g,"--").length;
},
empty: function () {
return this.valueOf() === '';
},
blank: function () {
return /^\s*$/.test(this);
},
//length，新字符串长度，truncation，新字符串的结尾的字段
//返回新字符串
truncate :function(length, truncation) {
length = length || 30;
truncation = truncation === void(0) ? '...' : truncation;
return this.length > length ?
this.slice(0, length - truncation.length) + truncation :String(this);
},
camelize:function(){
return this.replace(/-([a-z])/g, function($1,$2){
return $2.toUpperCase();
});
},
capitalize: function(){
return this.replace(/\b[a-z]/g, function(s){
return s.toUpperCase();
});
},
underscore: function() {
return this.replace(/([a-z0-9])([A-Z]+)/g, function(match, first, second) {
return first+"_"+(second.length > 1 ? second : second.toLowerCase());
}).replace(/\-/g, '_');
},
toInt: function(radix) {
return parseInt(this, radix || 10);
},
toFloat: function() {
return parseFloat(this);
},
escapeRegExp: function(){
return this.replace(/([-.*+?^${}()|[\]\/\\])/g, '\\$1');
},
//http://www.cnblogs.com/rubylouvre/archive/2010/02/09/1666165.html
padLeft: function(digits, radix, filling){
var num = this.toString(radix || 10);
filling = filling || "0";
while(num.length < digits){
num= filling + num;
}
return num;
},
padRight: function(digits, radix, filling){
var num = this.toString(radix || 10);
filling = filling || "0";
while(num.length < digits){
num += filling;
}
return num;
},
// http://www.cnblogs.com/rubylouvre/archive/2009/11/08/1598383.html
times :function(n){
var str = this,res = "";
while (n > 0) {
if (n & 1)
res += str;
str += str;
n >>= 1;
}
return res;
},
//要替换的内容要用#{}包围起来
substitute : function(object, regexp){
return this.replace(regexp || (/\\?\#{([^{}]+)\}/g), function(match, name){
if (match.charAt(0) == '\\') return match.slice(1);
return (object[name] != undefined) ? object[name] : '';
});
}
}
Array的扩展：
var arrayExt = lang.arrayExt = {
//深拷贝当前数组
clone: function(){
var i = this.length, result = [];
while (i--) result[i] = cloneOf(this[i]);
return result;
},
//判断数组是否包含此元素
contains: function (el) {
return this.indexOf(el) !== -1;
},
without:function(){//去掉与传入参数相同的元素
var args = A_slice.call(arguments);
return this.filter(function (el) {
return args.indexOf(el) !== -1;
});
},
//http://msdn.microsoft.com/zh-cn/library/bb383786.aspx
//移除 Array 对象中某个元素的第一个匹配项。
remove: function (item) {
var index = this.indexOf(item);
if (index !== -1) return arrayExt.removeAt.call(this,index);
return null;
},
//移除 Array 对象中指定位置的元素。
removeAt: function (index) {
return this.splice(index, 1);
},
//对数组进行洗牌,但不影响原对象
// Jonas Raoni Soares Silva http://jsfromhell.com/array/shuffle [v1.0]
shuffle: function () {
var shuff = this.concat(), j, x, i = shuff.length;
for (; i > 0; j = Math.random(i-1), x = shuff[--i], shuff[i] = shuff[j], shuff[j] = x) {};
return shuff;
},
min: function() {
//比Math.min.apply({}, this) 高效
return Math.min.apply(Math, this);
},
max: function() {
return Math.max.apply(Math, this);
},
//从数组中随机抽选一个元素出来
random: function () {
return arrayExt.shuffle.call(this)[0];
},
ensure: function() { //只有原数组不存在才添加它
var args = A_slice.call(arguments);
args.forEach(function(el){
if (this.indexOf(el) < 0) this.push(el);
},this);
return this;
},
//取得对象数组的每个元素的特定属性
pluck:function(name){
var result = [],prop;
this.forEach(function(el){
prop = el[name];
if(prop != null)
result.push(prop);
});
return result;
},
sortBy: function(fn, scope) {
var array = this.map(function(el, index) {
return {
el: el,
re: fn.call(scope, el, index)
};
}).sort(function(left, right) {
var a = left.re, b = right.re;
return a < b ? -1 : a > b ? 1 : 0;
});
return arrayExt.pluck.call(array,'el');
},
compact: function () {//以数组形式返回原数组中不为null与undefined的元素
return this.filter(function (el) {
return el != null;
});
},
unique: function () { //返回没有重复值的新数组
var result = [];
for(var i=0,l=this.length; i < l; i++) {
if(result.indexOf(this[i]) < 0){
result.push(this[i]);
}
}
return result;
},
flatten: function() {
var result = [];
this.forEach(function(value) {
if (is(value,"Array")) {
result = result.concat(arrayExt.flatten.call(value));
} else {
result.push(value);
}
});
return result;
},
//var a = [0,1,2,9];
//var a_ = [0,5,2];
//puts(a.diff(a_)) //--> 1,9
diff : function(array) {
var result = [],l = this.length,l2 = array.length,diff = true;
for(var i=0; i<l; i++) {
for(var j=0; j<l2; j++) {
if (this[i] === array[j]) {
diff = false;
break;
}
}
diff ? result.push(this[i]) : diff = true;
}
return result.unique();
}
};
Number的扩展：
var numberExt = lang.numberExt ={
times: function(fn, bind) {
for (var i=0; i < this; i++)
fn.call(bind, i);
return this;
},
padLeft:function(digits, radix, filling){
return stringExt.padLeft.apply(this,[digits, radix, filling]);
},
padRight:function(digits, radix, filling){
return stringExt.padRight.apply(this,[digits, radix, filling]);
},
upto: function(number, fn, scope) {
for (var i=this+0; i <= number; i++)
fn.call(scope, i);
return this;
},
downto: function(number, fn, scope) {
for (var i=this+0; i >= number; i--)
fn.call(scope, i);
return this;
},
round: function(base) {
if (base) {
base = Math.pow(10, base);
return Math.round(this * base) / base;
} else {
return Math.round(this);
}
}
}
var mathFns = ["abs", "acos", "asin", "atan", "atan2", "ceil",
"cos", "exp", "floor", "log", "pow","sin", "sqrt", "tan"];
mathFns.forEach(function(name){
numberExt[name] = function(){
return Math[name](this);
}
});
Object的扩展：
function isPureObject(obj){
return !!(obj && is(obj,"Object") && obj[CTOR] === Object && obj[CTOR][PROTO].hasOwnProperty("isPrototypeOf"));
}
// get from mootools
function cloneOf(item){
if(is(item,"Array")){
return arrayExt.clone.call(item);
}else if(isPureObject(item)){
return objectExt.clone.call(item);
}else{
return item;
}
}
// get from mootools
function mergeOne(source, key, value){
if(is(value,"Array")){
source[key] = arrayExt.clone.call(value);
}else if(isPureObject(value)){
if(is(source,"Object")){
objectExt.merge.call(source[key], value);
}else{
source[key] = objectExt.clone.call(value);
}
}else{
source[key] = value;
}
return source;
};
var objectExt = lang.objectExt = {
//取其子集组成一个新对象，keys为一个字符串数组
subset: function(keys){
var results = {};
for (var i = 0, l = keys.length; i < l; i++){
var k = keys[i];
results[k] = this[k];
}
return results;
},
forEach: function(fn,scope){
var names = Object.keys(this),n = names.length,name
while(n){
name = names[--n];
fn.call(scope,this[name],name,this);
}
},
clone: function(){
var clone = {};
for (var key in this) clone[key] = cloneOf(this[key]);
return clone;
},
merge: function(k, v){
var target = this,obj,key
//为目标对象添加一个键值对
if (typeOf(k) == 'string') return mergeOne(target, k, v);
//合并多个对象
for (var i = 0, l = arguments.length; i < l; i++){
obj = arguments[i];
for ( key in obj) mergeOne(target, key, obj[key]);
}
return target;
}
}
最后是定义四个代理对象了。
var stringFns = [
"charAt", "charCodeAt", "concat", "indexOf",
"lastIndexOf", "localeCompare", "match", "quote","replace",
"search", "slice", "split", "substring", "toLowerCase",
"toLocaleLowerCase", "toUpperCase", "toLocaleUpperCase",
"trim", "toJSON"]
makeProxy("string",stringFns.concat(Object.keys(stringExt)));
var arrayFns = [ "toLocaleString","concat", "join", "pop", "push", "shift",
"slice", "sort", "reverse","splice", "unshift", "indexOf", "lastIndexOf",
"every", "some", "forEach", "map","filter", "reduce", "reduceRight"]
makeProxy("array",arrayFns.concat(Object.keys(arrayExt)));
var numberFns = ["toLocaleString", "toFixed", "toExponential", "toPrecision", "toJSON"]
makeProxy("number",numberFns.concat(Object.keys(numberExt)));
var objectFns = [ "toLocaleString", "hasOwnProperty", "isPrototypeOf", "propertyIsEnumerable" ];
makeProxy("object",objectFns.concat(Object.keys(objectExt)));
使用如下：
alert(chain("eee").capitalize().toArray(true)) //E,e,e