发表于: 2017-06-09 22:06:10

2 1228


今天做了啥:

调试页面。

部署了正确的SVN文件

部署了线上环境

懒加载在调试中,懒加载能很好的支持模块化

"use strict"

app.config(["$stateProvider","$urlRouterProvider",routeFn]);

function routeFn($stateProvider,$urlRouterProvider){

$urlRouterProvider.otherwise("/main");

$stateProvider

.state("main",{

url:"/main",

templateUrl:"main.html",

controller:"mainCtrl",

controllerAs:"main",

resolve:{

deps:["$ocLazyLoad",function($ocLazyLoad){

return $ocLazyLoad.load("main.js");

}]

}

})

.state("adminUser",{

url:"/adminUser",

templateUrl:"adminUser.html",

controller:"adminUserCtrl",

controllerAs:"adminUser",

resolve:{

deps:["$ocLazyLoad",function($ocLazyLoad){

                    return $ocLazyLoad.load("adminUser.js");

}]

}

})

}

懒加载的一些坑

按需加载

将脚本按模块打包为一个个的js文件后,下一步的工作就是将根据用户请求来加载不同的模块,项目用使用ui-router来处理路由跳转,可以从route入手来完成模块的懒加载.

具体方法是:在用户操作路由跳转时,根据用户要跳转到的state,去加载此state所属的模块.基于此,需要添加一个state和模块之间的映射,最开始的时候使用requireJS来加载,发现脚本可以加载进来,但是angular中注册的控制器/services/filter等均不起作用.调查发现,angular在调用bootstrap方法之后注册的控制器之类的服务不会再被调用.基于此,引入ocLazyLoad来加载(ocLazyLoad对angular源码有一些注入修改).

还有以下几个问题:

模块之间项目依赖

因为存在一些模块之间项目之间有强依赖,对此的处理是在配置文件中添加模块之间的依赖关系,在加载某个模块之前查看其是否有依赖模块,如果有的话,优先加载其依赖模块,待依赖模块加载完成后再去加载当前模块

指令懒加载;

Angular中可以通过$compile来实现指令之间的相互依赖,对此的处理是配置指令名和指令模块的依赖,当用到某个指令的时候,先去加载其模块,然后执行编译方法.这种解决方案能解决大部分的指令依赖.

指令的位置问题.项目中大多用到的都是长页面,每一个长页面划分为若干个区域,每一个区域都是一个指令.使用拦截的时候会有一个问题,就是每个指令加载时间的长短不一样,先回来的指令会优先append到dom上,从而导致页面布局的不确定性.解决方案是,使用deffer机制,待所有指令加载/编译完成后,再往dom树上添加执行.

指令之间的依赖:指令之间也存在项目依赖,对此的解决方案是将相互依赖的指令合并为一个模块,打包到同一个脚本文件中.这个方案能解决大部分的指令依赖,但是无法解决初始化过程中的依赖.可能存在某个指令编译的时候,其依赖的指令还未完成编译.对于这样的超级特殊例子,只有在页面初始化的时候加载脚本和template.

明天做啥:完善复盘,熟练懒加载模块。

问题:对懒加载的语法有点不懂,昨天听大家说后台页面比前台难啊?


返回列表 返回列表
评论

    分享到