您的位置:首页 > 其它

jQ插件编写

2015-07-15 18:16 211 查看
参考文档: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);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: