Share my thoughts on JS plug-in development and my thoughts on js plug-ins

Share my thoughts on JS plug-in development and my thoughts on js plug-ins

Read the following contents:

• Cause
• How to Develop a lightweight plug-in with strong Applicability
• Conclusion

Cause

If you have done some front-end development work at ordinary times, you will have the following experience: When the page needs some effect or plug-in, we generally have two options:

1. Search for relevant JS plug-ins online and learn their usage
2. Build your own wheels and develop plug-ins.

Find existing plug-ins

First, search for JS plug-ins online

If there is a plug-in that just meets the project requirements, this is a very lucky thing. However, I believe that in most cases, the plug-in we find has the following problems:

(1) UI customization: the UI provided by many plug-ins is totally different from the style of our project design. html and css may not conform to the plug-in usage method, as a result, we also need to modify html and css to adapt to the plug-in usage.
(2) learning cost: if it is a complicated plug-in, there is a learning cost problem. Learn how to use this plug-in.
(3) The plug-in does not meet the requirements: The plug-in we found does not fully guarantee that it meets the requirements of our project. At this time, you may need to modify its code to support the project requirements, this is also a possible problem.
(4) Plug-in functions are too big and comprehensive: assume that your project requires a simple carousel plug-in, and you will find a great carousel plug-in, which has a variety of cool effects and can also be used right away, however, the plug-in volume is similar to that of a js library. If you write the plug-in, you only need dozens of lines of code, at this time, is it too redundant to introduce this plug-in.
This is a problem that may exist when using js plug-ins. Of course, I do not want to use the js plug-ins that have already been written. After all, some plug-ins have passed the test of time, it is more beneficial to the project. In the following situations, I will consider using an existing js plug-in:

(1) complex functions: such as file upload, batch upload, and progress display, such as HTML editor
(2) The project construction period is urgent and the performance requirement is not high
(3) js plug-ins meet project requirements

Build your own wheels

Second, develop plug-ins by yourself
Writing plug-ins by yourself involves the following issues:

(1) Development of plug-ins takes time and may delay the project duration. If the duration is urgent, this method is not recommended.
(2) self-built wheels may not have the advantages of existing wheels. It is necessary to consider whether teammates are applicable.
(3) high development level is required

If the project is not urgent at ordinary times, I will consider creating a wheel by myself, which has the following benefits:

(1) completely meet the project requirements. This is obvious because plug-ins fully developed for projects
(2) be knowledgeable and easy to modify. The plug-ins are completely self-developed and can be flexibly adapted to any changes in project requirements.
(3) Lightweight, because we don't have to deal with so many requirements as other open-source plug-ins, so we only need to fit our own cars and don't need a lot of changes. Relatively speaking, fewer features and less code.
(4) individual abilities are a great exercise. do not duplicate the wheel. This is a widely used word among programmers. It has become an excuse for many people to be lazy, however, we should not use this as an excuse to impede our pace of advancement. Those who have made wheels should have a deep understanding. Building a wheel is far more rewarding than using the 100 plug-ins written by others. Our wheels can be used in projects, however, this learning method is highly efficient and is strongly recommended.

How to Develop a lightweight plug-in with strong Applicability

How can we develop an adaptive and lightweight plug-in? The so-called applicability is strong. In short, there are several points:

1. The fewer UI restrictions, the better. It is best not
2. Not providing too many functions, but providing simple APIs for users to expand easily

For example, if we want to develop a jQuery paging plug-in, see jQuery plug-in development for the jQuery plug-in development tutorial.

Determine requirements

Determining requirements is the first step in developing plug-ins. To develop a lightweight paging plug-in, let's start with the most basic requirements of the plug-in. What is the most basic requirement of the paging plug-in? It is nothing more than page display and page switch between pages, therefore, our plug-ins need to focus on this basic requirement, rather than considering other possible requirements for the moment.

Determine the html and css plug-ins

After determining the requirements of the plug-in, the second step is the plug-in UI, that is, html and css.

Assume that the basic ui is as follows:

Basic paging UI

Looking at the basic ui above, I don't know what html structure everyone will think. For our developers, the simpler the html and css, the better. Therefore, the most basic html structure is nothing more than the combination of a tag and span tag. Some may think of using ul, but the added complexity is not worth the candle. The html code is as follows:

<Div class = "pager"> <span class = "flip noPage"> previous page </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> </div>

This is the most basic html code structure, including the div. pager container of the paging plug-in, the span. curPage of the current page, the tag of other pages, the previous page, and the next page.

Followed by the css code, mainly the current page label, other page labels, the next page on the previous page, hover the mouse over the button and several other styles, write as follows:

. Pager {display: inline-block; font: 12 px/21px ""; margin-top: 20px ;}. pager ,. pager. flip ,. pager. curPage {border: 1px solid # e3e3e3; display: inline-block; height: 22px; line-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 #49 abde; color: # ffffff; width: 26px ;}. pager. flip {width: 56px ;}

Compile js Code

Write the basic html and css. The most important thing to do next is the js Code. First, we set up 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: "Previous Page", nextText: "Next page", buildPageUrl: null, onPageChanged: null}; $. fn. pager = function (options) {options = $. extend (defaults, options | |{}) ;}} (jQuery, window, document );

Here, we mainly provide some default values for optional parameters, such as the default page number is 0 and the number of pages per page is 6.

Next, let's take a look at the paging plug-in idea:

1. Set the current page number to 0, indicating the first page
2. Generate html code for the paging plug-in
3. Modify the page number and 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, maxButtonCount: 7, prevText: "Previous Page", nextText: "Next page", buildPageUrl: null, onPageChanged: null}; function Pager ($ ele, options) {this. $ ele = $ ele; this. 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 = []; // generate the button for the previous page 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>');} // The key here. // The intermediate page number of the temporary starting page number, use var tempStartIndex = options when the page number is greater than the maximum number of buttons displayed. pageIndex-Math. floor (options. maxButtonCount/2) + 1; // calculate the ending page number. Use max to calculate the page number of the first button in a row, and then calculate the number of pages. var endIndex = Math. min (options. pageCount, Math. max (0, tempStartIndex) + options. maxButtonCount)-1; var startIndex = Math. max (0, endIndex-options. maxButtonCount + 1); // 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 = "curPage">' + (I + 1) + '</span>');} else {html. push ('<a page = "' + I + '" href = "' + this. buildPageUrl (options. pageIndex + 1) + '">' + (I + 1) + '</a>');} // if (endIndex <options. pageCount-1) {html. push ("<span>... </span> "); html. push ("<a href = '" + this. buildPageUrl (options. pageCount-1) + "'page = '" + (options. pageCount-1) + "'>" + options. pageCount + "</a>");} // generate the button next to the page if (options. pageIndex <options. pageCount-1) {html. push ('<a page = "' + (options. pageIndex + 1) + '"href ="' + this. buildPageUrl (options. pageIndex + 1) + '"class =" flip ">' + options. nextText + '</a>');} else {html. push ('<span class = "flip noPage">' + options. nextText + '</span> '{%%this.%ele.html (html. join ("") ;}, bindEvent: function () {var that = this; that. $ ele. on ("click", "a", function () {that. options. pageIndex = parseInt ($ (this ). attr ("page"), 10); 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 new Pager ($ (this), options) ;}) (jQuery, window, document );

There are two key points to remember in this Code:

(1) html code generation. because there may be too many pages and some pages need to be hidden, We need to generate a ellipsis to indicate the hidden pages and use maxButtonCount to represent the most pages.

(2) event binding: html is generated every time the page number is changed. We use event proxy to improve performance and avoid repeated event binding.
This is a basic paging plug-in.

But is that enough?

Suppose we need to support direct jump of input page numbers, what should we do? Do we need to modify the original html structure and css? As we mentioned above, developing a plug-in should begin with the most basic requirements. What should we do with these potential requirements.

My solution is like this. It provides simple APIs, and does not provide UIS, which are completely customized by users.

In the above Code, we added three APIs: getPageIndex, setPageIndex, and setItemCount, 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();} 

These three APIs are provided. If you need to jump to the page number, you can directly use the setPageIndex method to jump to the page number. The UI is completely customized by the user. The plug-in only focuses on the basic functions, do not interfere with others.

You can view the DEMO

The code of the entire plug-in has been put on my github. If you are interested, click to view github.

Summary

Finally, let me sort out the idea of developing some js plug-ins:

1. Focus on the most basic requirements and ignore potential requirements for the moment
2. Try not to provide or provide less UI, and reduce User restrictions.
3. Considering potential requirements and providing APIs, the potential requirements are completely customized by users.

This is some of my thoughts on how to make the js plug-in lightweight and adaptable!

Articles you may be interested in:

• Insert html, php, SQL, and js Code in tinyMCE plug-in development and highlight the code
• Extend usage in extjs developed by jquery plug-in