高阶函数和排他思想以及节点操作

广交靓仔
133 阅读2分钟

通过function声明的函数就是全局函数，会挂载到全局Window中。

image.png

image.png 这种情况容易造成污染和内存泄漏，所以我们一般定义函数利用变量和匿名函数存储和调用。

什么是回调函数

  1. 把函数当做另外一个函数的参数传递，这个函数称为回调函数
  2. 回调函数本质还是函数，只不过把它当成参数使用
  3. 使用匿名函数做为回调函数比较常见

例子:

this所指代的对象

this:谁触发事件，方便就是事件处理函数中的this image.png

排他思想

排他思想.gif

image.png

tab栏切换

tab栏切换.gif

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrapper {
            width: 1000px;
            height: 475px;
            margin: 0 auto;
            margin-top: 100px;
        }

        .tab {
            border: 1px solid #ddd;
            border-bottom: 0;
            height: 36px;
            width: 320px;
        }

        .tab li {
            position: relative;
            float: left;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-top: 4px solid #fff;
        }

        .tab span {
            position: absolute;
            right: 0;
            top: 10px;
            background: #ddd;
            width: 1px;
            height: 14px;
            overflow: hidden;
        }

        .products {
            width: 1002px;
            border: 1px solid #ddd;
            height: 476px;
        }

        .products .main {
            float: left;
            display: none;
        }

        .products .main.active {
            display: block;
        }

        .tab li.active {
            border-color: red;
            border-bottom: 0;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <ul class="tab">
            <li class="tab-item active">国际大牌<span>◆</span></li>
            <li class="tab-item">国妆名牌<span>◆</span></li>
            <li class="tab-item">清洁用品<span>◆</span></li>
            <li class="tab-item">男士精品</li>
        </ul>
        <div class="products">
            <div class="main active">
                <a href="###"><img src="imgs/guojidapai.jpg" alt="" /></a>
            </div>
            <div class="main">
                <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt="" /></a>
            </div>
            <div class="main">
                <a href="###"><img src="imgs/qingjieyongpin.jpg" alt="" /></a>
            </div>
            <div class="main">
                <a href="###"><img src="imgs/nanshijingpin.jpg" alt="" /></a>
            </div>
        </div>
    </div>

    <script>
        // 获取tab栏中l所有的子元素li节点
        let tabList = document.querySelectorAll('.tab > li')
        //获取product中所有类名main
        let product = document.querySelectorAll('.products > .main')

        //为每个tab中的li遍历绑定事件
        for (let i = 0; i < tabList.length; i++) {
            tabList[i].addEventListener('mouseenter', function () {
                //排他思想将tab栏中有active类名移除actuve类名
                document.querySelector('.tab > .active').classList.remove('active')
                //为当前的tab标签添加active类名
                this.classList.add("active")
                //迭代遍历获取
                document.querySelector('.products > .active').classList.remove('active')
                // console.log(product[i])
                product[i].classList.add('active')
            })
        }
    </script>
</body>

</html>

节点操作

节点关系

  1. 父节点
  2. 子节点
  3. 兄弟节点

节点查找

  1. 元素.parentNode
  2. 元素.childNodes 查找所有子节点，包含元素、文本、注释......
  3. 元素.children 只查找元素节点，不包含文本节点和注释:后期我们只关注元素节点，所以children更常用
  4. 元素.nextElementSibing 下一个兄弟节点
  5. 元素.previousElementSibling 上一个兄弟节点 6.document.createElement('元素标签')创建节点 7.父元素.appentNode('创建节点的变量')添加在子节点后面 8.父元素.insertBefor('创建节点的变量',插入的节点)插入节点 9.cloneNode(布尔值) 可以将指定的元素复制一份 false为浅拷贝只拷贝结构，true深拷贝拷贝结构和内容 10.父节点.removeNode('父节点的子节点')通过父元素删除直接子元素 11.元素.remove()删除元素本身

小案例

发表评论案例.gif

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>微博发布</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .w {
      width: 900px;
      margin: 0 auto;
    }

    .controls textarea {
      width: 878px;
      height: 100px;
      resize: none;
      border-radius: 10px;
      outline: none;
      padding-left: 20px;
      padding-top: 10px;
      font-size: 18px;
    }

    .controls {
      overflow: hidden;
    }

    .controls div {
      float: right;
    }

    .controls div span {
      color: #666;
    }

    .controls div .useCount {
      color: red;
    }

    .controls div button {
      width: 100px;
      outline: none;
      border: none;
      background: rgb(0, 132, 255);
      height: 30px;
      cursor: pointer;
      color: #fff;
      font: bold 14px '宋体';
      transition: all 0.5s;
    }

    .controls div button:hover {
      background: rgb(0, 225, 255);
    }

    .controls div button:disabled {
      background: rgba(0, 225, 255, 0.5);
    }

    .contentList {
      margin-top: 50px;
    }

    .contentList li {
      padding: 20px 0;
      border-bottom: 1px dashed #ccc;
      position: relative;
    }

    .contentList li .info {
      position: relative;
    }

    .contentList li .info span {
      position: absolute;
      top: 15px;
      left: 100px;
      font: bold 16px '宋体';
    }

    .contentList li .info p {
      position: absolute;
      top: 40px;
      left: 100px;
      color: #aaa;
      font-size: 12px;
    }

    .contentList img {
      width: 80px;
      border-radius: 50%;
    }

    .contentList li .content {
      padding-left: 100px;
      color: #666;
      word-break: break-all;
    }

    .contentList li .the_del {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 28px;
      cursor: pointer;
    }
  </style>
  <script src="js/random.js"></script>
</head>

<body>
  <div class="w">
    <!-- 操作的界面 -->
    <div class="controls">
      <img src="./images/9.6/tip.png" alt="" /><br />
      <!-- maxlength 可以用来限制表单输入的内容长度 -->
      <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
      <div>
        <span class="userCount" id="userCount">0</span>
        <span>/</span>
        <span>200</span>
        <button id="send">发布</button>
      </div>
    </div>
    <!-- 微博内容列表 -->
    <div class="contentList">
      <ul id="list">
      </ul>
    </div>
  </div>

  <script>
    // 模拟数据，后期我们需要从这个数组中随机获取一个数据对象，做为发布微博的用户信息进行渲染，但是这个不是关键业务，我也可以固定写死
    let dataArr = [
      { uname: '司马懿', imgSrc: './images/9.5/01.jpg' },
      { uname: '女娲', imgSrc: './images/9.5/02.jpg' },
      { uname: '百里守约', imgSrc: './images/9.5/03.jpg' },
      { uname: '亚瑟', imgSrc: './images/9.5/04.jpg' },
      { uname: '虞姬', imgSrc: './images/9.5/05.jpg' },
      { uname: '张良', imgSrc: './images/9.5/06.jpg' },
      { uname: '安其拉', imgSrc: './images/9.5/07.jpg' },
      { uname: '李白', imgSrc: './images/9.5/08.jpg' },
      { uname: '阿珂', imgSrc: './images/9.5/09.jpg' },
      { uname: '墨子', imgSrc: './images/9.5/10.jpg' },
      { uname: '鲁班', imgSrc: './images/9.5/11.jpg' },
      { uname: '嬴政', imgSrc: './images/9.5/12.jpg' },
      { uname: '孙膑', imgSrc: './images/9.5/13.jpg' },
      { uname: '周瑜', imgSrc: './images/9.5/14.jpg' },
      { uname: '老夫子', imgSrc: './images/9.5/15.jpg' },
      { uname: '狄仁杰', imgSrc: './images/9.5/16.jpg' },
      { uname: '扁鹊', imgSrc: './images/9.5/17.jpg' },
      { uname: '马可波罗', imgSrc: './images/9.5/18.jpg' },
      { uname: '露娜', imgSrc: './images/9.5/19.jpg' },
      { uname: '孙悟空', imgSrc: './images/9.5/20.jpg' },
      { uname: '黄忠', imgSrc: './images/9.5/21.jpg' },
      { uname: '百里玄策', imgSrc: './images/9.5/22.jpg' }
    ]
    //获取元素
    let textareas = document.querySelector('textarea')
    let userCount = document.querySelector('#userCount')
    let sends = document.querySelector('#send')
    let ul = document.querySelector('#list')
    let dels = document.querySelector('.the_del')
    textareas.addEventListener('input', function () {
      userCount.innerText = textareas.value.length
    })
    let time = function () {
      let date = new Date()
      let years = date.getFullYear()
      let months = date.getMonth() + 1
      let days = date.getDay()
      let hours = date.getHours()
      let minutes = date.getMinutes()
      let seconds = date.getSeconds()
      let times = `${years}年${months}月${days}日${hours}:${minutes}:${seconds}`
      return times
    }
    //发送微博
    sends.addEventListener("click", function () {
      // 清空前后端括号
      let trims = textareas.value.trim()
      // console.log(trims.length);
      //判断textarea长度是否为0
      if (trims.length == 0) {
        alert(`请输入内容!`)
      } else {
        //随机数
        let getRandom = parseInt(Math.random() * dataArr.length)
        // 创建节点
        let lis = document.createElement('li')
        //给节点赋值
        let content = textareas.value
        //渲染模板
        lis.innerHTML = `  
          <div class="info">
              <img class="userpic" src="${dataArr[getRandom].imgSrc}" />
              <span class="username">${dataArr[getRandom].uname}</span>
              <p class="send-time">发布于${time()}时间</p>
            </div>
            <div class="content">${content}</div>
            <span class="the_del">X</span>
          `
        // 节点插入
        ul.insertBefore(lis, ul.children[0])
        textareas.value = ""
        userCount.innerText = textareas.value.length
      }
    })
    //删除节点事件委托
    ul.addEventListener('click', function (e) {
      if (e.target.className === "the_del") {
        let flag = confirm(`是否要删除评论`)
        if (flag) {
          e.target.parentNode.remove()
        }

      }

    })

  </script>
</body>

</html>

日期api

实例化日期对象

image.png

image.png

时间戳

方法一；

image.png

方法二:

image.png

方法三:

image.png

时间戳是什么

image.png 应用场景

  1. 倒计时
  2. 验证数据是否被修改
  3. 防止浏览器强制缓存
avatar
文章
阅读
粉丝