- 博客(60)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 js深拷贝
JSON.parse问题 时间对象变成字符串 RegExp和Error对象会变成空对象 函数和undefied会丢失 有NaN，infinity为变成nul 如果对象由构造函数生成会丢失constructor属性的指向，指向Object深拷贝实现思路： 判断是否是对象 是对象， 判断是否是数组，递归调用添加到数组 判断是否是null,正则对象，日期对象，错误对象，是则直接赋值 ...
2021-03-15 23:40:24
259
原创 nvm node版本管理器
网上下载nvm安装程序 安装完后cmd输入 nvm 查看是否安装成功常用命令nvm list node版本列表 nvm install version 安装node版本 nvm uninstall version 卸载node版本 nvm use version 选择node版本
2021-03-15 22:55:24
201
原创 排序算法-快速排序
快速排序，是选择一个数作为基数（通常是中间数），然后把比他小的数放左边，比他大的数放右边，再递归调用方法处理左右两侧的数据；直至传入的数组只有一个元素为止function quickSort(arr) { var len=arr.length; if (len <= 1) { return arr; } var pivotIndex = Math.floor(len / 2); var pivot = arr.splice(pivotInd
2021-02-23 00:12:40
207
原创 排序算法-归并排序
将数组一分为二，直至只有一个元素function mergeSort(arr){ let len=arr.length; if(len<2){ return arr; } var middle=Math.floor(len/2), left=arr.slice(0,middle), right=arr.slice(middle); return merge(mergeSort(left),mergeSort(right));
2021-02-19 21:21:49
136
原创 排序算法-冒泡排序
相邻两个数比较，如果前面的数字大于后面的数则交换function sort(arr){ for(var i=0,len=arr.length;i<len-1;i++){ for(j=0;j<len-i-1;j++){ if(arr[j]>arr[i]){ let temp=arr[i]; arr[i]=arr[j]; arr[j]=temp;
2021-02-19 21:09:45
150
2
原创 排序算法-希尔排序
又名缩小增量排序，插入排序缺点：每次只能将数据移动一位function sort(arr){ var len=arr.length; var increment=Math.floor(len/2); while(increment!=0){ for(var i=increment;i<len;i++){ var temp=arr[i]; for(var j=i-increment;j>=0&&
2021-02-19 21:04:38
127
原创 排序算法-插入排序
从数组第二个元素开始，将数组分为左边（已排序）和右边（未排序）两部分将基数和左边的数依次比较，遇到比其大的，则将比较数字往后移一位，反之将基数赋值给当前下标数字（比较数字的后一位）function sort(arr){ var len=arr.length; var temp;//基准数 for(var i=1;i<len;i++){ temp=arr[i]; for(var j=i;j>0&&temp<ar
2021-02-19 20:45:54
162
1
原创 排序算法-选择排序
从第一个元素开始，选择一个数作为基数，依次和后面的数作比较，如果比较数字比基数小时相互交换第一种：比较时直接交换function sort(arr){ let len=arr.length; for(let i=0;i<len-1;i++){ for(let j=i+1;j<len;j++){ if(arr[i]>arr[j]){ let temp=arr[i];
2021-02-19 20:27:35
132
原创 正则学习笔记
正则学习 https://developer.mozilla.org/zh-cn/docs/web/javascript/guide/regular_expressions https://www.runoob.com/regexp/regexp-metachar.html ?: '123212'.replace(/1(?:2)/g,'a') //a32a 匹配的是所有12字符串 ?= '123212'.replace(/1(?=2)/.
2021-01-22 22:39:43
140
原创 typescript学习记录
变量类型：boolean，string，number数组 :number[] :Array<number>、元组：已知类型和数量的数组object，any，枚举 enum Color{red='red',blue='blue'}null,undefined,void,never类型断言（as语法，尖括号语法）变量声明：let const 解构 ...接口：可选属性只读属性（与const区别）额外的属性检查（接口定义参数时，用字符串索引签名或类型断言）
2021-01-18 08:34:19
143
原创 同时渲染大量数据优化-虚拟列表
在网页里面，在某个可视容器内（某个div）一次性渲染所有数据，其实用户也只能看见一部分数据，其余得通过滚动来查看；那么我们可以只渲染可见部分数据，不可见部分数据不渲染，通过上下padding来进行占位使其可以滚动；滚动得时候不断计算可所需展示数据的开始下标和结束下标来截取可视数据；<!doctype html><html lang="zh"><head> <meta charset="UTF-8"> <meta nam
2021-01-08 02:02:53
367
原创 同时渲染大量数据优化-时间分片
一次性渲染：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <
2021-01-08 01:13:09
270
原创 vue2兼容ie10+
1.安装babel-polyfill：npm install babel-polyfill --save-dev2.在main.js中引入babel-polyfill：import'babel-polyfill'3.修改webpack.base.conf.js配置文件的入口配置entry: { app: ["babel-polyfill", "./src/main.js"],}
2020-07-28 00:15:33
1293
原创 webpack编译时去掉console,debugger,注释
修改build/webpack.prod.conf.jsnew UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, drop_debugger: true, //去除debugger drop_console: true, //去除console
2020-07-16 02:09:22
1975
原创 vue项目webpack使用cdn
1.在index.html中引入vue和vue-router<script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script><script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>2.在build文件夹中的webpack.base.conf.js添加externals: .
2020-07-15 01:00:05
2165
原创 使用webpack构建雪碧图
新建一个文件spritesmith，初始化npm init -y；生成一个package.json文件 然后安装：npm install --save-dev webpack webpack-cli webpack-spritesmith 根目录下建一个webpack.config.js文件var path = require('path');var SpritesmithPlugin = require('webpack-spritesmith');module.exports = {
2020-07-14 03:15:31
567
原创 浏览器渲染过程及性能优化
渲染网页，浏览器需要处理一系列的中间过程，优化性能就是了解这个过程中发生了生什么-即CRP（critical rendering path,关键渲染路径）浏览器渲染流程： 先生成dom树 请求css，构建css对象模型，即cssOM dom树和cssOM树组合起来构建一个渲染树，最终输出一个包含所有可见节点及样式的渲染树 构建渲染树的过程： 1.从dom树根节点开始遍历每个可见节点 不可见节点（meta，s.
2020-07-07 01:24:11
576
3
原创 h5配置微信分享接口
自定义微信分享内容：1.首先你需要一个认证过的企业号，在使用微信JS-SDK对应的JS接口前，需确保已获得使用对应JS接口的权限，可以在微信官方JS-SDK文档查看2.引入js-sdk:http://res.wx.qq.com/open/js/jweixin-1.2.0.js3.配置参数：签名、生成签名的时间戳、生成签名的随机串一般是由后台生成返回的wx.config({ ...
2020-03-02 10:47:19
930
原创 npm install moduleName --save、--save-dev、 -g、npm moduleName的区别
npm install moduleName --save(用于正式环境)将项目模块写入到package.json的dependencies节点 安装模块到当前node_modules文件夹下 运行npm install时，会将模块下载到当前node_modules目录下npm install moduleName --save-dev（用于开发环境）将项目模块写入到package....
2020-01-06 16:49:34
677
原创 如何下载后台接口返回的流数据
downloadexcel (data) { // 下载excel文件 //data接口返回的流数据 if (!data) { return } let url = window.URL.createObjectURL(new Blob([data])) let...
2019-12-05 15:58:24
2109
原创 ios微信小程序点击自带关闭按钮之后再调用play()不能播放音频（安卓可以）
是因为ios自带关闭按钮之后，全局的BackgroundAudioManager的src属性也被清空了，需要重新赋值src属性
2019-12-02 16:45:08
460
原创 微信小程序swiper自适应高度
swiper组件如果没有高度是不显示的，网上有的朋友会用js去动态获取图片高度再给swiper设置高度（这种方法繁琐）我下面用css来让swiper自适应（bannerList为存放图片的数组，backgroundImg为图片地址）：1.在外侧给个容器，设置position为relative2.取出第一个图片，设置宽度100%,mode为widthFix（高度自适应）3.给swip...
2019-11-26 16:24:37
2057
1
原创 微信小程序不能使用async await的解决方案
1.下载regenerator-runtime库http://nodejs999.com/regenerator-runtime.rar然后将整个文件夹拷贝到小程序的utils文件夹中（可以是任意位置）2.在需要使用async函数的地方引入jslet regeneratorRuntime = require("../../utils/regenerator-runtime/run...
2019-11-20 15:33:00
4208
原创 关于cookie在项目中使用的一些问题
1.本地打开文件（本地打开的html文件）不能设置cookie，必须在服务器（本地服务器也可以）才能设置cookie2.ajax请求携带cookie的问题我是使用axios，网上说需要设置axios.default.withCredentials=true;（但是我不设置也能携带cookie）；请求接口的域名必须和存储cookie的域名一致才能成功携带cookie;服务器端响应头消...
2019-11-07 11:38:50
560
原创 vue加载前显示{{}}的解决办法
是因为在vue初始化之前，浏览器并不能识别{{}}这种写法，只会渲染成文本解决办法：1.添加v-cloak指令<div id="app" v-cloak></div><style> [v-cloak] { display: none; }</style>2.使用v-html或者v-text&l...
2019-11-05 13:29:55
1348
原创 微信小程序自定义导航栏
自定义导航栏需要在app.json中设置window的属性navigationStyle:custom导航栏主要分为状态栏+标题栏；导航栏=标题栏+状态栏状态栏高度可以通过wx.getSystemInfoSync().statusBarHeight获取；主要是标题栏（胶囊按钮）ios和安卓有差异；标题栏高度=胶囊高度+状态栏到胶囊按钮间距*2；经过对比发现：胶囊高度=...
2019-11-05 09:58:52
1100
原创 数据库输出的换行符在页面不能正确显示换行
方法1：直接在外层容器设置css属性，white-space:pre-wrap方法2：换行符在js中用\r\n表示，拿到文字内容，使用字符串的replace方法全局替换即可，string.replace(/\r\n/g,'</br>')...
2019-10-10 11:16:48
1785
原创 js事件自动触发
有些时候会遇到网页加载完成自动执行事件的情况，这里以点击事件为例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1...
2019-07-29 16:27:40
3375
原创 js实现复制文本
方法一：使用range和seletion对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...
2019-07-05 12:48:36
2087
原创 js点击元素之外的地方隐藏该元素
有时候我们会有这种情况，点击按钮（或者指定元素）显示一个菜单栏，点击按钮和菜单栏外的区域隐藏菜单栏；主要运用阻止事件冒泡来实现；下面是全部代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" con...
2019-04-28 11:11:12
5102
原创 axios上传文件
主要是用FormData对象的使用<template> <div class="cancelRequest"> <div>姓名：<input type="text" v-model="name"></div> <div>头像：<input type="file" ref="f...
2019-03-20 10:59:46
19008
4
原创 axios取消请求
有时候我们需要在输入框实时查询数据，但是由于是异步请求，有可能前面的请求结果会慢于后面的请求导致我们的请求结果错误，而且一直请求增加了网站负担，所以需要在连续输入时取消前面的请求，只请求最后一次<template> <div class="cancelRequest"> <input type="text" v-model="value"...
2019-03-20 10:50:33
690
原创 本地上传图片在线预览
主要就是运用URL.createObjectURL()方法创建临时的图片地址<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...
2019-03-20 10:25:15
449
原创 vue+koa+mysql交互案例
此文主要记录学习过程koa中结合vue和mysql，进行数据交互的案例，vue和mysql的相关知识不做介绍，自行安装整体目录结构：koa文件夹是主要内容，在vue项目的根目录添加一个koa文件夹用于放置服务端的代码db/index.js主要是放置连接数据库的配置文件，代码如下：let mysql=require('mysql')let connection=mysql.cre...
2019-03-19 14:52:22
1226
原创 前端video标签播放m3u8格式视频
直接使用video.js插件就行了video插件用法：https://www.awaimai.com/2053.html以下是全部代码：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>前端播放m3u8格式视...
2018-08-10 16:55:36
61850
19
原创 自定义video的controls
主要用到的video属性和方法：duration 视频总时长，单位秒currentTime 当前已播放视频时长，单位秒muted 设置视频静音(true||false)ontimeupdate 当视频当前播放时长改变时触发的事件play() 播放视频pause() 暂停视频接下来上代码（播放按钮和静音键样式比较粗糙，看功能就行）<!DOCTYPE...
2018-08-08 16:33:31
10094
原创 js获取元素的高度宽度
1）clientWidth和clientHeight该属性指的是元素的可视部分宽度和高度，即padding+content，如果没有滚动条，即为元素设定的高度和宽度，如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高2）offsetWidth和offsetHeight这一对属性指的是元素的border+padding+content的宽度和高度，该属性和其...
2018-07-19 15:47:46
1601
单独springMVC项目所需要的jar包是哪些，还有框架的包一般都是怎么选择的？
2016-06-03
TA创建的收藏夹 TA关注的收藏夹
TA关注的人