自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(56)
  • 收藏
  • 关注

原创 【JavaScript】动态监听iframe高度以及监听iframe内部链接跳转

在日常开发中会遇到一种情况,就是页面需要嵌套iframe,由于iframe无法自适应里面样式高度,所以我们需要去监听iframe的动态高度。当iframe内部链接发生变化,或者是后端或者网关重定向页面,如何去获取最新的iframe里面的href?对此我们可以去监听iframe的load方法,并且在iframe第一次加载完之后开始监听,保证代码的健壮性。但实际使用就会发现,在某些特定的时刻iframe的onload事件只会触发一次。有人可能会说用onload方法,例如。需要监听的iframe。

2023-05-30 15:10:39 5864 1

原创 【网络工程】常见HTTP响应状态码

HTTP状态码(HTTP Status Code)是表示网页服务器超文本传输协议响应状态的3位数字代码。

2023-02-09 21:40:19 1139 1

原创 【Vue】结合源码了解Vue的生命周期

什么是生命周期?每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,经历同时在这个过程中也会运行一些叫做生命周期钩子的函数接下来我们通过生命周期流程图和Vue源码去分析这个过程发生了什么,借用官网的生命周期流程图var vm = new Vue({}),表示初始化一个空的Vue实例对象,里面还没有其他方法跟生命周期。

2023-02-08 21:28:07 359

原创 【webpack】 Dev Server has been initialized using an options object that does not match 报错处理

在新版本的webpack-dev-server4.0中,contentBase属性已经被移除了,变成用static替代。contentBase是webpack-dev-server3.0的用法,如果不知道如何由v3升级到v4可以看这篇。npm run start启动本地服务的时候出现。

2023-02-04 21:37:59 912

原创 【webpack】打包出现TypeError: cleanWebpackPlugin is not a constructor 报错处理

打包出现TypeError: cleanWebpackPlugin is not a constructor 报错处理

2023-02-04 21:10:44 891

原创 【网络工程】如何本地调试微信公众号开发教程(Nginx代理方法)

微信公众号网页调试的时候,必须通过微信公众号后台备案配置的域名才能进行访问。有时候开发者调试时都是打包了前端代码上传到服务器后再调试,这样效率未免会很低。我们可以使用代理的方式去实现本地调试。目的:通过Nginx代理实现本地调试微信公众号

2022-12-20 19:17:20 2656

原创 【网络工程】HTTP1.0、HTTP1.1、HTTP2.0、HTTP3.0的区别

一个完整的 Web 文档通常是由不同的子文档拼接而成的,像是文本、布局描述、图片、视频、脚本等。HTTP1.x头部数据都是以纯文本形式发送,而HTTP2.0使用encoder来减少需要传输的header大小,通讯双方各自cache一份header fields表,既避免了重复header的传输,又减小了需要传输的大小。相比于1.0的文本进制,HTTP2.0使用了二进制数据流和帧,用帧对数据进行标识,这样可以实现并行响应,客户端接收到数据根据帧的标识对数据进行合并,不会出现错乱。

2022-12-19 20:55:00 275

原创 【JavaScript】深拷贝与浅拷贝的实现

1.JavaScript 内置对象方法实现的大部分都是浅拷贝2.JSON 对象中的 parse 和 stringify可实现深拷贝,但对数据有要求3.递归实现深拷贝方式最佳。

2022-12-12 17:31:38 433

原创 【性能优化】Vue如何实现路由懒加载

目录前言:为什么要使用路由懒加载。目的:为给客户更好的客户体验,首屏组件加载速度更快,减少请求资源数量,降低网络差导致出现白屏的概率。定义:当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就会更加高效。改造例子(未实现懒加载)实现方式1.Vue异步组件2.ES6的import()3.import扩展-->使用webpack把组件按组分块总结:路由常用两种懒加载方式实现方式1.Vue异步

2022-12-11 23:33:17 499

原创 【性能优化】pc端与移动端图片性能优化

pc端与移动端图片性能优化篇!在前端项目中图片的性能优化也有不少可以提升的方向。优化方向:减少请求数量;缩短响应时间;减少请求图片的大小;

2022-12-08 14:16:20 600

原创 【数据结构】什么是哈希表?如何运用于前端项目,算法实践

​哈希表,也叫散列表,是可以根据关键码值(key)而直接进行访问访问的数据结构。它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度。这个映射函数叫做散列函数,存放记录的数组叫做散列表。在JavaScript中,对象就跟哈希表很相似​

2022-12-07 21:23:22 582

原创 【网络工程】浏览器输入URL到页面加载过程发生了什么

首先用户在浏览器中输入域名,操作系统会检查浏览器缓存和本地的hosts文件中,是否有这个域名记录,有的话就从记录中找到对应的IP地址,完成域名解析。

2022-09-19 11:01:59 281

原创 【网络工程】浅显易懂TCP/IP协议 三次握手 四次挥手

浅显易懂TCP/IP协议 三次握手 四次挥手为什么要三次握手?是为了保证建立一个安全可靠的链接为什么要四次挥手? 为了保证断开连接前,消息传输都能够完成

2022-09-06 15:47:30 605

原创 【Vue】Vue的$ref属性为空对象或者为undefined问题及解决办法(涵盖uniapp/H5/微信小程序)

目录问题:获取this.$refs为空对象或者为undefined原因一:在uniapp中,非H5端只能用于获取自定义组件,不能用于获取内置组件实例(如:view、text)解决方法:ref在非H5端使用在自定义的组件原因二:使用了版本过低的调试基础库原因三:ref组件使用了条件渲染,即v-if、v-show,这些DOM节点在mounted无法被访问到,详细可以看 深入响应式原理-Vue.js原因四:使用了v-for循环动态绑定ref(大部分时请求后端数据动态渲染DOM),this.$ref[name]获取

2022-07-13 14:30:49 25493 1

原创 【uni-app】小程序与H5压缩图片上传

目录场景:上传图片过大导致接口响应时间过长方法:上传前进行图片压缩微信小程序压缩方法H5压缩图片方法简单使用场景场景:上传图片过大导致接口响应时间过长方法:上传前进行图片压缩话不多说直接贴代码我们先定义一个工具文件,类如utils.js微信小程序压缩方法/** * 递归压缩微信图片 * @param url 图片路径 * @param count 已递归次数(有可能压缩不到想要的大小,所以得限制次数) * @param isReturnBa.

2022-05-12 20:39:29 4647 5

原创 【uni-app】小程序实现微信授权登陆(附流程图)

微信授权登陆是比较常见的一种登陆方式,今天来总结下实现流程 进入授权登陆页面 初始化调用wx.login获取登陆凭证code(用户无感知) //封装微信获取用户code,避免嵌套login() { return new Promise((resolve, reject) => { wx.login({ success(res) { resolve(res); },

2022-05-03 19:41:52 18028 8

原创 【uview】u-upload组件钩子函数before-upload,this指向false问题

目录框架背景:uview1.0框架问题:钩子函数this指向被重写无法获取自身方法与data,H5正常,小程序不正常涉及组件:u-upload的before-upload,u-tabbar的before-switch原因:u-upload组件before-upload代码$u.$parent代码解决方法:方法一:页面去掉定义name;方法二:重写$parent方法,增加一个判断框架背景:uview1.0框架问题:钩子函数this指向被重写无法获取自身方法与

2022-04-28 16:43:44 1893 5

原创 【uni-app】小程序使用getImageInfo和widthFix实现图片按自身尺寸展示

场景:uni-app编译微信小程序图片在不设定高度宽度样式时有默认宽高(如下图),即使设置了image图片的mode属性也无法让图片按自身宽高展示。这种场景在非固定宽高的渲染网络图片时会遇到思路:使用uni.getImageInfo方法获取图片信息宽高,然后再赋值渲染#uni.getImageInfo(OBJECT)OBJECT 参数说明参数名 类型 必填 说明 src String 是 图片的路径,可以是相对路径,临时文件路径,存储文件路

2022-03-23 10:36:10 6825 4

原创 【uni-app】记vue+uniapp 项目H5微信分享失效的几个问题

最近在做uniapp项目H5端微信分享的时候遇到了几个疑难杂症,在网上找问题都没看到有响应的问题,特此记录一下,比较常见的问题可参考微信开发文档1.前置工作均做好,微信开发者工具调试wx.config/wx.ready......

2021-11-11 20:51:39 6403

原创 【webpack】jsencrypt加密报错:JSENCRYPT_VERSION is not defined问题解决方法

在没有更新jsencrypt版本号的情况下,打包后项目控制台突然出现JSENCRYPT_VERSIONisnotdefined出现问题的原因1.没有锁定版本号,^version代表兼容某个版本,版本号中最左边的非0数字的右侧可以任意,例如项目用的是"jsencrypt":"^3.0.0-rc.1",打包的时候会去拉取最新的3.0.0或者3.0.1版本的jsencrypt2.jsencrypt最新版本更新可能出现了bug,没有向下兼容去npm找到jsencrypt依赖,最近更新几...

2021-02-20 17:36:33 8424 2

原创 【JavaScript】数组 遍历方法是如何遍历稀疏数组

常用的遍历方法除了for循环,还有forEach、map、for of、filter、every、some、reduce、find1.forEach方法对数组的每个元素执行一次给定的函数用法:依次向 callback 函数传入三个参数:数组当前值,数组当前项的索引,数组对象arr.forEach(callback(currentValue [, index [, array]]))需要注意的是forEach()在被调用时不会改变原数组,尽管 callback 函数在被调用时可能会改

2020-06-04 16:09:44 720 1

原创 【JavaScript】JS基本类型的装箱与拆箱

在JavaScript中,有时候会遇到以下两种情况基本类型的变量, 直接调用方法 var item = 1234 item.toString() // '1234' var num = 123; num.toFixed(2) // '123.00' 众所周知只有Object类型才有方法,那上述代码基本类型为什么也可以调用方法,其中涉及到JavaScript的装箱。 装箱的...

2019-11-27 10:48:18 422 1

原创 【JavaScript】Symbol 基本数据类型

Symbol作为JavaScript ES6新的原始数据类型,表示独一无二的值。它有以下几个特性无法用new进行显式定义let a = Symbol() let b = new Symbol() // 报错typeOf返回的值为Symbolvar sym = Symbol('foo')typeof sym // 'symbol'Symbol属性是不可枚举的symb...

2019-11-06 14:55:20 312 1

原创 【Git】Git commit message的自我修养(规范化)

Git commit 的介绍从git官网我们可以知道Git commit作用是记录对仓库的修改在日常开发中,使用Git命令最多的应该就是Git commit ,然而书写规范的commit message能够提高开发人员的代码维护升级效率,在能快速方便排查问题。那么commit message的规范就十分重要了Git commit message的规范目前使用比较多的规范是Ang...

2019-10-28 09:09:57 1196 1

原创 【Vue】Vue-Router升级导致的Uncaught (in promise)问题

在升级了Vue-Router版本到到3.1.0及以上之后,页面在跳转路由控制台会报Uncaught (in promise)的问题这是什么原因呢?看vue-router的版本更新日志V3.1.0版本里面新增功能:push和replace方法会返回一个promise, 你可能在控制台看到未捕获的异常解决方法一:在调用方法的时候用catch捕获异常this.$r...

2019-09-17 21:00:55 12529 8

原创 【webpack】记webpack、gulp打包与jenkins部署遇到的几个问题

jenkins构建日志报错找不到对应node版本的依赖原因:构建环境升级了node环境,但是缓存了依赖,此时项目构建找不到新版本node的依赖解决办法:清除该项目的工作空间,即可重新拉取jenkins构建日志报错 拉取node-sass失败原因:项目的package-lock.json 锁定了版本号以及地址,从npm拉取失败,导致无法从淘宝镜像拉取相应的依赖...

2019-09-17 20:32:56 1153 2

原创 【Vue】Vue、element-ui的resetFields()方法重置表单无效问题及解决办法

问题:使用this.$ref['form'] .resetFields()无法重置表单项原因:1.没有给表单添加ref属性<el-form ref="form"></el-form>2.表单项el-form-item没有添加prop属性,prop属性需要与input框绑定的属性一致<el-form ref="form" :model="si...

2019-05-23 17:10:23 43531 27

原创 【jQuery】jQuery与vue实现点击下载图片 以及js实现批量打包下载图片

原理:用canvas的toDataUrl() API获取到图片的base64编码,再利用触发a标签事件进行下载。(单张图片下载) 多张图片批量下载导出压缩包需要引入jsZipjQuery实现点击下载主要代码,但主要部分代码也适用于vue$('.btn').click(function() { downloadIamge('http://ci.xiaohongshu.com/bb60f7......

2019-01-16 11:12:29 7019 18

原创 【Vue】非父子组件通信(踩坑)

开发中遇到非父子组件通信怎么办?通常方法一如下:创建一个eventBus.js,import Vue from 'Vue'export default new Vue()然后在两个通信的组件中引入此jsimport bus from './components/eventBus.js'在组件A中bus.$emit('id', 1)在组件B中// ...

2018-11-26 14:43:02 311 1

原创 【JavaScript】对数组增删元素

在数组 arr 末尾添加元素 item,可以使用push方法function append(arr, item) { return arr.push(item)}concat方法,合并数组或者元素function append(arr, item) { return arr.concat(item)}删除数组最后一个元素 function trunc...

2018-10-18 17:45:46 140

原创 【JavaScript】 删除数组中的元素的多种方式

移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr,结果返回新的数组function remove(arr, item) { var newArr = arr.slice(0) //slice返回一个新数组, for(var i = 0 ; i &lt; newArr.length; i++){ if(newArr[i] ==ite...

2018-10-18 15:12:27 366 1

原创 【JavaScript】数组求和的多种实现

数组求和的多种实现

2018-10-18 11:12:33 758 1

原创 【JavaScript】 寻找元素在数组的下标

如何写出判断数组下标的健壮性代码

2018-10-17 17:51:21 4092 1

原创 【Vue】用npm安装vue-cli项目 以及安装 stylus 和axios

1.安装npm2.进入目标文件夹,运行命令 vue init webpack myProject,然后就会开始安装了安装stylusnpm install stylus --save-devnpm install stylus-loader --save-dev安装axiosnpm install --save axios...

2018-10-08 15:17:53 328 1

原创 【Vue】Vue+Element-ui+OSS 上传图片

如何使用Vue+Element-ui+OSS实现前端上传图片到OSS存储服务

2018-09-25 14:58:47 8865 8

原创 [小程序开发(一)] 踩坑总结——用户授权

1.用户授权在开发小程序的前段时间,微信刚好升级了小程序接口。“获取 wx.getUserInfo 接口后续将不再出现授权弹窗”,只能通过让用户点击button的方式发起授权。升级的原因是要在某些时候需要用到数据时才让用户授权而不是一进去就授权。。。参考文档:https://developers.weixin.qq.com/blogdetail?action=get_post_info&amp;l...

2018-07-09 17:50:04 1108

原创 CSS3实现逐帧动画

实现逐帧动画一般用的图片 是雪碧图CSS3实现的方法是 添加animation.n { width: 75px; height: 75px; background-image: url(../img/shu6.jpg); background-size: 75px; /*infinite 指无限次循环 ,alternate指播放后反向 */

2017-10-31 16:14:18 2280

原创 【云服务器】阿里云ESC搭建wampserver后外网访问不到问题

这个问题的解决需要先在阿里云ESC控制台-》安全组-》配置规则,开放服务器的端口比如8088(按自己所需的端口)。然后在服务器的防火墙的高级设置里,设置出站规则,允许防火墙开放端口比如8088.

2017-07-07 22:26:47 1514 1

原创 thinkPHP5隐藏入口文件index.php后 读取不到资源问题

这个问题弄了一下午在隐藏入口文件后,这种方式会不成功 ,所以我们需要在配置文件config.php上添加'view_replace_str' => [ "__IMG__" =>'/SchoolWeb/public/static/css', ],把link换成IMG资源和JS资源读取不到 也照这种方式可以解决

2017-07-07 22:04:35 3283 3

原创 一道javaScript题目

题目:写一个函数fn(n),返回一个数组,里面有n个随机但不重复的数字。取值范围[2,32].本人解题思路function fn(n) { var arr = []; for (var i = 2;i &lt; 32; n++) { arr[i]=i; } arr.sort(function() { return 0...

2017-06-30 16:12:27 265

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除