孟欣

sass-resources-loader 在前端项目中，比如用less/scss想要封装一个公共的文件，或统一引用一个公共变量会发现 在入口文件，引入或声明是无效的，用的时候还是会报错。 那么 sass-resources-loader 恰好解决了这个问题 它在打包的时候将资源放在每个文件中，而无需一一引用，例如： const loader = [ 'vue-style-loader', { loader: 'css-loader', options: { minimize: isProd } }, 'postcss-loader', 'sass-loader', { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/common/common.scss') } } ] // webpack的module module: { rules: [ { test: /\.scss$/, use: isProd ? ExtractTextPlugin.extract({ use: loader, fallback: 'vue-style-loader' }) : loader } ] }, 来源： CSDN 作者： 孟欣的博客 链接： https://blog

前端生成图片功能及相关插件调研 首先丢出几个业务调研的相关插件，后续再详细介绍各个插件的坑 html2canvas https://github.com/niklasvh/html2canvas/ domtoimage https://github.com/tsayen/dom-to-image#readme rasterizehtml https://github.com/cburgmer/rasterizeHTML.js canvg https://github.com/canvg/canvg 序言： 生成图片功能调研 各插件底层逻辑最终都是调用JS原生canvas.toDataURL（）将canva转为image 展示在前端 注：可自行设置图片质量，设置个参数即可，详情看文档（清晰度） MDN文档： https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL Html2canvas 插件调研 star: 19.1K Html2canvas是调研的几款插件github star数最高的插件。 原理是将传入的HTML ---> canvas 再调用canvas.toDataURL转为image 问题 ： 此包问题较多，而最令人心碎的就是每个版本都有不同的坑，呈现的效果都不一样

闭包 一提到闭包，就会想到函数套函数； 官方解释： 闭包是指一个函数有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量，利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部 理解： A,B俩函数，A是爹,B是儿子，A罩着B 因为遵循Javascript语言特有的"链式作用域"结构，子会一级一级地向上找父的所有变量。 A的钱给B花，A是啥家庭，有多少钱，B看的是清清楚楚，明明白白。 B攒私房钱，偷攒了多少钱，A也不知道 ！！！ 闭包的用途： 可以读取函数内部的变量 让这些变量的值始终保持在内存中。 注意坑： 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。 解决方法是，在退出函数之前，将不使用的局部变量全部删除。 易造成内存泄漏，解决办法,用完就删。 闭包的操作是在父函数外部改变 父函数内部变量的值。所以，如果你把父函数当作对象使用，把闭包当作它的公用方法，把内部变量当作它的私有属性，这时一定要小心，不要随便改变父函数内部变量的值。 你用行，你别改。(吵吵行，别动手，动手小心我额你钱)。 注：函数内再嵌套函数 内部函数可以引用外层的参数和变量 参数和变量不会被垃圾回收机制回收 来源： CSDN 作者： 孟欣的博客 链接：