簡單模仿jQuery

今天開始學習jQuery,理解其實現模式和大體思想,然后自己簡單實現一些類jQuery功能,這樣能更好地學習使用它。直接看代碼,實現細節將以注釋形式講解。

window.jQuery = function (nodeOrSelector) {  // 添加全局函數,返回一個偽數組(hash)
    var nodes = {};
    if (typeof nodeOrSelector === 'string') {
     // 檢測傳入類型,如果是字符串則是一個css選擇器,遂使用querySelectorAll
        var temp = document.querySelectorAll(nodeOrSelector); // 返回偽數組
        for (let i = 0; i < temp.length; i++) { 
        // 遍歷偽數組并將其加入nodes,添加length屬性
            nodes[i] = temp[i];
            nodes.length = temp.length;
        }
    } else if (nodeOrSelector instanceof Node) {
      // 檢測是否是一個元素節點 ,同樣將其組織成偽數組形式
        nodes = {
            0: nodeOrSelector,
            length: 1
        }
    }
    // 為nodes添加方法,這樣在返回nodes后就可以直接使用nodes.xxx的形式調用方法
    nodes.addClass = function (c) {
        for (let i = 0; i < nodes.length; i++) {
            // 遍歷nodes,為其中的每個元素添加class
            nodes[i].classList.add(c);
        }
    }
    nodes.setText = function (text) {
            // 設置文本,改變元素的顯示文本,同樣使用遍歷的方法
        for (let i = 0; i < nodes.length; i++) {
            nodes[i].textContent = text;
        }
    }
    return nodes;
}
window.$ = jQuery; // 將jQuery改名為$,方便調用

以上是jQuery實現的大體形式,這只是一個極簡版,主要在于體會其設計思想,真正的jQuery實現過程自然是要復雜的多。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,025評論 25 708
  • 用兩張圖告訴你,為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料? 從這篇文章中你...
    hw1212閱讀 12,859評論 2 59
  • 媽媽終于在疼痛無數次,失眠很久,我給她放了點音樂之后睡著了。 一個小護士給拉上了窗簾,這個護士真好。 然后醫生進來...
    文凈閱讀 317評論 0 0
  • 2016年的五一,大學畢業九年的426宿舍成員從北京深圳福建廣東安徽高鐵飛機?的千里奔襲抵達南京,開啟了我們...
    王夕元閱讀 288評論 0 1