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

為了賬號安全,請及時綁定郵箱和手機立即綁定
  • 對象的構建:

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

    -?但是ajQuery類這個結構與目標jQuery的結構的還是有很大不一致:沒有采用new操作符;return返回的是一個通過new出來的的對象。

    查看全部
    0 采集 收起 來源:對象的構建

    2022-08-07

  • 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、優雅的鏈式、強大的查詢與便捷的操作

    查看全部
    0 采集 收起 來源:jQuery設計理念

    2022-08-06

  • 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;??
    }
    查看全部
    0 采集 收起 來源:unique的設計

    2022-07-25

  • 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;
    }
    查看全部
    0 采集 收起 來源:once的設計

    2022-07-22

  • 默認回調對象設計
    
    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!");
    查看全部
    0 采集 收起 來源:jQuery回調對象

    2022-07-22

  • 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;
    查看全部

舉報

0/150
提交
取消
課程須知
源碼的閱讀不是一蹴而就的,需要大家有一定的功底,比如jQuery的基礎運用以及API的熟悉度,除此之外要有牢固的javascript、DOM、CSS的基礎功底,甚至還需要理解常見的設計模式、數據結構等等。當然大家也不要被這些給嚇住了,理解,總是需要一種慢慢的學習過程。
老師告訴你能學到什么?
通過本課程的學習,您可以由淺入深地剖析jQuery庫的設計與實現。 其中我們圍繞的重心: 1、設計理念 2、結構組織 3、接口設計 4、模式運用 5、場景套用

微信掃碼,參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

友情提示:

您好,此課程屬于遷移課程,您已購買該課程,無需重復購買,感謝您對慕課網的支持!