A preliminary study on the M-site from 2,732 handcart JS Modular Programming

Objective

These days when looking at the 273M site by their interactive way of the page attracted, their homepage is three times load + paging way. It is also said to be divided into the Oita page and small page two kinds of interaction. The page is a paging button, and a small page is loaded asynchronously by pulling down (sliding down).

273 This m site is a product recommendation I see. When I first saw this product, I thought of them three times the way to load and page the buttons, then the pageindex of small pagination is how to calculate. So I took a look at the source code. Referring to the source of the use of the Chrome Browser format tool (or a friend recommended me, but this format button is really not obvious, will not be Baidu).

Three times load and paging thinking analysis

1, from the bottom of the page in the number of pages, only set 25 pages instead of the number of page changes in the dynamic setting, that is, only to see the latest 25 pages of data. In other words, the number of pages here is fixed and the history data cannot be viewed.

2, from the first picture can be seen, each page of the first screen data is " synchronous mode of loading ."

3, from the third picture can be seen, when you second pull down and the third pull down from the message on the right, the second and third is " Asynchronous refresh " Loading data. As seen in the network, request ajax.php?module=getcarsalepost when loading data asynchronously. POST request. The focus is on the data of the POST request. Post data for the second request: Page:2, filter:/car/, Need_bak.

How does the page calculate when data is asynchronously recorded?

Filter Needless to say is the page number and other additional conditions for each page of the Oita pages. Need_bak didn't understand what the parameters were. OK, then see here is just to figure out how this page is calculated, usually we are the page formula, (pageIndex-1) * pageSize. Methods such as Skip (), take (). In the beginning, I drilled a niu Jiao Jian, forgetting that his " first screen data is loaded synchronously " on each page, which calculated several times the formula is not right. Ok. Thinking through the beginning to see their source code. F12. Format, Lower breakpoint.

From the Ajax.php?module=getcarsalepost keyword search, it's easy to find the code above. Of course, my most concern is the second code of this method: s=3*n-(3-i).  There is the Ajax success event in which they used History.replacestate ({page:999}, "", "#" +s); Change the address URL and the page does not refresh. The HTML5 API adds Pushstate () and Replacestate (). What does n mean? What is the value of I?

n is the page number of the Oita page. The second page that n=2. The variables of I are found in the definition below i=2 that is to say, his calculation here starts from the second page of the small page. The first page is the first screen is recorded in a synchronous way. See here basically this three times load and the idea of paging to feel clear.

After analyzing this, I saw in the whole that their code discovery used the Define keyword. This is the beginning to understand the next JS modular programming.

A tentative study of JS Modular Programming (COMMONJS, AMD specification, CMD specification)

The first Contact JS Modular programming is the process of learning node. JS, require, exports. It is well known that node. js is using COMMONJS.

Before contacting Commonjs, AMD, CMD, we first understand what is modular, modular development.

Modularity refers to the systematic decomposition of a problem in order to solve a complex problem or a series of mixed problems, according to a sort of thinking. Modularity is a way of dealing with complex systems that break down into manageable modules that are more logical and maintainable in code structures. Imagine a huge system code, how meaningful it is for software to be integrated and optimized to be segmented into highly logical modules. For the software industry: The complexity of decoupling software systems makes it possible to manage, develop, and maintain a "rational and predictable" system, no matter how large.

Some of the modules are defined as: Modularity is a property of a software system that is decomposed into a set of high-cohesion, low-coupling modules.      Then in the ideal state we only need to complete their own part of the core business logic code, other aspects of the dependency can be directly loaded by the user has already written the module to use.        First, since it is a modular design, the ability to act as a modular system: 1, define the module of the encapsulation.        2. Define the dependencies of the new modules on other modules.  3, the introduction of other modules can be supported. AMD and CMD

Modular programming in node. JS is implemented with reference to COMMONJS. There is a global method require () in Commonjs. Used to load modules. With the service-side module, it is natural that you want to have modular programming on the browser side as well. It is also best to be compatible with both the server and the client.

COMMONJS specification is good but not suitable for the browser environment, because require is running synchronously, each reference to a Lib must wait for the load to complete, that is, the load time process, the browser will be suspended animation, the entire application will be paused. Therefore, the browser side of the module can not be recorded in different ways, can only be recorded in an asynchronous way, this is the background of the birth of the AMD specification.

AMD (asynchronous module definition) means an asynchronous module definition. It is loaded asynchronously, and the loading of the module does not affect the running of the subsequent statement. All statements that rely on this module are defined in a callback function that will not run until the load is complete.

The JavaScript library Require.js is currently implemented using the AMD specification.

Require.js mainly solves two problems:

1, multiple JS may have dependencies, the dependent file needs to be loaded into the browser earlier than the file that relies on it

2, JS load when the browser will stop rendering the page, loading more files, the page lost response time longer.

CMD (Common module Definition), which clarifies the basic writing format and basic interaction principles of the module. In the CMD specification, a file is a module that is basically defined as follows:

Define (Factory). Define is a global function used to define a module, which accepts a parameter factory,factory can be a function or an object or a string. Define ({"foo": "Bar"}).

What is the difference between AMD and CMD? AMD is executed in advance, and CMD is deferred. AMD is fast, wasting resources, preloading all dependencies, and executing only when it is used. CMD only loads dependencies when it is really used, performs poorly, and does not define dependencies until it is used.

Summarize

Understanding the basic concepts of COMMONJS, AMD, and CMD also requires the use of typical frameworks that they represent, such as Requirejs, Seajs. The status of the pure function in the primary key transformation project and the cost of the project iteration as a result of human differences.

Resources

Http://www.cnblogs.com/skylar/p/4065455.html
https://github.com/seajs/seajs/issues/277
https://www.douban.com/note/283566440/
Http://blog.chinaunix.net/uid-26672038-id-4112229.html

A preliminary study on the M-site from 2,732 handcart JS Modular Programming