-
對象的構建:
- 采用原型式的結構,使用構造函數,這樣的好處節省了內存空間,性能上得到了優化
-?但是ajQuery類這個結構與目標jQuery的結構的還是有很大不一致:沒有采用new操作符;return返回的是一個通過new出來的的對象。
查看全部 -
jQuery多庫共存處理:
1、引入jquery時,jQuery內部先將當前window對象上的jQuery和$記錄下來
var?_jQuery?=?window.jQuery, ????_$?=?window.$;
2、引入jquery后,jQuery占領了window對象上的jQuery和$
3、手動執行$.noConflict()函數,重新讓出jQuery和$,還原到占領之前的情況
jQuery.noConflict?=?function(?deep?)?{ ????if?(?window.$?===?jQuery?)?{ ????????window.$?=?_$; ????} ????if?(?deep?&&?window.jQuery?===?jQuery?)?{ ????????????window.jQuery?=?_jQuery; ????????} ????????return?jQuery; ????}; }
查看全部 -
jQuery中ready與load事件:
- ready先執行,load后執行
- ready在頁面DOM構造完成后執行,無需等待圖片等外部文件的加載
- load在頁面加載完畢后才執行
- 網頁中有圖片時,ready先執行;網頁無圖片時,load先執行,因為ready異步?
DOMContentLoaded與load
- DOMContentLoaded 事件的觸發時機為:HTML解析為DOM之后觸發,無需等- 待樣式表、圖像和子框架的完成加載。
- load 意思就是:當一個資源及其依賴資源已完成加載時,將觸發 load 事件
- 簡而言之,二者觸發時間的區別在于:DOMContentLoaded 在 HTML 文檔本解析之后觸發,而 load 是在 HTML 所有相關資源被加載完成后觸發
查看全部 -
無new構建原理:檢測參數類型,并將強制轉換為jquery對象
const?jquery?=?function(selector){ ????if(!(selector?instanceof?jquery)){ ????????return?new?jquery(selector); ????} ???? ????let?elem?=?document.querySelector(selector[0]); ????this[0]?=?elem; ????this.length?=?1; ????this.context?=?document; ????this.selector?=?selector[0]; ????return?this }
查看全部 -
使用立即執行函數解決命名空間與變量污染的問題
(function(global){ ????global.jquery?=?function(){...} })(window)
查看全部 -
jQuery的核心理念,簡潔的API、優雅的鏈式、強大的查詢與便捷的操作
查看全部 -
2、簡單模擬
function?aDeferred(){ ????var?arr?=?[]; ????return?{ ????????then:?function(fn){ ????????????arr.push(fn); ????????????return?this; ????????}, ????????resolve:?function(args){ ????????????var?returned; ????????????arr.forEach(function(fn,?i){ ????????????????var?o?=?returned?||?args; ????????????????returned?=?fn(o); ????????????}) ????????} ????} }
查看全部 -
1、使用$.Deferred
var?dfd?=?$.Deferred() dfd.then(function(preVale){ ????return?2?*?preVale; }).then(function(preVale){ ????return?3?*?preVale; }).then(function(preVale){ ????console.log("使用$.Deferred代碼結果:"+preVale); }); dfd.resolve(2);
查看全部 -
1、
$.data() eg: var?ele1?=?$("#aaron"); $.data(ele1,?'a',?'111'?);
2、
$(ele).data() 1)設置值 eg: var?ele1?=?$("#aaron"); ele1.data('a',?'111');? 2)獲取值 eg: var?ele1?=?$("#aaron"); ele1.data('a');
查看全部 -
function?fn1(val){ ????console.log('fn1?says?'?+?val); } var?callbacks?=?$.Callbacks("unique"); callbacks.add(fn1);? callbacks.add(fn1);? callbacks.add(fn1);? callbacks.fire("foo"); 結果:?fn1?says?foo
function?Callbacks(options){ ????var?list?=?[], ????self, ????var?firingStart, ????memory; ???? ????function?_fire(data){ ????????memory?=?options?===?'memory'?&&?data; ????????firingIndex?=?firingStart?||?0; ????????firingStart?=?0; ????????firingLength?=?list.length; ????????for(;?list?&&?firingIndex?<?firingLength;??firingIndex++?){ ????????????list[firingIndex](data) ????????} ????} ???? ????self?=?{ ????????add:function(fn){ ????????????var?start?=?list.length; ????????????if(options?==?'unique'){ ????????????????if(-1?===?list.indexOf(fn)){ ????????????????????list.push(fn); ????????????????} ????????????}?else?{ ????????????????list.push(fn); ????????????} ????????????if(memory){ ????????????????firingStart?=?start;?//?獲取最后一個值 ????????????????_fire(memory); ????????????} ????????}, ????????fire:?function(args){ ????????????if(list){ ????????????????_fire(args); ????????????} ????????} ????} ????return?self;?? }
查看全部 -
function?fn1(val)?{ ????console.log("fn1?says?"?+?val); } var?cbs?=?$.Callbacks('once'); cbs.add(fn1); cbs.fire('foo'); cbs.fire('foo');
function?Callbacks(options)?{ ????list?=?[], ????self; ????self?=?{ ????????add:?function(fn)?{ ????????????list.push(fn) ????????}, ????????fire:?function(args)?{ ????????????if(list){ ????????????????list.forEach(function(fn){ ????????????????????fn(args); ????????????????}); ????????????????if(options==='once'){ ????????????????????list?=?undefined; ????????????????} ????????????} ????????} ????} ????return?self; }
查看全部 -
默認回調對象設計 function?fn1(val){ ????console.log("fn1?says:"+val); } function?fn2(val){ ????console.log("fn2?says:"+val); } var?cbs?=?$.Callbacks(); cbs.add(fn1); cbs.fire("foo"); console.log("............................"); cbs.add(fn2); cbs.fire("bar");
模擬代碼
function?Callbacks(){ ????var?list?=?[], ????self; ????self?=?{ ????????add:?function(fn){ ????????????list.push(fn) ????????}, ????????fire:?function(args){ ????????????list.forEach(function(fn){ ????????????????fn(args); ????????????}) ????????} ????} ????return?self; } function?fn1(val){ ????console.log("fn1?says:"+val); } function?fn2(val){ ????console.log("fn2?says:"+val); } var?cbs?=?Callbacks(); cbs.add(fn1); cbs.fire("foo"); cbs.add(fn2); cbs.fire("bar")
查看全部 -
function?f1(value){ ????alert(value); } function?f2(value){ ????alert("fn2?says:"?+?value); ????return?false; } var?callbacks?=?$.Callbacks(); callbacks.add(f1); callbacks.fire("foo!"); callbacks.add(f2); callbacks.fire("bar!");
查看全部 -
var?callbacks?=?$.Callbacks(); callbacks,add(function(){ ????alert(1); })? callbacks.add(function(){ ????alert(2); }); callbacks.fire();
查看全部 -
var?$$?=?ajQuery?=?function(selector)?{ ????retrun?new?ajQuery.fn.init(selector); } ajQuery.fn?=?ajQuery.prototype?=?{ ????naem:?'aaron', ????init:?function(selector)?{ ????????this.selector?=?selector; ????????return?this; ????}, ????constructor:?ajQuery } ajQuery.fn.init.prototype?=?ajQuery.fn;
查看全部
舉報