前端实用资源整理

2024年4月11日 102次阅读来源: Mr_zhang

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);
      }
    },

该方法限制条件：

DOM元素要可编辑，比如input或者eidtable属性的div；
不可有disabled属性，input的type不可以是hidden；
内容宽度不可为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()没有什么容易忽略的地方。

未完待续

    原文作者：Mr_zhang
    原文地址: https://segmentfault.com/a/1190000015160842
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

CSS

html5中a的download属性

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

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

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

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

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

sticky 属性

flex布局属性中inline-flex

JS

addEventListener VS onclick孰优孰劣