发表于: 2017-04-02 21:19:25
3 1184
今天完成的事:
1)解决了之前的懒加载总是报错,pageIndex不显示的问题。
是错误累加造成的:
先是app.js中angular的config路由配置中url错误。只要有一个地方出现错误,那么引用的几个页面都会失效不能用。
再是在main页面中引用懒加载放在了app.js之前。更改了引用顺序后就正常了。
(然而看另一个师姐的引用顺序是先懒加载js后app.js,正常运行。感觉真的很迷。)
之前的因为懒加载报错于是不停改动,改的面目全非。以下是正确写法:
var myApp = angular.module("myApp", ['ui.router','oc.lazyLoad']);
myApp.config(function ($stateProvider, $urlRouterProvider) {
//懒加载
var _lazyLoad = function (loaded) {
return function ($ocLazyLoad) {
return $ocLazyLoad.load(loaded, {serie: true});
}
};
$urlRouterProvider.when("", "/PageIndex");
$stateProvider
.state("PageIndex", {
url: "/PageIndex",
templateUrl: "PageIndex.html",
resolve: {
loadMyFile: _lazyLoad(
//懒加载登录的js和css文件
['css/PageIndex.css']
)
}
})
.state("PageIndex.Page1", {
url:"/Page1",
templateUrl: "Page1.html",
resolve: {
loadMyFile: _lazyLoad(
//懒加载登录的js和css文件
['css/Page1.css']
)
}});
});
引用顺序:
<script src="js/angular.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="js/app.js"></script>
<script src="js/ocLazyLoad.js"></script>
完整版引用顺序:
bootstrap,jq,angularJS,angular-ui-router.js,(自定义的app.js),oclazyLoad.js,&各种插件……
2)看angularJS高级程序设计。跟着敲了一些实例,看了创建数据模型,控制器和视图。
明天要做的事:去学习任务7需要的知识点,双向绑定,model,添加事件,表单验证。
写任务7的列表静态页面。
遇到的问题:从page1,2,3顺序点下来后,再点回page1,2.样式始终是page3,只有刷新才能有变化。
在师兄指点下解决了这个问题。是因为page1,2,3中样式类名相同。在使用ui-router时,这些页面都相当于pageIndex的子页面,在同一个页面里,类名相同自然就发生覆盖。
收获:如上。
小课堂听了传参的集中方式,原来不仅仅是之前知道的sessionStorage,localStorage,cookie。还有windows.open,URL传参等。
之前任务用的sessionStorage方便,它不兼容IE8以下。不过我们现在几乎不用做ie8以下兼容的,所以这个不是问题。
晚上听付老师的课堂。复习了操作系统。了解了缓存在前端中的应用。
当图片在第一次访问后,就被缓存到本地缓存中,在下一次本地发生请求时,会现在本地缓存中查找是否有想要的资源,如果有直接就读取了,省去一次访问远程服务器。如果没有再向服务器发送请求。
但这不适用于动态数据。为了解决这个问题,加入一个机制,比如服务器定时向本地端发送新的数据刷新。或者是加一个触发器,每当有数据变动时就触发,提醒,然后发送更改的数据。
还有存储分类,存储方式:段式存储和页式存储,一些算法例如FIFO先入先出算法,LRU算法。LRU最近最少使用算法。以前没有注意过它们,现在才发觉这些原理算法在优化性能还是很有用的。
评论