亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

對象的構建：

- 采用原型式的結構，使用構造函數，這樣的好處節省了內存空間，性能上得到了優化

-?但是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;