首頁 > 開發者 > 網站開發

Java程式員的JavaScript學習筆記（7——jQuery基本機制），學習筆記jquery

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

Java程式員的JavaScript學習筆記（7——jQuery基本機制），學習筆記jquery
計劃按如下順序完成這篇筆記：

  1. 理念。
  2. 屬性複製和繼承。
  3. this/call/apply。
  4. 閉包/getter/setter。
  5. prototype。
  6. 物件導向類比。
  7. jQuery基本機制。
  8. jQuery選取器。
  9. jQuery工具方法。
  10. jQuery-在“類”層面擴充。
  11. jQuery-在“對象”層面擴充。
  12. jQuery-延伸選取器。
  13. jQuery UI。
  14. 擴充jQuery UI。
這是筆記的第7篇，聊聊jQuery基本機制，學習的同時，我們試圖實現一個縮減版本的jQuery，我們叫他jQ。

我們認為讀者在閱讀本篇之前，對jQuery的使用是熟悉的。

第7篇到第9篇是一個單元，在這個單元中，我們將深入jQuery內部，充分學習JavaScript的最佳設計、編程實踐。

首先，預熱一下文法。
1、預熱文法看下面代碼：
//程式碼片段1 
(function(){    console.log('this is a function be called immediately.')})();
第一對小括弧中是一條語句，返回一個函數，然後通過第二對小括弧對這個函數直接進行調用。
運行輸出：this is a function be called immediately.

可以傳參數給這個參數，在JavaScript中，$和_都是合法的變數名。 
//程式碼片段2(function(_){    console.log(_);  //輸出：window，視瀏覽器輸出的具體內容不同})(this);
在全域上下文中this指向window。

可以通過如下方法獲得返回值。 
//程式碼片段3var f = (function(_){    function func(){        console.log('i am invoked by ' + this , 'arguments:' + _ );// output : i am invoked by [object Window] arguments:param value    }    return func;})('param value');f();


也可以將需要返回的數值或方法直接附加為window的屬性，達到“返回”的目的。 
//程式碼片段4(function(){    function func($$){        console.log('i am invoked by ' + this );    }    window.func = func; // 相當於直接定義了全域函數func    window.$$ = new func(); //相當於定義了全域變數 $$ ，在JavaScript中，$$ 是合法的變數名。})();func();console.log($$.toString());// output : [object Object]

2、預期功能我們將實現一個js代碼架構，jQ，預期實現如下功能：
2.1、通過jQ('#id')可以通過id取到dom對象。
2.2、對jQ對象（即通過jQ方法返回的對象），可以使用html()方法擷取其內容或者設定其內容，文法如下：
jQ('#id').html();//返回其內容
jQ('#id').html('new content');//設定其內容
2.3、可以用$$代替jQ，文法如下：
$$('#id').html();

3、實現3.1、基於前面的文法基礎，我們視圖實現2.1提出的功能。

程式碼片段5

<!DOCTYPE html><html><head>    <title>jQ</title>    <meta charset="utf-8">    <script type="text/javascript" language="javascript">        (function(){            var jQ = function(id){                if(!id){                    return {}; // return empty object                }                if(id[0]=='#'){                    id = id.substr(1);//remove the first letter '#'                }                var domEle = document.getElementById(id);                if(!domEle){                    return {};                }                return domEle;            }            window.jQ = jQ;        })();        console.log(jQ('#divTest'));    </script></head><body>    <div id="divTest">blabla</div></body></html>

擷取到dom對象後直接返回了。這種做法不足取，需要封裝一下，最好以function object（function是js中的一等公民，功能最強）的形式返回。
而且希望返回值是jQ“類”的執行個體。 
//程式碼片段6 (function(){    var jQ = function(id){        var ret = new jQ();        ret.innerDom = 'blabla';        return ret;    }    jQ.prototype = {        innerDom : null    }    window.jQ = jQ;})();console.log(jQ('#divTest'));

Uncaught RangeError: Maximum call stack size exceeded ，死迴圈了。
直接new不可用用的話，那可以用Factory 方法。 
//程式碼片段7(function(){    var jQ = function(id){        var ret = jQ.prototype.getInstance(id);        return ret;    }    jQ.prototype = {        innerDom : null,        getInstance :function(id){            //todo : init innerDom by id            return this;     // 調用者，即jQ        }    }    window.jQ = jQ;})();console.log(jQ('#divTest')===jQ('#divTest1')); // output :  true

上面的最後一行代碼，意圖構建兩個不同的對象，結果返回的對象相同，這是錯誤的。
改正後的代碼如下所示。 
//程式碼片段8(function(){    var jQ = function(id){        var ret = new jQ.prototype.getInstance(id); // 增加new關鍵字        return ret;    }    jQ.prototype = {        innerDom : null,        getInstance :function(id){            //todo : init innerDom by id            return this;     // 調用者，即jQ        }    }    window.jQ = jQ;})();console.log(jQ('#divTest')===jQ('#divTest1')); // output :  false

根據new關鍵字的語義：
var ret = new jQ.prototype.getInstance(id);
等同於
var ret ={};
jQ.prototype.getInstance.apply(ret);//即通過ret調用getInstance方法，getInstance方法中的this綁定為ret
ret.__proto__ = jQ.prototype.getInstance.prototype;//指定ret的原型為getInstance的原型，這裡會出問題，因為getInstance的原型是Object（幾乎是空）。

為了彌補new關鍵字的缺憾，修正代碼如下： 
//程式碼片段9(function(){    var jQ = function(id){        var ret = new jQ.prototype.getInstance(id);        return ret;    }    jQ.prototype = {        innerDom : null,        getInstance :function(id){            //todo : umimpl init innerDom by id            this.innerDom = 'dom by '+id;            return this; //this調用者，即新建立的對象        },        html:function(){            //todo : impl the method            return this.innerDom;//this調用者，即新建立的對象        }    }    jQ.prototype.getInstance.prototype = jQ.prototype;//新增加代碼，由於是傳引用，不用擔心循環參考的問題    window.jQ = jQ;})();console.log(jQ('#divTest').html()); //output : dom by #divTestconsole.log(jQ('#divTest2').html()); //output : dom by #divTest2
3.2、現在增加2.2描述的功能：html方法 
//程式碼片段10<!DOCTYPE html><html><head>    <title>jQ</title>    <meta charset="utf-8"></head><body>    <div id="divTest">blabla</div>    <script type="text/javascript" language="javascript">        (function(){            var jQ = function(id){                var ret = new jQ.prototype.getInstance(id);                return ret;            }            jQ.prototype = {                innerDom : null,                getInstance :function(id){                    if(id && id[0]=='#'){                        id = id.substr(1);//remove the first letter '#'                    }                    if(id){                        var elm = window.document.getElementById(id);                        this.innerDom = elm;                    }                    return this;                },                html:function(newhtml){                    if(arguments && arguments.length>0){                        if (this.innerDom && this.innerDom.innerHTML){                            this.innerDom.innerHTML = newhtml;                        }                    }else{                        return this.innerDom && this.innerDom.innerHTML;                    }                }            }            jQ.prototype.getInstance.prototype = jQ.prototype;            window.jQ = jQ;        })();        console.log(jQ('#divTest',window).html());  //output : blabla        jQ('#divTest',window).html('BRAND NEW');    //頁面內容隨之改變        console.log(jQ('#divTest',window).html());  //output : BRAND NEW    </script></body></html>
3.3、通過$$引用2.3描述的功能更簡單，只需在window.jQ = jQ;後面加一句：
window.$$ = jQ;
調用的語句修改為：
console.log($$('#divTest',window).html());  //output : blabla
$$('#divTest',window).html('BRAND NEW');    //頁面內容隨之改變
console.log($$('#divTest',window).html());  //output : BRAND NEW

功德圓滿！



現在作為一個java程式員，在項目開發中對於jQuery這個javascript架構會用到什方面的知識

jquery的話主要是操作前台的，如果你只是做背景話 通道的可能不會太多：
我只是說我所用到的啊
1：前台與後台進行無重新整理的操作從而達到資料的互動，當然也包過無重新整理上傳
2：如果你用jquert easyUI的話 可能用到json的就比較多了，無重新整理表格，無重新整理書，無重新整理下拉框，前台的所有空間都可以easyUI很簡單的就實現無重新整理，
3：提交表動的時候一些空間值的驗證了，諸如這些之類的，

如果說這些你們分工很明確的話 你這估計都不用謝，你只用後台返回json就行了，前台肯本就不用管

如果還有什麼不明白的話 請追問
 
java程式員javascript要掌握到什水平？

其實那些很炫效果網上都有原始碼，他們用的js架構，如jquery,和ajax架構，如dojo,extjs,dwr等 ，作為程式員只要會寫常用的javascript，如表單的驗證，樹形菜單，捲簾菜單等。和對常用的對象常用的方法必須熟悉，如document,widow,form.我在公司開發，花在前台的時間比背景時間多的多。程式員還要懂css,
 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More