- 博客(118)
- 收藏
- 关注
RSS订阅
原创 js如何判断一个元素在可视区域内
下方通用示例html的dom和公共js代码：<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g
2021-11-08 23:11:41
9519
1
原创 webpack原理
看书《深入浅出Webpack》Webpack就是读取配置config，从配置的入口开始递归找模块，通过loader将模块进行转换（比如ES6转ES5、解析json文件、postCss预处理），在整个构建过程中抛出各个阶段的事件，plugins监听事件去做事情，处理完后输出结果。Webpack的运行流程是一个串行的过程，从启动到结束会依次执行以下流程。初始化参数开始编译确定入口编译模块完成模块编译输出资源输出完成Webpack的事件流机制基于Tapable，核心Compiler对象
2021-10-24 18:27:40
44
原创 git批量clone脚本
一、脚本代码batchClone.sh#!/bin/bash#变量#subgroup需要替换subgroup='common-group';#access_token需要替换，从gitlab右上角用户头像->Settings->Access Tokens获取access_token='xxxxxxxxxxxxxxxxxx';#获取项目列表接口地址url="http://example.com/api/v4/projects?simple=true&membership=
2021-05-11 11:30:04
2450
原创 echarts饼图百分比不为100%
由于需要兼容低版本ie，使用的echarts版本较低，为2.2.x。当前版本有饼图百分比不为100%的问题，如数据为如下：[{ name: ‘测试1’, value: 1 },{ name: ‘测试2’, value: 1 },{ name: ‘测试3’, value: 1 }]当前版本饼图计算的百分比均为33.33%，最新版本计算的百分比是33.34%、33.33%、33.33%。百度了一些文章是说用了最大余数法，但是在外部使用插件无法使用这个算法，又不能改数据。只能修改源码。遇到的问题：
2021-05-11 09:49:36
5604
原创 react-monaco-editor使用
1.版本"react": "^17.0.2","@craco/craco": "^6.2.0","monaco-editor": "0.27.0","monaco-editor-webpack-plugin": "4.1.2",2.使用react-monaco-editor代码import React, { useState, useRef } from 'react';import MonacoEditor from 'react-monaco-editor';function ME
2021-11-23 17:15:13
5000
原创 vscode js对象转json字符串
插件JSON Parse & Stringify使用1.js对象转json字符串选中js对象，ctrl+shift+p调出命令输入框输入JSON: Stringify Javascript Object，并选中，js对象转为json字符串2.json字符串转json对象选中json字符串，ctrl+shift+p调出命令输入框，输入JSON: Parse Stringified JSON，并选中，json字符串转为json对象...
2021-11-23 17:03:35
2513
原创 antd EditableProTable 如何修改校验样式
组件库地址：https://procomponents.ant.design/components/editable-table一、默认校验错误样式1.效果图2.对应代码columns中“活动名称”的配置项{ title: '活动名称', dataIndex: 'title', width: '30%', formItemProps: { rules: [ { required: true, whitespace: true,
2021-11-23 16:43:44
1552
原创 前端工程中使用iconfont图标
1.代码中使用iconfont图标import '@/assets/iconfont/iconfont.css';<span class="iconfont icon-xinxi" title="信息"></span>2.增加iconfont图标https://www.iconfont.cn/在 资源管理-我的项目 中新增项目，将svg图标上传到项目中。点击 下载至本地 ，解压后将 iconfont.css、iconfont.ttf、iconfont
2021-11-23 16:11:37
547
原创 MemoryRouter离开页面弹窗确认
版本：都是最新版本React17 + React-Router5使用create-react-app搭建的工程0.前言可能许多人和我的场景一样，第2点讲述了我的问题发生背景，可以跳过，但这也是我选择MemoryRouter的原因。使用MemoryRouter只是一种方式，可以看下第4点的其他方式。1.需求描述离开表单页前，如果表单还没有保存，需要让跳转路由的操作停下来，弹出确认弹窗让用户判断是否的确是不保存离开页面。2.问题发生背景本来是用HashRouter做的SPA应用，就是#/xxx这
2021-10-15 22:14:09
1428
1
原创 nginx指定目录安装
很简单的1.先下载到本地下载地址：http://nginx.org/en/download.html比如我要下载的是1.18.0版本，点击下载：2.远程服务器上打开你的远程服务器链接工具，连接目标服务器。进入指定安装目录，比如我要把nginx安装在根目录/cxy/domains文件夹下面，就把下载好的nginx-1.18.0.tar.gz拖到这个目录下。在命令行中进行解压：cd /cxy/domainstar -zxvf nginx-1.18.0.tar.gz目录下会多一个nginx
2021-10-15 20:38:55
7524
1
原创 微前端方案
1.iframe传统的是使用iframe,切换iframe的src实现切换页面。iframe性能差，不能使用redux（因为换掉页面的话，就把window对象换掉了，redux是同一个window下使用1个），每次打开菜单页面都要重新加载所有的静态资源（虽然使用多页面打包能缓解这个问题带来的白屏影响，因此这个可以用在多页面打包中）。2.react-routerApp.js入口文件中使用菜单框架组件，嵌入路由切换组件，即原App.js中的内容。菜单框架组件内容区域展示props.children。优点是
2021-10-08 15:07:56
157
原创 js中undefined是对象吗
六种原始类型：number、string、null、undefined、boolean、symbol。一种引用类型：obejct。但new Number()返回的是object：Number 对象，该对象是原始数值的包装对象。undefined的原型也是obejct，在不同浏览器、版本环境下，类型不同。如下：浏览器版本类型ie8[object Object]ie9[object Window]ie10及以上、谷歌[object Undefined]
2021-10-08 15:06:34
935
原创 ueditor修改字体无效
ueditor中切换字体，换行、失焦操作后，全选修改字体，部分字体样式未修改。问题在github上也有：https://github.com/fex-team/ueditor/pull/3222根据issue上@wangzh1010的方法还会有问题：1.文本框内按backspace或delete键清空，再进行操作，第一行文本需要修改2次字体才会生效。原因是清除到空时，增加了占位符<br/>，改成空或domUtils.fillChar即可。domUtils.fillChar设置的是\u200B
2021-03-02 10:03:57
1460
原创 20201019 浏览器缓存
浏览器缓存，又称为前端缓存，这里复习一下最常用的三种，Cookie、LocalStorage和SessionStorage。打开谷歌浏览器F12->Application，左侧菜单中有：LocalStorage、SessionStorage、IndexedDB、Web SQL和Cookie。Cookie常用于网页登录机制：前端请求登录接口，服务端在响应时写入SetCookie，此后在Cookie的有效期内，前端发的请求都会自动带上这个Cookie一齐发送给服务端，服务端校验Cookie则知道此客户端
2020-10-26 15:56:30
133
原创 20201022 加密技术
这里讲解一下数字信封、数字摘要、数字证书、数字签名都是什么，有什么特点和用途。从加密方式讲起。有对称加密和非对称加密：对称加密就是对一段原文使用同一串密钥进行加密和解密；非对称加密就是有公钥和私钥，发送方通过请求公钥获得公钥对原文进行加密，接收方在服务端通过私钥进行解密。对称加密具有加密后密文大小与原文大小相近的优点，但是由于加解密使用同一串密钥，一旦黑客通过抓包获得密钥即可对原文进行解密和篡改，因此安全性不高。非对称加密由于用于解密的私钥在服务端，不会通过网络传输更安全，但是加密后的密文大小比原文大小大
2020-10-26 15:56:01
297
原创 ES6-新内容（四）class、Decorator、Module
一、Class1.与传统构造方法对比传统构造方法：function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};var p = new Point(1, 2);ES6引入了Class（类）这个概念，作为对象的模板：class Point { constructor(x,
2020-07-22 11:16:35
398
原创 20200628-20200720《React进阶之路》读书笔记
《React进阶之路》第1章 初始ReactReact通过引入虚拟DOM、状态、单向数据流等设计理念，行程以组件为核心，用组件搭建UI的开发模式，理顺了UI的开发过程，完美地将数据、组件状态和UI映射到一起，极大地提高了开发大型Web应用的效率。1.React的4个特点声明式的视图层：采用JSX语法来声明视图层。简单的更新流程：从状态到UI这一单向数据流让React组件的更新流程清晰简洁。灵活的渲染实现：React并不是把视图直接渲染成最终的终端界面，而是先把它们渲染成虚拟DOM。虚拟DOM
2020-07-21 08:38:59
452
原创 sequelize.import is not a function
使用koa2+sequelize+mysql搭建项目过程中，跟着百度的各种文章写（比如这个挺完整的：https://www.cnblogs.com/zjknb/p/12149420.html），然后npm start运行时就报了sequelize.import is not a function这个问题，各种百度，也怀疑过sequelize版本问题，可是就没找着能用的6.3版本的文档，然后重新安装了低版本的npm install sequelize@^5.x.x --save，就没这个问题了。...
2020-07-13 14:47:59
2633
9
原创 20200430-20200628《高性能JavaScript》读书笔记
《高性能JavaScript》本书小结汇总第1章 加载和执行</body>闭合标签之前，将所有的<script>标签放到页面底部。这能确保在脚本执行前页面已经完成了渲染。合并脚本。页面中的<script>标签越少，加载也就越快，响应也更迅速。无论外链文件还是内嵌脚本都是如此。有多种无阻塞下载js的方法：使用<script>标签的defer属性；使用动态创建的<script>元素来下载并执行代码；使用XHR对象下载js代码并注入
2020-06-28 18:32:03
628
原创 ES6-新内容（三）Promise对象
一、Promise对象1.特点Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。一旦状态改变，就不会再变，任何时候都可以得到这个结果。有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。2.基本用法var promise=new Promise...
2020-06-23 09:39:15
147
原创 20200415-20200430《学习JavaScript数据结构与算法》读书笔记
《学习JavaScript数据结构与算法》第1章 JavaScript简介第2章 数组pop/pushshift/unshiftconcatevery/some/forEach/map/filter/reducereverse/sortindexOf/lastIndexOftoString/join第3章 栈后进先出（LIFO，Last In First Out）Stac...
2020-04-30 13:28:45
494
转载 eslint报错 import/no-unresolved
Unable to resolve path to module ‘views/homepage/home’.eslint(import/no-unresolved)推荐解决方案：https://stackoverflow.com/questions/41769880/how-to-manually-add-a-path-to-be-resolved-in-eslintrc...
2020-04-26 17:29:58
9184
1
原创 201911-202004《JavaScript设计模式》读书笔记
阅读《JavaScript设计模式》（2009），电子版资源：链接：https://pan.baidu.com/s/1smWE-Xcwsapn65jnlw8cvg提取码：hkke《JavaScript设计模式》第一部分 面向对象的JavaScript第1章 富有表现力的JavaScript1.编程风格：0）目的，普通方法：function startAnimation(){ ...
2020-04-16 08:41:05
191
转载 ie报错 文档语法不正确
原文链接：https://blog.csdn.net/Jason_K0/article/details/53301402
2020-04-09 20:05:11
520
转载 JS函数节流和函数防抖
https://juejin.im/post/5a35ed25f265da431d3cc1b1#heading-10函数防抖：function debounce(fn, wait) { var timer = null; return function () { var context = this var args = arguments if (...
2020-04-08 13:09:47
81
转载 ie8 css旋转
参考文章：http://www.5imoban.net/jiaocheng/CSS3_HTML5/2017/0622/2567.htmlhttp://blog.sina.com.cn/s/blog_783da6910102vefk.html旋转css：transform: rotate(90deg);ie8下：rollCount=0/1/2/30:90deg1:180deg2:2...
2020-04-07 14:24:41
896
原创 20200316-20200322《图解HTTP》读书笔记
《图解HTTP》一、过程客户端发出请求，通过DNS服务找到IP地址，通过ARP协议找到MAC地址并开始在路由器中转，中转开始时，利用TCP协议将请求报文分割成报文段，在中转的同时可靠（三次握手）地转发报文段，每到达一个路由器就利用TCP协议重组报文段为请求报文并开始下一次中转。最终到达正确IP的服务器。服务器再通过相同的方式回传给客户端。http协议就是这个请求-响应的过程的规范协议。二...
2020-03-22 16:29:11
242
原创 低版本antd二级表头、onRow方法扩展
查看Demo->代码仓库：https://gitee.com/chenxiaoyi27/rc-compdemo代码路径：src/views/demo/exTable.js效果图一、表格分组利用原生table的colSpan和rowSpan。表头columns需写一个children来添加二级表头，示例代码如下：this.columns = [ { title: '姓名', ...
2020-03-16 07:11:34
2468
转载 ie8内存溢出文章推荐
【JS魔法堂：再识IE的内存泄露】https://cloud.tencent.com/developer/article/1023928【JS中的垃圾回收与内存泄漏】https://cloud.tencent.com/developer/article/1356698
2020-03-13 20:15:51
189
原创 window.print react+antd 分页打印 去掉页眉页脚
框架：react+antd一、代码：window.print();二、分页打印+谷歌打印的css样式我这里是表格的打印，表格数据很多，打印时需要分页。浏览器打印工具自动分页，Table的表头会自动显示在第2页上，但是顶着第2页的顶部，没有上边距，且上一页页尾也没有下边距，还有表格行拆开的样式。为了解决这些样式丑的问题，决定手动分页。未打印状态显示完整的1个表格，打印状态时，将1个表格拆...
2020-01-05 11:11:22
2823
1
原创 201908-201911《Web高效编程与优化实践》读书笔记
阅读《Web高效编程与优化实践》（2018年），电子版资源：链接：https://pan.baidu.com/s/1YGnuqcG8o4pZdj4HDaRtvA提取码：s2t2《Web高效编程与优化实践》第1章 HTML/CSS优化有一些css的巧妙用法，具体可以去看《精通CSS》。CSS代替JS还是有局限性的。能使用HTML、CSS的就不要使用JS。标签语义化很重要，不要全部...
2019-11-26 14:24:20
243
原创 201908-201908《编写高质量代码-Web前端开发修炼之道》读书笔记
阅读《编写高质量代码-Web前端开发修炼之道》（2010年），电子版资源：链接：https://pan.baidu.com/s/1la3J3HiyLiPvNIRBU-Hkgg提取码：s30z《编写高质量代码-Web前端开发修炼之道》第1章 从网站重构说起注重代码可维护性，因为产品是需要不断更新迭代的，所以代码如果很方便维护的话对于自己、他人、团队都是提高效率的。结构、样式、行为的分...
2019-11-26 14:21:13
177
原创 ES6-新内容（二）Proxy和Iterator
1.Proxy和Reflect拦截2.Iterator遍历器一、Proxy和Reflect1.概念：Proxy代理，拦截作用。2.语法：var proxy = new Proxy(target, handler);target是目标对象，handler是拦截不同方法的声明。handler事件：get、set、has、deleteProperty、ownKeys、getOwnProp...
2019-10-25 12:16:34
213
2
转载 react 双击
this.count=0;onDoubleClick() { // 双击 if (e.node.props.eventKey.indexOf('-') > -1) { this.count += 1; setTimeout(() => { this.count === 2 ...
2019-10-21 17:08:54
3260
原创 critical dependencies
critical dependencies: the request of a dependency is an expression报警告原因：let src='xxxx';<img src={require(src)} />改成字符串模板即可，如下：let src='xxxx';<img src={require(`${src}`)} />...
2019-10-11 13:58:09
1028
原创 vue app开发组件总结
忙了1个月了都没时间总结一下，今天终于暂时解放了。前段时间在用vue开发app组件，都是些翻页勾选跳转的逻辑吧，更深刻认识到了什么时候该用什么，看起来有用的东西全加上了等于没什么卵用。。。一、vue开发1.数组及时更新视图问题要用官方文档上写的那几个方法，才能及时更新视图，不然数据更新了视图还是老样子。除此之外：清空数组，及时更新视图，可以用arr.splice(0)，arr=[]没什...
2019-09-18 17:12:00
572
原创 后台接口contentType为image时 前端img标签如何接收
如标题，在浏览器中network的preview里预览接口返回的数据，直接显示一张图片。前端img标签的src里，应该直接写上这个接口的url和拼接的参数，当然请求只能是get的，如下：<img src="http://ip:port/example/do?param=text" />...
2019-08-23 19:24:38
4154
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人