jQuery插件开发详解
- 1、首先使用闭包(把jQuery传入函数,形参是$)
- 2、进入开发(上代码)
- 3、处理传递进来的参数(在init: function () {} 这个属性方法里面)
- 4、完整示例
- 5、最后一步,如何调用?
1、首先使用闭包(把jQuery传入函数,形参是$)
这里使用闭包的好处官方给出了三点解释:
1.避免全局依赖 2.避免第三方破坏 3.兼容jQuery操作符’$'和jQuery
(function($){
/your code
})(jQuery);
2、进入开发(上代码)
这一段进入插件最开始的部分,外部调用的我的插件名为:myPlugin;
第一个if,如果method有值,就进入走向methods的method这个属性的方法里面;
第二个elseif, 这个方法的类型是对象(即会传入一组参数以{}包裹的对象)或者method没有传值,是空的。这里默认进入methods的init的方法,我们自己说是初始化方法,并把外部传入的参数对象(或者没有参数的为空的对象)放进去;
第三个else,method这个方法在我们这个插件的对象里是不存在的,我们会报错。
这么做有个报警机制一样。
3、处理传递进来的参数(在init: function () {} 这个属性方法里面)
init : function( options ) {
var opt = {};
opt.$el = $( this );
opt.settings = $.extend( {
'type': 1,//是否可读可写,默认可读
'must': 0//是否必填,默认非必填
}, options);
methods.show();
}
1、这里的options,就是传入的各种参数和系统默认的参数进行合并作为插件的设置,你用
$.extends({
//这里是插件里面默认的参数
}, options)
2、mehtods.show() 接下来调用其他的办法,依次展开代码的功能
4、完整示例
(fucntion ( $ ) {
var methods = {
init : function( options ) {
var opt = {};
opt.$el = $( this );
opt.settings = $.extend( {
'type': 1,//是否可读可写,默认可读
'must': 0//是否必填,默认非必填
}, options);
methods.show();
},
show : fucntion() {
}
};
$.fn.myPluginName= function( method ) {
if (methods[ method ]) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || !method) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method' + method + 'null function');
}
}
})( jQuery );
5、最后一步,如何调用?
首先,你必须在你需要的页面引入这个插件的js;
调用方式一:传入一组参数对象进去
$("#container").myPluginName({ //里面是插件配置的属性
index : 1,
duration : 800,
dirction : "herizontal",
});
调用方式二:传入插件的某个方法进去
$("#container").myPluginName("init");
调用方式三:不传任何参数,按照插件默认流程去走
$("#container").myPluginName();