jQuery插件开发模式（组件封装）

在项目开发过程中，由于jQuery有较好的实用性，所以都用得非常多，而在项目开发时，某个功能（代码）使用很频繁被多个地方调用，那么就可以借助jQuery插件提供的组件封装方法高，来封装一些使用频率较的功能。

JQuery中组件开发方式主要有两种：

• 通过$.extend()来扩展jQuery
• 通过$.fn 向jQuery添加新的方法

  还有 $.widget()，但是要借助 jQuery UI才行，而 jQuery UI又要借助 jQuery才行。
  

  
  

  一、      $.extend()方法可以 jQuery的命名空间，或者是jQuery身上添加了一个静态方法而以。所以我们调用通过$.extend()添加的函数时 直接通过$符号调用 （$.myfunction()）而不需要选中DOM元素($('#example').myfunction())。

  
  

  例如：

  (function($){
      $.extend({
          Alert: function(str) {
              if(!str) return;
              alert(str)
              console.log(str);
          }
      })
  })(jQuery);
  $.Alert(); //直接调用
  $.Alert('Hello'); //调用时带参
  
  注：但这种方式无法利用jQuery强大的选择器带来的便利，要处理DOM元素以及将插件更好地运用于所选择的元素身上，还是需要使用下面第二种开发方式。
  

  
  
  
  
  

  二、$.fn:

  简单的讲： <span font-size:16px;"="" style="font-size: 16px;">就是往$.fn上面添加一个方法，名字是我们的插件名称。然后我们的插件代码在这个方法里面展开。

  
  

  基本语法：
  

  
  

  $.fn.pluginName = function() {
      //要执行操作。。。
  }

  在插件名字定义的这个函数内部， this指代的是我们在调用该插件时，用jQuery选择器选中的元素 ，一般是一个jQuery类型的集合。比如$('div')返回的是页面上所有div标签的集合，且这个集合已经是jQuery包装类型了，也就是说，在对其进行操作的时候可以直接调用jQuery的其他方法而不需要再用美元符号来包装一下。

  
  

  
  

  
  

  例如：

  (function($){
      $.fn.bgColor = function(cor){
       //这里的$(this)就是选择的那个元素
      $(this).css('background-color', cor);
      }
  })(jQuery)
  $('div').bgColor('red'); //调用
  (function($){
  //定义Beautifier的构造函数
  var Beautifier = function(ele, opt) {
      this.$element = ele,
      this.defaults = {
          'color': 'red',
          'fontSize': '12px',
          'textDecoration':'none'
      },
      this.options = $.extend({}, this.defaults, opt)
  }
  //定义Beautifier的方法
  Beautifier.prototype = {
      beautify: function() {
          return this.$element.css({
              'color': this.options.color,
              'fontSize': this.options.fontSize,
              'textDecoration': this.options.textDecoration
          });
      }
  }
  //在插件中使用Beautifier对象
  $.fn.mupiao = function(options) {
      //创建Beautifier的实体
      var beautifier = new Beautifier(this, options);
      //调用其方法
      return beautifier.beautify();
  }
  })(jQuery)
  $('div').mupiao( {'color': 'green', 'fontSize': '18px', 'textDecoration':'none'}); //调用

  
  
  
  
  
  所以在上面插件代码中，我们在this身上调用jQuery的css()方法，也就相当于在调用 $('div').css()，理解this在这个地方的含义很重要。这样才知道为什么可以直接调用jQuery方法同时在其他地方this指代不同时我们又需要用jQuery重新包装才能调用。