首页 > 其他分享 >jQuery插件开发模式

jQuery插件开发模式

时间:2022-09-29 19:31:07浏览次数:46  
标签:jQuery function 插件 color 模式 Beautifier options

jQuery插件开发模式

软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践。

根据《jQuery高级编程》的描述,jQuery插件开发方式主要有三种:

  1. 通过$.extend()来扩展jQuery
  2. 通过$.fn 向jQuery添加新的方法
  3. 通过$.widget()应用jQuery UI的部件工厂方式创建

通常我们使用第二种方法来进行简单插件开发,说简单是相对于第三种方式。第三种方式是用来开发更高级jQuery部件的,该模式开发出来的部件带有很多jQuery内建的特性,比如插件的状态信息自动保存,各种关于插件的常用方法等。而第一种方式又太简单,仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而已。所以我们调用通过$.extend()添加的函数时直接通过$符号调用($.myfunction())而不需要选中DOM元素

$.extend({
sayHello: function(name) {
console.log('Hello,' + (name ? name : 'Dude') + '!');
}
})
$.sayHello(); //调用
$.sayHello('Wayou'); //带参调用

 上面代码中,通过$.extend()向jQuery添加了一个sayHello函数,然后通过$直接调用。到此你可以认为我们已经完成了一个简单的jQuery插件了。

 但是这种方式无法利用jquery 强大的选择器带来的便利,要处理DOM元素以及将插件更好的运用于所选择的元素上,还需要使用第二种开发方式。

插件开发

 基本格式:

$.fn.pluginName = function() {
//your code goes here

往 $.fn 上面添加一个方法,名字是我们的插件名称。然后 插件代码在这个方法里面展开。

例:

<ul>
<li>
<a href="http://www.webo.com/liuwayong">我的微博</a>
</li>
<li>
</li>
<li>
<a href="http://wayouliu.duapp.com/">我的小站</a>
</li>
</ul>
<p>这是p标签不是a标签,我不会受影响</p>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.myplugin.js"></script>
<script type="text/javascript">
$(function(){
$('a').myPlugin();
})
</script>

而 jquery.myplugin.js 为我们自定义的插件,内容如下:

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

有的时候,当一个页面可能会引用多个插件的时候,为了保证插件的正确,我们可以在我们的插件起始加一个 ; 来表示上一个插件结束,开始新的插件

 

调用插件的方法 $('a').myPlugin() 相当于 $('a').css('color','red'); 即把所有的a标签转为红色

插件里面的this 指代jquery 选择器返回的集合,而通过调用 jQuery 的.each() 方法可以处理合集中 的每个元素了。在each 方法内部,this指代的时候普通的DOM 元素,所以需要用$包装,如$(this) 

$.fn.myPlugin = function() {
//在这里面,this指的是用jQuery选中的元素
this.css('color', 'red');
this.each(function() {
//对每个元素进行操作
$(this).append(' ' + $(this).attr('href'));
}))
}

上面的插件意思:把所有的链接转为红色,并且将每个链接显示真实的链接地址

 

jquery有一个特性就是 支持链式调用,选择好的DOM元素后可以不断的调用其他方法,要不打破这种链式调用,需要把最后的值 return 一下

而一个好的插件是可以让使用者随意定制的,所以需要在编写插件是要考虑的全面一些,尽量提供合适的参数。比如,我们可以让用户定义显示什么颜色。需要让使用者在调用的时候传入一个参数,我们在插件代码里面接受即可。为了灵活,使用者可以不传递参数,插件里面采用默认值。为了保护好默认参数,所以第一个值使用新的空对象{}

$.fn.myPlugin = function(options) {
var defaults = {
'color': 'red',
'fontSize': '12px'
};
var settings = $.extend({},defaults, options);
return this.css({
'color': settings.color,
'fontSize': settings.fontSize
});
}

在处理插件参数的接收上,通常使用Jquery的extend方法。当给extend方法传递一个以上的参数时,它会将所有参数合并到第一个里,同时,如果对象中有同名属性时,合并的时候后面的会覆盖前面的。

 

 面向对象的插件开发

 需要一个方法是就去定义一个function,需要变量是就去定义一个变量,这样不方便维护,也不够清晰。一旦代码较多的时候,还是使用面向对象的思维比较好。

将需要的重要变量定义到对象的属性上,函数变成方法,当我们需要的时候通过对象来获取,一来方便管理,二来不会影响外部命名空间,因为变量名和方法名都在对象内部

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

在写任意js代码时都应该注意 不要污染全局命名空间。因为随着代码的变多,全局范围的变量很难维护,也容易跟别人的代码有冲突。最好始终用 自调用匿名函数 包裹代码

如上面的例子,我们调整了代码的组织结构,并将其用自调用匿名函数包裹。自调用匿名函数里面的代码会在第一时间执行,方便后面的代码使用插件。

为了防止多个插件同时使用时,有的插件没有用分号结尾,最好在代码开始加个分号 ; 

而,原有的系统变量也有可能被更改,所以最好将系统变量以参数形式传递到插件内部。这样插件内部就有一个局部的引用,可以提高访问速度,会有些许性能提升

结构如下:

;(function($,window,document,undefined){
//我们的代码。。
//blah blah blah...
})(jQuery,window,document);

  而至于这个undefined,稍微有意思一点,为了得到没有被修改的undefined,我们并没有传递这个参数,但却在接收时接收了它,因为实际并没有传,所以‘undefined’那个位置接收到的就是真实的'undefined'了。

最终,这个插件应该为:

;(function($, window, document,undefined) {
//定义Beautifier的构造函数
var Beautifier = function(ele, opt) {
this.$element = ele,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration': 'none'
},
this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法
Beautifier.prototype = {
beautify: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
//创建Beautifier的实体
var beautifier = new Beautifier(this, options);
//调用其方法
return beautifier.beautify();
}
})(jQuery, window, document);

  


 


作者:​​​panie​​​


标签:jQuery,function,插件,color,模式,Beautifier,options
From: https://blog.51cto.com/u_15812342/5723976

相关文章

  • k8s消息队列-rabbiMQ集群(pod初始化安装消息延迟插件)
    一、方案:在k8s上部署rabbitMQ集群,pod初始化时安装消息延迟插件。二、部署参考rabbitMQ官方:https://www.rabbitmq.com/kubernetes/operator/operator-overview.html1、部......
  • 工厂模式
    一.工厂方法模式1.简单工厂模式基本介绍就是建立一个工厂类,对实现了同一接口的一些类进行实例的创建。代码实例​ 准备一个pizza抽象类,抽象准备原材料的方法,有两个实......
  • 青龙面板-傻妞芝士插件
    傻妞-芝士插件(jd_cookie)用管理员给bot发送命令​​setjd_cookieenable_jd_cookietrue​​,并重启。这样芝士插件就开启了。青龙免部署上车,公众号内回复"青龙上车"​jdas......
  • 适配器模式
    适配器模式被适配目标接口packageadaptertypesourceinterface{SpecificRequest()string}被适配的目标packageadaptertypesourceImplstruct{}fu......
  • 【设计模式】29.结构型模式-装饰模式(Decorator)
    一、描述装饰模式能够在不改变原来对象结构和功能的前提下,动态的给对象增加新的功能,相比于使用子类扩展的方式,装饰模式更加的灵活。角色(1)抽象构件类:为具体构件类和装饰......
  • jQuery 中 attr() 和 prop() 方法的区别
    结论 具有true和false两个属性的属性,如checked,selected或者disabled使用prop(),其他的使用attr(),具体见下表:分析前几天,有人给 ​​MultipleSelect插件​​ ......
  • 大端模式和小端模式
    总是将这两个弄混了,特此记录如下:大端模式(Big-endian):高位字节排放在内存的低地址端,低位字节排放在内存的高地址端,即正序排列,高尾端;小端模式(Little-endian):低位字节排放在内......
  • 备忘录模式 Memento
    “状态变化”模式在组件构建过程中,某些对象的状态经常面临变化,如何对这些变化进行有效的管理?同时又维持高层模块的稳定?“状态变化"模式为这一问题提供了一种解决方案。......
  • WINFORM DEVEXPRESS插件常用功能总结
    前言DevExpress 控件的功能比较强大,是全球知名控件开发公司,对于开发 B/S 或 C/S 都非常出色,可以实现很炫且功能强大的效果。DevExpressWinform 常用控件是本人在......
  • log4net 日期和文件大小滚动Composite模式 删除自定义几天前的日志
    官方配置信息Apachelog4net–Apachelog4net:ConfigExamples-Apachelog4net官方示例实现RollingFileAppenderlogging-log4net/DerivedAppender.csat3f2b3......