发表于： 2017-01-11 10:48:09
1 1105
今天完成的事情：
完成了任务3查看身份页面的静态页面，分析研究了任务三的大致业务逻辑，
把任务1的js代码从HTML文档中拆分出来保存在js文件中。
任务3的页面较简单，中部展示区域显示对应玩家的序号、头像、角色、词组，
点击下方的按钮会交替在展示区域展示cover图或者身份信息。
任务1的js代码之前直接写在HTML文档中</body>标签之前的<script></script>中，
在两个<button>标签中使用了事件处理函数onclick = start();
这样就可以在点击按钮时调用特定的js代码。
但是类似于使用style属性，在HTML文档里使用诸如onclick之类的属性也是一种既没有效率又容易引发问题的做法。
如果能把js代码调用行为与HTML文档的结构和内容分离开，网页就会健壮得多。
可以将js代码打包到prepare函数里：
function prepare() {
var btn1 = document.getElementById("btn1");
btn1.onclick = start;
var btn2 = document.getElementById("btn2");
btn2.onclick = reset;
}
但是仅有这些还不够，因为如果把这些代码存入外部js文件，它们将无法正常运行。
类似var btn1 = document.getElementById("btn1");这样的语句将在js文件被加载时立刻执行。
如果js文件是从HTML文档<head>部分用<script>标签调用的，它将在HTML文档之前加载到浏览器里。
而如果<script>标签位于文档底部</body>之前，就不能保证哪个文件最先结束加载，
因为脚本加载时文档可能不完整，所以模型也不完整。没有完整的DOM，getElementById等方法就不能正常工作。
必须让这些代码在HTML文档全部加载到浏览器之后马上执行。
还好，HTML文档全部加在完毕时将触发一个事件，这个事件有他自己的事件处理函数。
把js代码打包在prepare函数里，并把这个函数添加到window对象的onload事件上去。
这样一来，DOM就可以正常工作了
window.onload = prepare;
明天计划的事情：
完成任务3的js代码。
遇到的问题：
拆分任务1的js代码时出错，后发现是这部分代码：
if (!document.getElementById){
return false;
}
if (!document.getElementsByTagName) {
return false;
}
在getElementById这些方法后多加了对括号导致的。因为这段代码的目的是为了检测用户的浏览器是否支持这些方法，
如果不删掉圆括号，测试的将是方法的结果，无论方法是否存在。
这些东西本来书上都有写的，但我看的时候居然没看到。。。
收获：
学习了localStorage的使用方法。
在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的。
localStorage可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库。
localStorage只支持string类型的存储,目前所有的浏览器中都会把localStorage的值类型限定为string类型，
这个在对我们日常比较常见的JSON对象类型需要一些转换。
localStorage的写入有三种方法，这里就一一介绍一下
if(！window.localStorage){
alert("浏览器不支持localstorage");
return false;
}else{
var storage = window.localStorage;
//写入a字段
storage["a"] = 1;
//写入b字段
storage.b = 2;
//写入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
}
localStorage的三种读取方法：
1.var a=storage.a;
2.var b=storage["b"];
3.var c=storage.getItem("c");
这里面是三种对localStorage的读取，其中官方推荐的是getItem\setItem这两种方法对其进行存取。
返回列表
评论