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

binaryTree 发布于2019-08-21 10:42 / 3305人阅读

摘要：什么是一个轻量级的双向绑定工具，你可以把它暂时理解为精简版的。相对于而已少了根弦只有根，体积也小了很多，因此可爱小巧，方便携带，易于学习，并且有着自己独特的音色。作者也希望也能给大家带来相同的感受，故给这个工具起了这个名字。

什么是Ukulelejs

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

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

//Register ViewModel
var uku = new Ukulele();
uku.registerController("myCtrl",new MyController());

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

什么是Ukulele

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

Ukulele是一种来自于夏威夷的4弦小吉他，念作尤克里里（台译：乌克里里）

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

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

官网：http://momoko8443.github.io/ukulelejs_website

（真正的干货都在官网里）

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已经支持webcomponent功能（屌！），ukujs已经趋于稳定，并已投入生产环境，请安心食用。

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

云服务器 GPU云服务器双向绑定双向数据绑定 js双向绑定 js双向数据绑定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86027.html

双向绑定+Web Component轻量库Ukujs 1.1.0 发布

摘要：但是是幸运的，她却并没有无疾而终，反而是在不断开发的过程中，让主感觉到了前所未有的的满足感，成就感，以及自豪感。 2015年9月29日在sf发布了po主的第一篇专栏文章——《轻量级的双向绑定工具 —— ukulelejs》（

NusterCache 2019-08-19 18:22 评论0 收藏0
vue.js 基础知识篇

摘要：的核心库只关注视图层，并且非常容易学习，非常容易与其他库或已有的项目整合。用户视图改变的时候，业务模型中的数据也可以发生改变。组件化指令系统开始支持虚拟是操作的真是，而不是虚拟虚拟可以提升页面的刷新速度。一个基本的示例是由三部分组成视图。 vue.js什么 Vue.js 被定义成一个用来开发 Web 界面的前端库，是个非常轻量级的工具。 Vue.js本身具有响应式编程和组件化的特点。...

wendux 2019-08-20 19:02 评论0 收藏0
实现一个简单的双向绑定

摘要：下图展示了实现双向绑定的流程实现一个简单的双向绑定双向绑定最最最初级进阶版操作是非常耗时和好性能，所以在优化过程中先从操作入手。接触Vue有一段时间了，但是对于其双向绑定的实现一直是似懂非懂，今天看到一篇写的比较好的文章传送门1 根据原作者的指导自己也去实现了一遍简单的 demo （本文的demo均基于Object.defineProperty 实现数据劫持，利用了对Vue.js实...

elisa.yang 2019-08-22 11:10 评论0 收藏0
JS中的双向数据绑定及Object.defineProperty方法

摘要：，而且每种框架双向数据绑定的实现方式都不太一致，比如内部使用的是脏检查，而内部实现方式的本质是设置属性访问器。在中也有类似的概念，不过不叫魔术方法，而是叫做访问器。缘起前几天在看一些流行的迷你mvvm框架（比如avalon.js、 vue.js 这种较轻的框架，而非Angularjs、Emberjs这种较重的框架）的实现。现代流行的mvvm框架一般都会将数据双向绑定（two-ways...

szysky 2019-08-23 13:45 评论0 收藏0