1.总体布局 √ 2.构建函数 √ 3.each成果函数实现 √ 4.map成果函数实现 √ 5.sizzle初阶学习 6.attr成果函数实现 7.toggleClass成果函数实现(好伤) 8.val成果函数实现 9.ajax异步请求以及扩展学习

正文

如果仔细看日期你会发明今天写了两篇，是不是觉得奇怪为什么会发生发火？因为这几天攒了好多学习资料筹备写Blog,而且近期看到不少激励本身的对象因此感动不已的开始了今天的第二篇。

╮(╯▽╰)╭

按照当初的设定这篇应该是map函数了。

从头打开sublime然后载入jquery1.11.3

迅速的定位到了map。然后发明本身仿佛也从来没怎么用过Map=-=(泪目)。于是按端方去官网看看文档。

Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.

看描述遍历当前东西的每一个元素，在其上执行回调函数，并孕育产生一个包罗返回值的jquery东西。该要领常用于获取dom元素调集的值或者设置值。首先本身解读下源码。

// arg is for internal usage only map: function( elems, callback, arg ) { var value, i = 0, length = elems.length, isArray = isArraylike( elems ), ret = []; // Go through the array, translating each of the items to their new values if ( isArray ) { //判断是数组还是东西，数组用for循环，东西用for in遍历其属性. for ( ; i < length; i++ ) { value = callback( elems[ i ], i, arg ); if ( value != null ) { ret.push( value ); //将每一个执行回调函数的元素的返回值添加到数组中。 } } // Go through every key on the object, } else { for ( i in elems ) { value = callback( elems[ i ], i, arg ); if ( value != null ) { ret.push( value ); } } } // Flatten any nested arrays return concat.apply( [], ret ); //这里是一个难点

思路其实很好理解。但难的此中一些写法能够深深的伤害到根本单薄的我。好比

return concat.apply( [], ret )

对付concat() 要领用于连接两个或多个数组。该要领不会转变现有的数组，而仅仅会返回被连接数组的一个副本。

但是一般例子都是

var arr =[1,2,3]; var arr2 = [4,5]; arr.concat(arr2);//return [1,2,3,4,5]

那为毛是apply的挪用方法呢？无法理解于是继续查。

检察源码发此刻开头

var deletedIds = []; var slice = deletedIds.slice; var concat = deletedIds.concat; ...

delet 大专栏  Jquery 实现道理深入学习(3)edIds 看名字仿佛只是一其中间的变量，而且翻了一下上下文，并没有啥赋值。那么临时可以当做空数组对待。

然后看了下书上的。1.7的版本是这样的

var ret = []; ... ret[ret.length] = value; ... return ret.concat.apply([],ret);

在空数组[]上挪用要领concat扁平化功效集ret中的元素。看到这个解释我的心情是这样的(⊙o⊙)…

扁平化功效集是神马。。。

虽然能概略理解但是我还是google了一下。

关键感化的是apply,因为apply的第二个参数把ret的数组分成多个参数传入给concat 感化:把二维数组转化为一维数组

并且在其它处所找到了一个例子

$.map( [0,1,2], function(n){ return [ n, n + 1 ]; }); //输出：[0, 1, 1, 2, 2, 3] //如果是return ret的话，输出将会是：[[0,1], [1,2], [2,3]]

其实这个应该是本身慢慢试出来，不过不妨，我们可以弥补一下去测试看看。

发明功效确实如此。

然后呢，按理说应该到这里结束了，但是我”俄然”想起underscore里仿佛也有map的说于是。。。

_.map = _.collect = function(obj, iterator, context) { // 用于存放返回值的数组 var results = []; if(obj == null) return results; // 优先挪用宿主环境供给的map要领 if(nativeMap && obj.map === nativeMap) return obj.map(iterator, context); // 迭代措置惩罚惩罚调集中的元素 each(obj, function(value, index, list) { // 将每次迭代措置惩罚惩罚的返回值存储到results数组 results[results.length] = iterator.call(context, value, index, list); }); // 返回措置惩罚惩罚功效 if(obj.length === +obj.length) //如果是数组的话，必然要返回不异长度的新数组 results.length = obj.length; return results; };

可以发明Underscore依旧那么省。。。而且还那么自信，直接把之前的each拿过来用。。。

而且看它的results功效怪怪的。于是在jsfiddle上加载最新版本的underscore。并执行

console.log(_.map([1, 2, 3], function(n){ return [ n, n + 1 ]; }));

发明功效如上图，，并没有做jquery的扁平化功效集。

嗯，两者好坏我此刻是没资格评论。不过凭据写法而言，更喜欢underscore的。