中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

到目前為止我們已經(jīng)創(chuàng)建一個(gè)可以工作的框架雛形，為了使程序可以更方便地被調(diào)用，比如jQuery可以使用$符號(hào)來(lái)簡(jiǎn)寫，我們也弄一個(gè)，在此之前我們先來(lái)回顧兩個(gè)東西：

1. 我們?cè)谀_本中可以這樣定義變量：

var foo = 'someThing';
bar = 'otherthing';

這樣兩種寫法都是合法的，但是意義完全不同, 第一個(gè)語(yǔ)句創(chuàng)建了一個(gè)新的變量，而第二個(gè)是定義了window對(duì)象的一個(gè)屬性，相當(dāng)于window.bar = 'otherthing';, 因此我們想使我們的Shaka具有這樣的調(diào)用方式能力: $.someMethod()；就需要將Shaka設(shè)置為window的一個(gè)屬性, 于是我們的Shaka構(gòu)造函數(shù)就得寫成這樣：

var Shaka = window.Shaka = window.$ = function(selector) { return new Shaka.fn.init(selector); };

2. javascript的匿名函數(shù).

創(chuàng)建并執(zhí)行一個(gè)匿名函數(shù)的基本形式: (function(){ alert('Hello World!'); })(); 為什么要用到匿名函數(shù)呢，因?yàn)槲覀儾幌氚裇haka的內(nèi)部實(shí)現(xiàn)暴露出來(lái)，這樣容易與其它代碼沖突，只提供一個(gè)單一的入口，我們可以這樣測(cè)試一下：

運(yùn)行代碼框
<script type="text/javascript"> (function(){ function privateFunction(){ alert('You can not see me, haha'); }; })(); function publicMethod() {alert('I am public');}; alert('匿名函數(shù)內(nèi)部的函數(shù)是不可訪問(wèn)的, privateMethod 目前是: ' + typeof privateMethod); alert('全局函數(shù)可訪, publicMethod 目前是: ' + typeof publicMethod); </script>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]

然后，還有一個(gè)問(wèn)題需要解決，俺們的框架做出來(lái)了但是還很簡(jiǎn)陋，在這之前我們需要讓它與其它的框架協(xié)同工作，因此帶來(lái)一個(gè)問(wèn)題, 如果我們都使用$作為簡(jiǎn)寫形式就會(huì)沖突了, 象jQuery一樣，我們需要提供一個(gè)noConfilit的方法“出讓”$的使用權(quán)。在我們的程序最開(kāi)始處加入下面的代碼：

var _$ = window.$;

意思是將此前定義的$對(duì)象引用放到 _$ 中, 然后我們?cè)俳oShaka擴(kuò)展一個(gè)方法出來(lái), 如果其它開(kāi)發(fā)者需要自行擴(kuò)展的話也可以使用這個(gè)方式(jQuery的extend方法提供了更為強(qiáng)大的功能，請(qǐng)大家自行研究)：

(function($){ //extend method definition. })(Shaka);

意思是將Shaka作為這個(gè)匿名函數(shù)的參數(shù)來(lái)調(diào)用這個(gè)方法。
前面我們講過(guò) Shaka.fn 就是 Shaka.prototype 的別名，因此我們要在Shaka.prototype 里面添加新的方法就可以寫成這樣：

(function($){
       $.fn.noConflict = function(){
              window.$ = _$;//把$還給在開(kāi)始處取得的引用.
       };
})(Shaka);

現(xiàn)在我們來(lái)看一個(gè)完整的：

運(yùn)行代碼框
<form method="post" action="" name="myform"> <h1> 我?guī)讱q了?</h1> <br /> <input id="myInput" type="text" value="Hello world!" size="50" /> <br /><br /> <input id="otherInput" type="text" size="50" /> </form> <script type="text/javascript"> //我們?cè)谶@里模擬一下在這之前如果加載了其它框架的情形, 這個(gè)時(shí)候window.$不為空. window.$ = { whoAmI: function(){ alert('This function result is from other js lib.');} }; (function(){ // 創(chuàng)建最外層匿名函數(shù). window._$ = window.$;//將別的框架定義的$暫存. //給Shaka加上$ 的別名. var Shaka = window.Shaka = window.$ = function(selector) { return new Shaka.fn.init(selector); }; Shaka.fn = Shaka.prototype = { init: function(selector) { if(selector) this.selector = selector; return this; }, val: function(newValue) { //start val function body if(!(this.selector && this.selector.indexOf('#') == 0 && this.selector.length != 1)) return; //簡(jiǎn)單地判斷傳入值非法, 最好使用正則 var id = this.selector.substring(1); var obj = document.getElementById(id); if(obj)//如果對(duì)象存在 { if(newValue == undefined) return obj.value;//獲取目標(biāo)對(duì)象的值. obj.value = newValue;// 將目標(biāo)對(duì)象的value屬性設(shè)置為newValue. return this; //為了使方法可以連續(xù)調(diào)用, 返回當(dāng)前實(shí)例。 } //end val function body } }; Shaka.fn.init.prototype = Shaka.fn; })(); //擴(kuò)展新的方法. (function($){ //alert(obj.fn); $.noConflict = function(){ window.$ = window._$;//把$還給在開(kāi)始處取得的引用. }; })(Shaka); //如果沒(méi)有引入其它的框架，可以這么寫 //alert('object old value is '+$('#myInput').val()); //alert($('#myInput').val('I am 3 years now!').val()); //強(qiáng)制使用完整名稱. Shaka.noConflict(); alert('object old value is '+Shaka('#myInput').val()); alert(Shaka('#myInput').val('I am 5 years old now!').val()); //Shaka('#otherInput').val('這里的值是使用Shaka(\'#otherInput\').val()方法來(lái)寫入的哦'); //或者可以這樣寫也行，仍然使用$, 把Shaka作為匿名函數(shù)的參數(shù)$傳進(jìn)去。 (function($){ //又可以用$了, 哈哈 $('#otherInput').val('這里的值是使用Shaka(\'#otherInput\').val()方法來(lái)寫入的哦'); })(Shaka); //現(xiàn)在仍然可以使用$調(diào)用其它框架的方法. $.whoAmI(); </script>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]

現(xiàn)在好象不錯(cuò)了，我們的Shaka baby已經(jīng)5歲了;) , 當(dāng)然這還只是個(gè)簡(jiǎn)陋的東西，要實(shí)現(xiàn)健壯而強(qiáng)大的功能還需要付出很多努力, 希望諸位爹媽把自己的孩子培養(yǎng)成人才, good luck!

經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2902038-1-1.html

本文鏈接：http://www.95time.cn/tech/web/2010/7326.asp　

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁(yè) 從零開(kāi)始寫jQuery框架 [2] 下一頁(yè)

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。