- 博客(83)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 基于OpenLayer 6的标绘sdk（开源）
一、前言原作者是基于Openlayer3 开发的sdk。我已用es6+rollup重新打包编译了项目。封装了部分业务层。只暴露了一个主类。原作者博客在这里。多谢原作者代码给与的参考。二、演示演示截图在线体验：http://61.155.169.52:8080/PlotOl/demo/index.html三、源码github源码：https://github.com/worldd.........
2019-07-27 13:59:36
4663
81
原创 react hooks编程规范（内部使用）
规范1、根据情况使用单个State变量还是多个useState 的出现，让我们可以使用多个 state 变量来保存 state，比如：写法一、const [width, setWidth] = useState(100);const [height, setHeight] = useState(100);const [left, setLeft] = useState(0);const [top, setTop] = useState(0);写法二、const [state, setSt
2022-12-06 10:02:46
746
原创 前端也需要深度了解HTTPS协议
对于熟练的前端开发来说，http请求是最常见不过的家常便饭。但是对于深度疑难问题，只会F12的网络分析，就显得有些不足了；本文深度介绍https原理，及对前端开发的实际帮助。
2022-08-22 20:49:27
516
翻译 如何在用户离开页面时可靠地发送http请求
在某些情况下，当用户执行诸如导航到不同页面或提交表单之类的操作时，我需要发送带有一些数据的请求来进行一些站点统计。本文探讨如何可靠的发送这些请求
2022-07-04 14:34:55
503
原创 前端开发也要知道的 DNS
前端开发也要知道的 DNSDNS是什么DNS的解析过程本地DNS服务器配置DNS的缓存策略分析浏览器缓存dns策略chrome浏览器缓存时间缓存清理firefox浏览器缓存时间缓存清理ie浏览器缓存时间缓存清理host文件缓存缓存时间缓存查看缓存清理本地缓存缓存查看缓存时间缓存清理DNS一对多情况下的浏览器的处理测试前置工作测试一、每个浏览器解析一个新域名双网卡DNS服务器的解析顺序DNS解析的一些知识DNS是什么DNS的解析过程本地DNS服务器配置DNS的缓存策略分析浏览器缓存dns策略为了测
2022-05-09 15:49:34
1067
原创 多活主备选择性DNS解析（一个域名对应多个IP）
多活主备选择性DNS问题背景知识背景DNS解析存在多级缓存（此处仅列举到DNS服务器层；后续流程不涉及）DNS一对多域名的解析随机性DNS 域名解析负载均衡缺点：可能方案方案一、dns解析层面控制DNS解析结果1.1 通过内置DNS服务器控制IP解析（伪造DNS）1.2、让备机nginx的状态能够影响DNS服务器解析方案二、在DNS解析到备机后，提供备机跳转解决方案2.1 、在访问到备站点后，前端使用脚本/在备机nginx层进行域名重定向2.1.1 nginx层控制2.1.2 备机页面脚本层控制2.1.3
2022-04-24 16:49:17
11163
1
转载 2021年15个国内优秀低代码开发平台对比分析
“低代码开发”最早可追溯到20世纪90年代至21世纪初的编程语言和工具（百度百科）。阿里云智能总裁张建锋在钉钉6.0发布会上也表示，“低代码开发”，将成为新一代的软件开发方式。“钉钉宜搭低代码开发工具，让不懂代码的用户，也能快速开发新应用。”一、 什么是“低代码开发平台”“低代码开发平台”，英文全称“Low-Code Development Platform”，简称LCDP，是通过少量代码或零代码就可以快速生成新应用的开发平台。其实就是让不懂写代码的用户，或者技术人员，利用“可视化”窗口，通过“拖拽
2022-04-09 16:19:03
8211
原创 网站使用https不安全证书，Safari浏览器第一次发起请求异常，需要刷新才可以正常发送
背景https传输协议，服务器证书为私有证书（非商用），使用Safari浏览器访问网站，第一次访问正常。关闭网页后，每次访问页面都一直显示加载中，需要手动点击浏览器的刷新按钮才会正常展示网站；手动通过清除safari浏览器缓存后，可以正常进行一次访问，第二次开始接下来又会重复以上过程；解决通过Mac电脑连接Iphone调试，找到了原因，原来是网站第一个get请求被浏览器做了屏蔽；......
2022-01-21 09:45:29
3747
原创 一个 Nodejs 循环依赖实例+解决
背景一个简单的纯typescript+nodejs项目，在一次编译运行代码时，遇到一个奇怪的报错：TypeError: Class extends value undefined is not a constructor or null调试堆栈信息，发现是一个类继承的父类是空。在多次尝试调试，考虑场景，查找资料的情况下，确实论证为nodejs循环引用。但是我觉得我的使用场景是很正常的场景，觉得nodejs在这块的处理确实有点奇怪。代码结构classA:import log from './
2021-09-27 14:37:37
1297
原创 浏览器worker与系统进程和线程的关系&效率转换
背景准备工作1、环境准备项目Value操作系统win10cpu$12内存$12、工具准备1.1 浏览器任务管理器 (shift+esc)1.2 windows系统资源监视器3、浏览器进程线程知识储备xxx4、demo代码准备步骤创建index.html，挂载IIS;!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Ty
2021-08-30 20:32:23
1146
转载 JS EventLoop 动图学习 （一）
JavaScript是单线程的语言事件循环Event Loop，这是目前浏览器和NodeJS处理JavaScript代码的一种机制，而这种机制存在的背后，就有因为JavaScript是一门单线程的语言。单线程和多线程最简单的区别就是：单线程同一个时间只能做一件事情，而多线程同一个时间能做多件事情。而JavaScript之所谓设计为单线程语言，主要是因为它作为浏览器脚本语言，主要的用途就是与用户互动，操作Dom节点。而在这个情景设定下，假设JavaScript同时有两个进程，一个是操作A节点，一个是删
2021-08-24 22:09:21
238
原创 客户端导入证书解决连接不是私密连接的问题
一、问题产生当访问服务端证书为非信任机构颁发的私人证书时，网页一般会有您的访问不是私密链接，或者网站证书不可信等提示：此时，在大部分场景下，可以通过继续前往我们可以通过点击 高级–>继续前往，解决这个问题，然而，在网站左上方还会有不安全提示；还有极小部分场景，例如safary，低版本火狐浏览器等没有继续前往选项，是因为浏览器的安全策略比较高导致的；此外，浏览器对于每一次点击继续前往动作是有信任期的，一旦信任期过了，就会继续出现上述告警；最为严重的是，还会产生浏览器概率屏蔽所有请求的问题，参
2021-08-23 20:45:30
1686
转载 迈入现代 Web 开发 (一)
前言：7月4日，字节跳动Web开发引擎负责人杨扬（dexteryy）在 GMTC 全球大前端技术大会（北京站）2021 上又搞了一场「跨年演讲」（内容超多的意思），不但现场爆满、超时严重，而且一如既往的讲完之后只要把讲稿和幻灯片拼起来就能发出来，大家可按需取用。亮点：为了方便大家理解，杨扬（dexteryy）同学为这次分享画了 90 张图（工具是 Keynote），其实在内部版《Modern Web Stack》里有 120 多张图…可以看到幻灯片上的标题，跟会议日程里的标题有些不一样，「现代 We.
2021-07-29 19:54:54
454
原创 谷歌浏览器不安全的连接牵扯的系统缺陷
一、现象大家都知道，对于https私有证书，浏览器在打开网页时会提示，与该网站的连接不是私密连接。此时我们可以选择高级–>继续前往该网站，以让浏览器暂时信任该网站：点击信任后，在浏览器地址栏边上会出现如下提示：表示浏览器已经选择暂时信任（屏蔽安全警告）该网站了，你在一段时间内，继续访问该网站，不需要再做如上的操作。现在问题来了：在BS架构的系统中，客户反馈概率出现网站点击无反应，数据请求异常的情况。刷新后就会再次出现您的连接不是私密连接的提示，点击继续前往后，一切又恢复正常。后来在控制台日
2021-06-15 15:17:14
850
转载 狠狠地聊一下UI自动化测试
我发现了，大家极度关心自动化测试，尤其是UI自动化测试，虽然现在作为专项测试，离开这些越来越远了，但总能遥想以前，我总能想起自己做nokia的WindowsLive的ui自动化，做web的自动化测试，后面加入腾讯，写过pc的自动化，作为早期的终端测试，做android的自动化，然后mac的，然后ios。 先不说有多少成功经验，但是确实有一些感悟，现在分享给大家，希望能帮助大家思考，少走弯路。UI自动化测试的真实价值测试生命中三大幻觉:今天能发布明天能发布UI自动化实现了，测试就可以不用测了
2021-05-17 21:29:39
491
原创 SMC前端开发者自动化测试用例开发指南
SMC前端自动化测试用例开发指南一、前置步骤1.1 如何运行测试框架1.1.1 生产环境运行1.1.2 开发&调试环境1.2 用例的树状设计概念1.3 一个用例产生的过程二、用例设计2.1 设计原则2.1.1 页面覆盖度原则2.1.2 业务最小化原则2.2 设计步骤三、用例实现3.1 代码结构3.1.1 `cases`3.1.2 `config`3.1.3` core`3.1.4 `enum`3.1.5 `interfaces`3.1.6 `utils`3.2 Case类3.2.1 `exec` 函
2021-04-10 21:23:36
906
原创 解决typescript 在 node.js 下使用别名（paths）无效的问题
背景纯nodejs环境，直接使用tsc编译nodejs。源码目录是src，编译输出目录为bin。代码结构如下：srcutilsa.tsb.tsconfig…bintsconfig.json在其他深层次目录引用utils或者config下的文件时，总是要写一长串的'../../../../'，还需要数数。这显然是不能接受的。用过webpack开发的小伙伴们，想想别名功能，typescript这种成熟框架不可能没有。于是百度一波，得到如下配置：{ "baseUrl"
2021-04-08 22:19:52
9960
5
原创 浏览器持久化调试日志解决方案
一、痛点当前前端调试日志面临无法持久化的问题。当前大家一定经历过为了复现一个前端问题，需要刷新多少遍页面，操作多少次业务流程；一定经历过客户现场偶先莫名其妙的问题，而后浏览器日志又取不到；一定经历过好不容易复现的问题，打开f12的时候，控制台却空空如也。所以，前端调试日志持久化解决方案，呼之欲出。二、尝试2.1 通过更改浏览器启动项设置日志在一番百度大法好以后，发现谷歌浏览器可以通过设置启动项 --enable-logging --v=1 或者 --log-net-log=D:/log345.txt
2021-03-11 16:06:10
847
转载 Chrome访问https页面显示ERR_CERT_INVALID，且无法跳过继续访问
在访问网页的时候，因为浏览器自身的安全设置问题，对于https的网页访问会出现安全隐私的提示，甚至无法访问对应的网站，尤其是chrome浏览器，因此本文主要讲解如何设置chrome浏览器的设置，来解决该问题，具体如下：问题Chrome访问https页面显示ERR_CERT_INVALID，以往版本可以选择跳过，继续访问，但是新版本Chrome不允许继续，且提示：您的连接不是私密连接攻击者可能会试图从 XX.XX.XX.XX 窃取您的信息（例如：密码、通讯内容或信用卡信息）。了解详情 ，NET.
2021-03-06 08:57:18
5444
2
原创 使用虚拟node_modules 对webapck前端CI重构-150%的速度提升
项目首次构建无修改二次构建修改文件二次构建不采用任何缓存211211211仅采用文件缓存23141.893.4采用文件缓存+babel -loader缓存2304293
2021-03-01 22:20:22
383
原创 Javascript学算法系列 （二）--经典双指针
分析看到这题，最优先想到的就是逐个遍历。我们需要一个数据结构P，用来记录已经遍历过的单词，需要一个变量start_index，记录单词开始不重复的位置，还需要一个变量max，记录当前最大的不重复长度。从最左侧第一个单词开始遍历，每次遍历到一个单词，判断单词有没有在P中找到，如果找不到，根据记录的start_index和当前遍历的索引cur_index，更新最大值max；反之如果能找到，则需要把start_index置为当前重复的那个字母在P中的索引位置加一，然后继续上述过程。流程图如下：......
2021-02-25 22:06:54
1242
原创 项目组 eslint 统一配置及疑难解决
背景项目组前端代码eslint久失维护，大家有的人有代码规范，有的人没有。新来的代码规范也是从老的手里copy一份。每个人eslint插件的版本、配置、代码项均不同。导致改代码的时候，为了避免自动fix带来的大量代码改动，不得不暂时关闭eslint，改完后，无规则校验上库。代码规范缺乏校验，上库代码质量日益下降。第一步按照可信认证规则（标准代码规范）配置eslintrc文件，插件的配置自不必说。为了支持js/ts/jsx/tsx ，需要安装eslint的4个插件,配置在plugin中。注意为了支持ts
2021-02-01 21:15:00
1499
原创 Hooks编程扫盲（一）-- useSWR
一、背景Vue 3.0已经出到3.0.5了，React Hooks大家也用的如日中天。整天大家都在讨论Hooks,Hooks，那么Hooks式的编程到底有什么好处？参加本人的这篇文章。二、使用项目ReactVue包名swrvue-swr仓库地址github-swrgithub-vue-swr二、useSWR随着React Hooks的浪潮，各种基于Hooks 的方案越来越多，其中主要包含 状态管理、数据请求、通用功能的封装 等等。而 数据请求 是日常业务开
2021-01-23 16:08:40
4557
原创 我为什么要使用Hooks？
一、背景Vue 3.0已经出到3.0.5了，React Hooks大家也用的如日中天。整天大家都在讨论Hooks,Hooks，那么Hooks式的编程到底有什么好处？还记得当时Vue3.0 beta版本发布的时候，社区多少的反对声音：意大利面代码结构吐槽：“太失望了。杂七杂八一堆丢在 setup 里，我还不如直接用 react”我的天，3.0 这么搞的话，代码结构不清晰，语义不明确，无异于把 vue 自身优点都扔了怎么感觉代码结构上没有 2.0 清晰了呢 这要是代码量上去了是不是不好维护啊
2021-01-23 16:07:21
2275
1
原创 Webpack5 升级小结
一、背景二、步骤2.1 升级webpack5 npm 包至 5.9.0以下的 configuration 标识配置的根对象2.2 npm run build2.1 configuration.node 不兼容：5.x 版本node只有3个配置项。详见 这里4.x node 配置 详见这里这里修改前：node: { module: 'empty', dgram: 'empty', dns: 'mock', fs: 'empty'
2021-01-11 15:00:17
5330
转载 Webpack5 内置缓存方案探索
背景随着Babel、TypeScript、VueLoader、Terser等编译、转译技术的大规模使用，Webpack的编译时间正不断膨胀。为了优化编译速度，社区主要有两种方案：通过把loader的处理结果缓存到本地磁盘，来加速二次编译通过预编译dll让webpack跳过一些模块的编译，来加速编译这些方案在一定程度上解决了编译速度慢的问题，但随之而来的是成堆的配置，严重影响了Webpack的使用体验，甚至出现了“Webpack配置工程师”这种“新职业”。与此同时，社区出现了一些新兴的编译技术，
2021-01-04 09:52:31
2134
原创 Webpack 插件扫盲系列（五） PnpWebpackPlugin和ModuleScopePlugin
一、背景什么是Pnp?可以详见本人的这篇博客。Pnp实际是yarn的一个特性，所以说如果你的项目中不使用yarn构建，那就可以不用使用这个插件。其次，即使你使用了yarn，如果不通过文中所述的开启pnp的方法去启用pnp，那这个插件对你来说也是无用的。二、使用大家知道webpack的reslove模块是用来配置模块解析规则的。如果你的项目中启用了pnp，那么想象一下，最基本的，就是你没有node_modules文件夹了。你的所有的依赖配置都会存储在.pnp.js文件中（实际依赖项安装在系统根目录），这
2021-01-03 10:20:20
3083
原创 Yarn 的 Plug‘n‘Play 特性
一、前言Yarn 团队在春节前公布了 Yarn 2.0 的规划。其中提到了一个之前没听说过的名词 “PnP”。发现 Yarn 的这个功能早在 18 年 9 月份就被提出并实现了。于是花了一些时间了解了一下它的工作原理以及解决的问题并整理除了本篇文章。二、现状与痛点Yarn 团队开发 PnP 特性最直接的原因就是现有的依赖管理方式效率太低。引用依赖时慢，安装依赖时也慢。先说说 Node 在处理依赖引用时的逻辑，这个流程会有如下两种情况：如果我们传给 require()调用的参数是一个核心模块（例如
2020-12-31 17:33:41
1354
原创 npm 与 yarn 发展史
一、 javascript 中包管理的历史npm 出现之前：前端依赖项是保存到存储库中并手动下载的2010：npm 发布并支持 nodejs2012：npm 的使用量急剧增加——主要是由于 Browserifys 浏览器的支持2012：npm 有了一个竞争对手 bower，它完全支持浏览器2012-2016：前端项目的依赖项数量成倍增加2012-2016：构建和安装前端应用变得越来越慢2012-2016：大量（重复的）依赖项存储在神奇的 node_modules 内
2020-12-31 15:49:49
1002
原创 Webpack 插件扫盲系列（四） WorkboxWebpackPlugin
一、背景要了解WorkboxWebpackPlugin，首先需要说两个概念：第一个是ServiceWorker,第二个是PWA。ServiceWorker 本人写了一篇浅谈，大家可以先看一下。关于PWA,网上的讲解也很多，大家看完ServiceWorker，就知道ServiceWorker其实是基于WebWorker的一门技术。而PWA，就是基于ServiceWorker的一门技术。#mermaid-svg-gugOl7MTKFg3nMxO .label{font-family:'trebuchet m
2020-12-29 19:24:56
5343
原创 浅谈 Service Worker 在缓存资源以及Web Push上的应用
一、 service worker 是什么一句话概括一个服务器与浏览器之间的中间人角色，如果网站中注册了service worker那么它可以拦截当前网站所有的请求，进行判断（需要编写相应的判断程序），如果需要向服务器发起请求的就转给服务器，如果可以直接使用缓存的就直接返回缓存不再转给服务器。从而大大提高浏览体验。细碎的描述基于web worker（一个独立于JavaScript主线程的独立线程，在里面执行需要消耗大量资源的操作不会堵塞主线程）在web worker的基础上增加了离线缓存的能力
2020-12-29 15:44:11
1992
2
原创 http 策略之 Referrer-Policy
一、背景说道referer ，大家想必知道的清楚一些。referer是用来防止 CORS（跨站请求伪造）的一种最常见及有效的方式。对于自身服务器，通过客户端发来的请求中带有的referer信息，可以判断该请求是否来源于本网站。这样就可以一定程度上避免其他网站盗取自身服务器信息，或者可以通过referer来实现广告流量引流，说白了，referer是一种客户端带到服务器的客户端信息，而Referrer-Policy则是客户端对这个带信息策略的配置。二、配置方式1 、HTML 配置既然是客户端策略，那么在
2020-11-26 15:58:20
9634
转载 react-router-dom 的 hash-router 也就那么回事儿
一、要实现的功能我们使用React开发项目的时候，基本上是单页面应用，也就离不开路由。路由看似神秘，当我们简单的模拟一下它的核心功能后，发现也就这么回事儿。本文就详细的介绍一下react-router-dom 的 HashRouter的核心实现逻辑。本文主要实现的功能主要包含：HashRouterRouteLinkMenuLinkSwitchRedirect二、 实现的逻辑先不说代码是怎样写的，先上图，让大家看一下这个HashRouter到底是个什么东东:好吧，肯定有人会说这些圈
2020-11-20 11:45:16
1391
原创 Webpack 插件扫盲系列（三） webpack.TerserWebpackPlugin、webpack.UglifyjsWebpackPlugin和ParallelUglifyPlugin
一、背景这三种插件都是Webpack常用的压缩代码插件。这三者有什么不同？使用的时候有什么注意点？接下来我们一起探究一下。一、webpack.UglifyjsWebpackPlugin这个是Webpack官方维护，用Uglifyjs进行代码压缩的插件。它使用的是单线程压缩代码，也就是说多个js文件需要被压缩，它需要一个个文件进行压缩。所以说在正式环境打包压缩代码速度非常慢(因为压缩JS代码需要先把代码解析成用Object抽象表示的AST语法树，再去应用各种规则分析和处理AST，导致这个过程耗时非常大)
2020-11-04 15:21:24
5182
原创 Webpack之 hash、 chunkhash 、 contenthash
一、背景对于Webpack的output属性，大家都知道可以配置文件的输出名称。一般来说，默认的配置都是这样：output: { filename: '[name].[hash].js', path: path.resolve(__dirname, 'dist')}翻看官方文档，我们发现hash 还可以替换为 chunkhash，那么这些到底有什么区别？对于我们的意义又是什么？我们知道，浏览器为了优化体验，会有缓存机制。如果浏览器判断当前资源没有更新，就不会去服务端下载，而是直接
2020-11-04 11:58:51
1489
转载 浏览器缓存机制解析
一、缓存过程分析浏览器与服务器通信的方式为应答模式，即是：浏览器发起HTTP请求 – 服务器响应该请求。那么浏览器第一次向服务器发起该请求后拿到请求结果，会根据响应报文中HTTP头的缓存标识，决定是否缓存结果，是则将请求结果和缓存标识存入浏览器缓存中，简单的过程如下图：由上图我们可以知道浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中以上两点结论就是浏览器缓存机制的关键，他确保了每个请求的缓存存入与
2020-11-02 14:59:27
610
原创 Javascript学算法系列 （一）--回溯 从经典的全排列问题，看回溯算法
问题力扣 第46题：https://leetcode-cn.com/problems/permutations/给定一个 没有重复 数字的序列，返回其所有可能的全排列。示例:输入: [1,2,3]输出:[ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1]]回溯算法关于回溯算法，我找到一篇好文，从经典的全排列到8皇后问题，有详细的题解。我这里就按照这篇文章的思路，一步一步的求解全排列问题。废话不多说，直接上回
2020-10-07 17:43:44
1331
1
原创 浅谈npm 构建流程及package.json和 package.lock.json的工作流程
一、起因在一次日常代码检视中，发现库上居然上了package-lock.json。这是静态记录版本所有依赖以及子依赖的文件。由于这个文件的版本第一次提交到目前9个月的时间都没有进行更新，在这期间，前端库有大大小小的package.json依赖库的升级，但是package-lock.json 这个文件却没有升级。于是我一个MR,删除了库上文件，本来是改动的开发版本。但是由于开发版本与构建版本在一台机器上，npm clean cache指令清除了机器上所有的缓存包，因此同时影响了发布版本的构建。造成库上nod
2020-09-14 10:13:15
2644
基于openlayer 5.x及以上的开源标绘sdk
2019-07-31
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人