Koala - 考拉脚本库是一个便捷，轻巧的新型面向对象的javascript框架 - 前端

分享到微信朋友圈

X

关于Koala

Koala是一个便捷，轻巧的新型面向对象的javascript框架，综合各种主流框架的特点，支持级联代码，面向对象，传统方式的代码风格，底层代码简单易懂，可扩展，可移植性性强，可以快速的构建简单的页面交互组件，使构建的组件代码适合在各种团队内分发协作。如果您是一位JSer，或者想成为一名JSer，Koala会辅助您快速上手JS，减少诸多重复而枯燥的原生方法调用，从而专注于程序应用逻辑的实现，使得代码更加的健壮。另外如果您被各种"$"符号搞的晕头转向的时候，那就尝试一下Koala吧！

框架地址

开发版

<script type="text/javascript" src="http://mat1.gtimg.com/www/js/Koala/Koala.dev.1.5.js"></script>

Min版

<script type="text/javascript" src="http://mat1.gtimg.com/www/js/Koala/Koala.min.1.5.js"></script>

更新日志

2011年11月17日 Koala1.0正式版发布

修正loose.dtd下事件绑定的问题
增加了K.A.each返回方法，K/KK.select, K/KK.getBy,K.getByTagName方法。
文档样式相关增加了css操作，getStyle，setStyle操作,增加了Kdom属性，Kdoms属性的文档片
优化了sizzle选择器的文档
优化文档的查看体验

2011年12月2日 Koala插件机制完成

实现了插件功能，并完成插件开发规范文档
更改了insert方法的使用
增加了Hash对象和迭代Enumerable对象
增加了K.String的include包含方法，toQueryParams方法
优化了快速选择符K的效率，
调整了K.A.each方法的返回值
编写了插件K.ajax并完成对应文档
修正了page.x,page.y,client.x,client.y文档

12月8日

修正了K/KK().append方法的使用

2012年1月4日

增加了文档搜索API的功能
添加了width,height,pageX,pageY,parentX,parentY,html,attr功能和对应文档
修正个个别api名称过长的问题

2012年8月27日发布1.4.1版本

完成Qfast与Koala整合
添加顶层窗口K().scrollTop()和K().scrollLeft()的方法
添加顶层窗口鼠标滚轮:K().bind('mousewheel',function(){}),拖动滚动条的事件:K().bind('scroll',function(){})
分发了发布系统公共页面片以供使用
简化了KK多节点到单节点的节点转化形式,解释，若KK(selector)选择为一个节点，则自动转化为单节点kwdom，代替以往KK(selector).item(0)
修正了部分文档bug

2012年11月28日发布1.5版本

修正IE下调用浏览器私有api console.log出现alert弹层问题
增加parentWrap,childWrap两个新api
增加了选择器选择不到页面节点不会报错的功能，应对编辑手动删除HTML,没有删除js的情况
增加K.debug(1)函数，可精确定位选择器错误。解决bug定位问题
增加选择器HTML属性，可方便的查看到选择到的HTML节点信息
修整了若干文档bug

1.6版本计划:Koala离子CMD模块化

快速入门

Koala以K，KK为入口，在文档中进行对节点的遍历和操作，

首先，K作为框架提供的一个快速的页面ID选择器入口，您可以针对页面中如

<div id="d1">content</div>

进行K("d1")的操作，也可以作为函数加载器进行组件代码载入。

其次，KK作为多元素选择符，可以选择页面的您可以针对页面中诸多如

<div class="class">content</div>

进行K(".class")的选择并附加方法操作。

以下为示例：

1.函数加载器 K 比较 window.onload

<script type="text/javascript">
    如果您还在使用
    window.onload = function () { alert("old onload") }
    或者
    addEvent(window, 'load', function () { alert("old onload") })

    那试一试这个
    K(function () {
        alert('Koala onload')
    })  
</script>

2. ID选择符 K("elem") 比较 document.getElementById("elem")

<script type="text/javascript">
    var $ = function (elem) { return document.getElementById(elem) }; $("elem")
    用下面单元素选择符K可以替代
    K("elem")  
</script>

3. 多元素选择符 KK("selector")比较document.getElementsByTagName("selector")

<script type="text/javascript">  
    KK("span") 选取所有页面中的span元素  
    KK(".class1") 选取页面中所有节点class名称为class1的元素  
    KK("#test") 选择页面中节点ID为test  
    KK("#test" ".class1") 选择页面中节点ID为test和节点class名称为class1的元素。  
</script>

4. 支持链式方法调用

<script type="text/javascript">
    K('appendtest1').addClassName("aaa").removeClassName("aaa");
    KK("span").addClassName("enen").append("LA")  
</script>

5. 支持面向对象的编程模式

<script type="text/javascript">
    var Animal = K.fn.create({
        init: function (name, sound) {
            this.name = name;
            this.sound = sound;
        },
        speak: function () {
            alert(this.name + " says: " + this.sound + "!");
        }
    });

    var Elephant = new Animal("Elephant", 'nnnnnnn');
    Elephant.speak();

    // 继承父对象Animal,创建一个Snake对象   
    var Snake = K.fn.create(Animal, {
        init: function (Ksuper, name) {
            Ksuper(name, '丝丝丝丝');   //调用夫类的initialize方法初始化参数  
        }
    });
    var ringneck = new Snake("眼镜蛇");
    ringneck.speak();   
</script>