使用 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 主页。

5. http://www.gcpowertools.com.cn/products/c1_asp_overview.htm Wijmo 中文网站

转载于:https://www.cnblogs.com/C1SupportTeam/archive/2012/08/24/2653913.html

使用 jQuery 和 KnockoutJS 开发在线股票走势图应用相关推荐

Flask 扫盲系列-在线股票走势图
今天我们来分享一个 Flask 小应用,如何动手实现一个简易的在线股票 K 线图表.我们需要用到的知识包括 PyEcharts 的使用,tushare 库获取股票数据的方法以及 Flask 的基本用法 ...
用C#开发的双色球走势图（原创）值得园友拥有（二）接上一篇
昨晚由于时间的原因只写了一部分内容,今天将这一部分内容补充完毕,多谢各位园友的支持. 这是用C#开发的双色球走势图(原创)值得园友拥有新的园友可以看昨晚写的内容,以免脱节.首先回复园友的评论,有说好 ...
平均股价的时间序列图形_数据可视化——pandas绘制股票走势图
python数据可视化工具除了matplotlib底层绘图包,还有在matplotlib基础上分装的seaborn绘图包,此外,数据分析报pandas也在matplotlib基础上分装内置了绘图功能. ...
一步一步教你写股票走势图——K线图二（图表联动）
目录一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...
一步一步教你写股票走势图——K线图四（高亮联动一）
目录一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...
一步一步教你写股票走势图——K线图三（添加均线）
目录一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...
android 分时图x轴宽度,一步一步教你写股票走势图——分时图二（自定义xy轴）...
目录一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...
一步一步教你写股票走势图——分时图二（自定义xy轴）
目录一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...
python 画股票走势图_使用Python matplotlib绘制股票走势图
一.前言 matplotlib[1]是著名的python绘图库,它提供了一整套绘图API,十分适合交互式绘图.本人在工作过程中涉及到股票数据的处理如绘制K线等,因此将matplotlib的使用心得进行 ...
用python绘制股票图_【转】使用Python matplotlib绘制股票走势图
一.前言 matplotlib[1]是著名的python绘图库,它提供了一整套绘图API,十分适合交互式绘图.本人在工作过程中涉及到股票数据的处理如绘制K线等,因此将matplotlib的使用心得进行 ...

使用 jQuery 和 KnockoutJS 开发在线股票走势图应用

使用 jQuery 和 KnockoutJS 开发在线股票走势图应用相关推荐

最新文章

热门文章