代码技巧
sq-web
因为热爱,所以分享。自己日常总结,共同交流指正。
展开
-
js函数式编程基础要点总结
最近在看js的函数式编程,觉得很酷,此文是对一些知识的脉络梳理总结,主要是为了方便自己理解,并非原创知识。会在文末贴出参看文章链接。文中主要提到10点,分别是:高阶函数、纯函数、PointFree、函数合成、函数柯里化、范畴、函子(Functor)、Either、Applicative Functor、IO、Monad。最后会列举一个示例。一、高阶函数:函数式编程的基础都会用到高阶函数,高阶函数是一个接收函数作为参数或将函数作为输出返回的函数。例如:Array.prototype.maplet a原创 2020-09-09 20:02:06 · 307 阅读 · 0 评论 -
优化js中的if/else结构
需求: 经常在代码中会有各种条件判断,导致if/else使用过多,不仅阅读麻烦,对于新加的条件,还不好扩展,文中列举了7中优化方案,可以根据实际代码环境选用。文中并没有列举switch,是因为switch结构使用上与is/else并无区别。1、提前return,可以将判断层级拉平let animal = 'cat'if (animal !== 'dog') { if (animal === 'cat') { console.log('测试') }}let animal = 'ca原创 2020-09-07 10:41:35 · 1161 阅读 · 0 评论 -
electron截取桌面应用的图片
需求: 需要截取桌面打开的相关应用的图片。方法:截图我们采用的api是electron的desktopCapturer,通过这个api我们可以拿到桌面打开的各种应用的缩略图,最终可以拿到一个electron的nativeImage格式的图片,这种格式具有toDataURL()、crop(rect)、resize(options)等各种方法,可以对其根据需求进行处理。具体代码如下: // 截图方法 shotClick() { desktopCapturer.getSources(原创 2020-09-01 11:21:19 · 1198 阅读 · 0 评论 -
vue+Vue CLI Plugin Electron Builder开发electron应用
文中主要解决的问题:1、electron下载缓慢。2、vue add electron-builder执行失败。3、打包的时候某些包下载不下来。一、创建一个vue项目npm create vueTest具体操作和创建vue项目一样,不详细展开。二、有了vue项目之后需要安装Vue CLI Plugin Electron Builder,但是由于网络原因,建议先在项目安装electron-chromedriver与electron1、npm install --save-dev electron原创 2020-08-18 19:42:00 · 3386 阅读 · 7 评论 -
html2canvas保存图片模糊的问题
目标:将html页面元素转成base64格式的图片。问题:最初直接用的html2canvas官网的最新版代码,配置之后保存的图片模糊。解决方案:采用增加了dpi和scale两个选项之后的html2canvas源码,配置这两个参数能得到清晰的图片。源码地址:https://github.com/eKoopmans/html2canvas/tree/develop/dist代码配置:// testImgs是需要转换成图片的页面元素html2canvas(document.getElementById原创 2020-08-15 11:56:34 · 1231 阅读 · 0 评论 -
electron-vue打开文件夹选中多张图片发送给后台的实现
目标: 后台提供了一个上传图片的接口,如果要同时上传多张图片,需要将图片转换成base64,然后用数组格式进行上传。文中用到的基本功能:1、electron的打开文件夹功能。相关api是dialog2、node的fs模块。3、element-ui的图片预览组件。组件是el-image具体流程:1、上传图集按钮<el-button size="mini" type="warning" @click="uploadClick">上传图集</el-button>2、打开文原创 2020-08-05 16:17:27 · 1280 阅读 · 0 评论 -
css性能优化总结
整理一下css优化相关的知识,看到后会慢慢补充。主要从以下三个方面进行总结:1、减少加载页面时候的数据传输量。2、提高页面渲染速度。3、css代码的可维护性。一、减少加载页面时候的数据传输量为了减少数据传输量,主要是减少css代码的体积,主要整理了以下几点:1、压缩css文件2、合并属性,样式复用,减少代码量3、移除空的css规则4、不声明多余的css样式,使用继承规则减少代码量5、关于display:display:inline后不应该再使用width、height、margin、padd原创 2020-08-04 20:39:59 · 422 阅读 · 0 评论 -
vscode用Prettier格式化代码,让vue项目统一代码规范
问题:因为最近和同事合作一个基于vue的项目,但是每个人的习惯不一样,和本地IDE的格式规范也不一样,往往造成提交的代码格式不一,十分不方便目标:基于vue,让代码的格式与每个人的IDE格式配置无关,保存能自动格式化代码,且保持统一风格。准备工作:1、Prettier插件:在vscode中装Prettier插件。2、将vscode配置成保存自动格式化。打开设置,点击代码视图,加入如下代码。{ "editor.formatOnSave": true}用vue创建项目,在这个示例中是采用vu原创 2020-06-24 16:51:12 · 2796 阅读 · 0 评论
分享