脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery开发插件的两种方式，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 做web开发的基本上都会用到jQuery，jquery插件开发两种方式：一种是类扩展的方式开发插件，jQuery添加新的全局函数(jQuery的全局函数是属于jQuery命名空间的函数)，如果将jQuery看成一个类，那么就相当于给jQuery类本身添加方法。第二种是对象扩展的方式开发插件，即jquery对象添加方法。
类扩展的插件
类扩展的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类扩展的插件开发可以采用如下几种形式进行扩展：
1.添加全局函数
$.ltrim = function( str ) {
return str.replace( /^/s+/, "" );
};
调用方式
VAR str=" 去除左空格 ";
console.LOG("去除前:"+str.length+"去除后:"+$.ltrim(str).length);
2.添加多个全局函数
$.ltrim = function( str ) {
return str.replace( /^/s+/, "" );
};
$.rtrim = function( str ) {
return str.replace( //s+$/, "" );
};
上面那种如果你写的全局函数比较少的情况下使用挺好，如果多的话建议使用 使用$.extend(object)
$.extend({
ltrim:function( str ) {
return str.replace( /^/s+/, "" );
},
rtrim:function( str ) {
return str.replace( //s+$/, "" );
}
});
3.独立的命名空间
虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法封装到另一个自定义的命名空间。
$.myPlugin={
ltrim:function( str ) {
return str.replace( /^/s+/, "" );
},
rtrim:function( str ) {
return str.replace( //s+$/, "" );
}
};
使用独立的插件名，可以避免命名空间内函数的冲突，调用方式:
var str=" 去除左空格 ";
console.log("调用前:"+str.length+"调用后:"+$.myPlugin.ltrim(str).length);
对象扩展的插件
1.添加一个对象扩展方法
$.fn.changeColor= function() {
};
$.fn.changeFont= function() {
this.css( "font-size", "24px" );
};
调用方式:
$(function () {
$("a").showColor();<br> $("p").changeFont();
});
2.添加多个对象扩展方法
(function($){
$.fn.changeColor= function() {
this.css( "color", "red" );
};
$.fn.changeFont=function() {
this.css( "font-size", "24px" );
};
})(jQuery);
兼容写法(防止前面的函数漏写了；):
;(function($){
$.fn.changeColor= function() {
this.css( "color", "red" );
};
$.fn.changeFont=function() {
this.css( "font-size", "24px" );
};
})(jQuery);
上面都定义了一个jQuery函数,形参是$，函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与PRototyPE引起冲突.
3. 使用$.fn.extend(object)
题外话，查看jQuery源码(版本1.11.1)可以看到:
jQuery.fn = jQuery.prototype = {
// The current version of jQuery being used
jquery: version,
constructor: jQuery,
......................
},
jQuery是一个封装得非常好的类，比如语句$("a") 会生成一个 jQuery类的实例。jQuery.fn.extend(object)实际上是对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
$.fn.extend({
changeColor:function() {
this.css( "color", "red" );
},
changeFont:function() {
this.css( "font-size", "24px" );
}
});
介绍了基本是关于对象扩展的基础的用法，下面开发一个简单的类似于代码高亮的功能，如下:
(function($) {
$.fn.highlight = function(options) {
//插件参数的可控制性，外界可以修改默认参数
var defaults=$.extend($.fn.highlight.defaults, options );
//遍历函数，然后根据参数改变样式
return this.each(function() {
var elem = $( this );
var markup = elem.html();
markup = $.fn.highlight.format( markup );
elem.htML(markup);
elem.css({
color: defaults.color,
fontSize:defaults.fontSize,
backgroundColor: defaults.backgroundColor
});
});
};
//参数默认值
$.fn.highlight.defaults={
color: "#556b2f",
backgroundColor:"whITe",
fontSize: "48px"
};
//格式化字体
$.fn.highlight.format = function( txt ) {
return "<strong>" + txt + "</strong>";
};
})(jQuery);
$(function () {
//调用插件
$("a").highlight({color:"red",fontSize:"24px"});
});
小结
jQuery这两种插件开发的使用，需要根据开发过程中的具体情况而定，第一种类扩展的方法类似于C#添加一个静态方法，第二种对象扩展主要是根据自己的实际业务而确定的，你的网站有些地方常用的功能肯定可以自己写成一个插件，比如说图片的查看，侧边栏的点击，有的时候你同样可以研究网上别人写的插件，也可以学到不少东西.
如果你觉得本文还不错，有所收获，给个推荐吧，多谢~
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery开发插件的两种方式全部内容，希望文章能够帮你解决javascript代码实例教程-jQuery开发插件的两种方式所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。