-
这代码写的太精妙了～！ function Callbacks(options) { var list = []; var self; var firingStart; var memory; function _fire(data) { memory = options === 'memory' && data; // 这里的options有使用，所以上边options参数为闭包中的变量，会保留 firingIndex = firingStart || 0; firingStart = 0; //add()之后，firingStart在这里归0 firingLength = list.length; for (; list && firingIndex < firingLength; firingIndex++) { list[firingIndex](data) } } self = { add: function(fn) { var start = list.length; list.push(fn) if (memory) { firingStart = start; //获取最后一值 _fire(memory); } }, fire: function(args) { if (list) { _fire(args) } } } return self; } function fn1(val) { show('fn1 says ' + val); } function fn2(val) { show('fn2 says ' + val); } function fn3(val) { show('fn3 says ' + val); } var cbs = Callbacks('memory'); cbs.add(fn1); cbs.fire('foo'); cbs.add(fn2); cbs.fire('bar'); cbs.add(fn3); cbs.fire('aaron')查看全部
-
jQuery构造器上的each: $.each([ 52, 97 ], function( index, value ) { alert( index + ": " + value ); }); jQuery对象上的each: $(selector).each(function( index, value )) 数组的forEach: array.forEach(callback( value, index, array ){ //do something }[, thisArg]);查看全部
-
var optionsCache = {}; var rnotwhite = (/\S+/g); function show(data) { if (typeof data === 'object') { for (var key in data) { $("body").append('<li>key->' + key + '; value->'+ data[key] +'</li>') } } else { $("body").append('<li>' + data + '</li>') } } function createOptions(options) { var object = optionsCache[options] = {}; // 最牛逼的是这里，object[flag] = true后，optionsCache[options]跟着object也变了，因为他们的指针指向同一个对象，但是如果这样赋值就不行-- object = {'once': true, 'memory': true}， 因为这是覆盖。 jQuery.each(options.match(rnotwhite) || [], function(_, flag) { object[flag] = true; }); return object; } function callback(options) { options = typeof options === "string" ? (optionsCache[options] || createOptions(options)) : jQuery.extend({}, options); show(options) } callback('once memory')查看全部
-
对jQuery提供的回调函数队列管理对象Callbacks的介绍。 可以理解为jQuery中的观察者模式对象。 这里的讲解更通俗易懂：http://www.runoob.com/jquery/misc-callbacks.html 定义： $.Callbacks() 返回一个多用途的【回调函数列表对象】，提供了一些强大的方法来管理回调函数列表对象。 $.Callbacks()模块的开发目的是为了给内部$.ajax() 和 $.Deferred()模块提供统一的基本功能组件。它也可以用在类似功能的一些组件中，如自己开发的插件。 $.Callbacks()常见的应用场景是事件触发机制，也就是设计模式中的观察者模式的发布、订阅机制，目前Callbacks对象用于queue、ajax、Deferred对象中。 当构造复杂的回调函数列表时，将会变更很简单。可以根据需要，很方便的就可以向这些回调函数中传入所需的参数。查看全部
-
两个例子： 1、共性代码的提取 通过抽象出一个domManip方法，然后在这个方法中【处理共性】（合并多个参数的处理与生成文档碎片的处理），然后最终把结果通过回调函数（【处理不同】）返回给每一个调用者。 2、回调队列 arguments.callee: 表示当前正在执行的函数名字，当当前正在执行的函数是匿名函数时非常有用。 那么我们使用回调函数，总的来说弱化耦合，让调用者与被调用者分开，调用者不关心谁是被调用者，所有它需知道的，只是存在一个具有某种特定原型、某些限制条件的被调用函数。 通常的回调都是很单一的事件监听回调的处理方式，但是jQuery把回调函数的用法设计成一个更高的抽像，用于解耦与分离变化。 jQuery提供的回调函数队列管理对象Callbacks，它是一个多用途的回调函数列表对象，提供了一种强大的方法来管理回调函数队列。查看全部
-
jquery5大模块，选择器、DOM操作、事件、AJAX与动画查看全部
-
index.html 例子很好。 观察者模式的实际应用：解耦，促进代码抽象复用。 解释：ajax请求完成后的处理部分，可能还可以分为数据、逻辑、其它逻辑的处理，如果能单独抽离出来，一方面是一种解耦，另一方面实现的好的话可以做抽象复用。 设计该模式背后的主要动力是促进形成松散耦合。在这种模式中，并不是一个对象调用另一个对象的方法，而是一个对象订阅另一个对象的特定活动并在状态改变后获得通知。 总的来说，观察者模式所做的工作就是在解耦，让耦合的双方都依赖于抽象，而不是依赖于具体。从而使得各自的变化都不会影响到另一边的变化。查看全部
-
理解观察者模式 概念： 观察者也被叫作订阅者（Subscriber），它指向 被观察的对象--既被观察者（Publisher 或 subject)。当事件发生时，被观察者（Publisher）就会通知观察者（subscriber）。 模拟常规下观察者模式最简单的实现： var Observable = { callbacks: [], add: function(fn) { this.callbacks.push(fn); }, fire: function() { this.callbacks.forEach(function(fn) { fn(); }) } } 使用add开始订阅： Observable.add(function() { alert(1) }) Observable.add(function() { alert(2) }) 使用fire开始发布： Observable.fire(); // 1, 2查看全部
-
本篇要点： 1、什么是回掉函数： 回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针调用它所指向的函数时，我们就说这是回调函数。 2、回调可以分为【异步回调】和【同步回调】，一般使用的都是【异步回调】查看全部
-
迭代器除了单纯的遍历，在jQuery内部的运用最多的就是接口的抽象合并，相同功能的代码功能合并处理： 例如一： jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) { class2type[ "[object " + name + "]" ] = name.toLowerCase(); }); 例如二： jQuery.each({ mouseenter: "mouseover", mouseleave: "mouseout", pointerenter: "pointerover", pointerleave: "pointerout" }, function( orig, fix ) { //处理的代码 }); 可以看出上面代码方法，针对相同的功能，节约了大量的代码空间。查看全部
-
end 调用一次只会返回一层。 讲解中的这个方法补了一些说明，可以结合讲解中其上边的代码理解 pushStack: function( elems ) { // Build a new jQuery matched element set var ret = jQuery.merge( this.constructor(), elems ); // this.constructor即实例的constructor即jQuery，this.constructor()即创建新的jQuery对象。 // Add the old object onto the stack (as a reference) ret.prevObject = this; // 这里的this，即调用这个方法的对象，即选择器选中的对象。所以调用end()时执行end()中的this.prevObject 可以返回this（下边这个方法返回对象的上一个对象） ret.context = this.context; // Return the newly-formed element set return ret; // 返回上边新构造的jQuery对象 },查看全部
-
本节把index.html中例子看一下，再看看下边概念就好了。 1、而每个jQuery对象都有三个属性：context、selector和prevObject 2、其中的prevObject属性就指向这个对象栈中的前一个对象，而通过这个属性可以回溯到最初的DOM元素集中。 3、jQuery为我们操作这个内部对象栈提供个非常有用的2个方法 .end() -- 通过内部寻址，可以回溯到之前的Dom元素集合 end: function() { return this.prevObject || this.constructor(null); // 回溯到prevObject或者构造器 } .addBack()（andSelf现在是.addBack()的一个别名。在jQuery1.8和更高版本中应使用.addBack()）-- 调用它会在栈中回溯一个位置，然后把当前位置和这个位置上的元素集组合起来，并把这个新的、组合之后的元素集推入栈的上方。（不知道干啥的哈哈） 4、利用这个DOM元素栈可以减少重复的查询和遍历的操作，而减少重复操作也正是优化jQuery代码性能的关键所在。查看全部
-
本片学习要领 1、要先要明白extend的用法： 参考【http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html】 或者【mdn文档】 2、其次看懂这段代码 aAron.extend = aAron.fn.extend = function() { var options, src, copy, target = arguments[0] || {}, i = 1, length = arguments.length; //只有一个参数，就是对jQuery自身的扩展处理 //extend,fn.extend if (i === length) { target = this; //调用的上下文对象jQuery/或者实例，这里指定this，下边进行赋值操作 i--; } for (; i < length; i++) { //从i开始取参数,不为空开始遍历 if ((options = arguments[i]) != null) { for (name in options) { copy = options[name]; //覆盖拷贝 target[name] = copy; } } } return target; }查看全部
-
所以我们如果需要链式的处理，只需要在方法内部返回当前的这个实例对象this就可以了。 但是这种方法有一个问题是：所有对象的方法返回的都是对象本身，也就是说没有返回值，所以这种方法不一定在任何环境下都适合。查看全部
-
对于 jQuery对象或者说函数(继承自对象所以其实也是对象)或者说构造器 静态方法挂在jQuery构造器上 实例方法挂在jQuery.fn.init上 jQuery.fn.init.prototype = jQuery.fn，实例的原型又指向了jQuery的原型 静态与实例方法共享设计。 方法是共享的，并且实例方法取于静态方法，2个构造器是完全隔离的 ,这个要如何处理？ 通过原型传递解决问题，把jQuery的原型传递给jQuery.prototype.init.prototype。换句话说jQuery的原型对象覆盖了init构造器的原型对象，因为是引用传递所以不需要担心这个循环引用的性能问题。（那个图片很好）查看全部
举报
0/150
提交
取消