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

sumory 发布于2019-08-21 11:34 / 2506人阅读

摘要：插件编写入门什么是插件插件的由来很简单，当开发人员在制作一个页面的时候，比方遇到制作一个日历，或者一个弹出框，这些组件都需要通过去控制，同时很多页面都可以公用这些组件。那么我们将在下一期文章中，去到函数体内，看看具体一个插件如何去写。

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不再可以修改

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

云服务器 GPU云服务器 jq插件 jq滚动条插件 jq弹出层插件 jq 1.8.3 cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86862.html

JavaWEB开发04——JQuery

摘要：设计的宗旨是，，即倡导写更少的代码，做更多的事情。它封装常用的功能代码，提供一种简便的设计模式，优化文档操作事件处理动画设计和交互。今日任务使用JQuery完成页面定时弹出广告定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.display = bloc...

chunquedong 2019-08-29 17:05 评论0 收藏0
JavaWEB开发04——JQuery

摘要：设计的宗旨是，，即倡导写更少的代码，做更多的事情。它封装常用的功能代码，提供一种简便的设计模式，优化文档操作事件处理动画设计和交互。今日任务使用JQuery完成页面定时弹出广告定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.display = bloc...

nicercode 2019-08-02 11:51 评论0 收藏0
JavaWEB开发04——JQuery

摘要：设计的宗旨是，，即倡导写更少的代码，做更多的事情。它封装常用的功能代码，提供一种简便的设计模式，优化文档操作事件处理动画设计和交互。今日任务使用JQuery完成页面定时弹出广告定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.display = bloc...

pakolagij 2019-08-23 12:34 评论0 收藏0
如何学JavaScript

摘要：书籍如下面向对象编程指南，风格轻松易懂，比较适合初学者，原型那块儿讲得透彻，种继承方式呢。还有另一件事情是，比如发现自己某个知识点不太清楚，可以单独去百度。作者：小不了链接：https://zhuanlan.zhihu.com/p/...来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。鉴于时不时，有同学私信问我（老姚，下同）怎么学前端的问题。这里统一回...

light 2019-08-21 11:23 评论0 收藏0