发表于： 2022-12-30 19:32:05
0 319
任务三深度思考：
1.JS有哪几种传参方式?
在JS中有多种页面传递参数的方法：
一、URL
把参数值附在url后面传递到其他页面
二、H5 web storage
localStroage 和 sessionStorage
三、Cookie
使用浏览器Cookie传递参数
1 URL传递
这种传参方式就是通过在url后面增加参数，然后将参数信息传递到其他页面。比如：http://xxx.com/login.html?user=admin&password=123456
User=admin,password=123456是传递的参数 user\password是名称，admin\123456则是值。在html后面加个？然后添加参数，多个参数则用&相连。
后面任务学到的ajax，angularjs都是通过url来传递数据到接口然后接收响应的。
这种传参方式的特点
优点：
1、 URL地址法简洁易用，可同时传递多个字符型参数；
2、 URL地址法可以很方便的在页面之间切换并传递参数，无需额外的处理，基于正常情况比较不会性能损失；
不足：
3、 URL传递参数长度受限，最大为2K；
4、 URL只能传递字符型参数，传递中文时，由于发送页面和接收页面的字符编码方式不一样而导致参数解析处理错误，
参数包含中文时可能出现乱码或者参数接收错误；
5、 信息泄露：URL地址在客户端可见，所以涉及隐私的参数需进行加密后才能进行传递，不加密传输会导致信息泄露，产生安全隐患。
2 HTML5 web 存储
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，
但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
客户端存储数据的两个对象为：
localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
3 COOKIE
Cookie 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
Cookie 的作用就是用于解决 "如何记录客户端的用户信息":
当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
JavaScript 中，创建 cookie 如下所示：
document.cookie="username=John Doe";
在 JavaScript 中, 可以使用以下代码来读取 cookie：
var x = document.cookie;
-----------------------------------------------------------------------------------------------------------
2.有限状态机是什么？
比较官方的说法是：有限状态机是一种用来进行对象行为建模的工具，
作用是描述对象在它的生命周期内所经历的状态序列，以及如何响应来自外界的各种事件。
-------------------------------------------------------------------------------------------------------------
3.query中的bind(),live(),delegate(),on()有什么区别？
bind()
bind()函数用于为每个匹配元素的一个或多个事件绑定事件处理函数。执行bind()时，事件处理函数会绑定到每个匹配元素上。
因此你使用bind()所有button元素绑定了click事件，是为当时文档中存在的每个button元素绑定click事件。如果之后你向文档中添加了新的button元素，
绑定事件不会对其生效。如果你希望绑定事件对未来新添加的元素也生效，请使用on()、delegate()、live()等事件函数(尽量优先使用靠前的事件函数)。
.live()
live()函数用于为指定元素的一个或多个事件绑定事件处理函数。此外，你还可以额外传递给事件处理函数一些所需的数据。
即使是执行live()函数之后新添加的元素，只要它匹配当前jQuery对象的选择器，绑定的事件处理函数仍然对其有效。
此外，可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数
.delegate()
delegate()函数用于为指定元素的一个或多个事件绑定事件处理函数。此外，你还可以额外传递给事件处理函数一些所需的数据。
即使是执行delegate()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数仍然对其有效。
此外，该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
.on()
on()函数用于为指定元素的一个或多个事件绑定事件处理函数。此外，你还可以额外传递给事件处理函数一些所需的数据。
从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、delegate()、live()等事件函数。
on()支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下，即使是执行on()函数之后新添加的元素，
只要它符合条件，绑定的事件处理函数也对其有效。此外，该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，
jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
1、绑定方式不同
.bind()是直接绑定在元素上。
.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。
live()函数用于为指定元素的一个或多个事件绑定事件处理函数。
.delegate()则是更精确的小范围使用事件代理，性能优于.live()。
.on()则是最新的1.7版本整合了之前的三种方式的新事件绑定机制。
2、对元素的支持度不同
bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置。
3、删除方法不同
要删除通过bind()绑定的事件，请使用unbind()函数。
要删除通过live()绑定的事件，请使用die()函数。
要删除通过delegate()绑定的事件，请使用undelegate()函数。
要删除通过on()绑定的事件，请使用off()函数。如果要附加一个事件，只执行一次，然后删除自己，请使用one()函数。
今天学习的js知识点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>location对象</title>
</head>
<body>
<button>点击</button>
<div></div>
<script>
// window对象给我们提供了一个location属性用于获取或设置窗口的URL，并且可以用用于解析URL
//URL：统一资源定位符(Uniform Resource Locator,URL)是互联网上标准资源的地址
//location.href 获取或者设置 整个URL
//location.search 返回的是参数
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click',function () {
// console.log(location.href);
location.href = 'http://www.baidu.com';
})
var timer = 5;
setInterval(function () {
var o = {a : function () {
if(timer == 0){
location.href = 'http://www.baidu.com';
}else {
div.innerHTML = '你将在' + timer + '秒之后跳转到首页';
timer--;
}
}}
o.a();
},1000)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- form 用于收集用户的输入信息-->
<form action="index.html">
用户名： <input type="text" name="uname">
<input type="submit" value="登录">
</form>
<button>点击</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click',function () {
//location.assign() 和href一样 也可以实现跳转页面
//记录浏览历史 所以可以实现后退功能
// location.assign('http://www.baidu.com');
//不记录浏览历史 所以不可以实现后退功能
location.replace('http://www.baidu.com');
//reload() 重新加载页面 相当于刷新按钮或者F5 如果参数为ture 强制刷新 ctrl + F5
location.reload();
})
</script>
</body></html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="index.html">点击我去往首页</a>
<button>后退</button>
<script>
// window对象给我提供了一个 history对象，与浏览器历史记录进行交互。该对象包含（在浏览器窗口）访问过的URL
//back() 后退功能
var btn = document.querySelector('button');
btn.addEventListener('click',function () {
// history.back();
history.go(-1); // go(参数) go(-1) 后退一步
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- <div></div>-->
<a href="list.html">点击我去往列表页</a>
<button>前进</button>
<script>
// console.log(location.search); //?uname=andy
// //1、 先去掉？ slice('起始的位置',截取几个字符)
// var params = location.search.slice(1);
// console.log(params);
// //2、利用=把字符串分割为数组 split('=')
// var arr = params.split('=');
// console.log(arr); //['uname', 'andy']
// //3、把数据写入div中
// var div = document.querySelector('div');
// div.innerHTML = '欢迎' + arr[1];
// window对象给我提供了一个 history对象，与浏览器历史记录进行交互。该对象包含（在浏览器窗口）访问过的URL
//forward() 前进功能
var btn = document.querySelector('button');
btn.addEventListener('click',function () {
// history.forward();
history.go(1); //go(1) 前进一步
})
</script>
</body>
</html>
明天计划：完成接下来的任务
返回列表
评论