輕量級的雙向綁定工具 —— ukulelejs

binaryTree 發布于2019-08-21 10:42 / 3320人閱讀

摘要：什么是一個輕量級的雙向綁定工具，你可以把它暫時理解為精簡版的。相對于而已少了根弦只有根，體積也小了很多，因此可愛小巧，方便攜帶，易于學習，并且有著自己獨特的音色。作者也希望也能給大家帶來相同的感受，故給這個工具起了這個名字。

什么是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雙向數據綁定

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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