![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS
文章平均质量分 64
Kyyy.
这个作者很懒,什么都没留下…
展开
-
虚拟DOM,diff
。原创 2022-08-01 12:24:40 · 616 阅读 · 0 评论 -
js的基础
setTimeout不准时怎么办使用web worker,它为js创造了多线程环境,当js主线运行时,worker在后台运行,两者互不干扰,当worker运行出结果后,会把结果交给主线程 // worker 解决方案 let worker = new Worker('worker.js');判断一个变量是null,undefinedundefined:1,var exp = undefined;if (typeof(exp) == "undefined"){ alert(原创 2021-11-02 18:04:46 · 716 阅读 · 0 评论 -
webpack和node 相关
对webpack的了解静态模块打包工具他会在内部构建一个依赖图,这个依赖图反应模块之间的依赖关系,并生成一个或者多个bundle文件(打包生成的文件就是bundle)webpack本身可以解析打包各种符合模块规范的JS代码核心概念:mode 模式(生产模式 开发模式)区别是压不压缩文件entry 入口 打包开始的入口js文件output 出口 在哪输出打包好的bundleloader 加载器 loader让webpack可以用来处理除了js以外的文件格式,因为webpack他只能对于原创 2021-11-27 19:25:41 · 1417 阅读 · 0 评论 -
Vue、React
Vue双向数据绑定vue是通过数据劫持和发布订阅者模式来实现双向数据绑定的就是利用oberver来监听module数据的变化,通过compile来解析模板,最终通过watcher来建立oberver和module之间的通信桥梁创建一个vue对象,分为el模板和data数据使用Object.definePropertype来劫持data中的每个属性的getter和setter,在数据发生变化的时候发布消息给订阅者,触发相应的回调。(vue3使用proxy劫持数据)也就是observer的功能com原创 2021-11-14 22:46:27 · 1085 阅读 · 0 评论 -
js 中的== 和===
==在相等运算中,应注意以下几个问题:如果操作数是布尔值,则先转换为数值,其中 false 转为 0,true 转换为 1。如果一个操作数是字符串,另一个操作数是数字,则先尝试把字符串转换为数字。如果一个操作数是字符串,另一个操作数是对象,则先尝试把对象转换为字符串。如果一个操作数是数字,另一个操作数是对象,则先尝试把对象转换为数字。如果两个操作数都是对象,则比较引用地址。如果引用地址相同,则相等;否则不等。NaN与任何值都不相等,包括它自己。null 和 undefined 值相等,但是它.原创 2021-11-01 21:24:51 · 155 阅读 · 0 评论 -
js垃圾清除机制(标记清楚,引用计数)
内存泄漏不再使用到的内存,没有及时释放,就是内存泄露所以为了避免手动的释放内存,就有了垃圾请除机制代码回收规则如下:1.全局变量不会被回收。2.局部变量会被回收,也就是函数一旦运行完以后,函数内部的东西都会被销毁。3.只要被另外一个作用域所引用就不会被回收 (闭包中引用的变量不会被回收)垃圾回收的方法1,标记清除垃圾回收器会给在内存中的变量都做上标记,然后它会去除在环境中的变量和被环境中变量引用的变量(闭包)的标记,在这之后的被标记的变量就是需要清除的变量了。之后垃圾回收器将会回收这些变量原创 2021-11-01 20:56:14 · 2764 阅读 · 2 评论 -
js手写题
1,函数防抖和函数节流防抖和节流都是处理处理频繁调用的函数时的一个优化函数防抖在规定是一段时间内,只执行最后一次的函数调用,前面的不生效场景:在搜索框发请求时,避免用户打字幅度较快而发送太多没有必要的请求function debounce(func, wait) { var timer = null return function () { var ctx = this var args = arguments原创 2021-11-01 19:47:39 · 951 阅读 · 0 评论 -
JS事件循环
一,什么是事件循环javascript是单线程的脚本语言,一般情况下代码是同步执行的,所以js引擎遇到一个异步事件后并不会一直等待其返回结果,而是会将这个事件挂起,继续执行执行栈中的其他任务。当这个异步事件返回结果后,js会将这个事件加入到任务队列中等待被执行。任务又分为宏任务和微任务。宏任务:setTimeout,setInterval微任务:Promise Promise,process.nextTick当前执行栈执行完毕时,主线程会查看微任务队列有没有事件等待执行,如果有就将其压入执行栈中执原创 2021-10-25 23:35:45 · 141 阅读 · 0 评论 -
ES6 Promise
一,Promise到底是个啥?promise是一个构造函数,它用来封装异步操作,可以有效解决回调地狱问题以下使用promise封装ajax请求 var btn = document.getElementById('btn') btn.onclick = function () { const p = new Promise((resolve, reject) => { // 创建对象 const xhr = new原创 2021-10-25 22:34:19 · 116 阅读 · 0 评论 -
webpack生产环境的配置
const { resolve } = require("path");const MiniCssExtractPlugin = require('mini-css-extract-plugin')const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')const HtmlWebpackPlugin = require('html-webpack-plugin')//定义nodejs环原创 2021-04-26 21:40:53 · 80 阅读 · 0 评论 -
webpack开发环境的配置
文件目录:代码://开发环境的配置:能让代码运行即可//运行指令:webpack 会将打包结果输出出去// npx webpack serve 只会在内存中编译打包,没有输出const HtmlWebpackPlugin = require('html-webpack-plugin')const { options } = require('less')const { resolve } = require('path')module.exports = { ent原创 2021-04-19 18:48:48 · 84 阅读 · 0 评论 -
react-Difff算法的概念
react-Difff算法的概念Diff (different)tree diff :新旧两棵DOM树,逐层对比的过程。当整棵DOM树逐层对比完毕,则所有需要更新的元素必然能够找到。component diff:(component:组件)在进行tree diff 的时候,每一层中组件级别的对比。如果对比前后组件类型相同,则暂时认为此组件不需要被更新,如果对比前后组件类型不相同。则需要移除旧组件,创建新组件,并追加到页面上。element diff:在进行组件对比的时候,如果两个组件类型相同,原创 2021-03-08 17:17:36 · 276 阅读 · 0 评论 -
react-虚拟DOM的本质和目的
虚拟DOM的本质和目的虚拟DOM(Virtual Document Object Model)DOM是什么?浏览器中的概念,用JS对象来表示页面上的元素,并提供了操作DOM对象的API;什么是react中的虚拟DOM?是框架中的概念,是程序员用JS 对象来模拟页面上的DOM和DOM嵌套;虚拟DOM的目的是什么?为了实现按页面中DOM元素的高效更新;DOM和虚拟DOM的区别:1,虚拟DOM不会进行排版与重绘操作2,虚拟DOM进行频繁修改,然后一次性比较并修改真实DOM中需要改的部分(注意原创 2021-03-07 23:03:02 · 205 阅读 · 0 评论 -
ES6 set和map数据结构(数据结构之间的转换)
一、set1,基本用法ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成Set数据结构。 var s = new Set(); var arr = [1, 2, 2, 2, 3, 4, 5, 6, 6]; arr.map(x => s.add(x)); console.log(s); //1,2,3,4,5,6以上代码通过add方法向s中添加成员,结果表示Set原创 2020-11-26 20:27:49 · 377 阅读 · 1 评论 -
ES6 对象的扩展、Symbol
ES6 对象的扩展、Symbol一、对象的扩展1、 属性的简洁表示法ES6允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。var some='aaa';var obj={some};console.log(obj); //{some:aaa}//等同于 var obj={some:some}//只写属性名,不写属性值。这时,属性值等于属性名所代表的变量除了属性简写,方法也可以简写。var obj={ func(){ return 'hi!'原创 2020-11-04 23:10:28 · 155 阅读 · 2 评论 -
ES6 函数的扩展
ES6 函数的扩展一,函数参数的默认值ES6允许为函数的参数设置默认值,即直接写在参数定义的后面。 function log(x, y = 'world') { console.log(x + ' ' + y); } log('hello', 'hello'); //hello hello log('hello'); //hello world log('hello',); //hello wo原创 2020-10-25 15:05:46 · 118 阅读 · 0 评论 -
ES6 数值的扩展、数组的扩展
ES6 数值的扩展、数组的扩展一、数值的扩展1,二进制和八进制的表示ES6提供了二进制和八进制数值的新的写法二进制前缀:0b、0B八进制前缀:0o、0O2,Number.isFinite() 和 Number.isNaN() 方法Number.isFinite() 用来检验一个数值是否非无穷(infinite)。例: //infinite 极大的 无法测量的 无穷 console.log(Number.isFinite(5)); //true原创 2020-10-18 12:10:22 · 184 阅读 · 0 评论 -
字符串的新增方法
字符串的新增方法一,String.fromCodePoint()ES6 提供了String.fromCodePoint()方法,可以识别大于0xFFFF的字符,弥补了String.fromCharCode()方法的不足。该方法的作用与codePointAt()方法相反。String.fromCharCode(0x20BB7); // "ஷ"String.fromCodePoint(0x20BB7)// "????"在上面代码中,String.fromCharCode()方法,用于从原创 2020-10-08 18:43:09 · 292 阅读 · 0 评论 -
ES6正则表达式的扩展
ES6正则表达式的扩展一, RegExp 构造函数如果RegExp构造函数第一个参数是一个正则对象,那么可以使用第二个参数指定修饰符。而且,返回的正则表达式会忽略原有的正则表达式的修饰符,只使用新指定的修饰符。例:new RegExp(/abc/ig, 'i').flags// "i"二, 字符串的正则方法以下方法,在语言内部全部调用RegExp的实例方法,可以使用正则表达式:match()、replace()、search()和split()。三,u修饰符正则表达式添加的原创 2020-10-08 17:59:28 · 128 阅读 · 0 评论 -
ES6字符串的扩展
字符串的扩展一,ES6 加强了对 Unicode 的支持,允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点。(\uxxxx表示一个字符,后加字符的四位码点)"\uD842\uDFB7"// "????""\u20BB7"// " 7"上面代码表示,如果直接在\u后面跟上超过0xFFFF的数值(比如\u20BB7),JavaScript 会理解成\u20BB+7。由于\u20BB是一个不可打印字符,所以只会显示一个空格,后面跟着一个7。ES6 对这一点做原创 2020-10-08 17:08:49 · 147 阅读 · 1 评论 -
ES6 中 let和const命令
ES6 中 let和const命令一,let命令二,const命令一,let命令1,基本用法ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。2,特点特点一:使用let关键字声明的变量具有块级作用域,声明的变量只在所处于的块级有效 (块级作用域:在大括号中产生的作用域) if (true) { let num = 100; var abc = 200;原创 2020-10-08 13:05:45 · 161 阅读 · 0 评论