mg4377娱乐娱城官网_mg4377娱乐手机版_www.mg4377.com

当前位置: mg4377娱乐娱城官网 > www.mg4377.com > 正文

jQuery插件封装,插件封装的点子

时间:2019-08-17 02:34来源:www.mg4377.com
swipe帮衬Computer上的自行滑动,也支撑手提式有线电话机端的滑动作效果果.但是每一遍调用只可以扶助叁个效应大概说一个页面现身n个那样的功力,大家就得调用n次这一个插件. 作用: 扩

swipe帮衬Computer上的自行滑动,也支撑手提式有线电话机端的滑动作效果果.但是每一遍调用只可以扶助叁个效应大概说一个页面现身n个那样的功力,大家就得调用n次这一个插件.

作用:

         扩展jQuery插件和方法的作用是非常强大的,他可以节省大量的开发时间

jQuery 插件封装的办法,jquery插件封装

增添jQuery插件和章程的法力是极度庞大的,它可以节省多量开采时间。那篇小说将概述jQuery插件开拓的基本知识,最棒做法和周围的牢笼。

一、入门

编写制定二个jQuery插件起先于给jQuery.fn出席​​新的功用属性,此处增添的目的属性的称呼就是你插件的称呼:

. 代码如下:

jQuery.fn.myPlugin = function(){ 
//你自己的插件代码 
};

用户特别欣赏的号子哪儿去了?它照旧存在,不过,为了幸免和另外JavaScript库冲突,我们最佳将jQuery传递给三个自个儿实践的密闭程序,jQuery在此程序中映射为标记,这样能够幸免$号被别的库覆写。

. 代码如下:

(function ($) {
$.fn.m​​yPlugin = function () {
//你自己的插件代码
};
})(jQuery);

在这几个密封程序中,我们得以私行的选取$符号来代表jQuery函数。

二、环境

于今,我们得以起先编写制定实际的插件代码。 但是,在那以前,大家亟须得对插件所处的条件有个概念。 在插件的限量里, this关键字表示了那么些插件将要实行的jQuery对象, 这里轻巧生出一个大范围的误区,因为在其余包蕴callback的jQuery函数中,this关键字表示了原生的DOM成分。那平时会导致开荒者误将this关键字无谓的包在jQuery中,如下所示。

. 代码如下:

(function ($) {
$.fn.m​​yPlugin = function () {
//此处没有必要将this包在$号中如$(this),因为this已经是一个jQuery对象。
//$(this)等同于 $($('#element'));
this.fadeIn('normal', function () {
//此处callback函数中this关键字代表一个DOM元素
});
};
})(jQuery);
$('#element').myPlugin();

三、基础知识

以往,大家了然了jQuery插件的基础知识,让我们写一个插件,做一些作业。

. 代码如下:

(function ($) {
$.fn.m​​axHeight = function () {
var max = 0;
this.each(function () {
max = Math.max(max, $(this).height());
});
return max;
};
})(jQuery);
var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度

那是七个简便的插件,利用.height()再次回到页面中中度最大的div元素的莫斯中国科学技术大学学。

jQuery插件封装,插件封装的点子。四、维护Chainability

无数时候,三个插件的意图仅仅是以某种格局修改搜罗的要素,并把它们传递给链中的下四个主意。 那是jQuery的宏图之美,是jQuery如此受招待的原因之一。 由此,要保持二个插件的chainability,你不可能不确定保障您的插件再次回到this关键字。

. 代码如下:

(function ($) {
$.fn.lockDimensions = function (type) {
return this.each(function () {
var $this = $(this);
if (!type || type == 'width') {
$this.width($this.width());
}
if (!type || type == 'height') {
$this.height($this.height());
}
});
};
})(jQuery);
$('div').lockDimensions('width').CSS('color', 'red');

鉴于插件重回this关键字,它保持了chainability,那样jQuery采撷的成分得以继续被jQuery方法如.css调控。 由此,倘令你的插件不回来固有的价值,你应有总是在其效用范围内回到this关键字。 其它,你恐怕会估计出,传递给插件的参数将会在插件的效应范围内被传送。 因而,在后面包车型大巴例证,字符串'width'形成了插件的品种参数。

五、私下认可值和挑选

对于比较复杂的和提供了无数选项可定制的的插件,最棒有三个当插件被调用的时候能够被实行的默许设置(通过选用$.extend)。 因此,相对于调用贰个有大批量参数的插件,你能够调用贰个指标参数,满含你了您想覆写的装置。

. 代码如下:

(function ($) {
$.fn.tooltip = function (options) {
//创建一些默认值,拓展任何被提供的选项
var settings = $.extend({
'location': 'top',
'background-color': 'blue'
}, options);
return this.each(function () {
// Tooltip插件代码
});
};
})(jQuery);
$('div').tooltip({
'location': 'left'
});

在那个例子中,调用tooltip插件时覆写了暗许设置中的location选项,background-color选项保持暗中认可值,所以最终被调用的设定值为:

. 代码如下:

{
'location': 'left',
'background-color': 'blue'
}

那是三个很灵敏的情势,提供四个莫斯中国科学技术大学学可配备的插件,而不须要开采人士定义全数可用的选项。

六、命名空间

准确命名空间你的插件是插件开采的二个老大首要的一某个。 正确的命名空间,能够确定保证你的插件将有三个比异常的低的空子被其余插件或同等页上的任何代码覆盖。 命名空间也使得你的生活作为贰个插件开垦人士更易于,因为它能够支持您越来越好地跟踪你的主意,事件和数码。

七、插件方法

在别的动静下,二个单身的插件不该在jQuery.fnjQuery.fn对象里有多少个命名空间。

. 代码如下:

(function ($) {
$.fn.tooltip = function (options) {
// this
};
$.fn.tooltipShow = function () {
// is
};
$.fn.tooltipHide = function () {
// bad
};
$.fn.tooltipUpdate = function (content) {
// !!!
};
})(jQuery);

那是不被鼓励的,因为它.fn使.fn命名空间一塌糊涂。 为了化解那一个标题,你应当访问对象文本中的全体插件的艺术,通过传递该措施的字符串名称给插件以调用它们。

. 代码如下:

(function ($) {
var methods = {
init: function (options) {
// this
},
show: function () {
// is
},
hide: function () {
// good
},
update: function (content) {
// !!!
}
};
$.fn.tooltip = function (method) {
// 方法调用
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method'   method   'does not exist on jQuery.tooltip');
}
};
})(jQuery);
//调用init方法
$('div').tooltip();
//调用init方法
$('div').tooltip({
foo: 'bar'
});
// 调用hide方法 
$(‘div').tooltip(‘hide');
//调用Update方法 
$(‘div').tooltip(‘update', ‘This is the new tooltip content!');

那种类型的插件架构允许你封装全体的章程在父包中,通过传递该情势的字符串名称和附加的此方式必要的参数来调用它们。 这种艺术的包装和架构类型是jQuery插件社区的正规化,它被多数的插件在利用,包含jQueryUI中的插件和widgets。

八、事件

叁个鲜为人知bind方法的遵循即允许绑定事件命名空间。 假诺您的插件绑定二个风云,三个很好的做法是赋予那一件事件命名空间。 通过这种格局,当您在解除绑定的时候不会搅扰其余恐怕曾经绑定的一致类型事件。 你可以透过扩充命名空间到你必要绑定的的风云经过 ‘.'。

. 代码如下:

(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
$(window).bind('resize.tooltip', methods.reposition);
});
},
destroy: function () {
return this.each(function () {
$(window).unbind('.tooltip');
})
},
reposition: function () {
//...
},
show: function () {
//...
},
hide: function () {
//...
},
update: function (content) {
//...
}
};
$.fn.tooltip = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method '   method   ' does not exist on jQuery.tooltip');
}
};
})(jQuery);
$('#fun').tooltip();
//一段时间之后… … 
$(‘#fun').tooltip(‘destroy');

在这么些例子中,当tooltip通过init方法开始化时,它将reposition方法绑定到resize事件并给reposition非那艺术予以命名空间通过追加.tooltip。 稍后, 当开辟人员要求销毁tooltip的时候,大家得以同不日常间免去当中reposition方法和resize事件的绑定,通过传递reposition的命名空间给插件。 那使我们能够平安地清除事件的绑定并不会影响到此插件之外的绑定。

九、数据

日常在插件开垦的时候,你只怕须求记录大概检查你的插件是或不是早就被初叶化给了三个要素。 使用jQuery的data方法是三个很好的基于元素的笔录变量的路线。固然如此,相对于记录大批量的分裂名字的分手的data, 使用一个单独的靶子保存全部变量,并通过多少个独立的命名空间读取那些目的正是二个越来越好的不二法门。

. 代码如下:

(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
var $this = $(this),
data = $this.data('tooltip'),
tooltip = $('<div />', {
text: $this.attr('title')
});
// If the plugin hasn't been initialized yet
if (!data) {
/*
Do more setup stuff here
*/
$(this).data('tooltip', {
target: $this,
tooltip: tooltip
});
}
});
},
destroy: function () {
return this.each(function () {
var $this = $(this),
data = $this.data('tooltip');
// Namespacing FTW
$(window).unbind('.tooltip');
data.tooltip.remove();
$this.removeData('tooltip');
})
},
reposition: function () {
// ...
},
show: function () {
// ...
},
hide: function () {
// ...
},
update: function (content) {
// ...
}
};
$.fn.tooltip = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method '   method   ' does not exist on jQuery.tooltip');
}
};
})(jQuery);

将数据经过命名空间封装在多少个对象中,能够更易于的从贰个聚齐的地方读取全部插件的天性。

十、计算和特等做法

编写jQuery插件允许你做出库,将最有效的效果与利益集成到可选取的代码,可以省去开辟者的日子,使支付越来越高效。 开采jQuery插件时,要切记:

1.从来包裹在三个密封的插件:

. 代码如下:

(function($) { 
/* plugin goes here */ 
})(jQuery);

2.绝不冗余包裹this关键字在插件的作用界定内

3.唯有插件重临特定值,不然总是回到this关键字来维系chainability 。

4.传递七个可进行的暗许对象参数并不是多量的参数给插件。

5.不用在五个插件中频频命名差别措施。

3.一贯命名空间的主意,事件和数码。

最后加三个和好写的放大镜的插件`

(function($){$.fn.Fdj=function(){
$('#smallImg').on('mouseover', function() {
$('#slider').show();
})
$('#smallImg').on('mouseout', function() {
$('#slider').hide();
})
$('#smallImg').on('mousemove', function(e) {
var x = e.clientX - $('#slider').width() / 2;
var y = e.clientY - $('#slider').height() / 2;
if(x <= 0) {
x = 0
}
if(x > $('#smallImg').width() - $('#slider').width()) {
x = $('#smallImg').width() - $('#slider').width();
}
if(y <= 0) {
y = 0
}
if(y > $('#smallImg').height() - $('#slider').height()) {
y = $('#smallImg').height() - $('#slider').height();
}
$('#slider').css({
'left': x,
'top': y
})
var X=x/$('#smallImg').width()*800 
var Y=y/$('#smallImg').height()*800
$('#img').css({
left:-X,
top:-Y
})
}) 
}
})(jQuery)

如上所述是作者给我们介绍的jQuery 插件封装的方法,希望对大家全部协助,假若大家有其余疑问请给自家留言,我会及时还原大家的。在此也非常谢谢大家对帮客之家网站的支撑!

插件封装的艺术,jquery插件封装 扩大jQuery插件和办法的成效是不行有力的,它能够省去大量付出时间。那篇小说将概述jQuery插件开荒...

自身使用swipe jQuery使得swip变得方便使用,具有了jQuery插件的有一点点.只必要叁个调用就能够使页面具备n个那样的效果.

方法一:

       类级别的封装方法:就是扩展jQuery类本身的方法,为它增加新的方法。(不常用,不方便绑定元素)

         1.定义方法:
               第一种:
                     $.函数名=function(自定义参数){
                            插件的代码
                     }

               第二种:
                      $.extend({
                              函数名:function(自定义参数){
                                     插件的代码
                              }
                      })
         2.例如:
                    //第一种在$类中添加方法
                        $.ran = function(min,max){
                              return parseInt(Math.random()*(max-min 1) min);
                            }
                     //调用:alert($.ran(1,100))

                    //第二种    可以定义多个函数
                        $.extend =({
                             ran:function(min,max){
                             return parseInt(Math.random()*(max-min 1) min);
                            },
                            fun:function(){alert(1)},
                            fun2:function(){...}
                        })
          调用:document.write($.ran(1,100))
                $.fun()

其它在效劳中置入了鼠标的点击效果.那些接口是曾经给出去了,可是很少在网络看到有人用过那些接口的.

方法二:

        对象级别的插件扩展(重点)
         1、定义的方法:
               $.fn.extend({
                       函数名:function(自定义参数){
                                   插件的代码
                        }
                })

         2、例如:  
                   $.fn.extend({
                        randomColor:function(){
                            var r=parseInt(Math.random()*256)
                            var g=parseInt(Math.random()*256)
                            var b=parseInt(Math.random()*256)
                            $(this).css("background","rgb(" r "," g "," b ")")
                        }
                   })
                   //调用:$("div").randomColor()

图片 1

方法三:

        封装拖拽

              $.fn.extend({
                     drop:function(){
                          $(this).css("position","absolute")//设定绝对定位
                          $(this).on("mousedown",function(e){
                              var l=e.offsetX; //鼠标距离事件源左边的距离
                              var t=e.offsetY;
                              var that=$(this)
                              $(window).on("mousemove",function(e){             
                                    $(that).css({left:e.pageX-l "px",top:e.pageY-t "px"});
                              })
                              $(window).on("mouseup",function(){
                                   $(window).off("mousemove")
                              })
                         })
                     }
               })
 1 <style type="text/css">
 2     #gys img{height:300px;}
 3     </style>
 4     <div class="gys" id="gys">       
 5         <div style="background-color:Red;">第一张</div>
 6         <div style="background-color:Green">第二章</div>
 7         <div style="background-color:Gray;">第三章</div> 
 8         <div style="background-color:Red;">第四张</div>
 9         <div style="background-color:Green">第五章</div>
10         <div style="background-color:Gray;">第六章</div>         
11     </div>
12     <style type="text/css">
13      #gys2{ margin-top:20px;}
14     #gys2 img{height:300px;}
15     </style>
16     <div class="gys" id="gys2">       
17         <div><img src="1.jpg" style=""/></div>
18         <div><img src="2.jpg" style=""/></div>
19         <div><img src="3.jpg" style=""/></div>
20         <div><img src="4.jpg" style=""/></div>
21         <div><img src="5.jpg" style=""/></div>
22         <div><img src="6.jpg" style=""/></div>               
23     </div>
24 
25 
26    <style type="text/css">
27      #gys3{ margin-top:20px;}
28     #gys3 > div >div{height:200px;}
29     </style>
30     <div class="gys" id="gys3">       
31         <div style='background:url(1.jpg) center no-repeat;background-size: cover;'><h1>1</h1></div>
32         <div style='background:url(2.jpg) center no-repeat;background-size: cover;'><h1>2</h1></div>
33         <div style='background:url(3.jpg) center no-repeat;background-size: cover;'><h1>3</h1></div>
34         <div style='background:url(4.jpg) center no-repeat;background-size: cover;'><h1>4</h1></div>
35         <div style='background:url(5.jpg) center no-repeat;background-size: cover;'><h1>5</h1></div>
36         <div style='background:url(6.jpg) center no-repeat;background-size: cover;'><h1>6</h1></div>               
37     </div>

 

编辑:www.mg4377.com 本文来源:jQuery插件封装,插件封装的点子

关键词: 日记本