JavaScript/Nodejs
文章平均质量分 82
js/nodejs,浏览器/客户端
你脸上有BUG
一只头秃程序媛
展开
-
Promisification、微任务
fication:使成为…,Promisification:使……成为promisenode.js常使用,promisify 是Node.js 标准库 util 模块中的一个函数,用于将遵循Node.js 回调风格的函数转换为返回Promise 的函数,可以使用 async/await 语法来等待异步操作完成,从而让异步代码看起来更像同步代码。目的: 接受回调的函数 —————————> 一个 返回p原创 2024-03-06 17:31:08 · 906 阅读 · 0 评论 -
promise.then异步实现方法对比(简易手写vs源码解析)
reaction 对象用于封装 then 方法中传入的成功和失败回调函数,以及与之关联的新 Promise 对象。它包含了以下属性:ok:用于存储成功回调函数,如果传入的回调函数是可调用的,则将其存储在这里。fail:用于存储失败回调函数,如果传入的回调函数是可调用的,则将其存储在这里。promise:用于保存 then 方法返回的新 Promise 对象。domain:用于存储当前 Promise 对象所属的域(如果支持)。原创 2024-03-06 17:18:37 · 719 阅读 · 0 评论 -
ES6——generator与yield
文章目录一、Generator生成器函数1. 特点二、yield的加入1. 引入2. yield 特点三、举个例子一、Generator生成器函数它是ES6新推出的一种异步编程解决方案,与普通函数的区别:函数名前多了一个星号,与yield关键字配合使用,实现暂停执行的功能。1. 特点函数名前多了一个星号*直接调用 Generator函数并不会执行,也不会返回运行结果,而是返回一个遍历器对象(Iterator Object)依次调用遍历器对象的next方法,遍历 Generator函数内部的每原创 2021-12-30 15:28:57 · 666 阅读 · 0 评论 -
JavaScript——原型/原型链中的顶层对象(图解)
本篇需要提前了解的知识储备:原型和原型链,以下仅概要介绍,不作详细讲解。详细学习可参考:JavaScript——面向对象(封装):https://blog.csdn.net/qq_29493173/article/details/118404400JavaScript——面向对象之继承(原型对象)与多态(重载、重写):https://blog.csdn.net/qq_29493173/article/details/118410075构造函数/原型/原型链构造函数:定义一类对象的统一结构原型(原创 2021-12-20 12:39:43 · 4271 阅读 · 2 评论 -
事件循环机制 + ES7:Async/Await(基于generator原理实现)附详细示例分析
文章目录任务队列宏任务和微任务示例一Async/Awaitasyncawait示例二任务队列同步任务:立即执行的任务,同步任务一般会直接进入到主线程中执行;异步任务:异步执行的任务,比如ajax网络请求,setTimeout 定时函数,异步任务会通过任务队列的机制(先进先出的机制)来进行协调。主线程内的任务执行完毕为空,会去任务队列读取对应的任务,推入主线程执行。上述过程的不断重复就是我们说的 Event Loop (事件循环)宏任务和微任务Macro Task (宏任务):scrip原创 2021-08-22 00:24:42 · 676 阅读 · 0 评论 -
浅谈浏览器多进程与JS线程
面试被问到了浏览器线程,没答出来,最终还是感谢拿到了offer对于浏览器的知识还是知道的太少了,开始恶补TAT文章目录一、进程、线程之间的关系二、浏览器内的进程三、浏览器内核(渲染进程)四、 js引擎为什么是单线程五、浏览器内核中线程之间的关系1. GUI渲染线程与JS引擎线程互斥2. JS引擎线程与事件触发线程、定时触发器线程、异步HTTP请求线程一、进程、线程之间的关系一个进程有一个或多个线程,线程之间共同完成进程分配下来的任务。打个比方:假如进程是一个工厂,工厂有它的独立的资源工厂之转载 2021-08-19 14:35:30 · 484 阅读 · 2 评论 -
ES6之let原理+回调函数等待队列——五个完全相同的按钮,点第i个按钮弹出i
看此篇文章前,请确保已有闭包的知识储备~一、问题引入页面上五个完全相同的按钮,现在想实现点哪个按钮,哪个按钮就弹出自己是第几个。<button>click me!</button><button>click me!</button><button>click me!</button><button>click me!</button><button>click me!</butto原创 2021-08-10 18:04:39 · 571 阅读 · 0 评论 -
赋值-按值传递
一、按值传递1.原始类型例:Number,String,Boolean,Null,Undefined在函数中修改新变量,不会影响原变量例:var a = 3;var b = a;b++;console.log(a, b);//3,42.引用类型例:Object,Array在函数中用新变量修改对象,等效直接修改原对象例:var arr = ['1','2','string'];var arr1 = arr;arr1.pop();console.log(arr);//['1',原创 2021-08-09 13:14:37 · 187 阅读 · 0 评论 -
DOM(四)——事件、事件模型(冒泡)与事件对象的功能
浏览器自动触发的或用户手动触发的页面中内容或状态的改变(2). 什么是事件处理函数: 当事件发生时,我们希望自动调用执行的函数(3). 什么是事件绑定:a. 每个元素上都有一批on开头的事件属性b. 事件绑定就是提前将事件处理函数保存到元素的事件属性上。c. 结果: 当事件发生时1). 浏览器先找到元素身上的对应事件属性2). 自动调用事件属性中保存的事件处理函数2. 事件绑定: 3种:(1). 在HTML中手工绑定:<元素 on事件名=“事件处理函数()”> ..原创 2021-07-14 12:14:27 · 242 阅读 · 1 评论 -
DOM(三)——创建删除元素及优化(文档片段)
文章目录一、添加一个新元素(1)创建一个新的空元素对象(2)为新元素添加必要属性(3)将新元素添加到DOM树上指定父元素下,浏览器才能显示出新元素a.在父元素下末尾追加新元素b. 在父元素下插入到一个现有子元素之前c. 替换父元素下的一个现有的子元素二、删除元素三、优化1.父元素追加DOM树法2.文档片段对象法一、添加一个新元素(1)创建一个新的空元素对象var 新元素对象=document.createElement("标签名")结果:<元素></元素>示例:var a原创 2021-07-13 09:53:56 · 393 阅读 · 0 评论 -
DOM(二)——修改内容、属性、样式
一、修改内容(1)获取或修改元素开始标签到结束标签之间的原始的HTML内容(双标签)元素对象.innerHTML获取元素内容时: innerHTML原样返回HTML代码中的html内容,不做任何加工修改元素内容时: innerHTML会先将字符串内容交给浏览器解析,然后将解析后的可以给人看的内容显示在页面上示例:<h3 id="msg">来自<a href="#"><<新华社>></a>的消息<原创 2021-07-10 13:09:39 · 1371 阅读 · 1 评论 -
DOM(一)——DOM树和查找元素
文章目录一、DOM二、DOM树三、查找元素1. 不需要查找,就可直接获得元素/对象2. 按节点间关系查找a. 节点树(不建议使用)b. 元素树:3. 按HTML特征查找1) 按id名查找一个元素2) 按标签名查找多个元素3) 按class名查找多个元素4)按name名查找多个表单元素:四、DOM效果标准4步4.1 事件绑定a. 手工在html中元素开始标签中绑定事件处理函数b.在js中绑定一、DOMDOM(Document Object Model文档对象模型): 专门操作网页内容的一套对象和函数的总称原创 2021-07-09 01:07:40 · 1241 阅读 · 2 评论 -
ES6(三)——回调地狱和promise异步任务顺序执行(传参、错误处理)
文章目录方法一、回调函数(回调地狱)方法二:promise2.1异步任务传参(单个)2.2异步任务传参(多个)2.3 错误处理2.4 Promiss对象三大状态: (学名)我们现在需要多个异步任务必须顺序执行异步函数:各自执行各自的,互不干扰,互相之间也不会等待。方法一、回调函数(回调地狱)i. 前一项任务:function 前一项任务(购物车){ 异步任务 异步任务最后一句话之后 购物车()}ii. 调用前一项任务时:前一项任务(function(){ 下一项任原创 2021-07-08 13:57:31 · 710 阅读 · 0 评论 -
ES6——class和继承,保护对象
一、class今后,只要在es6中创建一种新的类型,包含构造函数+原型对象方法,用class来创建。1. 定义class:class:集中保存一种类型的所有子对象的统一属性结构和方法定义的程序结构。步骤:用class{} 包裹原构造函数+原型对象方法原构造函数名升级为整个class的名字,所有构造函数统一更名为"constructor"原型对象中的方法,不用再加prototype前缀,也不用=function,直接简写为:方法名(){ ... ...}直接放在class{}内原创 2021-07-07 18:14:07 · 310 阅读 · 0 评论 -
ES6——let、参数增强、箭头函数、模板字符串、for of和解构
ECMA -> ECMAScript -> ES 标准规范ES6: js的第6套标准规范 1. let1.1 let特点1.2 let底层原理块级作用域:解决全局污染var let const三个区别2.参数增强3.箭头函数4.模板字符串1. letvar关键字定义的变量可以在使用后声明,也就是变量可以先使用再声明。 //var a //会将第三行的var a提到最前面,提前声明变量console.log(a); //undefi.原创 2021-07-06 10:53:46 · 205 阅读 · 0 评论 -
ES5(三)——数组新增函数every()、some()、map()、foreach()、filter()和reduce()汇总
一、every()专门判断一个数组中是否所有元素都符合要求var 判断结果=数组.every( function(当前元素值,当前下标i,当前数组){//回调函数 return 检查当前元素值是否符合要求,并返回检查结果 });原理:i. every内自带for循环,自动遍历数组中每个元素ii. 每遍历一个元素,就自动调用一次回调函数iii. 每次调用回调函数时,都 自动传入三个值:①当前元素值②当前下标i③当前数组对象iv. 在回调函数内, 判断当前元素值是否符合原创 2021-07-06 10:45:29 · 519 阅读 · 0 评论 -
ES5(二)——替换this 之call()、apply()和bind()
替换this:如果系统自动指定的this对象不是我们想要的,我们就可主动更换this指向的对象。一、call()在一次调用函数时,临时替换一次函数中的this为指定对象。调用函数 `.call(替换this的对象, 实参值1,...)`立刻调用一次点前的函数自动将 “.” 前的函数中的this替换为指定的新对象,函数本次调用后,this恢复原样还能向要调用的函数中传实参值示例:使用call,临时替换计算器函数中的this为指定员工对象// 要调用的函数.call(替换this的对象原创 2021-07-06 08:49:19 · 278 阅读 · 0 评论 -
ES5(一)——保护对象
文章目录一、ES5之保护对象:1.自带的三个保护属性2.修改属性的开关:2.1 修改单个属性2.2 修改多个属性2.自定义规则-访问器属性2.1 定义访问器属性1) 定义小黑屋属性,转移原对象中原属性的值2) 定义访问器属性替身+2保镖(get_set)2.2 外界使用访问器属性2.3 访问器中的this3.保护结构a. 防扩展b. 密封c.冰冻一、ES5之保护对象:在ES5中,为对象提供了一套保护自身的机制对象中的每个属性,不仅是一个简单的值,底层已经变成了一个缩微的小对象。1.自带的三个保护属性原创 2021-07-05 17:41:24 · 166 阅读 · 0 评论 -
JavaScript——面向对象之继承(原型对象)与多态(重载、重写)
文章目录引入问题一、继承1. 步骤(1) 找到所有子对象共同的父对象(2) 将所有子对象公共的方法定义添加到共同的父对象中(3) 所有子对象因继承关系而直接使用父对象中公共的方法2. 原型中this的指代二、自有属性和共有属性三、 内置类型的原型对象:11种内置类型 (背)引入问题构造函数只能重用代码结构,但是浪费内存。(1)凡是放在构造函数中的方法定义,每创建一个新对象,都要重复创建这个方法对象的副本!所以,构造函数中不应该包含方法的定义!一、继承(1)定义:父对象的成员,子对象无需重复创建就原创 2021-07-02 14:13:32 · 884 阅读 · 1 评论 -
JavaScript——面向对象(封装)
文章目录一、对象方法中的this二、自定义方法-克隆伪代码过程图解一、对象方法中的this要在方法内调用属性名,需要使用thisi.什么是this?每个函数自带的,可以自动获得正在调用当前函数的"."前的对象的关键词ii.何时使用?只要对象自己的方法内,想使用对象自己的属性,必须加this.属性var lilei={ sname:"Li Lei", sage:11, intr:function(){ console.log(`I'm ${this.sname}, I'm $原创 2021-07-02 09:32:57 · 5109 阅读 · 1 评论 -
JavaScript——闭包函数及拓展题目
文章目录问题引入一、闭包函数1.什么是闭包函数?2.使用:3.代码结构二、示例图解如果要直接看结论,可跳过此处图解,直接看“三”三、简化记忆四、缺点问题引入假设现在要设计一段程序,给出金钱总数,每使用一次钱就会在总数里扣除:全局变量:a.优点:重用b.缺点:极其被污染、篡改var total=1000;function pay(money){ total-=money; console.log(`花了${money},还剩${total}`);}pay(100);p原创 2021-07-02 00:35:14 · 241 阅读 · 1 评论 -
Javascript——声明提升(函数、变量提升)
一、 声明提升声明提升是JavaScript中的一个缺陷,会造成输出结果与所构想的结果不一致。1. js引擎会将简写形式分解为原形式2. 将找到的声明依次提前到当前作用域的顶部,集中创建,3. 赋值将会留在原地例如:var a = 10;=>var a; a= 10;在程序开始执行前,找两种东西:var 变量名;function 函数名(…){…}1.1 示例讲解(变量提升)示例代码://var a //会将第三行的var a提到最前面,提前声明变量cons原创 2021-06-30 16:23:15 · 427 阅读 · 0 评论 -
Nodejs学习笔记(七)——接口API
接口:后端为前端提供的动态资源(数据、后台验证)动态资源就是一个URL形式一、RESTful接口(1)URL所有的资源都需要版本号,复数形式例:请求员工资源 emps资源名称http://127.0.0.1:8080/v1/emps 多个资源http://127.0.0.1:8080/v1/emps/3 单个资源http://127.0.0.1:8080/v1/users/checkuname 检测用户名(3)过滤数据查询的结果有太多的记录,需要过滤想要的数据例如:分页http:/原创 2021-05-26 19:48:49 · 432 阅读 · 0 评论 -
Nodejs学习笔记(六)——Mysql模块
属于第三方模块,Node.js下操作mysql数据库的模块一、Mysql模块连接下载安装npm install mysql1.引入mysql模块const mysql = require('mysql');2.创建连接对象保证已在mysql中导入tedu数据库,详情导入方式可查看命令教学:Mysql(三)——(cmd)数据库的命令操作 — 2.1导入外部数据库sql文件user和password以及database根据自己使用的更改!const c = mysql.createConne原创 2021-05-26 19:29:07 · 448 阅读 · 1 评论 -
Nodejs学习笔记(五)——express框架、路由(器)及中间件
框架:是一整套解决方案,简化已有功能,添加之前没有的功能。一、express框架基于Node.js的框架,快速、开放、极简的WEB开发框架。网址;www.expressjs.com属于第三方模块,需要先去下载安装npm install express下载后会有一个node——modules包:(1)路由路由:路由的三要素:请求的URL,请求的方法,回调函数处理请求,响应的内容:res.send()app.get('/list', (res, req)=>{//设置自响应的原创 2021-05-24 22:49:08 · 639 阅读 · 2 评论 -
Nodejs学习笔记(四)——http协议与服务器
一、http协议浏览器和WEB服务器之间的通信协议(1)通用头信息Request URL:请求的URL,表示要请求的服务器端资源Request Method:请求的方法,对资源的操作方式 get/post… Status Code:响应的状态码1**:服务器端接收到了请求,还没有做出响应2**:成功的响应3**:响应的重定向,跳转到另一个URL4**:客户端请求错误5**:服务器端错误(2)响应头信息(response)Content-Type:设置响应的内容类型解决中文乱码原创 2021-05-23 22:33:30 · 339 阅读 · 0 评论 -
Nodejs学习笔记(三)——同步和与异步之文件系统模块
一.同步和异步同步:在主程序中执行,会阻止后续代码的运行,是通过返回值来获取结果异步: 在一个独立的线程执行,不会阻止后续代码的运行,是通过回调函数来获取结果文件操作所有操作前都要先引入文件fs模块const fs = require('fs');(1)查看文件fs.readFileSync(文件路径):同步查看文件fs.readFileSync('./test.txt');fs.readFileSync(文件路径,回调函数):异步查看文件:fs.readFile('./t原创 2021-05-21 17:57:02 · 903 阅读 · 0 评论 -
Nodejs学习笔记(二)——模块
文章目录一 、模块基础(1)引入和导出(2)局部变量二、模块分类三、 URL模块练习:四、 querystring模块五、 timer模块(1)一次性定时器(2)周期性定时器(3)立即执行定时器六、文件系统模块(fs)一 、模块基础(1)引入和导出是一个独立的功能体,模块可以被其它的模块引入,也可以引入其它的模块require() 用于引入其它的模块module.exports 是一个空对象,用于存放导出的内容module_exports.jsconsole.log("emodu原创 2021-05-20 20:20:41 · 290 阅读 · 0 评论 -
Nodejs学习笔记(一)——基础之全局对象、包和npm
一、Node.js概述(1)对比JS(2)网址(3)使用Node.js(4)特点二、全局对象(1)global(2)console(3)process(4)Buffer三、全局函数(1)一次性定时器四、模块(1)引入和导出(2)局部变量一、Node.js概述Node.js是运行在服务器端的JS解释器,基于谷歌的V8引擎。(1)对比JSJS运行在客户端浏览器,存在多种JS解释器,存在代码兼容性问题;Node.js只有V8引擎一种解释器,不存在代码兼容性问题JS和Node.js都有共同的ES(内置.原创 2021-05-20 14:55:12 · 668 阅读 · 3 评论 -
Javascipt超详细版思维导图+基础语法导航
JS思维导图JS基础导航JavaScript(一)——变量,数据类型及转换、运算符和逻辑结构Javascript(二)——函数与作用域JavaScript(三)——对象与数组及APIJavaScript(四)——具体对象(Math、字符串对象、Date对象、Number对象及Boolean对象)JavaScript(五)——错误处理JavaScript(六)——ES6(let、函数增强、箭头函数和模板字符串)...原创 2021-05-19 14:37:28 · 93 阅读 · 0 评论 -
JavaScript(五)——错误处理
(1)常见的错误语法错误(SyntaxError):不符合语法规范,例如出现中文的符号,缺少半块括号引用错误(ReferenceError):使用了未声明的变量类型错误(TypeError):把一个非函数当做函数调用范围错误(RangeError):数据的使用超出了JS的规定范围自定义错误:程序员自己制定的错误throw 错误内容(2)错误处理在运行过程中产生的错误,不再影响后续代码的执行try{ 尝试执行,可能产生错误,一旦产生会被catch捕获}catch原创 2021-05-19 09:40:31 · 97 阅读 · 0 评论 -
JavaScript(四)——具体对象(Math、字符串对象、Date对象、Number对象及Boolean对象)
1.字符串对象包装对象:目的是为了让原始类型的数据像引用类型数据,具有属性和方法,一共有三种包装对象,String、Number、Booleannew String() 将数据转为字符串,返回对象String() 将数据转为字符串,返回字符串var str1 = '1'; //字面量var str2 = new String(1); //构造函数var str3 = String(1);//'1'(1)转义字符 \’ 将特殊意义的引号转义为普通引号\n 将普通的字符原创 2021-05-18 17:01:51 · 216 阅读 · 2 评论 -
JavaScript(三)——对象与数组基础及API
数据存储(1)原始类型存储直接存储在栈内存中tip:赋值传递中变量独立,不会相互影响,例如:var a = 1;//把a的值赋给了b//拷贝一份a的值赋给b,a和b都是独立的var b = a;//给a重新赋值,不会影响ba = 2;console.log(a,b);(2)引用类型存储将数据存储在堆内存中,同时会自动生成一个地址,然后把这个地址保存到栈内存(变量)中引用类型数据占用内存空间比较大,如果要销毁,没有任何的地址所指向,就会自动销毁。直接赋值为null即可销毁tip:原创 2021-05-17 18:22:56 · 249 阅读 · 3 评论 -
Javascript(二)——函数(重载、回调)与作用域(附图解)
一、函数函数分为系统函数和自定义函数。函数是一个功能体,需要提供若干个数据,返回处理的结果;用于封装重复执行的代码。调用函数:函数名称() //执行函数体重封装的代码1.1创建函数1.1.1 声明函数 function(1)创建无参数的函数function 函数名() { 函数体}(2)创建带有参数的函数形参:创建函数时的参数实参:调用函数时的参数,实参赋给形参实参个数可以和形参数量不匹配,若形参未被赋值为undefinedfunction 函数名(参数列表) { 函数原创 2021-05-13 19:09:04 · 576 阅读 · 1 评论 -
Js双引号和单引号使用注意事项
单引号和双引号①引号(同类型的引号,单引号和双引号是不同类型)是成双对的,在读第一个引号时开始,读到第二个结束,遇到第三个又开始,第四个又结束……例:var a = "小菜鸡'+'是谁";//小菜鸡'+'是谁var a = '小菜鸡"+"是谁';//小菜鸡"+"是谁②JS里面的单引号和双引号可以同时使用例:var a = '小菜鸡"'+'"是谁';//小菜鸡""是谁③不管是单引号还是双引号,里面都可以套相反的引号,但是只能嵌套两层。例:var _html="<div class原创 2021-05-11 15:34:35 · 735 阅读 · 0 评论 -
JS逻辑运算符——短路逻辑
短路逻辑当执行完第一个条件不再执行第二个条件,就会产生短路逻辑(关注点在于第二个条件(表达式)是否执行)</font>&& 当第一条件为false就不再执行第二个条件|| 当第一个条件为true就不再执行第二个条件//如果满18岁打印’成年人‘var age = 11;age >= 18 && console.log('成年人');//前面一个条件不满足,则不会执行后面的短路逻辑赋值如果没有执行第二个表达式,就把第一个表达式赋给原创 2021-05-11 14:51:41 · 1302 阅读 · 0 评论 -
JavaScript(一)——变量,数据类型及转换、运算符和逻辑结构
JS1.概述2.开发环境3.JS的语法规范4.变量与常量4.1常量4.2 变量5.数据类型5.1数据类型类别(1)数值型(2)字符串型(3)布尔型(4)未定义型(5)空5.2数据类型转换1)隐式转换2)强制转换6.运算符(1)算术运算符(2)※比较运算符(等于与===)(3)※逻辑运算符(短路逻辑)(4)位运算符(5)赋值运算符7.逻辑结构1.概述(1)历史1995年,JS最早出现在NetScape的浏览器中1996年,IE3中也出现了JS的克隆版,称作JScript1997年,EMCA组织制定了原创 2021-05-11 14:38:18 · 318 阅读 · 0 评论 -
JS:正则表达式详细语法基础
正则表达式一、字符描述二、字符范围2.1示例正则表达式(Regular Expression)是一个描述字符模式的对象。一、字符描述字符模式是由一系列字符构成的特殊格式的字符串,由普通字符和元字符组成。普通字符:仅能够描述自身,如A ~ Z、a ~ z、0 ~ 9。 元 字 符 :拥有特殊含义的字符,一般需要加反斜杠进行标识,以便对原字符进行转义。元字符描述.查找单个字符,除了换行和行结束符\w查找单词字符。匹配0-9、a原创 2021-03-29 19:08:54 · 220 阅读 · 0 评论 -
Js事件处理之“事件传播三个阶段”
一、三个阶段根据事件流类型,可以把事件传播的整个过程分为3个阶段,依次为:事件捕获阶段先由文档的根节点document往事件触发对象,从外向内捕获事件对象目标阶段(目标对象本身的事件程序)到达目标事件位置,触发事件本身的程序内容;事件冒泡阶段1再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象。二、事件传播过程特点:从document对象开始,最后返回document对象结束。本质上,事件首先向下遍历父元素,直到到达目标元素(捕获阶段)为止。当事件到达目标时,它将在那儿触原创 2021-03-22 16:47:49 · 4959 阅读 · 0 评论