The function chain of JavaScript design pattern Practice--jquery plugin with shutter switch image effect (iii)

In the previous article, "JavaScript design pattern Practice Template Method-with the shutter switch image effect of the jquery plugin (ii)", through the use of template method mode to complete the switching effect object construction.

The next step is to complete the invocation and linkage of the effect objects.

Toggle Requirements: The current picture displays the transition effect after the specified time and toggles the next picture, and the last switch starts from the beginning.

Follow the requirements of an effect object to perform the next, after the last completion to start from scratch, it looks like a circular list with status notification, similar to this feature, you can use the responsibility chain model to build.

Responsibility chain is composed of different functions of the linked list, each functional processing as a responsibility, each responsibility is passed to the next, characterized by the scope of each responsibility is clearly in line with a single responsibility, expansion is convenient, and in line with the open and closed principle.

Based on the previous article, we must first give these effect objects the ability to form a linked list.

Now is the time to embody abstraction and inheritance.

Adds a property to the Baseeffect object that points to the next effect object, and increases the property that gets the next effect object.

    varBaseeffect ={ __nexteffect: NULL , prepare:function(context) {Throw NewError (' Please override prepare method '); }, Transform:function(context) {Throw NewError (' Please override transform method '); }, execute:function(context) { This. Prepare (context); return  This. Transform (context); }, Setnext: function (effect) {return this.__nexteffect = effect; }, Next:function () {return this . __nexteffect; }    };

The Setnext method is to set the next effect object, and must return the set object so that it can make a chained call when set.

With the addition of the list-building functionality to the abstract object in Baseeffect, other inherited sub-effects objects do not need to be modified.

Added the curtain entry function after the list is built, it is very simple to construct each effect object in the form of linked list + chain call, and connect them with each other.

    function (options) {        this));        Downtoupeffect            . Setnext (Uptodowneffect)            . Setnext (Lefttorighteffect)            . Setnext (Righttolefteffect)            . Setnext (Updowncrossineffect)            . Setnext (Updowncrossoutffect)            . Setnext (Downtoupeffect);    }

The final step is to make the call.

Write a executeeffect function that accepts the EFFEC and CONTEXTT parameters, and effect can pass in the first of the list of effect objects.

A timer is used to specify the interval time after which the Execute method of the effect object is called and passed into the context execution effect processing.

After the execution of an effect object is completed, the completion state is handled through done in a promise way, and finally the executeeffect is called recursively, and the next effect object is passed.

    function Executeeffect (effect, context) {        setTimeout (            function  () {                Effect.execute ( context). Done (                    function  () {                        executeeffect (Effect.next (), context);                    });             * +);    }

Complete the execution of the curtain entry function for each effect.

Add a call to the line.

    function (options) {        this));        Downtoupeffect            . Setnext (Uptodowneffect)            . Setnext (Lefttorighteffect)            . Setnext (Righttolefteffect)            . Setnext (Updowncrossineffect)            . Setnext (Updowncrossoutffect)            . Setnext (downtoupeffect);        Executeeffect (downtoupeffect, context);    }

The linked list that is built through the chain of responsibility model is easy to use and easy to extend, with an effect in the future, as long as you write the code of the effect itself, add it to a location in the chain of responsibility, and the rest of the code is as easy to scale as possible without modification.

This is the feature of the chain of responsibilities.

This is all done.

Code: Stamp

The function chain of JavaScript design pattern Practice--jquery plugin with shutter switch image effect (iii)