随笔分类 - JavaScript
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
摘要：左侧为导航栏，点击内容滚动到指定位置，监听滚动条，左侧锚点导航高亮 效果图如下： 组件封装PointTags：使用el-tabs实现左侧导航 <template> <div class="point-wrap"> <el-tabs tab-position="left" v-model="activ
阅读全文
摘要：在elementUI和iview组件库中，都有对应参数设置，当内容过长被隐藏时显示 tooltip。但是当表格的一个单元格的内容过于复杂，需要自定义时，通常官网给出的配置参数会失去效果。 入上图所示，可以使用组件库提供的 tooltip组件+ mouseover 事件实现，对应效果，代码如下 <!-
阅读全文
摘要：在vue中多个组件中都使用window.onresize=()=>{}，会导致前边赋值的方法被覆盖掉 改成 window.removeEventListener('resize', ()=>{}) 可生效 methods: { myFunction() { ... } }, mounted(){ /
阅读全文
摘要：前言 项目中遇到一个需求：弹框中有一个带分页的多选表格，在用户切换分页时，需要记录用户当前选择，在切换回上页时，显示用户已勾选项 使用elementUI 表格多选框的toggleRowSelection发现并没有效果。 一开始以为是切换分页后没有等待页面加载完成后就调用了该函数所以无效； 解决1：添
阅读全文
摘要：前言最近遇到一个需求，将JSON文件的内容，导出到word文档，利用nodeJs 和 Officegen 实现了文件导出的功能exportAWord.js 代码如下 /** * 读取指定文件夹下的JSON文件，导出为word * 一个json文件为一个word，以json文件的名称为word文件的名
阅读全文
摘要：1、只包含中文 const regCn = /[\u4e00-\u9fa5]+/ // !str.match(regCn ) 2、只包含英文 const regOnlyEn = /[a-zA-Z]+/ // regEn.test(str) 3、包含英文和数字 const regOnlyEnAndNu
阅读全文
摘要：前言最近接触了一个新的vue项目，安装依赖是一直无法安装成功，有部分依赖包的地址报404，查看package-lock.json，发现其中部分依赖使用了公司私有的镜像库，但是目前该镜像库已关闭，访问该包地址返回404. 解决方案如下1、删除package-lock.json，重新npm i 生成新的
阅读全文
摘要：前言首屏速度是用户体验的最关键一环，而首屏速度最大的决定性因数就是资源的加载速度 而资源的加载速度 = 资源大小 + 网速 资源大小影响的方面有1、压缩（如Gzip） 2、一部分代码分割出来做异步加载，需要的时候在加载 3、写代码的时候尽量精简 本文主要针对，资源文件加载的优化。异步资源加载一般有两
阅读全文
摘要：前言 实际工作中可能会遇到需要封装WebSocket的场景，以下基于ts做了WebSocket的封装，包括心跳机制和重连 1、封装逻辑如下，新建ws文件： // websocket 封装 enum ConnectionState { // websocket 连接状态 'CONNECTING', '
阅读全文
摘要：前言： WebSocket是HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。 1、创建webSocket // Create WebSocket connection.
阅读全文
摘要：1、一种组件间通信的方式，适用于任意组件间通信，适用于任意前端框架 2、使用步骤： （1）、安装pubsub：npm i pubsub-js （2）、引入：import pubsub from ‘pubsub-js’ （3）、接收数据：A组件想要接收数据，则在A组中订阅消息，订阅的回调留在A组件自身
阅读全文
摘要：前言 实际业务中经常需要使用到本地存储，本文的webStorage指的是localStorage和sessionStorage
阅读全文
摘要：1、在项目中存放本地JSON文件 2、在需要的组件引入本地文件 import dataBaseMap from '../json/dataBaseMap.json'; 3、在data中接受数据 data() { return { // 浅拷贝 dataBaseMap: { ...dataBaseMa
阅读全文
摘要：前沿： 有时候我们需要监听dom的变化，比如获取父元素的高度，动态的设置子元素的高度，所以需要监听 dom 的高度变化，才能准确获取dom的高度，那么有哪些监听dom高度变化的方法呢？今天简单列举一下。 1、MutationObserver 构造函数 Mutation Observer API 用来
阅读全文
摘要：当时使用webRTC进行视频通话时，通常会设置视频流的帧率，行业内一般默认帧数为15或者30，一般每秒只需要渲染15或30次 当要需要对本地视频或者远端视频流进行特殊处理时，通常会使用requestAnimationFrame方法进行再次渲染 requestAnimationFrame，这个方法是用
阅读全文
摘要：1、使用canvas对video元素进行截图 function getVideoFrame(video){ const canvas = document.createElement("canvas"); canvas.width = video.videoWidth; canvas.height
阅读全文
摘要：很多人在用 localStorage 或 sessionStorage 的时候喜欢直接用，明文存储，直接将信息暴露在；浏览器中，虽然一般场景下都能应付得了且简单粗暴，但特殊需求情况下，比如设置定时功能，就不能实现。就需要对其进行二次封装，为了在使用上增加些安全感，那加密也必然是少不了的了。为方便项目
阅读全文
