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

时间: 2024-11-05 13:26:23

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

1000行代码写小游戏(终)

最后献上完整的1000行代码,基本功能已经完成,可以通过配置小怪和矿的位置和大小控制玩家时长和难度: -------------------------------------------------------------------------------------------- -- Added by ??? ------------------------------------------------------------------------------------------

javascript学习笔记-正则表达式-少写1000行代码的正则表达式

正则表达式的要点  :  查找   匹配   替换 程序员必知:让你少写1000行代码的20个正则表达式 一个十分古老而又强大的文本处理工具,仅仅用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑.熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升. 正则表达式经常被用于字段或任意字符串的校验,如下面这段校验基本日期格式的Java代码: 下面是蓝鸥HTML5培训小编整理的,在前端开发中经常使用到的20个正则表达式. 1 . 校验密码强度 密码的强度必须是包含大小写字母和数字

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

简介: 本文是系列博客的第一篇,主要讲解和分析正则表达式规则以及JAVA中原生正则表达式引擎的使用.在后续的文章中会涉及基于NFA的正则表达式引擎内部的工作原理,并在此基础上用1000行左右的JAVA代码,实现一个支持常用功能的正则表达式引擎.它支持贪婪匹配和懒惰匹配:支持零宽度字符(如"\b", "\B"):支持常用字符集(如"\d", "\s"等):支持自定义字符集("[a-f]","[^b-

能让你少写1000行代码的20个正则表达式(javascript版本)

正则表达式经常被用于字段或任意字符串的校验,如下面这段校验基本日期格式的JavaScript代码: var reg = /^(\\d{1,4})(-|\\/)(\\d{1,2})\\2(\\d{1,2})$/; var r = fieldValue.match(reg); if(r==null)alert('Date format error!'); 1 . 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间. ^(?=.*\\d)(?=.*[a-z])

能让你少写1000行代码的20个正则表达式

1 . 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间. ^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 2. 校验中文字符串仅能是中文. ^[\\u4e00-\\u9fa5]{0,}$ 3. 由数字.26个英文字母或下划线组成的字符串 ^\\w+$ 4. 校验E-Mail 地址同密码一样,下面是E-mail地址合规性的正则检查语句. [\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&am

学会这二十个正则表达式,能让你少些1000行代码!

正则表达式,是一个强大且高效的文本处理工具.通常情况下,通过一段表达准确的表达式,能够非常简短.快速的实现复杂业务逻辑. 因此,正则表达式通常是一个成熟开发人员的标配,可以辅助实现开发效率的极强提升. 在需要实现校验字段.字符串等内容时,通常就可以通过正则表达式实现: 下面是技匠整理的,经常使用到的20个正则表达式. 1校验密码强度 密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间. 2校验中文 字符串仅能是中文. 3由数字.26个英文字母或下划线组成的字符串 4

TangIDE游戏开发之60行代码实现打地鼠

对于没有接触过html的朋友,要实现一个最简单的html5打地鼠游戏,也是不知道从何下手的.就算是html高手,没有上千行代码,也完不成一个像样的打地鼠游戏. 网上找到一个开源的打地鼠游戏(参见下载地址),粗略看了一下代码,代码行数1000+. 今天我要介绍的打地鼠游戏,主要逻辑代码,也就60多行,所有的代码加起来也就100多行,是为某客户定制的一款比较完整的商业游戏,大部分的功能也就只是一下午的时间就能完成. 先看一下实际的成果: PC点击这里玩 手机下方扫描二维码玩 如果你想在本游戏上进行改

【转载】88行代码实现俄罗斯方块游戏(含讲解)

来源:http://misaka.blog.com/p/8 在正式阅读本文之前,请你记得你应该用娱乐的心态来看,本代码所使用到的技巧,在工作了的人眼里会觉得很纠结,很蛋疼,很不可理喻,很丑,注意,是你蛋疼,不关我的事 通常,写一个俄罗斯方块,往往动不动就几百行,甚至上千行,而这里只有88行正所谓头脑风暴,打破常规.这里将使用很多不平常的手段来减少代码 以下是Win-TC可以成功编译并执行的代码(代码保证单行长度不超过80字符,如果你是Win7系统,那请看后文): #include "graphi

Kaggle—So Easy!百行代码实现排名Top 5%的图像分类比赛

Kaggle-So Easy!百行代码实现排名Top 5%的图像分类比赛 作者:七月在线彭老师说明:本文最初由彭老师授权翟惠良发布在公众号"七月在线实验室"上,现再由July重新编辑发布到本blog上.Github: https://github.com/pengpaiSH/Kaggle_NCFM 前言 根据我个人的经验,学好AI,有五个必修:数学.数据结构.Python数据分析.ML.DL,必修之外,有五个选修可供选择:NLP.CV.DM.量化.Spark,然后配套七月在线的这些必修