最近花了近半个多月的时间, 自己纯手工写了一个很小型的类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框架有所帮助。

1000行代码实现MVVM (类似Angular1.x.x , Vue)的更多相关文章

  1. (转)如何基于FFMPEG和SDL写一个少于1000行代码的视频播放器

    原文地址:http://www.dranger.com/ffmpeg/ FFMPEG是一个很好的库,可以用来创建视频应用或者生成特定的工具.FFMPEG几乎为你把所有的繁重工作都做了,比如解码.编码. ...

  2. 1000行代码徒手写正则表达式引擎【1】--JAVA中正则表达式的使用

    简介: 本文是系列博客的第一篇,主要讲解和分析正则表达式规则以及JAVA中原生正则表达式引擎的使用.在后续的文章中会涉及基于NFA的正则表达式引擎内部的工作原理,并在此基础上用1000行左右的JAVA ...

  3. 190行代码实现mvvm模式

    前言 网上讲 vue 原理,mvvm 模式的实现,数据双向绑定的文章一搜一大堆,不管写的谁好谁坏,都是写的自己的理解,我也发一篇文章记录自己的理解,如果对看官有帮助,那也是我莫大的荣幸,不过看完之后, ...

  4. delphi 自我删除和线程池(1000行代码,需要仔细研究)

    unit Unit4; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  5. 学会lambda表达式,能让你少敲1000行代码!

    01.什么是 lambda 表达式 1. 函数式接口 在聊起 lambda 表达式之前,我们不得不提起函数式接口:一个接口只包含唯一的方法,那么它就是函数式接口.例如: public class La ...

  6. 爬数据,能让你少写1000行代码的捷径! | Python 正则表达式

    ▌春暖花开,又到了出门游玩拍拍拍吃吃吃的好季节了! 说到拍照摄影,你会构图吗?就是在照片有限的空间内处理人.景.物的关系,并将三者安排在画面中最佳的位置,以形成画面特定结构的方法. 学院君就是一个「拍 ...

  7. Liunx查看后1000行的命令以及查看中间部分

    linux 如何显示一个文件的某几行(中间几行) [一]从第3000行开始,显示1000行.即显示3000~3999行 cat filename | tail -n +3000 | head -n 1 ...

  8. JavaScript模板引擎原理,几行代码的事儿

    一.前言 什么是模板引擎,说的简单点,就是一个字符串中有几个变量待定.比如: var tpl = 'Hei, my name is <%name%>, and I\'m <%age% ...

  9. 程序员的复仇:11行代码如何让Node.js社区鸡飞狗跳

    来源自:http://www.techug.com/node-js-community 几天前,一名 NPM(Node.js Package Manager)社区的贡献者 Azer Koçulu 出于 ...

随机推荐

  1. 无法向会话状态服务器发出会话状态请求。请确保 ASP.NET State Service (ASP.NET 状态服务)已启动,并且客户端端口与服务器端口相同。如果服务器位于远程计算机上,请检查。。。

    异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 无法向会话状态服务器发出会话状态请求.请确保 ASP.NET State Ser ...

  2. ExtJS 4.2 Grid组件的单元格合并

    ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...

  3. Matlab 高斯_拉普拉斯滤波器处理医学图像

    前言:本程序是我去年实现论文算法时所做.主要功能为标记切割肝脏区域.时间有点久,很多细节已经模糊加上代码做了很多注释,因此在博客中不再详述. NOTE: 程序分几大段功能模块,仔细阅读,对解决医学图像 ...

  4. 神马玩意,EntityFramework Core 1.1又更新了?走,赶紧去围观

    前言 哦,不搞SQL了么,当然会继续,周末会继续更新,估计写完还得几十篇,但是我会坚持把SQL更新完毕,绝不会烂尾,后续很长一段时间没更新的话,不要想我,那说明我是学习新的技能去了,那就是学习英语,本 ...

  5. 带你实现开发者头条APP(三) 首页实现

    title: 带你实现开发者头条APP(三) 首页实现 tags: 轮播广告,ViewPager切换,圆形图片 grammar_cjkRuby: true --- 一.前言 今天实现开发者头条APP的 ...

  6. 如何利用tcpdump对mysql进行抓包操作

    命令如下: tcpdump -s -l -w - dst -i eno16777736 |strings 其中-i指定监听的网络接口,在RHEL 7下,网络接口名不再是之前的eth0,而是 eno16 ...

  7. AFNetworking 3.0 源码解读(九)之 AFNetworkActivityIndicatorManager

    让我们的APP像艺术品一样优雅,开发工程师更像是一名匠人,不仅需要精湛的技艺,而且要有一颗匠心. 前言 AFNetworkActivityIndicatorManager 是对状态栏中网络激活那个小控 ...

  8. Highcharts中国地图热力图

    最近有个项目需要将MC销量按大陆各省统计,并以中国地图人力图效果显示.由于项目一直使用Highcharts进行图表的统计,故采用Highmaps来实现. 效果如下: 1)中国各个省.直辖市.自治区: ...

  9. Java 教程整理:基础、项目全都有

    Java 在编程语言排行榜中一直位列前排,可知 Java 语言的受欢迎程度了. 网上有很多 Java 教程,无论是基础入门还是开发小项目的教程都比比皆是,可是系统的很少,对于Java 学习者来说找到系 ...

  10. closure

    什么是闭包?百度的答案: 闭包是指可以包含自由(未绑定到特定对象)变量的代码块:这些变量不是在这个代码块内或者任何全局上下文中定义的,而是在定义代码块的环境中定义(局部变量)."闭包&quo ...