JavaScript
关注
分享
扫一扫
主要记录Js遇到的问题和值得记录的问题
小达不溜儿
个人笔记
展开
-
【js】js加载问题
你创建的script对象上提供了加载的钩子函数:onload/onreadystatechange(浏览器的兼容性处理),当你把script标签插入到DOM中时，浏览器另开一个线程去异步加载你需要的js资源，在加载的不同阶段：this.readyState对应不同的值，这个时候根据需要设置你的回调函数。这样就完成了对于一段js代码异步获取的监控。注：当script标签插入到html中时才会异步加载和执行。加载js文件方法：export const loadScript = (url) => .原创 2021-07-26 18:29:08 · 401 阅读 · 0 评论 -
【Vue&JS】解决鼠标拖拽与点击事件冲突&元素在指定div中拖拽移动场景
拖动的元素在鼠标按下时通过时间差给元素添加一个属性（drag-flag），若超过规定时间则认为是在拖拽，属性设置为true, 否则设置为false。点击方法中通过获取这个属性判断是否要执行点击后的指令。html:<div class="drag-area"> <div v-if="isShowHelp" class="help-control" ref="helpControl" draggable="true" @mousedown.stop=.原创 2021-05-11 15:22:00 · 7915 阅读 · 2 评论 -
【JS】判断Dom是否在可视区
// dom元素是否在可视区export const elementIsVisibleInViewport = (el, partiallyVisible = true) => { // 第一个参数是element 第二个参数是 是否部分可见也算可见 // 设置为false 即有一部份不可见即不可见 // 设置为true 即部分可见即算是可见 const { top, left, bottom, right, } = el.getBounding原创 2021-04-02 13:49:00 · 2231 阅读 · 0 评论 -
搜索关键词高亮
接口请求数据后返回的结果进行正则替换然后用v-html插入页面使用方法如下：html代码:<div class="doc-body-item-title"> <span class="doc-body-item-title-word" v-html="item.replaceFileName" @click="goDetails(item)"> </span></div><div class="doc-body-ite原创 2021-03-12 14:46:36 · 102 阅读 · 0 评论 -
【JS】Promise学习总结
若想系统学习Promise可以阅读：阮一峰大神写的Promise对象，此篇记录常用用法。Promise顺序请求方法1——连续使用then链式调用方法2——使用promise构建队列方法3——使用async、await实现类似同步编程，async函数内部实现同步参考：https://www.jianshu.com/p/dbda3053da20方法1：链式调用function getA(){ return new Promise(function(resolve, reject).原创 2021-02-24 10:32:00 · 342 阅读 · 0 评论 -
前端实现模糊搜索功能
https://www.cnblogs.com/qdkfyym/p/13065625.html待补充原创 2021-01-29 09:23:32 · 504 阅读 · 0 评论 -
eslint最全规范讲解
参考链接：https://blog.csdn.net/weixin_40013817/article/details/108003812转载 2021-01-22 11:36:21 · 635 阅读 · 0 评论 -
vue&js 带有canvas的全屏和退出全屏
问题描述：因为canvas画布的高度和宽度是一开始固定写好的，当需要全屏时，画布的高度是开始定义的高度，就会出现屏幕下方黑了一块，如下图，所以我们需要判断是否全屏，画布根据这个属性改变画布高度。1.绑定resize事件，当浏览器窗口大小发生变化时判断是否全屏created() { this.isFullScreen = this.isFullscreen(); window.addEventListener('resize', () => { this.isFu.原创 2021-01-14 16:14:27 · 1600 阅读 · 0 评论 -
js 下载文件流
方法一：打开新的标签页下载download(row) { const link = document.createElement('a'); link.download = row.name; const prefix = this.$isMicro ? this.$prefixApi : '/api'; link.href = `${prefix}/package/download?id=${row.id}`; // 下载链接 link.target = '_bla原创 2021-01-13 09:57:08 · 626 阅读 · 0 评论 -
js 复制文本方法
复制文本方法：copy(text) { const oInput = document.createElement('input'); oInput.value = text; document.body.appendChild(oInput); oInput.select(); // 选择对象; document.execCommand('Copy'); // 执行浏览器复制命令 this.$message.success('复制成功'); oInput.remove(.原创 2021-01-08 11:24:14 · 602 阅读 · 0 评论 -
数组扁平化
// 数组扁平化flat(arr) { const newArr = arr.reduce((prev, current) => prev.concat(Array.isArray(current) ? this.flat(current) : current), []); return newArr;},原创 2020-12-21 18:01:43 · 115 阅读 · 0 评论 -
js时间格式互相转换问题
前端时间格式2020-02-11T12:24:18.000+0000转化成正常格式 function renderTime(date) { var dateee = new Date(date).toJSON(); return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') }new Date()转UT...原创 2020-12-17 18:02:21 · 417 阅读 · 0 评论 -
ES6重点知识点
ES 6主要知识点：1.解构赋值（1）扩展运算符（...）（2）深拷贝与浅拷贝数组有序赋值，对象无序根据key赋值当变量为undefined时，使用默认值笔记和简书中重要截图如下：2.Json和JS对象的区别3.evaleval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。4.扩展运算符，箭头函数，函数参数扩展运...原创 2020-01-13 09:37:46 · 516 阅读 · 0 评论 -
js setTimeout和Promise执行顺序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 ...转载 2019-10-11 17:15:56 · 363 阅读 · 0 评论 -
typeof运算
typeof 'a'-typeof 1 //NaNtypeof 'a'<typeof 1 //falseparseInt(typeof 'a') //NaNNumber(typeof 'a') //NaNtypeof比较时比较数据类型的首字母的ascii码原创 2019-10-11 16:45:43 · 194 阅读 · 0 评论 -
js slice，concat 数组元素包含引用值时为浅复制
参考博客：https://blog.csdn.net/huaxiawudi/article/details/83383298slice和concat这两个方法：不包含引用对象的一维数组是深拷贝包含引用对象的数组是浅拷贝，改变其中一个数组中引用对象，另一个数组也会跟着改变。一、数组浅拷贝在使用JavaScript对数组进行操作的时候，我们经常需要将数组进行备份.如下代码，...转载 2019-10-11 11:32:12 · 235 阅读 · 0 评论 -
Ajax中onreadystatechange函数不执行，是因为放在open()后
将onreadystatechange函数放在open前即可。ajax:1.创建Ajax对象——new XMLHttpRequest;/ new ActiveXObject('Microsoft.XMLHTTP');2.连接到服务器 ——open3.发送请求 ——send4.接收返回值 ——onreadystatechange...原创 2019-09-04 20:44:54 · 903 阅读 · 0 评论 -
audio.play() 控制台报错：Uncaught (in promise) DOMException
我当时的解决方法如下：在chrome的地址栏中输入：chrome://flags/#autoplay-policy，回车打开设置页面，然后点击Reset all to default，点击选项后页面下方会弹出个提示框，点击提示框上的“RELAUNCH NOW”即可。报错原因参考：https://blog.csdn.net/Mariosss/article/details/87861...原创 2019-09-11 17:17:15 · 11305 阅读 · 1 评论 -
改变this指向：call，apply，bind
参考菜鸟教程：JavaScript 中 call()、apply()、bind() 的用法个人感觉写的还不错，不懂得可以上手敲敲就明白了。除菜鸟教程写的意外还有一点需要注意的：call和apply是立即执行，bind等到事件触发才会执行；例如：div.onmousedown.bind(this): 等到div有鼠标点击时才会改变this指向，如果换成call和apply，不管鼠...原创 2019-08-17 15:16:07 · 165 阅读 · 0 评论 -
jquery中position（）和offset（）方法使用区别
1.position（）：获取该元素距离有最近定位的父元素的位置2：offset()：获取该元素距离文档的位置使用方法如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>...原创 2019-08-10 11:33:37 · 281 阅读 · 0 评论 -
深度拷贝
深度拷贝：直接将引用值复制时，复制的是地址，改变复制后的引用值时，前面会跟着变。下面是深度拷贝代码：// 深度拷贝// 判断是原始值or引用值， // 原始值：直接拷贝 // 引用值：判断是对象or数组， // 数组创建数组，对象创建对象 // 回到第一步，看数组或对象中的元素，是引用值or原始值...var obj = { n...原创 2019-07-16 14:35:07 · 120 阅读 · 0 评论 -
静态方法和实例方法
参考下面博客：JavaScript 静态方法和实例方法总结: 直接定义在构造函数上的方法和属性是静态的, 定义在构造函数的原型和实例上的方法和属性是非静态的静态方法:function ClassA(){ //定义构造函数};ClassA.func = function(){ //在构造函数上添加一个属性(因为函数也是对象) console.log("This is ...转载 2019-08-10 10:09:11 · 223 阅读 · 0 评论 -
数组forEach，filter，map，reduce
foreach不能中途break和return，若有需求用for循环<script type = "text/javascript"> var arr = [1,2,3,4,5]; // 1.forEach //封装forEach Array.prototype.myForEach = function(func...原创 2019-08-05 11:20:15 · 161 阅读 · 0 评论 -
undefind, null, NaN理解
undefined：全局属性，变量声明未初始化时，变量是undefind，及变量声明了，获取的typeof（变量）得到的结果也是 "undefind" ；如果变量未经声明就直接用回直接报错，但是获取未经声明变量的数据类型得到的结果也是 "undefind"。null：全局对象，表示"空"，表示不存在或无效的对象，NaN：typeof（NaN）为"number...原创 2019-08-04 20:58:22 · 285 阅读 · 0 评论 -
Boolean值为true和false情况
Boolean值为false情况：false，null，""，0，-0，undefined，初始对象未定义；true情况：除上面false情况外都为ture。原创 2019-08-04 20:08:35 · 8718 阅读 · 0 评论 -
引用值，原始值
Number、Stirng、Boolean、Null、Underfined这些基本数据类型，他们的值直接保存在栈中;Object、Function、Array、Date、RegExp这些引用类型，他们的引用变量储存在栈中，通过指针指向储存在堆中的实际对象在简书上看了一篇比较好理解的，截图如下：...转载 2019-08-04 19:57:03 · 134 阅读 · 0 评论 -
setInterval() 和setTimeout() 区别
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。setTimeout()只执行一次，而setInterval()可以多次调用。...原创 2019-08-03 18:09:54 · 138 阅读 · 0 评论 -
offsetLeft与style.left区别
offsetLeft 获取的是相对于父对象的左边距，left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距，如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，这同offsetLeft是相同的。区别：1. style.left 返回...原创 2019-08-03 17:51:10 · 206 阅读 · 0 评论 -
javascript运动总结
1. 伸缩框：鼠标移到指定区域，框缓冲伸展出，移出指定区域，框收回。核心思想：给两个目标值，缩回时嵌入页面左边，伸出时整个wrapper向右移出。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" co...原创 2019-08-03 09:36:47 · 139 阅读 · 0 评论 -
转载：JS中offset, client，scroll问题
...转载 2019-08-02 10:53:43 · 170 阅读 · 0 评论 -
offsetLeft
offsetLeft等获取的数值是整数，无小数点，当和小数相加减时需要酌情处理eg：target.style.left = target.offsetLeft + speed + 'px';speed要处理成整数原创 2019-08-01 09:16:02 · 456 阅读 · 0 评论 -
js 属性值赋值
target.style.left = '300px';在js中，给属性值赋值加引号；css中无引号原创 2019-07-31 21:29:26 · 451 阅读 · 0 评论 -
事件
1 getComputedStyle(elem,null); //null位置填伪元素时，获取伪元素样式表2 addEventListener(type,handle,false); //false代表事件冒泡，ture代表事件捕获同一个对象的事件处理既触发了冒泡又触发了捕获时，触发顺序时先捕获后冒泡。该对象谁先绑定谁先执行。...原创 2019-07-19 10:33:45 · 87 阅读 · 0 评论 -
继承
继承：//父类构造函数function Father(name){ this.name = name; this.sum = function(){ console.log(this.name); }}Father.prototype.age = 30;1 原型链 ：新的实例等于父类的实例// 1.原型链继承 function Son...原创 2019-07-15 09:28:05 · 104 阅读 · 0 评论 -
Js的prototype、constructor和--proto--
constructor:始终指向当前对象的构造函数prototype：函数的内置属性，一个函数指向一个对象，函数的原型对象__proto__: 对象的内置属性，一个对象指向该对象的原型对象，作用是：该对象中没有的属性沿着原型链向原型对象中查找。具体详解见博客：帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）...原创 2019-07-14 19:54:40 · 233 阅读 · 0 评论 -
预编译
预编译：原创 2019-07-14 09:17:57 · 130 阅读 · 0 评论 -
类型转换
特殊记忆：Number(null) ： 0 Number(undefined) : NaN null和undefined不能用toString undefined > 0 : false undefined == 0: false undefined < 0 : false null > 0:false null == 0 : false //为...原创 2019-07-14 09:07:09 · 122 阅读 · 0 评论 -
闭包
当内部函数被保存到外部时会生成闭包，闭包会导致原有作用域链不释放，造成内存泄漏。 f = (表达式1，表达式2) //计算表达式1 -->计算表达式2 --> 将表达式2结果赋给f // 利用立即执行函数解决闭包问题 //控制台输出0-9 function test() { var a...原创 2019-07-13 22:54:03 · 119 阅读 · 0 评论