如何写一个jquery 插件

发布网友 发布时间：2022-04-23 17:10

我来回答

共2个回答

懂视网 时间：2022-05-14 20:53

一、jQuery插件的创建可以有三种方法

1.通过$.extend()来扩展jQuery

2.通过$.fn 向jQuery添加新的方法

3.通过$.widget()应用jQuery UI的部件工厂方式创建

方法1太简单，创建后通过$.myfunction()方式调用，不能对指定元素调用。

方法3相对于方法2太复杂。

方法2就是常用的创建jq插件的方法。可以对指定元素进行操作。例如$('#title').myfunction();

二、jQuery插件创建格式

$.fn.myfunction = function() {
 //在这里面,this指的是用jQuery选中的元素
 //example :$('a'),则this=$('a')
 this.css('color', 'red');
}

如果想要支持链式调用只需return一下即可。

$.fn.myfunction = function() {
 //在这里面,this指的是用jQuery选中的元素
 //example :$('a'),则this=$('a')
 return this.css('color', 'red');
}

三、让jquery插件接受参数，使用$.extend方法

$.fn.myPlugin = function(options) {
 var defaults = {//设置默认值
 'color': 'red',
 'fontSize': '12px'
 };
 var settings = $.extend(defaults, options);//这种方法会使第一个参数会被修改，为了保持变量defaults的值不变应该使用以下代码
 //var settings = $.extend({},defaults, options);//在extend方法的第一个参数添加一个空对象。
 return this.css({
 'color': settings.color,
 'fontSize': settings.fontSize
 });
}

四、面向对象的jquery插件开发

为了以后代码维护和可读性我们可以进行面向对象的方法开发插件。

var Beautifier = function(ele, opt) {
 this.$element = ele, //获取当前选中的jq对象。
 this.defaults = {
 'color': 'red',
 'fontSize': '12px'
 },
 this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法
Beautifier.prototype = {
 beautify: function() {
 return this.$element.css({
  'color': this.options.color,
  'fontSize': this.options.fontSize
 });
 }
}
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
 //创建Beautifier的实体
 var beautifier = new Beautifier(this, options);
 //调用其方法
 return beautifier.beautify();
}

热心网友 时间：2022-05-14 18:01

jquery插件开发模式
jquery插件一般有三种开发方式：
通过$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方法
通过$.widget()应用jQuery UI的部件工厂方式创建

第一种$.extend()相对简单，一般很少能够开发复杂插件，第三种是一种高级的开发模式，本文也不做介绍。第二种则是一般插件开发用到的方式，本文着重讲讲第二种。
插件开发
第二种插件开发方式一般是如下定义
$.fn.pluginName = function() {
//your code here
}

插件开发，我们一般运用面向对象的思维方式
例如定义一个对象
var Haorooms= function(el, opt) {
this.$element = el,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration':'none'
},
this.options = $.extend({}, this.defaults, opt)
}
//定义haorooms的方法
haorooms.prototype = {
changecss: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}

$.extend({}, this.defaults, opt)有{}主要是为了创建一个新对象，保留对象的默认值。
$.fn.myPlugin = function(options) {
//创建haorooms的实体
var haorooms= new Haorooms(this, options);
//调用其方法
return Haorooms.changecss();
}

调用这个插件直接如下就可以
$(function() {
$('a').myPlugin({
'color': '#2C9929',
'fontSize': '20px'
});
})

上述开发方法的问题
上面的开发方法存在一个严重的问题，就是定义了一个全局的Haorooms，这样对于插件的兼容等等各个方面都不好。万一别的地方用到了Haorooms，那么你的代码就悲催了！现在我们把上面的代码包装起来，用一个自调用匿名函数(有时又叫块级作用域或者私有作用域)包裹，就不会出现这个问题了！包括js插件的开发，也是一样的，我们用一个自调用匿名函数把自己写的代码包裹起来，就可以了！包裹方法如下：
(function(){

})()

用上面的这个包裹起来，就可以了。
但是还有一个问题，当我们研究大牛的代码的时候，前面经常看到有“；”，那是为了避免代码合并等不必要的错误。
例如，我们随便定义一个函数：
var haoroomsblog=function(){

}
(function(){

})()

由于haoroomsblog这个函数后面没有加分号，导致代码出错，为了避免这类情况的发生，通常这么写！
；(function(){

})()

把你的插件代码包裹在上面里面，就是一个简单的插件了。（注js插件和jquery插件都是如此）
还有一个问题
把你的插件包裹在
；(function(){

})()

基本上可以说是完美了。但是为了让你开发的插件应用更加广泛，兼容性更加好，还要考虑到用插件的人的一些特殊的做法，例如，有些朋友为了避免jquery和zeptojs冲突，将jquery的前缀“$”,修改为“jQuery”，还有些朋友将默认的document等方法修改。为了让你的插件在这些东西修了了的情况下照常运行，那么我们的做法是，把代码包裹在如下里面：
;(function($,window,document,undefined){
//我们的代码。。
})(jQuery,window,document);

就可以避免上面的一些情况了！
至此，你开发的插件就算完美了！