第一期：JQ插件编写入门（1）

JQ插件编写入门（1）

什么是JQ插件

jq插件的由来很简单，当开发人员在制做一个页面的时候，比方遇到制做一个日历，或者一个弹出框，这些组件都须要经过js去控制，同时不少页面均可以公用这些组件。那么咱们就想要抽象出来，让一个项目中的每个小伙伴均可以拿来直接使用，同时也能够精简每一个js文件的代码量，更加直观。

为你的插件新建一个文件夹

传统的项目文件夹组织目录大概以下：

如今让咱们为咱们的插件新建一个文件夹，方便咱们管理：

插件该如何命名

一个很差的示范就是，虽然插件js的名字的确表示了业务功能：

从上图能够看出，这个文件夹里面，被不一样人添加着插件，可是看命名就知道有些是新手，有些是懂命名，但没有彻底遵循规范。像以时间／版本号命名的，咱们彻底无法以名字去了解这个插件是拿来干什么的，咱们就必须点进这个文件，看了一大段代码后，才可能知道这个插件能让咱们干什么。

而规范的开发下的命名方式是：

|jquery.plugin_calendar.js
|jquery.plugin_dialog.js
|jquery.plugin_upload.js

当咱们用gulp或者webpack去build到生产时候，它的命名应该是：

|jquery.plugin_calendar.min.js
|jquery.plugin_dialog.min.js
|jquery.plugin_upload.min.js

插件形式大概

插件函数该如何写

• 大概形式如：
  

1.function（$）{...}的形式的意思是将$这个变量做为参数传入函数以内。可是咱们知道，当咱们开发一个项目的时候，引用的js库可不只仅是jq，可能会引用一些其余的js库，而在别的js库中，恰巧$被全局定义了，那么当咱们把打包压缩的时候，就可能出现难以debug的错误。这个时候咱们就用当即执行函数来写。

2.function（$）{...}（jQuery）；的形式就是当即执行函数，简化一下的意思就是定义了一个函数，而后（），就至关于执行了这个函数，因此（）里能够传入参数，这个函数就像咱们普通函数同样，只不过换了一个样子，一眼难以看尽。由于这个函数是当即执行的，因此将jQuery做为参数传入了函数中，老是能够保证$能够绑定jQuery。

在大多数状况下，上面的形式就是通常开发人员经常使用的，可是有比这种写法更好的

• 增进形式
  

在这里咱们传入了window和document两个参数，目的很明显，那就是增长window和document的局部引用，达到精简函数体的做用，同时查询这两个域的时候，有更加快的性能！性能能够成倍数的增长。

而在jq的其余地方，也有过相似的应用

这里一样是简短了查询的域，由原来的document，缩短到了某id下，同时id查询又是性能最好的，因此，这样的查询／获取元素的方式，会让性能提高十数倍。

回到刚才，在函数定义的时候，多了一个undefined，是什么缘由呢？由于咱们在低版本的ECMAScript中，是容许对undefined从新定义的，若是有其余人无心修改了undefined，那么则会影响到咱们的插件，咱们甚至也不知道如何定位那个bug。因此，咱们定义函数的时候，定义了undefined这个参数，可是却没有传入这个参数，那么它就变成undefined了。

• 再增进形式
  

ok，咱们看到刚刚那个函数，前面的位置多了一个前导分号；

咱们在写代码的时候，不是全部的时候都记得给咱们语句的结束的地方，加上分号。可是不少时候咱们编译的时候并不会报错，程序也能够正常运行，缘由是咱们程序环境帮咱们隐式加入了分号。可是咱们真正去开发时候，咱们会打包压缩各类js文件到一个文件来减小http请求。这个时候，若是咱们的插件碰到分号使用不正确的代码，就会报错。

因此这个前导分号的做用，就是用来避免这样的状况。

ES3中能够被修改，ES5修复了这个问题，undefined再也不能够修改

好，如今咱们已经大概了解插件一些外部工程的东西，以及一个大概的函数定义形式。那么咱们将在下一期文章中，去到函数体内，看看具体一个插件如何去写。