从jQuery 入口方式写jQuery工具类库
###1.jQuery 入口方式 在常用的jquery入口方式中估計大部分人都是直接用的是
$(function(){//code }) 復制代碼下面詳細說一下jquery的幾種入口方式: ####1.1 $ 符號+ready() 的方式 很多人可能會看到一下這種方式入口,是通過ready() 函數(shù)調(diào)用,至于原理會在下面講解。
$(document).ready(function(){//code }); 復制代碼####1.2 $ 符號 +簡寫 的方式 這種應該最多人用的,因為寫起來也是最方便的
$(function(){//code }) 復制代碼####1.3 jQuery +ready() 的方式 這是jquery完整的寫法,也是最初的形態(tài)。
jQuery(document).ready(function(){console.log('jQuery ready 入口方式');}) 復制代碼####1.4 jQuery + 簡寫入口 這種方式也是跟第二種方式類似
jQuery(function(){console.log('I am jquery ');}) 復制代碼2. 模擬 jQuery 的入口函數(shù)
####2.1 認清楚 $ 符號 其實 $ 是 jQuery 的一個代替品,也就是可以解析為什么上面四種入口方法類似的原因。 嘗試:
var $ = 'I am $'; console.log($); 復制代碼從控制臺打印出來的是
I am $ 復制代碼再次測試,引入jQuery 后打印 $ 對象和 jQuery 對象
<script src="jquery-1.11.1.min.js"></script> <script>console.log($);console.log(jQuery);console.log($===jQuery) </script> 復制代碼打印結(jié)果如下:
結(jié)論:從上面可以得知 $ 和 jQuery 是同一個對象,也可以得知它是一個方法(或者對象),通過傳遞(a,b)兩個參數(shù),返回了一個新的對象,當然,在這里面也會根據(jù)你是否已經(jīng)創(chuàng)建過該對象。
再次測試,看創(chuàng)建兩個jQuery 對象情況會怎么樣, $ 和 jQuery.
var t1 = $;var t2 = jQuery;console.log(t1===t2); 復制代碼思考另外一種情況:
var t1 =new $; var t2 = new jQuery; console.log(t1===t2); 復制代碼這樣子的情況請問相等嘛? 答案是 false
解析:
通過new 是開辟了一個新的空間,去存儲這個對象。具體看一下
console.log(t1); console.log(t2); 復制代碼再看,如果是通過 $ 或 jQuery 直接打印出來的對象可以看得出是 一個方法里面通過傳參數(shù),而通過 new $ 或 new jQuery 的話直接是返回的對象,下面是兩個的對比。
繼續(xù)探究:
返回的屬性有個 proto 對象 打印一下:
var t2 = new jQuery; console.log(t2); console.log(t2.__proto__); 復制代碼繼續(xù)推測:
//下面這句會不會是 打印jQuery 的版本號呢? console.log(t2.__proto__.jquery); 復制代碼下面這句通過
jQuery.fn = jQuery.prototype ={//這里暴露一些屬性接口信息jquery: version,// 這里把上面的版本號version 通過jquery這個接口獲得 }復制代碼詳情圖:
貌似跑題了。回到最初的問題 ####2.1 寫一個kQuery 庫 回顧js 的調(diào)用方式
var kQuery= function (a){//code } kQuery(a); 復制代碼測試下你的 code 塊是否被執(zhí)行了。 再次模擬jquery,它是返回一個 對象。 那我們的kQuery 應該也有個對象返回,
var kQuery= function (a){//返回對象return obj; } 復制代碼上面代碼明顯是錯誤的,因為 它不知道 obj 是個什么東東,所以應該先定義 obj 為一個對象。
var kQuery= function (a){var obj ={}//返回對象return obj; } 復制代碼再次看 第一大點,jquery的如后函數(shù)是不是都是通過ready() 來執(zhí)行的,那是不是這個對象應該擁有ready 的這個方法。
var kQuery= function (a){var obj ={ready:function(){console.log('This is ready function');}}//返回對象return obj; } 復制代碼轉(zhuǎn)載于:https://juejin.im/post/5a3217c8f265da432652da11
《新程序員》:云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作,文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的从jQuery 入口方式写jQuery工具类库的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: swift SDWebImage 与 U
- 下一篇: [MetalKit]34-Working