UDN-企业互联网技术人气社区

板块导航

浏览  : 608
回复  : 3

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

[复制链接]
芭芭拉的头像 楼主
发表于 2016-12-31 15:47:48 | 显示全部楼层 |阅读模式
  最近花了近半个多月的时间, 自己纯手工写了一个很小型的类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 例子:
6.png

  class 例子
5.png

  form 例子 (包含model)
4.png

  分页 例子
3.png

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

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

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

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

相关帖子

发表于 2016-12-31 15:48:16 | 显示全部楼层
我是被标题吸引进来的
使用道具 举报

回复

发表于 2016-12-31 15:48:17 | 显示全部楼层
有空一起交流一下
使用道具 举报

回复

发表于 2016-12-31 15:48:19 来自手机 | 显示全部楼层
路过 帮顶 嘿嘿
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部