day-030-thirty-20230318-交叉信息监听事件IntersectionObserver-AJAX基础-瀑布流

交叉信息监听事件IntersectionObserver

• IntersectionObserver：监听器，监控盒子在视口中出现的交叉信息

  • 语法: IntersectionObserver(函数,对象)

    • 入参

      • 函数 (changes)=>{}
        • 有参数 changes
          • changes—是一个数组
          • changes[0]—对象，box的交叉信息
            • isIntersecting: 元素是否在视口中出现 true 出现 false 未出现
            • target: 监控的目标元素
            • boundingClientRect:元素的某些信息
      • 对象 {threshold:[]} 省略时默认值为{threshold:[0]} 用来控制元素与视口的交叉监听情况
        • 用于控制监听对象与视口交叉程度，才触发的事件
        • 触发情况举例

          • 触发情况(0)

            1. 一打开页面立刻触发一次
            2. 元素在视口中出现一个边，触发一次
            3. 元素在视口中完全消失，触发一次。
            4. 之后2与3根据情况出现

          • 触发情况(0.5)

            1. 一打开页面立刻触发一次
            2. 元素在视口中出现一半，触发一次
            3. 元素在视口中消失一半，触发一次。
            4. 之后2与3根据情况出现

          • 触发情况(1)

            1. 一打开页面立刻触发一次
            2. 元素在视口中完全出现，触发一次
            3. 元素在视口中消失一个边，触发一次。
            4. 之后2与3根据情况出现

    • 出参

      • 一个监听器对象

        • 监听器对象.observe(DOM元素对象)//启动监听对应的DOM元素对象

        • 监听器对象.unobserve(changes[下标].target)//取消监控changes[下标].target对应的DOM元素对象

  • IntersectionObserver配合图片懒加载

AJAX基础

• ajax是一个前后端进行数据交互的协议格式

  • json格式的数据 —> 也是后台的数据格式

• 通过ajax ->获取json格式的数据

  • 一般只能通过ajax才能将json数据获取到页面中

• json格式数据

  • 最外层 可以是数组，对象(键值对—key必须加双引号)

    • 也可以用基础数据类型

      [1,"str",true,null,{  "name": "lili",  "age": 18},[]]
      

      {"name":"lili","age":18,"arr":[{"a":10},{"a":20}]
      }
      

    • 也可以用基础数据类型

  • 数据类型 数组，对象，数值，布尔值，字符串，null

    • 字符串必须用双引号

  • json格式数据使用//或或/**/进行注释

    • 但可以用无用属性名间接进行注释

  • 通过ajax拿到的json本身就是字符串

    • 只不过可以通过一些方法将json字符串变成json对象
      • json对象是一个普通对象的一个子集
        • 所以json对象可以看作是普通对象，它内部的数据都可以通过普通对象的方法来获取
    • JSON.parse(json字符串) 将json字符串变成json对象
    • JSON.stringify(json对象)

• ajax的步骤

  • 得要用到Open with Live Server，而不是Open In Default Browser

    • 因为Open with Live Server是本地创建一个小型服务器
      • 数据协议为http://
        • http://127.0.0.1:5500/JS部分/day0318/ajax.html
    • Open In Default Browser是直接本地打开html文件
      • 数据协议为http://
        • file:///C:/Users/fangc/Desktop/myWork/2023_01/JS部分/day0318/ajax.html

  • 操作步骤

    1. 创建XMLHttpRequest核心对象
       • let xhr = new XMLHttpRequest();
    2. 建立连接
       • XMLHttpRequest核心对象.open(建立连接的方式，请求路径，是否同步异步)
         • 例子
           • xhr.open("GET", "./fang.json", false);
         • 请求路径是以引用该js代码的html文档的所在目录为当前路径来进行相对查找的。
         • 是否同步异步里false为同步
    3. 注册监听
    4. 发送数据

  • 例子

ES6基础

• 箭头函数

  • 简写

    var f1 = function (a) {return a + 1;
    }; //正常函数
    var f2 = (a) => {return a + 1;
    }; //只有一个入参
    var f3 = (a) => a + 1; //函数体内只有一条return语句
    var f4 = (a) => a + 1; // 只有一个入参 并且 函数体内只有一条return语句
    

  • 不能使用arguments

    • 用剩余运算符代替

• 剩余运算符与展开运算符

  • 剩余运算 将零散内容，放到一块

    //剩余运算，将零散内容，放到一块
    var show = (...args) => {console.log(args); //[1,2,3,4]
    };
    show(1, 2, 3, 4);
    

  • 展开运算 将一个整体，变成单独个体

    //展开运算 将一个整体，变成单独个体
    var arr = [1, 2, 3, 4];
    console.log(...arr); //1 2 3 4//相当于console.log(1, 2, 3, 4);
    

• 字符串模板

  • 符号为反引号

    • 可以换行
    • 可以加变量
    • 可以加运算表达式
    • 可以用三元运算符

    //es6字符串模板
    var name="丽丽",age=18;
    var str="我叫"+name+",今年"+18+"岁,
    11
    222
    3333
    ";
    console.log(str);var name="丽丽",age=18;
    var str=`我叫${name},今年${age+1}岁,${age>=18?"成年":"未成年"}
    可以换行
    222
    3333
    `;
    console.log(str);
    

• 解构赋值

  • 左右格式必须一样

    • 左边是对象，右边也是对象
    • 左边是数组，那右边也要为数组

  • 左边没对应右边的，则左边的变量对应的变量值为undefined

    • 左边变量名可以等号赋值默认值

      • 只有右边属性值为undefined时才会使用默认值

    • 左边可以通过冒号:来取别名

      //解构赋值 （对象，数组）
      var obj={name:"lili",Compotedage:18,job1:null,job4:undefined,
      }
      var {name = "Tom",//只有右边属性值为undefined时才会使用默认值Compotedage: age, // 可以通过 : 取别名job1 = "ceo",// 可以通过 等号 赋值默认值job2,//没有的解构出来为undefinedjob3 = "job3",job4 = "job4",//赋值默认值(undefined)
      } = obj; //左右格式必须一样,左右都为对象
      console.log(name, age, job1, job2, job3, job4);
      

  • 一般用来解构对象与数组

    //数组
    var arr=[10,20,30,49,46];
    var [a,b,c,d,e]=arr;
    console.log(a,e);//10,46
    

  • 也可以用来进行交换赋值

    //交换 a和b 的值
    // var a=10;
    // var b=20;
    // var c;
    // c=b;
    // b=a;
    // a=c;
    // console.log(a,b)var a=10;
    var b=20;
    [a,b]=[b,a];
    console.log(a,b);//20,10
    

瀑布流

• 与后端数据交互

  • 客户端通过ajax发送到服务器得到json字符串数据
  • 通过JSON.parse()把得到的json字符串数据转成json对象

• 得到json对象数据后，循环插入html中

  • 根据观察，发现数据，不适合直接渲染;修改数据

  • 对数据进行分组，根据图片大小依次反向插入对应列中

    var data=null;//存储未来获取的数据
    //注意，获取的cloumns是类数组，无法使用sort
    //******将类数组，转换为数组的方法 Array.from(类数组)
    var cloumns=Array.from(document.querySelectorAll(".cloumn"));//获取三列//1. 获取数据
    function getData(){var xhr=new XMLHttpRequest;//文件路径，以html为基准找xhr.open("GET","data.json",false);xhr.onreadystatechange=function(){if(xhr.readyState===4&&xhr.status===200){data=JSON.parse(xhr.response)}}xhr.send();
    }
    getData()//2.循环渲染
    function render(){//2.1根据观察，发现数据，不适合直接渲染 数据图片宽度300,样式图片宽度240//修改数据var newData=data.map(item=>{//拿出每条数据的 height(433)和width(300)let {width:w,height:h}=item;item.width=240;//将240重新覆盖原来的widthitem.height=240*h/w;//重新覆盖原来的heightreturn item;//返回覆盖原来的每一项})var groups=[];for(var i=0;i//i=0, i=3, i=6//i=0  slice(i,i+3)  slice(0,3)  [0,1,2]//i=3  slice(i,i+3)  slice(3,6)  [3,4,5]//i=6  slice(i,i+3)  slice(6,9)  [6,7,8]groups=newData.slice(i,i+3);//console.log(groups);//[0,1,2]  [3,4,5]  [6,7,8]//每一组数据，从大到小排序（按照高度)groups.sort((a,b)=>{return b.height-a.height})//检查一下，每组数据的高度，是否是由大到小//console.log(groups);//按照每列的高度，排序 小中大cloumns.sort((a,b)=>{return a.offsetHeight-b.offsetHeight})//检查一下，每列数据的高度，是否是 小中大//console.log(cloumns);//groups: [大 中 小]//cloumns:[小 中 大]//已经排好顺序，只需要按照索引下标插入就可以groups.forEach((item,index) => {let {id,pic,title,link,height,width}=item;let str=`
    id}">link}"> 
    height}px;width:${width}px">pic}" style="height:${height}px;width:${width}px">
    ${title} 
    `;cloumns[index].innerHTML+=str;});}}
    render()
    

循环插入html

进阶参考