Ukulelejs 发布——羽量级JS Framework

2019年11月13日 阅读数:24
这篇文章主要向大家介绍Ukulelejs 发布——羽量级JS Framework,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

  1. 什么是Ukulelejs javascript

  2. 第一个Hello World html

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

  4. 为什么起名叫Ukulelejs jquery

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

  6. How to use 程序员

  7. 关于做者 github

  8. 更新日志 api

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

    • <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也能给使用她的人带来相同的感觉。

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

不支持表达式运算,不支持逻辑表达式(例如<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