全家一起来开发一个Jquery插件

Posted on

小梦想

我相信每个用过Jquery的人都有一个小梦想，就是写一个自己的Jquery插件——然后放上github，收获nk+星星，登上人生巅峰迎娶白富美。。我也不例外，在爱上vue.js以后回头来写Jquery有很多感觉都不一样了，JS的面向对象感觉理解更深了。

P.S:虽然Jquery已经不再是很多人的首选了，但作为曾经的绝对霸主级JS库，还是很多地方值得我们学习参考的。

项目构建

要放上github的话肯定又有“高颜值”啦，指的是整个项目的架构要规范。这里就直接使用grunt的脚手架来搭建项目：

当然，grunt的模板是需要自己下的。具体命令是

1
2
3
4



git clone https://github.com/gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery

模板下好以后就可以去到我们的插件目录

1
2
3
4



grunt-int jquery

然后

1
2
3
4



npm install

装好依赖包之后，看看我们的项目架构，好爽。。连README都有了。

插件结构

grunt模板里面给的插件结构也很漂亮，不过我还是个人的结构。

首先用闭包包着我们的插件，目的是防止$符号污染，因为$是很多库的宠儿，这里使用闭包确保我们闭包内的$是jquery对象

1
2
3
4
5
6
7
8



;(function($,window,document){

	//插件内容

}(jQuery,window,document));

然后放入jquery扩展函数定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52



;(function($,window,document){

	//插件内容

	$.fn.extend({

		tagSelect: function (option){

			var plugin = new TagSelect(this, option);

			return plugin.init();

		}

	});

	//TagSelect 类

	var TagSelect = function (ele, opt){

		//私有变量

		this.$element = ele;

		this.defaultSetting = { 

			maxNum: 5,

		};

		this.setting = $.extend({},this.defaultSetting, opt);

		//私有函数

	}

	//公有函数

	TagSelect.prototype = {

		init: function(){	

			return this.$element;

		}

	};

}(jQuery,window,document));

tagSelect 是我们的插件名称，插件的定义和实现可以直接写在这个函数中，不过为了开发规范，我把这部分抽象出来。

再下面就是TagSelect类，插件的实际内容都在这里了，留意这一部分：

1
2
3
4
5
6
7
8
9
10



this.defaultSetting = { 

			maxNum: 5,

		};

this.setting = $.extend({},this.defaultSetting, opt);

defaultSetting就是我们插件默认设置的设定，通过 $.extend() 函数把defaultSetting和opt合并在一起，重复部分使用后者的内容。

这个就是我们插件的整体结构了。

插件的使用

因为直接用的是 $.fn.extend jquery的插件扩展机制，所以使用也是一句话的事情啦~~

1
2
3
4
5
6
7
8



$('#target').tagSelect({

	maxNum : 10

});

参数传的是设置，这样调用就把我们的maxNum设成了10了。

写到这里啦，有缺失部分再补充~