Ukulelejs 发布——羽量级JS Framework

  1. 什么是Ukulelejs

  2. 第一个Hello World

  3. Ukulelejs 目前提供的主要功能

  4. 为何起名叫Ukulelejs

  5. 不足之处,以及后续版本将要加入的功能

  6. How to use

  7. 关于作者

  8. 更新日志

  9. source code

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

    • <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 发布——羽量级JS Framework_第1张图片

不足之处,后续版本将要加入的功能

不支持表达式运算,不支持逻辑表达式(例如<p>{{object.a + object.b}}</p>),目前版本不支持,估计也永远不会支持。workaround的方式可以写function来实现(如<p>{{object.function_A_add_B()}}</p>),因为作者感觉把逻辑写在视图里并不是一个很好的做法(只是贪图方便罢了)。

其它新的功能还没想好

How to use

值得一提的是Ukulelejs没有api文档,所有的使用方法归结为5点

  1. 引入jquery和ukulelejs.js,注意先后顺序

    1. <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
      <script type="text/javascript" src="ukulele.min.js"></script>
  2. 在document的ready中,声明一个Ukulelejs对象,并注册你要绑定的Object

    1. function MyController(){
          this.message = "";
      }
      $(document).ready(function(){
          var uku = new Ukulele();
          uku.registerController("myCtrl",new MyController());
          uku.init();
      });
  3. 在你想要循环渲染的地方使用uku-repeat标签

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

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

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

  5. 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


























你可能感兴趣的:(JavaScript,mvc,AngularJS,ukulelejs,mvvc)