制作一个简洁的jquery插件

原文：http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401571467&idx=1&sn=08cb00963e6efd3881d3397903e84752&scene=1&srcid=0125cT8n9FJMI1u2faaQgjcS&from=singlemessage&isappinstalled=0#wechat_redirect

英文原文链接：http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial

1，简介

对于jquery初学者来说，制作一个jquery插件还是一个比较高级的话题。最近一个月一致在倒腾jquery。因此学些了怎么把javascript代码从html文件中分离出来，对于现在所写的代码并不满意。因此，我决定去深入了解如何做一个jquery插件来使得javascript文件更加的简洁。

本文中制作的插件是基于我上一次的教程：Navigation List menu + jQuery Animate Effect Tutorial（http://www.queness.com/post/68/navigation-list-menujquery-animate-effect-tutorial）改教程中我把所有的js代码都放到了document.ready回调函数中，就像这样：

但是这一次，代码是这样的：

它看起来简洁多了，而且也容易复用到别的项目当中。

2.插件结构

关于制作jquery插件，jquery官网提供了一份非常详细的说明文档。但是，我觉得它实在是太难理解了。

为了是我们的编程生活更美好一些，简单一些，我在线研究了相关的文档。下买呢的这段代码是一段优雅的jquery插件结构。

1. //You need an anonymous function to wrap around your function to avoid conflict
2. 匿名包裹函数，避免了全局变量
3. (function($){
4. //Attach this new method to jQuery
5. $.fn.extend({
6. //This is where you write your plugin‘s name
7. // jquery插件名称
8. pluginname: function() {
9. //Iterate over the current set of matched elements

// 迭代选择器选中的dom元素

1. return this.each(function() {
2. //code to be inserted here

// jquery插件的代码

1. });
2. }
3. });
4. //pass jQuery to the function,
5. //So that we will able to use any valid Javascript variable name
6. //to replace "$" SIGN. But, we‘ll stick to $ (I like dollar sign: ) )
7. })(jQuery);

3. Plugin With Options

如果你看过了第一部分的简介，padding值是可配置的。让用户根据自己的业务需求传递一些参数给插件是很有必要的。保证每一个变量都有一个默认值是一个良好的编程实践。现在，你需要下面的这段代码：

1. (function($){
2. $.fn.extend({
3. //pass the options variable to the function
4. pluginname: function(options) {
5. //Set the default values, use comma to separate the settings, example:
6. var defaults = {
7. padding: 20,
8. mouseOverColor : ‘#000000‘,
9. mouseOutColor : ‘#ffffff‘
10. }
11. var options =  $.extend(defaults, options);
12. return this.each(function() {
13. var o = options;
14. //code to be inserted here
15. //you can access the value like this
16. alert(o.padding);
17. });
18. }
19. });
20. })(jQuery);

4. The animateMenu Plugin

现在您已经知道了jquery插件的基本结构。接下来的这个插件就是基于我之前的一个教程。它接收4个参数：

• animatePadding : Set the padding value for the animate effect
• defaultPadding : Set the default padding value
• evenColor : Set the color this color if index value is even number
• oddColor : Set the color this color if index value is odd numbe

1. (function($){
2. $.fn.extend({
3. //plugin name - animatemenu
4. animateMenu: function(options) {
5. //Settings list and the default values
6. var defaults = {
7. animatePadding: 60,
8. defaultPadding: 10,
9. evenColor: ‘#ccc‘,
10. oddColor: ‘#eee‘
11. };
12. var options = $.extend(defaults, options);
13. return this.each(function() {
14. var o =options;
15. //Assign current element to variable, in this case is UL element
16. var obj = $(this);
17. //Get all LI in the UL
18. var items = $("li", obj);
19. //Change the color according to odd and even rows
20. $("li:even", obj).css(‘background-color‘, o.evenColor);
21. $("li:odd", obj).css(‘background-color‘, o.oddColor);
22. //Attach mouseover and mouseout event to the LI
23. items.mouseover(function() {
24. $(this).animate({paddingLeft: o.animatePadding}, 300);
25. }).mouseout(function() {
26. $(this).animate({paddingLeft: o.defaultPadding}, 300);
27. });
28. });
29. }
30. });
31. })(jQuery);

译者注：对于web前端从业者来说，使用jquery插件自然可以提升我们的开发效率。但是我们不仅是要知其然也要知其所以然。不仅要做到会使用，也要知道其实现原理。一方面看一些业内优秀的jquery插件的源代码可以有效的提升我们的编码能力；另一方面，掌握了编写jquery插件的方法，可以把我们项目中常用的组件通过这种方式写成jquery插件，便于代码的复用，使代码更加的简洁和可维护。译者也是一个前端小沫沫，从业时间也不长，文中如果有不对的地方，还望指出，不胜感激。

注：感兴趣的可以关注笔者微信公众号，每周推送一篇前端干货