jquery插件开发

今天周六，玩了一上午lol了，趁等饭点的时间浅谈一下jquery插件开发，望大神指教鞭策！

在软件开发过程当中须要必定的设计模式来指导开发，有了模式，咱们便能更好的组织咱们的代码，并从前人的经验中学到更好的实践。
根据《jQuery高级编程》中的描述，jQuery插件开发方式重要有三种：

1. 经过$.extend()来扩展jQuery
2. 经过$.fn向jQuery添加新的方法
3. 经过$.widget()应用jQuery UI的部件工厂方式建立（这种方式暂时不多用，估计大家也不多见吧！呵呵……）

　　一般咱们使用第二种方法来进行简单的插件开发，说简单是相对于第三种方式。第三种方式是用来开发更高级的jQuery部件的，该模式开发出来的部件带有不少jQuery内建的特性，好比插件的状态信息自动保存，各类关于插件的方法等，都很是的细致。
而第一种方法又太简单，仅仅是在jQuery命名空间或者能够理解在jQuery自身添加一个静态的方法而已。因此咱们在调用经过$.extend()添加的方法时，直接经过$符号调用$.myFunction()而不须要选中DOM元素$().myFunction()。

方式1、$.extend()

//定义插件
    $.extend({
      goTop:function(){
        $('html,body').animate({scrollTop:0}, 500);
      }
    });
//调用
  $('.gotop').click(function(){
    $.goTop();
  });

　　上面的代码中经过$.extend()方法向jQuery添加了一个goTop方法，而后经过$直接调用。到此已完成了一个简单的jQuery插件。
　　如你所见，经过此种方法来定义一些辅助类的方法是比较方便的，定义一次后，能够经过jQuery在程序中任何须要的地方调用它。

 

 

方式2、$.fn

　　第一种种方法，并不能使用jQuery强大的选择器，要处理DOM元素以及将开发的插件运用到所选的元素上，仍是要使用第二种方法。我所见到和使用的插件大多也是经过$.fn的方式建立的，至少目前是。

　　第二种方式的语法示例：

$.fn.mypluginName = function(){
  //代码内容 
}

　　往$.fn上面添加一个方法，名字是咱们插件的名称，而后咱们的插件代码在这个方法中展开。
　　好比咱们将页面中某元素背景颜色改成红色，则写成：

//定义插件
$.fn.pluginBg = function(){
        this.css('backgroundColor','red'); //在这里，this指用jQuery选中的元素,即：this = $(element),this用法再此不过多介绍
    }
//调用
$(elment).pluginBg();

　　传参插件

　　一个强劲的插件是可让使用者随意定制的，这便要求咱们在开发插件是考虑的更加全面些，尽可能提供合适的参数。在处理插件参数的接收上，一般使用jQuery的extend方法，上面也有提到过，但那是给extend方法传递单个对象的状况下，这个对象会合并到jQuery身上，因此咱们就能够在jQuery身上调用新合并对象里包含的方法了。当给extend方法传递多个对象时，它会将全部参数对象合并到第一个里。同时，若是对象中存在同名的属性，合并时后面的会覆盖前面的。利用这一点，咱们能够在插件中定义一个保存插件参数默认值的对象，同时将接收来的参数对象合并到默认对象上，最后就实现了用户指定了值得参数使用指定值，未指定参数时使用插件的默认值。　　

　　咱们举个例子，容许用户调用插件的时候设置color，代码以下：

//定义插件
$.fn.pluginStyle = function(opt){
　　var defaults = {
　　　　'color' : 'red',
　　};
　　var settings = $.extend(defaults,opt);
　　　　return this.css({
　　　　　　'color': settings.color,
　　　　})
}

//不传参调用，则color设置为默认值red                
$(elm).pluginStyle();
//传参调用，则color设置为blue
$(elm).pluginStyle({'color':'blue'});

　　到此，插件能够接收和处理参数后，就能够编写出更灵活的插件了。

面向对象插件

　　问：

　　若要编写一个复杂的插件，代码量会很大，如何组织代码就成了一个须要面临的问题，没有一个好的方式来组织代码，总体感受会杂乱无章，同时也难以维护，怎么办呢？

　　答：

　　咱们将插件的全部属性包装到一个对象上，用面向对象的思惟来进行开发，那么，一切将迎刃而解！

　　咱们将上面的例子美化一下，代码以下：

//定义Nick对象的构造方法
  var Nick = function(ele, opt){
    this.$element = ele,
      this.defaults = {
        'color': 'red'
      },
      this.options = $.extend(this.defaults,opt);
  }
  //定义对象的方法
  Nick.prototype = {
    handsome:function(){
      return this.$element.css({
        'color': this.options.color
      });
    }
  }
  //在插件中使用对象
  $.fn.myPlugin = function(options){
    //建立实体
    var me = new Nick(this, options);
    //调用其方法
    return me.handsome();
  }

  //不传参调用，则color设置为默认值red
  $(elm).pluginStyle();
  //传参调用，则color设置为blue
  $(elm).pluginStyle({'color':'blue'});

　　写到这里我感受已经完美了，可是在吃饭完后准备发布的时候，看了看--哎呀！好像还有进步空间吖！

匿名函数的用处到了

　　不只是jQuery插件的开发，咱们在写任何JS代码的时都应该注意不要污染全局命名空间，由于随着代码量的增长，若是有意无心在全局范围内定义一些变量的话，最后很难维护，也会和别人写的代码发生冲突。
　　一个好的作法是始终使用自调用匿名函数包裹你的代码，这样就能够彻底安全、放心的用到任何地方，绝对不会发生冲突问题。
在Javascript中没法使用花括号方便的建立做用域，但函数却能够造成一个做用域，域内的代码是没法被外界访问的，若是咱们将本身的代码放入到函数中，那么就不会污染全局命名空间，同时也不会和别的代码发生冲突。因此咱们将全部代码用自调用匿名函数包裹。
　　最后的将上面的插件代码用一个匿名函数包裹起来，大功告成！

　　结束时，仍是那句话--望大神指教鞭策我！

 补充 $.extend()

　　这里多谢某童鞋的提醒！说方式一还还可用于合并参数和深clone，虽然方式二中用了方式一作参数合并，但并未详细介绍，因此今天在此处作点补充！

附补充连接：

http://www.cnblogs.com/puyongsong/p/5992362.html