随笔分类 - javaScript
前端主流编程语言
摘要：1、问题： 在node中处理文件有时会遇到中文变乱码 2、思路： 出现乱码大概率是因为编码的问题，这时要弄清楚编码格式，然后使用解码器解码 3、解决 弄清楚原文件编码，才发现原来读取文件中的中文编码是GBK编码，本地默认UTF-8编码，编码格式不正确导致的乱码 那么就可以使用TextDecoder来
阅读全文
摘要：1、问题：fs读取文件夹文件的时候，有时顺序是乱的 而实际想要的顺序是这样的 2、思路： 主要通过js的数组中的sort方法来处理 利用replace正则区分数字与非数字来遍历a跟b，并把他们加入到数组，通过while循环截取数组来比较 3、解决： function sort(a, b) { let
阅读全文
摘要：1、需求：有一个需求，需要调用接口来下载文件，然后后端传的是二进制文件流 2、思路：弄了很久，发现返回的数据始终是乱码，跟预期的不符，设置了responseType: 'blob'也设置了，但是还是返回的乱码，看请求头也有charset=utf-8，偏偏打开网页又是可以直接下载的，应该不是后端问题，
阅读全文
摘要：three.js监听模型事件是通过THREE上的Raycaster方法实现的 原理是通过获取相机和鼠标点击时的位置，计算并返回一条射线上的模型队列 //获取鼠标坐标 处理点击某个模型的事件 let mouse = new THREE.Vector2(); let raycaster = new TH
阅读全文
摘要：1、需求：需要用画布画一个消息气泡 2、思路：用ctx.arcTo画圆角，填充，封装成方法方便调用 3、解决 function roundRect(x, y, w, h, r) { if (w < 2 * r) { r = w / 2; } if (h < 2 * r) { r = h / 2; }
阅读全文
摘要：1、需求：最近在弄一个实时定位的展示模块，就是说前端通过webSocket获取到用户位置信息：实时展示在图上，还会有图文提示等 2、思路：这个有两种解决方案：1、canvas来处理。2、svg来处理 一开始不知道哪个解决方案好，就做了两个demo探探水 总体来说：如果交互并不多的话推荐canvas处
阅读全文
摘要：1、问题：vue里面使用js引入本地图片会出现引入路径不对的情况 2、原因：在vue的js里面引入本地图片的路径会被webpack等打包工具识别为字符串处理而找不到 3、解决、使用require let img = new Image(); img.src = require("./assets/0
阅读全文
摘要：1、问题：有个需求需要全部页面都要可以转发，要我一个一个去改，那是不可能的，于是上网找了一下全局配置的方法：https://blog.csdn.net/u012767761/article/details/119204973，发现了一些新知识 2、新知识： 监听路由api：wx.onAppRoute
阅读全文
摘要：1、需求：项目需要saas化，多个客户配置到不同的服务器需要重新配置接口的域名，比较麻烦，所以要求根据当前域名来自动获取域名 2、思路：根据process.env.NODE_ENV属性判断环境，然后用window.location.hostname获取域名 3、实现： vue中的process.en
阅读全文
摘要：getComputedStyle是window上实时获取已经计算过的style属性的方法 使用的时候传入dom节点 window.getComputedStyle(element)
阅读全文
摘要：1、问题：想通过url传参，但是参数里面有=,?,&等特殊字符，传递过去的参数就不能保证是正确的了 2、解决：这时就可以用encodeURIComponent和decodeURIComponent来通过编码解码保证传过去的参数是正确的 // 传递页 wx.navigateTo({ url: '../
阅读全文
摘要：1、问题：今天遇到一段代码，加载后是直接在url后面加上“#字符串”，然后刷新页面，不懂这个操作就想弄清楚一下 2、#的作用： 在url后面添加#是添加锚点，是提供信息给浏览器的，并不影响向服务器请求 #代表网页中的一个位置。其右面的字符，就是该位置的标识符。比如，http://www.exampl
阅读全文
摘要：1、原生websocket实现断线重连 export default { name: "sideBar", components: { // viewImage, svgIcon, }, props: {}, data() { return { sock: null, url: "wss://xxx
阅读全文
摘要：1、问题：在一个项目里发现，当浏览器里面存在form，然后里面有input的type为password时,就会触发浏览器自动填充，并把上一个type为text的input当成账号填充 2、原因：就是浏览器自动填充惹的祸，而且不同浏览器的自动填充规则不同，如360是根据form、name和passwo
阅读全文
摘要：1:、需求：之前的图片上传接口是，前端上传图片给后端，后端返回一个存放图片的web路径，现在后端出问题，返回的web路径无法使用，需要前端展示本地的文件 2、思路：把当前选择的图片文件转化成base64格式用backgroundImage来展示 3、实现： fileListChange(file)
阅读全文
摘要：1、需求：需要写一个新增商品的页面，主要难点就sku 2、思路：总体来说就是前端生成适合排版的sku属性数据，之后经过转换成符合接口的上传数据，刚开始转换的时候没有思路也是花了点时间，毕竟不设限制的sku可以有很多，层级也很深，所以主要用的是递归来处理 前端排版时的属性数据 [ { id: new
阅读全文
摘要：1、当三元运算符和字符串拼接在一起时会导致路径错误的问题 比如以下代码 '/api/getTemplateIdByCode?code='+wx.getStorageSync('perId')?'audit-result':'personnel-register' 以为结果是/api/getTempl
阅读全文
摘要：1、需求：有些展示的数据是静态的，没有那么美观，就想着加点增长特效 2、思路：处理成一个组件，往里面传值的时候，会根据特效时长，特效间隔等逻辑处理并返回值 3、实现 <template> <span>{{ carrier }}</span> </template> <script> export d
阅读全文
摘要：arguments 是一个对应于传递给函数的参数的类数组对象。 简单来说就是包含所有传进函数的实参的一个集合。 var a=1; function fn2(a){ //arguments的某个数值就相当于某个形参 arguments[0]=3; alert(a); //弹出3 var a=2; al
阅读全文
摘要：提交方法： 接口经常要用到FormData提交文件，就记录一下 实现：new一个FormData类型，append如文件，提交的时候给接口请求头加上'Content-Type': 'multipart/form-data' upData(file){ const form = new FormDat
阅读全文
