前端踩过的坑

数组中为对象的去重—reduce

数组中为对象的情况下,set方法不可用
需要使用reduce方法

 let person = [
     {id: 0, name: "小明"},
     {id: 1, name: "小张"},
     {id: 2, name: "小李"},
     {id: 3, name: "小孙"},
     {id: 1, name: "小周"},
     {id: 2, name: "小陈"},   
];

let obj = {};

person = person.reduce((cur,next) => {
  obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
   return cur;
},[]) //设置cur默认类型为数组，并且初始值为空的数组
console.log(person);

打印person后，我们就可以得到去重后的数组。

当然， redecu()除了累加和去重外，功能还有很多，比如可以扁平化多维数组——

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
    return a.concat(b);
}, []); // [0,1,2,3,4,5]

reduce 扁平化数组

扁平化多维数组—

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
    return a.concat(b);
}, []); // [0,1,2,3,4,5]

chrome允许跨域

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security  --user-data-dir=/Users/smzdm/MyChromeDevUserData/

chrome移动端调试

chrome地址：chrome://inspect/#devices
需要翻墙
需安装

brew cask install android-platform-tools

允许跨域设置

$.ajax({
    url: '',
    type: 'GET',
    data:{timesort: new Date().getTime()},
    dataType: 'json',
     // 设置允许跨域
    xhrFields: {
        withCredentials: true
    },
    crossDomain: true,
     success: function (res) {
     }
     });

textarea多行文本placeholder问题

问题描述

多行文本框，输入文字之前展示placeholder，输入文字，placeholder消失，再删除输入的文字，placeholder展示不全（placeholder不折行显示）

解决方案

使用watch监听

<textarea :placeholder="placeholderTxt" class="reason-text"  v-model="reasonTxt" id="J_input_url"></textarea>

采用深度监听（正常监听也是可以的）

watch: {
'reasonTxt': {
      handler (newV) {
      	if (!newV) {
              this.$nextTick(() => {
                 this.placeholderTxt = '很多很多很多很多字';
              });
          } else {
              this.placeholderTxt = '';
          }
      },
      deep: true
  }
}

textarea 文本框光标错位问题

问题描述

文本框中，输入多行文本，出现滚动条，滑动文本区域，光标位置错位（未固定在末尾，随手指滑动固定在错误位置）

解决方案

参照各中app中多文本输入框，发现，只要滑动文本区域，便不再出现光标，并且收起键盘，因此使用该方法，收起键盘，让光标消失。

// 光标错位问题
document.getElementById('J_input_url').addEventListener('touchmove', () => {
	document.getElementById('J_input_url').blur();
        });

去掉a标签点击之后的白色阴影

-webkit-tap-highlight-color: transparent;

监听video的播放状态

$('.video').on('play', function(){
   console.log('在播放～');
});

//  视频播放
video.play();
// 视频停止播放
video.pasue();

暂停轮播

    window.onload = function () {

    //引入css
        var head = document.getElementsByTagName('head')[0];
        var link = document.createElement('link');
        link.href = 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.4/css/swiper.min.css';
        link.rel = 'stylesheet';
        link.type = 'text/css';
        head.appendChild(link);
        var mySwiper = new Swiper('.swiper-container',{
            loop: true,
            autoplay: 5000, 
            autoplayDisableOnInteraction : true,
        });
       
       // 点击播放视频,停止轮播
        $("video").on("play",function(){
            // alert("段落被点击了
            console.log(this);
            mySwiper.stopAutoplay();
        }); 
    }

上拉加载

<div class="list-content">
	<ul
	    v-infinite-scroll="getData"
	    infinite-scroll-disabled="loading"
	    infinite-scroll-distance="50" >
	    <li  v-for="(item, index) in listData" :key="index" :id="item.id">
	        <div class="box">
	            <div class="top">
	                <a :href="item.url"><img :src="item.avatar" alt="" class="au-img"></a>
                    <a :href="item.url"><span class="nickname">{{item.nickname}}</span></a>
                    <img class="level-img" :src="item.official_auth_icon" alt="" v-if="item.official_auth_icon">
                    <span class="cricle" v-if='item.followed !==3'></span>
                    <span class="focus" @click="focusUser(item.followed, item.user_smzdm_id, index, $event)">{{item.followed === 1 ? '关注' : item.followed === 0 ? '已关注' : ''}}</span>
             </div>
              <div class="block">
                  <div class="comment_avatar_time">
                      <span class="start" v-for='(element, i) in starList' :key='i'>
                      <template v-if='i < item.star'>
                          <i class="red icon-star"></i>
                      </template>
                      <template v-else>
                           <i class="gray icon-star"></i>
                      </template>
                   </span>
        <span class="date">使用{{item.used_time}}</span>
		</div>
        <div class="description">
        <a :href="item.dianping_url"class="content-detail">{{item.content}}</a>
          <span class="more-txt" @click="more">展开</span>
          <span class="close-more" @click="close">收起</span> 
      </div>
     <div class="pictures" v-if="item.pic_list">
             <ul class="pic-list">
              <li v-for="(i, m) in item.pic_list" :key="m">
              <a href="javascript:;"><img :src="i" alt="" @click="checkImg(item.pic_list_big[m], m, item.pic_list_big)"></a>
          </li>
		</ul>
       <div class="clear"></div>
	</div>
</div>
         </div>
     </div>
 </li>
</ul>
   <div v-if="!allLoaded && loading" class="loading"><img src="/loading.gif"></div>
   <div class="nomore" v-if="nomore">没有了哦</div>
</div>

import { InfiniteScroll } from 'mint-ui';
Vue.use(InfiniteScroll);

import AlloyFinger from 'alloyfinger';
mounted () {
    // 手势库
    this.AlloyFinger();
},
methods: {
	AlloyFinger () {
	  const that = this;
	  return new AlloyFinger(document.getElementsByTagName('body')[0], {
	      swipe: function (evt) {
	          if (evt.direction === 'Up' && that.allLoaded) {
	              that.nomore = true;
	          }
	      }
	  });
	},
	        // 获取url的value值
        queryLinkParams (param) {
            let reg = new RegExp('(^|&)' + param + '=([^&]*)(&|$)', 'i');
            let search = window.location.search.substr(1).match(reg);
            if (search !== null) {
                return unescape(search[2]);
            }
            return null;
        },
// 数据请求
getData () {
  this.loading = true;
  var listUrl = 'https:.......';
  axios.get(listUrl, {
      params: {
          limit: this.limit,
          timesort: this.time_sort
      }
  }).then(res => {
      if (res.data.error_code === 0) {
          console.log('resssssss', res.data);
          this.list = res.data.data;
          if (this.list.rows && this.list.rows.length) {
              this.listData = this.listData.concat(this.list.rows);
              this.loading = false;
              // 展开收起
              this.$nextTick(() => {
                  let contentDom = document.querySelectorAll('.content-detail');
                  contentDom = [...contentDom];
                  console.log(contentDom);
                  contentDom.forEach((item, index) => {
                      let height = item.offsetHeight;
                      if (height > 92) {
                          this.addClass(item.parentNode, 'list-more');
                      }
                  });
                  let contentId = this.queryLinkParams('content_id');
                  if (contentId) {
                      document.getElementById(contentId).scrollIntoView();
                  }
              });
    this.time_sort = this.listData[this.listData.length - 1].timesort;
          } else {
              this.loading = true;
              this.allLoaded = true;
              this.nomore = true;
          }
      }
  }).catch(function (error) {
      console.log(error);
    });
}
}

url链接中获取参数

arrToQueryString (arr) {
     arr.forEach((item, index) => {
         this.queryParam = this.queryParam + Object.keys(item).map(function (key) {
             let trueKey = 'keywords[' + index + '][' + key + ']';
             return ''.concat(encodeURIComponent(trueKey), '=').concat(encodeURIComponent(item[key])) + '&';
         }).join('');
     });
     return this.queryParam;
 },

使用

let param = this.queryLinkParams('id');

在线生成md5

http://tool.zhengxianjun.com/file-hash

chrome 插件

二维码(QR码)生成器(QR Code Generator)

字符串中插入字符

/*
* start: 插入的位置
* str: 插入的字符串
* usage: let newStr = '202001'.splice(4, '-');
*/
String.prototype.splice = function (start, str) {
    str = str + '';
    return this.slice(0, +start) + str + this.slice(+start);
};