![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 50
Donmind29
可以慢下来,但不要停下来
展开
-
javascript事件循环Event Loop,宏任务与微任务
1、javascript的运行机制介绍 javascript是单线程的语言,默认情况下一个时间点只能做一件事情,因此引入异步模型 javascript是一门解释性脚本语言,即(边解释边运行)2、阻塞式代码和非阻塞式代码阻塞式代码:同步代码代码会严格按照单线程(从上到下, 从左到右)执行代码逻辑,以此标准来进行代码的解释和运行const a = 1, b = 2let d1 = new Date().getTime(), d2 = new Date().getTime(.原创 2022-03-28 18:18:38 · 2081 阅读 · 1 评论 -
vue 指定元素滚动到页面可视区域
使用场景:1、点击页面tab,或步骤条的某一步,使其对应元素滚动到页面可视区域2、使遍历而来的list滚动到页面可视区域实现:使用el.scrollIntoView() API实现scrollIntoView()方法会滚动元素的父容器,使被调用scrollIntoView()的元素对用户可见。注意:要设置页面(最外层容器)可滚动,否则不会生效语法: element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.s原创 2022-02-07 11:27:26 · 4692 阅读 · 0 评论 -
Vue自定义指令, 自定义指令封装全局防抖函数
Vue自定义指令除了核心功能默认内置的指令 (v-model 和 v-show等),Vue允许我们注册自定义指令用于元素上当我们需要对普通 DOM 元素进行底层操作时,就可以用到用到自定义指令。如何注册我们可以全局注册自定义指令, 也可以局部注册全局注册:全局注册自定义指令是将我们的自定义指令挂载到vue实例上的,在项目中都可以使用全局指令注册方法为:Vue.directive(dName, options) 传入两个参数分别是 指令名 和 配置对象创建完之后,我们就可以使用 v-指令名原创 2022-01-13 16:45:39 · 581 阅读 · 0 评论 -
防抖与节流
防抖与节流什么情况下需要防抖与节流:在一些高频率事件触发的场景下,不希望对应的事件处理函数多次执行比如: 滚动事件 input输入框的模糊查询轮播图切换 点击操作等浏览器默认情况下都会有自己的监听事件间隔(谷歌浏览器 4 - 6 ms), 如果检测到多次,就会造成不必要的资源浪费防抖:对于高频操作来说,我们只希望识别一次点击,即只触发一次对应的事件,第一次或最后一次都可以节流:对于高频操作,可以自行设定事件触发频率,以使多次触发的事件,在规定时间内,只触发一次防抖实现:<原创 2022-01-11 00:32:46 · 167 阅读 · 0 评论 -
JS性能优化策略
JS性能优化策略一、减少不必要的全局变量使用 为什么要尽量少使用全局变量呢?全局变量定义在全局执行上下文,是所有作用域链的顶端,从下向上根据作用域链查找的时间损耗是比较大的,代码执行效率相对是比较低的。全局执行上下文一直存在于上下文执行栈,直到程序退出才会被释放,不利于GC进行垃圾回收。因此,在能用局部变量解决的地方,就用局部变量验证一下:let i , str = ""function packageDom(){ console.time('使用全局变量') for(原创 2022-01-09 23:43:09 · 689 阅读 · 0 评论 -
JS内存管理
内容概要:在程序运行中,性能优化是必不可少的。从认识内存空间的使用,到垃圾回收的机制,一步步地写出更高效的代码内存管理垃圾回收与常见GC算法V8引擎的垃圾回收Performance工具代码优化示例内存管理介绍:内存: 由可读写单元组成, 表示一片可操作空间管理: 人为的去操作一片空间的申请、使用和释放内存管理: 开发者主动申请空间、 使用空间、 释放空间流程: 申请-使用-释放JS中的内存管理JS中的内存管理是自动进行的,没有相关API去进行实现,以下内容就可以看做是JS中原创 2022-01-03 17:53:21 · 124 阅读 · 0 评论 -
JS内存管理
内容概要:在程序运行中,性能优化是必不可少的。从认识内存空间的使用,到垃圾回收的机制,一步步地写出更高效的代码内存管理垃圾回收与常见GC算法V8引擎的垃圾回收Performance工具代码优化示例内存管理介绍:内存: 由可读写单元组成, 表示一片可操作空间管理: 人为的去操作一片空间的申请、使用和释放内存管理: 开发者主动申请空间、 使用空间、 释放空间流程: 申请-使用-释放JS中的内存管理JS中的内存管理是自动进行的,没有相关API去进行实现,以下内容就可以看做是JS中原创 2022-01-03 17:48:42 · 1055 阅读 · 0 评论 -
JS let、const、var的区别、块级作用域理解
let constlet用于声明变量,不存在变量提升(不允许先试用后声明),可以只声明变量 之后赋值,可以使用一条let同时声明多个变量let i, j , klet x = 1, y = 2, z = x*y同一个块级作用域内不可重复声明同一个变量声明的变量不会挂载到全局对象上constconst用于声明常量,一旦被声明不可被改变(引用数据类型内存地址改变才视为改变)const声明常量必须赋值同一个块级作用域内不可重复声明同一个常量名块级作用域 let原创 2021-12-27 17:16:33 · 671 阅读 · 0 评论 -
百度地图 JS api使用
首先进入百度地图开放平台,注册成为开发者,并创建应用,得到自己的AK地址:http://lbsyun.baidu.com/apiconsole/key/create#/home然后在页面中引入JS文件:<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=自己的AK"></script>完整代码:<!DOCTYPE html原创 2021-05-07 16:28:01 · 276 阅读 · 0 评论 -
前端使用canvas,处理图片压缩上传服务器
前端总是遇到一些上传图片的需求,当用户上传的图片过大时,为减轻服务器压力,就需要对图片进行一定的压缩,然后上传到我们的服务器简单说下实现思路,完整代码在下面,注释比较详细一、将input标签设置为type="file"便可实现选择本地图片的功能,accept属性表示接收图片的类型,我们监听input的change事件,并将用户上传的图片机型处理二、将用户上传的文件信息转换成base64格式的数据三、创建一个canvas对象,对base64数据流进行处理,然后使用canvas.toDataURL将结果原创 2021-04-15 23:41:57 · 300 阅读 · 0 评论 -
一次面试总结2021.03.02
参加了一次面试,简单聊过之后,做了几道题,看着都是熟悉又陌生。哈哈,总结一下今天遇到的题一: let object = { a : 0 }; function fn(obj) { obj.a = 1; obj = { a : 2 } obj.b = 2 } fn(object); console.log(object);个人理解,函数实参相当于在函数内部声明了一个原创 2021-03-03 01:06:37 · 202 阅读 · 0 评论 -
字符串常用方法
字符串属于Javascript中基本数据类型的一种。用于表示由0个或多个16位Unicode字符组成的字符序列字符串可以用双引号包裹,也可以用单引号包裹。但是注意一定要左右两边都是双引号或单引号。字符串通常使用字面量表示即可,例如:const str = 'Hello Gary'此时就声明了一个字符串。一些特殊的字面量可以通过转义字符 \反斜杠 来表示一些特殊的字面量\n换行\t水平制表符\b空格\r回车\f换页\\表示一个反斜杠\原创 2021-03-01 01:54:36 · 2996 阅读 · 4 评论 -
JavaScript对象深拷贝
JavaScript对象深拷贝JSON.parse() + JSON.stringify()简单好用,但是这种方法不会拷贝原对象上的键为function类型的数据const cloneObj = JSON.parse(JSON.stringify(Obj))递归递归函数记得设置退出条件,否则很容易造成栈溢出function deepClone(obj) { let cloneObj; if(typeof obj !== "object" || obj == null){原创 2021-02-02 01:13:16 · 164 阅读 · 1 评论 -
JS常用正则表达式
//是否带有小数function isDecimal(strValue ) { var objRegExp= /^\d+\.\d+$/; return objRegExp.test(strValue); } //用户真实姓名检测,因为有一次看到一个小姑娘名字特别长,所以修改成了匹配两个中文以上。。function ischina(str) { var reg=/^[\u4E00-\u9FA5]{2,}$/; return reg.test(str原创 2021-02-28 00:32:40 · 210 阅读 · 1 评论 -
JS数据类型判断
在javascript中,数据类型可以分为基本数据类型和引用数据类型。分享一下数据类型判断方法一、typeof返回数据类型的字符串表达typeof的作用: 1、检测基本数据类型 2、检测是不是函数 3、检测引用数据类型都会返回“Object”,null属于对象console.log(typeof '123') // "string"console.log(typeof 123) //'number'console.log(typeof typeof 123) //'String'原创 2021-02-27 23:13:01 · 217 阅读 · 6 评论 -
JS函数中的new和return
首先了解下函数的返回值:当一个函数被调用时,会从函数内部的第一条语句开始执行,并在遇到关闭函数体的 }时结束,然后函数把控制权交还给调用该函数的程序。return语句可以使函数提前返回。当return语句执行时,函数立即返回且不再执行余下的语句一个函数总是会返回一个值,且函数的返回值可以是任意数据类型。如果没有通过return指定返回值,则返回undefined.如果函数调用时在前面加了new前缀,且函数的返回值不是一个引用数据类型的值,则返回new操作符隐式创建的对象说下new操作符的作用:1原创 2021-02-21 01:35:25 · 1252 阅读 · 2 评论 -
MVVM设计模式
MVVM模式MVVM模式是 为视图层(View)定制一套视图模型(ViewModel),并在设图模型(ViewModel)中创建属性和方法,为视图层(View)绑定数据(Model)并实现交互的一种设计模式,通过数据模型层(Model)来控制视图层(View)的显示效果。VM是MVVM模式的核心,最重要的就是对于VM层逻辑的处理,数据模型层可以自由修改,因而达到改变视图层显示效果的目的示例:创建一个滑动条组件V层:<div class="first" data-bind="type: 's原创 2021-02-19 01:31:27 · 1285 阅读 · 0 评论 -
JS二分法查找数组中某个值的下标
一、找到数组中间下标,将数组以分为二二、通过比较目标值与数组中间下标的值大小,改变查找范围三、不断递归,知道目标值与数组中间下标值相等,返回该下标function searchIdx(arr , target , start , end) { let mIdx = Math.floor((start + end) / 2) if(!arr.includes(target)){ return -1 }原创 2021-02-17 20:34:36 · 1180 阅读 · 3 评论 -
JS数组去重
一、两层循环function single(arr){ for(var i = 0 ; i < arr.length ; i++){ for(var j = i+1 ; j< arr.length ; j++){ if(arr[i] == arr[j]){ arr.splice(j ,1);原创 2021-02-17 20:06:29 · 100 阅读 · 0 评论 -
JS获取数组中最大值
一、设置一个空的变量num,循环数组,只要数组项大于就将该项赋值给num,最后return num function maxV(arr) { let num = 0; arr.forEach(item => { if(item > num) { num = item } }) retu原创 2021-02-17 19:47:38 · 768 阅读 · 0 评论 -
JS数组快速排序
一、找出数组的中间下标mIndex,因为可能不是整数,所以使用Math.floor()向下取整二、通过中间下标获取数组中中间下标的值mVal三、创建左右两个空数组,小于mVal的值放进左数组,大于mVal的值放入右数组四、采用函数递归的形式依次填充左右数组五、使用concat方法拼接并返回新数组 var arr = [4,56,12,435,32,7,8,90,1,2,3,54,56]; function qSort(arr){ //如果数组长度是1原创 2021-02-17 19:37:42 · 208 阅读 · 0 评论 -
JS多维数组转一维数组
一、递归解决 const arr = [1,[[2,3],4],[5,6]]; function flat(array){ let flatA = []; array.forEach((item,index) =>{ if(item instanceof Array){ flatA = flatA.concat(flat(item))原创 2021-02-15 23:39:32 · 493 阅读 · 0 评论 -
原生JS实现自定义滚动条
使用原生JS写一个完全可以自定义样式的滚动条CSS部分:<style> *{ margin:0; padding:0; } a{ text-decoration:none; } #wrap{ width:420px; height:600px; border:1px so原创 2021-02-14 00:48:40 · 591 阅读 · 2 评论