前端实用资源整理

CSS

html5中a的download属性

• 定义和用法
  download 属性定义下载连接的地址或指定下载文件的名称。文件名称没有限定值，浏览器会自动在文件名称末尾添加该下载文件的后缀 (.img, .pdf, .txt, .html, 等)。

download 属性是 HTML5中新增的 <a> 标签属性。

语法	属性值	值 描述
<a download="filename">	filename	指定文件名称。

检测浏览器是否支持download属性

'download' in document.createElement('a');

1px边框(解决不一样分辨率屏幕1px的宽窄不一样)

缩放原理

.border-1px {
  position relative
}
.border-1px:after {
    display block
    content ''
    position absolute
    left 0
    bottom 0
    width 100%
    border-top 1px solid #ccc
 }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) .border-1px::after {
      transform scaleY(0.7)
      -webkit-transform scaleY(0.7)
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
  .border-1px::after {
      transform scaleY(0.5)
      -webkit-transform scaleY(0.5)
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)
  .border-1px::after {
      transform scaleY(0.3333)
      -webkit-transform scaleY(0.3333)
}

隐藏移动端ios/android滚动条，使滚动流畅

隐藏滚动条，不影响滚动

::-webkit-scrollbar
  display none

流畅滚动

//在滚动元素`css`中添加
 -webkit-overflow-scrolling touch // IOS系统
    overflow-scrolling touch // 安卓系统

伪元素（:或::均可以，::更准确，:兼容好）与伪类(只能:)的区别

伪类与伪元素都是用于向选择器加特殊效果

• 伪类与伪元素的本质区别就是是否抽象创造了新元素
• 伪类只要不是互斥能够叠加使用
• 伪元素在一个选择器中只能出现一次，而且只能出如今末尾
• 伪类与伪元素优先级分别与类、标签优先级相同

伪类标签只对能够插入内容的标签添加： div span

Vue中使用less根据分辨率给元素添加背景图片

按照less官方文档，url应当以下使用：

URLs
// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

故而有了根据屏幕分辨率设置背景图片代码

.bg-image(@url) {
  background-image: url('@{url}@2x.png');
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
    background-image: url('@{url}@3x.png');
  }
}  // 报错报错 找不到路径的

这里要使用“~”符号来告诉less引号里面的内容不须要编译。

正确代码：

.bg-image(@url) {
    background-image:~"url('@{url}@2x.png')";
    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        background-image: ~"url('@{url}@3x.png')";
    }
}

改变输入框input，textarea的placeholder样式，去除输入框选中边框高亮

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder  {
  //设置样式
}
input:focus {    outline:none;}  /*  focus 标记*/

（原谅我一直没找很完善的reset.css,这些在一些重置样式文件自带的有，你们有好的完善的也能够告知我一下 ）

sticky 属性

在使用 position: sticky 的时候，若是不指定 top 属性是不会有效果的。
这个属性是用来实现滚动吸顶的，具体可了解position。

flex布局属性中inline-flex

inline-flex 和 inline-block 同样，对内部元素来讲是个 display:flex 的容器，对外部元素来讲是个 inline-block 的块

JS

addEventListener VS onclick孰优孰劣

两个均可以实现效果。
addEventListener 以及 IE 的 attachEvent能够实现绑定多个事件，若是你有这方面的需求的话（奇怪的是你总会的）。
addEventListener的第三个参数能够用来控制监听器对于冒泡事件的响应，大部分状况是false，若是置为true，则响应事件的捕获阶段。事件的响应分区为三个阶段 ：捕获、目标、冒泡阶段。
onclick绑定的多个事件会被覆盖，后者覆盖前者。
考虑到兼容ie，能够写一个原生的事件绑定兼容方案：

function addEvent(element, evnt, funct){
  if (element.attachEvent)
   return element.attachEvent('on'+evnt, funct);
  else
   return element.addEventListener(evnt, funct, false);
}

// example
addEvent(
    document.getElementById('myElement'),
    'click',
    function () { alert('hi!'); }
);

参考连接：addEventListener 与 onclick

图片上传按钮以及预览（转载+解析）

//代码来源：https://www.jb51.net/article/120617.htm 这里解析一下
<template>
 <div class="admin">
 <div class="admin-content">
  <div class="edit">
  <div class="avatar">
   <div class="img">
   <img :src="avatar" @click="setAvatar">
   <span>更改</span>
   </div>
   //图片上传按钮
   <input type="file" name="avatar" accept="image/gif,image/jpeg,image/jpg,image/png" style="display:none" @change="changeImage($event)" ref="avatarInput">
  </div>
  <button type="button" @click="edit">确认修改</button>
  </div>
 </div>
 </div>
</template>
<script>
export default {
 data() {
     return {
      avatar: this.$store.state.administrator.avatar,
     }
 },
 methods: {
     edit() {
      // 肯定修改后上传
      if (this.$refs.avatarInput.files.length !== 0) {
       var image = new FormData()
       image.append('avatar', this.$refs.avatarInput.files[0])
       this.axios.post('/avatar', image, {
           headers: {
            "Content-Type": "multipart/form-data"
           }
       })
      } 
     },
     setAvatar() {
      //触发按钮的上传事件 也会用label绑定for属性
      this.$refs.avatarInput.click()
     },
    
     changeImage(e) {
      //从事件对象里获取文件，利用文件流读取
      var file = e.target.files[0]
      var reader = new FileReader()
      var that = this
      reader.readAsDataURL(file)
      reader.onload = function(e) {
          that.avatar = this.result
      }
     }
   }
}
</script>

对象数组排序

主要用到Array的sort()方法:

• 语法

  arr.sort([compareFunction])

• 参数
  compareFunction 可选
  用来指定按某种顺序进行排列的函数。若是省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。
• 返回值
  排序后的数组。请注意，数组已原地排序，而且不进行复制，即数组已修改。

若是没有指明 compareFunction ，那么元素会按照转换为的字符串的诸个字符的Unicode位点进行排序。例如 "Banana" 会被排列到 "cherry" 以前。当数字按由小到大排序时，9 出如今 80 以前，但由于（没有指明 compareFunction），比较的数字会先被转换为字符串，因此在Unicode顺序上 "80" 要比 "9" 要靠前。

若是指明了 compareFunction ，那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素：

• 若是 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 以前；
• 若是 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。备注： ECMAScript 标准并不保证这一行为，并且也不是全部浏览器都会遵照（例如 Mozilla 在 2003 年以前的版本）；
• 若是 compareFunction(a, b) 大于 0 ， b 会被排列到 a 以前。
• compareFunction(a, b) 必须老是对相同的输入返回相同的比较结果，不然排序的结果将是不肯定的。

通俗点讲，那数字排序为例,return a - b: 从小到大；return b - a : 从大到小。
经常使用的是对象数组的排序，根据对象某一键值对排序，以下：

var compare = function (prop) {
    return function (obj1, obj2) {
        var val1 = obj1[prop];
        var val2 = obj2[prop];
        /*
        *异常处理，或者转型处理字符串转数字比较等
        */
        if (val1 < val2) {
            return -1;
        } else if (val1 > val2) {
            return 1;
        } else {
            return 0;
        }            
    } 
}

一键复制功能

主要用到 document.execCommand

copy() {
      let  googleSecuritKey = document.getElementById('googleSecuritKey');
      googleSecuritKey.select();
      try{
        if(document.execCommand('copy', false, null)){
          document.execCommand('copy');
          //一个弹窗组件而已
          this.$alert({
            msg: '已复制至剪贴板！'
          }, true);
        }
      } catch (err){
        this.$alert({
          msg: '请选中后按command/ctrl+C或右键复制！'
        }, true);
      }
    },

该方法限制条件：

1. DOM元素要可编辑，好比input或者eidtable属性的div；
2. 不可有disabled属性，input的type不能够是hidden；
3. 内容宽度不可为0，至少为1px；

那么若是作一个只作信息展现的内容，容许用户一键复制，怎么作呢？

我这边选择用一个width：1px的input用定位移动到旁边信息展现区下，用层级遮住。

<div class="text__strong">
    密钥：<input id="googleSecuritKey" v-model="googleSecuritKey" type="text" style="width: 1px;border: none;position: relative; left: 2px; z-index: -1;"/>
    {{googleSecuritKey}}
    <span class="ui-btn ui-btn-default ui-btn-short float-r clearfix" @click="copy">复制</span>
</div>

解决科学计数法显示数字问题

参考出处：JavaScript中科学计数法转化为数值字符串形式

如下两种状况，JavaScript 会自动将数值转为科学计数法表示

(1) 小于1且小数点后面带有6个0以上的浮点数值：

JavaScript 代码:
0.0000003    // 3e-7
0.00000033   // 3.3e-7
0.000003     // 0.000003

(2) 整数位数字多于21位：

JavaScript 代码:
1234567890123456789012     //1.2345678901234568e+21
1234567890123456789012.1   //1.2345678901234568e+21
123456789012345678901      //123456789012345680000

解决方案：
JavaScript 代码:

function toNonExponential(num) {
    var m = num.toExponential().match(/\d(?:\.(\d*))?e([+-]\d+)/);
    return num.toFixed(Math.max(0, (m[1] || '').length - m[2]));
}
toNonExponential(3.3e-7)     // "0.00000033"
toNonExponential(3e-7)       // "0.0000003"
toNonExponential(1.401e10)   // "14010000000"
toNonExponential(0.0004)     // "0.0004"

解析一下：

用.toExponential()将数字转化为科学记数法表示，匹配正则表达式/\d(?:\.(\d*))?e([+-]\d+)/,获取科学记数法中小数点后的字符及幂指数（e 后面的值），这样能够肯定数字是几位小数。再用toFixed() 转换成数值表示。

大额数量转换

需求：

• 数量保持最多5个字符。
• 当数量<1，展现为0.003
• 当数量为1-1000，展现为1.234，12.34，123.4
• 当数量＞1000，带上单位K，展现为1.54K，15.4K，154K
• 当数量>1000000时，带上单位M，展现为1.23M，12.3M，123M
• 数值采用向下取数展现的方式。如实际数量为15345，则展现为15.3K

项目中使用vue过滤器作的处理：

export default (vol) => {
  const val = parseFloat(vol) + '';
  if (isNaN(val)) return vol;
  let num = val.indexOf('.') ? val.split('.')[0].length : val.length;
  const getFiv = function(v) {
    let a = v.indexOf('.') ? v.substring(0, 5) : v;
    let b = a.replace(/[.]$/, '');
    return b;
  };
  if (num < 4) {
    let v = val + '';
    return getFiv(v);
  } else if (num < 7) {
    let v = val / 1000 + '';
    return getFiv(v) + 'K';
  } else {
    let v = val / 1000000 + '';
    return getFiv(v) + 'M';
  }
};

能够抽取方法的，调整5相关，能够获取指定位数的缩写。

含有变量的正则表达式

value = value.replace(new RegExp(`^(\\-)*(\\d+)\\.(\\d{${count}}).*$`), '$1$2.$3');//只能输入count位小数

好比count为4：

value = value.replace(/^(\-)*(\d+)\.(\d{4}).*$/, '$1$2.$3');//只能输入4位小数

Blob文件下载 借鉴

• 把请求responseType设置为 blob,在response.body中拿数据（例子中使用了封装过的axios，data处理过）；

  const { data } = await http({
      method: 'POST',
      headers: defaultHeaders,
      url: ...,
      responseType: 'blob',
      data: ...
    });

• 把接受的data处理成blob对象，关于Blob

  let blob = new Blob([data], { type: data.type });

  如下来自MDN

语法	参数
var aBlob = new Blob( array, options );	array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其余相似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。
	options 是一个可选的BlobPropertyBag字典，它可能会指定以下两个属性：
	- type，默认值为 ""，它表明了将会被放入到blob中的数组内容的MIME类型。
	- endings，默认值为"transparent"，用于指定包含行结束符n的字符串如何被写入。 它是如下两个值中的一个： "native"，表明行结束符会被更改成适合宿主操做系统文件系统的换行符，或者 "transparent"，表明会保持blob中保存的结束符不变

• 建立url

  //URL.createObjectURL()方法会根据传入的参数建立一个指向该参数对象的URL. 这个URL的生命仅存在于它被建立的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象.
  let url = window.URL.createObjectURL(blob);
  let fileName = '分析师列表.xlsx';

• 建立a标签实现自动下载或者手动下载

  ```
      if ('download' in document.createElement('a')) {
        const a = document.createElement('a');
        a.href = url;
        a.download = fileName;
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        URL.revokeObjectURL(a.href);
        document.body.removeChild(a);
      } else {
        navigator.msSaveBlob(blob, fileName);
      }
    ```

纯函数 (Pure Function)

纯函数是指不依赖于且不改变它做用域以外的变量状态的函数。

---

ES6及以上经常使用的方法

Array.from()

Array.from() 方法从一个 相似数组或 可迭代对象中建立一个新的数组实例。

• Array.from(arrayLike[, mapFn[, thisArg]])

  • 第一个必选参数 类数组对象
  • 每一个元素的回调函数
  • this对象
• 返回新数组

常见用法，很少说：

Array.from('string');     // ["s", "t", "r", "i", "n", "g"]
Array.from({a: 'a', b: 'b'});     // []
Array.from({1: 'a', 2: 'b'});     // []
Array.from([1, 2, 3], x => x + x));          // [2, 4, 6]

Array.from() 能够经过如下方式来建立数组对象：

• 伪数组对象（拥有一个 length 属性和若干索引属性的任意对象）
• 可迭代对象（能够获取对象中的元素,如 Map和 Set 等）

拥有一个 length 属性这是我一直忽略的，这一点仍是蛮有技巧性的，有时候能简化很多步骤

先看使用中的多种状况：

Array.from({1: 'a', 2: 'b', length: 2});     // [undefined, "a"]
Array.from({1: 'a', 2: 'b', length: 3});     // [undefined, "a", "b"]
Array.from({a: 'a', b: 'b',length: 3});      // [undefined, undefined, undefined]

还算比较智能。

看一下应用，来自Daily-Interview-Question2019-04-16的面试题：

第 55 题：某公司 1 到 12 月份的销售额存在一个对象里面，以下：{1:222, 2:123, 5:888}，请把数据处理为以下结构：[222, 123, null, null, 888, null, null, null, null, null, null, null]。

我最开始直接来了个基本的遍历法...还在new Array(13)或者[].length=13

简化版：

// 13长度的数组对应进去保持了key与索引一致，最终去除掉第一个元素就好

Array.from({1:222, 2:123, 5:888, length: 13}).slice(1).map(e => e || null);

let obj = {1:222, 2:123, 5:888};
Array.from({length: 12}).fill(null).map((e, index) => obj[index +1] || null);

相比起来，Array.fill()没有什么容易忽略的地方。

未完待续