前端开发是一个漫长、艰苦而又收获满满的。当我们回首，以前所踩过的坑，都会使我们变得更强大。
很多人在初入前端时，都会或多或少得遇到一些小问题，有的会被html、css中布局搞得头大，有的会被js的逻辑关系缠得晕头转向，那么今天就来简单地谈谈几个工作中遇到的坑吧。
坑1：如何预处理器?
背景：在组件中的<template>、<script>或<style>上使用各种预处理器、<script> 或 <style>、<script>或<style>上使用各种预处理器
加上处理器后，控制台报错
<style lang="sass">
.red { color: red }
</style>
这个问题解决方法非常简单，只需要安装这些依赖就好：
npminstall--save-dev node-sass sass-loader
但是解决过程并不是很顺利的，在阅读中文文档时，忽略版本号，按照上面的提示进行操作，发现不能成功，最后发现了该解决方案。
中文文档的版本号过低，如需查看文档，一定要看最新版本的英文文档！
坑2：如何使用 px2rem?
背景：在 css 中，写入 px，通过px2rem loader将 px 转换成 rem
在以前的项目中，是通过 px2rem loader实现的，但是在 Nuxt.js 项目下，添加 css loader 还是很费力的，因为涉及到 vue-loader。
想到了一个其他方案：
可以使用postcss处理。可以在nuxt.config.js文件中添加配置，也可以在postcss.conf.js 文件中添加。
build: {
postcss: [
require('postcss-px2rem')({
remUnit: 75 // 转换基本单位
})
]
}
坑3：如何拓展 webpack 配置?
背景：给 utils 目录添加 alias
刚刚说到，Nuxt.js 内置了webpack配置
如果要拓展配置，在nuxt.config.js文件中添加。
同时也可以在该文件中，将配置信息打印出来。
extend (config, ctx) {
console.log('webpack config:',config)
if(ctx.isClient) {
// 添加 alias 配置
Object.assign(config.resolve.alias, {
'utils': path.resolve(__dirname,'utils')
})
}
}
坑4：如何添加 vue plugin?
背景：封装了一个 toast vue plugin
由于 vue 实例化的过程没有暴露出来，在哪个时机注入进去呢？
可以在nuxt.config.js中添加 plugins 配置，这样插件就会在 Nuxt.js 应用初始化之前被加载导入。
module.exports= {
plugins: ['~plugins/toast']
}
~plugins/toast.js 文件：
importVuefrom'vue'
importtoastfrom'../utils/toast'
import'../assets/css/toast.css'
Vue.use(toast)
坑5：闭包
很多人对于闭包的认识就是函数里面嵌套一个函数，我们不妨把闭包理解为是将函数内部和函数外部连接起来的一座桥梁，他就是定义在函数内部的一个函数。
众所周知，js中声明的变量是有作用域的，分为全局变量和局部变量。在函数之外定义的是全局变量，函数内部可以直接读取全局变量。在函数之内定义的是局部变量，函数不能读取其他函数的局部变量。
那么在上述代码中，因为我们的变量a是在函数fn内部定义的，所以他是一个局部变量，那么根据函数不能读取其他函数的局部变量的定义，所以我们函数fn2执行的结果是a is not defined。
那么我们怎样可以读取到函数fn内部的变量呢，这里，我们就可以使用闭包。闭包有两个最大的特点：一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
所以我们在函数fn内部定义了一个函数fn1,此时就形成了一个闭包。在我们执行函数fn时，函数fn1可以获取到函数fn的内部变量，所以我们的执行结果是1。
不过，闭包固然好用，但是因为闭包会使得我们函数中声明的变量都保存在内存中，不被js中的垃圾机制回收（在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。因为函数a被b引用，b又被a外的c引用，这就是为什么函数a执行后不会被回收的原因。），所以内存消耗会非常大，导致我们网页性能差，不过这个问题我们可以找到一些解决办法，使用闭包时，我们在退出函数之前，将不使用的局部变量全部删除；而且闭包还会在父函数外部改变父函数内部变量的值。所以我们在使用时要小心，尽量减少闭包的使用。
前端开发这条路漫长、艰辛而又收获满满，希望各位且行且珍惜。最后对前端感兴趣或者正在学习前端的小伙伴可以关注下方微信-公众号(web-road)，我们互勉进步。
公众号：web-road
网友评论