前端vue在可視化大屏領域的工作實踐

{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"導讀：最近入職了一家互聯網公司，主要是做物聯網及互聯網解決方案方向，我上來就接手了這個項目，是一個可視化管理地圖，主要用於某國企物業的安全預警的職能，說來也比較倒黴，剛來這公司，公司做這個項目的前端和後端都跑路了，然後讓我一個月給他整改完，說是重構吧，還不是，說不是重構吧，頁面全讓我改造了，變得更加有科技感，炫酷，性能提升了一部分。相當於頁面重寫，後端基本不用改什麼東西，主要提供數據即可，新增的接口添加能展示數據即可。","attrs":{}}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"來這個公司的原因是因爲我覺得這個公司屬於偏初創公司，有一定的規模，有一定的挑戰性，比大廠工作更加忙碌一些，我以前在一家國內互聯網外包巨頭行業工作，感覺比較閒，就是965那種模式，有可能是早點走，晚點到的那種狀態，工作地點還不穩定，如果不跟項目的話。基本都是外派到保險公司（人保，人壽，國壽財及泰康等駐場開發），一兩個月更新一點小功能就好。可以遠程，可以駐場開發，中午休息兩個半小時也比較舒服。福利待遇一般，工資一般。後來去了這家新公司，嘗試去做一些有挑戰性的事情，這段時間一直加班，晚上8點管飯，10點之後打車報銷。沒有加班費，可以調休。然後一個人接手了這個項目，後來又來了一個哥們（java工程師）添加一些接口及數據。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b1/b129dd560e5199b902169c3a1077680c.jpeg","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前端用到的一些技術點","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"做這個項目主要用到的是vue+echarts+百度地圖+高德地圖+PDF.js+elementUI+vue-seamless-scroll等。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"爲什麼選vue,不選React或者Angular?","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"React 和 Vue 有許多相似之處，它們都有：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"使用 Virtual DOM\n提供了響應式 (Reactive) 和組件化 (Composable) 的視圖組件。\n將注意力集中保持在覈心庫，而將其他功能如路由和全局狀態管理交給相關的庫。\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"由於有着衆多的相似處，我們會用更多的時間在這一塊進行比較。這裏我們不只保證技術內容的準確性，同時也兼顧了平衡的考量。我們需要承認 React 比 Vue 更好的地方，比如更豐富的生態系統。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"React 和 Vue 都是非常快的，所以速度並不是在它們之中做選擇的決定性因素。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 React 應用中，當某個組件的狀態發生變化時，它會以該組件爲根，重新渲染整個組件子樹。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如要避免不必要的子組件的重渲染，你需要在所有可能的地方使用 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"PureComponent","attrs":{}}],"attrs":{}},{"type":"text","text":"，或是手動實現 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"shouldComponentUpdate","attrs":{}}],"attrs":{}},{"type":"text","text":" 方法。同時你可能會需要使用不可變的數據結構來使得你的組件更容易被優化。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然而，使用 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"PureComponent","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"shouldComponentUpdate","attrs":{}}],"attrs":{}},{"type":"text","text":" 時，需要保證該組件的整個子樹的渲染輸出都是由該組件的 props 所決定的。如果不符合這個情況，那麼此類優化就會導致難以察覺的渲染結果不一致。這使得 React 中的組件優化伴隨着相當的心智負擔。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 Vue 應用中，組件的依賴是在渲染過程中自動追蹤的，所以系統能精確知曉哪個組件確實需要被重渲染。你可以理解爲每一個組件都已經自動獲得了 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"shouldComponentUpdate","attrs":{}}],"attrs":{}},{"type":"text","text":"，並且沒有上述的子樹問題限制。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Vue 的這個特點使得開發者不再需要考慮此類優化，從而能夠更好地專注於應用本身。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 React 中，一切都是 JavaScript。不僅僅是 HTML 可以用 JSX 來表達，現在的潮流也越來越多地將 CSS 也納入到 JavaScript 中來處理。這類方案有其優點，但也存在一些不是每個開發者都能接受的取捨。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Vue 的整體思想是擁抱經典的 Web 技術，並在其上進行擴展。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 React 中，所有的組件的渲染功能都依靠 JSX。JSX 是使用 XML 語法編寫 JavaScript 的一種語法糖。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用 JSX 的渲染函數有下面這些優勢：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"你可以使用完整的編程語言 JavaScript 功能來構建你的視圖頁面。比如你可以使用臨時變量、JS 自帶的流程控制、以及直接引用當前 JS 作用域中的值等等。\n\n開發工具對 JSX 的支持相比於現有可用的其他 Vue 模板還是比較先進的 (比如，linting、類型檢查、編輯器的自動完成)。\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"事實上 Vue 也提供了渲染函數，甚至支持 JSX。然而，我們默認推薦的還是模板。任何合乎規範的 HTML 都是合法的 Vue 模板，這也帶來了一些特有的優勢：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"對於很多習慣了 HTML 的開發者來說，模板比起 JSX 讀寫起來更自然。這裏當然有主觀偏好的成分，但如果這種區別會導致開發效率的提升，那麼它就有客觀的價值存在。\n\n基於 HTML 的模板使得將已有的應用逐步遷移到 Vue 更爲容易。\n\n這也使得設計師和新人開發者更容易理解和參與到項目中。\n\n你甚至可以使用其他模板預處理器，比如 Pug 來書寫 Vue 的模板。\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"有些開發者認爲模板意味着需要學習額外的 DSL (Domain-Specific Language 領域特定語言) 才能進行開發——我們認爲這種區別是比較膚淺的。首先，JSX 並不是沒有學習成本的——它是基於 JS 之上的一套額外語法。同時，正如同熟悉 JS 的人學習 JSX 會很容易一樣，熟悉 HTML 的人學習 Vue 的模板語法也是很容易的。最後，DSL 的存在使得我們可以讓開發者用更少的代碼做更多的事，比如 v-on 的各種修飾符，在 JSX 中實現對應的功能會需要多得多的代碼。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"更抽象一點來看，我們可以把組件區分爲兩類：一類是偏視圖表現的 (presentational)，一類則是偏邏輯的 (logical)。我們推薦在前者中使用模板，在後者中使用 JSX 或渲染函數。這兩類組件的比例會根據應用類型的不同有所變化，但整體來說我們發現表現類的組件遠遠多於邏輯類組件。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Angular 事實上必須用 TypeScript 來開發，因爲它的文檔和學習資源幾乎全部是面向 TS 的。TS 有很多好處——靜態類型檢查在大規模的應用中非常有用，同時對於 Java 和 C# 背景的開發者也是非常提升開發效率的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然而，並不是所有人都想用 TS——在中小型規模的項目中，引入 TS 可能並不會帶來太多明顯的優勢。在這些情況下，用 Vue 會是更好的選擇，因爲在不用 TS 的情況下使用 Angular 會很有挑戰性。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最後，雖然 Vue 和 TS 的整合可能不如 Angular 那麼深入，VUE也提供了官方的","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/vuejs/vue/tree/dev/types","title":null,"type":null},"content":[{"type":"text","text":"類型聲明","attrs":{}}]},{"type":"text","text":"和","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/vuejs/vue-class-component","title":null,"type":null},"content":[{"type":"text","text":"組件裝飾器","attrs":{}}]},{"type":"text","text":"，並且知道有大量用戶在生產環境中使用 Vue + TS 的組合。VUE也和微軟的 TS / VSCode 團隊進行着積極的合作，目標是爲 Vue + TS 用戶提供更好的類型檢查和 IDE 開發體驗。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用vue腳手架可以快速的進行開發，上手也很快。雖然我接觸的技術棧也比較多，但是很難達到精通的級別，無疑，這是一個很好的選擇。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"使用Echarts的目的","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用這個Echarts主要是在大屏上做一些柱狀圖及餅狀圖，把數據以圖表的形式進行展示。這個echars使用起來比較簡單，一般找個簡單的模板進行套用即可。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Echarts的官網：http://echarts.apache.org/zh/index.html","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/0b/0b27bccbc457452244debda82538ff87.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個是百度的一個產品，最近項目被孵化，有時候經常打不開，可以換個網絡或者瀏覽器，是在不行可以使用w3c的echarts教程，屬性也比較全。比菜鳥教程好很多。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f1/f1db55168458d7abc9687bb6dbddfd52.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個如何使用我就不說了，想了解的可以參考官網教程：https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"使用百度地圖的目的","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個項目原先是用的百度的衛星地圖，衛星地圖看起來比較模糊，不過功能都好使。","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\n\n\n\t\n\t\n\t\n\t\n\t\n\n\n\t

\n\n\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/79/7941864f3445602ee8024c4ee46270ab.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"後來在數據看板又加了一個靈魂地圖，使用的是高德地圖。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可能有人問，用一個地圖不就行了？用兩個不會引起性能方面的問題？說實話，確實會降低性能，不過客戶要求好看，就只能魚和熊不可兼得。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"百度地圖API:https://lbsyun.baidu.com/index.php?title=jspopularGL","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/7e/7eb4f188bf5b9abce905c23570ab8a37.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果使用下鑽功能，進行地理位置定位，在中國地圖上進行打點，確定經緯度，使用其他地圖都能取值，經緯度需要注意一下，別搞反了。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/a1/a10eb507760abedbe78653dca02491bb.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"使用vue-seamless-scroll滾動插件的目的","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個可以使表格的數據自動滾動，看起來更酷，數據量比較多自動滾動，數據量比較少不讓他滾動，鼠標懸浮數據暫停。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"官方gitHub：https://github.com/chenxuan0000/vue-seamless-scroll","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"文檔：https://chenxuan0000.github.io/vue-seamless-scroll/guide/","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"主要配置項：","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"computed: {\n classOption() {\n return {\n step: 0.5, // 數值越大速度滾動越快\n limitMoveNum: 1, // 開始無縫滾動的數據量 this.dataList.length\n hoverStop: true, // 是否開啓鼠標懸停stop\n direction: 1, // 0向下 1向上 2向左 3向右\n openWatch: true, // 開啓數據實時監控刷新dom\n singleHeight: 0, // 單步運動停止的高度(默認值0是無縫不停止的滾動) direction => 0/1\n singleWidth: 0, // 單步運動停止的寬度(默認值0是無縫不停止的滾動) direction => 2/3\n waitTime: 1000, // 單步運動停止的時間(默認值1000ms)\n // isSingleRemUnit:true, //singleHeight and singleWidth是否開啓rem度量\tfalse/true\n limitMoveNum:5,//開啓無縫滾動的高度,源碼設置爲表格數據量小於5就不讓她滾動。\n };\n }\n }","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"使用vue-seamless-scroll自動滾動插件複製出來的數據點擊事件無效的解決辦法","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"問題分析：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當第一個ul中的數據滾動完時（真實數據）,第二個ul 部分的click事件不起作用（複製出來的數據），無法實現一些點擊這行，彈窗詳情信息業務需要功能。 ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我需要這些數據添加一些點擊事件，彈出二級頁面及區域切換效果。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"解決辦法：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"採用事件委託的方式：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":" 事件委託又叫事件代理，就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。\n\n一般來說，DOM需要有事件處理程序，我們都會直接給它設定事件處理程序就好了，但是如果有很多DOM需要添加處理事件，比如，一個ul下有很多個li，需要給每個li都添加相同的點擊事件，這時候我們通常會用for循環的方法，遍歷所有元素，然後給他們添加點擊事件，雖然看似內心毫無波瀾很合理的做法，背後實則存在着巨大的性能弊端。\n\n在JS中，添加到頁面上的事件處理程序數量將直接關係到頁面的整體運行性能，因爲需要不斷的與DOM節點進行交互，所以訪問DOM的次數越多，引起瀏覽器重繪與重排的次數也就越多，就會延長整個頁面的交互就緒時間，這就是爲什麼性能優化的主要思路就是從減少DOM操作的角度去入手的原因。\n\n這種情況，如果用時間委託，就會將所有的操作都放到JS程序裏面，與DOM的操作就只需要交互一次，這樣就能大大的減少與DOM的交互次數；並且，每一個函數都是一個對象，是對象就會佔用內存，對象越多，內存佔用率就越大，性能自然就會越差，如果使用事件委託，我們就可以只對它的父級這一個對象進行操作，這樣我們就值需要一個內存空間就夠了，大量節省了內存空間，提高整體頁面的性能了。\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"給外層div加點擊事件，通過event.target獲取到點擊的dom元素","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/4d/4d9e42aeb16d9c36ce30d6f7868baecc.png","alt":"","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"給點擊的列的元素綁定 屬性，這裏我綁定了id和自定義屬性data-obj對象，直接把改列的item添加進去，不用一個一個單獨綁定。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"點擊方法，把原來的點擊方法取消，直接在這個底部調用。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/e0/e0cefb6b7fa9681d9b136e0c5f3ec831.png","alt":"","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"寫了一個比較通用的方法其它幾個頁面按照這個方法也很好用，不用一個個綁定，那個類row純屬做了一個標誌位，便於循環之後的判斷，如果不清楚，直接console.log,便於定位每個變量。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ca/caf496e977fd7c3b7a2c831e370f25e7.png","alt":"","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"瀏覽器在線PDF預覽取消下載按鈕","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"需要在線PDF下載的功能，剛開始用的是第三方的PDF.JS，按照網上的方法操作，排查，發現沒有作用，經過和後端小夥伴溝通，原來這個地址是瀏覽器PDF預覽。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"瀏覽器PDF取消辦法：在需要URL地址後邊加上代碼","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"'#toolbar=0'","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/2e/2efe31a7584ad4086411223039e1a90d.png","alt":"","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"加了代碼：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c3/c33abcebd1cace0ffdbddd1a57d8b901.png","alt":"","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 或者","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/21/218fe3cb709a278ee16934d350292aa4.png","alt":"","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"修改完看下效果：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面的整行黑條都沒了","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b3/b31f93cad6b0c3ad847a4a14209bb129.png","alt":"","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"順便說一下","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"PDF.JS取消下載的辦法：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"viewer.html添加隱藏樣式。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/81/81e253aa4b10e6e4e9df8467225c20cc.png","alt":"","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"viewer.js註釋如下代碼，版本不一樣，行數一般不一樣，建議用編譯器ctrl+f進行檢索download。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/96/9667954a4128c84b000ce3e900747bf7.png","alt":"","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"還有一處，這個版本不一樣，代碼不一樣，一樣註釋掉方法","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/5d/5d8a7235188872c8e0a5ea2144f0fdfb.png","alt":"","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"總結","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個項目做的東西很多都是第一次接觸，學到的東西還是挺多的，每天都加班到很晚纔回家，主要原因是缺人，我自己再做，還有一個原因是我對這方便的技術不熟悉，導致工作效率有點低。再者就是甲方安排的需求多變，不斷的加需求，這邊都沒人寫需求文檔，前端做了大量的循環及寫了大量的假數據進行展示。導致整個系統性能稍微低下一點，已經採取瞭如下優化：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/05/053d10b866b64d4b2b75702ac985d9b8.png","alt":"","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用了線上的服務器進行演示，發現甲方測試服務器和正式服務器配置都不是一個檔次。好在我前後端都會搞。今天的內容就分享到這裏，簡單分享一下部分內容，謝謝大家。","attrs":{}}]}]}