20180723

时间 2019-11-22

原文原文链接

-webkit-overflow-scrolling: touch; ios 滚动css

判断微信浏览器 micromessengerhtml

背景不滚动前端

    watch: {
      picker3(){
        if(this.picker3){
          document.querySelector('body').style.position='fixed'
          document.querySelector('body').style.width='100%'
        }else{
          document.querySelector('body').style.position='initial'
          document.querySelector('body').style.width='auto'
        }
      }
    },

requestAnimationFrame 替换setTimeout 不须要设置时间间隔node

<div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div>
<button id="btn">run</button>
<script>
var timer;
btn.onclick = function(){
    myDiv.style.width = '0';
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn(){
        if(parseInt(myDiv.style.width) < 500){
            myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
            myDiv.innerHTML =     parseInt(myDiv.style.width)/5 + '%';
            timer = requestAnimationFrame(fn);
        }else{
            cancelAnimationFrame(timer);
        }    
    });
}
</script>

默认 Content-Type: text/plain;charset=UTF-8jquery

form表单： application/x-www-form-urlencoded
文件类型： multipart/form-data
最新json： application/jsonios

默认：     application/x-www-form-urlencoded
文件类型： multipart/form-data
最新json： application/json
当action为post时候，浏览器把form数据封装到http body中，而后发送到server。 若是没有type=file的控件，用默认的application/x-www-form-urlencoded就能够了。 可是若是有type=file的话，就要用到multipart/form-data了。

application/x-www-form-urlencoded方式是Jquery的Ajax请求默认方式，这种方式的好处就是浏览器都支持，在请求发送过程当中会对数据进行序列化处理，以键值对形式？key1=value1&key2=value2的方式发送到服务器，若是用Jquery，它内部已经进行了处理，若是本身写原生的Ajax请求，就须要本身对数据进行序列化。 
application/json，随着json规范的愈来愈流行，而且浏览器支持程度原来越好，许多开发人员易application/json做为请求content-type，告诉服务器请求的主题内容是json格式的字符串，服务器端会对json字符串进行解析，这种方式的好处就是前端人员不须要关心数据结构的复杂度，只要是标准的json格式就能提交成功，application/json数据格式愈来愈获得开发人员的青睐。

当以application/json的content-type传送数据，被传送的对象只需被json序列化。当以application/x-www-form-urlencoded的方式传送数据。请求的内容须要以..=..&..=..的格式提交，在请求体内内容将会以”&”和“ = ”进行拆分。

View Code

原生 ajax post 异步 es6

/*
 * obj: 接口参数对象
 * obj={
      AppId: "",                           
      UserId: "",     
    }
 * */
function ajax (obj) {
  let URL=''
  let xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
      // 请求成功
      console.log(xmlhttp.responseText);
    }
  }
  xmlhttp.open("post", URL+ 'api/xxx', true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  // 设置请求头
  xmlhttp.send("res=" + JSON.stringify(obj));
}

View Code

jq.ajax postweb

test2 () {
        let obj = {
          AppId: "",
          UserId: ""
        }
        $.ajax({
          type: 'post',
          url: 'xxx',
          data: {
            res: JSON.stringify(obj)
          },
          contentType: "application/x-www-form-urlencoded",
          success: function (res) {
            console.log(res);
          },
          failure: function (err) {
            console.log(err);
          }
        })
      },

View Code

axios ajax

export function test3 (obj) {
  axios({
    method: 'post',
    url: URL + 'xxx',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: qs.stringify({res: JSON.stringify(obj)}),
    timeout: TIMEOUT,
  }).then((res) => {
    console.log(res.data);
  }).catch()
}

View Code

es6 findIndex // 返回数组对象的索引npm

find // 返回对象

filter // 返回数组对象

test(){
        let obj =[
          {name:'kang',id:'aaa'},
          {name:'jia',id:'bbb'},
          {name:'wo',id:'ccc'},
        ]
        let id = 'bbb'
        // findIndex 返回索引
        let res = obj.findIndex(res=>{
          return res.id===id
        })
        // find 返回对象
        let arr = obj.find(res=>{
          return res.id===id
        })
        // filter 返回数组对象
        let arr2 = obj.filter(res=>{
          return res.id===id
        })
        console.log(res);
        console.log(arr);
        console.log(arr2);
      },

exif.js  ios 拍照图片旋转问题
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

ajax option请求

ajax  option 请求
    预请求：preflighted request在发送真正的请求前, 会先发送一个方法为OPTIONS，用于试探服务端是否能接受真正的请求，
    若是options得到的回应是拒绝性质的，好比404\403\500等http状态，就会中止post、put等请求的发出。
    
什么状况下请求会变成preflighted request？
    一、请求方法不是GET/HEAD/POST
    二、POST请求的Content-Type并不是application/x-www-form-urlencoded, multipart/form-data, 或text/plain
    3、请求设置了自定义的header字段
    
实践版：直接请求
    nodejs post请求默认  Content-Type: application/json; charset=utf-8
    .net 分享积分计算    设置 Content-Type为 application/x-www-form-urlencoded

flex布局，overflow-x:auto 超出滚动

<template>
    <div style="display:flex;overflow-x: auto;">
      <div>
        <div class="aa">弹性布局加个div就能够超出滚动。。。外面套一层就能够指定宽度，而不被flex压缩</div>
      </div>
      <div>
        <div class="aa">dddd</div>
      </div>
      <div>
        <div class="aa">dddd</div>
      </div>
      <div>
        <div class="aa">dddd</div>
      </div>
    </div>
</template>
<style lang="less" scoped>
  .aa {
    width: 200px;
    height: 200px;
    background: red;
    margin-right: 10px;
  }
</style>

背景属性

bgCanvas.style.backgroundImage = "url(" + this.previewImg + ")"
background-size: cover;  宽度100% 高度可能超出背景区域显示不了
background-size: contain;  高度100%  宽度可能不够

监听页面隐藏， 切换选项卡 或者小化
document.addEventListener("visibilitychange", function() {
  console.log( document.hidden );
  // Modify behavior...
});

md5

npm js-md5 
https://www.npmjs.com/package/js-md5

引jq 把jq.js 放项目中

import $ from '../../static/jquery.min'

无缝轮播移动子元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>111</title>
</head>
<body>
<style>
  ul {
    height: 30px;
    overflow: hidden;
  }

  li {
    line-height: 30px;
    list-style: none;
  }
</style>
<ul></ul>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>

  let arr = [1, 2, 3, 4, 5, 6, 7, 8]
  init(arr)

  function init (arr) {
    // 显示数据
    arr.forEach(val => {
      $('ul').append('<li>' + val + '</li>')
    })
  }

  function move (arr) {
    let val = 0
    let $li = $('ul li')
    let height = $li.height()
    let interval = setInterval(() => {
      val = val - 2
      $li.eq(0).css('marginTop', val)  // 第一行往上移
      if (val === -height) {
        let value = arr.shift()
        arr.push(value)           // 更新数组
        $li.eq(0).remove() // 删除第一个      // 删除第一行
        $('ul').append('<li>' + value + '</li>')    // 追加最后一行
        window.clearInterval(interval)
      }
    }, 20)
  }
  let timer = null;
  timer=setInterval(() => {
    move(arr)
  }, 3000)

  // 若是
  /**
   * 完美解决setInterval在浏览器切换时加速的问题
   * https://juejin.im/post/5b30a4a451882574ba421b68
   * 只要页面发生变化，无论是切换到其余的页面仍是把浏览器缩小，会触发
   * document.onvisibilitychange 事件，
   * document.hidden
        这个是指当页面不是当前页面时为true，不然为false
   */
  document.onvisibilitychange=function(){
    if(document.hidden){
      window.clearInterval(timer)
    }else{
      timer=setInterval(()=>{
        move(arr)
      },3000)
    }
    console.log("hidden"+":"+document.hidden);
    console.log("visibilityState"+":"+document.visibilityState);
  }


</script>
</body>
</html>

View Code

总体弹性布局

<div ref="flexBody" class="flex-style">
    <div>   把其余内容都用div包起来
        <div>...</div>
        <div>...</div>
        <div>...</div>
        <div>...</div>
        <div>...</div>
   </div>
   <div  class="flex-content">这是弹性布局</div>
   <div>底部tabBar等</div>
</div>
// 总体弹性布局（上中下布局）
.flex-style {
  display: flex;
  flex-direction: column;
  .flex-content {
    flex: 1;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; // 滚动不卡
  }
}
function flexHeight () {
  let clientHeight2 = document.documentElement.clientHeight
  this.$refs.flexBody.style.height = clientHeight2 + 'px'
}