主頁 > 企業開發 > Backbone前端框架解讀

Backbone前端框架解讀

2023-02-07 14:56:58 企業開發

作者: 京東零售 陳震

一、 什么是Backbone

在前端的發展道路中,前端框架元老之一jQuery對繁瑣的DOM操作進行了封裝,提供了鏈式呼叫、各類選擇器,屏蔽了不同瀏覽器寫法的差異性,但是前端開發程序中依然存在作用域污染、代碼復用度低、冗余度高、資料和事件系結煩瑣等痛點,

5年后,Backbone橫空出世,通過與Underscore、Require、Handlebar的整合,提供了一個輕量和友好的前端開發解決方案,其諸多設計思想對于后續的現代化前端框架發展起到了舉足輕重的作用,堪稱現代前端框架的基石,

通過對Backbone前端框架的學習,讓我們領略其獨特的設計思想,

二、 核心架構

按照MVC框架的定義,MVC是用來將應用程式分為三個主要邏輯組件的架構模式:模型,視圖和控制器,這些組件被用來處理一個面向應用的特定開發, MVC是最常用的行業標準的Web開發框架,以創建可擴展的專案之一, Backbone.js為復雜WEB應用程式提供模型(models)、集合(collections)、視圖(views)的結構,

? 其中模型用于系結鍵值資料,并通過RESRful JSON介面連接到應用程式;

? 視圖用于UI界面渲染,可以宣告自定義事件,通過監聽模型和集合的變化執行相應的回呼(如執行渲染),

如圖所示,當用戶與視圖層產生互動時,控制層監聽變化,負責與資料層進行資料互動,觸發資料Change事件,從而通知視圖層重新渲染,以實作UI界面更新,更進一步,當資料層發生變化時,由Backbone提供了資料層和服務器資料共享同步的能力,

其設計思想主要包含以下幾點:

?資料系結(依賴渲染模板引擎)、事件驅動(依賴Events)

?視圖組件化,并且組件有了生命周期的概念

?前端路由配置化,實作頁面區域重繪

這些創新的思想,在現代前端框架中進一步得到了繼承和發揚,

三、 部分原始碼決議

Backbone極度輕量,編譯后僅有幾kb,貫穿其中的是大量的設計模式:工廠模式、觀察者模式、迭代器模式、配接器模式……,代碼流暢、實作程序比較優雅,按照功能拆分為了Events、Model、Collection、Router、History、View等若干模塊,這里摘取了部分精彩原始碼進行了決議,相信對我們的日常代碼開發也有一定指導作用:

(1)迭代器

EventsApi起到一個迭代器分流的作用,對多個事件進行決議拆分,設計的非常經典,執行時以下用法都是合法的:

?用法一:傳入一個名稱和回呼函式的物件

modal.on({
    "change": change_callback,
    "remove": remove_callback
})

?用法二:使用空格分割的多個事件名稱系結到同一個回呼函式上

model.on("change remove", common_callback)

實作如下:

var eventsApi = function(iteratee, events, name, callback, opts) {
    var i = 0, names;
    if(name && typeof name === 'object') {
        // 處理第一種用法
        if(callback !== void 0 && 'context' in opts && opts.context === void 0) opts.context = callback;
        for(names = _.keys(names); i < names.length; i++) events = eventsApi(iteratee, events, names[i], name[names[i]], opts);
    } else if(name && eventSplitter.test(name)) {
        // 處理第二種用法
        for(names = name.split(eventSplitter); i < names.length; i++) events = iteratee(events, names[i], callback, opts);
    } else {
        events = iteratee(events, name, callback, opts);
    }
    return events;
}

(2)監聽器

用于一個物件監聽另外一個物件的事件,例如,在A物件上監聽在B物件上發生的事件,并且執行A的回呼函式:

A.listenTo(B, "b", callback)

實際上這個功能用B物件來監聽也可以實作:

B.on("b", callback, A)

這么做的好處是,方便對A創建、銷毀邏輯的代碼聚合,并且對B的侵入程度較小,實作如下:

Events.listenTo = function(obj, name, callback) {
    if(!obj) return this;
    var id = obj._listenId || (obj._listenId = _.uniqueId('l'));
    // 當前物件的所有監聽物件
    var listeningTo = this._listeningTo || (this._listeningTo = {});
    var listening = listeningTo[id];
    
    if(!listening) {
        // 創建自身監聽id
        var thisId = this._listenId || (this._listenId = _.uniqueId('l'));
        listening = listeningTo[id] = {obj: obj, objId: id, id: thisId, listeningTo: listeningTo, count: 0};
    }
    // 執行物件系結
    internalOn(obj, name, callback, this, listening);
    return this;
}

(3)Model值set

通過option-flags兼容賦值、更新、洗掉等操作,這么做的好處是融合公共邏輯,簡化代碼邏輯和對外暴露api,實作如下:

set: function(key, val, options) {
    if(key == null) return this;
    // 支持兩種賦值方式: 物件或者 key\value
    var attrs;
    if(typeof key === 'object') {
        attrs = key;
        options = val;
    } else {
        (attrs = {})[key] = val;
    }
    options || (options = {});
    ……
    var unset = options.unset;
    var silent = options.silent;
    var changes = [];
    var changing = this._changing; // 處理嵌套set
    this._changing = true;
    
    if(!changing) {
        // 存盤變更前的狀態快照 
        this._previousAttributes = _.clone(this.attributes);
        this.changed = {};
    }
    var current = this.attributes;
    var changed = this.changed;
    var prev = this._previousAttributes;
    
    for(var attr in attrs) {
        val = attrs[attr];
        if(!_.isEqual(current[attr], val)) changes.push(attr);
        // changed只存盤本次變化的key
        if(!_.isEqual(prev[attr], val)) {
            changed[attr] = val;
        } else {
            delete changed[attr]
        }
        unset ? delete current[attr] : (current[attr] = val)
    }
    if(!silent) {
        if(changes.length) this._pending = options;
        for(var i=0; i<changes.length; i++) {
            // 觸發 change:attr 事件
            this.trigger('change:' + changes[i], this, current[changes[i]], options);
        }
    }
    if(changing) return this;
    if(!silent) {
        // 處理遞回change場景
        while(this._pending) {
            options = this._pending;
            this._pending = false;
            this.trigger('change', this, options);
        }
    }
    this._pending = false;
    this._changing = false;
    return this;
}

四、 不足(對比react、vue)

對比現代前端框架,由于Backbone本身比較輕量,對一些內容細節處理不夠細膩,主要體現在:

?視圖和資料的互動關系需要自己分類撰寫邏輯,需要撰寫較多的監聽器

?監聽器數量較大,需要手動銷毀,維護成本較高

?視圖樹的二次渲染僅能實作組件整體替換,并非增量更新,存在性能損失

?路由切換需要自己處理頁面更新邏輯

五、為什么選擇Backbone

看到這里,你可能有些疑問,既然Backbone存在這些缺陷,那么現在學習Backbone還有什么意義呢?

首先,對于服務端開發人員,Backbone底層依賴underscore/lodash、jQuery/Zepto,目前依然有很多基于Jquery和Velocity的專案需要維護,會jQuery就會Backbone,學習成本低;通過Backbone能夠學習用資料去驅動View更新,優化jQuery的寫法;Backbone面對物件編程,符合Java開發習慣,

其次,對于前端開發人員,能夠學習其模塊化封裝庫類函式,提升編程技藝,Backbone的組件化開發,和現代前端框架有很多共通之處,能夠深入理解其演化歷史,

轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/543202.html

標籤:其他

上一篇:vue3 中好用的插件

下一篇:返回列表

標籤雲
其他(152429) Python(37775) JavaScript(25183) Java(17368) C(15188) 區塊鏈(8246) C#(7972) AI(7469) 爪哇(7425) MySQL(6944) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5847) 数组(5741) R(5405) Linux(5296) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4499) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2421) ASP.NET(2399) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) Web開發(1951) python-3.x(1918) .NET技术(1916) 弹簧靴(1913) xml(1889) PostgreSQL(1861) C++(1852) 谷歌表格(1846) Unity3D(1843) for循环(1842) HtmlCss(1835) .NETCore(1834)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入,國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求,通過反向代理或者負載均衡將請求轉發到后端,后端Transfer-Encoding優先級較高,以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差,然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成:導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議,高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計,高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz,更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置,該裝置以M國全球定位系統(GLOBAL POSITIONING SYSTEM,縮寫為GPS)或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小,只要企業想省錢,那么企業的某些服務就一定會采用外包的形式,然而看似美好又經濟的策略,其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的,最常見的就是話務/客服這種需要大量重復性、無技術性的服務,或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊,通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里,當然也會發生在其它地發,如登錄框等等也會存在注入,只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參,引數為exp 經過三層過濾執行 第一層過濾偽協議,第二層過濾帶引數的函式,第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式,相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • Backbone前端框架解讀

    作者: 京東零售 陳震 一、 什么是Backbone 在前端的發展道路中,前端框架元老之一jQuery對繁瑣的DOM操作進行了封裝,提供了鏈式呼叫、各類選擇器,屏蔽了不同瀏覽器寫法的差異性,但是前端開發程序中依然存在作用域污染、代碼復用度低、冗余度高、資料和事件系結煩瑣等痛點。 5年后,Backbo ......

    uj5u.com 2023-02-07 14:56:58 more
  • vue3 中好用的插件

    1.Api 自動匯入 unplugin-auto-import自動引入 composition api,不需要再手動引入。(npm 地址) 下載 npm i -D unplugin-auto-import 配置 vite.config.ts import AutoImport from "unplu ......

    uj5u.com 2023-02-07 14:56:55 more
  • 為在線客服系統接入chatGPT(四):chatGPT介面vue網頁版,可以聯系背景

    如果想實作chatGPT的網頁版,呼叫介面就可以了,但是如果需要聯系背景關系語境,就需要在傳遞的資料的時候進行下拼接 傳參的時候對所有的對話資料進行拼接,拼成下面這樣 {"prompt":"(You:在嗎\n)這里在哦,有什么可以幫助你的嗎?(You:你這個系統多少錢\n)抱歉,您想知道什么?這里是客 ......

    uj5u.com 2023-02-07 14:56:48 more
  • 為在線客服系統接入chatGPT(四):chatGPT介面vue網頁版,可以聯系背景

    如果想實作chatGPT的網頁版,呼叫介面就可以了,但是如果需要聯系背景關系語境,就需要在傳遞的資料的時候進行下拼接 傳參的時候對所有的對話資料進行拼接,拼成下面這樣 {"prompt":"(You:在嗎\n)這里在哦,有什么可以幫助你的嗎?(You:你這個系統多少錢\n)抱歉,您想知道什么?這里是客 ......

    uj5u.com 2023-02-07 14:56:31 more
  • Backbone前端框架解讀

    作者: 京東零售 陳震 一、 什么是Backbone 在前端的發展道路中,前端框架元老之一jQuery對繁瑣的DOM操作進行了封裝,提供了鏈式呼叫、各類選擇器,屏蔽了不同瀏覽器寫法的差異性,但是前端開發程序中依然存在作用域污染、代碼復用度低、冗余度高、資料和事件系結煩瑣等痛點。 5年后,Backbo ......

    uj5u.com 2023-02-07 14:56:17 more
  • 一個成熟的WMS(倉庫管理系統)應該具備的那些功能

    一個成熟的WMS(倉庫管理系統)應該具備的那些功能 WMS倉庫管理系統是一款以標準化、智能化程序導向管理的倉庫管理軟體,它結合了眾多知名企業的實際情況和管理經驗,按照運作的業務規則和運演算法則準確、高效地管理跟蹤客戶訂單、采購訂單、以及倉庫的綜合管理。 倉儲管理系統WMS關注的核心理念是高效的任務執行 ......

    uj5u.com 2023-02-07 14:55:37 more
  • 一個成熟的WMS(倉庫管理系統)應該具備的那些功能

    一個成熟的WMS(倉庫管理系統)應該具備的那些功能 WMS倉庫管理系統是一款以標準化、智能化程序導向管理的倉庫管理軟體,它結合了眾多知名企業的實際情況和管理經驗,按照運作的業務規則和運演算法則準確、高效地管理跟蹤客戶訂單、采購訂單、以及倉庫的綜合管理。 倉儲管理系統WMS關注的核心理念是高效的任務執行 ......

    uj5u.com 2023-02-07 14:54:54 more
  • Backbone前端框架解讀

    在前端的發展道路中,前端框架元老之一jQuery對繁瑣的DOM操作進行了封裝,提供了鏈式呼叫、各類選擇器,屏蔽了不同瀏覽器寫法的差異性,但是前端開發程序中依然存在作用域污染、代碼復用度低、冗余度高、資料和事件系結煩瑣等痛點。 ......

    uj5u.com 2023-02-07 12:31:22 more
  • [JavaScript]實體化物件

    使用語法結構創建的物件 function fn(){ var name="RoastDuck"; } 使用構造器創建的物件 function Duck() { this.name = []; this.age = []; } var RoastDuck = new Duck(); 使用 Object ......

    uj5u.com 2023-02-07 12:31:18 more
  • [JavaScript]關于prototype繼承

    When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property which holds a link to another object call ......

    uj5u.com 2023-02-07 12:31:14 more