从 KnockoutJS 到 VueJS

KnockoutJS 和 vuejs 都是前端JavaScript的MVVM模式的实现框架, 也有很多其他的实现;

很多人知道Angularjs(2),Reactjs,Vue.js,以及直接操作DOM的jQuery库, 但是没听说过 KnockoutJS;

其实部分c_sharp程序员可能看到过KnockoutJS, 且一些PHP程序员在magento商城项目上也用过KnockoutJS (注意: 当年没有vuejs,所以技术选型时用了KnockoutJS,且一路走到黑...现在是2019.11)

介绍magento

2005年,Varian公司的员工Roy Rubin和Yoav Kutner基于osCommerce项目做二次开发,

2007.08.31,定名为Magento,

2008.03.31,去掉osCommerce的底层代码,重构并发布第一个稳定的免费开源版本,

2009年,鲍勃·施瓦茨（Bob Schwartz）加入团队, 成为总裁, 然后努力让Magento在全球范围内取得成功;

2009.03,比osCommerce更受欢迎,几星期后发布第一个稳定的企业版本(付费),

2011.02,eBay收购Magento, 2011.06 eBay成为Magento唯一股东;

2015年,Permira(璞米资本,国际投资公司,以欧洲为基地的大型私募基金公司), 从eBay中收购magento,

2018.05.22,Adobe以16.8亿美元收购Magento,并减持竞争对手Shopify商城项目的股份(Shopify是不开源的很简洁清新的SaaS服务商,Magento是开源的能定制化开发的万金油, 盈利模式都是主题/插件的付费商城);

诞生

微软于2010.07.05发布KnockoutJS 1.0版本,兼容IE6, https://knockoutjs.com/downloads/index.html

而VueJS 0.6.0版本发布于2013.12.03, https://github.com/vuejs/vue/releases/tag/0.6.0

学习顺序

历史缘故, 我先接触VueJS, 因项目需要, 所以需要回首去学习KnockoutJS; 我们能发现KnockoutJS存在很多VueJS的雏形/影子, 学习起来... a piece of cake!

以下就是一些笔记(未完待续...)

MVVM模式

三部分:Model, View, ViewModel, 合并就是 MVVM;

Model

页面View Html的来源数据,存储为变量data,或者组件component的props属性。常用AJAX/WebSocket向服务端请求得到。

ViewModel

抽象对象,封装了视图层View的:属性,计算属性,方法,事件绑定,html模板来源。

View

可见、互动的UI界面，展现形式是html标签和css样式, 文本内容来自于Model层, 用户操作会触发事件, ViewModel的事件回调函数会让Model发生变化, 同时刷新View的内容。

Knockout三大核心

属性监控与依赖追踪

声明式绑定

模板机制