20180723

-webkit-overflow-scrolling: touch;    ios 滾動

判斷微信瀏覽器 micromessenger

背景不滾動

    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 不須要設置時間間隔

<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-8

 form表單： application/x-www-form-urlencoded
文件類型： multipart/form-data
最新json： application/json

默認：     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 異步 

/*
 * 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 post

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 

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    // 返回數組對象的索引

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'
}