jQuery_插件的开发简单介绍

一、首先使用闭包(把jQuery传入函数,形参是$)

这里使用闭包的好处官方给出了三点解释:
1、避免全局依赖

2、避免第三方破坏

3、兼容jQuery操作符’$'和jQuery

			    (function($){
			        /your code
			    })(jQuery);

二、进入开发(上代码)

这一段进入插件最开始的部分,外部调用的我的插件名为:myPlugin;
第一个if,如果method有值,就进入走向methods的method这个属性的方法里面;
第二个elseif, 这个方法的类型是对象(即会传入一组参数以{}包裹的对象)或者method没有传值,是空的。这里默认进入methods的init的方法,我们自己说是初始化方法,并把外部传入的参数对象(或者没有参数的为空的对象)放进去;
第三个else,method这个方法在我们这个插件的对象里是不存在的,我们会报错。
这么做有个报警机制一样。

三、处理传递进来的参数(在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() 接下来调用其他的办法,依次展开代码的功能

四、完整示例

(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 );

五、最后一步,如何调用?

首先,你必须在你需要的页面引入这个插件的js;
1、调用方式一:传入一组参数对象进去
2、调用方式二:传入插件的某个方法进去

$("#container").myPluginName({   //里面是插件配置的属性
     index : 1,
     duration : 800,
     dirction : "herizontal",
 });

$("#container").myPluginName("init");
3、调用方式三:不传任何参数,按照插件默认流程去走

$("#container").myPluginName()

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值