一个完整的移动端项目的构建步骤——框架搭构4

Posted 2020-07-31 起个好名字

 1 window.routeModule = (function() {
 2     //pageMap --> 页面映射存储关系表
 3     var pageMap = {
 4         home: homeModule,
 5         rank: rankModule,
 6         login: loginModule
 7     }
 8     //我为了控制每个页面进去、离开操作，我引入下面的逻辑
 9 
10     //缓存页面存储关系表
11     var pageCacheMap = {
12         //页面有没有被初始化的关系表
13     }
14 
15     var pageObj = {
16         //当前页，与前一页关系表
17         current_Page: null, //当前页面
18         pre_Page: null //页面的前一页
19     }
20 
21     //路由控制函数，它专门负责路由对应的跳转操作
22     function routerControl(routeName){
23         console.log(routeName + ‘发生了变化‘);
24 
25         if(pageMap[routeName]) {
26             var module = pageMap[routeName];
27             if(typeof pageCacheMap[routeName] === "undefined") {
28                 //判断页面有没有被初始化过
29                 console.log(routeName + ‘没有被初始化过‘);
30                 pageObj.current_Page = module;
31                 module.init();//执行相应模块初始化操作
32                 module.enter(); //进入该页面
33 
34                 pageCacheMap[routeName] = true;
35             }else {
36                 console.log(routeName + ‘我已经被初始化过了‘);
37                 module.enter(); //直接把页面展示出来
38             }
39 
40         }else {
41             pageMap[‘home‘].init();    
42         }
43         
44         /*等价于 
45         routeName = ‘home‘
46         pageMap[‘home‘].init();*/
47     }
48 
49     return {
50         router: routerControl
51     }
52     
53 
54 })();

这是一个只有基本属性的路由配置对象。

 

第一句话，自启动了一个函数routeModule。

然后是声明了pageMap对象这个对象的值对应着各个模块对象

var pageMap = {
home: homeModule,——主页模块
rank: rankModule,——排行模块
login: loginModule——登录模块
}

 

接下来两段跳过，看下面一个函数：

 1 function routerControl(routeName){
 2         console.log(routeName + ‘发生了变化‘);
 3 
 4         if(pageMap[routeName]) {
 5             var module = pageMap[routeName];
 6             if(typeof pageCacheMap[routeName] === "undefined") {
 7                 //判断页面有没有被初始化过
 8                 console.log(routeName + ‘没有被初始化过‘);
 9                 pageObj.current_Page = module;
10                 module.init();//执行相应模块初始化操作
11                 module.enter(); //进入该页面
12 
13                 pageCacheMap[routeName] = true;
14             }else {
15                 console.log(routeName + ‘我已经被初始化过了‘);
16                 module.enter(); //直接把页面展示出来
17             }
18 
19         }else {
20             pageMap[‘home‘].init();    
21         }
22         
23         /*等价于 
24         routeName = ‘home‘
25         pageMap[‘home‘].init();*/
26     }

 

这个函数名称是routerControl,传入一个rootname的参数，然后注意下面的return语句：

return {
router: routerControl
}

最后，再注意刚刚init中的对象：

new Router({
‘/:pageName‘: function (pageName) {
//执行对应的路由变化
routeModule.routers(pageName);
}.bind(this)
}).init(‘/home‘);

结合起来，就是这样的——

init根据哈希值传进入一个参数，假定他是home，这个值为home字符串，名字是pageName的参数，传到了routeModel函数当中的routercontrol函数当中，因为这个函数是一个闭包，return传出来的就是这个routercontrol函数。

于是得到了参数的routercontrol函数便开始执行。

那么，将home带入这个函数，我们就可以将函数解析出来了，

第一句：console.log(routeName + ‘发生了变化‘);

得到结果，在控制台显示home发生了变化。

 

 

下面判断，当这个pageMap[‘home‘]存在时，便将这个对象赋值给module

然后对这些模块判断是否进行过初始化，没有的进行初始化，即，执行模块的init()方法同时执行enter()进入这个页面，然后修改缓存表，确定这个已经初始化了——pageCacheMap[routeName] = true;

初始化了的，就直接进入对应页面。

而当pageMap[‘home‘]不存在的时候，便直接让主页初始化，跳转到主页上去：

else {
pageMap[‘home‘].init();
}

 

回到刚刚跳过的两段：

var pageCacheMap = {
//页面有没有被初始化的关系表
}

var pageObj = {
//当前页，与前一页关系表
current_Page: null, //当前页面
pre_Page: null //页面的前一页
}

这两个对象里分别写的就是已经缓存的页面的表和记录当前页面和上一次浏览的页面的表。首先解释一下两张表的作用——

我们对模块的加载并不是全部加载的，而是需要某一部分就加载某一部分。一开始，各个子页面的模板虽然都摆在那里，但是里面并没有填充内容，没有添加js，并没有完成加载。只有模块通过执行了init()才完成了加载。而这个时候，而已经加载过的页面需要被记录下来，毕竟重复加载浪费资源，数据已经加载完成的话，直接进行跳转就好了，这就是缓存表的作用。

而我们访问页面需要进行上一步或者下一步的处理，这里就需要第二张表，不然页面无法进行返回操作。