Ukulelejs v1.0 发布 - 羽量级JS Framework

jopen 10年前

作者个人编写的超轻量级Javascript框架，底层依赖于jquery，主要功能提供了js Object对象与html标签绑定的two way binding。（类似Angularjs）

什么是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>

hello world演示地址

Ukulelejs v1.0目前提供的主要功能

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绑定

```
<p>{{myCtrl.message}}</p>
```

anyObject.anyFunction 与任意 html标签的attribute绑定

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

anyObject.anyFunction 与任意 html标签的text绑定

```
<p>{{myCtrl.getMessage()}}</p>
```

anyObject.anyFunction 与任意 html标签的onXXXX事件的绑定

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

为何起名叫Ukulelejs

作者本人是一名Ukulele爱好者，Ukulele是一种来自于夏威夷的4弦小吉他，她可爱小巧，方便携带，易于学习，并且有着自己独特的音色。作者期望Ukulelejs也能给使用她的人带来相同的感受。

Ukulelejs v1.0 发布 - 羽量级JS Framework

后续版本将要加入的功能

最近的一个版本应该会加上include的功能，即在一个html页面中支持引入其他的html代码。这样做的目的是用户可以定制可重用的Component，方便开发。

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 v1.0目前提供的主要功能”

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

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

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

关于作者

作者原本是一位资深Flex程序员，接触了JavaScript后希望，JavaScript也能和Flex的Native功能一样，支持model binding和id select 两者并存的开发模式，所以参考Angular，开发了这套框架。

Source Code

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

Ukulelejs v1.0 发布 - 羽量级JS Framework

相关资讯