Building a complete Mobile project-Framing 4

1 Window.routemodule = (function () {2 //pagemap--page Map storage Relationship Table3 var pagemap = {4 Home:homemodule,5 Rank:rankmodule,6 Login:loginmodule7     }8 //I introduce the following logic in order to control each page in and out of the Operation9 Ten //Cache page Store Relationship table One var pagecachemap = { A //page has no relationship table initialized -     } -  the var pageobj = { - //Current page, Relationship table with previous page - Current_page:null,//Current page - pre_page:null//Previous page of page +     } -  + //Routing control function, which is specifically responsible for routing the corresponding Jump operation A function Routercontrol (routeName) { at Console.log (routeName + ' changed '); -  - if (Pagemap[routename]) { - var module = pagemap[routename]; - if (typeof pagecachemap[routename] = = = "undefined") { - //Determine if the page has been initialized in Console.log (routeName + ' not initialized '); - pageobj.current_page = module; to module.init ();//perform the corresponding module initialization operation + module.enter ();//Enter the page -  the Pagecachemap[routename] = true; * }else { $ Console.log (routeName + ' I have been initialized over ');Panax Notoginseng module.enter ();//show the page directly -             } the  + }else { A pagemap[' home '].init ();  the         } +          - / * equivalent to $ routeName = ' Home ' $ pagemap[' home '].init (); * * -     } -  the return { - Router:routercontrolWuyi     } the      -  Wu})();

This is a routing configuration object with only the basic properties.

The first sentence, since the start of a function routemodule.

Then the object that declares the Pagemap object has the value corresponding to each module object

var Pagemap = {
Home:homemodule,—— Home Module
Rank:rankmodule,—— Ranking Module
login:loginmodule--Login Module
}

Skip the next two paragraphs and look at the following function:

1 function Routercontrol (routeName) {2 Console.log (routeName + ' changed ');3 4 if (Pagemap[routename]) {5 var module = pagemap[routename];6 if (typeof pagecachemap[routename] = = = "undefined") {7 //Determine if the page has been initialized8 Console.log (routeName + ' not initialized ');9 pageobj.current_page = module;Ten module.init ();//perform the corresponding module initialization operation One module.enter ();//Enter the page A  - Pagecachemap[routename] = true; - }else { the Console.log (routeName + ' I have been initialized over '); - module.enter ();//show the page directly -             } -  + }else { - pagemap[' home '].init ();  +         } A          at / * equivalent to - routeName = ' Home ' - pagemap[' home '].init (); * * -}

The function name is Routercontrol, pass in a rootname parameter, and note the following return statement:

return {
Router:routercontrol
}

Finally, notice the object in the init just now:

New Router ({
'/:p agename ': function (pageName) {
Perform the corresponding route changes
Routemodule.routers (PageName);
}.bind (This)
}). init (' home ');

Together, that's it--

Init enters a parameter according to the hash value, assuming that he is home, this value is the home string, the name is the parameter of the PAGENAME, passed to the Routercontrol function in the Routemodel function, because this function is a closure, The return is the Routercontrol function.

Then the Routercontrol function of the parameter is obtained and the execution begins.

So, taking home into this function, we can parse the function out,

The first sentence: Console.log (routeName + ' changed ');

To get the results, the console shows that the home has changed.

It is determined that when this pagemap[' home ' exists, the object is assigned to the module

The modules are then judged whether they have been initialized, not initialized, that is, the init () method of the execution module executes enter at the same time () to enter this page, and then modify the cache table to determine that this has been initialized--pagecachemap[routename] = true;

Initialized, it goes directly to the corresponding page.

When pagemap[' home ' does not exist, it simply initializes the homepage and jumps to the homepage:

else {
pagemap[' Home '].init ();
}

Go back to the two paragraphs you just skipped:

var Pagecachemap = {
Page has no relationship table initialized
}

var pageobj = {
Current page, Relationship table with previous page
Current_page:null,//Current page
Pre_page:null//Previous page of page
}

Each of these two objects is written in the table of the page that has been cached and the table that records the current page and the page that was browsed last. First, explain the effect of the two tables--

Instead of loading all of the modules, we need to load a certain part of it. At first, the template of each sub-page is placed there, but there is no content filled, no JS added, and did not complete loading. Only the module has completed loading by executing init (). And this time, and already loaded pages need to be recorded, after all, the repeated loading of wasted resources, the data has been loaded, the direct jump is good, this is the role of the cache table.

We need to go to the previous or next step of the visit page, this will require a second table, or the page will not be able to return operations.

Building a complete Mobile project-Framing 4