jQ插件编写

参考文档：http://www.cnblogs.com/Dlonghow/p/4142034.html

编写插件最先接触到的就是jQuery.fn.extend 和jQuery.extend 这个两个属性，但是这两个东西是什么，干啥用的，还得先明白：

1、jQuery.extend(object)

　　a)、为jQuery添加静态方法

　　　　eg ： jQuery.extend({

　　　　　　　　min:function(a,,b){return a<b?a:b},

　　　　　　　　max:function(a,b){return a>b?a:b}

　　　　　　  });

　　　　 　　 jQuery.min(2,3)  //2

　　b)、jQuery.extend(target,object1,[objectN]) 用一个对象或多个对象来扩充对象，最后返回扩充的对象

　　　　eg: 

　　　　　　var target = {
　　　　　　　　name　:　'zt',
　　　　　　　　age 　:　24
　　　　　　}
　　　　　　var object1 = {
　　　　　　　　name :　'zj',
　　　　　　　　age : '28',
　　　　　　　　address : 'ly'
　　　　　　}
　　　　　　console.log(jQuery.extend(target,object1));  // {name:'zj',age:'28',address:'ly'};

2、jQuery.fn.extend(object);

　　$.fn是什么？

　　$.fn是指jQuery的命名空间，fn上的成员(方法function及属性property)，会对jQuery实例每一个有效。 

　　

　　查看jQuery代码，就不难发现。

　　jQuery.fn = jQuery.prototype = {

　　　　　init: function( selector, context ) {//....　

　　};

　　原来 jQuery.fn = jQuery.prototype.

　　所以，它是对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

　　比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：

　　$.fn.extend({          
     　　doAlertWhileClick:function() {            
          　　$(this).click(function(){                 
                  　　alert($(this).val());           
            　　});           
      　　}       
　　});       
　　$("#input1").doAlertWhileClick(); // 页面上为：    

　　$("#input1")　为一个jQuery实例{不太懂？}，当它调用成员方法 doAlertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。

 

3、在实际的开发项目中：{pluginName为插件名称}

　　开发插件，是$.fn.pluginName = function(options){  }; 如果pluginName 为变量， 则写成 $.fn[pluginName] = function(options){  }

　　第一步：定一个闭包区域，防止插件被污染

;(function ($, window,undefined) {  //传入window，不需要去外部寻找，提高效率 ； undefined ，防止外部声明，影响内部变量

})(window.jQuery, window);

　　第二步：写入插件方法：

;(function ($, window,undefined) {  //传入window，不需要去外部寻找，提高效率 ； undefined ，防止外部声明，影响内部变量
  　　$.fn[pluginName] = function(options){
     　　return this.each(function(){

　　　　　　})  //支持链式调用
 　　}
})(window.jQuery, window);

 

转载于:https://www.cnblogs.com/zouer/p/4649161.html