jQuery_插件的开发简单介绍

矫情吗；* 2022-04-24 01:06 282阅读 0赞

## 一、首先使用闭包（把jQuery传入函数，形参是$） ##

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

2、避免第三方破坏

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

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

## 二、进入开发（上代码） ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9fbWFvX3hpYW9feXU_size_16_color_FFFFFF_t_70][]

这一段进入插件最开始的部分，外部调用的我的插件名为：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()

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9fbWFvX3hpYW9feXU_size_16_color_FFFFFF_t_70]: /images/20220221/e977a9f0b3a84f5ab256654728cc0edf.png