• js高级(2)函数的柯里化,cookie的使用,10天免登录案例,购物车案例,拖动盒子小案例等等

    1.函数的柯里化

    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));

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30

    2. 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"));

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    2.cookie

    1.概念:浏览器的本地存储技术

    2.http:80 https:443

    3.特点:

    1. 简单
    2. 灵活
    3. 无状态(对事物没有记忆能力) 断开式

    4.为什么要有cookie?使用的场景?

    因为 http 协议是无状态 (对事物没有记忆能力),为了解决这个问题,
            服务器就会生成sessionId(一串字符串),通过http协议响应给浏览器
            浏览器就需要存储,就存储在cookie,存储方式 key-value对象
            cookie有个最大的特点,会随着请求携带到服务器(cookie为钱包)

    • 1
    • 2
    • 3
    • 4

    5.cookie的特性?

    1. 基于http协议,解决http无状态
    2. 会随着请求携带cookie到服务器
    3. 存储大小为4k左右的’字符串’
    4. 不是真正永久存储,能设置失效时间
    5. 不安全,容易被伪造,key-value对象模式

    3.cookie的使用

    1. 添加

      document.cookie="age=22"
document.cookie="sex=男"

      • 1
      • 2

    2. 修改(就跟添加差不多)

        // 设置失效时间
            var date = new Date()
            date.setDate(date.getDate() + 10)
            document.cookie = "age=20;expires=" + date.toUTCString()
            document.cookie = "sex=男"

      • 1
      • 2
      • 3
      • 4
      • 5

    3. 查看

              // 多条数据用"; "分号+空格隔开
var str=document.cookie
console.log(str)

      • 1
      • 2
      • 3

    4. 删除

       // 获取昨天的时间,已达到删除数据
            var data = new Date()
            data.setDate(data.getDate() - 1
            // toUTCString 东八区
            document.cookie = "age=20;expires=" + data.toUTCString()

      • 1
      • 2
      • 3
      • 4
      • 5

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52

    5.小案例

    1. 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>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      • 54
      • 55
      • 56

    2. 记录图片位置:
      页面上有一个红色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>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      • 54
      • 55
      • 56
      • 57
      • 58
      • 59
      • 60
      • 61
      • 62
      • 63
      • 64

      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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79

    购物车页面

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
  • 相关阅读:
    SpringBoot结合XXL-JOB实现定时任务
    软件测试基础-自动化测试技术
    IAP固件升级进阶（Qt上位机）
    更换双cut的via
    btree，hash，fulltext，Rtree索引类型区别及使用场景
    独立按键控制LED亮灭、独立按键控制LED状态、独立按键控制LED显示二进制、独立按键控制LED移位——“51单片机”
    Python-基础学习-第二轮
    Vue配置代理学习笔记
    SpringMVC 04(JSON和全局异常处理)
    使用gpio_direction_output()无法设置GPIO原因分析
  • 原文地址：https://blog.csdn.net/qq_46372132/article/details/133755940