JavaScript
文章平均质量分 69
fredricen
这个作者很懒,什么都没留下…
展开
-
CTF之MISC题目-西游记
CTF中关于MISC(杂项)的题目通常都比较有意思,很考察思维的发散性。下面的这道题就是需要灵活的思考,涉及暴力破解、编码、手动处理文本等多种手段。原创 2022-12-30 11:06:44 · 8569 阅读 · 0 评论 -
TLS/SSL通信基于NodeJS16
基于node.js的安全传输加密通信,底层在传输层上进行,服务端和客户端交互。原创 2022-08-26 17:23:44 · 846 阅读 · 0 评论 -
NodeJS中的UDP通信
UDP通信,适用于实时性要求高的场景,一般作为流媒体应用、语音交流、视频会议所使用的传输层协议,还有许多基于互联网的电话服务使用的VOIP(基于IP的语音)也是基于UDP运行的,实时视频和音频流协议旨在处理偶尔丢失的数据包,因此,如果重新传输丢失的数据包,则只会发生质量略有下降,而不是出现较大的延迟。UDP优点:简单,轻量。UDP缺点:没有流控制,没有应答确认机制,不能解决丢包、重发、错序问题。下面我们使用nodejs16来实现一个简单的UDP通信。客户端运行效果服务端......原创 2022-07-13 11:03:14 · 9981 阅读 · 3 评论 -
纯JavaScript在HTML页面写入SVG
纯JavaScript在HTML页面写入SVG,需要注意哪里问题?原创 2022-06-14 16:03:55 · 1486 阅读 · 0 评论 -
理解webpack5文档中的require.cache
引言webpack是基于nodejs开发的一个文件打包工具,在其5.X版本的文档中讲到模块缓存。多处引用同一模块,最终只会产生一次模块执行和一次导出。所以,会在运行时(runtime)中会保存一份缓存。删除此缓存,则会产生新的模块执行和新的导出。 里面有个例子引起了我的注意,代码如下:var d1 = require('dependency');require('dependency') === d1; //truedelete require.cache[require.resolve('depe原创 2022-05-06 12:10:13 · 998 阅读 · 0 评论 -
全屏或者退出全屏检测
引言在做监控视频时,一个很重要需求就是视频全屏以及退出。下面就讲讲用JavaScript来检测全屏以及退出。全屏实现全屏有一套Web API已经为我们准备好,见这里,不过有时我们在使用第三方Web SDK时,可能已经提供,比如海康威视、大华、宇视等。但是第三方其实也是基于Web API的二次封装而已,所以本质还是要了解的。export const clickFullScreen = () => { const objElement = document.querySelector('.par原创 2022-04-26 17:53:26 · 1244 阅读 · 1 评论 -
自建gitlab-runner
有时我们的项目依赖内部的CI/CD工具gitlab-ci,但是内部的CI工具处于信息安全的考虑,可能会对互联网的包仓库比如npm,限制访问,只能访问内部的自建仓库。但是我们为了利用互联网的包仓库,就可以通过自建gitlab-runner来实现。自建gitlab-runner在官方文档中有详细的描述,我们可以选择最简单的方式,在UI页面上,在所在项目下点击左侧 setting > CI/CD,在展示页面里展开Runner选项,然后在展开里面点击,如下图所示。然后点击“Show runner ins原创 2022-04-15 13:56:18 · 864 阅读 · 0 评论 -
@parcel/transformer-js: Browser scripts cannot have imports or exports报错问题解决
Openlayer6.x Example在本地报错报错如标题所示:@parcel/transformer-js: Browser scripts cannot have imports or exports官方答案见这里解决问题其实parcel2.x版本对浏览器本身做了兼容,现在大部分浏览器都已经原生支持es6语法,只需在<script>标签中加入type="module"即可,以官方simple map为例:<html lang="en"> <head>原创 2022-04-12 22:10:20 · 2131 阅读 · 0 评论 -
vue2.x中过滤器和方法函数使用场景浅析
过滤器在vue2.x中允许自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div>原创 2021-04-30 15:05:55 · 309 阅读 · 0 评论 -
globs简明指南
什么是Globs?Globs,也即 glob patterns是可以将通配符模式扩展为匹配给定模式的路径名列表的模式(通常用来匹配目录以及文件,而不是文本!)。在Linux的早期版本中,命令解释器依赖于一个程序,该程序将这些字符扩展为无引号参数命令:/etc/ globs。这个命令后来作为一个库函数提供,现在很多程序都在使用这个函数,包括shell。几种不同的工具和语言已经采用了globs,并对其进行了一些微调。这是相当广泛的清单:Node.jsGoJavaHaskell翻译 2021-01-28 16:44:15 · 825 阅读 · 0 评论 -
AOT、JIT概念模糊理清一下
动态编译(dynamic compilation) 指的是“在运行时进行编译”;与之相对的是事前编译(ahead-of-time compilation,简称AOT),也叫静态编译(static compilation)。JIT编译(just-in-time compilation) 狭义来说是当某段代码即将第一次被执行时进行编译,因而叫“即时编译”。JIT编译是动态编译的一种特例。JIT编译一词后来被泛化,时常与动态编译等价;但要注意宽泛与狭义的JIT编译所指的区别。自适应动态编译(..原创 2021-01-07 14:43:10 · 483 阅读 · 1 评论 -
从 RegExp 构造器看 JS 字符串转义设计
new RegExp(/\w+\.ke\.qq\.com/).test('ktmaster.ke.qq.com') // 返回 truenew RegExp('\w+\.ke\.qq\.com').test('ktmaster.ke.qq.com') // 返回 falsenew RegExp('\\w+\\.ke\\.qq\\.com').test('ktmaster.ke.qq.com') // 返回 trueRegExp 构造器使用 string 参数时,其中的 \w、\ 等特殊含义字符是转载 2020-12-24 14:53:29 · 609 阅读 · 0 评论 -
正则表达式匹配位置速查
位置 模式 说明 ^ 匹配开头的位置,当正则有修饰符 m 时,表示匹配行开头位置 $ 匹配结尾的位置,当正则有修饰符 m 时,表示匹配行结尾位置 \b 匹配单词边界,即,\w 与 \W、^ 与 \w、\w 与 $之间的位置 \B 匹配非单词边界,即,\w 与 \w、\W 与 \W、^ 与 \W、\W 与 $之间的位置 (?=abc) 匹配 ...原创 2020-12-22 10:36:47 · 383 阅读 · 0 评论 -
JavaScript中的正则和字符串相关方法
等效方法1. match 和 exec字符串的match方法和正则实例对象的exec方法,例如使用 matchvar regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;var string = "2017-06-26";console.log( string.match(regex) );// =>["2017-06-26", "2017", "06", "26", index: 0, input: "2017-06-26"]使用execvar regex原创 2020-12-21 09:34:45 · 75 阅读 · 0 评论 -
高德地图自定义弹窗内容
需求使用vue2.x来实现高德地图自定义弹窗内容,可以通过一个按钮来切换不同的样式风格,即改变弹窗内容样式。分析高德地图官网为开发者提供了自定义弹窗内容的例子,见这里。官方提供的方式是Dom操作,即createElement、appendChild等方式。我们选择用vue,用vue的方式来实现Dom操作。vue的全局API中第一个是Vue.extend,这个是用来实现一个vue的子类构造器,其实可以看做是一个vue模板对象构造器,其实例化对象类似于Dom中的DocumentFragment接口。由原创 2020-05-17 21:41:50 · 12131 阅读 · 4 评论 -
vscode(^1.44.0)下vue-html代码格式化与eslint格式化冲突
vscode配置{ "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": [ "javascript", "javascriptreact", "html", ...原创 2020-04-19 11:30:11 · 1278 阅读 · 0 评论 -
个人理解的javascript运行机制
事件循环JS分为同步任务和异步任务同步任务都在主线程上执行,形成一个执行栈主线程之外,事件触发线程管理着一个任务队列,只要异步任务有了运行结果,就在任务队列之中放置一个事件。一旦执行栈中的所有同步任务执行完毕(此时JS引擎空闲),系统就会读取任务队列,将可运行的异步任务添加到可执行栈中,开始执行。事件循环机制进一步补充:上图大致描述就是:1)主线程运行时会产生执行栈2)栈中...原创 2020-03-31 12:12:34 · 126 阅读 · 0 评论 -
浏览器渲染进程的多线程机制
浏览器渲染进程的多线程机制对于普通的前端操作来说,最重要的进程是渲染进程。可以这样理解,页面的渲染,JS的执行,事件的循环,都在这个进程内进行。渲染进程是多线程的,它主要包含了以下线程(5个):1)GUI渲染线程负责渲染浏览器界面,解析HTML,CSS,构建DOM树和RenderObject树,布局和绘制等当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程...原创 2020-03-31 11:11:41 · 2446 阅读 · 1 评论 -
debounce与throttle区别及其应用场景
目录概念debouncethrottle实现debouncethrottle应用场景debouncethrottle场景举例debouncethrottle概念debounce字面理解是“防抖”,何谓“防抖”,就是连续操作结束后再执行,以网页滚动为例,debounce要等到用户停止滚动后才执行,将连续多次执行合并为一次执行。throttle字面理解是“节流”,何谓“节流”,就是确保一段时...原创 2020-03-24 16:36:36 · 597 阅读 · 0 评论 -
理解clientHeight,scrollHeight,offsetHeight等Dom中的Element对象属性
目录代码HTMLCSSJavaScript理解代码HTML<div class="container"> <div id="aa" contenteditable style="width:1400px;height:1000px;border-left: 10px solid #ccc;border-top:10...原创 2020-03-22 09:14:12 · 780 阅读 · 0 评论 -
深入理解ES5系列之标准库-正则表达式对象
2 标准库2.1 正则表达式对象(RegExp对象)2.1.1 表示方法新建正则表达式有两种方法。一种是使用字面量,以斜杠表示开始和结束。var regex = /xyz/;另一种是使用RegExp构造函数。var regex = new RegExp('xyz');上面两种写法是等价的,都新建了一个内容为xyz的正则表达式对象。它们的主要区别是,第一种方法在引擎编译代码时,就会...原创 2020-03-11 17:34:56 · 452 阅读 · 0 评论 -
深入理解ES5系列之数据类型-二进制位运算符
目录1 数据类型1.3 二进制位运算符1.3.1 进制或运算符1.3.2 二进制与运算符1.3.3 二进制否运算符1.3.4 异或运算符1.3.5 左移运算符1.3.6 右移运算符1.3.7 头部补零的右移运算符1.3.8 开关作用(应用场景)1 数据类型1.3 二进制位运算符1.3.1 进制或运算符二进制或运算符(|)逐位比较两个运算子,两个二进制位之中只要有一个为1,就返回1,否则返回...原创 2020-03-08 15:38:55 · 506 阅读 · 0 评论 -
深入理解ES5系列之数据类型-字符串
1 数据类型1.2 字符串1.2.1 转义反斜杠(\)在字符串内有特殊含义,用来表示一些特殊字符,所以又称为转义符。需要用反斜杠转义的特殊字符,主要有下面这些。\0 :null(\u0000)\b :后退键(\u0008)\f :换页符(\u000C)\n :换行符(\u000A)\r :回车键(\u000D)\t :制表符(\u0009)\v :垂直制表符(\u000B)...原创 2020-03-07 17:36:35 · 377 阅读 · 0 评论 -
深入理解ES5系列之数据类型-数值
1. 数据类型1.1 数值1.1.1 整数和浮点数JavaScript 内部,所有数字都是以64位浮点数形式储存,即使整数也是如此。所以,1与1.0是相同的,是同一个数。1.1.2 数值精度根据国际标准 IEEE 754,JavaScript 浮点数的64个二进制位,从最左边开始,是这样组成的。第1位:符号位,0表示正数,1表示负数第2位到第12位(共11位):指数部分第13位到...原创 2020-03-07 14:56:49 · 334 阅读 · 0 评论 -
JavaScript特殊对象的原型
// 空对象的原型是 Object.prototypeObject.getPrototypeOf({}) === Object.prototype // true// Object.prototype 的原型是 nullObject.getPrototypeOf(Object.prototype) === null // true// 函数的原型是 Function.prototype...原创 2020-02-20 17:01:19 · 266 阅读 · 0 评论 -
新版vscode(^1.41.0)下JavaScript代码格式化冲突问题
分析配置{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.format.enable": true, "eslint.validate": [ "javascript", "vue", "html" ]}本地还有vue格式化的插件vetur,默认...原创 2020-01-20 16:51:31 · 4479 阅读 · 2 评论 -
新版vscode配置eslint自动格式化代码
旧版配置//配置eslint"eslint.autoFixOnSave": true, // 启用保存时自动修复,默认只支持.js文件"eslint.validate": [ "javascript", // 用eslint的规则检测js文件 { "language": "vue", // 检测vue文件 "autoFix": true // ...原创 2019-12-18 10:24:11 · 14736 阅读 · 5 评论 -
js数组排序sort
sort方法const list = Mock.mock({'list|9': [ { 'name|+1': ['故障1', '故障2', '故障3', '故障4', '故障5', '故障6', '故障7', '故障8', '故障9'], 'value|+1': [11, 10, 9, 8, 7, 6, 5, 4, 3] } ] })con...原创 2019-10-20 16:54:23 · 122 阅读 · 0 评论 -
javascript实现数字补全不足补零
例如我们希望输出的数字长度是固定的,假设为10,如果数字为123,则输出0000000123,不够位数就在之前补足0,这里提供了三种不同的方式实现JS代码给数字补0 的操作原文:http://www.jb51.net/article/62499.htm方法1function PrefixInteger(num, length) { return (num/Math.转载 2017-04-21 19:38:59 · 30819 阅读 · 4 评论 -
2017版高德地图瓦片分析
目前通过高德地图官方网站的影像切换,可以看到高德的瓦片地址有如下两种:http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7和http://webst0{1-4}.is.autonavi.com/appmaptile?style=7&x={x}&y={y原创 2017-08-15 14:35:40 · 27403 阅读 · 14 评论 -
openlayer4设置地图的默认鼠标手势和拖拽鼠标手势
openlayer2之后,openlayer3版本有较大升级。openlayers4是3的自然升级。openlayers4中默认的地图鼠标手势都是箭头。如果需要设置为像百度、高德之类的鼠标手势,需要自行定制。设置方法很简单,完全通过控制css就可以了。地图默认手势修改:#map{cursor:url(openhand.cur),auto;}地图交互手势修改:...原创 2018-03-23 16:14:56 · 3069 阅读 · 0 评论 -
百度地图滚轮缩放,所在点偏移问题
目录目录提出问题分析问题解决问题结语提出问题<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&q原创 2018-08-29 21:42:38 · 13500 阅读 · 3 评论 -
传统es5的完美继承
传统es5的完美继承代码段分析代码代码段首先来看个代码片段,节选自原文./** * 寄生式继承 继承对象 * 传递参数 js对象 */function inheritObject(o){ //声明一个过渡函数 function F(){} //过渡对象的原型继承父对象 F.prototype = o; return new F();}/** * 寄生式继承 继承原型...原创 2018-11-01 16:23:32 · 265 阅读 · 0 评论 -
npm,yarn替换国外镜像为国内镜像,安装依赖
npmnpm config set registry https://registry.npm.taobao.orgnpm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/npm installyarnyarn config set registry https://registry.npm....原创 2019-05-07 15:46:17 · 1591 阅读 · 0 评论 -
win10下vue-cli3.x全局安装失败问题解决
win10下vue-cli3.x全局安装失败问题解决问题重现安装vue-cli3.x版本:npm install -g @vue/cli问题日志11987 verbose stack Error: EPERM: operation not permitted, lstat 'E:\nodejs\npm_global_modules\node_modules\node_modules\....原创 2019-06-05 10:49:55 · 4343 阅读 · 0 评论 -
JavaScript中正负零
JavaScript中正负零判断正负零//判断是否为+0function isPositiveZero(num){ return num === 0 && 1 / num > 0}//判断是否为-0function isNegativeZero(num){ return num === 0 && 1 / num < 0}正负零的加减...原创 2019-06-11 15:42:23 · 1473 阅读 · 0 评论 -
tarball data for *** seems to be corrupted. Trying one more time
我们有时在git上拉取别人的package-lock.json文件后,直接npm install可能会安装报错,提示包破损之类,然后整个/node_modules/文件下的安装包会因为缺少包而安装失败。尝试过如下方案:清空npm代理npm config rm proxynpm config rm https-proxy清空npm缓存npm cache clean -f删...原创 2019-08-12 13:03:23 · 39045 阅读 · 8 评论 -
element UI中分页组件更新问题
分页组件<template> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" ...原创 2019-09-09 11:33:10 · 1003 阅读 · 0 评论 -
关于JQuery重复绑定的问题
某天晚上写代码的时候,突然出了bug,想了很久都不知道问题出在哪里(其实是很简单的问题,但由于我还是个菜鸟,所以不知道)。几经周折,这中间的过程就不提了,终于让我在快崩溃的时候,发现了原因。原来是因为同一jquery元素可以重复绑定,当使用了嵌套绑定的时候,就容易出错。如代码: $('.test').bind('click',function(){ $('.last').bin转载 2015-03-28 08:51:25 · 453 阅读 · 0 评论