JavaScript框架學習筆記（一）

Shonim 發布于2019-08-19 18:10 / 2879人閱讀

摘要：基本的學習思路是跟著框架設計這本書，甚至可以說是這本書的讀書筆記。也參考很多網上解讀的博客和學習資料。當然，最重要的資料還是框架的源代碼。后來由于開發者反對，新興的框架都在命名空間上構建。

JavaScript框架學習筆記（一） 我為什么要學習框架

更深入的理解工具，以后用起來更順手而且也能做一定的工具取舍，學習理解新工具也就更快，

對提升js水平也很有幫助，框架有很多解決“坑”的經典思路，學習這些對提升開發能力很有幫助。

基本的學習思路是跟著《JavaScript框架設計》這本書，甚至可以說是這本書的讀書筆記。也參考很多網上解讀jquery的博客和學習資料。當然，最重要的資料還是框架的源代碼。

基本學習的框架就是jQuery，也會看看其他庫的實現

我不是大神，很多知識估計也沒有理解正確，歡迎指出，僅供參考。

1 種子模塊 1.1 解決命名空間問題

早期的一些prototype.js庫并沒有命名空間，它的意義是滲透到JavaScript，DOM中去，希望對原生對象的原型進行擴展。后來由于開發者反對，新興的框架都在命名空間上構建。
一般的寫法都是使用IIFE解決,一般如下兩種寫法：

(function foo(){...})()
(function(){}(..))

兩種寫法功能上是一致的.
IIFE可以把他們當函數調用比傳遞參數。

(function IIFE(global){
    //code
})(window)

一般都是將window傳遞進去，但現在很多js的非游覽器應用領域沒有window，所以jquery一些處理辦法是又接受一個factory參數：

For CommonJS and CommonJS-like environments where a proper window
   is present, execute the factory and get jQuery.
For environments that do not have a window with a document(such as Node.js), expose a factory as module.exports.
This accentuates the need for the creation of a real window.e.g. var jQuery = require("jquery")(window);

很多前端框架都想要$這個命名空間，jQuery一開始很弱小，但又想要跟多人使用，因此實現了一種多庫并存的機制。后成為很多小庫的標配，實現很簡單：

var
    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery,

    // Map over the $ in case of overwrite
    _$ = window.$;

jQuery.noConflict = function( deep ) {
    if ( window.$ === jQuery ) {
        window.$ = _$;
    }

    if ( deep && window.jQuery === jQuery ) {
        window.jQuery = _jQuery;
    }

    return jQuery;
};

其實就是先把可能存在同名變量保存起來，再放回去。當用戶執行

jQuery.noConflict();

就將$的控制權交出去，以后執行$()的時候就是其他庫了，如果將deep變量傳入true，則將jQuery的控制權也交出去了。

?1.2 對象擴展

很多庫在擴展方法里還需判斷是否覆蓋和合并問題，但基本實現對庫的擴展比較簡單，就是添加一個對象罷了。

function extend(destination,source){
    for(var destination in source){
        destination[property] = source[property];
    }
    return destination;
}

1.3 數組化

這個解決的問題是講很多像document.getElementByTagName()方法返回的HTMLCollection或者NodeList這樣的類數組轉化為數組。
為什么做這樣轉化，因為數組有很多便利的操作。
各個庫的實現原理核心也就是調用Array.prototype.slice.call(arguments);這個方法。

1.4 類型的判定

js的經典問題：isXXX系列。主要是js的typeof這些自帶的檢測方法不靠譜.這類方法在框架實現來說很重要，但說實話自己沒怎么仔細看，因為要考慮各個游覽器的兼容，感覺都是帶有很技巧方面的知識，暫且翻過。

GPU云服務器云服務器 javascript學習筆記學習筆記一 javascript框架學習學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79277.html

前端學習路線

摘要：具體來說，包管理器就是可以通過命令行，幫助你把外部庫和插件放到你的項目里面并在之后進行版本升級，這樣就不用手工復制和更新庫。現在有的包管理器主要是和。一、基礎 1、學習HTML基礎 HTML給你的網頁賦予了結構。它就像是人的骨架那樣讓你保持站立。首先你需要去學習語法以及它必須提供的一切。你的學習應該聚焦在下面這些東西上：學習HTML基礎，了解如何編寫語義HTML 理解如何把網頁分...

FullStackDeveloper 2019-08-22 16:48 評論0 收藏0
前端學習路線

摘要：具體來說，包管理器就是可以通過命令行，幫助你把外部庫和插件放到你的項目里面并在之后進行版本升級，這樣就不用手工復制和更新庫。現在有的包管理器主要是和。一、基礎 1、學習HTML基礎 HTML給你的網頁賦予了結構。它就像是人的骨架那樣讓你保持站立。首先你需要去學習語法以及它必須提供的一切。你的學習應該聚焦在下面這些東西上：學習HTML基礎，了解如何編寫語義HTML 理解如何把網頁分...

20171112 2019-08-29 15:12 評論0 收藏0
Vue2.x 的筆記：第一次的感受 Vue 開篇

摘要：在互聯網高速發現的今天，可以說每天都在變化著一不留神你就會錯過一個億，所以你不得不時刻的保持著高度的專注。如今為代表的三個框架已然成為了主流成為統治者，呈現了三分天下的局面。有人說如今是框架的時代，只要會一個框架就能開始干活了。在互聯網高速發現的今天，可以說每天都在變化著一不留神你就會錯過一個億，所以你不得不時刻的保持著高度的專注。互聯網的信息是多元的，大量的，在海量的信息中很容易...

Lowky 2019-08-26 12:19 評論0 收藏0
26天學通前端開發（配資料）

摘要：網上有很多前端的學習路徑文章，大多是知識點羅列為主或是資料的匯總，數據量讓新人望而卻步。天了解一個前端框架。也可以關注微信公眾號曉舟報告，發送獲取資料，就能收到下載密碼，網盤地址在最下方，獲取教程和案例的資料。前言好的學習方法可以事半功倍，好的學習路徑可以指明前進方向。這篇文章不僅要寫學習路徑，還要寫學習方法，還要發資料，干貨滿滿，準備接招。網上有很多前端的學習路徑文章，大多是知...

blair 2019-08-21 16:59 評論0 收藏0