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();
});

在你想要循环渲染的地方使用uku-repeat标签

具体使用方法参考上文 “Ukulelejs目前提供的主要功能”

在你想要绑定的html属性前加上uku-，在你想要绑定的text处，加上{{ }}，在你想要绑定的事件前也加上uku-

具体使用方法参考上文 “Ukulelejs目前提供的主要功能”

Ukulelejs支持多层的repeat嵌套（n层for循环），也支持深度attribute/function绑定（anyObject.attr1.subattr2.xxx.yyy.xxx）

关于做者

做者本来是一位资深Flex程序员，接触了JavaScript后但愿，JavaScript也能和Flex的Native功能同样，支持model binding和dom操做二者并存的开发模式，因此参考Angular，开发了这套框架。

更新日志

2015-06-21 ：支持 function传参

2015-06-25 ：支持function的参数来自于不一样的scope。

2015-06-29 ：支持include功能，加载外部html tag

2015-06-29 ：优化了example页面

Source Code

Git： ~~https://git.oschina.net/momoko8443/ukulelejs.git~~

https://github.com/momoko8443/ukulelejs