1000行代码实现MVVM (类似Angular1.x.x , Vue)

   最近花了近半个多月的时间， 自己纯手工写了一个很小型的类angularjs/vue的mvvm 库. 目前已经用于公司一个项目。 项目托管在github https://github.com/leonwgc/link

 也许有许多人觉得如今angularjs , react , vue , knockout ,avalon 等框架/库层出不穷， 为什么还要自己造一个相同（类似）的轮子？

 原因如下：

 1 . 从最初knockoutjs 到现在用angularjs ，写了不少项目， 一直想自己写一个mvvm练练手,顺便熟悉巩固下最基础的html, css ,js知识 。 

 2.  最近独立一人写公司的一个项目，用的angularjs + ui-router , 客户反应怎么一个登陆注册页面，没多少东西这么慢 （其实也还好，但是不是秒开），好吧， 我也不好解释说这是一个单页网站，只有第一次加载慢点，后面很快，因为所有东西都打包在一起了，后面我将登陆前(包含注册，登陆，开户..)和登陆后分开打包，SPA(single page app)变成了twoPA （哭），绝不多引用一个js文件, 然并卵angular + ui-router 一套下来， 就算minified也要大几百K， 速度感觉没有多大提升 （不能秒开）， 考虑到这个项目浏览器只需支持IE8+ ,chrome , safari , firefox 等最新版本的浏览器，然后看了看最近炒作比较凶的Vue， 因为这个库比angular 小许多， 后面也融合了Virtual DOM 等技术， 看了原理介绍及官网，感觉实现一个类似的东西不难， 而且目前Vue包含的东西太多太全以至于库也变大了， 目前我的需求只是登陆，注册秒开（登陆后的那个SPA还是保留angular+ui-router一套全家桶, 因为里面内容花哨， 所以没人觉得应该秒开【其实也没法秒开】），不想在一个项目又引入另一个大框架，所以下定决心自己写一套。

link 的功能：

1. 和angular一样的内置指令：x-bind, x-model, x-repeat, x-show, x-hide, x-class, x-disabled, x-view

用法和angular的ng-xx 系列一致， 最近加了相应指令的demo ， 另外包含一个分页和表格的demo ， 打开项目demo目录index.html , 点击相应的demo 按钮即可体验

 repeat 例子: 

 class 例子 

 form 例子 (包含model)

分页 例子 

2. filter 功能， 和angular 一样， 可以自定义filter , 不过目前仅支持配合x-bind 使用，暂不支持 {{expr | filter }}

3. 内置location.hash实现的路由功能，后面会加上html5 history api实现 , 可以配合x-view 实现路由加载模板，但x-view 不是必须,后面有时间再加上其他的例子。

4. 事件的支持， 支持所有浏览器原生事件，事件指令以x-on- 开头， 比如click ,  用x-on-click=‘clickHandler‘ 或 x-on-click=‘clickHandler()‘ 或 x-on-click=‘clickHandler(args..)‘ ,可以从相关demo中查看如何定义和使用， 事件基本和Vue类似。

 目前link已经满足了我的项目需求，后面我会加上其他的功能并完善和优化现有功能， 但是我会尽量控制代码行数， 保持体积轻便， 希望这个项目对于大家认识和学习其他MVVM框架有所帮助。

原文：http://www.cnblogs.com/leonwang/p/link.html