jquery plug-in development related

I wrote before going to a carousel components packaged as jquery plugins, while learning the side of change, design ideas is the carousel components makes up a row of the picture, and then modify the properties of the whole row of left, accompanied by js of the animate method, achieve carousel slide

The structural components is as follows:

function () {}
Carousel.prototype.afreash = function(){}
Carousel.prototype.listener = function(){}
...

I speak at major modifications to its jquery plugin, what specifically have changed places.

All the code in the bag closing

At this time, the equivalent of a private scope closures, the internal information to the outside can not access, and there will be no contamination of global variables.

(function($) {
	
	
})(jQuery);

Add Carousel.DEFAULTS = {} to store default parameters

Carousel.DEFAULTS = {
	interval: 5000,
	limit: 0.2,
	mouse: 50,
	toler: 0,
	speed: 500,
	up: false
}

Add Plugin Methods

This Plugin is the bootstrap method to see inside, directly used up.
$ .extend (target, [object1] , [objectN]) This method is mainly used to combine two or more of the content object to the first object.
It is noted that: the plurality of objects when combined, will destroy the first structure of the object, it is possible to pass an empty object as the first parameter.

function  Plugin ( the Option ) { // return through the results in order to save the chain jquery calls return the this .each ( function (
	
	
	 ) { Var $ the this    = $ ( the this ); var Data = $ the this .data ( 'xf.carousel' ); // default parameters and the new modified parameter tied together var Options = $ .extend ({}, Carousel .DEFAULTS, $ the this .data (), typeof the Option == 'Object' && the Option); // method name var Action = typeof the Option == 'String' the Option:? false ; IF ! (the Data) { // persistence data 	    	$ the this .data ( 'xf.carousel' , (data = new new Carousel (
		
	    
	    
	    
	    
	    
	    
	    
	    	
this, options)));
	    	data.init();
	    }
	    
	    if(typeof option == 'number') {
	    	data.go(option);
	    } else if(action) {
	
	    	data[action]();
	    } else if(options.interval) {
	    	data.options = options;
	    	data.afresh();
	    	data.alarm();
	    }
	});
}

The Plugin jquery bound to the prototype, which is $ .fn on

$.fn.carousel = Plugin;
$.fn.carousel.Constructor = Carousel;

Use $ .proxy

In dealing with the internal code is encountered in the implementation method setTimeout and setInterval inside, how to introduce this in the proper
use $ .proxy can achieve very clean, $. Proxy have to rely on themselves or apply

Tell me interested Click here github: carousel

原文:大专栏 jquery插件开发相关

jquery plug-in development related

Guess you like