小梦想
我相信每个用过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 |
|
然后放入jquery扩展函数定义
1 |
|
tagSelect 是我们的插件名称,插件的定义和实现可以直接写在这个函数中,不过为了开发规范,我把这部分抽象出来。
再下面就是TagSelect类,插件的实际内容都在这里了,留意这一部分:
1 |
|
defaultSetting就是我们插件默认设置的设定,通过 $.extend() 函数把defaultSetting和opt合并在一起,重复部分使用后者的内容。
这个就是我们插件的整体结构了。
插件的使用
因为直接用的是 $.fn.extend jquery的插件扩展机制,所以使用也是一句话的事情啦~~
1 |
|
参数传的是设置,这样调用就把我们的maxNum设成了10了。
写到这里啦,有缺失部分再补充~