javascript
文章平均质量分 66
Y or Z
岁岁年年
展开
-
TS:接口VS类型别名
ts原创 2022-06-16 22:51:49 · 493 阅读 · 2 评论 -
H5 drag拖放
demo<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> #container { width: 800px; height: 800px; display: flex; justi原创 2021-10-11 16:15:04 · 343 阅读 · 0 评论 -
前端设计模式
策略模式定义一系列的算法,把它们一个个封闭起来,并且使他们可以相互替换。举例:处理商店促销类型prePrice - 处理预热价onSalePrice - 处理大促价backPrice - 处理返场价freshPrice - 处理尝鲜价askPrice - 分发询价逻辑实现:原本全部放在askPrice,并通过ifelse分支处理每种情况, 改为封装每一个单独功能但还是存在缺点:没有实现“对扩展开放,对修改封闭”的效果。// 处理预热价function prePrice(originP原创 2021-09-21 17:15:50 · 168 阅读 · 0 评论 -
html语义化标签
1、什么是HTML语义化?根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2.为什么要语义化?代码结构: 使页面没有css的情况下,也能够呈现出很好的内容结构有利于SEO: 爬虫依赖标签来确定关键字的权重,因此可以和搜索引擎建立良好的沟通,帮助爬虫抓取更多的有效信息提升用户体验: 例如title、alt可以用于解释名称或者解释图片信息,以及label标签的灵活运用。便于团队开发和维护: 语义化使得代码更具有可读性原创 2021-09-15 21:57:47 · 89 阅读 · 0 评论 -
用户体验优化-渐进式图片
认识渐进式图片渐进式图片其实是一种JPEG格式的图片,和普通的JPEG图片的区别如下:Baseline JPEG 普通图片渲染时,数据将按照存储时的顺序从上到下逐行扫描被显示出来的,直到所有的数据都被读取完毕,就完成了整张图片的显示。Progressive JPEG 这种格式的图片在保存信息的时候,是一帧一帧的存储的,如果逐帧逐帧的读的话,就会先看到模糊图,然后一点一点变清晰解码...原创 2021-09-15 16:28:41 · 660 阅读 · 0 评论 -
前端工程化
前端工程化就是为了让前端开发能够“自成体系”,主要应该从模块化、组件化、规范化、自动化四个方面思考。自动化:前端工程化的很多脏活累活都应该交给自动化工具来完成。需要秉持的一个理念是:任何简单机械的重复劳动都应该让机器去完成。图标合并、持续集成、自动化构建、自动化部署、自动化测试规范化:目录结构的制定、编码规范、前后端接口规范、git分支管理、文档规范组件化:组件化≠模块化。模块化只是在文件层面上,对代码或资源的拆分;而组件化是在设计层面上,对UI(用户界面)的拆分。模块化:Com原创 2021-09-08 14:43:02 · 123 阅读 · 0 评论 -
nodejs事件循环
其实nodejs与浏览器的区别,就是nodejs的 宏任务 分好几种,而这好几种又有不同的 任务队列,而不同的 任务队列 又有顺序区别,而 微任务是穿插在每一种【注意不是每一个!】宏任务 之间的,即微任务是在不同阶段之间执行的。1. timers:执行setTimeout() 和 setInterval()中到期的callback。2. I/O callbacks:上一轮循环中有少数的I/Ocallback会被延迟到这一轮的这一阶段执行3. idle, prepare:队列的移动,仅内部使用4原创 2021-09-01 21:08:49 · 583 阅读 · 0 评论 -
webpack多页面配置,多入口
原理将每个页面所在的文件夹都看作是一个单独的单页面程序目录,配置多个entry以及html-webpack-plugin即可实现多页面打包。使用Webpack构建多页面程序的实现步骤webpack多页面打包配置使用Webpack构建多页面程序...原创 2021-08-30 15:48:01 · 121 阅读 · 0 评论 -
promise捕获错误方式?用 try catch 可以捕获吗?
捕获错误方式rejectedcatch全局捕获示例:unhandledrejectionwindow.addEventListener('unhandledrejection', function(event) { // the event object has two special properties: alert(event.promise); // [object Promise] - the promise that generated the error alert(e原创 2021-08-30 14:21:40 · 3597 阅读 · 0 评论 -
Fetch 请求的超时设置与终止请求
要求fetch 请求,3秒超时输出超时,不管成功与否,成功输出成功,失败输出失败。考察实现:Fetch 请求的超时设置与终止请求解决在使用XMLHttpRequest可以设置请求超时时间,可是转用Fetch后,超时时间设置不见了,在网络不可靠的情况下,超时设置往往很有用ES6以后Promise 出现解决地狱回调等不优雅的代码风格。个人理解这个更像是一个生产者和消费者的关系,查看 Promise文档,有以下两个方法Promise.race([promise1,promise2]) 传入多个Prom原创 2021-08-30 13:58:38 · 1434 阅读 · 0 评论 -
http Cookie专栏及单点的登录SSO与OAuth 比较
Cookie是什么HTTP 是一个无状态的协议,每次 http 请求都是独立、无关的,默认不需要保留状态信息。由此产生cookie来如何标识和认证一个用户。Cookie 本质上就是浏览器里面存储的一个很小的文本文件,内部以键值对的方式来存储(在chrome开发者面板的Application这一栏可以看到)。向同一个域名下发送请求,都会携带相同的 Cookie,服务器拿到 Cookie 进行解析,便能拿到客户端的状态。而服务端可以通过响应头中的Set-Cookie字段来对客户端写入Cookie。应用场原创 2020-12-13 15:08:10 · 239 阅读 · 0 评论 -
js拖拽功能的实现
如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒。1.onmousedown:鼠标按下事件2.onmousemove:鼠标移动事件3.onmouseup:鼠标抬起事件拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的top和left的改变。当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素上按下的。拖拽状态 = 0鼠标在元素上按下的时候原创 2021-08-25 18:12:09 · 2079 阅读 · 0 评论 -
DOMContentLoaded事件和Load事件的区别? async 和 defer区别?
DOMContentLoaded事件和Load事件的区别DOMContentLoaded 当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完全加载。load:当整个页面及所有依赖资源如样式表和图片都已完成加载时,将触发load事件。渲染树的生成是基于DOM和CSSOM的。但是触发DOMContentLoaded的时间依然是在HTML解析为DOM后,无论此时CSS解析为CSSOM的过程是否完成。解析HTML结构。加载外原创 2021-08-18 15:19:28 · 276 阅读 · 0 评论 -
V8 如何执行一段JS代码?
计算机执行高级语言的两种方式V8 如何执行一段JS代码?1.生成 AST生成 AST 分为两步——词法分析和语法分析。词法分析词法分析即分词,它的工作就是将一行行的代码分解成一个个token。//比如下面一行代码:let name = 'sanyuan'即解析成了四个token,这就是词法分析的作用。语法分析接下来语法分析阶段,将生成的这些 token 数据,根据一定的语法规则转化为AST。举个例子:let name = 'sanyuan'console.log(na原创 2021-04-04 16:47:03 · 220 阅读 · 0 评论 -
类型转换--强类型转换、自动类型转换
强制转换Number()使用Number函数,可以将任意类型的值转化成数值。下面分成两种情况讨论,一种是参数是原始类型的值,另一种是参数是对象。字符串转数字:1.如果可以被解析为数值,则转换为相应的数值2.如果不可以被解析为数值,返回 NaN //Number(‘324abc’) // NaN3.空字符串转为0布尔转数字:布尔值:true 转成 1,false 转成 0undefined:转成 NaNnull:转成0Number函数将字符串转为数值,要比parseInt函数严格很原创 2021-03-24 11:51:06 · 207 阅读 · 0 评论 -
闭包含义、危害、作用及其实现私有属性
什么是闭包?红宝书(p178)上对于闭包的定义:闭包是指有权访问另外一个函数作用域中的变量的函数,闭包产生的原因?首先要明白作用域链的概念,其实很简单,在ES5中只存在两种作用域————全局作用域和函数作用域,当访问一个变量时,解释器会首先在当前作用域查找标示符,如果没有找到,就去父作用域找,直到找到该变量的标示符或者不在父作用域中,这就是作用域链,值得注意的是,每一个子函数都会拷贝上级的作用域,形成一个作用域的链条var a = 1;function f1() { var a = 2原创 2021-03-23 21:30:59 · 220 阅读 · 0 评论 -
webpack原理相关流程
1.webpack 原理(1)初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数;(2)开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译;(3)确定入口:根据配置中的 entry 找出所有的入口文件;(4)编译模块:从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理;(5)完成模块编译:在经过第4步使用 Loader原创 2021-03-23 16:50:46 · 174 阅读 · 0 评论 -
原型及原型链含义--所有的函数都是 Function 的实例
每个构造函数都有一个原型对象,该原型对象有一个属性(constructor)指回构造函数,而实例有一个内部指针__proto__([[Prototype]]) 指向原型(即:蓝色 1)。实例与构造函数的原型之间有直接关系,实例与构造函数之间没有。所有的函数(js中函数也是对象)都是 Function 的实例.所以函数都有一个属性__proto__指向Function的原型对象(即:红色3)Object 是 Function 的实例对象, Object.proto === Function.proto..原创 2021-03-23 09:56:04 · 699 阅读 · 0 评论 -
js练习题
1.包括变量定义提升、this指针指向、运算符优先级、原型、继承、全局变量污染、对象属性及原型属性优先级等等。function Foo() { getName = function () { alert (1); }; return this;}Foo.getName = function () { alert (2);};Foo.prototype.getName = function () { alert (3);};var getName = function () { alert (4原创 2021-03-17 11:26:01 · 172 阅读 · 0 评论 -
优雅解决按钮”重复点击“问题:支付按钮防刷等
应用场景:对于支付按钮或者收藏等,需进行一定处理,防止短时间内重复点击,多次请求接口,造成不必要资源浪费。解决方案:css样式:对于button按钮,可以使用setAttribute(‘disabled’, xxx)和removeAttribute(‘disabled’)来禁止用和恢复。防抖:立即执行一次,例如按钮防抖,防止用户多次点击(下一次调用必须与前一次调用的时间间隔大于wait才会触发)。 function debounce(func, wait, immediate原创 2021-03-16 22:37:09 · 675 阅读 · 0 评论 -
为什么要用 setTimeout 模拟 setInterval ?
setInterval在JS 事件循环之宏任务和微任务中讲到过,setInterval 是一个宏任务。用多了你就会发现它并不是准确无误。推入任务队列后的时间不准确:在 setInterval 被推入任务队列时,如果在它前面有很多任务或者某个任务等待时间较长比如网络请求等,那么这个定时器的执行时间和我们预定它执行的时间可能并不一致。函数操作耗时过长导致的不准确:考虑极端情况,假如定时器里面的代码需要进行大量的计算(耗费时间较长),或者是 DOM 操作。这样一来,花的时间就比较长,有可能前一次代码还没有原创 2021-03-16 21:37:39 · 745 阅读 · 0 评论 -
浏览器内核 之 js事件循环机制
浏览器都包含哪些进程?知道了浏览器是多进程后,再来看看它到底包含哪些进程:(为了简化理解,仅列举主要进程)1.Browser进程:浏览器的主进程(负责协调、主控),只有一个。作用有负责浏览器界面显示,与用户交互。如前进,后退等负责各个页面的管理,创建和销毁其他进程将Renderer进程得到的内存中的Bitmap,绘制到用户界面上网络资源的管理,下载等2.第三方插件进程:每种类型的插件对应一个进程,仅当使用该插件时才创建3.GPU进程:最多一个,用于3D绘制等4.浏览器渲染进程(浏览器内原创 2021-03-12 21:12:31 · 193 阅读 · 0 评论 -
图片懒加载
首先:搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop1.clientHeight、scrollTop 和 offsetTop <img src="loading.gif" data-src="https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706_1280.jpg" alt=""> <img src="loading.gif" data-src原创 2021-03-03 17:41:26 · 183 阅读 · 1 评论 -
js基础 0.1 + 0.2不等于0.3
1.判断数据类型typeof、instanceof、Object.prototype.toString.call()、constructor参考:判断数据类型2.类数组与数组的区别与转换类数组对象:arguments对象、NodeList对象、以及getElementsByClassName(“a”)获取的对象;arguments是一个类数组对象,包含着传入函数中的所有实参集合,虽然arguments主要作用是保存函数实参,但这个arguments有一个callee属性,它是一个指针,指向拥有这个原创 2021-02-26 23:17:56 · 379 阅读 · 0 评论 -
JavaScript中数据类型的判断——typeof,instanceof,constructor,Object.prototype.toString.call()
(1)typeoftypeof 对于原始类型来说,除了 null 都可以显示正确的类型null:解释: 虽然 typeof null 会输出 object,但是这只是 JS 存在的一个悠久 Bug。在 JS 的最初版本中使用的是 32 位系统,为了性能考虑使用低位存储变量的类型信息,000 开头代表是对象然而 null 表示为全零,所以将它错误的判断为 object 。typeof 1 // 'number'typeof '1' // 'string'typeof undefined // '原创 2021-02-26 21:27:08 · 248 阅读 · 0 评论 -
深入浅出执行上下文与作用域
1.什么是执行上下文简而言之,执行上下文是评估和执行 JavaScript 代码的环境的抽象概念。每当 Javascript 代码在运行的时候,它都是在执行上下文中运行。执行上下文的类型JavaScript 中有三种执行上下文类型。全局执行上下文 :这是默认或者说基础的上下文,任何不在函数内部的代码都在全局上下文中。它会执行两件事:创建一个全局的 window 对象(浏览器的情况下),并且设置 this 的值等于这个全局对象。一个程序中只会有一个全局执行上下文。函数执行上下文: 每当一原创 2021-02-10 22:30:36 · 445 阅读 · 0 评论 -
防抖与节流实现及多场景运用变形
防抖(debounce)防抖函数:一个需要频繁触发的函数,在规定时间内,只让最后一次生效,前面的不生效。防抖(debounce):不管事件触发频率多高,一定在事件触发n秒后才执行,如果你在一个事件触发的 n 秒内又触发了这个事件,就以新的事件的时间为准,n秒后才执行,总之,触发完事件 n 秒内不再触发事件,n秒后再执行。1.运用场景一场景:延迟执行函数对于连续的事件响应我们只需要执行一次回调:每次 resize/scroll 触发统计事件百度查询,账号文本输入的验证(连续输入文字后发送原创 2021-02-05 11:47:54 · 219 阅读 · 0 评论 -
js手写题
new创建一个空对象让构造函数中的this指向新对象设置新对象的proto属性指向构造函数的原型对象判断构造函数的返回值类型,如果是值类型,则返回新对象。如果是引用类型,就返回这个引用类型的对象。function newObject(){ //创建一个空对象 let obj = {}; // 排除第一个构造函数参数 Constructor = [].shift.call(arguments); //设置新对象的proto属性指向构造函数的原型对象 obj._proto_ = Con原创 2021-01-16 22:51:33 · 788 阅读 · 0 评论 -
Doctype作用?严格模式与混杂模式如何区分?它们有何差异?
作用:" <!DOCTYPE>"声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行,这并不是一个 HTML 标签。严格模式与混杂模式如何区分?严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码。混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。如何区分:浏览器解析时到底使用严格模式还是混杂模式,与网页中的 DTD 直接相关原创 2021-01-10 15:22:16 · 210 阅读 · 0 评论 -
EventLoop 事件循环机制
前言JavaScript是单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。Event Loop主线程从"任务队列"中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)。任务队列一种是同步任务(synchronous),另一种是异步任务(asynchronous)。同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个原创 2020-12-10 18:50:31 · 283 阅读 · 3 评论 -
js中的事件模型?如何阻止事件冒泡?如何实现事件委托?
事件委托它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件例子:<ul id="ul1"> <li>111</li> <li>222</li> <li>333</li> <li>444</li></ul>//事件委托的方式window.onload =原创 2020-12-10 17:54:33 · 352 阅读 · 0 评论 -
ES6认识class实现继承方式
简介class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; }}let p = new point(1,2)constructor 方法constructor()方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。class Point {}// 等同于原创 2020-12-10 12:42:51 · 620 阅读 · 0 评论 -
js如何实现继承?六种继承模式
知识重温:每个构造函数都有一个原型对象,原型有一个属性(constructor)指回构造函数,而实例有一个内部指针_proto_([[Prototype]]) 指向原型。实例与构造函数原型之间有直接关系,实例与构造函数之间没有。原型链的基本思想:上面如果原型是另一个类型的实例呢?意味着这个原型本身有一个内部指针指向另一个原型,相应的另一个原型也有一个指针(constructor)指向另一个构造函数。这样就在实例和原型之间构造了一条原型链.原型链还有一环,所有引用类型都继承Object,任何函数的默认原原创 2020-11-30 23:22:21 · 218 阅读 · 0 评论 -
彻底理解this
1.什么是 thisJS中的this代表的是当前行为执行的主体this实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用。2.this的五大类(1) 函数执行时首先看函数名前面是否有".",有的话,"."前面是谁,this就是谁;没有的话this就是windowfunction fn(){ console.log(this);}var obj={fn:fn};fn();//this->windowobj.fn();//this->objfuncti原创 2020-11-18 23:38:24 · 136 阅读 · 0 评论 -
理解Promise + 手写实现promise
Promise 对象是一个构造函数,用来生成Promise实例,可以用来管理异步编程的,它本身不是异步的 。可解决方案回调地狱问题。无法取消Promise,一旦新建它就会立即执行,无法中途取消。如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。当处于pending状态时,无法得知目前进展到哪一个阶段Promise 内部的错误不会影响到 Promise 外部的代码,通俗的说法就是“Promise 会吃掉错误”。Promise 对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为原创 2020-11-18 21:30:00 · 385 阅读 · 0 评论