码迷,mamicode.com
首页 > Web开发 > 详细

jQuery插件开发

时间:2016-07-09 14:47:14      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:

一、开发方式:

1.类级别组件开发

  - 即在jQuery命名空间下添加新的全局函数,也称为静态方法。

  具体方法如下:

jQuery.myPlugin = function(){
    // do something    
}

  例如:$.ajax()、$.extend()

2.对象级别组件开发

  - 即挂在jQuery原型下的方法,这样通过选择器获取的jQuery对象实例也能共享该方法,也称为动态方法。

  具体方法如下:

$.prototype.myPlugin = function(){
    // do something
}

 

二、链式调用:

 

$.fn.myPlugin = function (){
    return this.each(function(){
        //do something
    })  
}

 

    链式调用是jQuery的特点,实现链式调用的方法就是return this返回当前对象,上面的代码中用了each方法来循环实现每个对象的访问。

 

- 单例模式的动态方法:

$.fn.MyPlugin = function(){
    var me = $(this),
        instance = me.data("myPlugin");   //利用data()来存放插件对象的实例

    //如果实例存在就不重新创建,如果不存在就创建  
    if(!instence){
        me.data("myPlugin",(instance = new myPlugin()));
    }
}

 

总结:一个单例模式jQuery插件的框架可以这样写:

//创建一个闭包,形参是$,实参是jQuery
(function($){
  //私有方法
  var privateFun = function(){ }
  var PageSlide = (function(){     //更改对象     function PageSlide(element,options){       this.settings = $.extend(true,$.fn.PageSlide.default,options||{});       this.element = element;       this.init();     }
    PageSlide.prototype
= {
      // 初始化方法       init :
function(){ }     }

  return PageSlide; })(); //默认参数 $.fn.PageSlide = function(options){   //实现链式调用   return this.each(function(){     var _self = $(this),       instance = _self.data(‘PageSlide‘);//存放插件实例     if (!instance) {       instance = new PageSlide(_self,options);       _self.data(‘PageSlide‘,instance);     }       if ($.type(options)==‘string‘) return instance[options]();   }); } //配置默认参数

$.fn.PageSlide.default = { } })(jQuery);

jQuery的$.extend()方法能够将默认参数与自定义参数合并,当有ture时是深拷贝,没有true时是浅拷贝。

 

jQuery插件开发

标签:

原文地址:http://www.cnblogs.com/koto/p/5655756.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!