携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情
- 本文参加了由公众号@若川视野 发起的每周源码共读活动， 点击了解详情一起参与。
简单讲await-to-js、dotenv、Vue2 this 获取 data、vue2工具函数、防抖
21 await-to-js
作用
优化捕获await错误代码
————原代码
try {
const user = await UserModel.findById(1);
if(!user) return cb('No user found');
} catch(e) {
return cb('Unexpected error occurred');
}
------------变成
let err, user, savedTask, notification;
[ err, user ] = await to(UserModel.findById(1));
if(!user) return cb('No user found');
原理
export default function to(promise) {
// 去执行本在 await 后的函数，如果正常返回，则返回[null, data]
// 如果报错，返回[err]
return promise.then(data => {
return [null, data];
})
.catch(err => [err]);
}
22 dotenv
作用
可将 .env 文件中的环境变量加载到 process.env 中。
在 vue-cli 和 create-react-app 中都有使用。
如果需要变量赋值，可以用dotenv-expand
MONGOLAB_USER_RECURSIVELY=${MONGOLAB_USER}:${MONGOLAB_PASSWORD}
原理
- 读取 .env 文件
- 解析 .env 文件拆成键值对的对象形式
- 赋值到 process.env 上
- 最后返回解析后得到的对象
其他
dotenv 把环境变量加载进 process.env 对于前端项目来说还不够，因为浏览器环境是访问不到 process 的，需要通过 webpack 的 DefinePlugin 在构建阶段把变量替换为对应的值
需要放在浏览器全局变量使用的可以用webpack.DefinePlugin
webpack.DefinePlugin：www.jianshu.com/p/fa1b71ced…
23 Vue2 this 获取 data
原理
数据：将
data里的数据利用Object.defineProperty代理到this上方法：将
methods里的方法bind到this上
学
方法靠bind，数据靠代理
24 vue2工具函数
作用
给其他包用的，有判断类型、类型转换、转换并缓存、对象合并等
25 防抖
作用
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时 防抖动是将多次执行变为最后一次执行
原理
function debounce(func,wait) {
let timeout
return function() {
//if(timeout){clearTimeout(timeout)} 反正不会报错
clearTimeout(timeout)
//setTimeout会把this绑定到全局对象，需要提前绑一下。
//argument传参数。按理说只有一个参数，func.call(this,e)也不错
timeout = setTimeout(()=>func.apply(this,argument),wait)
}
}
