发表于: 2017-04-12 21:51:06

1 1070


今天完成的事情:接着昨天的进度,上午通过师兄的指点解决了昨天下午遇到的问题,修改了杀手杀人按钮和投票按钮进入同一个页面是表头及其他文字和按钮文字的变化效果,太大的进展没有。下午开始整理小课堂的知识,编辑PPT,编写相关的demo。晚上复习了一下数组的知识,着重看来一下删除项的方法。

明天计划的事情:开始投票页的js代码编写,上午有了点想法,明天实践中证实一下可行性。

遇到的问题:

 第一,记述一下昨天问题的解决办法,目前由于没有开始投票页的js代码编写,所以昨天想的通过死亡数组的数据判别奇偶性的方法等明天再说。目前根据师兄的指点,在投票页设置了一个对投票页没有作用的变量,然后将它传递到了法官日志的页面中,通过判断这个值的大小,然后修改按钮的背景色已经按钮的禁用状态。后来故技重施,在法官日志中也设置了 一个目前多余的变量,在投票页面来判别是从杀手按钮跳转过来还是在投票按钮点下去后转过来的,然后相应地修改标题、提示、按钮等文字内容。

 第二个,和上边情况差不多,再投票页面再次转到法官日志时,隐藏第一天的日志,生成第二天的四个状态,目前只是实现了基本的效果,但是由于四个步骤都是用有独立id的按钮做的,第二天的四个步骤的按钮目前没有起到作用,不会跳转,也不会弹出相应的警告框,目前还在探索解决方法。

收获:昨天憋了一下午一晚上的东西,今天通过沟通讨论就找到了点子方法去解决,看来有时还是要用好自己的资源,多和过来人交流才能提高自己的效率和知识点的扫盲工作。明天继续加油!!!

  整理的今日小课堂内容,现在附加上:

JS有哪些传参方式

1.背景介绍

目前我们大部分人已经进入js的任务,尤其任务2以后就会遇到网页间数据传递给下一个或者多个页面进行使用的情况,有什么方法能够实现,满足我们目前的需要,现在就跟大家分享讨论一下!

2.知识剖析

2.1参数传递的几种方法

第一个,使用url实现;

第二个,使用Cookie实现;

第三个,使用Web Storage(网络存储)实现;

第四个,基于Angular的一些方法;

第五个,基于Ajax[ˈeɪˌdʒæks]的一些方法;

。。。。。。

2.2 url的实现方法

url参数的书写格式:http://www.wowo.html?name=rhythmk&key=567574

url和参数之间用"?"隔开,多个参数之间用"&"符号连接

url参数的调用方法:person=location.search;

2.3 url的优缺点

优点:

URL地址法简洁易用,可同时传递多个字符型参数;

URL地址法可以很方便的在页面之间切换并传递参数,无需额外的处理,基于正常情况比较不会性能损失;

缺点:

URL传递参数长度在IE浏览器中受限,最大为2K;

信息安全无法保障:URL地址在客户端可见,导致会泄露信息,可能被恶意用来攻击系统或者其他行为。

URL只能传递字符型参数,传递中文时,由于字符编码方式不一样,可能导致参数解析处理错误。

2.4 Cookie的实现方法

在Javascript中处理cookie有些复杂,使用document.cookie属性可以设置一个新的cookie字符串。例如:document.cookie = "name=Nicholas";为了规范,一般要写成这种形式:document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("Nicholas");

以上的例子,书写很不方便,后来又演化出来使用设置好的对象——CookieUtil来进行编写Cookie的方法:

设置cookie:CookieUtil.set("name","Nicholas","/books/projs/","www.wrox.com",new Date("January 1, 2020"));

删除设置的cookie: CookieUtil.unset("name","Nicholas","/books/projs/")

2.5 Cookie的特点

每个域中的cookie的个数有限制:IE7最多为50个,Firefox为50个,Opera为30个,Chrome没有硬性规定。超出后,浏览器自动清除以前的cookie。

cookie的尺寸也有限制,为了兼容性,最后设置在4095B(含4095)以内。它影响一个作用域的所有cookie。

cookie的名称不区分大小写。mycookie和MyCokie是一样的。不过最后区分,因为涉及到url编码。

cookie的值是字符串形式的。

cookie的作用域设置时要注意作用域的范围。

2.6 Web Storage

Web Storage有两个对象:sessionStorage和localStorage(globalStorage在H5中已经被localStorage取代)。

存储数据有两种:按方法、按属性;

sessionStorage.setItem("name","Nicholas");

sessionStorage.name="Nicholas";

读取方法也一样,有两种:

var name = sessionStorage.getItem("name");

var name = sessionStorage.name;

删除的方法:

sessionStorage.removeItem("name");

var name = sessionStorage.name;

Web Storage的大小同样是受限制的,因各浏览器设置不同,local Storage最小有2.5MB,最大5MB;session storage最小有2.5MB,最大5MB。

3.常见问题

问题: 以上的方法如何在实践中使用

4.解决方案

编码实战中引入简单的案例向大家演示一下。

5.编码实战

demo1-url

代码如下:

效果如下:

demo2-web storage

代码如下:

效果如下:

6.扩展思考

问题: 大家还使用过哪些觉得不错的传参方式?

7.参考文献

参考一:《JavaScript高级程序设计》

参考二:《Javascript权威指南》

参考三:武汉师姐的小课堂

参考四:成都师兄的小课堂

8.更多讨论

讨论点:网页内传参的方法?

demo/js-02-data transmission/js-02-data transmission url demo.html



返回列表 返回列表
评论

    分享到