本文阅读目录：

如何开发一个轻量级、适应性强的插件总结？

原因

如果你平时做一些前端开发工作，你会有这样的体验：当页面需要一些效果或者插件的时候，我们通常有两种选择：

1.在网上找到相关的JS插件，了解它们的用法。2.自己造轮子，开发插件。

查找现有插件。

首先，在网上寻找JS插件。

这样，如果有刚好满足项目需求的插件，那就很幸运了。但是我相信在大多数情况下，我们找到的插件会有以下问题：

(1)UI定制：很多插件提供的UI和我们的项目设计风格完全不一样，写出来的html和css可能不符合插件的用法。因此，我们必须修改html和css来适应插件的使用。(2)学习成本：如果是复杂的插件，就存在学习成本的问题，所以需要学习如何使用这个插件。(3)插件不符合要求：我们找到的插件并不能完全保证它符合我们项目的要求。此时，您可能必须修改其代码以支持项目需求，这也是一个可能的问题。(4)插件功能太大太全：假设你的项目需要一个简单的carousel插件，最后我们找到一个非常强大的carousel插件，有各种酷炫的效果，正好可以用，但是这个插件的大小和一个js库的大小差不多。这是使用js插件时可能存在的一些问题。当然，我不想使用已经编写好的js插件。毕竟有些插件经受住了时间的考验，对项目更有利。在以下情况下，我将考虑使用现有的js插件：

(1)复杂功能：如文件上传、批量上传、进度显示等。比如HTML编辑器(2)项目进度紧迫、性能要求不高的场景(3)js插件正好满足了项目的需求。

自己造轮子。

第二，自己造轮子开发插件，自己写插件主要有以下问题：

(1)开发插件需要时间，可能会耽误项目工期。如果工期紧迫，不建议采用这种方法。(2)自己做的轮子可能没有现有的轮子好用，需要考虑队友是否合适。(3)需要相对较高的发展水平。

如果项目平时不急，我会考虑自己造轮子，这样有几个好处：

(1)完全满足项目需求，这是显而易见的，因为完全为项目开发的插件(2)消息灵通，容易修改，而且插件完全是自己开发的，所以可以灵活应对项目需求的任何变化(3)轻量级，因为我们不需要像其他开源插件那样处理那么多需求，所以我们自己的轮子只需要满足我们自己的车，不需要很多变化。(4)对于一个人的能力来说是一次很大的锻炼，在程序员中流传很广的一句话就是不要反复造轮子，这已经成为很多人偷懒的借口，但是我们不应该以此为借口阻碍自己的进步。造过轮子的同学应该有深刻的理解。构建一个轮子远比使用100个别人编写的插件更有价值。我们的轮子可能不会用在项目中，但这是一种高效的学习方式，强烈推荐。

如何开发一个适用性强的轻量级插件？

如何开发一个适应性强、轻量级的插件？所谓适用性强，简单来说有几点：

1.对UI的限制越少越好，最好没有。2.没有提供太多的功能，只提供简单的api，这让用户很容易扩展。

举个例子吧。假设我们想要开发一个jQuery分页插件。关于jQuery插件开发的教程，请参考jQuery插件开发。

确定需求。

确定需求是开发插件的第一步。为了开发一个轻量级的分页插件，我们应该从插件最基本的需求开始。分页插件最基本的要求是什么，是页码显示和页码切换？因此，我们的插件应该围绕这个基本需求开始，暂时不考虑其他可能的需求。

识别插件html和css。

确定了插件的需求之后，第二步就是插件的UI，也就是html和css。

假设基本用户界面如下：

基本分页UI。

看到上面的基本ui，不知道大家会想到什么html结构。对于我们的开发人员来说，html和css应该尽可能简单，所以最基本的html结构无非是A标签和span标签的混合。一些学生可能会想到使用ul和li标签，但这实际上增加了复杂性，这是不值得的损失。我们编写html代码如下：

div=' pager ' span class=' flipnopage '上一页/span span class=' cur page ' 1/span page=' 1 ' href=' JavaScript 3360；'2/aa page=' 2 ' href=' JavaScript :'3/aa page=' 3 ' href=' JavaScript :'4/aspan./span a href=' JavaScript :'page=' 8 ' 9/a page=' 1 ' href=' JavaScript :'Class='flip' next page /a/div这是最基本的html代码结构，包括分页插件的container div.pager、当前页面的span.curPage、其他页码的一个标签、上一页、下一页等按钮。

然后是css代码，包括当前页面标签、其他页面标签、上一页和下一页、鼠标悬停在按钮上等。内容如下：寻呼机{ display : inline-block；font : 12 px/21px ''；边距-top : 20px；}.寻呼机a。寻呼机。翻转，翻转。寻呼机。curPage { border: 1px固体# e3e3e3display:内联块；height: 22px线高： 22px；文本对齐：中心；}.寻呼机a { background: none重复滚动0 0 # fffcolor: # 010101文本装饰：无；宽度： 26px；}.寻呼机a : hover { background : none }重复滚动0 0 # f1f1f1}.寻呼机。noPage { color : # a4a 4；}.寻呼机。curPage { background: none重复滚动0 0 # 49abdecolor: # ffffff宽度： 26px；}.寻呼机。翻转{ width: 56px}编写js代码。

写基本的html和css，然后关键是js代码。首先，我们设置jQuery插件开发的基本形式：

；(函数($，窗口，文档，未定义){ '使用strict '；Var默认值={pageindex: 0，pagesize: 6，itemcount: 50，maxbuttoncount 3360 7，prevtext: '上一页'，nextText: '下一页'，build pageurl 3360 null，上一页已更改： null }；$ . fn . pager=function(options){ options=$。extend(默认值，选项| | { })；}})(jQuery，窗口，文档)；这里提供了一些可选参数的默认值，比如默认页码为0，页数为6等等。

然后让我们考虑一下分页插件的想法：

1.将当前页码设置为0，表示第一页。2.生成分页插件的html代码。3.修改页码并生成html代码。

基于这个想法，我们编写了以下代码：

；（函数($,窗口，文档，未定义){ '使用“严格”；定义变量默认值={页面索引： 0，页面大小： 6，项目计数： 50，最大按钮计数： 7，前一个文本： '上一页，下一个文本： '下一页，buildPageUrl: null，OnPageChanged : null }；功能寻呼机($ele，options){ 0这个$ ele=$ elethis . options=options=$ .扩展(默认值，选项| | { });这个。init()；}寻呼机。prototype={构造函数： Pager，init : function(){ this。RenderHTML()；这个。bindEvent()；}，renderHtml:函数(){ var options=this . options options。页数=数学。天花板(可选。项目数量/选项。页面大小)；var html=[]；//生成上一页的按钮if(选项。页面索引0){ html。push(' a page=' '(选项。页面索引-1)' ' href='这。BuildPageURl(选项。页面索引1)“”类=“翻转”选项。prev text '/a ')；} else { html。push(' span class=' flip noPage ')选项。prev text '/span ')；}//这里是关键//临时的起始页码中间页码，当页码数量大于显示的最大按钮数时使用var tempStartIndex=options。页面索引-数学。地板(可选。maxbuttoncount/2)1；//计算终止页码，通过最大计算一排按钮中的第一个按钮的页码，然后计算出页数量var endIndex=数学。最小(选项。页数，Math.max(0，tempStartIndex)选项。maxbuttoncount)-1；var startIndex=Math.max(0，endIndex-options。maxbuttoncount 1)；//第一页if(startIndex 0){ html。推这个。BuildPageURl(0)' '页面=' 0 ' ' 1/a ')；html.push('span./span’)；}//生成页码按钮for(var I=startIndex；i=endIndexI){ if(options。PageIndex==I){ html。push(' span class=' CurPage ' '(I 1)'/span ')；} else { html。推('一页='我' href='这个。BuildPageURl(选项。page index 1)' ' '(I 1)'/a))；}}//最后一页if(endIndex选项。页数-1){ html。推动('跨度./span’)；html。推这个。BuildPageURl(选项。PageCOunt-1)' ' page=' '(选项。页面计数-1)' ' '选项。page count '/a ')；}//生成下一页的按钮if(选项。页面索引选项。页数-1){ html。push(' a page=' '(选项。页面索引1)')href=' this。BuildPageURl(选项。页面索引1)“”类=“翻转”选项。下一个文本'/a ')；} else { html。push(' span class=' flip noPage ')选项。next text '/span ')；}这个$ ele。html(html。join(')；}，bindEvent:函数(){var即=这个那个$ele.on('click '，' a '，function(){ that。选项。页面索引=ParSeint($(this)).attr('page ')，10)；那个。RenderHTML()；那个。选项。一页改变了这一点。选项。在页面更改(即。选项。页面索引)；})}，buildPageUrl:函数(){if ($).isFunction(这个。选项。BuildPageURl)){返回这个。选项。buildpage URl(page index)；}返回”JavaScript :”；} };$ .fn。寻呼机=功能(选项){选项=$ .扩展(默认值，选项| | { });返回新的寻呼机($(本)、选项);}})(jQuery，窗口，文档);这段代码中有两个关键点要记住：

(1)html代码的生成，由于页码可能太多，需要隐藏部分页码，所以我们要生成一个省略号表示被隐藏的页码，通过maxButtonCount来表示最多的页码按钮

(2)事件绑定，每次页码改变都会重新生成html，我们采用事件代理的方式，提高了性能，也不用重复绑定事件这样一个最基本的分页插件已经可以了。

但是这样足够了吗？

假设我们需要支持输入页码直接跳转的功能，那该如何呢，是否需要修改原有的超文本标记语言结构和css？前面我们说到，开发一个插件要围绕最基本的需求开始，那对于这些潜在的可能存在的需求又该如何处理呢。

我的解决方案是这样的，提供简单的api，不提供UI，完全由用户自定义。

我们在上面的代码增加三个api:getPageIndex，setPageIndex和setItemCount，分别表示获取当前索引，设置当前索引，设置项目总数量。代码如下：

getPageIndex:函数(){ return this . options . page index；}，setPageIndex:函数(PageIndex){ this . options . PageIndex=PageIndex；this . RenderHTML()；}，setItemCount:函数(itemCount){ this . options . page index=0；this . options . item count=item count；this . RenderHTML()；}提供了这三个API，假设用户需要跳转页码的功能，可以使用setPageIndex方法直接跳转，UI完全由用户自定义，插件本身只关注基本功能，不干涉其他。

你可以查看演示。

整个插件代码已经放在我的github上了，感兴趣的同学可以点击查看github。

摘要

最后，我整理了一些开发js插件的想法：

1.关注最基本的需求，而暂时忽略潜在的需求。2.尽量不提供或提供较少的UI，并减少对用户的限制。3.考虑潜在需求并提供api，潜在需求完全由用户定制。

以上就是我在编写js插件时，如何减轻重量，适用性强的一些想法。欢迎交流！