前端 vue 在可視化大屏領(lǐng)域的工作實(shí)踐

導(dǎo)讀：最近入職了一家互聯(lián)網(wǎng)公司，主要是做物聯(lián)網(wǎng)及互聯(lián)網(wǎng)解決方案方向，我上來(lái)就接手了這個(gè)項(xiàng)目，是一個(gè)可視化管理地圖，主要用于某國(guó)企物業(yè)的安全預(yù)警的職能，說(shuō)來(lái)也比較倒霉，剛來(lái)這公司，公司做這個(gè)項(xiàng)目的前端和后端都跑路了，然后讓我一個(gè)月給他整改完，說(shuō)是重構(gòu)吧，還不是，說(shuō)不是重構(gòu)吧，頁(yè)面全讓我改造了，變得更加有科技感，炫酷，性能提升了一部分。相當(dāng)于頁(yè)面重寫(xiě)，后端基本不用改什么東西，主要提供數(shù)據(jù)即可，新增的接口添加能展示數(shù)據(jù)即可。

前言

來(lái)這個(gè)公司的原因是因?yàn)槲矣X(jué)得這個(gè)公司屬于偏初創(chuàng)公司，有一定的規(guī)模，有一定的挑戰(zhàn)性，比大廠工作更加忙碌一些，我以前在一家國(guó)內(nèi)互聯(lián)網(wǎng)外包巨頭行業(yè)工作，感覺(jué)比較閑，就是 965 那種模式，有可能是早點(diǎn)走，晚點(diǎn)到的那種狀態(tài)，工作地點(diǎn)還不穩(wěn)定，如果不跟項(xiàng)目的話。基本都是外派到保險(xiǎn)公司（人保，人壽，國(guó)壽財(cái)及泰康等駐場(chǎng)開(kāi)發(fā)），一兩個(gè)月更新一點(diǎn)小功能就好。可以遠(yuǎn)程，可以駐場(chǎng)開(kāi)發(fā)，中午休息兩個(gè)半小時(shí)也比較舒服。福利待遇一般，工資一般。后來(lái)去了這家新公司，嘗試去做一些有挑戰(zhàn)性的事情，這段時(shí)間一直加班，晚上 8 點(diǎn)管飯，10 點(diǎn)之后打車報(bào)銷。沒(méi)有加班費(fèi)，可以調(diào)休。然后一個(gè)人接手了這個(gè)項(xiàng)目，后來(lái)又來(lái)了一個(gè)哥們（java 工程師）添加一些接口及數(shù)據(jù)。

前端用到的一些技術(shù)點(diǎn)

做這個(gè)項(xiàng)目主要用到的是 vue+echarts+百度地圖+高德地圖+PDF.js+elementUI+vue-seamless-scroll 等。

為什么選 vue,不選 React 或者 Angular?

React 和 Vue 有許多相似之處，它們都有：

使用 Virtual DOM提供了響應(yīng)式 (Reactive) 和組件化 (Composable) 的視圖組件。將注意力集中保持在核心庫(kù)，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫(kù)。

由于有著眾多的相似處，我們會(huì)用更多的時(shí)間在這一塊進(jìn)行比較。這里我們不只保證技術(shù)內(nèi)容的準(zhǔn)確性，同時(shí)也兼顧了平衡的考量。我們需要承認(rèn) React 比 Vue 更好的地方，比如更豐富的生態(tài)系統(tǒng)。

React 和 Vue 都是非常快的，所以速度并不是在它們之中做選擇的決定性因素。

在 React 應(yīng)用中，當(dāng)某個(gè)組件的狀態(tài)發(fā)生變化時(shí)，它會(huì)以該組件為根，重新渲染整個(gè)組件子樹(shù)。

如要避免不必要的子組件的重渲染，你需要在所有可能的地方使用 PureComponent，或是手動(dòng)實(shí)現(xiàn) shouldComponentUpdate 方法。同時(shí)你可能會(huì)需要使用不可變的數(shù)據(jù)結(jié)構(gòu)來(lái)使得你的組件更容易被優(yōu)化。

然而，使用 PureComponent 和 shouldComponentUpdate 時(shí)，需要保證該組件的整個(gè)子樹(shù)的渲染輸出都是由該組件的 props 所決定的。如果不符合這個(gè)情況，那么此類優(yōu)化就會(huì)導(dǎo)致難以察覺(jué)的渲染結(jié)果不一致。這使得 React 中的組件優(yōu)化伴隨著相當(dāng)?shù)男闹秦?fù)擔(dān)。

在 Vue 應(yīng)用中，組件的依賴是在渲染過(guò)程中自動(dòng)追蹤的，所以系統(tǒng)能精確知曉哪個(gè)組件確實(shí)需要被重渲染。你可以理解為每一個(gè)組件都已經(jīng)自動(dòng)獲得了 shouldComponentUpdate，并且沒(méi)有上述的子樹(shù)問(wèn)題限制。

Vue 的這個(gè)特點(diǎn)使得開(kāi)發(fā)者不再需要考慮此類優(yōu)化，從而能夠更好地專注于應(yīng)用本身。

在 React 中，一切都是 JavaScript。不僅僅是 HTML 可以用 JSX 來(lái)表達(dá)，現(xiàn)在的潮流也越來(lái)越多地將 CSS 也納入到 JavaScript 中來(lái)處理。這類方案有其優(yōu)點(diǎn)，但也存在一些不是每個(gè)開(kāi)發(fā)者都能接受的取舍。

Vue 的整體思想是擁抱經(jīng)典的 Web 技術(shù)，并在其上進(jìn)行擴(kuò)展。

在 React 中，所有的組件的渲染功能都依靠 JSX。JSX 是使用 XML 語(yǔ)法編寫(xiě) JavaScript 的一種語(yǔ)法糖。

使用 JSX 的渲染函數(shù)有下面這些優(yōu)勢(shì)：

你可以使用完整的編程語(yǔ)言 JavaScript 功能來(lái)構(gòu)建你的視圖頁(yè)面。比如你可以使用臨時(shí)變量、JS 自帶的流程控制、以及直接引用當(dāng)前 JS 作用域中的值等等。開(kāi)發(fā)工具對(duì) JSX 的支持相比于現(xiàn)有可用的其他 Vue 模板還是比較先進(jìn)的 (比如，linting、類型檢查、編輯器的自動(dòng)完成)。

事實(shí)上 Vue 也提供了渲染函數(shù)，甚至支持 JSX。然而，我們默認(rèn)推薦的還是模板。任何合乎規(guī)范的 HTML 都是合法的 Vue 模板，這也帶來(lái)了一些特有的優(yōu)勢(shì)：

對(duì)于很多習(xí)慣了 HTML 的開(kāi)發(fā)者來(lái)說(shuō)，模板比起 JSX 讀寫(xiě)起來(lái)更自然。這里當(dāng)然有主觀偏好的成分，但如果這種區(qū)別會(huì)導(dǎo)致開(kāi)發(fā)效率的提升，那么它就有客觀的價(jià)值存在。基于 HTML 的模板使得將已有的應(yīng)用逐步遷移到 Vue 更為容易。這也使得設(shè)計(jì)師和新人開(kāi)發(fā)者更容易理解和參與到項(xiàng)目中。你甚至可以使用其他模板預(yù)處理器，比如 Pug 來(lái)書(shū)寫(xiě) Vue 的模板。

有些開(kāi)發(fā)者認(rèn)為模板意味著需要學(xué)習(xí)額外的 DSL (Domain-Specific Language 領(lǐng)域特定語(yǔ)言) 才能進(jìn)行開(kāi)發(fā)——我們認(rèn)為這種區(qū)別是比較膚淺的。首先，JSX 并不是沒(méi)有學(xué)習(xí)成本的——它是基于 JS 之上的一套額外語(yǔ)法。同時(shí)，正如同熟悉 JS 的人學(xué)習(xí) JSX 會(huì)很容易一樣，熟悉 HTML 的人學(xué)習(xí) Vue 的模板語(yǔ)法也是很容易的。最后，DSL 的存在使得我們可以讓開(kāi)發(fā)者用更少的代碼做更多的事，比如 v-on 的各種修飾符，在 JSX 中實(shí)現(xiàn)對(duì)應(yīng)的功能會(huì)需要多得多的代碼。

更抽象一點(diǎn)來(lái)看，我們可以把組件區(qū)分為兩類：一類是偏視圖表現(xiàn)的 (presentational)，一類則是偏邏輯的 (logical)。我們推薦在前者中使用模板，在后者中使用 JSX 或渲染函數(shù)。這兩類組件的比例會(huì)根據(jù)應(yīng)用類型的不同有所變化，但整體來(lái)說(shuō)我們發(fā)現(xiàn)表現(xiàn)類的組件遠(yuǎn)遠(yuǎn)多于邏輯類組件。

Angular 事實(shí)上必須用 TypeScript 來(lái)開(kāi)發(fā)，因?yàn)樗奈臋n和學(xué)習(xí)資源幾乎全部是面向 TS 的。TS 有很多好處——靜態(tài)類型檢查在大規(guī)模的應(yīng)用中非常有用，同時(shí)對(duì)于 Java 和 C# 背景的開(kāi)發(fā)者也是非常提升開(kāi)發(fā)效率的。

然而，并不是所有人都想用 TS——在中小型規(guī)模的項(xiàng)目中，引入 TS 可能并不會(huì)帶來(lái)太多明顯的優(yōu)勢(shì)。在這些情況下，用 Vue 會(huì)是更好的選擇，因?yàn)樵诓挥?TS 的情況下使用 Angular 會(huì)很有挑戰(zhàn)性。

最后，雖然 Vue 和 TS 的整合可能不如 Angular 那么深入，VUE 也提供了官方的類型聲明和組件裝飾器，并且知道有大量用戶在生產(chǎn)環(huán)境中使用 Vue + TS 的組合。VUE 也和微軟的 TS / VSCode 團(tuán)隊(duì)進(jìn)行著積極的合作，目標(biāo)是為 Vue + TS 用戶提供更好的類型檢查和 IDE 開(kāi)發(fā)體驗(yàn)。

使用 vue 腳手架可以快速的進(jìn)行開(kāi)發(fā)，上手也很快。雖然我接觸的技術(shù)棧也比較多，但是很難達(dá)到精通的級(jí)別，無(wú)疑，這是一個(gè)很好的選擇。

使用 Echarts 的目的

使用這個(gè) Echarts 主要是在大屏上做一些柱狀圖及餅狀圖，把數(shù)據(jù)以圖表的形式進(jìn)行展示。這個(gè) echars 使用起來(lái)比較簡(jiǎn)單，一般找個(gè)簡(jiǎn)單的模板進(jìn)行套用即可。

Echarts 的官網(wǎng)：http://echarts.apache.org/zh/index.html

這個(gè)是百度的一個(gè)產(chǎn)品，最近項(xiàng)目被孵化，有時(shí)候經(jīng)常打不開(kāi)，可以換個(gè)網(wǎng)絡(luò)或者瀏覽器，實(shí)在不行可以使用 w3c 的 echarts 教程，屬性也比較全。比菜鳥(niǎo)教程好很多。

這個(gè)如何使用我就不說(shuō)了，想了解的可以參考官網(wǎng)教程：https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

使用百度地圖的目的

這個(gè)項(xiàng)目原先是用的百度的衛(wèi)星地圖，衛(wèi)星地圖看起來(lái)比較模糊，不過(guò)功能都好使。

<!DOCTYPE html><html><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  <style type="text/css">  body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}</style>  <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密鑰"></script>  <title>地球模式</title></head><body>  <div id="allmap"></div></body></html><script type="text/javascript">    // GL版命名空間為BMapGL  var map = new BMapGL.Map("allmap");    // 創(chuàng)建Map實(shí)例  map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 5);  // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別  map.enableScrollWheelZoom(true);     //開(kāi)啟鼠標(biāo)滾輪縮放  map.setMapType(BMAP_EARTH_MAP);      // 設(shè)置地圖類型為地球模式</script>

后來(lái)在數(shù)據(jù)看板又加了一個(gè)靈魂地圖，使用的是高德地圖。

可能有人問(wèn)，用一個(gè)地圖不就行了？用兩個(gè)不會(huì)引起性能方面的問(wèn)題？說(shuō)實(shí)話，確實(shí)會(huì)降低性能，不過(guò)客戶要求好看，就只能魚(yú)和熊不可兼得。

百度地圖 API:https://lbsyun.baidu.com/index.php?title=jspopularGL

如果使用下鉆功能，進(jìn)行地理位置定位，在中國(guó)地圖上進(jìn)行打點(diǎn)，確定經(jīng)緯度，使用其他地圖都能取值，經(jīng)緯度需要注意一下，別搞反了。

使用 vue-seamless-scroll 滾動(dòng)插件的目的

這個(gè)可以使表格的數(shù)據(jù)自動(dòng)滾動(dòng)，看起來(lái)更酷，數(shù)據(jù)量比較多自動(dòng)滾動(dòng)，數(shù)據(jù)量比較少不讓他滾動(dòng)，鼠標(biāo)懸浮數(shù)據(jù)暫停。

官方 gitHub：https://github.com/chenxuan0000/vue-seamless-scroll

文檔：https://chenxuan0000.github.io/vue-seamless-scroll/guide/

主要配置項(xiàng)：

computed: {    classOption() {      return {        step: 0.5, // 數(shù)值越大速度滾動(dòng)越快        limitMoveNum: 1, // 開(kāi)始無(wú)縫滾動(dòng)的數(shù)據(jù)量 this.dataList.length        hoverStop: true, // 是否開(kāi)啟鼠標(biāo)懸停stop        direction: 1, // 0向下 1向上 2向左 3向右        openWatch: true, // 開(kāi)啟數(shù)據(jù)實(shí)時(shí)監(jiān)控刷新dom        singleHeight: 0, // 單步運(yùn)動(dòng)停止的高度(默認(rèn)值0是無(wú)縫不停止的滾動(dòng)) direction => 0/1        singleWidth: 0, // 單步運(yùn)動(dòng)停止的寬度(默認(rèn)值0是無(wú)縫不停止的滾動(dòng)) direction => 2/3        waitTime: 1000, // 單步運(yùn)動(dòng)停止的時(shí)間(默認(rèn)值1000ms)        // isSingleRemUnit:true, //singleHeight and singleWidth是否開(kāi)啟rem度量  false/true        limitMoveNum:5,//開(kāi)啟無(wú)縫滾動(dòng)的高度,源碼設(shè)置為表格數(shù)據(jù)量小于5就不讓她滾動(dòng)。      };    }  }

使用 vue-seamless-scroll 自動(dòng)滾動(dòng)插件復(fù)制出來(lái)的數(shù)據(jù)點(diǎn)擊事件無(wú)效的解決辦法

問(wèn)題分析：

當(dāng)?shù)谝粋€(gè) ul 中的數(shù)據(jù)滾動(dòng)完時(shí)（真實(shí)數(shù)據(jù)）,第二個(gè) ul 部分的 click 事件不起作用（復(fù)制出來(lái)的數(shù)據(jù)），無(wú)法實(shí)現(xiàn)一些點(diǎn)擊這行，彈窗詳情信息業(yè)務(wù)需要功能。 

我需要這些數(shù)據(jù)添加一些點(diǎn)擊事件，彈出二級(jí)頁(yè)面及區(qū)域切換效果。

解決辦法：

采用事件委托的方式：

 事件委托又叫事件代理，就是利用事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類型的所有事件。
一般來(lái)說(shuō)，DOM需要有事件處理程序，我們都會(huì)直接給它設(shè)定事件處理程序就好了，但是如果有很多DOM需要添加處理事件，比如，一個(gè)ul下有很多個(gè)li，需要給每個(gè)li都添加相同的點(diǎn)擊事件，這時(shí)候我們通常會(huì)用for循環(huán)的方法，遍歷所有元素，然后給他們添加點(diǎn)擊事件，雖然看似內(nèi)心毫無(wú)波瀾很合理的做法，背后實(shí)則存在著巨大的性能弊端。
在JS中，添加到頁(yè)面上的事件處理程序數(shù)量將直接關(guān)系到頁(yè)面的整體運(yùn)行性能，因?yàn)樾枰粩嗟呐cDOM節(jié)點(diǎn)進(jìn)行交互，所以訪問(wèn)DOM的次數(shù)越多，引起瀏覽器重繪與重排的次數(shù)也就越多，就會(huì)延長(zhǎng)整個(gè)頁(yè)面的交互就緒時(shí)間，這就是為什么性能優(yōu)化的主要思路就是從減少DOM操作的角度去入手的原因。
這種情況，如果用時(shí)間委托，就會(huì)將所有的操作都放到JS程序里面，與DOM的操作就只需要交互一次，這樣就能大大的減少與DOM的交互次數(shù)；并且，每一個(gè)函數(shù)都是一個(gè)對(duì)象，是對(duì)象就會(huì)占用內(nèi)存，對(duì)象越多，內(nèi)存占用率就越大，性能自然就會(huì)越差，如果使用事件委托，我們就可以只對(duì)它的父級(jí)這一個(gè)對(duì)象進(jìn)行操作，這樣我們就值需要一個(gè)內(nèi)存空間就夠了，大量節(jié)省了內(nèi)存空間，提高整體頁(yè)面的性能了。

給外層 div 加點(diǎn)擊事件，通過(guò) event.target 獲取到點(diǎn)擊的 dom 元素

給點(diǎn)擊的列的元素綁定 屬性，這里我綁定了 id 和自定義屬性 data-obj 對(duì)象，直接把改列的 item 添加進(jìn)去，不用一個(gè)一個(gè)單獨(dú)綁定。

點(diǎn)擊方法，把原來(lái)的點(diǎn)擊方法取消，直接在這個(gè)底部調(diào)用。

寫(xiě)了一個(gè)比較通用的方法其它幾個(gè)頁(yè)面按照這個(gè)方法也很好用，不用一個(gè)個(gè)綁定，那個(gè)類 row 純屬做了一個(gè)標(biāo)志位，便于循環(huán)之后的判斷，如果不清楚，直接 console.log,便于定位每個(gè)變量。

瀏覽器在線 PDF 預(yù)覽取消下載按鈕

需要在線 PDF 下載的功能，剛開(kāi)始用的是第三方的 PDF.JS，按照網(wǎng)上的方法操作，排查，發(fā)現(xiàn)沒(méi)有作用，經(jīng)過(guò)和后端小伙伴溝通，原來(lái)這個(gè)地址是瀏覽器 PDF 預(yù)覽。

瀏覽器 PDF 取消辦法：在需要 URL 地址后邊加上代碼

'#toolbar=0'

加了代碼：

或者

修改完看下效果：

上面的整行黑條都沒(méi)了

順便說(shuō)一下

PDF.JS 取消下載的辦法：

viewer.html 添加隱藏樣式。

viewer.js 注釋如下代碼，版本不一樣，行數(shù)一般不一樣，建議用編譯器 ctrl+f 進(jìn)行檢索 download。

還有一處，這個(gè)版本不一樣，代碼不一樣，一樣注釋掉方法

總結(jié)

這個(gè)項(xiàng)目做的東西很多都是第一次接觸，學(xué)到的東西還是挺多的，每天都加班到很晚才回家，主要原因是缺人，我自己再做，還有一個(gè)原因是我對(duì)這方便的技術(shù)不熟悉，導(dǎo)致工作效率有點(diǎn)低。再者就是甲方安排的需求多變，不斷的加需求，這邊都沒(méi)人寫(xiě)需求文檔，前端做了大量的循環(huán)及寫(xiě)了大量的假數(shù)據(jù)進(jìn)行展示。導(dǎo)致整個(gè)系統(tǒng)性能稍微低下一點(diǎn)，已經(jīng)采取了如下優(yōu)化：

用了線上的服務(wù)器進(jìn)行演示，發(fā)現(xiàn)甲方測(cè)試服務(wù)器和正式服務(wù)器配置都不是一個(gè)檔次。好在我前后端都會(huì)搞。今天的內(nèi)容就分享到這里，簡(jiǎn)單分享一下部分內(nèi)容，謝謝大家。