Share my thoughts and tips on JS plugin development _javascript

This article reads the Table of contents:

• Causes
• How to develop a lightweight, adaptable plugin
• Summary

Cause

If you usually do some front-end development work, there must be such experience: the page needs some effect or plug-in, we generally have two choices:

1, the Internet to find the relevant JS plug-in, learning its usage
2, build their own wheels, the development of Plug-ins.

Search for existing Plug-ins

The first way, the Internet to find JS Plug-ins

This is a very fortunate way to have a plug-in that fits exactly the needs of the project. But I believe that in most cases, the plug-ins we find will have the following problems:

(1) UI customization: Many Plug-ins to provide the UI and our project design style is completely different, may write good HTML and CSS does not conform to the way plug-ins use, the result we have to modify the HTML and CSS to adapt to the use of plug-ins.
(2) Learning costs: If it is more complex plug-ins, there is a problem of learning costs, to learn how to use this plug-in.
(3) plug-in does not meet the requirements: We found that the plug-in is not fully guaranteed to meet the requirements of our project, this time you may have to modify its code to support the project requirements, which is also a possible problem
(4) Plug-in function is too all-inclusive: Suppose your project needs a simple carousel plug-in, the results found a very good carousel plug-ins, a variety of cool effects, but also just can use, but the size of the plug-in and a JS library of the volume, and if you write the effect, in fact, as long as dozens of lines of code can be done , is it too much to introduce the plugin?
This is the use of JS Plug-ins may exist some problems, of course, concrete analysis of specific circumstances, I do not use has been written JS Plug-ins, after all, some plug-ins have been tested by time, the use of more beneficial to the project. If this is the case, I will consider using the existing JS plugin:

(1) Complex functions: such as file upload, bulk upload, progress display, etc., such as HTML editor
(2) The project time limit is urgent, the performance request is not high the scene
(3) JS plug-in just in line with the needs of the project

Build your own wheels.

The second way is to build your own wheels and develop plug-ins
Write your own plug-ins mainly have the following questions:

(1) The development of Plug-ins takes time, may delay the duration of the project, if the duration of the emergency do not recommend this way
(2) their own wheels may not have the use of existing wheels, to consider whether the teammates are applicable
(3) The need for a relatively high level of development

If the usual project is not urgent, I will consider to build their own wheels, there are several main benefits:

(1) Fully meet the requirements of the project, this is obvious, because the project to develop a full plug-in
(2) know well, easy to modify, Plug-ins are entirely their own development, the project has what needs changes can be flexible response
(3) Lightweight, because we do not like other open source plug-ins to deal with so many needs, so our own wheels also need to meet their own car, do not need a lot of change, relatively, less change function less, code will be less.
(4) to the individual ability is a very big exercise, do not repeat the wheel this is a word widely circulated in programmers, this also become a lot of people lazy excuse, but we should not use this as an excuse to hinder their progress. The students who built the wheel should have a deep experience, built a wheel, far more than you use other people write 100 plug-ins to harvest more, our wheels can not be used in the project, but this is a very efficient way of learning, strongly recommended.

How to develop a lightweight and adaptable plugin

How to develop a flexible and lightweight plug-ins? The so-called applicability is strong, simply say there are a few:

1, the less UI restrictions the better, preferably not
2, does not provide too many functions, only to provide a simple API, so that users easy to expand

For example, let's say we're going to develop a jquery paging plugin for the jquery plugin development tutorial, please refer to the jquery plugin development.

Identify requirements

Identifying requirements is the first step in developing plug-ins. To develop a lightweight paging plugin, we still use the most basic requirements from the plug-in start, paging plug-ins the most basic requirements is what, nothing more than the page number display, the number of switches between, so, our plug-ins to revolve around this basic need to start, and temporarily do not consider other possible needs.

Determine plug-in HTML and CSS

After determining the requirements of the plug-in, the second step is the plugin's UI, which is HTML and CSS.

Suppose the basic UI is as follows:

Basic Paging UI

When you see the basic UI above, you don't know what kind of HTML structure you're thinking of. For our developers, HTML and CSS to the simpler the better, so the most basic HTML structure is nothing more than a tag and span tag mix, some students may think of using ul,li tag, but this actually increase the complexity of the gains. We write HTML code as follows:

<div class= "Pager" >
<span class= "Flip nopage" > Prev </span>
<span class= "Curpage" >1 </span>
<a page= "1" href= "javascript:;" >2</a>
<a page= "2" href= "javascript:;" >3</a>
<a page= "3" href= "javascript:;" >4</a>
<span>...</span> 
<a href= "javascript:;" page= "8" >9</a> 
<a Page= "1" href= "javascript:;" class= "Flip" > next page </a>

This is the most basic HTML code structure, containing the paging plug-in container Div.pager, the current page span.curpage, other page number a tag, previous page, next page, and so on.

Next is the CSS code, the main current page tags, other page tags, the next page, the mouse hover over the button several styles, written as follows:

. pager {display:inline-block; font:12 px/21px "Arial"; margin-top:20px;}
. Pager a,. Pager. Flip,. Pager curpage {border:1px solid #e3e3e3; display:inline-block; height:22px ; Text-align:center; }
. Pager A {Background:none repeat scroll 0 0 #fff; color: #010101; text-decoration:none; width:26px;}
. Pager A:hover {Background:none Repeat scroll 0 0 #f1f1f1;}
. Pager. nopage {color: #a4a4a4;}
. Pager. curpage {Background:none Repeat scroll 0 0 #49abde; color: #ffffff; width:26px;}

Writing JS Code

Write a good basic HTML and CSS, the next most important is the JS code. First of all, we build the basic form of jquery plug-in development:

; (Function ($, window, document, undefined) {
"use strict";
var defaults = {
pageindex:0,
pagesize:6,
itemcount:50,
maxbuttoncount:7,
prevtext: "Prev",
nexttext: "Next page",
buildpageurl:null,
onpagechanged:null
}; 
$.fn.pager = function (options) {
options = $.extend (defaults, Options | | {});
}

Here are some of the optional parameters of the default values, such as page number defaults to 0, the number of 6 per page, and so on.

Then let's think about the paging plugin idea:

1, set the current page number to 0, to indicate the first page
2, the raw material page plug-in HTML code
3, modify the page number, and then generate HTML code

Based on this idea, we write the following code:

; (Function ($, window, document, undefined) {"Use strict"; var defaults = {pageindex:0, pagesize:6, itemcount:50, MAXB
Uttoncount:7, Prevtext: "Prev", Nexttext: "Next Page", Buildpageurl:null, onpagechanged:null}; function Pager ($ele, Options) {this. $ele = $ele; this.options = options = $.extend (defaults, Options | |
{});
This.init ();  } Pager.prototype = {Constructor:pager, init:function () {this.renderhtml (); This.bindevent ();}, Renderhtml:function () {var options = this.options Options.pagecount = Math.ceil (options.itemcount/options.pagesize); var html = [];//Build Previous page's button if (Options.pageindex > 0) {html.push (' <a page= ' + (options.pageindex-1) + ' "href=" ' + This.buildpageurl
(Options.pageindex + 1) + ' "class=" flip "> ' + options.prevtext + ' </a> '); else {html.push (' <span class= ' Flip nopage ' > ' + options.prevtext + ' </span> ');//Here is the key//Temporary starting page Middle page number Use var tempstartindex = Options.pageindex-math.floor When greater than the maximum number of buttons displayed (Options.maxbuttoncount/2) + 1; Calculates the ending page number, calculates the page number of the first button in a row by Max, and then calculates the amount of pages var endindex = math.min (options.pagecount, Math.max (0, Tempstartindex) +
Options.maxbuttoncount)-1;
var startIndex = Math.max (0, Endindex-options.maxbuttoncount + 1);
The first page if (StartIndex > 0) {html.push ("<a href= '" + this.buildpageurl (0) + "' page= '" + 0 + "' >1</a>");
Html.push ("<span>...</span>"); ///Generate page Number button for (var i = StartIndex i <= endindex; i++) {if (Options.pageindex = i) {html.push (' <span class= ') curp
Age ">" + (i + 1) + ' </span> '); else {html.push (' <a page= ' + i + ' "href=" ' + this.buildpageurl (Options.pageindex + 1) + ' "> ' + (i + 1) + ' </
A> ');
}//Last page if (Endindex < options.pagecount-1) {Html.push ("<span>...</span>"); Html.push ("<a href= '" + this.buildpageurl (options.pagecount-1) + "' page= '" + (options.pagecount-1) + "' >" + opt
Ions.pagecount + "</a>");} Generate button if (Options.pageindex < options.pagecount-1) {htm for next pageL.push (' <a page= ' + (Options.pageindex + 1) + ' "href=" ' + this.buildpageurl (Options.pageindex + 1) + ' "class=" Flip "&
gt; ' + Options.nexttext + ' </a> '); else {html.push (' <span class= ' Flip nopage ' > ' + options.nexttext + ' </span> ');} this. $ele. HTML (Html.join ("
"));}, Bindevent:function () {var = this; That's $ele. On ("Click", "a", function () {That.options.pageIndex = parseint ($ (this). attr ("page"); That.renderhtml ()
;
That.options.onPageChanged && That.options.onPageChange (That.options.pageIndex); }), Buildpageurl:function () {if ($.isfunction (THIS.OPTIONS.BUILDPAGEURL)) {return This.options.buildPageUrl (
PageIndex);
return "javascript:;";
} 
}; $.fn.pager = function (options) {options = $.extend (defaults, Options | |
{});
Return to New Pager (this), options);  }) (JQuery, window, document);

There are two key points to remember in this code:

(1) The generation of HTML code, because the page number may be too much, need to hide part of the page number, so we want to generate an ellipsis to represent the hidden page number, through Maxbuttoncount to represent the most page number button

(2) Event binding, each page number changes will regenerate the HTML, we use the way the event agent, improve performance, do not have to repeat the binding event
Such a basic paging plugin is already available.

But is that enough?

Suppose we need to support the input page number direct jump function, that how do you need to modify the original HTML structure and CSS? We mentioned earlier that the development of a plug-in should begin with the most basic requirements, and what to do with these potential possible requirements.

My solution is to provide a simple API that does not provide a UI and is completely customizable by the user.

We add three Api:getpageindex,setpageindex and Setitemcount to the code above, respectively, to get the current index, set the current index, and set the total number of items. The code is as follows:

Getpageindex:function () {return
this.options.pageIndex;
},
setpageindex:function (pageIndex) {
This.options.pageIndex = PageIndex;
This.renderhtml ();
},
setitemcount:function (itemCount) {
this.options.pageIndex = 0;
This.options.itemCount = ItemCount;
This.renderhtml ();

Provides these three APIs, assumes the user needs to jump the page number the function, may use directly the Setpageindex method to jump, the UI completely by the user custom, the plug-in itself only concentrates on the basic function, does not interfere the other.

We can see the demo

The entire plug-in code has been placed on my GitHub, interested students can click to view GitHub

Summarize

Finally, I tidy up some of my ideas to develop JS Plug-ins:

1, focus on the most basic needs themselves, temporarily do not consider potential demand
2, as far as possible do not provide or provide less UI, reduce the user restrictions
3, consider potential requirements, provide APIs, the potential requirements are entirely user-defined

This is when I write JS plug-in, consider how lightweight and strong applicability of some ideas, welcome to communicate!