无所不能的JavaScript
关注
分享
扫一扫
无所不能的JavaScript
静尾
前端开发工程师
展开
-
为什么javascript设计为单线程？它又是如何解决单线程带来的问题的？
为什么javascript设计为单线程？我觉得这和它的应用场景有关。这门语言最初的设计目的就是运行在浏览器上，用于处理DOM等工作，那么为了避免多个线程同时操作一个DOM之类的问题发生，单线程不失为一个良策。我觉得这也是设计者将javascript设计为单线程语言的一个很重要的原因。虽然可以通过锁来解决上面的问题。但是这会因为引入了锁而为语言带来更大的复杂性。单线程为javascript保证了执行顺序，也为javascript带来了一些问题，如阻塞问题，效率问题等。阻塞问题javascript设计者的应对方原创 2022-12-07 15:01:25 · 752 阅读 · 1 评论 -
js实现将多个svg转为一个canvas，并将该canvas转为图片
需求：如下图表，小提琴图和右侧的图例是两个svg实现的，现在需要将这个图表转为图片，并可下载。获得一张图片，包含上图所有内容。原创 2022-10-27 14:34:10 · 2090 阅读 · 1 评论 -
JS实现canvas、svg元素编码并保存到本地
【代码】JS实现canvas、svg元素编码并保存到本地。原创 2022-09-28 15:51:47 · 1074 阅读 · 0 评论 -
关于前端无法播放RTSP视频流的实现方案
工具与详细步骤请看：https://download.youkuaiyun.com/download/qq_41176306/83943855原创 2022-03-08 16:54:37 · 623 阅读 · 0 评论 -
js实现获取本机的摄像头和麦克风的视频流和音频流并显示
很简单，几行代码，直接cv后Chrome浏览器打开即可查看效果，不过多赘述。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ini原创 2022-02-17 15:30:44 · 4370 阅读 · 1 评论 -
一行代码搞定项目启动自动在浏览器打开以及端口设定
一行代码搞定项目启动自动在浏览器打开以及端口设定项目启动后自动在浏览器打开，并将端口设定为3032package.json：{ ... "scripts": { "serve": "vue-cli-service serve --open --port 3032", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, ...}...原创 2021-08-06 13:44:30 · 258 阅读 · 0 评论 -
调用iframe中方法的方法
调用iframe中方法的方法代码简单，一看就会：<!DOCTYPE html><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原创 2021-07-29 13:51:42 · 4455 阅读 · 0 评论 -
Echarts使用手册
Echarts使用手册setOption：属性说明title标题组件。legend图例组件。grid直角坐标系网格。xAxis直角坐标系的x轴。yAxis直角坐标系的y轴。polar极坐标系，可用于散点图和折线图。radiusAxis极坐标系的径向轴（直线轴）。angleAxis极坐标系的角度轴（环形轴）。radar雷达图坐标系组件（只适用于雷达图）。dataZoom用于区域缩放。visualMap视觉原创 2021-06-30 11:04:45 · 1424 阅读 · 0 评论 -
turf.js报错：Uncaught (in promise) Error: Invalid unit的解决办法
turf.js报错：Uncaught (in promise) Error: Invalid unit的解决办法报错代码（npm i turf）：import turf from 'turf';var line = turf.lineString([[-83, 30], [-84, 36], [-78, 41]]);var options = {units: 'miles'};var along = turf.along(line, 200, options); // 报错行正确代码（np原创 2021-06-28 14:33:56 · 1331 阅读 · 0 评论 -
js使用webWorker实现多线程
js使用webWorker实现多线程原生js使用workerindex.html<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=dev原创 2021-05-28 15:01:06 · 1834 阅读 · 3 评论 -
JavaScript中将字符串类型的‘true‘和‘false‘转化为布尔类型
JavaScript中将字符串类型的’true’和’false’转化为布尔类型JSON.parse('true');// trueJSON.parse('false');// false原创 2021-04-27 14:10:46 · 3691 阅读 · 0 评论 -
JS中cookie的封装
JS中cookie的封装const cookie = { set: function (name: string, value: string, days = 2147483647) {// 默认永久保存 const d = new Date(); d.setDate(d.getDate() + days) document.cookie = `${name}=${encodeURIComponent(value)};expires=${d};pat原创 2021-04-27 10:40:57 · 175 阅读 · 0 评论 -
cesium实现卫星传感器
只需一个文件：CesiumSensors.js（资源在审核中，后续会免费发出来）效果图：<!DOCTYPE html><html lang="en"><head> <!-- Use correct character set. --> <meta charset="utf-8"> <!-- Tell IE to use the latest, best version (or Chrome Frame if pre-I原创 2021-04-16 17:50:13 · 4174 阅读 · 5 评论 -
JS将内存中的数据下载到本地（.json .txt）
JS将内存中的数据下载到本地（.json .txt）原理：创建一个a标签为a标签设置download属性，属性值为下载的文件名（注：文件名后缀是什么，下载的文件类型就是什么，如a.json a.txt，更好的实践是可用时间戳+后缀命名）将a标签的display设为none将数据转为JSON格式存到二进制对象Blob的一个实例中将a标签插入到页面中在a标签上模拟点击事件删除a标签实践：export default function (fileName: string, fileMs原创 2021-04-15 16:40:49 · 1271 阅读 · 0 评论 -
js如何判断点击元素是否是某一父元素的子元素
js如何判断点击元素是否是某一父元素的子元素解决办法：parentNode.contains(childNode)举例：vue中，判断当前点击的元素是否为this.$refs.nabiation的子元素document.addEventListener('click', (event) => { console.log(this.$refs.naviation !== event.target && this.$refs.navigation.contains(event原创 2021-04-14 17:35:38 · 4019 阅读 · 0 评论 -
js实现遍历类上面的属性与方法
js实现遍历类上面的属性与方法js上面的类底层还是Object，所以遍历类也可以用Object的一些遍历方法，但有一点不同，类上面的方法是不可遍历的，所以解决的办法是将需要遍历的方法写成类的属性，属性值为函数。举例：class Person { constructor(name) { this.name = name; this.say = () => { console.log('hello'); } } walk() { console.log('walk');原创 2021-03-26 09:49:49 · 1212 阅读 · 0 评论 -
js在类中的构造函数中写方法与在构造函数外写方法有什么不同？
js在类中的构造函数中写方法与在构造函数外写方法有什么不同？在构造函数中初始化的方法属于类的属性，属性值为函数，其是可遍历的；而在构造函数之外初始化的方法属于类的方法，其是不可遍历的；但二者在功能上并没有什么异同，都可以正常调用。举例：class Person { constructor(name) { this.name = name; this.say = () => { console.log('hello'); } } walk() { console.l原创 2021-03-26 09:45:53 · 962 阅读 · 1 评论 -
js中JSON与QS的异同点
js中JSON与QS的异同点相同点二者可以进行序列化与反序列化；二者都有相同的方法：序列化：stringify() 反序列化：parse()不同点JSON.stringify()方法是将对象转化为JSON格式qs.stringify()方法是将对象转化为url格式JSON.parse()方法是将JSON数据转化为对象qs.parse()方法是将字符串转化为对象实践出真知：let par = { start: '2018-12-1T02:00:00Z', stop:原创 2021-03-25 14:39:59 · 919 阅读 · 0 评论 -
解决axios中get传参为嵌套对象时返回400错误
解决axios中get传参为嵌套对象时返回400错误错误原因：400：传参错误，所以是axios解析多层对象异常解决办法：安装qs插件来帮助解析参数实例：安装：npm i qsyarn add qs引入：import qs from ‘qs’使用：import axios from 'axios'import qs from 'qs'const par = { name: 'wei', age: 18, friend: { goodfriend: 'xiaom原创 2021-03-25 14:27:40 · 1944 阅读 · 0 评论 -
前端基础知识宝典
文章目录原生JS6个基本数据类型常用DOM操作访问元素：操作DOM节点的class：跨域如何中断ajax请求：事件代理：target && currentTarget闭包：继承的几种方式及其优缺点：export && export default数组去重：get && post常见的http响应码及其含义线程 && 进程async awaitnull && undefinedmap && set回流 &&原创 2021-02-24 11:35:25 · 1309 阅读 · 0 评论 -
十大排序算法详细解析
十大排序算法详细解析文章目录十大排序算法详细解析冒泡排序选择排序插入排序希尔排序归并排序堆排序快速排序计数排序桶排序（或叫箱排序）基数排序github地址（有图更清晰~）：https://github.com/waitting115/library/blob/master/algorithms术语说明：稳定：如果a原本在b前面，而a = b，排序之后a仍在b的前面不稳定：如果a原本在b前面，而a = b，排序之后a有可能会出现在b的后面内排序：所有排序操作都在内存中完成外排序：由于数据太大，原创 2021-02-20 12:42:52 · 791 阅读 · 0 评论 -
解决display:none导致echarts图表无法显示问题
解决display:none导致echarts图表无法显示问题注：授人以鱼不如授人以渔，仅讲解问题以及解题思路，明白问题原因后自行解决收获更大喔~问题出现：需要实现一个点击不同基金按钮，下面显示不同基金的echarts图表数据，但实现之后发现只有第一个图表正常显示，其余的图表全部为空的。问题原因：由于echarts容器初始化时的display为none，导致echarts初始化时获取不到容器的宽度（可以在控制台看一下元素，未显示的图表容器的width均异常），自然就渲染不出图表，与数据无关。问题原创 2021-02-08 09:11:16 · 3136 阅读 · 2 评论 -
解决axios使用post传值服务器获取不到问题
axios使用post传值服务器获取不到问题解决发现问题：服务器需要接收json格式的值，但我使用axios的post方法默认传的是对象：axios.post('url', { name: 'wei'}).then(req => { console.log(req.data)}).catch( err => { console.log('axios请求出错：', err);});这样写传过去的值是一个对象：{name: ‘wei’}传json格式数据到后台的原创 2021-02-04 14:13:36 · 668 阅读 · 0 评论 -
jQuery实现左右滑动效果的显示隐藏
jQuery实现左右滑动效果的显示隐藏实现点击#list控制#listChildren左右滑动效果的显示隐藏：$('#list').click(function () { $('#listChildren').animate({width: 'toggle'}, 260);})原创 2021-01-15 17:12:51 · 1567 阅读 · 0 评论 -
js防抖与节流
防抖：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input type="text原创 2021-02-01 11:59:16 · 226 阅读 · 0 评论 -
js事件代理
js事件代理什么是事件代理呢？举个例子来讲：鸡妈妈有10个鸡宝宝，上帝要为这个鸡妈妈的所有鸡宝宝一根彩色的羽毛来抵御黄鼠狼，以后出生的也要有一根彩色的羽毛，走丢的鸡宝宝要回收彩色羽毛。普通的做法是为这个鸡妈妈的所有鸡宝宝都添加一个唯一的标记，然后上帝根据该标记区分出所有鸡宝宝中这个鸡妈妈的鸡宝宝，然后为它们分发彩色的羽毛，但麻烦的是：要有一个为所有鸡宝宝添加唯一标记的操作，要为刚出生的鸡宝宝手动添加标记，要为走丢的鸡宝宝删除为它分发彩色羽毛的操作。但我们忽略了一个很重要的线索，这个鸡妈妈的所有的鸡原创 2020-12-30 19:59:25 · 188 阅读 · 0 评论 -
解决js控制元素背景图片切换时的闪屏问题
解决js控制元素背景图片切换时的闪屏问题看一个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>原创 2020-12-28 16:45:43 · 3215 阅读 · 0 评论