論技術創新支持平臺前端應用

潘侃，張林山，劉世澤

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

0 前言

技術創新支持平臺即可以幫助電網職工搜集電力行業甚至航天、能源、醫學等其他行業的新技術、新方法等技術資料，又可以幫助職工擴展技術創新思路，進而解決電網運行生產工作中技術問題。本文將概述粗略闡述angularjs、用戶體驗及其他前臺技術在本次項目中的應用效果。

1 前端技術的實現與應用

1.1 MVVM

1.1.1 MVVM 設計模式

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

圖1 MVVM 設計模式

1.1.2 MVVM 模式的優勢

MVVM 模式的優勢有如下四點:

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

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

3)獨立開發:開發人員可以專注與業務邏輯和數據的開發(ViewModel)，界面設計人員可以專注于UI (View)的設計;

4)可測試性:清晰的View 分層，使得針對表現層業務邏輯的測試更容易，更簡單。

1.2 AngularJS

1.2.1 angular 中的MVVM 模式

圖2 angular 中關于MVVM 模式的運用

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

2)應用程序邏輯(Logic)和行為(Behavior):應用程序邏輯和行為是用JavaScript 定義的控制器。不需要另外編寫偵聽器或OM 控制器，因為它們已經內置到Angularjs 中了。這些功能使應用程序邏輯很容易編寫、測試、維護。

3)模型數據(Data):模型是從Angularjs 作用域對象的屬性引申的。模型中的數據可能是Javascript 對象、數組或基本類型，這都不重要，重要的是，他們都屬于Angularjs 作用域對象。

Angularjs 通過作用域來保持數據模型與視圖界面UI 的雙向同步。一旦模型狀態發生改變，Angularjs 會立即刷新反映在視圖界面中。

1.2.2 Angularjs 改善用戶體驗

1)在數據展現形式上，技術創新支持平臺的數據有兩種展現形式，一個是思維導圖，一個是數據信息結果展示。按照傳統方式，頁面元素要按照順序逐一加載，頁面加載速度非常慢，等到全部加載完后再展示，用戶體驗不理想;使用Anglarjs 可以實現并發效果，即使思維導圖加載的速度比較慢，但不會影響到查詢結果的加載速度，這樣用戶體驗也會隨之提升。采用思維導圖的形式展示數據，更符合大眾的思維方式。

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

1.2.3 Angularjs 數據綁定特性

Angularjs 擁有雙向的數據綁定特性，圖4。

圖3 雙向的數據綁定特性

在技術創新支持平臺的數據源管理模塊和用戶管理模塊中，當查詢一個信息的時候，只需要在輸入框內輸入要查找的內容就可以找到相關的信息，這就展現了數據綁定的一個方向:從view到model。這樣不但減少了前臺的開發工作量，減少了代碼的行數，同時減少了用戶的操作步驟，增加了用戶的體驗的效果。

1.3 網頁設計

現在由于網頁會根據屏幕寬度調整布局，打破使用絕對寬度固定頁面大小的布局，再加上使用Div+Css3 樣式布局，使頁面載入得更快，修改設計時更有效率，保持視覺的一致性，更好地被搜索引擎收錄;由于CSS 富含豐富的樣式，使頁面更加靈活性，它可以根據不同的瀏覽器，而達到顯示效果的統一和不變形，更有利于用戶的體驗。

2 結束語

互聯網技術的日益成熟，網絡的普及，搜索引擎越來越成為電網不可或缺的工具了。技術創新支持平臺保證高查全率和查準率，有效的幫助職工快速獲取有效信息、拓展了創新思路。

［1］Ari Lerner.Angularjs 權威教程［M］.30－31.

［2］嚴清，李詩劍，譯.Angularjs 入門教程［Z］.

［3］Angularjs 解析原理MVVM 設計模式［Z］.

［4］w3cschool CSS3 教程［Z］.