- 博客(90)
- 收藏
- 关注
RSS订阅原创 前端实现模块懒加载
通常对于无规则长列表带来的加载耗时长、性能差的问题，首先想到的方案就是通过滚动位置判断当前模块是否进入视图中，来判断模块是否加载。子模块ChildCom中监听加载，获取准确高度，并通过observe挂载在intersectionObserverRef上。实例化子组件的时候传入intersectionObserverRef、intersectionEntriesMapRef。1. 要预先知道每个模块的准确高度。通常情况下这个高度的是动态的，难以在初始状态下获取所有模块的高度。
2024-08-27 11:10:02
306
原创 三行代码解决electron-updater升级失败问题
在21年末遇到公司遇到一个比较奇葩的bug，electron开发客户端在进行自动升级时中途闪退没有任何日志。经仔细观察，是在新包下载完后对老版本包进行替换的时候闪退，无意中发现在这一过程里，任务管控器里有两个应用进程，猜想是旧的任务没有完全退出进程，于是查阅api，对关于退出任务、进程、关闭窗口的api进行组合测试，最终总结了一套解决方案~如下代码：ipcMain.on('isUpdateNow', (e, arg) => { //console.log("开始更新");
2022-05-18 17:42:45
1746
1
原创 vite中优雅使用vue-router
接触过nuxt框架的小伙伴可能知道，在nuxt中不需要手动的去添加路由表，因为在pages文件夹下定义的文件会自动转换成路由，例如pages/home.vue，即可通过/home去访问该页面。当然在vite中可以利用vite提供的Blob导入，实现nuxt那样一键式创建路由。具体实现如下：创建路由文件router.js：import {createRouter as _createRouter, createWebHistory} from 'vue-router';const pages = i
2022-05-08 17:34:09
4439
1
原创 关于H5唤起某APP，未安装调起下载那些事
需求背景在H5页面上进行app引流。点击某个按钮时，判断用户是否已经安装某APP，若已安装，则直接打开APP；若未安装，则开始下载APP;实际上，JS 是没有判断 APP 是否安装的方法的，那么我们只能想办法来解决这个问题了。android端处理方案在android端大多数是通过scheme命令直接打开APP。首先定义好你的scheme命令已经app下载地址，如下：let schemeUrl = 'com.***.cn://***:8080/loadapp';let downloadUrl =
2022-04-02 15:33:24
2239
原创 js实现AES加密
安装第三方加密包npm i crypto-js加密代码let str = '****';// 需要加密的字符串let keyStr = '****';// 密钥let ivStr = '****';// iv偏移量const key = CryptoJS.enc.Utf8.parse(keyStr); // 十六位十六进制数作为密钥const iv = CryptoJS.enc.Utf8.parse(ivStr); // 十六位十六进制数作为密钥偏移量let srcs = Crypt
2022-01-26 10:39:15
10851
原创 js获取系统及版本
// 获取系统版本export function getOsVersion() { var u = navigator.userAgent, version = '' if (u.indexOf('Mac OS X') > -1) { // ios var regStr_saf = /OS [\d._]*/gi var verinfo = u.match(regStr_saf) version = 'IOS' + (verinfo +
2021-12-27 20:34:30
1261
原创 谷歌插件采坑集
谷歌浏览器插件是一种小型的用于定制浏览器体验的程序。通过插件，可以自定义浏览器的一些行为来适应个人的需要，只要你会HTML，JavaScript，CSS就可以动手开发浏览器插件了。开发谷歌浏览器插件，就相当于在谷歌浏览器的基础之上进行活动，站在巨人的肩膀上，操作很多东西都方便了一些。有了插件，我们可以定制js爬虫、屏蔽网页广告，网页实时查词，修改http请求头，等等，能做的东西很多插件包构成关于谷歌插件无非四个主要文件，manifest.json、popup.html、background.js，co
2021-10-11 11:41:45
423
原创 关于electron应用mac公证问题
对于 Electron 应用，它有 electron-notarize 的工具来做公证。但遗憾的是，我使用的时候出现了各种各样的报错，相关GitHub issue上也发现有人出现跟我类似的问题，不过没有明确的解决办法。折腾半天，决定用原始的办法来解决——命令行工具。一句命令xcrun altool --notarize-app --primary-bundle-id “com.xxx.xxx" --username “your developer appleid" --password “app-pa
2021-09-24 15:27:20
917
1
原创 使用rollup打包应用
Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码。他与webpack的最大区别如下： 特性: rollup 所有资源放同一个地方，一次性加载,利用 tree-shake特性来 剔除未使用的代码，减少冗余 webpack 拆分代码、按需加载 webpack2已经逐渐支持tree-shake rollup: 1.打包你的 js 文件的时候如果发现你的无用变量，会将其删掉。 2.可以将你的 js 中的代码，编译成
2021-07-02 19:06:40
1591
原创 nodejs获取当前连接的网络ip
获取当前连接ip的方法：import net from 'net';function getNetworkIP() { return new Promise((resolve,reject)=>{ let createConnection = net.createConnection; var socket = createConnection(80, 'www.***.cn);//进行socket 连接的地址 socket.on('con
2021-04-21 09:12:57
4715
原创 安卓部分浏览器长按保存图片问题
在安卓部分浏览器上长按查看base64图片一片空白，点击保存图片也提示保存失败，加入以下代码即可解决。1.页面上创建一个canvas容器,设置其隐藏<canvas v-show="false" ref="picture"></canvas>2.使用canvas重新绘制并赋值 this.imgUrl = "data:image/jpeg;base64," + res.content.base64_image;//这个路径只能苹果保存 let img = new Ima
2021-04-08 18:32:41
1410
原创 taro路由传参
A页面通过路由跳转到B页面 同时传参到B页面import Taro from '@tarojs/taro' itemClick = (id) => { Taro.navigateTo({ url: `/pages/index2/index2?id=${id}` }) } B页面接受传递参数import { getCurrentInstance } from '@tarojs/taro'const id = getCurrentInstance().router.pa
2021-03-09 11:52:31
1653
原创 vue自定义懒加载指令
指令方法：Vue.directive('lazyHtml', { inserted: function (el, binding) { let wrapEL = document.createElement('div'); wrapEL.innerHTML = binding.value.html; let num = binding.value.defaultNum||2;//预加载图片数量 let imgList = wrapEL
2021-03-05 11:13:57
281
1
原创 使用keep-alive的正确姿势
1.在路由表定义meta属性{ path: '/', meta:{ keepAlive: false, // 需要被缓存 }, name:'index', component: require('@/views/index').default }, { path: '/order',
2021-03-03 18:42:14
206
1
原创 vue-cli4项目在ie下白屏问题
需要添加一些插件编译项目需要的依赖包：1.npm i --save-dev @babel/preset-env @babel/plugin-transform-runtime2.在项目根目录添加babel.config.js，内容如下：module.exports = { presets: [ '@vue/app', [ "@babel/preset-env", { "useBuiltIns": "entr
2021-03-03 16:29:33
751
1
转载 requestAnimationFrame详解
为什么要说它，源于看到的一道面试题：问题是用js实现一个无限循环的动画。首先想到的是定时器<!doctype html><html lang="en"><head> <title>Document</title> <style> #e{ width: 100px; height: 100px; background: red;
2020-12-15 09:40:48
247
原创 js调用微信支付
公众微信号调起微信支付的时候，有的时候调起支付成功，有的时候调起支付失败。利用抓包工具抓取数据显示授权和调用后台的微信预支付订单接口都成功并且都返回正确的数据。但是调起支付的时候传入的data老是弹出{‘isTrusted:false’}，正常的data应该是调用生成预支付订单的返回数据，即后台给返回的调起微信支付所需要的数据参数。我的代码：<script src="./js/jquery.js"></script><script src="http://res2.wx.q
2020-12-09 15:32:13
3228
原创 HTML中显示代码高亮及行号
下载相关js和css文件首先进入highlightjs官网https://highlightjs.org/根据自己的需求勾选需要高亮的语言点击下方下载按钮。然后下载添加行号js文件https://github.com/wcoder/highlightjs-line-numbers.js/将相关文件复制到项目中下载的两个文件解压后将default.css、dark.css、highlight.pack.js、highlightjs-line-numbers.min.js复制到项目文件中..
2020-10-13 10:22:44
6085
4
原创 nuxt踩坑集
目录结构assets: 资源文件。用于组织未编译的静态资源如 LESS、SASS或 JavaScript。components: 组件。layouts: page: 模板页面，默认为 default.vue可以在这个目录下创建全局页面的统一布局，或是错误处理页面页，需要提供一个nuxt 标签，类似于router-viewmiddleware: 中间件，放置自定义的中间件，会在加载组件之前调用。可以在页面中调用： middleware: ‘中间件名称’。pages: 页面，index.vue 为根页
2020-09-30 16:17:11
1814
1
原创 nuxt中刷新页面后防止store值丢失
1、 配置插件（）plugins: [ {src:'~/plugins/storeCache',ssr: false},]注意：要禁止服务端运行，不然会报错，这个事件是在客户端添加的，不是在服务端小渲染的时候添加的。2 、在plugins/storeCache.js写代码，如下。export default function(ctx){ //离开页面 刷新前 将store中的数据存到session window.addEventListener('beforeunloa
2020-09-30 15:39:07
1188
原创 nuxt store中保存localstorage问题
一、如果是用Nuxtjs，请配置插件：plugins:[ {src:'~/plugins/localstorage.js",ssr:false }]然后，在localStorage,js中:import createpersistedstate from "vuex-persistedstate';impont * as Cookies from "js-cookie";let cookiestorage ={ getItem: function(key){ return Cookie
2020-09-30 15:31:40
4604
2
转载 谈谈axios配置请求头content-type
现在前端开发中需要通过Ajax发送请求获取后端数据是很普遍的一件事情了，鉴于我平时在撸码中用的是vue技术栈，今天这里来谈谈我们常用的发Ajax请求的一个插件—axios。现在网上可能发送Ajax请求有很多种插件，每种用法可能略有差异，大家只需挑选一种自己喜欢的即可。毕竟现在还有很多人使用jQuery，$.ajax用法也是很多了。开始因为需要用到axios插件，所以我们现在项目种下载依赖npm install axios -Saxios虽然是一个插件，但是我们不需要通过Vue.use(axio
2020-09-21 17:46:20
1374
转载 H5适配iphoneX底部(只需2步)
H5适配iphoneX底部 只需2步首先我们要明白iphoneX底部适配是要和H5页面的底部选项卡做兼容所以我们要判断在iphoneX下把选项卡底部到屏幕底部的中间部分自动填充1.设置meta属性,在content下设置关键值 viewport-fit=cover<meta name="viewport" content="viewport-fit=cover" />2.底部选项卡判断(以下是关键步骤,其他样式省略)// 设置固定定位,将bottom设置为0.footerBo
2020-09-12 13:26:08
1308
1
原创 三大家族
offSet家族offsetWidth 和 offsetHeight获取对象自身的宽度和高度 ，包括内容、边框和内边距，即：offsetWidth = width + border + paddingoffsetLeft 和 offsetTop*距离第一个有定位的父级盒子左边和上边的距离*父级盒子必须要有定位，如果没有，则最终以body为准！*offsetLeft和offsetTop...
2019-09-07 07:52:21
126
原创 正则表达式
字面量方法创建正则表达式var reg=/abc/;var reg=/abc/;构造函数方式创建正则表达式var reg=new RegExp(“abc”);操作正则的方法：字符串：match、search、replace、split正则：test、exec修饰符：g表示全局匹配，i表示忽略大小写、y表示起始位置、m表示匹配多行test判断是否含有正则内容，有就返回true,无就...
2019-08-26 21:29:07
178
原创 DOM和BOM宽高等属性
元素位置：offsetleft、offsetTop 在所有祖先节点中没有定位模式的时候，是到html的距离。祖先元素有定位就是相对于祖先元素的距离。elem.offsetParent : 找到离elem最近的具有定位属性的祖先元素，跟css定位属性很像，如果嵌套的元素没有定位，就会得到body拓展：封装元素距左侧的距离函数function pox(elem){var result=0;...
2019-08-15 19:40:34
156
原创 节点操作
createElement语法前面只能是documentvar li=document.createElement(‘li’);li.innerHTML=‘111’;通过appendChild、insertBefore把创建的节点添加到页面中appendChild : 把一个节点添加在指定节点里的最后var ul=document.querySelector(‘ul’);ul.appe...
2019-08-15 19:39:51
195
原创 动态获取元素
非动态获取元素 ：在没有生成这个元素之前不能获取到document.getElementById()document.querySelector()document.querySelectorAll()动态获取元素 ：不用一开始就获取元素document.getElementsByClassName()document.getElementsByTagName()var box1=...
2019-08-15 19:39:23
620
原创 时间对象和DOM节点
时间对象var date=new Date(); //获取当前时间date.getFullYear(); //获取年份date.getMonth()+1; //月份从零开始date.getDate(); //获取日期天数date.getDay(); //获取周几信息，0对应周日date.getHours();...
2019-08-15 19:38:32
215
原创 递归、排序
递归：函数调用自身就是递归，要添加停止操作把复杂的问题分解成若干个简单的解function fn(n){ //斐波那契数列if(n1||n2){return 1;}return fn(n-2)+fn(n-1);}console.log(fn(6));var arr=[10,5,14,34,32,12,7,4];functi...
2019-08-15 19:37:45
110
原创 回调函数、闭包、this
回调函数：回调函数：把一个函数当做参数传递就是回调函数使用：1.不能复用的函数可以放到回调函数中2.可以解决异步调用的顺序问题闭包：闭包就是能读取其他函数内部变量的函数，可以理解为定义在一个函数内部的函数function foo(){var a=10;return function bar(){ //这个函数就是闭包console.log(a);}}foo()();既可以...
2019-08-12 19:56:14
177
原创 关于闭包中变量的储存
//前言闭包，这个概念对于每位JSer而言都不陌生，它几乎伴随着每个前端入门者的初学阶段，重要到几乎每家公司面试都会问。关于闭包究竟是什么，闭包干嘛用的，网上各种回答也是五花八门，动不动就扯到隐匿变量/内存泄漏这些概念，让没有C基础的初学者越看越晕，我不能说那些是错的，不过显然对新手不太友好。曾几何时我也是被那些个故作高深的概念绕得七荤八素云里雾里，那今天这篇文章以一个简单到80岁老太都看得懂...
2019-08-12 19:55:26
1847
5
原创 字符串、数组、自定义属性
自定义属性. 获取属性. 只能获取到默认的属性[][]有利于属性传参操作css(elem,‘background’,‘yellow’);function css(el,attr,color){el[‘style’][attr]=color;//al.style[attr]=color;}getAttribute和setAttribute//getAttribute获取自定...
2019-08-12 19:54:26
422
原创 隐性转换
算数运算时的隐性转换1+1 //2true+true //21+true //2第一行是两个布尔值相加，第二行是数值与布尔值相加。这两种情况，布尔值都会自动转成数值，然后再相加。‘a’+‘bc’ //‘abc’如果是两个字符串相加，这时加法运算符会变成连接运算符，返回一个新的字符串，将两个原字符串连接在一起。1+‘a’ //‘1a’fals...
2019-08-12 19:53:28
350
原创 js事件
函数鼠标事件onclick:单击事件ondblclick:双击事件onmouseover:鼠标移入事件onmouseout:鼠标移出事件onmousedown:鼠标按下事件onmouseup:鼠标抬起事件onmousemove:鼠标移动事件内置函数alert(“a”); 警告框var result=alert(‘1’); //不返回值console.log(result);...
2019-08-11 19:52:50
114
原创 js函数
函数函数命名方法（1）function命令：function print(){console.log(s);}（2）函数表达式：var print=function(){console.log(s);}（3）function构造函数：var add=new Function(‘x’,‘y’,‘return x+y’);等同于function add(x,y){retu...
2019-08-11 19:52:20
224
原创 流程控制和DOM操作
流程控制顺序结构顺序结构就是程序从上到下、从左到右一句一句的去执行。选择结构单向选择：if(){}双向选择：if(){}else{}多向选择：switch(判断值){case 验证值:语句；break;default:语句;}任何值都可以作为判断条件当是两个值比较是，就要按条件比较两个值如果是一个值，只有一下几种情况为假，其他情况全为真：false 0 ...
2019-08-11 19:51:48
208
原创 js数据类型、运算符
1、数据类型变量命名规则不能使用关键字和保留字关键字：已有的语法保留字：还没有使用的关键字首字母可以是字母、下划线、$符，不能是数字、运算符适合多个单词定义变量：驼峰命名，第二个单词首字母大写匈牙利命名法，单词前添加数据类型辨识，如iNum下划线命名，通过下划线连接多个单词折行显示当引号内的代码片段需要折行，例如：'<ul><li></li&...
2019-08-11 19:51:05
159
原创 BFC
BFCBFC的布局规则一、内部的Box会在垂直方向，一个接一个地放置。二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠三、每个元素的margin box的左边， 与包含块border box的左边相接触四、BFC的区域不会与float box重叠。五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。六、计...
2019-08-11 19:49:20
106
原创 表格与表单
1、表单button按钮（不进行提交）<input type="button" value="按钮内容" /><button type="reset"> </button>单选框(单选按钮)<input type="radio" name="ral" />复选框<input type="checkbox" name="like...
2019-08-11 19:47:56
140
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人