合肥网站建设电话咨询,建设部建造师网站,可以用来做网页的软件,wordpress使用cdn菜单消失jQuery插件开发精品教程#xff0c;让你的jQuery提升一个台阶
要说jQuery 最成功的地方#xff0c;我认为是它的可扩展性吸引了众多开发者为其开发插件#xff0c;从而建立起了一个生态系统。这好比大公司们争相做平台一样#xff0c;得平台者得天下。苹果#xff0c;微软…jQuery插件开发精品教程让你的jQuery提升一个台阶
要说jQuery 最成功的地方我认为是它的可扩展性吸引了众多开发者为其开发插件从而建立起了一个生态系统。这好比大公司们争相做平台一样得平台者得天下。苹果微软谷歌等巨头都有各自的平台及生态圈。
学会使用jQuery并不难因为它简单易学并且相信你接触jQuery后肯定也使用或熟悉了不少其插件。如果要将能力上升一个台阶编写一个属于自己的插件是个不错的选择。
本教程可能不是最精品的但一定是最细致的。
jQuery插件开发模式
软件开发过程中是需要一定的设计模式来指导开发的有了模式我们就能更好地组织我们的代码并且从这些前人总结出来的模式中学到很多好的实践。
根据《jQuery高级编程》的描述jQuery插件开发方式主要有三种
通过$.extend()来扩展jQuery通过$.fn 向jQuery添加新的方法通过$.widget()应用jQuery UI的部件工厂方式创建
通常我们使用第二种方法来进行简单插件开发说简单是相对于第三种方式。第三种方式是用来开发更高级jQuery部件的该模式开发出来的部件带有很多jQuery内建的特性比如插件的状态信息自动保存各种关于插件的常用方法等非常贴心这里不细说。
而第一种方式又太简单仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。所以我们调用通过$.extend()添加的函数时直接通过$符号调用$.myfunction()而不需要选中DOM元素($(#example).myfunction())。请看下面的例子。
$.extend({sayHello: function(name) {console.log(Hello, (name ? name : Dude) !);}
})
$.sayHello(); //调用
$.sayHello(Wayou); //带参调用运行结果 上面代码中通过$.extend()向jQuery添加了一个sayHello函数然后通过$直接调用。到此你可以认为我们已经完成了一个简单的jQuery插件了。
但如你所见这种方式用来定义一些辅助方法是比较方便的。比如一个自定义的console输出特定格式的信息定义一次后可以通过jQuery在程序中任何需要的地方调用它。
$.extend({log: function(message) {var now new Date(),y now.getFullYear(),m now.getMonth() 1, //JavaScript中月分是从0开始的d now.getDate(),h now.getHours(),min now.getMinutes(),s now.getSeconds(),time y / m / d h : min : s;console.log(time My App: message);}
})
$.log(initializing...); //调用但这种方式无法利用jQuery强大的选择器带来的便利要处理DOM元素以及将插件更好地运用于所选择的元素身上还是需要使用第二种开发方式。你所见到或使用的插件也大多是通过此种方式开发。
插件开发
下面我们就来看第二种方式的jQuery插件开发。
基本方法
先看一下它的基本格式
$.fn.pluginName function() {//your code goes here
}基本上就是往$.fn上面添加一个方法名字是我们的插件名称。然后我们的插件代码在这个方法里面展开。
比如我们将页面上所有链接颜色转成红色则可以这样写这个插件
$.fn.myPlugin function() {//在这里面,this指的是用jQuery选中的元素//example :$(a),则this$(a)this.css(color, red);
}在插件名字定义的这个函数内部this指代的是我们在调用该插件时用jQuery选择器选中的元素一般是一个jQuery类型的集合。比如$(a)返回的是页面上所有a标签的集合且这个集合已经是jQuery包装类型了也就是说在对其进行操作的时候可以直接调用jQuery的其他方法而不需要再用美元符号来包装一下。
所以在上面插件代码中我们在this身上调用jQuery的css()方法也就相当于在调用 $(a).css()。
理解this在这个地方的含义很重要。这样你才知道为什么可以直接调用jQuery方法同时在其他地方this指代不同时我们又需要用jQuery重新包装才能调用下面会讲到。初学容易被this的值整晕但理解了就不难。
现在就可以去页面试试我们的代码了在页面上放几个链接调用插件后链接字体变成红色。
ullia hrefhttp://www.webo.com/liuwayong我的微博/a/lilia hrefhttp://http://www.cnblogs.com/Wayou/我的博客/a/lilia hrefhttp://wayouliu.duapp.com/我的小站/a/li
/ul
p这是p标签不是a标签我不会受影响/p
script srcjquery-1.11.0.min.js/script
script srcjquery.myplugin.js/script
script typetext/javascript$(function(){$(a).myPlugin();})
/script运行结果 下面进一步在插件代码里处理每个具体的元素而不是对一个集合进行处理这样我们就可以针对每个元素进行相应操作。
我们已经知道this指代jQuery选择器返回的集合那么通过调用jQuery的.each()方法就可以处理合集中的每个元素了但此刻要注意的是在each方法内部this指带的是普通的DOM元素了如果需要调用jQuery的方法那就需要用$来重新包装一下。
比如现在我们要在每个链接旁边显示链接的真实地址首先通过each遍历所有a标签然后获取href属性的值再加到链接文本后面。
更改后我们的插件代码为
$.fn.myPlugin function() {//在这里面,this指的是用jQuery选中的元素this.css(color, red);this.each(function() {//对每个元素进行操作$(this).append( $(this).attr(href));}))
}调用代码还是一样的我们通过选中页面所有的a标签来调用这个插件
运行结果 到此你已经可以编写功能简单的jQuery插件了。是不是也没那么难。
下面开始jQuery插件编写中一个重要的部分参数的接收。
支持链式调用
我们都知道jQuery一个非常优雅的特性是支持链式调用选择好DOM元素后可以不断地调用其他方法。
要让插件不打破这种链式调用只需return一下即可。
$.fn.myPlugin function() {//在这里面,this指的是用jQuery选中的元素this.css(color, red);return this.each(function() {//对每个元素进行操作$(this).append( $(this).attr(href));}))
}让插件接收参数
一个强劲的插件是可以让使用者随意定制的这要求我们在编写插件时就要考虑得全面些尽量提供合适的参数。
比如现在我们不想让链接只变成红色我们让插件的使用者自己定义显示什么颜色要做到这一点很方便只需要使用者在调用的时候传入一个参数即可。同时我们在插件的代码里面接收。另一方面为了灵活使用者可以不传递参数插件里面会给出参数的默认值。
在处理插件参数的接收上通常使用jQuery的extend方法上面也提到过但那是给extend方法传递单个对象的情况下这个对象会合并到jQuery身上所以我们就可以在jQuery身上调用新合并对象里包含的方法了像上面的例子。当给extend方法传递一个以上的参数时它会将所有参数对象合并到第一个里。同时如果对象中有同名属性时合并的时候后面的会覆盖前面的。
利用这一点我们可以在插件里定义一个保存插件参数默认值的对象同时将接收来的参数对象合并到默认对象上最后就实现了用户指定了值的参数使用指定的值未指定的参数使用插件默认值。
为了演示方便再指定一个参数fontSize允许调用插件的时候设置字体大小。
$.fn.myPlugin function(options) {var defaults {color: red,fontSize: 12px};var settings $.extend(defaults, options);return this.css({color: settings.color,fontSize: settings.fontSize});
}现在我们调用的时候指定颜色字体大小未指定会运用插件里的默认值12px。
$(a).myPlugin({color: #2C9929
});运行结果 同时指定颜色与字体大小
$(a).myPlugin({color: #2C9929,fontSize: 20px
});保护好默认参数
注意到上面代码调用extend时会将defaults的值改变这样不好因为它作为插件因有的一些东西应该维持原样另外就是如果你在后续代码中还要使用这些默认值的话当你再次访问它时它已经被用户传进来的参数更改了。 一个好的做法是将一个新的空对象做为$.extend的第一个参数defaults和用户传递的参数对象紧随其后这样做的好处是所有值被合并到这个空对象上保护了插件里面的默认值。
$.fn.myPlugin function(options) {var defaults {color: red,fontSize: 12px};var settings $.extend({},defaults, options);//将一个空对象做为第一个参数return this.css({color: settings.color,fontSize: settings.fontSize});
}到此插件可以接收和处理参数后就可以编写出更健壮而灵活的插件了。若要编写一个复杂的插件代码量会很大如何组织代码就成了一个需要面临的问题没有一个好的方式来组织这些代码整体感觉会杂乱无章同时也不好维护所以将插件的所有方法属性包装到一个对象上用面向对象的思维来进行开发无疑会使工作轻松很多。
面向对象的插件开发
为什么要有面向对象的思维因为如果不这样你可能需要一个方法的时候就去定义一个function当需要另外一个方法的时候再去随便定义一个function同样需要一个变量的时候毫无规则地定义一些散落在代码各处的变量。
还是老问题不方便维护也不够清晰。当然这些问题在代码规模较小时是体现不出来的。
如果将需要的重要变量定义到对象的属性上函数变成对象的方法当我们需要的时候通过对象来获取一来方便管理二来不会影响外部命名空间因为所有这些变量名还有方法名都是在对象内部。
接着上面的例子我们可以把这个插件抽象成一个美化页面的对象因为他的功能是设置颜色啊字体啊什么的当然我们还可以加入其他功能比如设置下划线啊什么的。当然对于这个例子抽象成对象有点小题大做这里仅作演示用。以后我可能会介绍我编写的一个jQuery插件SlipHover,其中代码就比较多这样的模式就用得上了。
所以我们新建一个对象命名为Beautifier然后我们在插件里使用这个对象来编码。
//定义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();
}通过上面这样一改造我们的代码变得更面向对象了也更好维护和理解以后要加新功能新方法只需向对象添加新变量及方法即可然后在插件里实例化后即可调用新添加的东西。
插件的调用还是一样的我们对代码的改动并不影响插件其他地方只是将代码的组织结构改动了而以。 $(function() {$(a).myPlugin({color: #2C9929,fontSize: 20px});
})指定文字带下划线我们在Beautifier对象中新加的功能默认不带下划线如上面的例子的调用
$(function() {$(a).myPlugin({color: #2C9929,fontSize: 20px,textDecoration: underline});
})到这里你可以更好地编写复杂的插件同时很好地组织代码了。当我们回头去看上面的代码时其实也还是有改进空间的。也就是下面介绍的关于命名空间及变量各什么的一些杂项。
关于命名空间
不仅仅是jQuery插件的开发我们在写任何JS代码时都应该注意的一点是不要污染全局命名空间。因为随着你代码的增多如果有意无意在全局范围内定义一些变量的话最后很难维护也容易跟别人写的代码有冲突。
比如你在代码中向全局window对象添加了一个变量status用于存放状态同时页面中引用了另一个别人写的库也向全局添加了这样一个同名变量最后的结果肯定不是你想要的。所以不到万不得已一般我们不会将变量定义成全局的。
一个好的做法是始终用自调用匿名函数包裹你的代码这样就可以完全放心安全地将它用于任何地方了绝对没有冲突。
用自调用匿名函数包裹你的代码
我们知道JavaScript中无法用花括号方便地创建作用域但函数却可以形成一个作用域域内的代码是无法被外界访问的。如果我们将自己的代码放入一个函数中那么就不会污染全局命名空间同时不会和别的代码冲突。
如上面我们定义了一个Beautifier全局变量它会被附到全局的window对象上为了防止这种事情发生你或许会说把所有代码放到jQuery的插件定义代码里面去啊也就是放到$.fn.myPlugin里面。这样做倒也是种选择。但会让我们实际跟插件定义有关的代码变得臃肿而在$.fn.myPlugin里面我们其实应该更专注于插件的调用以及如何与jQuery互动。
所以保持原来的代码不变我们将所有代码用自调用匿名函数包裹。
(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();}
})();这样做的好处也就是上面所阐述的那样。另外还有一个好处就是自调用匿名函数里面的代码会在第一时间执行页面准备好过后上面的代码就将插件准备好了以方便在后面的代码中使用插件。
目前为止似乎接近完美了。如果再考虑到其他一些因素比如我们将这段代码放到页面后前面别人写的代码没有用分号结尾或者前面的代码将window, undefined等这些系统变量或者关键字修改掉了正好我们又在自己的代码里面进行了使用那结果也是不可预测的这不是 我们想要的。我知道其实你还没太明白下面详细介绍。
将系统变量以变量形式传递到插件内部
来看下面的代码你猜他会出现什么结果
var foofunction(){//别人的代码
}//注意这里没有用分号结尾//开始我们的代码。。。
(function(){//我们的代码。。alert(Hello!);
})();本来别人的代码也正常工作只是最后定义的那个函数没有用分号结尾而以然后当页面中引入我们的插件时报错了我们的代码无法正常执行。 原因是我们用来充当自调用匿名函数的第一对括号与上面别人定义的函数相连因为中间没有分号嘛总之我们的代码无法正常解析了所以报错。
所以好的做法是我们在代码开头加一个分号这在任何时候都是一个好的习惯。
var foofunction(){//别人的代码
}//注意这里没有用分号结尾//开始我们的代码。。。
;(function(){//我们的代码。。alert(Hello!);
})();同时将系统变量以参数形式传递到插件内部也是个不错的实践。
当我们这样做之后window等系统变量在插件内部就有了一个局部的引用可以提高访问速度会有些许性能的提升
最后我们得到一个非常安全结构良好的代码
;(function($,window,document,undefined){//我们的代码。。//blah blah blah...
})(jQuery,window,document);而至于这个undefined稍微有意思一点为了得到没有被修改的undefined我们并没有传递这个参数但却在接收时接收了它因为实际并没有传所以‘undefined’那个位置接收到的就是真实的undefined了。是不是有点hack的味道值得细细体会的技术当然不是我发明的都是从前人的经验中学习。
所以最后我们的插件成了这样
;(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);一个安全结构良好组织有序的插件编写完成。 关于变量定义及命名
现在谈谈关于变量及方法等的命名没有硬性规定但为了规范遵循一些约定还是很有必要的。
变量定义好的做法是把将要使用的变量名用一个var关键字一并定义在代码开头变量名间用逗号隔开。原因有二
一是便于理解知道下面的代码会用到哪些变量同时代码显得整洁且有规律也方便管理变量定义与逻辑代码分开二是因为JavaScript中所有变量及函数名会自动提升也称之为JavaScript的Hoist特性即使你将变量的定义穿插在逻辑代码中在代码解析运行期间这些变量的声明还是被提升到了当前作用域最顶端的所以我们将变量定义在一个作用域的开头是更符合逻辑的一种做法。当然再次说明这只是一种约定不是必需的。
变量及函数命名 一般使用驼峰命名法CamelCase即首个单词的首字母小写后面单词首字母大写比如resultArrayrequestAnimationFrame。对于常量所有字母采用大写多个单词用下划线隔开比如WIDTH100BRUSH_COLOR#00ff00。当变量是jQuery类型时建议以$开头开始会不习惯但经常用了之后会感觉很方便因为可以很方便地将它与普通变量区别开来一看到以$开头我们就知道它是jQuery类型可以直接在其身上调用jQuery相关的方法比如var $element$(a); 之后就可以在后面的代码中很方便地使用它并且与其他变量容易区分开来。
引号的使用既然都扯了这些与插件主题无关的了这里再多说一句一般HTML代码里面使用双引号而在JavaScript中多用单引号比如下面代码所示
var name Wayou;
document.getElementById(‘example’).innerHTML a hrefhttp: //wayouliu.duapp.com/name/a; //href.. HTML中保持双引号JavaScript中保持单引号一方面HTML代码中本来就使用的是双引号另一方面在JavaScript中引号中还需要引号的时候要求我们单双引号间隔着写才是合法的语句除非你使用转意符那也是可以的。再者坚持这样的统一可以保持代码风格的一致不会出现这里字符串用双引号包着另外的地方就在用单引号。 代码混淆与压缩
进行完上面的步骤已经小有所成了。或许你很早就注意到了你下载的插件里面一般都会提供一个压缩的版本一般在文件名里带个min字样。也就是minified的意思压缩浓缩后的版本。并且平时我们使用的jQuery也是官网提供的压缩版本jquery.min.js。
这里的压缩不是指代码进行功能上的压缩而是通过将代码里面的变量名方法函数名等等用更短的名称来替换并且删除注释如果有的话删除代码间的空白及换行所得到的浓缩版本。同时由于代码里面的各种名称都已经被替代别人无法阅读和分清其逻辑也起到了混淆代码的作用。
压缩的好处
源码经过混淆压缩后体积大大减小使代码变得轻量级同时加快了下载速度两面加载变快。比如正常jQuery v1.11.0的源码是276kb而压缩后的版本仅94.1kb体积减小一半还多。这个体积的减小对于文件下载速度的提升不可小觑。经过压缩混淆后代码还能阅读嘛当然不能所以顺带还起到了代码保护的作用。当然只是针对你编写了一些比较酷的代码又不想别人抄袭的情况。对于jQuery社区这里本身就是开源的世界同时JavaScript这东西其实也没什么实质性方法可以防止别人查看阅读你的代码毕竟有混淆就有反混淆工具这里代码压缩更多的还是上面提到的压缩文件的作用同时一定程度上防止别人抄袭。
工具
所使用的工具推崇的是Google开发的Closure Compiler。该工具需要Java环境的支持所以使用前你可能需要先在机子上装JRE, 然后再获取Closure进行使用。
同时也有很多在线的代码混淆压缩工具用起来也很方便。这些工具都是一搜一大把的。
插件发布
这一步不是必需的但本着把事情做完整的态度同时你也许也希望有更多人看到或使用你的插件吧。 首先你需要将插件代码放到GitHub上创建一个Service Hook这样做的目的是你以后更新的插件后jQuery可以自动去获取新版本的信息然后展示在插件中心的页面上。关于如何传代码到GitHub你去下载GitHub 提供的客户端工具就会知道如何操作了非常方便。关于在GitHub创建Service Hook也只是点几下而以的事情。下面会截图介绍。然后需要制作一个JSON格式的清单文件其中包括关于插件的基本信息具体格式及参数可以在jQuery官网插件发布指南页面了解到这里提供一个示例文件是我之前写的一个jQuery插件SlipHover
{name: sliphover,title: SlipHover,description: Apply direction aware 2D/3D hover effect to images,keywords: [direction-aware,animation,effect,hover,image,overlay,gallery],version: 1.1.1,author: {name: Wayou,email: liuwayonggmail.com,url: https://github.com/Wayou},maintainers: [{name: Wayou,email: liuwayonggmail.com,url: https://github.com/Wayou}],licenses: [{type: MIT,url: https://github.com/jquery/jquery-color/blob/2.1.2/MIT-LICENSE.txt}],bugs: https://github.com/Wayou/sliphover/issues,homepage: http://wayou.github.io/SlipHover/,docs: http://wayou.github.io/SlipHover/,demo:http://wayou.github.io/SlipHover/,download: https://github.com/Wayou/SlipHover/zipball/master,dependencies: {jquery: 1.5}
}然后就可以在插件的根目录执行现行git代码来发布插件了。其中0.1.0是版本号以后每次你的插件有新版本发布只需更新上面命令中的版本创建新的tag这样jQuery插件中心就会自动获取到新版本信息了
$ git tag 0.1.0
$ git push origin --tagsGitHub Service Hook
1 点击项目右边菜单的设置 2进入设置页面后点击Webhooks Services 3然后点击右边主页面上的Configure services 按钮 4这时出现一个很长的列表向下找到jQuery Plugins 点击 5点击选中框后点击更新设置按钮 到此就设置完成了。 Reference:
jQuery官网学习中心关于插件开发的文章 http://learn.jquery.com/plugins/jQuery官网插件中心http://plugins.jquery.com/jQuery官网插件发布指南http://plugins.jquery.com/docs/publish/JavaScript Hoist http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.htmlGoogle Web Developer Tool : https://developers.google.com/closure/
