Lightweight bidirectional binding tool — ukulelejs

Time:2021-9-10

What is ukulejs

A lightweight two-way binding tool, you can temporarily understand it as a simplified version of angular. (hereinafter referred to as ukujs)

Let’s take a look at the simplest example of two-way binding

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

Lightweight bidirectional binding tool -- ukulelejs

What is ukulele

Lightweight bidirectional binding tool -- ukulelejs
Remember this popular video on the Internet? The cute musical instrument in the little Zhengtai’s hand is called ukulele

Ukulele is a 4-string guitar from Hawaii, pronounced ukulele

Now that we have angularjs, why build another wheel

Lightweight bidirectional binding tool -- ukulelejs

Lightweight bidirectional binding tool -- ukulelejs

After reading this, if you are interested in ukujs a little bit, please stamp it

Lightweight bidirectional binding tool -- ukulelejs
Official website:http://momoko8443.github.io/ukulelejs_website

(the real dry goods are on the official website)

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

Performance comparison with some other popular frameworks

Time spent rendering 2000 bidirectional bound objects
Lightweight bidirectional binding tool -- ukulelejs

Time spent rendering 20000 bi-directional bound objects
Lightweight bidirectional binding tool -- ukulelejs
Lightweight bidirectional binding tool -- ukulelejs

Browser support

Chrome
Firefox
IE 10+
Lightweight bidirectional binding tool -- ukulelejs

If you see that there is no jump page here, let’s digress

Q: Why is it called ukulele?

A: The author is a ukulele instrument lover. Compared with guitar, ukulele has only two strings (only four) and is much smaller. Therefore, it is cute, small, easy to carry, easy to learn, and has its own unique timbre. However, it has both advantages and disadvantages. Due to the lack of two strings, TA’s range is only two octaves. On some occasions, TA can’t compete with piano and guitar. If the functional angel is compared to the piano, it ukujs is the smart and compact ukulele. The author also hopes that ukujs can bring the same feeling to everyone, so he named this JS tool. If the piano is a person’s Symphony Orchestra, ukulele can play beautiful movements together with Cajon, mouth organ and other lightweight instruments.

Q: Birth of ukujs

A: A brother who plays ukulele and works in SAP has always encouraged the author to contact the private work of the mobile terminal to supplement his family. Because the author has only contacted angular before, but also knows that angular is not suitable for the web application of the mobile terminal, he decided to write a set of lightweight two-way binding tools to improve his work efficiency, so he had ukujs, (however, they haven’t received a private job until the deadline. It’s terrible).

Q: Follow up development of ukujs

A: The author advocates the front-end component development and the coexistence of DOM operation and MVVM. At present, the latest version of ukujs has supported the function of webcomponent (cock!). Ukujs has become stable and has been put into production environment. Please feel free to eat.

Finally, thank you very much for reading the full text. Thank you very much. If you don’t spare time, please help recommend this article, or go to GitHub, star project.