-
這代碼寫的太精妙了～！ 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元素?？梢詼p少重復的查詢和遍歷的操作，而減少重復操作也正是優化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
提交
取消