轻量级的双向绑定工具 —— ukulelejs

什么是Ukulelejs

一个轻量级的双向绑定工具,你可以把它暂时理解为精简版的Angular。(以下简称ukujs)

先来看一个最简单的双向绑定例子

<div uku-application>
    <input type="text" uku-value="myCtrl.message">
    <input type="text" uku-value="myCtrl.message">
    <textarea rows="4" uku-value="myCtrl.message"></textarea>
</div>
//Register ViewModel
var uku = new Ukulele();
uku.registerController("myCtrl",new MyController());

//Define ViewModel
function MyController(){
    this.hello = "hello, ukulele";
}

《轻量级的双向绑定工具 —— ukulelejs》

什么是Ukulele

《轻量级的双向绑定工具 —— ukulelejs》
还记得这个风靡网络的视频么?这个小正太手里捧着的可爱乐器就叫做Ukulele

Ukulele是一种来自于夏威夷的4弦小吉他,念作尤克里里(台译:乌克里里)

既然已经有了Angularjs,为何还要再去造个轮子

《轻量级的双向绑定工具 —— ukulelejs》

《轻量级的双向绑定工具 —— ukulelejs》

阅读到这里,如果你对ukujs稍微产生了那么一丢丢感兴趣,请戳

《轻量级的双向绑定工具 —— ukulelejs》
官网:http://momoko8443.github.io/ukulelejs_website

(真正的干货都在官网里)

DEMO:http://ukujstore.tiger.mopaasapp.com/
github:https://github.com/momoko8443/ukulelejs

与其它一些流行框架的性能对比

渲染2000个双向绑定对象,所花费的时间
《轻量级的双向绑定工具 —— ukulelejs》

渲染20000个双向绑定对象,所花费的时间
《轻量级的双向绑定工具 —— ukulelejs》
《轻量级的双向绑定工具 —— ukulelejs》

浏览器的支持

Chrome
Firefox
IE 10+
《轻量级的双向绑定工具 —— ukulelejs》

看官您要是看到这里还没有跳转页面的话,我们再来扯扯题外话

Q: 为何起名叫做ukulele?

A: 作者是一位ukulele乐器爱好者。Ukulele相对于Guitar而已少了2根弦(只有4根),体积也小了很多,因此ta可爱小巧,方便携带,易于学习,并且有着自己独特的音色。但是有优点也有缺点,由于少了2根弦导致ta的音域只有2个八度,在某些场合ta无法与钢琴,吉他抗衡。如果把功能健全的Angular比作钢琴的话,那ukujs就是灵动小巧的ukulele。作者也希望ukujs也能给大家带来相同的感受,故给这个js工具起了这个名字。如果说钢琴是一个人的交响乐队的话,那ukulele配合Cajon,口风琴,等其它轻量的乐器一样可以演奏出美丽的乐章。

Q: ukujs诞生记

A: 有个一起玩ukulele在SAP上班的兄弟,一直怂恿作者接点移动端的私活贴补家用,由于作者之前只接触过Angular,但是也知道Angular并不适用于移动端的web应用,所以他决定自己写了一套轻量的双向绑定工具来提高工作效率,于是就有了ukujs,(然而距截稿时为止,他们1笔私活都没接到,好惨)。

Q: ukujs后续的发展

A: 作者十分提倡前端组件化开发,DOM操作与mvvm并存的开发方式,目前最新版的ukujs已经支持webcomponent功能(屌!),ukujs已经趋于稳定,并已投入生产环境,请安心食用。

最后,非常感谢你能阅读完全文,真的非常感谢。如果不吝惜时间的话,请帮忙推荐此文,或至github,star项目。

    原文作者:熊丸子
    原文地址: https://segmentfault.com/a/1190000003803956
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞