jquery源碼解析
⑴ 完全理解jQuery源代碼,在前端行業算什麼水平
依讀了2周jQuery源碼的人感覺來說,完全理解jQuery,就拿jQuery 1.11這個版本10337行代碼來說,水平已經很不錯了。謙虛點說,已經入門。驕傲點,國內領先水平。但其碼我感覺是js架構之路起行的第一步,完全理解源碼,說明有獨立構建或組織大型web前端框架的能力和基礎。然後看看完全理解jQuery是一個怎麼樣的狀態。
看下面幾個鏈接就明白了:
RubyLouvre/avalon · GitHub
artDialog
aui/artDialog · GitHub(後來的新版代碼有所改變)
沒錯,這兩個里邊,就是在繼承jquery的基礎上做了自己的創新嘗試。
然後在看下面這位:
[原創] jQuery1.6.1源碼分析系列(停止更新)
是唯一出過jquery源碼分析書的一位:
《jQuery技術內幕:深入解析jQuery架構設計與實現原理》(高雲)【摘要 書評 試讀】
然後在看這位:
jQuery 2.0.3 源碼分析系列
是目前一直在更新的一位,通俗有深度且版本比較新。
在說一下我2周閱讀jquery源碼的心得,初看源碼寫的惡心,再看寫的不錯,細看寫的真是精妙。然後今天在看ext 4.2的源碼,真是流暢易讀。基本來說,看懂jQuery源碼,以後的源碼學習之路可以說,平坦。
然後說是不是高手,高手只是一個自我定位的心理暗示,是一種人格魅力的體現,是業務與技術的完美結合。個人感覺只能無限的接近,不能在有限的生命里邊到達。我們在通往目的地過程中享受一路的風景,這才是生命的意義。
然後在說前端,前端的核心是js,外圍打醬油的技術太多,不一一列舉。
css就像一瓶酒,得品。
html,css總共就那些標簽跟選擇器屬性什麼的,但是要寫一個有擴展性,健壯性或維護性的頁面不容易。現在寫頁面基本條件反射,不是如何快速的完成,而是思考如果有前端界面需求修改,怎麼在修改代碼最少的情況下完成整體需求任務。
js就像一把劍,得磨。
js剛開始只是為了較驗,隨便技術社會的發展,承擔的角色越來越重,剛開始玩玩jQuery感覺已經會js了,其實只是冰山一角。隨著對js的了解越來越多,他即變態又可愛,即好玩又難控,即有很多兼容問題,但解決兼容是我們基本生存之道。
人生就是一場夢,得作。
技術只是生活的一部分,曾經雄心鬥志,如今低頭寫碼。改變能改變的,接受不能改變的。人生有限,兄爭朝夕啊。
最後說,什麼時候能閱讀jQuery源碼,我感覺其碼是純js編碼一年以上,js基礎知識沒有盲點。閱讀源碼,確實能學到很多東西。不只是技術,而是一種生活的態度。一種把一件事情做到極致的態度
⑵ jquery源碼中的var document=window.document是什麼意思
jquery本身就是面向對象的阿,window.document實際上被jquery包裝成一個對象了。
可以調用很多方法。
實際上js中才是對dom元素的引用,jquery是作為對象的引用。
⑶ jQuery 是如何判斷HTML頁面載入完畢的它的原理是什麼
jquery是一個輕量級的JS框架,這點相信大部分人都聽過,而jquery之所以有這樣一個稱呼,就是因為它悄悄披了一件外衣,將自己給隱藏了起來。
//以下截取自jquery源碼片段(function( window, undefined ) { /* 源碼內容 */})( window );
上面這一小段代碼來自於1.9.0當中jquery的源碼,它是一個無污染的JS插件的標准寫法,專業名詞叫閉包。可以把它簡單的看做是一個函數,與普通函數不同的是,這個函數沒有名字,而且會立即執行,就像下面這樣,會直接彈出字元串。
(function( window, undefined ) {
alert("Hello World!");
})( window );
可以看出來這樣寫的直接效果,就相當於我們直接彈出一個字元串。但是不同的是,我們將裡面的變數變成了局域變數,這不僅可以提高運行速度,更重要的是我們在引用jquery的JS文件時,不會因為jquery當中的變數太多,而與其它的JS框架的變數命名產生沖突。對於這一點,我們拿以下這一小段代碼來說明。
var temp = "Hello World!";
(function( window, undefined ) { var temp = "ByeBye World!";
})( window );
alert(temp);
這段代碼的運行結果是Hello而不是ByeBye,也就是說閉包中的變數聲明沒有污染到外面的全局變數,倘若我們去掉閉包,則最終的結果會是ByeBye,就像下面這樣。
var temp = "Hello World!";// (function( window, undefined ) {
var temp = "ByeBye World!";// })( window );
alert(temp);
由此就可以看出來,jquery的外衣就是這一層閉包,它是很重要的一個內容,是編寫JS框架必須知道的知識,它可以幫助我們隱藏我們的臨時變數,降低污染。
⑷ jquery解析json怎麼解析
json數據是我們常用的一種小型的數據實時交換的一個東西,他可以利用jquery或js進行解析,下面我來介紹jquery解析json字元串方法。
一、jQuery解析Json數據格式:
使用這種方法,你必須在Ajax請求中設置參數:
1 dataType: "json"
獲取通過回調函數返回的數據並解析得到我們想要的值,看源碼:
復制代碼 代碼如下:
jQuery.ajax({
url: full_url,
dataType: "json",
success: function(results) {
alert(result.name);
} });
通常情況下,你可以從後台返回JSON數據,前台就交給jQuery啦,哈哈!!
jquery非同步請求將type(一般為這個配置屬性)設為「json」,或者利用$.getJSON()方法獲得伺服器返回,那麼就不
需要eval()方法了,因為這時候得到的結果已經是json對象了,只需直接調用該對象即可,這里以$.getJSON方法為
例說
例1
代碼如下:
復制代碼 代碼如下:
var data="
{
root:
[
{name:'1',value:'0'},
{name:'6101',value:'北京市'},
{name:'6102',value:'天津市'},
{name:'6103',value:'上海市'},
{name:'6104',value:'重慶市'},
{name:'6105',value:'渭南市'},
{name:'6106',value:'延安市'},
{name:'6107',value:'漢中市'},
{name:'6108',value:'榆林市'},
{name:'6109',value:'安康市'},
{name:'6110',value:'商洛市'}
]
}";
jquery
復制代碼 代碼如下:
$.getJSON("http://sanic.cnblogs.com/",{param:"sanic"},function(data){
//此處返回的data已經是json對象
//以下其他操作同第一種情況
$.each(data.root,function(idx,item){
if(idx==0){
return true;//同countinue,返回false同break
}
alert("name:"+item.name+",value:"+item.value);
});
});
二、jQuery解析Json對象:
jQuery提供了另一種方法「parseJSON」,這需要一個標準的JSON字元串,並返回生成的JavaScript對象。讓我們來看
看語法:
data = $.parseJSON(string);
看看它是如何運用的到實際開發中的:
復制代碼 代碼如下:
jQuery.ajax({
url: dataURL, success: function(results) {
var parsedJson = jQuery.parseJSON(results);
alert(parsedJson.name);
}
});
⑸ 如何查看網頁jquery源代碼
右擊頁面,點擊「查看元素」或「查看源碼」就可以查案網頁的html
一般<script>juqery代碼</script>標簽包裹的就是寫在頁面上的jQuery代碼
另外還有寫在jQuery文件在頁面通過<script src="jquery文件地址"></script>這里的地址一般是相對地址,找到相應的地址打開文件就可以了
⑹ jQuery 源代碼看不懂,怎麼辦。。有沒有解釋jQuery 源代碼的書籍
建議去找原碼看,一般網上下載下來都是經過壓縮的。
⑺ jQuery源碼分析之實例find和filter方法的區別七問
filter()過濾DOM元素包裝集,是指操作當前元素集,刪除不匹配的元素,得到一個新的集合
$('div').filter('.div1');//選擇div標簽中class屬性為div1的div元素
find()在當前選中元素的上下文中找到符合條件的後代,返回的是子元素
$('div').find('em');//選擇div標簽中的em標簽的元素
filter()是對選中的元素集合操作,得到這些元素中符合條件的元素,而find()是得到選中元素 中符合條件的後代子元素。
⑻ jQuery源碼中的「new jQueryfninit」什麼意思
就是初始化的。
從return
new
jQuery.fn.init(
selector,
context,
rootjQuery
)中可以看出
參數selector和context是來自我們在調用jQuery方法時傳過來的.
⑼ jQuery源碼中的「new jQuery.fn.init」什麼意思
就是初始化的。
從return new jQuery.fn.init( selector, context, rootjQuery )中可以看出
參數selector和context是來自我們在調用jQuery方法時傳過來的.