前端实用资源整理

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 这里解析一下




对象数组排序

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

• 语法

  arr.sort([compareFunction])

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

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

如果指明了 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 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用定位移动到旁边信息展示区下，用层级遮住。

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

参考出处：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

• 创建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)

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

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]。

我最开始直接来了个基本的遍历法&＃8230;还在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()没有什么容易忽略的地方。

未完待续