juggle

by dianbaer

dianbaer / juggle

juggle是一个极简的、组件式的js框架。无依赖,完美闭包,灵活且适合渐进学习,可与任何框架整合。包含(支持冒泡的事件 || Tween || MV框架 || http || websocket |...

210 Stars 80 Forks Last release: over 2 years ago (v1.0) MIT License 164 Commits 1 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

juggle

Build Status Codacy Badge License

juggle是一个极简的、组件式的js框架。无依赖,完美闭包,灵活且适合渐进学习,可与任何框架整合。包含(支持冒泡的事件、Tween、MV框架、http、websocket、资源、模块)等组件,按需选择组件,不绑架开发者。

juggle架构图及其依赖关系(深颜色的是核心组件强烈推荐)

架构图

allinone下载

npm install juggle-all

核心组件介绍


1、juggle-event(支持冒泡的事件)

介绍:支持冒泡的事件,可用于解除包含结构,树形结构的耦合性。支持监听事件、移除事件、派发事件、阻止冒泡、立即阻止。使用对象池减少垃圾回收。

优秀且需要注意的特性

1、支持冒泡,前提是冒泡对象有parent属性并且不为空,有isDisplayObject属性并且为true。
2、在派发事件的回调函数内将parent设置为null,不能阻止这一次parent接到这次事件
3、在派发事件某层级的回调函数内,移除这层级的监听或添加这层级的监听,是不会影响这次派发事件目标的改变。
4、但是如果在某层级的回调函数内,移除上层的监听或添加上层的监听,上层本轮会受到影响。

下载

npm install juggle-event

使用场景:开发UI组件库,封装任意组件时都可以使用。例如:juggle-http,juggle-websocket都是基于此事件,可以派发专有的自定义事件。

示例代码

1、继承事件类

js
function DisplayObj() {
    juggle.EventDispatcher.apply(this);
}
2、监听事件
js
obj.addEventListener("aaa", function(event){}, this);
3、派发事件,派发类型为aaa,冒泡,携带数据bbb
js
obj.dispatchEventWith("aaa", true, "bbb");
4、事件Demo(双击test.html即可)

>>>>>>事件Demo


2、juggle-juggler(时间轴总控)

介绍:时间轴总控,支持添加动画,移除动画,每帧进行动画回调并携带与上一次调用的间隔毫秒数

优秀且需要注意的特性

1、回调中新加入的动画不能在这一次被调度,因为没有经历时间过程这是合理的
2、回调中移除的分两种可能,已经在本次调度的无影响,没有在本次调度的取消本次调度

下载

npm install juggle-juggler

使用场景:动画,每帧进行调用的业务逻辑,都可以使用。

示例代码

1、必须实现规定的advanceTime方法

js
function View() {
    this.advanceTime = function (time) {
    }
}
2、加入时间轴总控,每帧会调用advanceTime,并携带与上一次调用的间隔毫秒数
js
juggle.jugglerManager.juggler.add(new View());
3、时间轴总控Demo

>>>>>>时间轴总控Demo


3、juggle-tween(缓动类)

介绍:缓动类,支持17种过渡模式,每帧无误差精准定位,完美的平滑过渡。支持对象池减少垃圾回收。

优秀且需要注意的特性

1、每次调用都是开始值+(终点-起点)*(经过时间/总时间),这是最稳定的,没有任何误差
2、连续调度,每次完成时过剩的时间再次利用不浪费。

下载

npm install juggle-tween
使用场景:需要动画过渡的都可以使用。

示例代码

1、创建一个显示对象

js
function DisplayObject(obj) {
    this.obj = obj;
    this.xValue = 0;
    this.yValue = 0;
    this.getX = function () {
        return this.xValue;
    };
    this.setX = function (value) {
        this.xValue = value;
        this.draw();
    };
    this.getY = function () {
        return this.yValue;
    };
    this.setY = function (value) {
        this.yValue = value;
        this.draw();
    };
    this.draw = function () {
        this.obj.style.position = "absolute";
        this.obj.style.top = this.yValue + "px";
        this.obj.style.left = this.xValue + "px";
    }
}
2、使用juggle-tween进行动画过渡
js
var display = new DisplayObject(document.getElementById("tween_div"));
display.setX(100);
display.setY(100);
tween = juggle.tweenPool.fromPool(display, 2);
tween.animate(display.getX, display.setX, 800);
tween.animate(display.getY, display.setY, 400);
juggle.jugglerManager.juggler.add(tween);
3、Tween的Demo(双击test.html即可)

>>>>>>Tween的Demo

4、Tween的Demo线上演示地址:

>>>>>>Tween的Demo线上演示地址


4、juggle-delayedcall(延迟回调)

介绍:一个绝对精准的延迟回调工具,支持设置回调间隔,回调次数(支持无限次数)。解决setInterval多次调用不精准的问题。使用对象池减少垃圾回收。

优秀且需要注意的特性

1、连续调度,每次完成时过剩的时间再次利用不浪费。调度时间间隔例如:1001毫秒,999毫秒这种模式。

下载

npm install juggle-delayedcall
使用场景:所有需要延迟回调的业务,替代setInterval。

示例代码

1、延迟回调例子,参数1延迟回调函数,每1秒回调一次,携带1111参数,重复5次后停止回调。

js
var delayedCall = juggle.delayedCallPool.fromPool(function(arg){}, 1, "1111");
delayedCall.mRepeatCount = 5;
juggle.jugglerManager.juggler.add(delayedCall);

2、延迟回调Demo(双击test.html即可)

>>>>>>延迟回调Demo


5、juggle-mv(MV框架)

介绍:一个MV框架解除数据源与视图控制器的耦合性,视图控制器之间的耦合性,严密的闭包封装,用户只需继承Proxy与Mediator即可开发MV模式的项目。

下载

npm install juggle-mv
使用场景:需要与服务器进行交互的web项目。

示例代码

1、继承Proxy作为数据代理,可以请求数据结果后广播消息。

js
function UserProxy() {
    //继承
    juggle.Proxy.apply(this);
    //获取数据然后广播
    this.getData = function () {
        this.notifyObservers(this.getNotification("test", "getData success"));
    };
}
2、继承Mediator作为视图控制器,控制视图、调用数据源Proxy、关注数据源Proxy与视图控制器Mediator广播过来的消息并处理。
js
function IndexMediator() {
    //关注消息
    this.listNotificationInterests = ["test"];
    //关注消息的处理
    this.handleNotification = function (data) {
        switch (data.name) {
            case "test":
                alert("IndexMediator接到数据" + data.body);
                break;
        }
    };
    //继承
    juggle.Mediator.apply(this);
}
3、MV框架Demo(双击test.html即可)

>>>>>>MV框架Demo


其他组件介绍


1、juggle-websocket(简易封装,支持自定义事件派发的websocket客户端库)

下载

npm install juggle-websocket
使用场景:需要与服务器建立长连接,依赖服务器推送消息的web项目。

示例代码

1、websocket客户端与服务器示例

>>>>>>websocket客户端

>>>>>>websocket服务器


2、juggle-http(简易封装,通用性很好的http客户端库)

下载

npm install juggle-http
使用场景:需要向服务器发送http请求的web项目。

示例代码

1、http客户端与服务器示例

>>>>>>http客户端

>>>>>>http服务器


3、juggle-resource(支持加载多资源回调的资源库)

下载

npm install juggle-resource

使用场景:配合juggle-module使用。

示例代码

1、加载资源Demo

>>>>>>加载资源Demo


4、juggle-module(模块库,前端模块化架构)

下载

npm install juggle-module

示例代码

1、模块Demo

>>>>>>模块Demo


更多详细介绍

>>>>>>juggle-event详细介绍

>>>>>>juggle-juggler详细介绍

>>>>>>juggle-tween详细介绍

>>>>>>juggle-delayedcall详细介绍

>>>>>>juggle-mv详细介绍

>>>>>>juggle-websocket详细介绍

>>>>>>juggle-http详细介绍

>>>>>>juggle-resource详细介绍

>>>>>>juggle-module详细介绍

juggle地址:

>>>>>>github

>>>>>>码云

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.