李健 張居力 張聃

【摘? 要】近年來，隨著Web前端技術的快速發(fā)展，用戶對產(chǎn)品的體驗和可用性需求大幅度提升，衍生出目前流行的三大前端框架Angular.js、React.js、Vue.js。而Vue.js由美籍華人開發(fā)，性能強悍、文檔清晰明了、簡單易學且更契合國內(nèi)開發(fā)者習慣，成為國內(nèi)當前最受歡迎的前端框架。以功能強大、開發(fā)方便的Vue.js作為城市軌道交通綜合安防系統(tǒng)的后臺開發(fā)，通過其模塊化設計模式，可以構建出更高效、更快捷、可維護性強、更符合用戶體驗的用戶界面。

【Abstract】In recent years， with the rapid development of Web front-end technology， users' demands for product experience and usability have been greatly improved， and the three popular front-end frameworks Angular. js， React. js and Vue.js have been derived. Vue. js is developed by Chinese Americans. With strong performance， clear documentation， easy to learn and more in line with the habits of domestic developers， it has become the most popular front-end framework in China. With the powerful and convenient development of Vue. js as the background development of urban rail transit integrated security system， the modular design mode can build a more efficient， faster， maintainable， and more consistent with user experience user interface.

【關鍵詞】Vue.js;模塊化;城市軌道交通;安防系統(tǒng)

【Keywords】Vue.js; modular; urban rail transit; security system

【中圖分類號】U231;TP18? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?【文獻標志碼】A? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?【文章編號】1673-1069（2021）02-0192-03

1 引言

近年來，公共場所的恐怖極端事件頻發(fā)，面對國際與國內(nèi)恐怖主義威脅，通過高科技安防手段遏制恐怖活動，保障社會穩(wěn)定和公共安全，是當前中國乃至世界各國都在研究的重要課題，而城市軌道交通綜合安防系統(tǒng)正是公司立項著手開發(fā)聚合多維度管理、跨平臺、多部門協(xié)調(diào)等功能特性于一身的針對地鐵安全防范的綜合管理系統(tǒng)。在前端界面開發(fā)上，采用當前最流行的Vue.js+Element-UI前端框架以模塊化方式進行界面的搭建，以更優(yōu)的性能減少代碼冗余增強后期維護性，以自帶的查錯機制減少系統(tǒng)故障率。

2 模塊化編程的定義

模塊化編程是一種軟件設計技術，它強調(diào)將程序的功能分為獨立的，可互換的模塊，以使每個模塊都包含執(zhí)行所需功能的一個方面所必需的一切。

在創(chuàng)建模塊化系統(tǒng)時，不是創(chuàng)建一個整體的應用程序（其中最小的組件是整體），而是單獨編寫幾個較小的模塊，因此當它們組合在一起時，它們會構建可執(zhí)行的應用程序。典型地，這些也被編譯分別經(jīng)由單獨的編譯，然后通過一個鏈接的連接子。一個剛剛即時編譯器可以執(zhí)行一些這樣的結(jié)構“上即時”的運行時間。這些獨立的功能通常分為程序控制功能或特定任務功能。程序控制功能旨在用于一個程序，專門準備了特定的任務功能以適用于各種程序。

3 模塊化的優(yōu)勢

組件化開發(fā)通過組件把一個單頁面應用中的各個模塊拆分到一個一個的單獨組件中，只要在父級應用中寫好各種組件標簽的占位，并且在組件標簽中寫好要傳入組件的參數(shù)（就像給函數(shù)傳入?yún)?shù)一樣，這個參數(shù)叫作組件的熟悉），然后再分別寫好對應組件的實現(xiàn)，這樣整個頁面就算做完了。這樣的開發(fā)不僅提高了開發(fā)的效率、方便重復使用、簡化了調(diào)試的步驟，而且提升了整個項目的可維護性，便于協(xié)同開發(fā)。

4 模塊化開發(fā)在安防系統(tǒng)上的應用及設計

住建部于2015年發(fā)布了GB 50314—2015《智能建筑設計標準》，將安全防范綜合管理平臺系統(tǒng)納入智能建筑設計標準，安防集成平臺成為智能建筑重要的組成部分。港口、機場、智慧園區(qū)、智慧城市等安防重點領域紛紛開始響應國家安全工作部署，加強安全投入，建設安防集成平臺，提高安防管理水平。在2016年，中國住房和城鄉(xiāng)建設部和中國質(zhì)量監(jiān)督檢驗檢疫總局聯(lián)合發(fā)布了GB 51151—2016《城市軌道交通公共安全防范系統(tǒng)工程技術規(guī)范》，規(guī)范要求城市軌道交通公共安全技術防范系統(tǒng)的各子系統(tǒng)應集合成為一個整體，并應由獨立的安防集成平臺統(tǒng)一進行管理。公司根據(jù)要求著力于開發(fā)城市軌道交通安防系統(tǒng)產(chǎn)品，本系統(tǒng)按照《UI設計規(guī)范》中的說明結(jié)合餓了么開源框架Element-UI對系統(tǒng)進行模塊化設計如圖1所示。

整體結(jié)構上拆分為“上中下”三段式布局。頁面的頂部為系統(tǒng)logo、主菜單、登錄信息、系統(tǒng)子菜單等部分，系統(tǒng)子菜單且當主菜單沒有子菜單時，可通過v-if指令將其隱藏，頁面的中間部分為系統(tǒng)應用的內(nèi)容區(qū)域，頁面的底部則為公司署名及版權信息。這樣設計既能滿足頁面美觀，也能夠?qū)I(yè)務模塊單獨拆分開，便于分發(fā)給不同開發(fā)人員進行頁面開發(fā)。

在主菜單欄比較簡單，最左側(cè)為logo及平臺信息，但中間的菜單欄則是由兩部分組成，圖標及文字，這種高重復性可以單獨設計成一個組件，也可通過v-for指令直接進行列表渲染，此處為單獨的組件進行統(tǒng)一維護。在主菜單欄的最右側(cè)雖然圖標看起來都是相同的，但是他們的點擊事件不同，所以并沒有單獨封裝為組件。

中間子菜單欄，結(jié)構比較簡單，背景色加上菜單按鈕，不需要單獨拆分。而在內(nèi)容欄，就需要根據(jù)業(yè)務模型來提前將模型構建好。

在系統(tǒng)的菜單中，【電子地圖】【視頻監(jiān)控】【出入口控制】【入侵報警】【安全檢查】【電子地圖】模塊內(nèi)容部分都涉及左側(cè)為樹節(jié)點、右側(cè)為地圖模型，在各個模塊再展現(xiàn)一些個性化的功能，如圖2和圖3所示。

以此可以單獨拆分出兩個組件：左側(cè)的樹形列表組件、右側(cè)的地圖組件。左側(cè)的樹形列表使用Element-UI自帶的el-tree組件，簡單配置參數(shù)即可展現(xiàn)出上圖顯示的效果，以【電子地圖】【視頻監(jiān)控】部分代碼為例如下：

【電子地圖】左側(cè)樹結(jié)構示例代碼：

：accordion='true'？：highlight-current='true'？：props="defaultProps"？

：filter-node-method="filterNode"？：default-expand-all='false'

？@node-click="handleNodeClick"？：default-expanded-keys='defaultExpandedKeys'？：node-key='nodeKey'？>

…

【視頻監(jiān)控】左側(cè)樹結(jié)構示例代碼：

？：accordion='true'？：highlight-current='true'？

：filter-node-method="filterNode"？：props="defaultProps"？

：default-expand-all='false'？@node-click="handleNodeClick"？

：default-expanded-keys='defaultExpandedKeys'？：node-key='nodeKey'？>

…

通過對比代碼表面上傳入的attribute完全相同，不同之處在于每個el-tree的data屬性的值，以及node-click的方法函數(shù)處理上不同?！倦娮拥貓D】的data是根據(jù)條件查詢出對應的地鐵站點信息，【視頻監(jiān)控】則僅查詢包含監(jiān)控的位置及監(jiān)控設備的信息。在開發(fā)上，只用構建出相同結(jié)構的data信息就能展現(xiàn)出不同的內(nèi)容。

通常一個應用會以一棵嵌套的組件樹的形式來組織（見圖4），在本系統(tǒng)中也可用樹來進行表達z，樹的根級部分為整個應用，子集分別為各個菜單功能模塊，各個功能模塊再進行拆分成多個模塊構成，可以是form表單，可以是table列表，可以是簡單的一個文字，也可以是復雜的地圖等。通過科學的拆分，就像各式各樣的磚塊，將其填充至合適的位置最終壘砌成一個豐富的應用。

5 結(jié)語

本文在Vue.js的基礎上分析城市軌道交通綜合安防系統(tǒng)前端采用模塊化開發(fā)的應用及設計，結(jié)合餓了么開源框架Element-UI構建出風格統(tǒng)一、高性能、高可維護的前端界面，利用模塊化設計，更易把業(yè)務拆分給每個開發(fā)人員，提高開發(fā)效率，也跟上時代的步伐。

【參考文獻】

【1】GB 51151—2016城市軌道交通公共安全防范系統(tǒng)工程技術規(guī)范[S].

【2】GB/T 38311—2019城市軌道交通安全防范通信協(xié)議與接口[S].

【3】GB 51151—2016城市軌道交通公共安全防范系統(tǒng)工程技術規(guī)范[S].