Ukulelejs 發佈——羽量級JS Framework

時間 2019-11-13

標籤 ukulelejs 發佈羽量級 framework 欄目 JavaScript 简体版

原文原文鏈接

什麼是Ukulelejs javascript
第一個Hello World html
Ukulelejs 目前提供的主要功能 java
爲什麼起名叫Ukulelejs jquery
不足之處，以及後續版本將要加入的功能 git
How to use 程序員
關於做者 github
更新日誌 api
source code
app

什麼是Ukulelejs？
做者我的編寫的超輕量級Javascript框架（壓縮後大小僅僅爲6 kb），底層依賴於jquery，主要功能提供了JS Object與html標籤two way binding。（相似Angularjs）框架

第一個Hello World

<body>
    <div uku-application>
        <input type="text" uku-value="myCtrl.message">
        <br/>
        <p>{{myCtrl.message}}</p>
    </div>
</body>
<script type="text/javascript">
    function MyController() {
        this.message = "";
    }

    $(document).ready(function () {
        var ukulele = new Ukulele();
        ukulele.registerController("myCtrl", new MyController());
        ukulele.init();
    });
</script>

Examples 演示地址

Ukulelejs 目前提供的主要功能

uku-repeat標籤循環渲染

<ul><li uku-repeat="item in myCtrl.items">{{item.name}}</li><ul>

anyObject.anyAttribute 與任意 html標籤的attribute綁定

<input type="text" uku-value="myCtrl.message">

anyObject.anyAttribute 與 html標籤的text綁定

```
{{myCtrl.message}}
```

anyObject.anyFunction 與任意 html標籤的attribute綁定

<input type="text" uku-value="myCtrl.getMessage()">

anyObject.anyFunction 與任意 html標籤的text綁定

```
{{myCtrl.getMessage()}}
```

anyObject.anyFunction 與任意 html標籤的onXXXX事件的綁定

<button uku-onclick="myCtrl.sayHello()">Say Hello</button>

爲什麼起名叫Ukulelejs

做者本人是一名Ukulele愛好者，Ukulele是一種來自於夏威夷的4弦小吉他，她可愛小巧，方便攜帶，易於學習，而且有着本身獨特的音色。做者指望Ukulelejs也能給使用她的人帶來相同的感覺。

不足之處，後續版本將要加入的功能

不支持表達式運算，不支持邏輯表達式(例如{{object.a + object.b}})，目前版本不支持，估計也永遠不會支持。workaround的方式能夠寫function來實現(如{{object.function_A_add_B()}})，由於做者感受把邏輯寫在視圖裏並非一個很好的作法（只是貪圖方便罷了）。

其它新的功能還沒想好

How to use

值得一提的是Ukulelejs沒有api文檔，全部的使用方法歸結爲5點

引入jquery和ukulelejs.js，注意前後順序

<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="ukulele.min.js"></script>

在document的ready中，聲明一個Ukulelejs對象，並註冊你要綁定的Object

function MyController(){
    this.message = "";
}
$(document).ready(function(){
    var uku = new Ukulele();
    uku.registerController("myCtrl",new MyController());
    uku.init();
});