当前仓库属于暂停状态,部分功能使用受限,详情请查阅 仓库状态说明
1 Star 0 Fork 17

xibazoudike / juggle
暂停

forked from 电霸儿 / juggle
暂停
 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

juggle

Build Status Codacy Badge License

juggle是一个JavaScirpt基础库,包含事件、Tween、mv框架、http、websocket、资源、模块等,帮助开发者快速搭建合理的底层结构。

juggle架构图(深颜色是核心组件强烈推荐,具有不错的特性)

架构图

github地址:

https://github.com/dianbaer/juggle

码云地址:

https://gitee.com/dianbaer/basic

allinone安装

npm install juggle-all

核心组件介绍

1、事件Event

juggle-event是一个事件库,可用于解除包含结构,树形结构的耦合性,支持冒泡,是构建UI的基石。

1、支持冒泡,前提冒泡对象的parent不为空并且isDisplayObject是true

2、在派发事件的回调函数内将parent设置为null,不能阻止这一次parent接到这次事件

3、在派发事件某层级的回调函数内,移除这层级的监听或添加这层级的监听,是不会影响这次派发事件目标的改变的。

4、但是如果在某层级的回调函数内,移除上层的监听或添加上层的监听,上层本轮会受到影响。

安装:

npm install juggle-event

代码示例:

function DisplayObj() {
	juggle.EventDispatcher.apply(this);
}
function DisplayObjContainer() {
	DisplayObj.apply(this);
	this.addChild = function (child) {
		child.parent = this;
	};
	this.removeChild = function (child) {
		child.parent = null;
	};
}
//创建DisplayObj对象
var obj = new DisplayObj();
//创建DisplayObjContainer对象
var container = new DisplayObjContainer();
//将container是obj的容器
container.addChild(obj);
//添加监听
obj.addEventListener("aaa", function(event){}, this);
container.addEventListener("aaa", function(event){},this);
//发布事件
obj.dispatchEventWith("aaa", true, "bbb");

例子:

juggle-event-test

juggle-event详细介绍

2、动画管理Juggler

juggle-event是一个动画管理类,可以添加与移除动画。

1、回调中新加入的动画不能在这一次被调度,因为没有经历时间过程这是合理的

2、回调中移除的分两种可能,已经在本次调度的无影响,没有在本次调度的取消本次调度

安装:

npm install juggle-juggler

代码示例:

function View() {
	this.advanceTime = function (time) {
	}
}
function Movie() {
	juggle.EventDispatcher.apply(this);
	this.advanceTime = function (time) {

	}
}
var view = new View();
var movie = new Movie();
juggle.jugglerManager.juggler.add(view);
juggle.jugglerManager.juggler.add(movie);

例子:

juggle-juggler-test

juggle-juggler详细介绍

3、动画类Tween

juggle-tween是Tween类,拥有精准的动画。

1、每次调用都是开始值+(终点-起点)*(经过时间/总时间),这是最稳定的,没有任何误差

2、连续调度,如果一次完成,剩余时间再次利用不浪费

安装:

npm install juggle-tween

代码示例:

function DisplayObject(obj) {
	this.obj = obj;
	this.xValue = 0;
	this.yValue = 0;
	this.alphaValue = 0;
	this.visibility = "visible";
	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.getAlpha = function () {
		return this.alphaValue;
	};
	this.setAlpha = function (value) {
		this.alphaValue = value;
		this.draw();
	};
	this.setVisible = function (value) {
		if (value === true) {
			this.visibility = "visible";
		} else {
			this.visibility = "hidden";
		}
		this.draw();
	};
	this.draw = function () {
		this.obj.style.position = "absolute";
		this.obj.style.top = this.yValue + "px";
		this.obj.style.left = this.xValue + "px";
		this.obj.style.opacity = this.alphaValue;
		this.obj.style.filter = "alpha(opacity=" + (this.alphaValue * 100) + "%)";
		this.obj.style.visibility = this.visibility;
	}
}

var display = new DisplayObject(document.getElementById("tween_div"));
display.setAlpha(1);
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);

例子:

juggle-tween-test

线上例子地址:

https://www.threecss.com/juggle-tween-test/test.html

juggle-tween详细介绍

4、延迟回调DelayedCall

juggle-delayedcalll是一个精准的延迟回调类。

1、连续调度,如果一次完成,剩余时间再次利用不浪费

安装:

npm install juggle-delayedcall

代码示例:

function delayCallFunc(arg) {
	alert(delayedCall.isComplete());
}

var delayedCall = juggle.delayedCallPool.fromPool(delayCallFunc, 1, "1111");
delayedCall.mRepeatCount = 5;
juggle.jugglerManager.juggler.add(delayedCall);

例子:

juggle-delayedcall-test

juggle-delayedcall详细介绍

5、mv框架

juggle-mv是一个mv框架解除数据源与视图控制器,视图控制器之间的耦合性。

1、严密的闭包封装,用户只需关心数据代理proxy与视图控制器mediator的开发

安装:

npm install juggle-mv

代码示例:

function UserProxy() {
	juggle.Proxy.apply(this);
	this.getData = function () {
		//广播消息
		this.notifyObservers(this.getNotification("test", "getData success"));
	};
	this.getData1 = function () {
		//广播消息
		this.notifyObservers(this.getNotification("test1", "getData1 success"));
	};
}
function IndexMediator() {
	this.listNotificationInterests = ["test", "test1"];
	this.handleNotification = function (data) {
		switch (data.name) {
			case "test":
				alert("IndexMediator接到数据" + data.body);
				break;
			case "test1":
				alert("IndexMediator接到数据" + data.body);
				break;
		}
	};
	juggle.Mediator.apply(this);
}
var proxy = new UserProxy();
var mediator = new IndexMediator();
proxy.getData();
proxy.getData1();

例子:

juggle-mv-test

juggle-mv详细介绍

其他组件介绍

1、支持事件派发的websocket客户端

juggle-websocket是一个支持事件派发的websocket客户端

安装:

npm install juggle-websocket

例子:

juggle-websocket-test

websocket服务器(直接可用):

https://github.com/dianbaer/grain/tree/master/grain-threadwebsocket-test

juggle-websocket详细介绍

2、http客户端

juggle-http是可以进行事件派发的httpclient库,可以发文件

安装:

npm install juggle-http

例子:

juggle-http-test

http服务器(直接可用):

https://github.com/dianbaer/grain/tree/master/grain-httpserver-test

juggle-http详细介绍

3、resource资源

juggle-resouce是一个资源库,支持加载多资源回调

安装:

npm install juggle-resource

例子:

juggle-resource-test

juggle-resource详细介绍

4、module资源

juggle-module是模块类,支持模块加载卸载

安装:

npm install juggle-module

例子:

juggle-module-test

juggle-module详细介绍

上传npm包

npm pack

npm adduser

npm publish
MIT License Copyright (c) 2017 电霸儿 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

juggle是一个JavaScirpt基础库,包含事件、Tween、mv框架、http、websocket、资源、模块等,帮助开发者快速搭建合理的底层结构。 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/xibazoudike/basic.git
git@gitee.com:xibazoudike/basic.git
xibazoudike
basic
juggle
master

搜索帮助