js高级(2)函数的柯里化,cookie的使用,10天免登录案例,购物车案例,拖动盒子小案例等等
1.函数的柯里化
-
自定义函数的柯里化
// 自定义函数的柯里化 function curry(fn) { //判断输入的函数有几个参数 let len = fn.length; // 返回一个函数,并且有函数名为t return function t() { // 获取到实参的个数 let innerLength = arguments.length // 获取到真实参数,转化为数组[...]Array.from let innerArr = Array.prototype.slice.call(arguments) // 如果实参大于或等于fn的参数,执行fn if (innerLength >= len) {//临界点,就不在自己调自己 // 直接运行最早传入的fn函数 return fn.apply(undefined, innerArr) } else { // 小于,自己调用自己,递归 return function () { let innerArg = Array.prototype.slice.call(arguments) let all = innerArr.concat(innerArg) return t.apply(undefined, all) } } } } function add(a, b, c, d) { return a + b + c + d } let res1 = curry(add) console.log(res1(10)(20, 30, 40)); -
lodash定义函数的柯里化
记得引入js
function ajax(a, b) {
return a + b
}
// 传入一个ajax函数,返回一个ajax函数
var result = _.curry(ajax)
// result相当于ajax,f相当于匿名函数
var f = result("http://www.baidu.com")
// console.log(f);
// 给匿名函数传入参数,并返回拼接完后的内容
console.log(f("/login"));
console.log(f("/reg"));
2.cookie
1.概念:浏览器的本地存储技术
2.http:80 https:443
3.特点:
- 简单
- 灵活
- 无状态(对事物没有记忆能力) 断开式
4.为什么要有cookie?使用的场景?
因为 http 协议是无状态 (对事物没有记忆能力),为了解决这个问题,
服务器就会生成sessionId(一串字符串),通过http协议响应给浏览器
浏览器就需要存储,就存储在cookie,存储方式 key-value对象
cookie有个最大的特点,会随着请求携带到服务器(cookie为钱包)
5.cookie的特性?
- 基于http协议,解决http无状态
- 会随着请求携带cookie到服务器
- 存储大小为4k左右的’字符串’
- 不是真正永久存储,能设置失效时间
- 不安全,容易被伪造,key-value对象模式
3.cookie的使用
-
添加
document.cookie="age=22" document.cookie="sex=男" -
修改(就跟添加差不多)
// 设置失效时间 var date = new Date() date.setDate(date.getDate() + 10) document.cookie = "age=20;expires=" + date.toUTCString() document.cookie = "sex=男" -
查看
// 多条数据用"; "分号+空格隔开 var str=document.cookie console.log(str) -
删除
// 获取昨天的时间,已达到删除数据 var data = new Date() data.setDate(data.getDate() - 1 // toUTCString 东八区 document.cookie = "age=20;expires=" + data.toUTCString()
4.js-cookie的使用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.5/js.cookie.js">script>
head>
<body>
<button>添加button>
<button>修改button>
<button>查看button>
<button>删除button>
<script>
var btn = document.querySelectorAll("button")
// 添加
btn[0].onclick = function () {
var list = [
{ id: 1, name: "小易1" },
{ id: 2, name: "小易2" },
{ id: 3, name: "小易3" }
]
Cookies.set("users", JSON.stringify(list))
}
// 修改
btn[1].onclick = function () {
// 1.先获取
var str = Cookies.get("users")
// 2.转换为数组
var oList = JSON.parse(str || '[]')
// 3.根据下标修改值
oList[1].name = "廖四"
// 4.覆盖,保存7天
Cookies.set("users", JSON.stringify(oList), {
expires: 7
})
}
// 查看
btn[2].onclick = function () {
var str = Cookies.get("users")
console.log(str);
}
// 删除
btn[3].onclick = function () {
Cookies.remove("users")
}
script>
body>
html>
5.小案例
-
10天内免登录
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.5/js.cookie.js">script> <style> form { width: 300px; height: 300px; border: 1px solid #000; /* margin: 200px ; */ padding-left: 20px; } style> head> <body> <form action="get"> 账号:<input type="text" name="username"><br><br> 密码:<input type="password" name="password"><br><br> <input type="checkbox" name="cbx">十天内免登录<br><br> <button type="submit">确定button> form> <script> var form = document.querySelector("form") form.onsubmit = function () { // 准备要保存的数据 const oUser = { user: this.username.value, pwd: this.password.value } // 判断是否打了勾 if (this.cbx.checked) { Cookies.set("userInfo", JSON.stringify(oUser)) } return false//阻止默认行为 } // 页面加载 onload window.addEventListener("DOMContentLoaded", () => { // 1.读取本地数据 const oUser = JSON.parse(Cookies.get("userInfo") || '{}') if (oUser.user) { form.username.value = oUser.user } if (oUser.pwd) { form.password.value = oUser.pwd } form.cbx.checked = oUser.user && oUser.pwd }) script> body> html> -
记录图片位置:
页面上有一个红色div, 可以对该div实现拖拽, 每次拖拽后需要保存位置
下次重新进入该页面时, 该红色div还是在最后一次拖拽松开时的位置
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> .box { width: 100px; height: 100px; background-color: pink; position: absolute; } style> <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.5/js.cookie.js">script> head> <body> <div class="box">div> <script> var box = document.querySelector(".box") // 给盒子绑定鼠标按下事件 box.onmousedown = function (e) { // 获取拖动的点到盒子起始点的位置 var disX = e.pageX - this.offsetLeft var disY = e.pageY - this.offsetTop; // 在按下鼠标的同时,拖动盒子,绑定鼠标移动事件 document.onmousemove = function (e) { box.style.left = e.pageX - disX + "px" box.style.top = e.pageY - disY + "px" box.innerHTML = "top:" + box.style.top + "
left:" + box.style.left var move = { left: box.style.left, top: box.style.top } Cookies.set("wz", JSON.stringify(move)) } // 鼠标松开不移动 清空绑定的移动事件 // 文档的任何位置松开 document.onmouseup = function (e) { box.onmouseup = document.onmousemove = null } } // 页面一加载,获取最后一次的位置 window.addEventListener("DOMContentLoaded", () => { // 读取本地数据 const oMove = JSON.parse(Cookies.get("wz")) if (oMove) { box.style.left = oMove.left box.style.top = oMove.top box.innerHTML = "top:" + box.style.top + "
left:" + box.style.left } }) script> body> html>3.使用cookie实现购物车功能:
有以下商品, 点击加入购物车即可加入到购物车中(cookie中保存),
点击查看购物车, 进入另一个页面, 并显示之前加入购物车的商品.
列表页
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.5/js.cookie.js">script>
head>
<body>
<ul>ul>
<a href="./购物车页面.html">去购物车a>
<script>
// 1.获取元素
var ul = document.querySelector("ul")
// 2.准备模拟数据
var oGoodList = [
{ id: 1, name: "单车", price: "100" },
{ id: 2, name: "摩托", price: "1000" },
{ id: 3, name: "汽车", price: "10000" },
{ id: 4, name: "坦克", price: "100000" },
{ id: 5, name: "飞机", price: "1000000" },
{ id: 6, name: "飞船", price: "10000000" },
]
// 3.封装一个渲染的函数
const render = (arr) => {
return arr.reduce((pre, cur) => {
return pre += `
id: ${cur.id} 名称:${cur.name} 单价:${cur.price} '
${cur.id}>加入购物车
`
}, "")
}
// 4.渲染到页面上
ul.innerHTML = render(oGoodList)
// 5.事件委托,点击加入购物车
ul.addEventListener("click", (e) => {
// 不是A,就返回不执行下面代码
if (!(e.target.nodeName == "A" && e.target.className == "add")) {
return
}
// 获取本地数据
let oCarts = JSON.parse(Cookies.get("cars") || '[]')
// 获取藏的值
let id = e.target.getAttribute("data-id")
// 拿着藏的值id去模拟数据进行比较,返回一条完整的数据
var items = oGoodList.find((item) => {
return item.id == id
})
// 设置一个开关,默认是没有添加
let isAdd = true
// 循环本地数据
for (let i = 0; i < oCarts.length; i++) {
// 如果本地数据的id,等于我点击的id,就表示我已经添加过了,修改状态
if (oCarts[i].id == id) {
isAdd = false
// 再把数据进行加1
oCarts[i].num = Number(oCarts[i].num) + 1
// 再退出
break
}
}
// 如果本地数据没有,就进行添加'
if (isAdd) {
// 把返回完整的一条数据添加到本地,并且把数量设置为1
items.num = 1
// 添加到本地
oCarts.push(items)
}
// 覆盖原来的数据
Cookies.set("cart",JSON.stringify(oCarts))
alert("添加成功")
})
script>
body>
html>
购物车页面
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
table,
tr,
th,td,
tbody {
border: 1px solid #000;
}
table {
width: 500px;
border-spacing: 0px;
border-collapse: 1px;
text-align: center;
}
style>
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.5/js.cookie.js">script>
head>
<body>
<h1>购物车h1>
<a href="./列表页.html">返回列表页a>
<table>
<thead>
<tr>
<th>idth>
<th>名称th>
<th>价格th>
<th>数量th>
<th>金额th>
tr>
thead>
<tbody>tbody>
table>
<script>
var tbody = document.querySelector("tbody")
// 定义一个渲染的方法
const render = function (arr) {
return arr.reduce((pre, cur) => {
return pre += `
${cur.id}
${cur.name}
${cur.price}
${cur.num}
${cur.price * cur.num}
`
}, "")
}
// 2.获取本地数据进行渲染
let oList = JSON.parse(Cookies.get("cart") || "[]")
tbody.innerHTML=render(oList)
script>
body>
html>