Juggle is a minimalist, component JS framework. Dependency free, perfect closure, flexible and suitable for progressive learning, can be integrated with any framework. Contains components such as bubbling events, Tween, MV framework, HTTP, Websocket, resources, modules, etc. Select components on demand without holding developers hostage.

Juggle is a minimalist, component JS framework. Dependency free, perfect closure, flexible and suitable for progressive learning, can be integrated with any framework. Contains components such as bubbling events, Tween, MV framework, HTTP, Websocket, resources, modules, etc. Select components on demand without holding developers hostage.

Juggle architecture diagram and its dependencies (the core components in dark colors are highly recommended)

Allinone download

npm install juggle-all
Copy the code

Core Components

1. Juggle-event (bubble-enabled event)

Description: Supports bubbling events that can be used to decouple containing structures and tree structures. Supports listening events, removing events, sending events, preventing bubbling, and immediately blocking. Use object pooling to reduce garbage collection.

Excellent and noteworthy features:

Support bubbling, provided the bubbling object has the parent property and is not empty, has the isDisplayObject property and is true. Setting parent to NULL in the event callback function does not prevent parent from receiving the event. 3. Removing or adding listeners at a certain level in the event callback function does not affect the change of the event target. 4. However, if a listener is removed or added to a callback at a certain level, the upper round is affected.Copy the code

Download:

npm install juggle-event
Copy the code

Usage scenario: Develop UI component library, encapsulate any component can be used. For example, juggle-HTTP and juggle-webSocket are both based on this event and can be distributed with proprietary custom events.

Sample code:

1. Inherit the event class

function DisplayObj() {
	juggle.EventDispatcher.apply(this);
}Copy the code

2. Listening events

obj.addEventListener("aaa", function(event){}, this);Copy the code

3. Send events. The sending type is AAA, bubbling and carrying data BBB

obj.dispatchEventWith("aaa", true, "bbb");Copy the code

4. Event Demo (Double-click test.html)

> > > > > > Demo

2. Juggle-juggler (Master control of timeline)

Introduction: timeline master control, support to add animation, remove animation, animation callback for each frame and carry with the last call interval milliseconds

Excellent and noteworthy features:

1. The newly added animation in the callback cannot be scheduled this time, because it has not experienced the time process, which is reasonable. 2Copy the code

Download:

npm install juggle-juggler
Copy the code

Use scenario: animation, each frame to invoke the business logic, can be used.

Sample code:

1. The prescribed advanceTime method must be implemented

function View() {
	this.advanceTime = function (time) {
	}
}Copy the code

2. Add the timeline master control, each frame will call advanceTime, and carry the number of milliseconds since the last call

juggle.jugglerManager.juggler.add(new View());Copy the code

3. Time axis general control Demo

>>>>>> Timeline master control Demo

3, juggle-tween

Introduction: Slow motion class, support 17 kinds of transition mode, each frame without error accurate positioning, perfect smooth transition. Object pooling is supported to reduce garbage collection.

Excellent and noteworthy features:

1, each call is the start value + (endpoint - starting point) * (after time/total time), which is the most stable, without any error 2, continuous scheduling, each time the completion of the excess time reuse is not wasted.Copy the code

Download:

npm install juggle-tween
Copy the code

Use scene: need animation transition can be used.

Sample code:

Create a display object

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"; }}Copy the code

2. Use juggle-tween to animate

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);Copy the code

3, Tween Demo (double-click test.html)

> > > > > > Tween the Demo

4. Juggle-delayedcall

An absolutely accurate delay callback tool, support setting callback interval, callback times (support unlimited number of times). Fixed inaccurate setInterval calls multiple times. Use object pooling to reduce garbage collection.

Excellent and noteworthy features:

1, continuous scheduling, each time the completion of the surplus time is not wasted. Scheduling interval For example: 1001 ms, 999 ms mode.Copy the code

Download:

npm install juggle-delayedcall
Copy the code

Usage scenario: Replace setInterval for all services requiring delayed callback.

Sample code:

1. Delay callback example, parameter 1 delay callback function, callback every 1 second, carrying 1111 parameters, repeat 5 times to stop the callback.

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

2. Delay the Demo callback (double-click test.html)

>>>>>> Delay callback Demo

5. Juggle – MV (MV frame)

Introduction: A MV framework removes the coupling between data source and view controller, the coupling between view controllers, tight closure encapsulation, users only need to inherit Proxy and Mediator to develop MV mode projects.

Download:

npm install juggle-mv
Copy the code

Usage scenario: Web projects that need to interact with the server.

Sample code:

1. Inheriting Proxy as data Proxy, it can request data results and broadcast messages.

Function UserProxy() {// inherit juggle.proxy.apply (this); This.notification = function () {this.notifynotification (this.getnotification ("test", "getData success")); }; }Copy the code

2. Inherit Mediator as view controller, control view, call datasource Proxy, pay attention to messages broadcast by datasource Proxy and View controller Mediator and process them.

Function IndexMediator () {/ / concern message enclosing listNotificationInterests = (" test "); This. HandleNotification = function (data) {switch (data.name) {case "test": Alert ("IndexMediator receives data "+ data.body); break; }}; / / inheritance juggle. Mediator. Apply (this); }Copy the code

3. MV framework Demo (double-click test.html)

> > > > > > MV framework Demo

Other Components

1. Juggle – WebSocket (simple encapsulation, webSocket client library supporting custom event distribution)

npm install juggle-websocket
Copy the code

2. Juggle-http (HTTP client library with simple encapsulation and good versatility)

Download:

npm install juggle-http
Copy the code

Usage scenario: A Web project that needs to send HTTP requests to the server.

Sample code:

1. HTTP client and server examples

> > > > > > HTTP client

3. Juggle-resource (resource library that supports loading multiple resource callbacks)

Download:

npm install juggle-resource
Copy the code

Usage scenario: This command is used with juggle-module.

Sample code:

1. Load resource Demo

>>>>>> Load resource Demo

4. Juggle-module (Module library, front-end modular architecture)

Download:

npm install juggle-module
Copy the code

Sample code:

1. Module Demo

> > > > > > module Demo

More Details

>>>>>>juggle-event details

Juggle address:

>>>>>>github