-
這代碼寫的太精妙了～！ function Callbacks(options) { var list = []; var self; var firingStart; var memory; function _fire(data) { memory = options === 'memory' && data; // 這里的options有使用，所以上邊options參數(shù)為閉包中的變量，會(huì)保留 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構(gòu)造器上的each: $.each([ 52, 97 ], function( index, value ) { alert( index + ": " + value ); }); jQuery對(duì)象上的each: $(selector).each(function( index, value )) 數(shù)組的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也變了，因?yàn)樗麄兊闹羔樦赶蛲粋€(gè)對(duì)象，但是如果這樣賦值就不行-- object = {'once': true, 'memory': true}， 因?yàn)檫@是覆蓋。 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')查看全部
-
對(duì)jQuery提供的回調(diào)函數(shù)隊(duì)列管理對(duì)象Callbacks的介紹。 可以理解為jQuery中的觀察者模式對(duì)象。 這里的講解更通俗易懂：http://www.runoob.com/jquery/misc-callbacks.html 定義： $.Callbacks() 返回一個(gè)多用途的【回調(diào)函數(shù)列表對(duì)象】，提供了一些強(qiáng)大的方法來管理回調(diào)函數(shù)列表對(duì)象。 $.Callbacks()模塊的開發(fā)目的是為了給內(nèi)部$.ajax() 和 $.Deferred()模塊提供統(tǒng)一的基本功能組件。它也可以用在類似功能的一些組件中，如自己開發(fā)的插件。 $.Callbacks()常見的應(yīng)用場(chǎng)景是事件觸發(fā)機(jī)制，也就是設(shè)計(jì)模式中的觀察者模式的發(fā)布、訂閱機(jī)制，目前Callbacks對(duì)象用于queue、ajax、Deferred對(duì)象中。 當(dāng)構(gòu)造復(fù)雜的回調(diào)函數(shù)列表時(shí)，將會(huì)變更很簡(jiǎn)單?？梢愿鶕?jù)需要，很方便的就可以向這些回調(diào)函數(shù)中傳入所需的參數(shù)。查看全部
-
兩個(gè)例子： 1、共性代碼的提取 通過抽象出一個(gè)domManip方法，然后在這個(gè)方法中【處理共性】（合并多個(gè)參數(shù)的處理與生成文檔碎片的處理），然后最終把結(jié)果通過回調(diào)函數(shù)（【處理不同】）返回給每一個(gè)調(diào)用者。 2、回調(diào)隊(duì)列 arguments.callee: 表示當(dāng)前正在執(zhí)行的函數(shù)名字，當(dāng)當(dāng)前正在執(zhí)行的函數(shù)是匿名函數(shù)時(shí)非常有用。 那么我們使用回調(diào)函數(shù)，總的來說弱化耦合，讓調(diào)用者與被調(diào)用者分開，調(diào)用者不關(guān)心誰是被調(diào)用者，所有它需知道的，只是存在一個(gè)具有某種特定原型、某些限制條件的被調(diào)用函數(shù)。 通常的回調(diào)都是很單一的事件監(jiān)聽回調(diào)的處理方式，但是jQuery把回調(diào)函數(shù)的用法設(shè)計(jì)成一個(gè)更高的抽像，用于解耦與分離變化。 jQuery提供的回調(diào)函數(shù)隊(duì)列管理對(duì)象Callbacks，它是一個(gè)多用途的回調(diào)函數(shù)列表對(duì)象，提供了一種強(qiáng)大的方法來管理回調(diào)函數(shù)隊(duì)列。查看全部
-
jquery5大模塊，選擇器、DOM操作、事件、AJAX與動(dòng)畫查看全部
-
index.html 例子很好。 觀察者模式的實(shí)際應(yīng)用：解耦，促進(jìn)代碼抽象復(fù)用。 解釋：ajax請(qǐng)求完成后的處理部分，可能還可以分為數(shù)據(jù)、邏輯、其它邏輯的處理，如果能單獨(dú)抽離出來，一方面是一種解耦，另一方面實(shí)現(xiàn)的好的話可以做抽象復(fù)用。 設(shè)計(jì)該模式背后的主要?jiǎng)恿κ谴龠M(jìn)形成松散耦合。在這種模式中，并不是一個(gè)對(duì)象調(diào)用另一個(gè)對(duì)象的方法，而是一個(gè)對(duì)象訂閱另一個(gè)對(duì)象的特定活動(dòng)并在狀態(tài)改變后獲得通知。 總的來說，觀察者模式所做的工作就是在解耦，讓耦合的雙方都依賴于抽象，而不是依賴于具體。從而使得各自的變化都不會(huì)影響到另一邊的變化。查看全部
-
理解觀察者模式 概念： 觀察者也被叫作訂閱者（Subscriber），它指向 被觀察的對(duì)象--既被觀察者（Publisher 或 subject)。當(dāng)事件發(fā)生時(shí)，被觀察者（Publisher）就會(huì)通知觀察者（subscriber）。 模擬常規(guī)下觀察者模式最簡(jiǎn)單的實(shí)現(xiàn)： 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開始發(fā)布： Observable.fire(); // 1, 2查看全部
-
本篇要點(diǎn)： 1、什么是回掉函數(shù)： 回調(diào)函數(shù)就是一個(gè)通過函數(shù)指針調(diào)用的函數(shù)。如果你把函數(shù)的指針（地址）作為參數(shù)傳遞給另一個(gè)函數(shù)，當(dāng)這個(gè)指針調(diào)用它所指向的函數(shù)時(shí)，我們就說這是回調(diào)函數(shù)。 2、回調(diào)可以分為【異步回調(diào)】和【同步回調(diào)】，一般使用的都是【異步回調(diào)】查看全部
-
迭代器除了單純的遍歷，在jQuery內(nèi)部的運(yùn)用最多的就是接口的抽象合并，相同功能的代碼功能合并處理： 例如一： 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 ) { //處理的代碼 }); 可以看出上面代碼方法，針對(duì)相同的功能，節(jié)約了大量的代碼空間。查看全部
-
end 調(diào)用一次只會(huì)返回一層。 講解中的這個(gè)方法補(bǔ)了一些說明，可以結(jié)合講解中其上邊的代碼理解 pushStack: function( elems ) { // Build a new jQuery matched element set var ret = jQuery.merge( this.constructor(), elems ); // this.constructor即實(shí)例的constructor即jQuery，this.constructor()即創(chuàng)建新的jQuery對(duì)象。 // Add the old object onto the stack (as a reference) ret.prevObject = this; // 這里的this，即調(diào)用這個(gè)方法的對(duì)象，即選擇器選中的對(duì)象。所以調(diào)用end()時(shí)執(zhí)行end()中的this.prevObject 可以返回this（下邊這個(gè)方法返回對(duì)象的上一個(gè)對(duì)象） ret.context = this.context; // Return the newly-formed element set return ret; // 返回上邊新構(gòu)造的jQuery對(duì)象 },查看全部
-
本節(jié)把index.html中例子看一下，再看看下邊概念就好了。 1、而每個(gè)jQuery對(duì)象都有三個(gè)屬性：context、selector和prevObject 2、其中的prevObject屬性就指向這個(gè)對(duì)象棧中的前一個(gè)對(duì)象，而通過這個(gè)屬性可以回溯到最初的DOM元素集中。 3、jQuery為我們操作這個(gè)內(nèi)部對(duì)象棧提供個(gè)非常有用的2個(gè)方法 .end() -- 通過內(nèi)部尋址，可以回溯到之前的Dom元素集合 end: function() { return this.prevObject || this.constructor(null); // 回溯到prevObject或者構(gòu)造器 } .addBack()（andSelf現(xiàn)在是.addBack()的一個(gè)別名。在jQuery1.8和更高版本中應(yīng)使用.addBack()）-- 調(diào)用它會(huì)在棧中回溯一個(gè)位置，然后把當(dāng)前位置和這個(gè)位置上的元素集組合起來，并把這個(gè)新的、組合之后的元素集推入棧的上方。（不知道干啥的哈哈） 4、利用這個(gè)DOM元素棧可以減少重復(fù)的查詢和遍歷的操作，而減少重復(fù)操作也正是優(yōu)化jQuery代碼性能的關(guān)鍵所在。查看全部
-
本片學(xué)習(xí)要領(lǐng) 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; //只有一個(gè)參數(shù)，就是對(duì)jQuery自身的擴(kuò)展處理 //extend,fn.extend if (i === length) { target = this; //調(diào)用的上下文對(duì)象jQuery/或者實(shí)例，這里指定this，下邊進(jìn)行賦值操作 i--; } for (; i < length; i++) { //從i開始取參數(shù),不為空開始遍歷 if ((options = arguments[i]) != null) { for (name in options) { copy = options[name]; //覆蓋拷貝 target[name] = copy; } } } return target; }查看全部
-
所以我們?nèi)绻枰準(zhǔn)降奶幚?，只需要在方法?nèi)部返回當(dāng)前的這個(gè)實(shí)例對(duì)象this就可以了。 但是這種方法有一個(gè)問題是：所有對(duì)象的方法返回的都是對(duì)象本身，也就是說沒有返回值，所以這種方法不一定在任何環(huán)境下都適合。查看全部
-
對(duì)于 jQuery對(duì)象或者說函數(shù)(繼承自對(duì)象所以其實(shí)也是對(duì)象)或者說構(gòu)造器 靜態(tài)方法掛在jQuery構(gòu)造器上 實(shí)例方法掛在jQuery.fn.init上 jQuery.fn.init.prototype = jQuery.fn，實(shí)例的原型又指向了jQuery的原型 靜態(tài)與實(shí)例方法共享設(shè)計(jì)。 方法是共享的，并且實(shí)例方法取于靜態(tài)方法，2個(gè)構(gòu)造器是完全隔離的 ,這個(gè)要如何處理？ 通過原型傳遞解決問題，把jQuery的原型傳遞給jQuery.prototype.init.prototype。換句話說jQuery的原型對(duì)象覆蓋了init構(gòu)造器的原型對(duì)象，因?yàn)槭且脗鬟f所以不需要擔(dān)心這個(gè)循環(huán)引用的性能問題。（那個(gè)圖片很好）查看全部
舉報(bào)
0/150
提交
取消