【41计划打卡-02】AvalonJs-前端MVVM框架
受到推荐加项目需要,学习了这个不太出名但其实挺优秀的框架,看的是司徒正美老师(正是这个框架的作者)在segmentfault的基础教程,最近是看完了最基础的部分,确实能感受到这个框架的各种方便,首先给出我的代码的github地址(直接点击阅读原文也可以哈):
https://github.com/ZBayes/AvalonLearning
里面有我的笔记和程序代码,当然还存在部分问题,暂时搁置等待解决。
根据作者自己的介绍,avalon2是一款基于虚拟DOM与属性劫持的迷你、易用、高性能的前端MVVM框架,拥有超优秀的兼容性,支持移动开发,后端渲染,WEB Component式组件开发,无需编译,开箱即用。
下面给一个很简单的例子来感受一下这个框架:
此部分攥写的js代码式一个vm对象实例,里面有两个属性$id和a,其中的$id可以看做是这个vm对象的键值,a是一个自定义的属性。
于是,在div中添加一个属性,ms-controller,将其名字定义为test,这时候,就能对应上面建立的vm属性,于是在这个div里面就能够调用这个vm对象里面的内容了。input控件上回默认输入vm对象里面的a属性的内容,即123,同理<p>标签里面也会有123出现,如下面所示:
这就是所谓的虚拟DOM与属性劫持,这个也是Avalon最核心的原理,通过在DOM节点里面埋属性来实现特定功能,下面是作者对一些主要功能进行的总结:
例如一些特殊的验证,再也不用我们自己去苦逼的写正则表达式了,这个非常赞,别的也不一一列举了。
总之呢,还是非常推荐一款框架,值得学习!另外,我也只是学了比较简单的教程,后面还有一些组件的编写还没学完。对于初学者,我的建议大概是这样的:
前端而言,HTML,CSS,JavaScript必须会,这是根。
根据参考文献[2]里面的文章,按照时间顺序跟着学一遍,写一遍,看好,按照时间顺序。
核心是了解一些功能和思想的实现,但是注意自己要多动手。
注意avalon的版本,现在的大版本是2,关于1.X的东西,酌情看看就好,并不一定都能用上,部分功能被整理和整合而并非原来的使用方法。
教程中可能提到一些基础,例如其他框架之类的,其实0基础并没有关系,像我一样(但是,参看第一条,根必须会才能看得懂)。
我也就只能说这么多了,觉得不错也推荐给大家,也为我这个自己作出来的读书计划打一次卡(平均而言一个月应该打3.4次卡的额,上个月才一次)。如果有兴趣的也可以学起来的~下面是参考文献:
[1] 司徒正美. RubyLouvre/avalon[EB/OL]. https://github.com/RubyLouvre/avalon.
[2] 司徒正美. 司徒正美 的文章[EB/OL]. https://segmentfault.com/u/situzhengmei/articles?page=1.
[3] 司徒正美. avalonjs GitBook[EB/OL]. http://avalonjs.coding.me/.
说明一下,第一个是司徒正美在github上的项目,在里面找到avalon.js(里面有好几个,具体哪个是真的,自己找吧哈哈)引用即可,想看源代码直接在里面看;第二个就是我之前说的教程文章,记得按照时间顺序看欧(第三遍强调了,你应该想象得到我踩了多大的坑);第3篇是关于avalon的网页版文档,建议也对比着看看。后续我还会接着看组件部分,由于我尚属于菜鸟,有什么问题赶紧指出啊。(点击阅读原文,进入的是我的github上的关于Avalon的笔记)
QQ:545281848