熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> Java核心技術 >> 正文

淺析jQuery框架與構造對象

2013-11-23 19:20:14  來源: Java核心技術 

  這是一些分析jQuery框架的文字

  針對jQuery 版本

  面向的讀者應具備以下要求

  非常熟悉HTML

  非常熟悉javascript語法知識

  熟悉javascript面向對象方面的知識

  熟練使用jQuery框架

  言歸正傳!

  jQuery對象的初始化是寫在匿名函數裡的

  就像這樣

  (function(){alert(jQuery框架分析)})()

  第一個括號是聲明了一個函數第二個括號是執行這個函數也就是說jQuery框架在頁面載入的時候已經做了一些事情(這個個匿名函數已經被執行了)做的這些事情使我們可以通過$(#yourId)或$(yourClass)等方式獲取頁面元素並把獲取到的元素包裝成jQuery對象

  匿名函數是怎麼實現這些功能的呢?

  首先框架定義了兩個核心對象

  jQuery = windowjQuery = window$ = function( selector context ) {}

  一個是jQuery

  一個是$

  這兩個對象都指向一個函數

  這個函數是我們使用$()或jQuery()方法時的入口這個方法返回一個jQueryfninit( selector context )的實例其實這個實例是一個jQuery對象

  jQuery對象是一個什麼樣的對象呢?

  jQuery對象其實是一個javascript的數組

  這個數組對象包含個方法和個屬性

  個屬性分別是

  jQuery     當前的jQuery框架版本號

  length     指示該數組對象的元素個數

  context    一般情況下都是指向HtmlDocument對象

  selector   傳遞進來的選擇器內容  如#yourId或yourClass等

  如果你通過$(#yourId)方法獲取jQuery對象並且你的頁面中只有一個id為yourId的元素那麼$(#yourId)[]就是HtmlElement元素與documentgetElementById(yourId)獲取的元素是一樣的

  jQuery對象是怎麼構造出來的呢?

  這個對象就是剛才我們提到的

  jQuery = windowjQuery = window$ = function( selector context ) {}

  框架不只為此對象定義了一個方法還定義了它的原型(prototype)

  jQueryjQueryfn = jQueryprototype = {//此處為json對象}

  原型的定義是通過json對象定義的

  如

  {

  init function( selector context ) {//方法體}

  jQuery //屬性

  size function() {//方法體}

  //……

  }

  前面提到的個方法個屬性有一部分在這個json對象中完成定義的 這個json對象中第一個方法就是init方法也就是入口方法中的jQueryfninit( selector context )此方法與一個正則表達式對象配合來構造jQuery對象

  這個正則表達式為

  quickExpr = /^[^<]*(<(|\s)+>)[^>]*$|^#([\w]+)$/

  下面我們說一下init方法的實現邏輯

  此方法有兩個參數

  一個是selector(選擇器)

  一個是context(上下文)

  selector就是我們用$(#yourId)或jQuery(yourClass)傳遞進來的變量

  這個參數不一定是字符串也可能是其他形式的變量

  等會兒我們就會介紹到

  context參數我們在使用jQuery的時候很少用到暫且不表

  注意這兩個參數都在返回的jQuery對象中體現出來了(以兩個同名的屬性展示)

  下面看一下這個方法體內部的實現邏輯

     //如果沒有選擇器或者選擇器為空的話就把document對象賦值給他
selector = selector || document;
//如果selector參數是dom元素直接返回jQuery對象
//也就是說你可以$(documentgetElementById(allen))把你的元素封裝成jQuery對象
if ( selectornodeType ) {
this[] = selector;
thislength = ;
ntext = selector;
return this;
}
//typeof 取對象的類型用三個等號效率較高 不需要類型轉換兩個等號默認有類型轉換
if ( typeof selector === string ) {
//這裡用到了我們前面提到的正則表達式quickExpr
//match其實是一個數組
//第個元素是與正則表達式相匹配的文本
//第個元素是與正則表達式的第個子表達式相匹配的文本(如果有的話)
//第個元素是第個子表達式相匹配的文本(如果有的話)
//第個元素是第個子表達式相匹配的文本(如果有的話)這裡就是元素的ID不包含#
var match = quickExprexec( selector );
//正則表達式匹配到了內容   並且 match[]不為空 或者 context為空
//match[]不為空的時候selector是HTML字符串也就是你可以用$(
xland
)把對象包裝成jQuery對象
//context為空的時候selector是頁面元素ID
if ( match && (match[] || !context) ) {
 //選擇器為html字符串  此情況暫且不表
if ( match[] ){
selector = jQueryclean( [ match[] ] context );}
//選擇器為ID
else {
//得到元素
var elem = documentgetElementById( match[] );
 //如果得到了這個元素但是元素的ID屬性不是match[]跳入分支分支裡面的東西做了什麼工作暫且不表
if ( elem && elemid != match[] ){
return jQuery()find( selector );}
//把得到的頁面元素封裝成jQuery對象
//如果elem為空就傳入一個空數組框架怎麼處理此空數組暫且不表
//如果不為空就跳入我們前面說的if ( selectornodeType )分支構造出jQuery對象來
var ret = jQuery( elem || [] );
 //設置jQuery對象的context屬性
ntext = document;
 //設置jQuery對象的selector屬性
retselector = selector;
 //返回這個對象給調用者
return ret;
}

  至此

  var obj = $(#yourId

  構造jQuery對象的初步工作就做完了


From:http://tw.wingwit.com/Article/program/Java/hx/201311/26677.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.