插件--之封装

关于封装的插件 （jquery）

1、静态方式 $.method=fn

    ### 比方说 一个 加  的插件

 $(function($){
    $.add=function(a,b){
       return a+b;      
    }  
 }(jQuery))
 $.add(5,6) //调用方法

2、实例方式 $.fn.method=fn

     ### tab 栏切换 功能
      (function ($) {
 // {tabMenu: '#aa'}
 $.tab = function (options) {
// 默认参数
  var defaults = {
  tabMenu: '#tab',
  activeClass: 'active',
  tabMain: '#tab-main',
  tabMainSub: '.main',
  selectedClass: 'selected'
}
// 把options中的属性，把对应属性的值赋给defaults对应的属性
// defaults.tabMenu = options.tabMenu || defaults.tabMenu;
// for(var key in options) {
//   defaults[key] = options[key];
// }
$.extend(defaults, options);

$(defaults.tabMenu).on('click', 'li', function () {
  $(this)
    .addClass(defaults.activeClass)
    .siblings()
    .removeClass(defaults.activeClass);

  //
  var index = $(this).index();
  //
  $(defaults.tabMain + ' ' + defaults.tabMainSub)
    .eq(index)
    .addClass(defaults.selectedClass)
    .siblings()
    .removeClass(defaults.selectedClass);
   })
 }
  }(window.jQuery))

表格插件 [22-表格插件.html]

  (function($) {
 // 内部的变量，外部无法访问，防止变量名冲突
 var a = 0;
// 给$增加了一个实例方法
 $.fn.table = function (header, data) {
  var array = [];
   array.push('<table>');
array.push('<tr>');

// 生成表头
$.each(header, function () {
  array.push('<th>' + this + '</th>');
})
array.push('</tr>');


// 生成数据行
$.each(data, function (index) {
  // this是当前遍历到的数组中的每一个对象
  // 拼数据行
  array.push('<tr>');
  array.push('<td>' + (index + 1) + '</td>');

  // 遍历对象，拼表格
  for (var key in this) {
    array.push('<td>' + this[key] + '</td>');
  }

  array.push('</tr>');
})
array.push('</table>');

this.append(array.join(''));
  }

   }(window.jQuery))

3、二者的区别

    静态方法只能访问静态成员,实例方法可以访问静态和实例成员,之所以不允许静态方法
    访问实例成员变量，是因为实例成员变量是属于某个对象的，而静态方法在执行时，并
    不一定存在对象。同样，因为实例方法可以访问实例成员变量，如果允许静态方法调用  
    实例方法，将间接地允许它使用实例成员变量，所以它也不能调用实例方法。基于同样
    的道理，静态方法中也不能使用关键字this。
   main()方法是一个典型的静态方法，它同样遵循一般静态方法的规则，所以它可以由系           统在创建对象之前就调用。
  （   这段话的作者      https://zhidao.baidu.com/question/305017611182741684.html）