• 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框架有所帮助。

  • 相关阅读:
    印象笔记和有道云笔记竞品分析
    印象笔记需求分析文档
    ES(Elasticsearch)
    java8中optional和.stream().map()
    设计模式-builder(构造器模式)
    throw与throws
    异常java.lang.NumberFormatException解决
    Spring注解
    Spring配置数据源以及hibernate
    log4j配置文件——hibernate
  • 原文地址:https://www.cnblogs.com/leonwang/p/link.html
Copyright © 2020-2023  润新知