一步一步教你写一个jQuery的插件教程(Plugin)

当我们需要在网页中实现一些特定的功能或者效果时，经常会选择使用jQuery插件来帮助我们完成。我们可以通过自己编写jQuery插件的方式来实现这些目标，也可以通过使用其他人编写的jQuery插件库来实现。

本篇教程将从头开始，带领大家学习如何编写jQuery插件。下面我们将按照以下步骤进行讲解：

一、确定插件的功能和名称

在决定编写一个jQuery插件之前，我们需要确定它的功能和名称。插件名称应该尽可能简洁明了，清楚表达它所提供的功能。例如，一个用于画图的插件，可以起名为“draw”，一个用于展示幻灯片的插件，可以起名为“slides”。

二、准备开发环境

在开始编写插件之前，我们需要准备好开发环境。首先，我们需要创建一个HTML文件，用于测试和演示我们的插件。其次，我们需要创建一个JS文件，在这个文件中编写我们的插件代码。

三、编写基本的插件结构

在编写插件之前，我们需要确定插件的基本结构。通常来说，一个插件应该包括两个部分：插件定义和插件调用。

1.插件定义

插件定义是指插件的具体实现代码。一般来说，它应该被封装在一个自执行函数内部，并返回一个对象，这个对象包含了我们要暴露给外部使用的方法和属性。同时，我们还需要定义一些默认配置，以方便用户自定义插件的表现方式。

一个简单的插件定义例子如下：

(function($){

  //默认配置
  var defaults={
    width:'100px',
    height:'30px',
    background:'#fff'
  };

  //定义插件的构造函数
  function MyPlugin(element,options){
    this.$element=$(element);
    this.options=$.extend({},defaults,options);

    //初始化
    this.init();
  }

  //定义插件的方法
  MyPlugin.prototype={

    init:function(){
      //插件初始化的代码
    },

    sayHello:function(){
      alert('Hello World!');
    }

  };

  //定义插件
  $.fn.myPlugin=function(options){
    return this.each(function(){
      new MyPlugin(this,options);
    });
  };

})(jQuery);

2.插件调用

插件调用是指在HTML页面中调用插件的代码。使用插件的方法很简单，只需要通过jQuery选择器选择要应用插件的元素，然后调用插件的方法即可。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Plugin Demo</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="myPlugin.js"></script>
</head>
<body>
  <div id="myDiv">Hello World!</div>

  <script>
    $(function(){
      $('#myDiv').myPlugin({
        width:'200px',
        height:'50px',
        background:'#ccc'
      });

      $('#myDiv').myPlugin('sayHello');
    });
  </script>
</body>
</html>

四、编写插件的具体实现

在定义好插件的基本结构之后，我们需要根据插件的功能需求编写具体实现代码。下面我们将通过两个例子，来演示具体的插件实现过程。

1.示例1：实现文字滚动显示效果

首先，我们需要明确这个插件的功能：在所有具有 class="scroll" 的元素中，实现文字从右往左滚动的显示效果。

根据这个功能需求，我们可以参照以下步骤编写滚动插件：

定义插件名称和默认配置

```javascript
(function($){
var defaults={
speed:50
};

 //插件定义
 $.fn.scrollText=function(options){
   var opts=$.extend({},defaults,options);

   //具体实现代码
 };

})(jQuery);
```

实现具体的滚动效果

```javascript
(function($){
var defaults={
speed:50
};

 //插件定义
 $.fn.scrollText=function(options){
   var opts=$.extend({},defaults,options);

   //具体实现代码
   this.each(function(){
     var $this=$(this);
     var text=$this.text();
     var width=$this.width();
     var html='<div>'+text+'</div>';
     $this.html(html);
     var $container=$this.children('div');
     var containerWidth=$container.width();
     var left=width;
     $container.css('left',left);
     setInterval(function(){
       left-=1;
       if(left<-containerWidth){
         left=width;
       }
       $container.css('left',left);
     },opts.speed);
   });
 };

})(jQuery);
```

在HTML页面中调用滚动插件

```html

My Plugin Demo

Hello World!

This is a jQuery Plugin Demo!

```

2.示例2：实现图片懒加载效果

其次，我们需要明确这个插件的功能：当图片元素进入页面可视区域时，动态加载图片。

根据这个功能需求，我们可以参照以下步骤编写懒加载插件：

定义插件名称和默认配置

```javascript
(function($){
var defaults={
threshold:0,
effect:'fadeIn',
placeholder:''
};

 //插件定义
 $.fn.lazyLoad=function(options){
   var opts=$.extend({},defaults,options);

   //具体实现代码
 };

})(jQuery);
```

实现具体的懒加载效果

```javascript
(function($){
var defaults={
threshold:0,
effect:'fadeIn',
placeholder:''
};

 //插件定义
 $.fn.lazyLoad=function(options){
   var opts=$.extend({},defaults,options);

   //具体实现代码 
   var $window=$(window);
   var $placeholder=$('<img>').attr('src',opts.placeholder);
   this.each(function(){
     var $this=$(this);
     $this.after($placeholder);
     $window.on('scroll',function(){
       var scrollTop=$window.scrollTop();
       var windowHeight=$window.height();
       var elementTop=$this.offset().top;
       if(scrollTop+windowHeight>elementTop-opts.threshold){
         var url=$this.data('src');
         var effect=opts.effect;
         if(url){
           var $img=$('<img>').attr('src',url);
           $img.hide();
           $img.on('load',function(){
             $this.html($img[effect]());
           });
         }
       }
     });
   });
   return this;
 };

})(jQuery);
```