![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javaScript学习
qq_32021429
这个作者很懒,什么都没留下…
展开
-
前端优化渲染:长列表渲染
众所周知,DOM多了之后,页面会变得很卡顿。有时候又不得不渲染很多数据,比如长列表,这时就需要前端做一些渲染优化了。原创 2023-09-15 15:12:50 · 424 阅读 · 2 评论 -
原生JS实现滑块功能
原生JS实现滑块功能前两天用到ant-design的滑块组件,觉得很有意思,就自己简单实现了一下。效果图如下:html代码<div class="box"> <div class="length"></div> <div class="tip"></div> <div class="light"></div> </div>样式.box { padding:原创 2022-04-21 11:22:11 · 2205 阅读 · 0 评论 -
原生JS封装Modal弹框
使用原生JS(es5)封装一个属于自己的Modal弹框效果图展示主要代码function Modal(options) { options = Object.assign({ title: '标题', backgroundColor: '#fff', // 背景颜色 mask: true, //是否显示遮罩层, content: '弹框内容', cancelText: '取消',//取消按钮文字 okText: '确认'原创 2022-04-12 17:19:00 · 2612 阅读 · 0 评论 -
简单封装数据类型检测方法toType和循环遍历方法each
简单封装数据类型检测方法toType和循环遍历方法each数据类型检测方法toType实际项目开发时,往往需要对数据进行数据类型检测,根据检测的结果的不同从而进行不同的操作。但是目前已有的检测方法都要么不够全面,要么不够简洁,所以我们自己简单的封装一个检测数据类型的方法。(可能也不够全面,单足够用了)function toType(data) { if (typeof data !== 'object') return typeof data; if (typeof data原创 2021-05-13 11:36:12 · 690 阅读 · 0 评论 -
JS中关于数组和对象的深浅拷贝
数组与对象的深浅拷贝浅拷贝:只会拷贝数组/对象的第一层级深拷贝:只要有深层嵌套,都拷贝一些浅拷贝的方法let arr = [1, 2, 3, 4], newArr; // 数组浅拷贝 // 1.展开运算符 ... newArr = [...arr]; // 2.使用数组合并 concat 会返回一个新的数组 newArr = arr.concat([]); // 3.使用数组截取 slice newArr = arr.slice(0, arr.length原创 2021-05-13 11:24:29 · 132 阅读 · 0 评论 -
JS中关于数组对象的深浅合并
数组对象的深浅合并浅合并:只会把没有冲突的属性合并上,对于有冲突的属性,后者会完全覆盖前者的属性值,且只会合并第一层深合并:对于有冲突的属性,会把将两个属性值进行合并,而不是简单的让谁覆盖谁function deepMearge(obj, target={}) { // target 替换 obj let p = {}; // 是为了调用 Object.prototype.toSring方便 for(let key in target) { let is原创 2021-05-13 11:17:00 · 574 阅读 · 0 评论 -
简单实现EventBus
简单实现EventBus我们知道,基于DOM2级绑定事件是基于事件池的机制,可以给同一个元素的同一个行为绑定多个不同的方法,当该行为触发时,绑定的这些方法会被依次执行。但是,DOM2级事件绑定只能对元素的默认行为进行方法绑定,例如:click、keydown、scroll等原生默认行为。// 基于事件池机制实现事件绑定,可以绑定任意自定义事件(function(){ function Sub(){ this.listeners = {} } Sub.protot原创 2021-05-06 15:55:25 · 202 阅读 · 0 评论 -
js实现防抖和节流
利用闭包机制简单实现函数防抖和节流防抖 debounce:在规定的时间内只会执行一次 function debounce(fn, time) { time = time ? time : 500; var timer; return function (...params) { var that = this; // 每次执行之前判断是否已经有定时器了,如果有了就先清除定时器再重新创建定时器 timer ? clearTimeout(ti原创 2021-05-06 15:14:51 · 105 阅读 · 1 评论 -
观察者模式与发布订阅模式的相同点和不同点
观察者模式与发布订阅模式的联系和区别有人说观察者模式是发布订阅的升级版,也有人说发布订阅是进阶版的观察者模式,但是无论是观察者模式还是发布订阅模式,它们都是定义了对象之间的一种一对多的依赖关系。观察者模式当目标对象的状态发生改变时,所有它里面的被观察的对象,都会得到通知,并执行相应的操作。 // 目标对象类 function Sub() { this.subs = []; // 观察者列表 } Sub.prototype = {原创 2020-11-23 15:36:24 · 230 阅读 · 0 评论 -
浅谈Object.defineProperty与Proxy的区别
Object.definePropertyObject.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象,即返回的还是目标对象本身。let obj = { name: '测试', age: 89 }; // 这个API没办法兼容 IE8 // Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。 let p = Object.d原创 2020-11-19 15:44:32 · 348 阅读 · 0 评论 -
前端工程化学习之webpack的优化
webpack的各种优化1.删除无用的csspurgecss-webpack-plugin:删除无用的css插件glob:功能是查找匹配的文件先下载这两个包,再去webpack.config.js文件中进行配置2.图片压缩image-webpack-loader安装这个加载器的时候会遇到各种坑,如果丢包就用cnpm多下载几次安装成功之后运行 npm run dev会报一个错Automatic publicPath is not supported in this browser解决办法原创 2020-11-12 14:56:35 · 284 阅读 · 0 评论 -
js学习之ajax的基础知识
ajax的基础知识创建ajax实例的步骤// 1、创建AJAX实例 let xhr = new XMLHttpRequest(); // 2、打开URL(发送请求前的一些处理) xhr.open('get', 'http://www.baidu.com', true); // 3、箭筒AJAX状态信息 xhr.onreadystatechange = function(){ // xhr.readyState AJAX的状态 0~4 // xhr.status原创 2020-11-06 16:34:59 · 104 阅读 · 0 评论 -
js学习之实现拖拽效果
JS原生实现拖拽效果HTML代码<!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> html,原创 2020-11-06 11:29:42 · 251 阅读 · 0 评论 -
js学习之事件的传播机制
事件的传播机制/* * 事件的传播机制 + 捕获阶段:从最外层的元素一直往里层逐级查找,直到找到事件源为止,目的就是为冒泡阶段的传播提供路径 =>ev.path存储的就是捕获阶段收集的传播路径 + 目标阶段:把当前事件源相关事件行为触发 + 冒泡阶段:按照捕获阶段收集的传播路径。不仅仅当前事件源的相关事件行为会被触发,而且从内向外,其祖先所有元素的相关事件行为也都会被触发(如果做了事件绑定,那么绑定的方法也会执行)*//* * DOM0事件绑定中给元原创 2020-11-05 16:26:52 · 166 阅读 · 2 评论 -
JS学习之事件对象和默认行为
事件对象/* * 事件对象:存储当前事件操作及触发的相关信息的(浏览器本身记录的,记录的是当前这次操作的信息,和在哪个函数中无关) 给当前元素的某个事件行为绑定方法,当事件行为触发,不仅会把绑定的方法执行,而且还会给方法默认传递一个实参,这个实参就是事件对象 * 鼠标事件对象 MouseEvent + clientX/clientY 鼠标触发点距离当前窗口的x/y轴坐标(只对当前屏,卷去的部分不计算在内) + pageX/pageT 鼠标触发点距离当前body的原创 2020-11-05 14:36:54 · 188 阅读 · 0 评论 -
JS学习之事件和事件绑定
事件和事件绑定// 事件和事件绑定/* * 什么是事件? 事件是浏览器赋予元素的默认行为,也可以理解为事件时元素天生自带的,不论是否给其绑定方法,当某些行为触发的时候,相关的事件都会被执行触发 * 浏览器赋予元素的事件行为 - 鼠标事件 + click 点击/单击事件(PC) + dbclick 双击事件 + contextmenu 鼠标右键点击事件 + mousedown 鼠标按下 + mouseup 鼠原创 2020-11-05 11:26:13 · 151 阅读 · 0 评论 -
JS学习之浏览器底层渲染机制和性能优化
浏览器底层渲染机制和性能优化/* * 客户端从服务器获取到需要渲染的页面的源代码后 【开辟一个GUI渲染线程,自上而下解析代码,最后绘制出对应的页面】 * 自上而下解析代码是同步的,但是某些操作是异步的 请求加载属于资源的获取 渲染解析属于代码执行 * 1、关于CSS资源的加载 * + 遇到的是<style> 内嵌样式 * => 同步:交给GUI渲染线程去解析 * + 遇到的是<link>原创 2020-11-03 16:40:28 · 212 阅读 · 0 评论 -
JS中的发布订阅
JS中的发布订阅设计模式基于单例设计模式构建发布订阅(对象)/* * 设计模式:是一种思想,用来有效管理代码的思想 + 单例设计模式:对象 + 工厂设计模式:面向对象创建实例 + Promise设计模式:异步管理 + 发布订阅设计模式 + ... 发布订阅: 来源于 DOM2级事件池 DOM2级事件池机制:可以同时给同一事件类型行为绑定多个方法,当事件触发,绑定的方法依次被执行*//* function dom1()原创 2020-11-02 12:26:45 · 206 阅读 · 0 评论 -
用原生实现自己的Promise
JS实现Promise(兼容任意浏览器、then链式调用、catch等)(function(){ // 实现Promisefunction _Promise(fn){ // 要求接收的fn必须是一个函数,否则报错 if(typeof fn !== 'function') { throw new TypeError('_Promise resolver undefined is not a function') } // 每个实例应该有这两个属性:state,result原创 2020-10-31 11:45:14 · 238 阅读 · 0 评论 -
JS简单实现Promis(没有实现then链调用)
JS简单实现Promis(没有实现then链调用)// 实现Promisefunction _Promise(fn){ // 要求接收的fn必须是一个函数,否则报错 if(typeof fn !== 'function') { throw new TypeError('_Promise resolver undefined is not a function') } // 每个实例应该有这两个属性:state,result this.state = 'pending'; //原创 2020-10-30 17:00:27 · 511 阅读 · 0 评论 -
Promise中的then方法详解
Promise详解(第15天)/* * 创建Promise实例的时候得传一个函数 executor,并且这个函数接收两个参数 + resolve函数:将实例的状态从 pending 修改为 fulfilled/resolved,同时将实例的值改为执行这个函数时传递的实参 + reject函数:将实例的状态从 pending 修改为 rejected,同时将实例的值改为执行这个函数时传递的实参 每一个Promise实例都有两个重要的属性: + [[Pro原创 2020-10-29 16:48:18 · 4453 阅读 · 3 评论 -
详解JS中的同步异步编程
JS中的异步编程(异步、Promise)1、JS中的同步异步编程/* * JS中的同步异步编程 * 【进程、线程】 + 进程:代表的是一个程序(浏览器新开一个页面就是一个进程) + 线程:用来处理进程中的具体事物的,如果一个程序中需要同时做好多事情,就需要开辟好多线程 + 一个线程同时只能做一件事 * 浏览器是多线程的 + GUI渲染线程 + HTTP网络线程 + JS代码渲染线程 + ... *原创 2020-10-28 16:55:25 · 255 阅读 · 0 评论 -
JS中对象/数组的深浅拷贝
JS中对象/数组的深浅拷贝(第13天)// 对象(数组)的深克隆和浅克隆/* var obj = { a: 100, b: [10,20,30], c: { x:10 }, d: /^\d+s/, e: null, f: undefined, g: function(){}, h: new Date(), i: Symbol('A'),};let arr = [10, [100,200], {x: 10, y: 20}]; */// 浅克隆:只是最原创 2020-10-27 16:30:34 · 117 阅读 · 0 评论 -
js中的四种数据类型检测方法
js中的四种数据类型检测方法(第13天)/* * 数据类型检测 + typeof 检测数据类型的运算符 + 返回结果是一个字符串,字符串中包含了对应的数据类型 + "number/string/boolean/symbol/bigint/object/function" + 多个typeof检测,结果都是字符串 typeof typeof xxx => 'string' 【有BUG】 + typeof原创 2020-10-27 16:26:59 · 147 阅读 · 2 评论 -
js实现call和bind
call和bind的原理及源码(自实现)call ,apply 和 bind 都可以强制更改函数中的this指向,语法:call: call(context, param1,param2,…)apply:apply(context, [param1,param2, …])bind:bind(context, param1,param2,…)这三个函数中的第一个参数 context 就是自己决定函数中的this的指向,其余参数就是传给函数的实参call、apply、bind的区别call和原创 2020-10-26 15:39:31 · 518 阅读 · 2 评论 -
JS中的多种继承方式
JS中的多种继承方式(第12天)//----------------JS中的多种继承方式------------------/* * JS本身是基于面向对象开发的编程语言 => 类:封装、继承、多态 封装:类也是一个函数,把实现一个功能的代码进行封装,以此实现“低耦合,高内聚” 多态:重载、重写 =>重载:相同的方法名,由于参数类型/个数或者方法返回的值不同,具备了不同的功能(JS不具备严格意义上的重载,JS中的重载:同一个方法内,根据传参的不同实现原创 2020-10-24 16:29:46 · 193 阅读 · 0 评论 -
js中关于函数的三种角色,以及this的五种情况
学习JavaScript第十一天(函数的三种角色,this的五种情况)函数的三种角色/* * 函数的三种角色 + 普通函数:闭包作用域 + 构造函数:可以通过 new 执行创建其实例 + 普通对象:有键值对(也有原型链__proto__,指向Function.prototype这个匿名空函数) 这三种角色之间没有必然联系 所有的函数都是内置类Function的实例,所以一般函数的原型的constructor都是Function,即 fun.prototype原创 2020-10-23 16:02:09 · 142 阅读 · 0 评论 -
JS中关于原型的重定向问题,你需要注意
学习JavaScript高级第十天(原型重定向,new的实现)1、原型重定向/* * 原型重定向: 为什么要重定向: 为了方便批量给原型上扩充属性和方法 带来的问题: 1、新定向的原型对象上,没有 constructor 属性,结构不完整 2、浏览器默认生成的原型对象会因为缺少被引用而被销毁释放掉,可能导致在重定向之前给原型上添加的属性和方法丢失 !注意:内置类的原型不允许重定向*//* function Fn()原创 2020-10-22 17:05:02 · 211 阅读 · 0 评论 -
关于原型和原型链,你必须要知道的
学习JavaScript高级第九天(面向对象、原型、原型链)// ----------面向对象编程--------------/* * OOP (Object Oriented Programming): 面向对象编程 + java + javascript + c# + python + ... * POP (Procedure Oriented Programming): 面向过程编程 + c + ...原创 2020-10-21 16:39:09 · 176 阅读 · 2 评论 -
闭包的高级应用
学习JavaScript高级第八天(闭包高级应用)1、闭包应用值惰性函数和柯理化函数/* * JS高阶编程函数:惰性函数 + 懒 + 能只执行一次的绝不会执第二次*/// 这样写,每调用一次都要处理兼容的问题:这完全没有必要,第一次执行知道了兼容情况,后期再调用(浏览器也没余刷新、也没有换浏览器)兼容检验是没有必要的/* function getCss(ele, attr){ if(window.getComputedStyle) { return win原创 2020-10-20 16:14:25 · 238 阅读 · 2 评论 -
js中的单例设计模式以及部分JQ源码解析
学习JavaScript高级第七天(单例设计模式,JQ源码解析)// -----------------------单例设计模式------------------/* * 单例设计模式: 原理:利用闭包的保护及对象的分组特征,结合在一起实现的(最早期的模块化编程) 单例:单独的实例,每一个实例都是独立开来的,里面有很多自己的私有属性和方法 + 每一个对象都是Object的单独实例 + let obj = {}; 字面量方式 + le原创 2020-10-19 17:01:42 · 156 阅读 · 0 评论 -
闭包作用域练习题
学习JavaScript高级第六天(闭包作用域题)// 第一题/* var a = 10, b = 11, c = 12;function test(a) { a = 1; var b = 2; c = 3;}test(10);console.log(a,b,c); // 10 11 3 */// 第二题/* var a = 4;function b(x,y,a){ console.log(a); // 3 arguments[2] = 10; //原创 2020-10-17 17:10:25 · 117 阅读 · 0 评论 -
变量提升全面练习
学习JavaScript高级第五天(变量提升题)// 第一题/* console.log(a,b,c); // undefined *3var a = 12, b = 13, c = 14;function fn(a){ console.log(a,b,c); // 10 13 14 a = 100; c = 200; console.log(a,b,c); // 100 13 200}b = fn(10); // 函数执行,如果函数中没有return值,则默认返原创 2020-10-16 17:04:02 · 221 阅读 · 0 评论 -
详细告诉你,什么叫闭包
学习JavaScript高级第四天(闭包、内存释放机制)/* let x = 5;function fn(x) { return function(y) { console.log(y + (++x)); }}let f = fn(6);// x = 6 执行fn函数所形成的的执行上下文不销毁,因为它里面创建的私有变量被外界的f占用了f(7); // y=7; y+(++x) => 7+7=14 fn(8)(9); // => x=8, y=9 y+(++x) =&g原创 2020-10-15 17:15:07 · 374 阅读 · 0 评论 -
js中的数据类型转换及变量提升
复习JavaScript 高级第三天(数据类型转换、变量提升)// --------数据类型转换的4大核心标准--------/* * 把其他数据类型转为 Number 类型 1、需要特定转化为 Number 的 + Number(val) + parseInt/parseFloat(val) 2、隐式转换(浏览器内部默认要先转为 Number 再进行计算的) + isNaN(val) + 数学运算(特殊情况:+原创 2020-11-25 10:16:22 · 182 阅读 · 2 评论 -
对js中作用域的理解
复习JavaScript 高级第二天// obj['name']:获取成员为name的属性值// obj[name]:把name变量存储的值作为成员获取其属性/* * 对象的属性名: 1、字符串 2、Symbol 3、数字/布尔/null/undefined等基本数据类型值(用这些值直接处理和基于他们的字符串格式处理结果是一样的) obj[true] === obj['true'] === obj.true 是一样的*/// 对于普通对象来说,其属性名不能是引原创 2020-10-13 17:26:20 · 83 阅读 · 0 评论 -
js中的几种数据类型,你需要知道
JavaScript高级 第一天/* 九大数据类型 * 基本数据类型(原始值类型): number NaN、Infinity string 单引号、双引号、反引号包起来的内容 boolean true、false null undefined symbol 创建唯一值 bigint * 引用数据类型 object {} 普通对象 [] 数组对象原创 2020-10-13 11:45:19 · 118 阅读 · 0 评论 -
JavaScript中的数据类型及数据间的相互转换
js中的数据类型主要分为两大类基本数据类型数字 Number常规数字和NaN字符串 String所有拥单引号、双引号、反引号抱起来的都是字符串布尔 Booleantrue/false空对象指针 null未定义 undefined引用数据类型对象数据类型 Object{} 普通对象[] 数组对象/1?(\d|(-19))(.|)?$/ 正则对象Math 数...原创 2020-04-01 16:44:08 · 133 阅读 · 0 评论