使用 jQuery 和 KnockoutJS 開發在線股票走勢圖應用


請在文章結尾處體驗本應用。
截圖展示:
 
背景
隨着Android、iPhone、iPad等手持設備的推出。用戶對手持設備上程序的流暢程度要求也越來越高。伴隨着HTML5的推出,開發者們可以結合JavaScript 代碼庫實現流暢如桌面程序的BS程序。
目前為止,針對大多數開發人員而言,使用JavaScript 和 HTML 編寫應用程序也是頗為困難的。因為開發者不僅需要實現業務邏輯,同時還需要在用戶界面、使用 JS 操作所有的 DOM 元素上花費大量心思。 相對而言,使用Silverlight 創建 Web 應用程序更加容易,因為業務邏輯和用戶界面可以相對獨立的設計,然后通過“聲名式綁定”連接業務邏輯和用戶界面。

自從jQuery,jQuery UI 和 KnockoutJS 發布以來,這種狀況有所改變。這些 JS 庫包含標准、統一的HTML 標簽操作方法(jQuery)、添加界面插件(jQuery UI),還包含使用KnockoutJS 連接業務邏輯層和用戶界面。

這篇文章簡略的描述了Invexplorer的使用方法和制作方法。Invexplorer是一款類似於Google 財經的股票走勢圖應用,使用 HTML5和JavaScript編寫。
在瀏覽器中打開

用戶可以通過自動完成文本框添加股票。如果我們在文本框中輸入“ford mot”,文本框會自動關聯出和“ford mot”相關項列表。我們從列表中選擇目標,點擊“Add to Portfolio”按鈕,該股票就被添加到股票走勢圖表中了。我們可以通過點擊Chart列下復選框來控制是否顯示某支股票的走勢圖,同時我們可以通過雙擊表格中的單元格編輯股票數據。

當用戶打開應用程序,股票信息就會自動加載。
應用使用 MVVM 模式開發,View 模式類使用KnockoutJS 庫實現。用戶界面通過HTML5 和自定義控件實現: Wijmo jQuery 庫自動完成文本框和圖表。Wijmo jQuery 庫可以完美的兼容KnockoutJS 。
如果對 Silverlight 版本感興趣,請點擊這里。

免責聲明:
    Invexplorer 是一款用於展示KnockoutJS 和自定義控件。數據來源為Yahoo 財經,Yahoo財經為付費服務。
如果您在本程序的基礎上進行二次開發,請聯系 Yahoo 獲得使用許可。如果產生糾紛,本博客概不負責。

 

本文章中一些名詞解釋
簡要的MVVM介紹
MVVM是Model-View-ViewModel的簡寫。

可以說MVVM是專為WPF打造的模式, 也可以說MVVM僅僅是MVC的一個變種, 但無論如何, 就實踐而言, 如果你或你的團隊沒有使用"Binding"的習慣, 那么研究MVVM就沒有多大意義。更多內容請參考:什么是MVVM
View 模式類圖:



簡要的KnockoutJS介紹
KnockoutJS 提供兩個重要的元素使用MVVM模式:
•    JavaScript 類observable 和observableArray,用於監視ViewModel 變量的變動。
•    當頁面中變量改變時,和observables 關聯的HTML 擴展標記會自動更新數據。HTML擴展標記是非常豐富的,除了展示數值和字符串,他們也可以用於定制樣式、展示列表、表格、圖表等。這些The markup extensions are similar to Binding objects in XAML development.
使用KnockoutJS 開發程序,首先我們需要從創建包含業務邏輯ViewModel 的類開始。這些類可以通過在創建 View 之前進行測試。View 層使用HTML CSS 創建。
最后,通過KnockoutJS ApplyBindings 方法連接ViewModel和View,在這個方法中Object 模式被作為參數實際上創建綁定。
在我看來,KnockoutJS僅僅是一個外殼、一個框架,這些只是JS 框架的一些延伸。KnockoutJS 擁有豐富的官方例子、資源和詳細的文檔,可以從KnockoutJS 的官網獲取。

Wijmo
由於篇幅限制,這里就不過多解釋了,請參考百度百科 Wijmo
 
Invexplorer
原始的Invexplorer 應用程序基於Silverlight開發,使用MVVM 模式(查看Silverlight版本)。KnockoutJS 發布之后,我們通過HTML5/JavaScript 實現了該程序。
轉移代碼到KnockoutJS 僅僅用了幾天的時間。工作量最多的部分是使用 JavaScript 寫 View 模式,使用KnockoutJS 庫區實現observable 對象。編寫View十分容易,因為我們可以很容易的獲取所使用的控件:自動完成控件和 Wijmo Chart 圖表控件。

好了,經過介紹之后一定特別期待吧,開始你的體驗之旅吧(如果頁面沒有加載完成,請耐心等待):

使用資源:
1.    http://demo.componentone.com/wijmo/invexplorer 本應用在線例子。
2.    http://knockoutjs.com KnockoutJS 主頁。
3.    http://jqueryui.com/ jQueryUI 主頁。
4.    http://wijmo.com Wijmo 主頁。 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM