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

2019年11月13日 阅读数:54
这篇文章主要向大家介绍轻量级的双向绑定工具 —— ukulelejs,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

几个月前ukulelejs初具雏形的时候,做者就在oschina推过,博客连接请戳 通过几个的不断完善和内部项目实践,ukujs已经趋于稳定,并能够投入生产环境中使用。今天带着全新的官网,再次来推荐一下这款js工具。前端

###什么是Ukulelejs## 一个轻量级的双向绑定工具,你能够把它暂时理解为精简版的Angular。(如下简称ukujs)git

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

<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";
}

输入图片说明 ###什么是Ukulele##web

输入图片说明

还记得这个风靡网络的视频么?这个小正太手里捧着的可爱乐器就叫作Ukulele浏览器

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

###既然已经有了Angularjs,为什么还要再去造个轮子##app

输入图片说明

输入图片说明

###阅读到这里,若是你对ukujs稍微产生了那么一丢丢感兴趣,请戳###框架

输入图片说明 官网:http://ukujs.tiger.mopaasapp.com/mvvm

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

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

###与其它一些流行框架的性能对比## 渲染2000个双向绑定对象,所花费的时间

输入图片说明

渲染20000个双向绑定对象,所花费的时间

输入图片说明

输入图片说明
###浏览器的支持## Chrome Firefox IE 10+

输入图片说明 ###看官您要是看到这里尚未跳转页面的话,咱们再来扯扯题外话## 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并无提供很是完美的实现,(有workaround uku-include)会在后续版本中增强这块的功能。目前ukujs已经趋于稳定,会在不久的未来投入生产环境。

最后,很是感谢你能阅读彻底文,真的很是感谢。若是不吝惜时间的话,请帮忙推荐此文,或至github,star项目。