javascript插件开发的一些感想和心得_javascript技巧

1、javascript插件开发的一些感想和心得起因如果大家平吋做过-些前端开发方面的工作，一定会有这样的体会：页面需要某 种效果或者插件的时候，我们一般会有两种选择：1、上网查找相关的js插件，学习其用法2、自己造轮子，开发插件。寻找存在的插件第一种做法，上网查找js插件这种方式如果是有刚好符合项目需求的插件，那是非常幸运的事了。但是我相信 大部分情况下，我们找到的插件会有下而的几个问题：(1) u1定制：很多插件提供的u1和我们的项目设计风格完全不搭，可能写好 的html和css不符合插件使用的方式，结果我们还要去修改html和css來适应 插件的用法。(2) 学习成本：如果是比较复杂的插件，

2、存在着一个学习成本的问题，要去学 习这个插件怎么使用。(3) 插件不符合需求：我们找到的插件并不完全保证符合我们项目的需求，这 个时候你可能要去修改它的代码來支持项目需求，这也是可能存在的问题(4) 插件功能太大而全：假设你的项目需要一个简单的轮播插件，结果找到一 个很牛逼的轮播插件，各种酷炫的效果，而ii刚好也能使用，但是这个插件的体 积和一个js库的体积差不多，而如果自己写效果的话，其实只耍几i行代码就 可以搞定了，这时候引入这个插件是否太过多余了。这是使用js插件可能存在的一些问题，当然具体情况具体分析，我也并非不使 用已经写好的js插件，毕竟有些插件是经过了时间考验的，使用起来更有益于

3、 项目的进行。如果是下面几种情况，我会考虑使用已经存在的js插件：(1) 复朵的功能：比如文件上传，批量上传，进度显示等等，比如html编辑器(2) 项目工期紧急，对性能要求不高的场景(3) js插件刚好符合项目的需求自己造轮子第二种做法，自己造轮子开发插件口己写插件主要有下面几个问题：(1) 开发插件需要时间，可能拖延项目工期，如果工期紧急不建议选用这种方 式(2) 自己造的轮子未必有现有轮子的好用，要考虑到队友是否适用(3) 需要比较高的开发水平如果平时项目不紧急的话，我会考虑口己造轮了，主要有几个好处：(1) 完全符合项目需求，这一条是显而易见的，因为完全针对项目来开发的插 件(2) 知

4、根知底，容易修改，插件完全是自己开发的，项口有什么需求变化完全可以灵活应对(3) 轻量级，因为我们不像其他开源插件要应对那么多种需求，所以我们自己 的轮子也只需要符合自己的车，不需要很多变化，相对来说，变化少功能少，代 码也会少。(4) 对个人能力是一个很大的锻炼，不要重复造轮子这是在程序员中广为流传 的一句话，这也成为很多人偷懒的一个借口，但是我们不应该以此为借口来阻碍 自己的前进的脚步。造过轮子的同学应该深有体会，造过一个轮子，远比你使用 别人写的100个插件的收获还要多，我们的轮子可以不在项目中使用，但这是一 种效率极高的学习方式，强烈推荐。如何开发一个轻量级的适用性强的插件怎么开发一个

5、适应性强的且轻量的插件呢？所谓适用性强，简单地说就是有几 占/、1、对ui限制越少越好，最好没有2、不提供太多功能，只提供简单的api,让使用者易于扩展我们举个例子，假设我们要开发一个jquery分页插件，关于jquery插件开发教 程，请参考jquery插件开发。确定需求确定需求是开发插件的笫一步。要开发一个轻量级的分页插件，我们还是用从插 件最基木的需求开始说起，分页插件最基木的需求是什么呢，无非就是页码显示, 页码之间的切换，所以，我们的插件要围绕着这基本需求开始，而暂时不要考虑 其他可能存在的需求。确定插件html和css确定好插件的需求后，第二步就是插件的ui,也就是html和css

6、。假设基木的ui如下：上一页234567 .下一页看到上而的基本ui,不知道大家会想到什么样的html结构。对于我们开发人员 来说,html和css要越简单越好，所以最基本的html结构无非就是a标签和span 标签的混合，有的同学可能会想到使用ul, li标签，但这其实增加的复杂度， 得不偿失。我们编写html代码如下：<div class二pager"<span class二fl ip nopage">上一页/span<span class=/zcurpage，>l</span><a page二"1"

7、href=/，javascript: ;，z>2</a><a page二2 href=，/javascript: ;，z>3</a><a page二3" href=/，javascript: ;?，>4</a><span>/span><a href=zzjavascript: ;，z page二8>9/a><a page二1 href二javascript:; class二flip>下一页/a> </div>这是最基本html代码结构，包含了分页插件的容

8、器div. pager,当前页 span. curpage,其他页码a标签，上一页,下一页等按钮。接着是css代码，主耍当前页标签，其他页面标签，上一页下一页，鼠标悬停在 按钮上等几种样式，编写如下：.pager display: inline-block; font: 12 px/21px 宋体 ;margin-top: 20px; .pager a, . pager . flip, . pager . curpage border: lpx solid #e3e3e3display: iniine-block; height: 22px ccnter; .pager a backgroun

9、d: none repeat text-decoration: none; width: 26px;.pager a:hover background: none .pager .nopage color: sa4a4a4; .pager .curpage background: none#ffffff; width: 26px; .pager .flip width: 56px; 编写js代码1ine-height: 22px; textalign:scroll 0 0 #fff; color: #010101;repeat scroll 0 0 #fifif1; repeat scroll

10、 0 0 #49abdc; color:坊好基本的html和css,接下来最关键的就是js代码了。首先我们搭建好jquery 插件开发的基本形式：(function ($, window, document, undefined) use strict"var defauits 二pageindex: 0,pagesize: 6,itemcount: 50,maxbuttoncount: 7, prevtext:"上一页， next tex t:"卜一页"， buildpageurl: null, onpagechanged: null;$. fn. p

11、ager = function (options) options = $.extend (defaults, options | );) (jquery, window, document);这里主要提供了一些可选参数的默认值，比如页码默认为0,每页数量6条等等。 接着我们来考虑一下分页插件的思路：1、设置当前页码为0,表示第一页2、生成分页插件的html代码3、修改页码，再生成html代码基于这个思路，我们编写代码如下：;(function ($, window, document, undefined) "use strict"var defaults 二page!n

12、dex: 0,pagcsizc: 6,itemcount: 50,maxbuttoncount: 7, prevtext: 上一页， nexttext:"下一页， buildpagcurl: null, onpagechanged: null;function pager($ele, options) this. $cle = $ele;this, options = options = $.extend(defaults, options | );this, init ();pager, prototype = construetor: pager,init: function (

13、) this. renderhtml ();this. bindevent ();,rendcrlltml: function () var options = this, options;options. pagecount 二 math, ceil(options. itemcount / options. pagesize); var html 二;生成上一页的按钮if (options, pagelndex > 0) html. push(5 <a page=/z， + (options, pagelndex - 1) +href二'+this.buildpageu

14、rl (options. pagelndex + 1) +class二flip> +options. prevtext + '</a>，); else html. push<span class二"flip nopagc> + options. prevtext + '</span>，);这里是关键/临时的起始页码中间页码，当页码数量大于显示的最大按钮数时使用 var tempstartlndex = options, pagelndex -math.floor (options. maxbuttoncount / 2) +

15、1;计算终止页码，通过max计算一排按钮中的第一个按钮的页码，然后计算 出页数量var endindex = math, min(options. pagecount, math, max(0, tempstartlndex) + options. maxbuttoncount) - 1;var startindex 二 math, max (0, endlndex - options. maxbuttoncount + 1);/第一页if (startindex > 0) htm 1. push ("a href二' + this buildpageurl (0) +

16、page二' + 0 +/z，>l</a> )；html. push(z/<span>. . . </span>，z);/生成页码按钮for (var i 二 startindex; i 二 endlndex; i+) if (options. pagetndex 二二 i) htm 1. push ('spam class=/，curpagc，>， + (i + 1) + '/spam')； else html. push(，<a page 二+ i +，" href 二+this. buildp

17、ageurl (opti on s. page in dex + 1) + ' >' + (i + 1) + '/a>');/最后一页if (endlndex < options. pagecount - 1) html. push(，<span>. . . </span> “)；html. push(z，<a href + this. buildpageurl (options> pagccount - 1) + 八 page二， + (options. pagecount - 1) + options.

18、pagecount + /a>)；生成下一页的按钮if (options, pagelndex < options. pagecount - 1) html. pushc <a page二'+ (options, pagelndex + 1) +href二'+this. buildpageurl(options, pagelndex + 1) +class二flip>' +options.ncxttcxt + '</a>"); else html. pushc <span class=/zflip nopage

19、 + options. nexttext + '</span>');this. $ele. html (html. join();,bindevent: function () var that 二 thi s;that. $clc. on("click", "3, function () that, options, pagelndex = parselnt ($ (this). attr (z，page/z), 10);that. renderhtml ();that.options. onpagechanged &&

20、;that, options, onpagechange(that. options, page!ndex);), buildpageurl: function () if ($. isfunction(this, options. buildpageurl) return this.options.buiidpageurl(page!ndex);return javascript: /z;$. fn. pager = function (options) options = $.extend (defaults, options | );return new pager($(this), o

21、ptions);) (jquery, window, document);这段代码中有两个关键点耍记住：(1) html代码的生成，由于页码叮能太多，需要隐藏部分页码，所以我们要生 成一个省略号表示被隐藏的页码，通过maxbuttoncount来表示最多的页码按钮(2) 事件绑定，每次页码改变都会重新生成html,我们采用事件代理的方式， 捉高了性能，也不用重复绑定事件这样一个最基本的分页插件已经可以了。但是这样足够了吗？假设我们需耍支持输入页码直接跳转的功能，那该如何呢，是否需耍修改原有的 html结构和css?前面我们说到，开发一个插件要围绕最基本的需求开始，那对 于这些潜在的可能存在的需求又该如何处理呢。我的解决方案是这样的i提供简单的api,不提供u1,完全由用户自定义。 我们在上面的代码增