本文主要介绍如何编写JQuery插件，注意事项，以及必要的步骤。看完这篇文章，相信你会明白如何编写一个JQuery插件。
普及JQuery知识
知识:用JQuery写插件时，核心方法如下:
$.extend(object)可以理解为给JQuery添加一个静态方法。
$.fn.extend(object)可以理解为给JQuery实例增加一个方法。
的基本定义和要求:
/* $.扩展定义和调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun 1:function(){ alert(“方法1 ”);} });
$ . fun 1()；
/* $.fn .扩展定义并调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$ . fn . extend({ fun 2:function(){ alert(“方法二”);} });
$(this). fun 2()；
//相当于
$ . fn . fun 3 = function(){ alert(“方法三”);}
$(this). fun 3()；
2:知识:2:jQuery(function(){ })；和(function($){ })(jQuery)；之间的区别:
jQuery(function(){ })；
//相当于
$(文档)。ready(函数(){ })；
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
(函数($){ })(jQuery)；
//相当于
var fn = function($){ }；
fn(jQuery)；
jQuery(function(){ })；它是加载DOM元素后执行方法中的代码。
(函数($){ })(jQuery)；定义了一个匿名函数，其中jQuery表示这个匿名函数的参数。通常用于JQuery插件的开发中，起到定义插件私有域的作用。
第三，开发JQuery插件的标准结构。
1、定义范围:要定义一个JQuery插件，首先要把这个插件的代码放在不受外界干扰的地方。用专业术语来说，就是要为这个插件定义一个私有范围。的外部代码不能直接访问插件内部的代码。插件内部的代码不会污染全局变量。一定程度上解耦了插件对运行环境的依赖。说到这里，如何定义一个插件的私有范围呢？
(函数($) {
})(jQuery)；
到目前为止，实际上已经完成了一个简单的JQuery插件。可以拨打$(“# domName & # 8221).easySlider({})或$(“。domName & # 8221).easySlider({})或更多调用此插件的方法。
3.设置默认值:定义一个JQuery插件，就像定义. net控件一样。一个完美的插件应该具有灵活的属性。让我们看看这段代码:。TextBox控件具有宽度和高度属性。使用TextBox时，用户可以自由设置控件的高度和宽度，因为控件本身有默认值。当准备开发一个JQuery插件时，当用户没有指定属性时，应该有一个默认值。在JQuery中，这个定义可以分两步实现。参见以下代码步骤03-a和步骤03-B。
//step01定义JQuery的范围
(函数($) {
//step 03-a插件的默认值属性
var默认值= {
prevId:‘prevBtn & # 8217,
prev text:‘上一篇’,
nextId:‘nextBtn & # 8217,
next text:‘接下来’
//……
};
//step02插件的扩展方法名
＄. fn . easy slider = function(options){
//step03-b合并自定义属性，默认属性
var期权= $。扩展(默认值、选项)；
}
})(jQuery)；
做程序的人喜欢创新，改变量名，改一行等等。当你看到一个默认属性用var defaults = {}表示时，你想在编写JQuery插件时与众不同，于是你用var default01 ={}和var default02 ={}来表示默认属性。那么默认的属性名就多种多样，而且越来越差。所以建议在编写JQuery插件时，在定义默认属性时，使用defaults变量来表示默认属性，这样代码可读性更好。
当有人看到这行代码时:var options = $。extend(违约，期权)，他们皱着眉头表示不解。让我们先来看看下面的代码:
var obj 01 = { name:“英文名:Sam Xiao & # 8221，年龄:29，女朋友:{姓名:“杨”，年龄:29} }
var obj 02 = { name:“中文名:肖剑”，女朋友:{姓名:“YY ”} };
var a = $。扩展(obj01，obj 02)；
var b = $。extend(true，obj01，obj 02)；
var c = $。extend({}，obj01，obj 02)；
var d = $。extend(true，{}，obj01，obj 02)；
将代码***到开发环境中，分别看A、B、C、D的值，理解var options = $的含义。扩展(默认值，选项)。指示选项覆盖默认值并将该值赋给选项。
在插件环境中，表示用户设置的值，覆盖插件的默认值；如果用户没有设置默认属性，插件的默认值应该被保留。
4.支持JQuery选择器:JQuery选择器是JQuery的一个优秀特性。如果我们的插件不支持JQuery选择器，那确实是一大遗憾。为了使我们的JQuery插件支持多个选择器，我们的代码应该定义如下:
//step01定义JQuery的范围
(函数($) {
//step 03-a插件的默认值属性
var默认值= {
prevId:‘prevBtn & # 8217,
prev text:‘上一篇’,
nextId:‘nextBtn & # 8217,
next text:‘接下来’
//……
};
//step02插件的扩展方法名
＄. fn . easy slider = function(options){
//step03-b合并自定义属性，默认属性
var期权= $。扩展(默认值、选项)；
//step4支持JQuery选择器
this.each(function () {
});
}
})(jQuery)；
5.支持JQuery的链接调用:上面的代码看起来很完美，其实没那么完美。到目前为止，还不支持链接调用。为了达到链接调用的效果，循环的每个元素都必须被返回。
//step01定义JQuery的范围
(函数($) {
//step 03-a插件的默认值属性
var默认值= {
prevId:‘prevBtn & # 8217,
prev text:‘上一篇’,
nextId:‘nextBtn & # 8217,
next text:‘接下来’
//……
};
//step02插件的扩展方法名
＄. fn . easy slider = function(options){
//step03-b合并自定义属性，默认属性
var期权= $。扩展(默认值、选项)；
//step4支持JQuery选择器
//step5支持链式调用。
return this.each(function () {
});
}
})(jQuery)；
只有这样，定义才能支持链接调用。比如支持这样的调用:$(“。div & # 8221).easy slider({ prevId:””，prev text:””}).CSS({ “边框宽度”: “1”, “边框颜色”: “红色”, “边框-底部样式”: “点线”});
6.插件中的方法:实现一个插件的功能往往需要大量的代码，可能几百行、几千行甚至上万行。我们必须使用函数来构造这个代码。如第一点所述，插件中定义的方法不能被外界直接调用，我在插件中定义的方法也不会污染外部环境。现在尝试如何在插件中定义一些方法:
//step01定义JQuery的范围
(函数($) {
//step 03-a插件的默认值属性
var默认值= {
prevId:‘prevBtn & # 8217,
prev text:‘上一篇’,
nextId:‘nextBtn & # 8217,
next text:‘接下来’
//……
};
//step06-a定义插件中的方法。
var showLink = function (obj) {
$(obj)。append(function(){ return “(”+ $(obj)。attr(“href & # 8221) + “)”});
}
//step02插件的扩展方法名
＄. fn . easy slider = function(options){
//step03-b合并自定义属性，默认属性
var期权= $。扩展(默认值、选项)；
//step4支持JQuery选择器
//step5支持链式调用。
return this.each(function () {
//step06-b定义插件中的方法。
showLink(这个)；
});
}
})(jQuery)；
本文来自转身以后投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/530183.html
微信扫一扫 
