- 博客(82)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 好文收集
八大前端安全问题：http://web.jobbole.com/92875/前端工程师如何理解 TCP/IP 传输层协议：https://blog.csdn.net/csdnnews/article/details/88684901
2020-11-06 09:16:12
186
转载 ng6中，在HTTP拦截器里，异步请求数据，之后再返回拦截器继续执行用户请求的方法研究
一、问题背景： 上面绕口的标题不知道大家看不看的懂。通常我们用拦截器就是两个目的，1、在请求头里统一添加请求头。2、对响应结果预先处理。 我现在项目就是利用拦截器，在请求头里增加：'Authorization': this.storage.token 的请求头。// 最精简的一个拦截器 。一会儿 会在这个代码基础上增加后续讨论的代码intercept(req: HttpRequest<any>, next: HttpHandler): Observab...
2021-11-16 09:47:36
643
原创 【NG-ZORRO】nz-upload上传状态500时，无法获取返回数据
解决：查找官网，使用nzCustomRequest方法自定义自己的上传实现获取HttpErrorResponse 返回 onError 状态完整代码 customReq = (item: UploadXHRArgs) => { // Create a FormData here to store files and other parameters. const formData = new FormData(); // tslint:disabl.
2021-10-13 15:05:31
720
原创 【ECharts】柱形图间距过小，pictorialBar导致的tooltip数据错误
参考链接：https://segmentfault.com/a/1190000021296139?utm_source=tag-newest
2021-10-11 10:44:24
909
2
转载 【HTTP】Request Header 和 Response Header字段详解
Request HeaderHeader 解释 示例 Accept 指定客户端能够接收的内容类型 Accept: text/plain, text/html Accept-Charset 浏览器可以接受的字符编码集。 Accept-Charset: iso-8859-5 Accept-Encoding 指定浏览器可以支持的web服务器返回内容压缩编码类型。 Accept-Encoding: compress, gzip Accept-Lan
2021-05-10 17:37:09
1973
转载 SyntaxError: Invalid regular expression: invalid group specifier name
问题苹果最新版浏览器报错解决打包后的js不支持原生的双斜线格式的正则 //phone: /^1[3456789]\d{9}$/// 改为phone: new RegExp("^1[3456789]\\d{9}$")
2021-03-29 14:37:26
4597
转载 413 Request Entity Too Large（请求实体太大）
问题上传文件出现问题 413 Request Entity Too Large：可以看到请求的body的大小，在Content-Length后显示，Nginx默认的request body为1M，小于我们上传的大小解决找到主机的nginx.conf配置文件，在http{ }中加入 client_max_body_size 10m; 重启nginx：/etc/init.d/nginx restart...
2021-03-10 15:22:50
1125
转载 Event Loop 事件循环
全文：https://juejin.cn/post/6844903968292749319JS 运行机制JS 的执行是单线程的，所谓的单线程就是事件任务要排队执行，前一个任务结束，才会执行后一个任务，这就是同步任务，为了避免前一个任务执行了很长时间还没结束，那下一个任务就不能执行的情况，引入了异步任务（js 的异步事件就是依赖于事件循环机制）的概念。JS 运行机制步骤所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。 主线程之外，还存在一个.
2021-03-05 15:10:34
131
转载 Chrome浏览器书签同步不及时怎么办？
手动强制同步chrome浏览器书签有2种方法：方法一：地址栏输入：chrome://sync-internals 中间那列中下方，点击“Stop Sync (Keep Data)”，之后点击“Request Start” 两个设备上的Chrome都进行一次这个操作方法二：地址栏输入：chrome://sync-internals chrome://sync 点 Trigger GetUpdates如果不行的话，重启chrome再重复以上操作，附图如下：...
2021-02-04 14:59:16
1949
原创 【d3】树图-动态加载数据（附效果图）
效果： 包含代码点：1、动态请求数据并更新参考链接：https://www.cnblogs.com/shihuc/p/6064448.htmllet sideBar= { open(type, d) { // ...http请求... // 数据成功请求后，将数据push到d.children d.children....
2021-01-14 16:02:17
101
原创 【d3】树图-各种效果集合（附效果图）
效果：包含代码点：1、动态请求数据并更新参考链接：https://www.cnblogs.com/shihuc/p/6064448.htmllet sideBar= { open(type, d) { // ...http请求... // 数据成功请求后，将数据push到d.children d.children.push(data); // 然后手动调用重新渲染svg函数 _this.releS
2021-01-14 15:53:28
1090
原创 【Webpack】HtmlWebpackPlugin解决app.ejs不同环境下的判断
问题：生产模式下：需要更改window.baseURL解析：利用HtmlWebpackPlugin插件配置参数传递到首加载页面（.html需改为.ejs）解决：webpack.dev.js、webpack.prod.js分别配置app.ejs（首加载页面）...
2021-01-14 14:16:48
439
原创 QQ相册批量下载
得知QQ相册保存久了像素会被压缩，毅然决然的决定转移到网盘，然后花了1天多的时间搞这件事，终于找到了好用的批量下载插件！QQ空间导出助手免费！快速！开源项目！作者一直更新中：https://github.com/ShunCai/QZoneExport自己遇到的问题，用谷歌浏览扩展程序下载，相册一直下载失败，然后问了作者分分钟解决！需要自己配置 公共 - >文件下载工具：骨头QQ相册批量下载器只能免费下载前30张泪寒QQ空间下载器只能免费下载前50张...
2020-12-08 10:04:42
1442
2
原创 模块化规范
理解将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信好处避免命名冲突(减少命名空间污染) 更好的分离, 按需加载 更高复用性 高可维护性模块化规范CommonJS主要用于服务端编程，加载模块是同步的，这并不适合在浏览器环境，因为同步意味着阻塞加载，浏览器资源是异步加载的，因此有了AMD、CMD解决方案CommonJS包规范是理论，npm是其中一种实践。一个JS就是一个
2020-11-11 17:46:52
488
1
原创 link和@import导入css文件的区别
导入方式link<link href="index.css" rel="stylesheet">import<style type="text/css"> @import "index.css"; </style>不同点link除了引用样式文件，还可引用图片等资源文件，而import只能引用样式文件。<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
2020-11-10 09:30:35
315
转载 src、href区别
src和href都是用于外部资源的引入，像图片、CSS文件、HTML文件、js文件或其他web页面等。区别：src用于替代这个元素，而href用于建立这个标签与外部资源之间的关系。例如：a标签里面的内容是一张图片，a标签加上href属性将图片链接到了www.xxx.com这个网站，但并未替换a标签里面的内容，而img标签的src属性则是将这个标签完全替换成了src里面的资源。<a href="www.xxx.com">\<\img src="1.jpg">\<
2020-11-10 09:26:48
1232
原创 XSS（跨站脚本攻击）、CSRF（跨站请求伪造）
XSS（跨站脚本攻击）推荐学习链接：https://www.bilibili.com/video/BV1U54y197bc?p=35跨站脚本攻击（Cross Site Script）。浏览器错误的将攻击者提供的用户输入数据当做了JavaScript脚本给执行了，窃取包括用户身份信息在内的各种敏感信息、修改Web网页以欺骗用户，设置控制受害者浏览器，或者和其他漏洞结合起来形成蠕虫攻击。浏览器向服务器请求时被注入脚本攻击，篡改浏览器正常展示，窃取用户信息。 三种类型：存储（持久型）、反
2020-11-10 09:18:20
488
原创 推荐一些自己用着特别方便的软件工具
1、笔记软件：有道云笔记优点：树结构、美观性较好、代码输入极棒（程序狗必需）缺点：启动慢（最好别开机自启动）、插入目录丑（前端强迫症）因为爱好做笔记总结，博客更新也不是特别积极，大部分笔记都是写在自己私人笔记本中。所以自己对比了好多笔记软件，都用过一段时间。有道云对我来说体验感是最好的，各方面功能都有，包括word文档、pdf预览等，值得一试~2、取色软件：Pipette（前端必备呀）优点：美观、启动快、颜色值多前端开发取色超多，必备~3、电脑全局快速查找：Listary
2020-11-06 16:23:01
844
转载 【值得收藏】前端优化详解以及需要关注的几个问题
前端优化是一个大的课题，需要花好多时间才能理解，之前对前端优化陆陆续续有一些了解。所以这次从渲染优化，打包优化，代码优化做了一个系统的总结，并且引申出了几个需要关注的问题，文章可能有点长，大家一定要看到最后。最后写作不易，希望觉得还可以的话，帮忙点赞一波，提前感谢了。当然如果有写不好的地方，也请指出来，我会积极改进，共同成长。渲染优化渲染优化是前端优化中一个很重要的部分，一个好的首屏时间能给用户带来很好的体验，这里要说的一点是关于首屏时间的定义，不同的团队对首屏时间定义不一样，有的团队认为首屏时间就
2020-11-06 10:02:56
203
原创 【Webpack】基础篇
（这段时间学习Webpack系列，做下笔记记录）安装Webpack全局安装：npm install webpack -g局部安装：npm install webpack --save-dev为什么Webpack全局安装后，还需要局部安装？在终端执行webpack命令，使用的是全局安装的webpack。当在package.json中定义了scripts映射时，其中包含的webpack命令使用的是局部webpack。局部安装保持了webpack版本与该项目版本的一致。文件夹目录（
2020-10-15 14:22:10
322
原创 JS-splice()、slice()、substring()、substr()
一句话概括：array.slice(start, end); //从哪到哪开始删（不影响原数组） array.splice(start, length, index1, index2); //从什么位置开始，删几个？删了后插入什么新元素？string.substring(start, end); //截取从start到end（不包括）之间的字符（下标必须为正整数）string.substr(start, length); //截取从start位置开始提取length个字符slice(
2020-10-13 10:38:04
108
转载 HTTP、HTTPS、HTTP2
参考链接（写的很详细）：https://blog.csdn.net/xiaoming100001/article/details/81109617HTTP无状态：协议对客户端没有状态存储，对事物处理没有“记忆”能力，比如访问一个网站需要反复进行登录操作 无连接：HTTP/1.1之前，由于无状态特点，每次请求需要通过TCP三次握手四次挥手，和服务器重新建立连接。比如某个客户机在短时间多次请求同一个资源，服务器并不能区别是否已经响应过用户的请求，所以每次需要重新响应请求，需要耗费不必要的时间和流量
2020-10-13 10:09:41
641
原创 CSS-BFC布局
BFC：块级格式化上下文（block formatting context）。形成福利容器，不会在布局中影响到外边的元素特性边距会重叠 内外元素互不影响 不会与浮动元素发生重叠 高度会包括元素内的浮动元素的高度触发条件body根元素 浮动元素：float不为none overflow不为visible 绝对定位元素：position为absolute、fixed display为inline-block、table-cells、flex、table-caption...
2020-10-13 10:06:32
99
原创 【性能优化】防抖、节流
debounce（防抖）触发高频时间后n秒内函数只会执行一次，如果n秒内高频时间再次触发，则重新计算时间。应用场景：输入框中频繁的输入内容，搜索或者提交信息； 频繁的点击按钮，触发某个事件； 监听浏览器滚动事件，完成某些特定操作； 用户缩放浏览器的resize事件。密集的事件触发，我们只希望触发比较靠后发生的事件，就可以使用防抖函数。const debounce = (fn, ...
2020-10-13 09:57:43
105
原创 VSCode初始配置
插件（插件安装后，Ctrl+,快速调出setting面板）插件推荐：https://zhuanlan.zhihu.com/p/57389333 远程开发：Remote Development 版本管理：GitLens 代码格式化：Prettier - Code formatter（自己设置保存时自动格式化，搜索save就出来了）函数括号：Bracket Pair Colorizer 2 自动改html标签：Auto Rename Tag 自动定位css代码：CSS Peek.
2020-09-17 13:48:25
996
转载 数组去重：[false, true, undefined, null, NaN, 0, 1, {}, {}, ‘a‘, ‘a‘, NaN]
var ary = [false, true, undefined, null, NaN, 0, 1, 1, "1", "1", {}, {}, "a", "a", NaN];1、indexOf 方法，无法识别NaNArray.prototype.uniq = function() { return this.filter(function(item, pos) { return this.indexOf(item) == pos; });};2、hasOw.
2020-09-02 11:17:47
337
转载 .map() .filter() .reduce()区别及用法
.map()对数组的每个元素都遍历一次，同时返回一个新的值。记住一点是返回的这个数据的长度和原始数组长度是一致的。例：收到一组包含多个对象的数组，每个对象是一个 person。最终你只希望得到一个只包含 id 的数组。var officers = [ { id: 20, name: 'Captain Piett' }, { id: 24, name: 'General Veers' }, { id: 56, name: 'Admiral Ozzel' }, { id: 88,
2020-09-01 14:14:05
799
转载 flex 布局，省略号失效
flex 布局下，css 设置文本不换行时，省略号不显示的解决办法问题：main 容器是 flex 布局，左边一个 logo 固定宽高，右边 content 动态宽度。.notice 非常长，一些设备下需要隐藏显示，即不换行，并留下省略符 ... 作标记。发现text-overflow: ellipsis不生效，省略符根本没有出现。// CSS.main { display: flex;}.logo { width: 100px; height: 10..
2020-08-26 22:45:16
2679
原创 文件上传、下载的几种方法
目录下载：http请求文件下载上传：使用form-data上传上传：使用XMLHttpRequest上传上传：使用第三方插件上传（WebUploader）下载：http请求文件下载var searchExport = { keyword: ''};$http.postByForm('', searchExport, {responseType:'blob'}).success(function (msg, status, headers, config) {
2020-07-21 14:15:52
1566
原创 【表格插件-GridManager】源码功能/bug修改
（改被压缩过的源码，真是值得纪念...）1、bug：下载表格数据csv排版不对问题：如果table中内容包含逗号/换行时，下载csv打开后样式全部错乱。解决：（只看了csv格式下的代码，其他格式文件代码未看，不过修改方法应该一致）查看js源码发现源代码未处理这种情况。相应数据处理代码，修改为红框代码。（代码被压缩过了，搜索csv可定位）2、新增功能：最多显示10000条需求：总数超过10000条时，也只能查看10000条解决：所以添加属..
2020-07-17 10:39:35
353
原创 【d3】层级树（缩放+折叠）
包含代码点：横向树 拖拽及扩大缩放 节点样式自定义 折叠：https://www.cnblogs.com/wanyong-wy/p/7603123.html效果：代码：//清空SVG中的内容d3.select("#svg>svg").remove();var width = $("#svg").width(), height = 700, duration = 500, i = 0;var tree = d3.layout.tree()
2020-07-17 10:17:35
1765
原创 【ECharts】数据太小，图表点击不到
（之前遇到的问题，现在才贴出来笔记~）问题：132数据太小，鼠标移入灰色不能点击，但是数据太小又不好点解决：尝试一：平滑函数1、先尝试了平滑数据。就是把源数据处理成差别不大的数据，传值到value构图：2、写完发现柱形图顶部和tooltip显示的是value数据，而不是源数据，所以给option配置了一下：3、上面问题都弄好了，又发现y轴数据不对，因为y轴数据自适应是根据value数据显示的，显然这里不能通过value显示：...
2020-07-17 10:07:05
5836
原创 兼容性写法 - JS
Date对象对时间字符串进行转化为时间对象冒泡事件的清除 Date对象对时间字符串进行转化为时间对象 IE对于时间字符串的格式是2018/01/01，不支持2018-01-01，故在转换前需要将横短线统一替换成斜杠横线new Date(date.replaceAll('-', '/')) 冒泡事件的清除 var event = event || window.event;if(event && event.stopPropagation){ event
2020-07-15 19:37:41
134
原创 图片转换为base64存入服务器
问题从其他网页粘贴过来的图片，有些后端不能正确下载保存。于是变成前端请求后，再传入后端。思路获取img标签的src属性值，除了本地图片都再次请求获取图片信息（图片信息还有一种filereader方法，但是此方法只能读取本地文件信息）。代码//上传图片var getBase64Image = function(img) { //将图片转化为base64，后用base64转为文件流 var canvas = document.createElement("canvas");
2020-07-10 15:23:48
483
原创 【AngularJS】使用ng-bind-html会过滤html中style属性的问题
问题：<pre>使用ng-bind-html原有的style样式代码全部未渲染。解决：使用$sce.trustAsHtml();angularjs绑定的数据都会默认以文本的形式输出，并不会去识别html标签，这样做主要是为了防止html标签中的注入攻击，提高了安全性。app.filter('trustHtml', ['$sce',function ($sce)...
2020-04-29 09:55:19
468
原创 【AngularJS】（指令）js表格数据导出.csv
主要代码$scope.PrintTableToExcel = function (id){ var $trs = $("#"+id).find("tr"), str = ""; for (var i = 0; i < $trs.length; i++) { var $tds = $trs.eq(i).find("td,th"); ...
2020-04-08 14:51:37
320
原创 script标签属性：defer和async
直接使用<script>时，html会按照顺序加载并执行，在此过程中，会阻塞DOM渲染非阻塞JS的加载办法：1、动态加载js 2、<script>加属性defer和async在此主要说明<script>标签属性defer和async：defer设置defer属性，浏览器会异步下载文件且不会影响到DOM渲染；如果多个<script&g...
2020-03-10 15:26:14
249
原创 【AngularJS】离开本页面定时器未销毁
问题：页面A，js循环打印1，跳转到页面B后，还是在继续打印1。原js定时器仍在执行未被销毁。解析：路由跳转只会销毁上一个$scope上的属性值，像setTImeout或者异步都还是在js的执行线程中。$templateCache.removeAll();这个不能清理异步。需要自己手动清理，在destroy时。解决：destroy只能写在循环的那个js里，清除那个页面里面的...
2020-03-04 13:23:12
765
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人