- 博客(29)
- 收藏
- 关注
RSS订阅
原创 React 后台管理系统项目
该项目架构是纯手工搭建的，并非使用脚手架搭建～相关技术react + redux + react-router + sass + antd + eslint + webpack项目预览地址 https://jesonman.github.io/react-admin-demo/项目源码地址 https://github.com/JesonMan/react-admin/相关页面登录首...
2019-10-10 15:40:12
18595
13
原创 JavaScript 实现找出字符串中第一个没重复的字符
JavaScript 实现找出字符串中第一个没重复的字符function getOnceChar(str) { const map = {}; for (let i = 0; i < str.length; i++) { if (!map[str[i]] && str.indexOf(str[i], i + 1) === -1) { return str[i]; } map[str[i]] = true; }}getOnceChar('aaaabbbc
2022-03-22 20:53:26
1806
原创 直播弹幕边缘实现淡化效果
// 在弹幕容器加上一下样式即可mask: gradient(linear,right 30%,right top,from(#000),to(transparent));-webkit-mask: -webkit-gradient(linear,right 30%,right top,from(#000),to(transparent));
2021-10-27 13:55:37
347
原创 IOS15.0 canvas或html2canvas绘图失败原因
在IOS新版本15.0及以上，使用canvas或html2canvas生成海报时，字体使用-apple-system，会导致海报生成失败（并且会导致页面一直重新加载），页面也没有报错，排查该问题比较麻烦（只能通过代码一块一块放开来定位bug的根因）。解决方案：就是将字体-apple-system去除即可。...
2021-10-13 10:24:19
1279
原创 javascript 浮点数计算精度问题的解决方案
// 获取小数位数function getDecimalCount(num) { let count; try { count = num.toString().split('.')[1].length } catch(e) { count = 0 } return count;}// 修复精度问题--加法function decimalAdd(num1, num2) { if (num1 == null || num2 == null) return; co.
2021-09-22 11:30:32
5581
1
原创 微信公众h5页面如何在pc端调试
方法一：微信开发者工具方法二：1、正常访问会提示请在微信上打开2、我们可以用一些抓包工具（Charles等），抓微信端（移动端微信/pc端微信都可以）访问该页面时携带的cookie信息3、修改浏览器的cookie信息，将抓包到的cookie信息填入到浏览器cookie中去，这样页面就能在pc访问，然后就可以开心的调试了...
2021-09-08 21:31:16
5715
原创 web前端倒计时实现（解决前端倒计时误差问题）
/** * @param {date} expires - 过期时间 * @param {date} sysTime - 系统时间，默认为客户端当前时间 * @param {number} interval - 倒计时间隔，默认为1秒 * @param {function} callback - 回调函数，回调数据格式如：{ d: 1, h: 1, m: 22, s: 58, ms: 4 }，没回调数据时表示已结束。 */function startCountDown({ expires, sy
2021-08-31 20:13:55
3982
原创 移动端键盘收起，页面没能恢复原状的解决方案
移动端因键盘引起的页面异常如下：解决方案如下：// 优化移动端键盘收起时页面没能恢复原状的问题let inputs = document.getElementsByTagName('input');let timer = null;for (let input of inputs) { input.addEventListener('blur', function() {...
2019-12-31 22:12:32
1474
1
原创 双向数据绑定的简单实现
代码如下，在页面修改input的内容，data.value的值会自动随着改变，在控制台修改data.value的值，input的内容也会随着改变。<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <title>双向数据绑定Demo</t...
2019-11-27 22:12:47
766
原创 Linux 常用命令
cd /home：进入 / home 目录pwd：显示工作路径ls -al：显示所有文件和目录的详细信息mkdir dir：创建一个叫做 dir 的目录touch file：创建一个叫做 file 的文件mv a new_a：移动或重命名一个文件或目录cp file new_file：复制一个文件cp -a dir new_dir：复制一个目录rm file：删除一个叫做 fil...
2019-11-13 19:08:01
2868
原创 web 前端性能优化汇总
一、 网络层面优化减少http请求，合并资源（js、css、图片）减少资源体积，压缩资源（js、css、图片）大量数据加载或大量图片加载时使用懒加载或预加载优化使用按需加载，加快首屏渲染速度利用http缓存机制，对资源进行缓存网站用到很多域名时，可使用DNS预解析，提前解析域名使用CDN给网站静态资源加速二、 js 层面优化尽量减少DOM操作，DOM操作尽量做到批量更新，减...
2019-11-13 16:27:41
13125
9
原创 ES6 学习笔记
一、 let 和 const 命令let 命令声明的变量只在声明所在代码块内有效，变量也不会自动提升。不允许在相同作用域内，重复声明同一个变量。暂时性死区，只要块级作用域内存在let命令，它所声明的变量就“绑定”这个区域，不再受外部的影响。var tmp = 123;if (true) { tmp = 'abc'; // ReferenceError let tmp;...
2019-11-01 18:21:25
3782
原创 ES6 Decorator 装饰器
Decorator 装饰器简介装饰器（Decorator）是一种与类（class）相关的语法，用来修改类或类方法。装饰器是一种函数，写成@ + 函数名。它可以放在类或类方法的定义前面。@frozenclass Foo { @configurable(false) @enumerable(true) method() {} @throttle(500) exp...
2019-11-01 18:13:19
225
原创 ES6 async 函数
async 函数基本用法async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async...
2019-11-01 10:51:40
408
原创 DNS预获取 dns-prefetch
概要DNS预获取是一种DNS预解析技术，当你浏览网页时，浏览器会在加载网页时对网页中配置了预获取的域名提前进行解析缓存，这样一来，网站中使用到这些域名就不用再去DNS服务器解析了，直接使用预先解析好的就可以。这样可以减少用户等待时间，提高用户体验。使用方式在html头部加入类似以下代码即可<link rel="dns-prefetch" href="//cdn.img.com">...
2019-10-15 18:51:51
2283
原创 js的宏任务和微任务
概念宏任务：当前执行栈中执行的代码称为宏任务。（主代码块，定时器等等）。微任务：当前宏任务执行完，在下一个宏任务开始之前需要执行的任务称为微任务。（promise.then，proness.nextTick等等）。宏任务的事件放在事件队列中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。运行机制在执行栈中执行一个宏任务。执行过程中遇到微任...
2019-10-15 16:09:15
159
原创 React封装echarts
封装代码如下import React, { Component } from 'react';import echarts from 'echarts';class MyEcharts extends Component { constructor(props) { super(props); this.myRef = React.createRef(); } compon...
2019-10-10 16:02:17
2995
原创 远程访问 Linux 的命令
可以通过ssh命令连接。命令使用语法：指定用户：# 以下两种方式都可以ssh root@192.168.0.1ssh -l root 192.168.0.1如果修改过ssh登录端口的可以：# 以下两种方式都可以ssh -p 12333 root@192.168.0.1ssh -l root -p 12333 192.168.0.1...
2019-09-27 18:21:49
142
原创 webpack 中配置 devtool 的作用
webpack官网的解释如下 ：当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助，因为你可能需要准确地知道错误来自于哪个源文件。为了更容易地追踪错误和警告...
2019-07-16 16:05:24
708
转载 eslint 常用规则说明
"no-alert": 0,//禁止使用alert confirm prompt"no-array-constructor": 2,//禁止使用数组构造器"no-bitwise": 0,//禁止使用按位运算符"no-caller": 1,//禁止使用arguments.caller或arguments.callee"no-catch-shadow": 2,//禁止catch子句参数与外部作...
2019-07-05 11:57:34
112
原创 TypeScript 入门教程
一、介绍TypeScript是JavaScript的超集（超集表示前者包含了后者），扩展了JavaScript的语法。TypeScript无法直接运行于浏览器上，需要编译转换成JavaScript才可以在浏览器上运行。二、优缺点优点通过静态类型检测，可以在编译期把很多bug暴露出来，借助IDE可以在编码时实时发现编码错误，提高代码的健壮性。方便重构代码，在编译时就可以发现重构时出现...
2019-07-01 18:01:38
1795
原创 H5移动端视频退出全屏事件
移动端视频默认全屏播放，用户可点击视频自带退出全屏按钮来退出全屏。当我们想在用户点击退出全屏时，顺便关闭视频，这时就要用到监听视频退出全屏事件。示例：<div id="ctn" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 10;"> &...
2019-07-01 15:38:57
4649
2
原创 webpack 常用plugins
web-webpack-plugin：方便的为单页应用输出 HTML，比 html-webpack-plugin 好用。provide-plugin：从环境中提供的全局变量中加载模块，而不用导入对应的文件。hot-module-replacement-plugin：开启模块热替换功能。difine-plugin：定义环境变量。commons-chunk-plugin：提取公共代码。ex...
2019-06-27 14:59:38
288
原创 webpack 常用loaders
css-loader：加载 css，支持模块化、压缩、文件导入等特效。style-loader：把 css 代码注入到 JavaScript 中，通过 DOM 操作去加载 css。sass-loader：把 sass/scss 代码转换成 css。less-loader：把 less 代码转换成 css。stylus-loader：把 stylus 代码转换成 css。raw-load...
2019-06-27 14:39:52
257
转载 webpack 性能优化
一、优化构建速度webpack在启动后会根据entry配置的入口出发，递归得解析所依赖的文件。这个过程分为搜索文件和把匹配的文件进行分析、转换的两个过程，因此可以从这两个角度来进行优化配置。1.1 缩小文件的搜索范围搜索过程优化方式包括：resolve字段告诉webpack怎么去搜索文件，所以首先要重视resolve字段的配置：设置resolve.modules: [path.r...
2019-06-06 11:03:24
622
原创 gulp 入门教程
一、安装先安装node（网上有很多node的安装教程）然后执行以下命令即可安装gulp命令行实用程序npm install --global gulp-cli创建项目目录并导航到该目录mkdir my-projectcd my-project在项目目录中创建package.json文件npm init在devDependencies中安装gulp...
2019-05-31 18:19:40
1078
转载 移动前端开发之 viewport 的深入理解
移动前端开发之 viewport 的深入理解在移动端设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的 viewport 了，只有明白了 viewport 的概念以及弄清楚了跟 viewport 有关的 meta 标签的使用，才能更好地让我们的网页适配不同分辨率的移动设备。一、viewport 的概念通俗地讲，移动设备上的 viewport 就是设备的屏幕上能用来显示我们的网页...
2019-05-31 18:10:37
169
原创 webpack 学习笔记
webpack 学习笔记一、概念本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图，此依赖图会映射项目所需的所有模块，并生成一个或多个 bundle 。入口（entry）入口（entry）指示 webpack 应该使用哪个模块来作为构建内部依赖图的开始。进入入口后，webpack 会找出有哪些模...
2019-05-31 17:48:07
1251
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人