前端经常使用代码片断(五)

时间  2019-11-06
标签 前端 经常 使用 代码 片断 繁體版
原文   原文链接

前端经常使用代码片断(一) 点这里
前端经常使用代码片断(二) 点这里
前端经常使用代码片断(三) 点这里
前端经常使用代码片断(四) 点这里css

1.tap事件点透问题？

问题点击穿透问题：点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件前端

zepto的tap事件是绑定到document的，因此通常点击tap事件都会冒泡到document才会触发。当点击隐藏蒙层的时候默认也会手指触发到蒙层下面的元素 执行事件node

1. github上有个fastclick插件，用来规避click事件的延时执行

2. 用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()

//tap事件出现点透问题
$("#id").on("tap", function (event) {
    //不少处理好比隐藏什么的
    event.preventDefault();
});

//touchend事件解决点头问题
$("#id").on("touchend", function (event) {
    //不少处理好比隐藏什么的
    event.preventDefault();
});

3:给tap事件里面的隐藏蒙层方法执行的方法300毫秒延迟

$("#id").on('tap',function(ev){
    setTimeout(function(){
        $("#id").hide();
    },320)
})

2.固定定位布局 键盘挡住输入框内容？

1.经过绑定窗口改变事件,监听键盘的弹出。

而后去改变固定定位元素的位置。默认键盘的宽度应该是页面的2分之一。因此咱们位移的距离改为键盘的二分之一就能够git

window.onresize = function(){
    //$(".mian")就是固定定位的元素
    if($(".mian").css('top').replace('px','') != 0){
        $(".mian").css('top',0);
    }else{
        var winHeight = $(window).height();
        $(".mian").css('top',-(winHeight/4));
    }
}

2.经过定时器实时监听是否触发input。

若是触发input框 就把固定定位，改变成静态定位。这样就会浏览器会总动把内容顶上去。es6

function fixedWatch(el) {
    //activeElement 获取焦点元素
    if(document.activeElement.nodeName == 'INPUT') {
        el.css('position', 'static');
    } else {
        el.css('position', 'fixed');
    }
}

setInterval(function() {
    fixedWatch($('.mian'));
}, 500);

3.去掉字符左右空格

export const trimLeOrRi=(str)=>{
   //删除左右两端的空格  
   return str.replace(/(^\s*)|(\s*$)/g, ""); 
}

4.经过JS判断一个数组

4.1 instanceof方法

instanceof 运算符是用来测试一个对象是否在其原型链原型构造函数的属性github

var arr = []; 
arr instanceof Array; // true

4.2.constructor方法

constructor属性返回对建立此对象的数组函数的引用，就是返回对象相对应的构造函数面试

var arr = []; 
arr.constructor == Array; //true

4.3.toString.call

这种写法，是 jQuery 正在使用的segmentfault

Object.prototype.toString.call(obj).slice(8,-1) == Array

4.4.ES5新增方法isArray()

var a = new Array(123);
var b = new Date();
console.log(Array.isArray(a)); //true
console.log(Array.isArray(b)); //false

字符串也是有length属性的api

咱们知道全部的Array都是有length属性的，就算是空数组，那么length 为0，那么字符串有没有呢？接下来咱们来验证一下。数组

var str="sdfsd5565s6dfsd65sd6+d5fd5";
console.log(str.length)      // 26

结果是有的，因此咱们在判断类型时，不能单纯拿有没有length属性来判断是否是数组了，咱们能够用下面的方法来判断是不是数组：

var obj=[1,2] ;
console.log(toString.call(obj) === '[object Array]');

5. 删除数组尾部元素

一个简单的用来清空或则删除数组尾部元素的简单方法就是改变数组的length属性值。

const arr = [11, 22, 33, 44, 55, 66];
// truncanting
arr.length = 3;
console.log(arr); //=> [11, 22, 33]
// clearing
arr.length = 0;
console.log(arr); //=> []
console.log(arr[2]); //=> undefined

6.使用对象解构来处理数组

可使用对象解构的语法来获取数组的元素：

const csvFileLine = '1997,John Doe,US,john@doe.com,New York';
const { 2: country, 4: state } = csvFileLine.split(',');

7.在switch语句中用范围值

可使用下面的技巧来写知足范围值的switch语句：

//不推荐使用，只开阔眼界
function getWaterState(tempInCelsius) {
  let state;
  
  switch (true) {
    case (tempInCelsius <= 0): 
      state = 'Solid';
      break;
    case (tempInCelsius > 0 && tempInCelsius < 100): 
      state = 'Liquid';
      break;
    default: 
      state = 'Gas';
  }
  return state;
}
//推荐
function getWaterState2(tempInCelsius) {
  if (tempInCelsius <= 0) {
    return 'Solid';
  }
  if (tempInCelsius < 100) {
    return 'Liquid';
  }
  return 'Gas';
}

8.平铺多维数组

方法1：es6
使用Spread操做，能够很容易去平铺嵌套多维数组：

const arr = [11, [22, 33], [44, 55], 66];
const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]
惋惜，上面的方法仅仅适用于二维数组。不过，经过递归，咱们能够平铺任意维度的嵌套数组。

unction flattenArray(arr) {
  const flattened = [].concat(...arr);
  return flattened.some(item => Array.isArray(item)) ? 
    flattenArray(flattened) : flattened;
}

const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
const flatArr = flattenArray(arr); 
//=> [11, 22, 33, 44, 55, 66, 77, 88, 99]

方法2：递归

function flatten(arr){
  var res = [];
  for(var i=0;i<arr.length;i++){
    if(Array.isArray(arr[i])){
      res = res.concat(flatten(arr[i]));
    }else{
      res.push(arr[i]);
    }
  }
  return res;
}

方法3：reduce

function flatten(arr){
  return arr.reduce(function(prev,item){
    return prev.concat(Array.isArray(item)?flatten(item):item);
  },[]);
}

本节参考文章：5分钟掌握JavaScript小技巧

9.若是数组列表太大，如下递归代码将致使堆栈溢出。你如何解决这个问题，仍然保留递归模式？

var list = readHugeList();

var nextListItem = function() {
    var item = list.pop();

    if (item) {
        // process the list item...
        nextListItem();
    }
};

经过修改nextListItem函数能够避免潜在的堆栈溢出，以下所示：

var list = readHugeList();

var nextListItem = function() {
    var item = list.pop();

    if (item) {
        // process the list item...
        setTimeout( nextListItem, 0);
    }
};

堆栈溢出被消除，由于事件循环处理递归，而不是调用堆栈。当nextListItem运行时，若是item不为null，则将超时函数（nextListItem）推送到事件队列，而且函数退出，从而使调用堆栈清零。当事件队列运行超时事件时，将处理下一个项目，并设置一个计时器以再次调用nextListItem。所以，该方法从头至尾不通过直接递归调用便可处理，所以调用堆栈保持清晰，不管迭代次数如何。

10.10!

function f(n){
    return (n > 1) ? n * f(n-1) : n
}

11.移动端底部input被弹出的键盘遮挡

Element.scrollIntoView():方法让当前的元素滚动到浏览器窗口的可视区域内。

document.querySelector('#inputId').scrollIntoView();
//只要在input的点击事件，或者获取焦点的事件中，加入这个api就行了

这个api还能够设置对齐方法，选择将input放在屏幕的上方/下方，相似的api还有: Element.scrollIntoViewIfNeeded()，这两个是解决同一个问题的，选择一个用就能够了。

window.addEventListener('resize', function() {
  if(
    document.activeElement.tagName === 'INPUT' ||
    document.activeElement.tagName === 'TEXTAREA'
  ) {
    window.setTimeout(function() {
      if('scrollIntoView' in document.activeElement) {
        document.activeElement.scrollIntoView();
      } else {
        document.activeElement.scrollIntoViewIfNeeded();
      }
    }, 0);
  }
});

本节参考文章：关于input的一些问题解决方法分享及评论

12.控制input显/隐密码

这个就很简单了，只需更改input的type属性值就能够了。能够看一下codepen的demo

//点击函数，获取dom，判断更改属性。
show(){
    let input=document.getElementById("inputId");  
    if(input.type=="password"){ 
      input.type='text';
    }else{
      input.type='password';
    } 
}

本节参考文章：关于input的一些问题解决方法分享

13.input多行输入显示换行

在使用textarea标签输入多行文本的时候，若是没有对多行文本显示处理，会致使没有换行的状况,若是用户须要换行...

解决方法：
只要在显示内容的地方将该属性设置为 white-space: pre-line 或者 white-space:pre-wrap，多行文本就能够换行了。

备注：white-space 属性用于设置如何处理元素内的空白，其中包括空白符和换行符。

clipboard.png

14.输入框首尾清除空格-trim()

输入框清除首尾空格是input较为常见的需求，一般在上传的时候将首尾空格去除掉。

原生清除方法:

//原生方法获取值，清除首尾空格返回一个新的字符串
var str2 = document.getElementById("inputId").trim();

Vue清除方法：

<input v-model.trim="msg">

15.在input中监听键盘事件

在用户登陆或者搜索框的时候，通常都会监听键盘事件绑定回车按键，来执行登陆/搜索 等操做。

原生绑定:

<input onkeydown="keydownMsg(event)" type="text" />
function keydownMsg(key) {
    keyCode = key.keyCode; //获取按键代码
    if (keyCode == 13) {  //判断按下的是否为回车键
        // 在input上监听到回车 do something
    }
}

Vue按键修饰符
Vue为监听键盘事件，提供了按键修饰符，而且为经常使用的按键提供了别名，使用方法以下:当回车按键在input中被按下的时候，会触发里面的函数。

<input @keyup.enter="enterActive">

16.元素滚动到浏览器窗口的可视区域

Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。
Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但若是该元素已经在浏览器窗口的可见区域内，则不会发生滚动。

于是再有什么回到顶部、去到置顶位置和键盘弹出挡住输入框之类的需求，均可以简单解决了。

scrollIntoView

scrollIntoView只接受一个参数，但接受两种类型的参数，分别是Boolean型参数和Object型参数。

  • 先说Boolean型参数，参数可使true和false。若是为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。若为false，元素的底端将和其所在滚动区的可视区域的底端对齐。

    <body>
    <div class="chunk"></div>
    <div class="btn-top">up</div>
    <div class="btn-bottom">down</div>
    <script>
    const up = document.querySelector('.btn-top');
    const down = document.querySelector('.btn-bottom');
    const test = document.querySelector('.chunk');
    up.addEventListener('click', function() {
      test.scrollIntoView(true);
    });
    down.addEventListener('click', function() {
      test.scrollIntoView(false);
    });
    </script>
</body>

  • Object型参数,这个对象有两个属性，属性block 值能够是start和end；属性behavior 值auto、instant和smooth

    up.addEventListener('click', function() {
  test.scrollIntoView({
    block: 'start',
    behavior: 'smooth'
  });
});
down.addEventListener('click', function() {
  test.scrollIntoView({
    block: 'end',
    behavior: 'smooth'
  });
});

scrollIntoViewIfNeeded

scrollIntoViewIfNeeded能够接受一个Boolean型参数，和scrollIntoView不一样，true为默认值，但不是滚动到顶部，而是让元素在可视区域中居中对齐；false时元素可能顶部或底部对齐，视乎元素靠哪边更近。

二者主要区别有两个。首先是scrollIntoViewIfNeeded是比较懒散的，若是元素在可视区域，那么调用它的时候，页面是不会发生滚动的。其次是scrollIntoViewIfNeeded只有Boolean型参数，也就是说，都是瞬间滚动，没有动画的可能了。

兼容性的话

scrollIntoView：Boolean型参数几乎随便用了
scrollIntoViewIfNeeded：IE和FireFox全红，移动端基本都OK

详细见原文

本节参考文章：scrollIntoView...

17.ES6 中的 解构运算符 ...

... 每次只能展开最外层的数组，被 [].concat 后，arr 就扁平化一次。

function flatten(arr){
  while(arr.some(item => Array.isArray(item))){
    arr = [].concat(...arr);
  }
  return arr;
}

const arr = [1, [2, [3, 4]]];
console.log(flatten(arr));

本节参考文章：数组扁平化

18.reverse数组

const reverse = xs => {
  if (xs.length === 1) return xs;
  const [head, ...tail] = xs;
  return reverse(tail).concat(head);
};

reverse([1,2,3,4,5,6]) // [6,5,4,3,2,1]

19.正则实现trim()功能

function myTrim(str) {
  let reg = /^\s+|\s+$/g;
  return str.replace(reg, "");
}
console.log(myTrim('    asdf    '));

本节参考文章：2018前端面试总结...

20.js 数组每一项去除空格

var s = "222 , 3334,         3666    "

s.replace(/\s/g,"") // "222,3334,3666"
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程