JS Page Generation library, a page builder for front-end separation

Objective

The task that was written last week needs to be paged, git has searched for some, did not feel appropriate, so he temporarily wrote a paging algorithm.

Then, when the time came, decided to optimize and promote the paging. As a result, a page number generator that is suitable for separating the front and back ends comes out.

Don't talk nonsense, just go to git address and demo address. Crossing decisive Click inside to see see. The Readme document of the project homepage will be automatically typeset.

Talk about design ideas first

The entire development process is developed around event bindings.

Out of callback callback, this callback method directly uses the event mode to trigger the action before and after the page change, which facilitates decoupling.

Since callbacks are used this way, the paging data is mounted using global variables to facilitate paging data access at callback time.

Dependency of the Library

Because of the development of the library, there is no use of native syntax for element or event binding operations, so you need to rely on a library.

At this stage, the test supports Zepto and jquery (option one).

CSS, the proposal or directly to write or use the bootstrap library, the source code inside the bootstrap from the inside Out of the page CSS code.

Simple Demo

Because paging must know the paging data size, the configuration object must be transferred.

var pageconfig = {  //  per page The length of the data displayed, required, and >1  prepagelenght:10,    The total length of the data, required, and >1  datalength:30,  //  Current page number, default 1   pagenow:1,  //  render the container of the paging HTML, the container of the general framework can be  renderbox: $ ('. Pagination-box ')};

After configuration, make a call

// run can be paged pagebuilder (pageconfig);

This way you can do the paging.

Writing of callbacks

The callback's writing is placed after the main function of the paging, but remember to define these events before calling paging, because once the paging function is called, the paging callback is triggered immediately, and after that, it forgets the callback of the event just after paging.

The first is the pre-paging callback, which triggers the event Beforepagechange before a custom paging in the window before paging, so to trigger the action before the page is processed:

// pre-defined actions prior to paging, optional function () {  //  callback  //  todo/  /  Get the current page number, you can PageBuilder.page.pageNow, note that the value at this point is the old page number before the page is paginated. })

Similarly, after paging the callback is similar:

// pre-defined actions after paging, optional function () {  //  callback  //  todo/  /  Get the current page number, you can PageBuilder.page.pageNow get })

Special Instructions

A page is only suitable for use with a single paging instance. The paging action will be paginated after the hashchange is triggered.

A function that monitors the change in page numbers:

    //binding Events for page breaks$ (window). On (' Hashchange ',function() {      varhash =Location.hash; varpagetemp = 0; if(/^ #page =\d+$/.test (hash) = = =true) {        //It's directly on the page.Pagetemp = hash.substring (6) | 0; if(Defaultconfig.pagenow!==pagetemp) {Defaultconfig.pagenow=pagetemp; $ (window). Trigger ("Renderpagination"); }      } Else if(hash = = "#page =next") {        //on the next pageLocation.hash = "page=" + (Defaultconfig.pagenow + 1 ); } Else if(hash = = "#page =prev") {        //previous page ofLocation.hash = "page=" + (defaultconfig.pagenow-1 ); }    })

Because Hashchange only supports ie8+,

So, the plugin is only suitable for ie8+, and even IE8 's weird mode does not support Hashchange events.

Conclusion

This library also has a lot of things to optimize, such as page number caching, scope optimization and so on, not optimized yet.

I hope you enjoy it. If you like, click on a recommendation, if used, remember star under OH.