javascript插件开发的一些想法和经验

原因

如果你平时做过一些前端开发工作，肯定会有这样的体验：当页面需要一些效果或者插件的时候，我们通常有两种选择：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，不知道大家会想到什么html结构。对于我们的开发人员来说，html和css应该尽可能简单，所以最基本的html结构无非是A标签和span标签的混合。一些学生可能会想到使用ul和li标签，但这实际上增加了复杂性，这是不值得的损失。我们编写html代码如下：

Div=' pager' span class='不翻页'上一页/span span class=' cur page ' 1/span a page=' 1 ' href=' JavaScript 3360；'2/a a page=' 2 ' href=' JavaScript :'3/a a page=' 3 ' href=' JavaScript :'4/a跨度./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，我们采用事件代理的方式，提高了性能，也不用重复绑定事件这样一个最基本的分页插件已经可以了。

但这就够了吗？假设我们需要支持输入页码直接跳转的功能，该怎么办？我们需要修改原来的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()；}有关完整版本的代码，请查看jquery.page.js提供的这三个API。如果用户需要跳转页码的功能，可以使用setPageIndex方法直接跳转。UI完全由用户定制，插件本身只关注基本功能，不干涉他人。你可以查看演示。

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

摘要

最后，我将整理一下我对开发一些js插件的想法：1。关注最基本的需求，暂时忽略潜在的需求；2.尽量不提供UI或少提供，减少对用户的限制；3.考虑潜在需求并提供api，潜在需求完全由用户定制。

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

本文地址：http://luopq.com/2016/02/04/think-js-plugin/,如转载请注明。