03 2023 档案
摘要：直接浏览coderwhy的代码文件和PPT 1.介绍Typescript 2.理解泛型、接口等面向对象的相关概念，TypeScript对面向对象理念的实现 3.理解使用TypeScript的好处，掌握TypeScript基础语法 4.TypeScript是如何编译的？ 5.TypeScript的规则
阅读全文
摘要：熟练使用前端常用的设计模式编写代码如单例模式、装饰器模式、代理模式等 发布订阅模式和观察者模式的异同以及实际应用 一、定性区别 首先，观察者是经典软件设计模式中的一种，但发布订阅只是软件架构中的一种消息范式。所以不要再被“观察者模式和发布订阅模式xxx”这样的问题误导。 二、组成区别 三、各自实现
阅读全文
摘要：理解WebSocket协议的底层原理 websocket本质上是一种计算机网络应用层的协议，用来弥补http协议在持久通信能力上的不足。虽然http有了keep-alive，但是本质上http请求还是请求完连接就断开了，并且服务器是不能主动给客户端发送数据的。 Websocket是应用层第七层上的一
阅读全文
摘要：DNS是域名系统，DNS协议是域名解析协议 DNS的作用 分为根域名服务器、顶级域名服务器（管理该服务器下的所有二级域名）、权限域名服务器、本地域名服务器 （迭代或者递归） DNS的作用就是将域名解析为IP地址，这个过程叫做DNS域名解析。客户端向服务器发送域名查询请求，然后DNS服务器告知客户端w
阅读全文
摘要：三次握手和四次挥手详细原理，为什么要使用这种机制？ 当进行第一次握手，网络不好可能会堵塞，所以连接的请求并没有到达服务器端；但是tcp连接有超时重传的机制，所以再一次发送请求，这时候服务器端接收到了你的请求，他也会返回一个请求给你，这是第二次握手；但是这时候网络环境突然又好了起来，那个堵塞的请求到达
阅读全文
摘要：理解什么是协议？ 互联网的实现，分为好几层。每一层都是为了完成一种功能。为了实现这些功能，就需要大家都遵守共同的规则。大家都遵守的规则，就叫做"协议" 了解TCP/IP网络协议族的构成？ 应用层、传输层、网络层、数据链路层、物理层 每层协议在应用程序中发挥的作用
阅读全文
摘要：理解代码到底是什么，计算机如何将代码转换为可以运行的目标程序 代码就是程序员用开发工具所支持的语言写出来的源文件，是一组由字符、符号或信号码元以离散形式表示信息的明确的规则体系。代码设计的原则包括唯一确定性、标准化和通用性、可扩充性与稳定性、便于识别与记忆、力求短小与格式统一以及容易修改等。 计算机
阅读全文
摘要：实现常用布局 两栏布局 三栏、圣杯、双飞翼 圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染） 圣杯布局 relative margin-left: -100%; <style> .container
阅读全文
摘要：使用纯CSS实现曲线运动（贝塞尔曲线）
阅读全文
摘要：使用CSS绘制几何图形（圆形、三角形、扇形、菱形等） //圆形 <div class="circle"></div> <style> .circle { border-radius: 50%; width: 80px; height: 80px; background: #666; } //扇形 <
阅读全文
摘要：1.column多行布局实现瀑布流 column 实现瀑布流主要依赖两个属性。 column-count 属性，是控制屏幕分为多少列。 column-gap 属性，是控制列与列之间的距离。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="
阅读全文
摘要：-moz代表firefox浏览器私有属性 -ms代表IE浏览器私有属性 -webkit代表chrome、safari私有属性 -o代表opera私有属性 -webkit-transform:rotate(-3deg); /*为Chrome/Safari*/ -moz-transform:rotate
阅读全文
摘要：CSS模块化方案、如何配置按需加载、如何防止CSS阻塞渲染
阅读全文
摘要：PostCSS、Sass、Less的异同，以及使用配置，至少掌握一种 引入变量 Less中的变量，在声明中使用时，如果出现多次赋值的情况，其会取最后一次赋值的值 Sass/Stylus中的变量，如果出现多次赋值的情况，其会取声明前面最近的一次赋值的值 mixin 在Less中，可以直接引入一个CSS
阅读全文
摘要：文本阴影 文本裁剪 文字描边 文本填充 text-fill-color 渐变效果 linear-gradient(方位, 起始色, 末尾色) 后面的暂时随用随查
阅读全文
摘要：什么是BFC BFC 全称是 Block Formatting Context，即块格式化上下文。它是 CSS2.1 规范定义的，关于 CSS 渲染定位的一个概念。它是一个独立的渲染区域，只有 Block-level box 参与， 它规定了内部的 Block-level Box 如何布局，并且与这
阅读全文
摘要：水平垂直居中的方案可以实现6种以上并对比它们的优缺点 父、子元素宽高未知时： ①flex布局 ②绝对定位+transform (定位的上、左为 50%，translate 上、左负 50%) ③绝对定位+margin:auto ④直接使用table ⑤Grid网格布局 .parent { displ
阅读全文
摘要：HTML文档流的排版规则 CSS几种定位的规则、定位参照物、对文档流的影响 如何选择最好的定位方式，雪碧图实现原理
阅读全文
摘要：CSS盒模型，在不同浏览器的差异 盒子模型有两种，分别是IE盒子模型和标准w3c盒子模型。 标准w3c盒子模型的范围包括 margin、border、padding、content，并且content部分不包括其它部分。 IE盒子模型的范围也包括 margin、border、padding、cont
阅读全文
摘要：优势？ 离线浏览 - 用户可在应用离线时使用它们。 速度 - 已缓存资源加载得更快。 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。 原理： HTML5的离线存储是基于一个manifest文件(缓存清单文件，后缀为.appcache)的缓存机制(不是存储技术)，通过这个文件上的清单
阅读全文
摘要：head的使用目的和配置方法 使用目的: HTML 头部包含 HTML <head> 元素的内容，与 <body> 元素内容不同，页面在浏览器加载后它的内容不会在浏览器中显示，它的作用是保存页面的一些元数据 配置方法就是 <head> <meta charset="utf-8" /> <title>
阅读全文
摘要：常用页面标签的默认样式、自带属性 默认样式 li {display: list-item }`/*默认以列表显示*/` head {display: none }/*默认不显示*/ table {display: table }/*默认为表格显示*/ tr {display: table-row }
阅读全文
摘要：①用正确的标签做正确的事情 ②html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有CSS情况下也以一种文档格式显示，并且是容易阅读的。 ③搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO ④使阅读源码的人对网站更容易将网站分块，便于阅读维护
阅读全文
摘要：模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。 模板引擎的原理 模板引擎的实现方式有很多，最简单的是“置换型”模板引擎，这类模板引擎只是将指定模板内容（字符串）中的特定标记（子字
阅读全文
摘要：JSON.stringify JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。 JSON.stringify(v
阅读全文
摘要：可以说出两种实现双向绑定的方案、可以手动实现 1.手动绑定 Object.defineProperty <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt
阅读全文
摘要：EventEmitter EventEmitter （事件派发器）是 Node.js 的核心模块 events 中的类，用于对 Node.js 中的事件进行统一管理，用 events 特定的 API 对事件进行添加、触发和移除等等，EventEmitter 的核心就是事件触发与事件监听器功能的封装。
阅读全文
摘要：经常有人说async函数是generator函数的语法糖，那么到底是怎么样一个糖呢？让我们来一层层的剥开它的糖衣。 有的同学想说，既然用了generator函数何必还要实现async呢？ 这篇文章的目的就是带大家理解清楚async和generator之间到底是如何相互协作，管理异步的。 const
阅读全文
摘要：Function.prototype.mycall = function(obj){ var args = Array.prototype.slice.apply(arguments,[1]); obj.fn = this; obj.fn(...args);//es6的解构语法，也可以使用obj.f
阅读全文
摘要：实现一个sleep函数 ①利用堵塞循环实现，因为js是单线程的，所以这个其实就是根本上的sleep function sleep(delay) { var start = (new Date()).getTime(); while ((new Date()).getTime() - start <
阅读全文
摘要：手写防抖和节流工具函数、并理解其内部原理和应用场景 防抖 // 防抖: 一个函数 在设置的时间后执行 如果在设置的时间间隔期间再次触发 那么本次就无效 重新计算 // 触发高频时间后n秒内只会执行一次 如果n秒高频时间内再次触发 则会重新计算时间 // 原理 debounce 触发后 首先清除掉ti
阅读全文
摘要：手写函数柯里化工具函数、并理解其应用场景和优势 什么是柯里化(Curring)？？？ 什么意思？简单来说，柯里化是一项技术，它用来改造多参数的函数。 简单讲就是把一个多参数的函数f，变换成接受部分参数的函数g，并且这个函数g会返回一个函数h，函数h用来接受其他参数。函数h可以继续柯里化。就是一个套娃
阅读全文
摘要：前情提要 深拷贝：拷贝的是对象或者数组内部数据的实体，重新开辟了内存空间存储数据；浅拷贝：拷贝的是引用类型的指针，副本和原数组或对象指向同一个内存； ①递归方式 比较全面的深拷贝，缺点是较为繁琐 function deepClone(obj) { var target = {}; for(var k
阅读全文
摘要：前情提要： map函数接收一个函数作为参数，作为参数的函数接收三个参数值，分别是遍历数组的每一项元素，元素的索引和数组本身。这三个参数刚好和reduce函数接收的第一个函数参数的第2、3、4个参数是对应的。这是实现的核心 实现思路是，将每次遍历的元素，作为传入的函数的参数，并将函数执行的结果放入新的
阅读全文
摘要：①遍历 forEach ②sort排序 取索引 ③使用Math.max + apply var max1 = Math.max.call(null,3, 0, -7, 39); ④使用Math.max + 扩展运算符 let max=Math.max(...arr);
阅读全文
摘要：2019年的ES10中新增了扁平化API flat ①flat实现指定深度的数组扁平化 function flatten6(arr,depth = 1) { if (!Array.isArray(arr)) return [] if(typeof depth !== 'number') depth
阅读全文
摘要：首先了解一下什么是数组扁平化？ 将一个嵌套多层的数组Array（嵌套可以是任何层数）转换为只有一层的数组。 数组去重 先总结数组的方法：pop、push、shift、unshift、sort、splice、slice、revere、concat join、indexOf、map、forEach、in
阅读全文
摘要：一般来说有两种处理方式 ①抛出异常 function openFile(fileName) { if (!exists(fileName)) { throw new Error('找不到文件 ' + fileName) } // ... } ②捕获异常 try { openFile('../test
阅读全文
摘要：JavaScript提供的正则表达式API、可以使用正则表达式解决常见问题（邮箱校验、URL解析、去重等） js正则常用API 1.五个常用方法 ①test reg.test(str); // 返回是否包含正则 true/false var str = "abcdefghijkl3mnop2qts"
阅读全文
摘要：setInterval需要注意的点，使用settimeout实现setInterval setTimeout传入的是两个参数，第一个参数是cb代表的是回调函数callback，第二个代表的是时间，以ms计算 setInterval传入的也是两个参数，第一个参数是cb代表的是回调函数callback，
阅读全文
摘要：熟练掌握JavaScript提供的全局对象（例如Date、Math）全局函数（例如decodeURI、isNaN）全局属性（例如Infinity、undefined）
阅读全文
摘要：ECMAScript（核心） DOM（文档对象模型） BOM（浏览器对象模型） ES5增加特性 1.strict模式 use strict 2.Array增加方法 every、forEach、filter、indexOf、lastIndexOf、isArray、map、reduce reduceRi
阅读全文
摘要：一般有两种做法 1.时间分片 setTimeout是宏任务，先执行完所有的微任务，才会触发渲染线程对页面进行渲染， 而setTimeout的触发时间是渲染完成，在下一次eventloop中执行的。 根据以上两次log，js运算并不是性能的瓶颈，瓶颈主要在渲染阶段。 怎么办呢？ 使用定时器，在这里，我
阅读全文
摘要：任务队列个数不同 浏览器事件环有2个事件队列 宏任务队列 微任务队列 NodeJS事件环有6个事件队列 定时器(timers)：本阶段执行已经被 setTimeout() 和 setInterval() 的回调函数 待定回调(pending callbacks)：执行延迟到下一个循环迭代的 I/O
阅读全文
摘要：实现promise的核心思想是借助reduce 第一步 const res = [] //定义一个接受不同promise执行结果的数组 第二步 返回一个promise对象 return new Promise((resolve,reject) => { }) 第三步 通过reduce讲不同的prom
阅读全文
摘要：1.什么是promise Promise是异步编程的一种解决方案：从语法上来讲，promise是一个对象，从他可以获取异步操作的消息；从本意上来讲。他是一个承诺，承诺他过一段时间会给你一个结果。 他有三种状态：pending（等待态）、fulfiled（成功态）、rejected（失败态）；状态一旦
阅读全文
摘要：js宏任务有：<script>整体代码、setTimeout、setInterval、setImmediate、Ajax、DOM事件 js微任务有：process.nextTick、MutationObserver、Promise.then catch finally 执行顺序 执行顺序：先执行同步
阅读全文
摘要：单线程和异步 js的任务分为同步和异步两种，它们的处理方式也不同， 同步任务是直接在主线程上排队执行，异步任务则会被放在任务队列中， 若有多个任务（异步任务）则要在任务队列中排队等待，任务队列类似一个缓冲区，任务下一步会被移到调用栈（callstack），然后主线程执行调用栈的任务。 JavaScr
阅读全文
摘要：涉及到了一种数据类型：Completion，是js七大标准类型之一 为何try里面放return，finally还会执行 这种行为就是因为Completion Record，在js中，每条语句的执行完成状态都是由Completion Record类型表示的。他有三个字段： [[type]]：表示完成
阅读全文
摘要：1.什么是模块 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信 2.为什么使用模块及模块化 以module.exports(暴露)和require(引入 )来说(1):达到代码重用性，避免
阅读全文
摘要：function getMoney(){ var money=[100,200,300] for( let i=0; i<money.length; i++){ compute.exec().then(()=>{ console.log(money[i]) //alert(i) }) } }//co
阅读全文
摘要：内存泄漏 申请的内存执行完之后没有及时的清理和销毁，占用空闲内存，既不能使用也不能回收。 几种会导致内存泄露的情况： 意外的全局变量 被以往的计时器或回调函数 脱离DOM的引用（分离的DOM节点） 解决办法 <div id="root"> <div class="child">我是子元素</div>
阅读全文
摘要：1.闭包的实现原理和作用 闭包：指有权访问另一个函数作用域中的变量的函数，一般都是一个函数包含另一个函数。 2.闭包的作用： 访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理。 因为函数内部声明 的变量是局部的，只能在函数内部访问到，但是函数外部的变量是对函数内部可见的，这就是作用
阅读全文
摘要：1.this原理 this是JavaScript的一个关键字，函数调用时才会出现；因为函数是在一定的环境中运行的，调用函数时肯定需要知道是[谁调用的]？就用到了this进行指向；那么this到底指向的是什么？this 既不指向函数自身，也不指函数的词法作用域，而是调用函数时的对象 2.使用场景 1.
阅读全文
摘要：1.执行上下文 执行上下文就是当前 JavaScript 代码被解析和执行时所在环境的抽象概念， JavaScript 中运行任何的代码都是在执行上下文中运行 1.执行上下文的类型 全局执行上下文：她做了两件事：①创建了一个全局对象，在浏览器中就是window对象②将this指针指向这个全局对象。一
阅读全文
摘要：什么是作用域 Javascript中的作用域说的是变量的可访问性和可见性。也就是说整个程序中哪些部分可以访问这个变量，或者说这个变量都在哪些地方可见。 作用域的类型 全局作用域 函数作用域 块级作用域 1.全局作用域 任何不在函数中或是大括号中声明的变量，都是在全局作用域下，全局作用域下声明的变量可
阅读全文
摘要：作用域？什么是作用域？ 作用域就是指程序源代码中定义变量的区域 作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。js采用词法作用域，也就是静态作用域。 动态作用域？ 因为js采用的静态作用域，函数的作用域在函数定义的时候就决定了。 而动态作用域，是在函数调用的时候才决定的。
阅读全文
摘要：javascript使用的是原型式继承，我们可以通过原型的特性实现类的继承，es6为我们提供了像面向对象继承一样的语法糖。 1.类的实现 class底层仍然是构造函数 调用_classCallCheck方法判断当前函数调用前是否有new关键字 将class内部的变量和函数赋给this 执行构造器内部
阅读全文
摘要：1.new关键字的执行过程 1、创建一个空对象 2、改变this指向 3、向其中添加属性 4、返回这个对象 2.手动模拟new的实现 new关键字的执行过程 如果一个类返回值是一个引用类型那么就返回这个引用类型值 function mockNew(fn){ let obj = {} let newV
阅读全文
摘要：7.实现继承的几种方式以及他们的优缺点 ①类式继承(构造函数) var father = function() { this.age = 52; this.say = function() { alert('hello i am '+ this.name ' and i am '+this.age
阅读全文
浙公网安备 33010602011771号