Core.js中的工具函数1

Core.js文件是Mootools中最为核心的文件,该文件中定义了定义了Native对象、增强Javascript的内置对象如String、Array等等,定义了Hash对象以及大量的工具函数。阅读Core.js源文件,我的思路是这样的先看它里面定义的工具函数,然后再看Native对象的定义、再看它如何扩展Javascrpt内置对象、最后是Hash的实现。
不会对每一个工具函数都解析,有些一眼就能看懂就不解析了。工具函数的目标只有一个尽可能的增强Javascript的函数编程特性,使得Javascript更有表现力及简洁。

1>$type函数

实现如下:
function $type(obj){
	if (obj == undefined) return false;
	if (obj.$family) return (obj.$family.name == 'number' && !isFinite(obj)) ? false : obj.$family.name;
	if (obj.nodeName){
		switch (obj.nodeType){
			case 1: return 'element';
			case 3: return (//S/).test(obj.nodeValue) ? 'textnode' : 'whitespace';
		}
	} else if (typeof obj.length == 'number'){
		if (obj.callee) return 'arguments';
		else if (obj.item) return 'collection';	/*this is defined by mootools*/
	}
	return typeof obj;
};
如果只看第13行代码,它的实现只是简单的使用typeof操作符返回obj的类型,前面的代码只是针对几种特殊的类型作处理。如果obj是undefined返回false;如果obj有属性$family,则检查$family的属性name是否是数字,如果不是就返回name属性,反之,则返回false;如果有nodeName属性,说明它是一个DOM元素,则检查它的nodeType属性,如果是1,则返回element;如果是3,旭检查它的空白结点,还是文本结点;如果obj有length属性,则继续判断它如果有callee属性,则是一个Argument对象,返回argement;如果有item属性,则返回collection,我非常怀疑该类型是Mootools自己增加的。

2> $A与$splat

$A函数是将一个可遍历对象,转成一个数组。可遍历对象如函数参数,DOM节点集合。实现如下:
function $A(iterable){
	if (iterable.item){
		var array = [];
		for (var i = 0, l = iterable.length; i < l; i++) array[i] = iterable[i];
		return array;
	}
	return Array.prototype.slice.call(iterable);
};
如果iterable具有属性item,则在一个循环中把它的每一个对象都拷贝到array,否则,就用Array对象的slice函数,把这个集合一个个的“切”成数组。这里,要说明的是并不是每个浏览器都支持slice函数。该函数在String对象中常见,甚至可以猜测,这是Mootools对的Array对象的增强。
$splat则是将一个东西转成数组,而不论它本身是否是一个可遍历的集合,实现如下:
function $splat(obj){
	var type = $type(obj);
	return (type) ? ((type != 'array' && type != 'arguments') ? [obj] : obj) : [];
};
首选,获得obj的类型,首先判断type是否存在,如果不存在,则返回一个空数组;如果存在,则判断它是array,还是arguments,如果不是array且不是arguments,则将它整个变成数组,反之则返回本身。
第3条语句,用if else代码写如下:
if( type ) {
	if( type != 'array' && type != 'arguments' ) {
	 		return obj;
 	}else {
 		return [obj];
 	}
	}else{
 		return [];
}

3> $lambda与$arguments

这两个函数放在一起,是因为它们都直接体现Javascript语言的函数编程特性,它们的返回值就是函数。实现如下:
function $lambda(value){
	return (typeof value == 'function') ? value : function(){
		return value;
	};
};

function $arguments(i){
	return function(){
		return arguments[i];
	};
};
$lambda将会返回一个函数,这个函数的返回值就是value,如$lambda(false)。$arguments,则将返回一个函数,它将给出第i个参数的值。
var fourth = $arguments(3);
alert(fourth(12, 34, 51, 45, 79));
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
runtime-core.esm-bundler.js:41 [Vue warn]: Unhandled error during execution of beforeMount hook at <App> warn @ runtime-core.esm-bundler.js:41 logError @ runtime-core.esm-bundler.js:216 handleError @ runtime-core.esm-bundler.js:208 callWithErrorHandling @ runtime-core.esm-bundler.js:160 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166 hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2655 invokeArrayFns @ shared.esm-bundler.js:77 componentUpdateFn @ runtime-core.esm-bundler.js:5657 run @ reactivity.esm-bundler.js:178 instance.update @ runtime-core.esm-bundler.js:5814 setupRenderEffect @ runtime-core.esm-bundler.js:5822 mountComponent @ runtime-core.esm-bundler.js:5612 processComponent @ runtime-core.esm-bundler.js:5565 patch @ runtime-core.esm-bundler.js:5040 render @ runtime-core.esm-bundler.js:6332 mount @ runtime-core.esm-bundler.js:3824 app.mount @ runtime-dom.esm-bundler.js:1431 eval @ main.js:7 ./src/main.js @ app.js:85 __webpack_require__ @ app.js:359 (匿名) @ app.js:1539 __webpack_require__.O @ app.js:405 (匿名) @ app.js:1540 (匿名) @ app.js:1542 app.js:362 Uncaught TypeError: (0 , _test__WEBPACK_IMPORTED_MODULE_1__.holleTest) is not a function at eval (App.vue:77:1) at eval (runtime-core.esm-bundler.js:2675:1) at callWithErrorHandling (runtime-core.esm-bundler.js:158:1) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:1) at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2655:1) at invokeArrayFns (shared.esm-bundler.js:77:1) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5657:1) at ReactiveEffect.run (reactivity.esm-bundler.js:178:1) at instance.update (runtime-core.esm-bundler.js:5814:1) at setupRenderEffect (runtime-core.esm-bundler.js:5822:1)
06-11

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值