码迷,mamicode.com
首页 > 其他好文 > 详细

每日思考(2020/03/27)

时间:2020-03-27 00:58:03      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:通过   console   tps   orderby   val   app   利用   roi   text   

题目概览

  • HTML5在移动端如何打开APP
  • 对webp的理解
  • formData主要是用来做什么的?它的操作方法有哪些?
  • js动画和css动画有什么区别?

题目解答

HTML5在移动端如何打开APP

  • Android 是利用 deeplink, iOS 是利用 URL Schemes

  • 用 a 标签

    <a href="yourapp://page/xxx" />
    

对webp的理解

formData主要是用来做什么的?它的操作方法有哪些?

  • 作用:

    • 将form表单元素的name与value进行组合,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率
    • 异步上传文件
  • 创建formData对象

    • 创建一个空对象

      //通过FormData构造函数创建一个空对象
      var formdata=new FormData();
      //可以通过append()方法来追加数据
      formdata.append("name","laotie");
      //通过get方法对值进行读取
      console.log(formdata.get("name"));//laotie
      //通过set方法对值进行设置
      formdata.set("name","laoliu");
      console.log(formdata.get("name"));//laoliu
      
    • 通过表单对formData进行初始化

      <form id="advForm">
          <p>广告名称:<input type="text" name="advName"  value="xixi"></p>
          <p>广告类别:<select name="advType">
              <option value="1">轮播图</option>
              <option value="2">轮播图底部广告</option>
              <option value="3">热门回收广告</option>
              <option value="4">优品精选广告</option>
          </select></p>
          <p><input type="button" id="btn" value="添加"></p>
      </form>
      
      //获得表单按钮元素
      var btn=document.querySelector("#btn");
      //为按钮添加点击事件
      btn.onclick=function(){
          //根据ID获得页面当中的form表单元素
          var form=document.querySelector("#advForm");
          //将获得的表单元素作为参数,对formData进行初始化
          var formdata=new FormData(form);
          //通过get方法获得name为advName元素的value值
          console.log(formdata.get("advName"));//xixi
          //通过get方法获得name为advType元素的value值
          console.log(formdata.get("advType"));//1 
      }
      
  • 操作方法

    • 通过get(key)与getAll(key)来获取相对应的值

      // 获取key为age的第一个值
      formdata.get("age"); 
       // 获取key为age的所有值,返回值为数组类型
      formdata.getAll("age");
      
    • 通过append(key,value)在数据末尾追加数据

      //通过FormData构造函数创建一个空对象
      var formdata=new FormData();
      //通过append()方法在末尾追加key为name值为laoliu的数据
      formdata.append("name","laoliu");
      //通过append()方法在末尾追加key为name值为laoli的数据
      formdata.append("name","laoli");
      //通过append()方法在末尾追加key为name值为laotie的数据
      formdata.append("name","laotie");
      //通过get方法读取key为name的第一个值
      console.log(formdata.get("name"));//laoliu
      //通过getAll方法读取key为name的所有值
      console.log(formdata.getAll("name"));//["laoliu", "laoli", "laotie"]
      
    • 通过set(key, value)来设置修改数据

      //通过FormData构造函数创建一个空对象
      var formdata=new FormData();
      //如果key的值不存在会为数据添加一个key为name值为laoliu的数据
      formdata.set("name","laoli");
      //通过get方法读取key为name的第一个值
      console.log(formdata.get("name"));//laoli
      
      //通过FormData构造函数创建一个空对象
      var formdata=new FormData();
      //通过append()方法在末尾追加key为name值为laoliu的数据
      formdata.append("name","laoliu");
      //通过append()方法在末尾追加key为name值为laoliu2的数据
      formdata.append("name","laoliu2");
      //通过get方法读取key为name的第一个值
      console.log(formdata.get("name"));//laoliu
      //通过getAll方法读取key为name的所有值
      console.log(formdata.getAll("name"));//["laoliu", "laoliu2"]
      
      //将存在的key为name的值修改为laoli
      formdata.set("name","laoli");
      //通过get方法读取key为name的第一个值
      console.log(formdata.get("name"));//laoli
      //通过getAll方法读取key为name的所有值
      console.log(formdata.getAll("name"));//["laoli"]
      
    • 通过has(key)来判断是否存在对应的key值

      //通过FormData构造函数创建一个空对象
      var formdata=new FormData();
      //通过append()方法在末尾追加key为name值为laoliu的数据
      formdata.append("name","laoliu");
      //判断是否包含key为name的数据
      console.log(formdata.has("name"));//true
      //判断是否包含key为age的数据
      console.log(formdata.has("age"));//false
      
    • 通过delete(key)可以删除数据

      //通过FormData构造函数创建一个空对象
      var formdata=new FormData();
      //通过append()方法在末尾追加key为name值为laoliu的数据
      formdata.append("name","laoliu");
      console.log(formdata.get("name"));//laoliu
      //删除key为name的值
      formdata.delete("name");
      console.log(formdata.get("name"));//null
      
  • 通过XMLHttpRequest发送数据

    • 创建表单

      <form id="advForm">
          <p>广告名称:<input type="text" name="advName" value="xixi"></p>
          <p>广告类别:<select name="advType">
              <option value="1">轮播图</option>
              <option value="2">轮播图底部广告</option>
              <option value="3">热门回收广告</option>
              <option value="4">优品精选广告</option>
          </select></p>
          <p>广告图片:<input type="file" name="advPic"></p>
          <p>广告地址:<input type="text" name="advUrl"></p>
          <p>广告排序:<input type="text" name="orderBy"></p>
          <p><input type="button" id="btn" value="添加"></p>
      </form>
      
    • 发送数据:

      var btn=document.querySelector("#btn");
      btn.onclick=function(){
          var formdata=new FormData(document.getElementById("advForm"));
          var xhr=new XMLHttpRequest();
          xhr.open("post","http://127.0.0.1/adv");
          xhr.send(formdata);
          xhr.onload=function(){
              if(xhr.status==200){
                  //...
              }
          }
      }
      

js动画和css动画有什么区别?

  • 代码复杂度方面,简单动画,css 代码实现会简单一些,js 复杂一些。复杂动画的话,css 代码就会变得冗长,js实现起来更优。
  • 动画运行时,对动画的控制程度上,js 比较灵活,能控制动画暂停,取消,终止等,css动画不能添加事件,只能设置固定节点进行什么样的过渡动画。
  • 兼容方面,css 有浏览器兼容问题,js 大多情况下是没有的。
  • 性能方面,css动画相对于优一些,css 动画通过GUI解析,js 动画需要经过j s 引擎代码解析,然后再进行 GUI 解析渲染

每日思考(2020/03/27)

标签:通过   console   tps   orderby   val   app   利用   roi   text   

原文地址:https://www.cnblogs.com/EricZLin/p/12578659.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!