論技術(shù)創(chuàng)新支持平臺(tái)前端應(yīng)用

潘侃，張林山，劉世澤

(1.云南電網(wǎng)有限責(zé)任公司電力科學(xué)研究院，昆明 650217;2.昆明能訊科技有限責(zé)任公司，昆明 650217)

0 前言

技術(shù)創(chuàng)新支持平臺(tái)即可以幫助電網(wǎng)職工搜集電力行業(yè)甚至航天、能源、醫(yī)學(xué)等其他行業(yè)的新技術(shù)、新方法等技術(shù)資料，又可以幫助職工擴(kuò)展技術(shù)創(chuàng)新思路，進(jìn)而解決電網(wǎng)運(yùn)行生產(chǎn)工作中技術(shù)問(wèn)題。本文將概述粗略闡述angularjs、用戶體驗(yàn)及其他前臺(tái)技術(shù)在本次項(xiàng)目中的應(yīng)用效果。

1 前端技術(shù)的實(shí)現(xiàn)與應(yīng)用

1.1 MVVM

1.1.1 MVVM 設(shè)計(jì)模式

mvvm 從底層實(shí)現(xiàn)了去控制dom 的取值、賦值、綁定事件等，讓程序員可以從原始的復(fù)雜、重復(fù)的編碼中解放出來(lái)，并且且大大減少了程序員需要編寫的代碼量。MVVM 設(shè)計(jì)模式，使用模型－視圖－控制器設(shè)計(jì)模式，如圖1。

圖1 MVVM 設(shè)計(jì)模式

1.1.2 MVVM 模式的優(yōu)勢(shì)

MVVM 模式的優(yōu)勢(shì)有如下四點(diǎn):

1)低耦合:View 可以獨(dú)立于Model 變化和修改，同一個(gè)ViewModel 可以被多個(gè)View 復(fù)用;并且可以做到View 和Model 的變化互不影響;

2)可重用性:可以把一些視圖的邏輯放在ViewModel，讓多個(gè)View 復(fù)用;

3)獨(dú)立開(kāi)發(fā):開(kāi)發(fā)人員可以專注與業(yè)務(wù)邏輯和數(shù)據(jù)的開(kāi)發(fā)(ViewModel)，界面設(shè)計(jì)人員可以專注于UI (View)的設(shè)計(jì);

4)可測(cè)試性:清晰的View 分層，使得針對(duì)表現(xiàn)層業(yè)務(wù)邏輯的測(cè)試更容易，更簡(jiǎn)單。

1.2 AngularJS

1.2.1 angular 中的MVVM 模式

圖2 angular 中關(guān)于MVVM 模式的運(yùn)用

1)模板(Templates):用HTML 和CSS 編寫的文件，展現(xiàn)應(yīng)用的視圖。?您可給HTML 添加新的元素、屬性標(biāo)記，作為Angularjs 編譯器的指令。

2)應(yīng)用程序邏輯(Logic)和行為(Behavior):應(yīng)用程序邏輯和行為是用JavaScript 定義的控制器。不需要另外編寫偵聽(tīng)器或OM 控制器，因?yàn)樗鼈円呀?jīng)內(nèi)置到Angularjs 中了。這些功能使應(yīng)用程序邏輯很容易編寫、測(cè)試、維護(hù)。

3)模型數(shù)據(jù)(Data):模型是從Angularjs 作用域?qū)ο蟮膶傩砸甑?。模型中的?shù)據(jù)可能是Javascript 對(duì)象、數(shù)組或基本類型，這都不重要，重要的是，他們都屬于Angularjs 作用域?qū)ο蟆?/p>

Angularjs 通過(guò)作用域來(lái)保持?jǐn)?shù)據(jù)模型與視圖界面UI 的雙向同步。一旦模型狀態(tài)發(fā)生改變，Angularjs 會(huì)立即刷新反映在視圖界面中。

1.2.2 Angularjs 改善用戶體驗(yàn)

1)在數(shù)據(jù)展現(xiàn)形式上，技術(shù)創(chuàng)新支持平臺(tái)的數(shù)據(jù)有兩種展現(xiàn)形式，一個(gè)是思維導(dǎo)圖，一個(gè)是數(shù)據(jù)信息結(jié)果展示。按照傳統(tǒng)方式，頁(yè)面元素要按照順序逐一加載，頁(yè)面加載速度非常慢，等到全部加載完后再展示，用戶體驗(yàn)不理想;使用Anglarjs 可以實(shí)現(xiàn)并發(fā)效果，即使思維導(dǎo)圖加載的速度比較慢，但不會(huì)影響到查詢結(jié)果的加載速度，這樣用戶體驗(yàn)也會(huì)隨之提升。采用思維導(dǎo)圖的形式展示數(shù)據(jù)，更符合大眾的思維方式。

2)AngularJS 指令可以為提供更好的用戶體驗(yàn)，比如在技術(shù)創(chuàng)新支持平臺(tái)登錄的時(shí)候，指示用戶輸入的是否是一個(gè)正確的郵件地址，是否是一個(gè)正確的的密碼。在查詢用戶名字的時(shí)候，只需要在查詢庫(kù)內(nèi)輸入要查詢的姓名，就可以在下方列表里找到你查找到的內(nèi)容信息。在搜索結(jié)果頁(yè)面，在搜索框內(nèi)輸入查詢的關(guān)鍵字后，在界面就會(huì)顯示出查詢后的結(jié)果信息。這樣方便于用戶，改善用戶體驗(yàn)。

1.2.3 Angularjs 數(shù)據(jù)綁定特性

Angularjs 擁有雙向的數(shù)據(jù)綁定特性，圖4。

圖3 雙向的數(shù)據(jù)綁定特性

在技術(shù)創(chuàng)新支持平臺(tái)的數(shù)據(jù)源管理模塊和用戶管理模塊中，當(dāng)查詢一個(gè)信息的時(shí)候，只需要在輸入框內(nèi)輸入要查找的內(nèi)容就可以找到相關(guān)的信息，這就展現(xiàn)了數(shù)據(jù)綁定的一個(gè)方向:從view到model。這樣不但減少了前臺(tái)的開(kāi)發(fā)工作量，減少了代碼的行數(shù)，同時(shí)減少了用戶的操作步驟，增加了用戶的體驗(yàn)的效果。

1.3 網(wǎng)頁(yè)設(shè)計(jì)

現(xiàn)在由于網(wǎng)頁(yè)會(huì)根據(jù)屏幕寬度調(diào)整布局，打破使用絕對(duì)寬度固定頁(yè)面大小的布局，再加上使用Div+Css3 樣式布局，使頁(yè)面載入得更快，修改設(shè)計(jì)時(shí)更有效率，保持視覺(jué)的一致性，更好地被搜索引擎收錄;由于CSS 富含豐富的樣式，使頁(yè)面更加靈活性，它可以根據(jù)不同的瀏覽器，而達(dá)到顯示效果的統(tǒng)一和不變形，更有利于用戶的體驗(yàn)。

2 結(jié)束語(yǔ)

互聯(lián)網(wǎng)技術(shù)的日益成熟，網(wǎng)絡(luò)的普及，搜索引擎越來(lái)越成為電網(wǎng)不可或缺的工具了。技術(shù)創(chuàng)新支持平臺(tái)保證高查全率和查準(zhǔn)率，有效的幫助職工快速獲取有效信息、拓展了創(chuàng)新思路。

［1］Ari Lerner.Angularjs 權(quán)威教程［M］.30－31.

［2］嚴(yán)清，李詩(shī)劍，譯.Angularjs 入門教程［Z］.

［3］Angularjs 解析原理MVVM 設(shè)計(jì)模式［Z］.

［4］w3cschool CSS3 教程［Z］.