- 博客(38)
- 收藏
- 关注
RSS订阅原创 react+typescript课后作业
通过该项目，请简要说明 typescript 比 javascript 的优势在哪？静态输入静态类型化是一种功能，可以在开发人员编写脚本时检测错误。查找并修复错误是当今开发团队的迫切需求。有了这项功能，就会允许开发人员编写更健壮的代码并对其进行维护，以便使得代码质量更好、更清晰。大型的开发项目有时为了改进开发项目，需要对代码库进行小的增量更改。这些小小的变化可能会产生严重的、意想不到的后果，因此有必要撤销这些变化。使用TypeScript工具来进行重构更变的容易、快捷。更好的协作当发
2021-04-20 14:01:49
107
原创 腾讯面试题整理（其一）
设计一个函数，输入数字，输出转换成千分位显示，如 1234567890=>1,234,567,890function handlerNums(num) { num = '' + num const arr = num.split('').reverse() let result = [] for (let i = 0, len = arr.length; i < len; i++) { result.unshift(arr[i]) if (i > 0 &&
2021-01-27 11:18:43
1346
8
原创 学习二十七、Virtual DOM 以及 Diff算法
JSX是什么它是 javascript 语法的扩展， React 使用它来描述用户界面长成什么样子。虽然它看起来非常像HTML，但它确实是 javascript。在React 代码执行之前，Babel 会将JSX 编译 React API。Virtual DOM在 React 中，每个 DOM 对象都有一个对应的 Virtual DOM 对象，它是 DOM 对象的 javascript 对象表现形式其实就是使用 javascript 对象来描述 DOM 对象信息，比如 DOM 对象的类型是什么，它的身
2021-01-26 17:43:27
130
原创 学习二十六、双缓存技术
在 React 中，DOM 的更新采用可双缓存技术，双缓存技术致力于快速的 DOM 更新。什么是双缓存？举个例子，使用 canvas 绘制动画时，在绘制每一帧前都会清除上一帧的画面，清除上一帧需要花费时间，如果当前帧画面计算量又比较大，又需要花费比较长的时间，这就导致上一帧清除到下一帧显示中间会有较长的间隙，就会出现白屏。为了解决这个问题，我们可以在内存中绘制当前帧动画，绘制完毕后直接用当前帧替换上一帧画面，这样的话在帧画面替换的过程中就会节约非常多的时间，就不会出现白屏问题。这种在内存中构建并直接
2021-01-26 17:37:05
361
原创 学习二十五、React 架构
react 16版本的架构可以分为三层：调度层、协调层、渲染层Scheduler 调度层： 调度任务的优先级、高优任务优先进入协调层 Reconciler 协调层： 构建 fiber 数据结构，比对 fiber 对象找出差异，记录 fiber 对象要进行的 DOM 操作 renderer 渲染层： 负责将发生变化的部分渲染到页面上Scheduler 调度层在 React 15 的版本中，采用了循环加递归的方式进行了 virtualDOM 的比对，由于递归使用 javascrip 自身的执行栈，
2021-01-26 17:36:23
324
1
原创 阿里面试题整理（其二）
http2 和 1 的区别浏览器与服务器通信过程TCP 连接： 浏览器与服务器三次握手，建立 TCP 连接客户端请求： 建立 TCP 连接后，客户端就会向服务器发送一个 HTTP 请求信息（比如请求 HTML 资源，我们暂且就把这个称为“ HTML 请求”）服务器响应： 服务器接收到请求后进行处理并发回一个 HTTP 响应信息HTTP/1每完成一次请求和响应，TCP 连接就会断开，因为 TCP 连接会有 RTT（Round Trip Time, 往返时间），每请求一个资源就要有一次
2020-12-31 14:16:31
124
原创 字节面试题整理（其三）
cookie，same-site 配置，cookie 跨域解决方案，为什么 chrome 会有 samesite 限制？Cookie 是一段不超过 4KB 的小型文本数据，由一个名称（Name）、一个值（Value）和其它几个用于控制 Cookie 有效期、安全性、使用范围的可选属性组成。Chrome 51 开始，浏览器的 Cookie 新增加了一个 SameSite 属性，用来防止 CSRF 攻击和用户追踪。Cookie 跨域：domain-域：通过设置这个属性可以使多个 web
2020-12-30 11:31:02
196
1
原创 阿里面试题整理（其一）
输入 url 到渲染的过程1.在浏览器中输入一个 URL 2.通过 DNS 将域名解析成 IP 地址。域名只是与 IP 地址的一个映射。域名解析的过程实际是将域名还原为 IP 地址的过程(如果输入的是 IP 地址，此步骤省略) 3.根据解析到的 IP 地址加端口 ，浏览器发起 http 请求 4.浏览器建立一条与服务器的 tcp 连接（建立过程：三次握手）第一次握手： 建立连接时，客户端发送 syn 包（syn=j）到服务器，并进入 SYN_SENT 状态，等待服务器确认；第二次握手： 服务器收到
2020-12-29 13:51:39
126
原创 字节面试题整理（其二）
0.1 + 0.2JavaScript 并未定义不同类型的数字数据类型，而是始终遵循国际 IEEE 754 标准，将数字存储为双精度浮点数。这种格式以 64 位存储数字，其中数字（分数）存储在位 0 到 51 中，指数存储在位 52 到 62 中，符号存储在位 63 中。0.1 和 0.2 转换成二进制后会无限循环但是由于 IEEE 754 尾数位数限制，需要将后面多余的位截掉所以计算之后的结果就会出现相应的误差说明下列代码的打印情况for (var a = 0; a < 200; a+
2020-12-29 13:51:07
185
原创 字节面试题整理（其一）
浏览器重绘的时机function demo() { const now = Date.now(); document.body.style.backgroundColor = 'red'; while(Date.now() - now <= 2000) { continue; } document.body.style.backgroundColor = 'blue';}由于当前宏队列的任务未完成时，背景变红的操作并不会被重绘，所以这边背景只会直接变蓝。异步处理相加事件fu
2020-12-18 13:10:33
505
2
原创 学习二十四、Vite 简介
ViteVite 是一个面向现代浏览器的一个更轻、更快的 Web 应用开发工具它基于 ECMAScript 标准原生模块系统 (ES Modules) 实现项目依赖Vite@vue/compiler-sfcES Module现代浏览器都支持 ES Module (IE 不支持)通过下面的方式加载模块支持模块的 script 默认延迟加载类似于 script 标签设置 defer在文档解析完成后，触发 DOMContentLoaded 事件前执行
2020-12-15 16:40:39
676
原创 学习二十三、Vue 3.0 学习笔记
Vue3.0源码组织方式的变化全部采取 TypeScript 的方式编写代码使用 Monorepo 管理项目结构功能模块全部拆分为单独的包来进行开发，可以单独开发，测试，发布Composition API90%的新 API 兼容 2.X性能提升大幅度提升，重写响应式，运用 proxy，服务端渲染的性能提高 2-3 倍Vite不需要打包直接运行项目的解决方案不同的构建版本cjsvue.cjs.jsvue.cjs.prod.js
2020-12-15 16:39:56
105
原创 学习二十二、组件化开发简述
#组件化开发##开源组件库-ElementUI-iView##CDD组件驱动开发-自上而下-从组件级别开始，到页面级别结束##CDD的好处-组件在最大程度上被重用-并行开发-可视化测试##组件的分类-第三方组件-基础组件-业务组件##禁用继承inheriAttrs:falsev-bind="attrs"...
2020-12-10 10:32:54
90
原创 学习二十一、静态站点
#Gridsome是什么-一个免费、开源、基于Vue.js技术栈的静态站点生成器-官方网站：https://gridsome.org/-GitHub：https://github.com/gridsome/gridsome##什么是静态站点生成器-静态站点生成器是使用一系列配置、模板以及数据，生成静态HTML文件及相关资源的工具-这个功能也叫预渲染-生成的网站不需要类似PHP这样的服务器-只需要放到支持静态资源的WebSe...
2020-12-10 10:29:00
135
原创 学习二十、Nuxt.js
#Nuxt.js-基于Vue.js生态的第三方开源服务端渲染应用框架-它可以帮助我们轻松的使用Vue.js技术栈构建同构应用-官网：https://zh.nuxtjs.org/-GitHub仓库：https://github.com/nuxt/nuxt.js##初始化一个Nuxt-npminuxt- package.json 中设置 "dev":"nuxt"-创建pages文件夹-创建index.vue##Nuxt....
2020-11-23 17:25:14
164
原创 学习十九、常见的渲染方式
一、什么是渲染-渲染：数据+模板拼接到一起二、传统的服务端渲染-早期的web页面渲染都是在服务端进行的-前后端代码完全耦合在一起，不利于开发和维护-前端没有足够的发挥空间-服务端压力大-用户体验一般三、客户端渲染-后端主要负责处理数据接口-前端负责将接口数据渲染到页面中-前端更为独立，不再受制于后端也存在于不足之处：-首屏渲染慢-不利于SEO（搜索引擎）四、基于客户端渲染的前端框架-Ang...
2020-11-23 17:22:16
1110
原创 学习十八、VueX 状态管理
VueX状态管理一、什么是VueX-Vuex是专门为Vue.js设计的状态管理库-Vuex采用集中式的方式存储需要共享的状态-Vuex的作用是进行状态管理，解决复杂组件通信，数据共享-Vuex集成到了devtools中，提供了time-travel时光旅行历史回滚功能 import Vue from' vue import Vuex from' vuex Vue.use (Vuex) export default new Vuex.S...
2020-11-23 17:18:17
132
原创 Array中的map()，filter()和reduce()
一、map()map用于遍历数组中每一项的值，进行一系列的操作。const prices = [19.99, 4.95, 25, 3.50];let new_prices = [];for(let i = 0; i < prices.length; i++) { new_prices.push(prices[i] * 1.06);}用map来书写会简单许多：const prices= [19.99, 4.95, 25, 3.50];let new_prices =
2020-11-09 11:21:43
199
原创 学习十七、Vue 模板编译
#Vue响应式原理1、数据驱动-数据响应式、双向绑定、数据驱动-数据响应式：数据模型仅仅是普通的JavaScript对象，而当我们修改数据时，视图会进行更新，避免了复杂的DOM操作，提高开发效率。-双向绑定数据改变，视图改变；视图改变，数据改变。我们可以使用v-model在表单元素上创建双向数据绑定-数据驱动是Vue最独特的特性之一开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图上的。2、Vu...
2020-11-04 15:22:31
90
原创 学习十六、Vue 中的虚拟 dom
1、什么是虚拟DOM-虚拟DOM(VirtualDOM)是使用JavaScript对象描述真实DOM-Vue.js中的虚拟DOM借鉴Snabbdom，并添加了Vue.js的特性。例如:指令和组件机制2、 为什么要使用虚拟DOM-避免直接操作DOM,提高开发效率-作为一个中间层可以跨平台-虚拟DOM不一定可以提高性能-首次渲染的时候会增加开销-复杂视图情况下提升渲染性能3、完整的渲染过程new ...
2020-11-04 15:19:22
135
原创 学习十五、Vue 的响应式原理
一、 数据驱动-数据响应式、双向绑定、数据驱动-数据响应式：数据模型仅仅是普通的JavaScript对象，而当我们修改数据时，视图会进行更新，避免了复杂的DOM操作，提高开发效率。-双向绑定数据改变，视图改变；视图改变，数据改变。我们可以使用v-model在表单元素上创建双向数据绑定-数据驱动是Vue最独特的特性之一开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图上的。二、 Vue2...
2020-10-26 13:50:00
104
原创 学习十四、手写最简单的vue-router的history模式
let _Vue = null;export default class VueRouter { static install(Vue) { // 1、判断当前插件是否已经被安装 if (VueRouter.install.installed) { return; } VueRouter.install.installed = true // 2、把 Vue 构造函数记录到全局变量 _Vue = Vue // 3、把创建 Vue 实.
2020-10-18 20:13:57
165
原创 学习十三、Vue基础回顾
##Vue生命周期1）newVue()2）初始化（事件，生命周期）=>h函数3）beforeCreate4）初始化（注入，校验）5）created6）是否指定el选项=>没设定的话调用vm.$mounted(el)函数=>设定的话是否指定template7）template=>指定了就讲template编译到render函数...
2020-10-18 20:13:10
91
原创 JS小功能函数整理（或会持续更新）
//等待加载图片functiongetImg(data){letimgObj=newImage();imgObj.src=data;returnnewPromise((resolve,reject)=>{imgObj.onload=function(){returnresolve(this);};imgObj.onerror=function(){...
2020-10-15 18:00:47
63
原创 学习十二、ES Modules的注意事项
#基本特性-自动采用严格模式，忽略'usestrict'-每个ESM模块都是单独的私有作用域-ESM是通过CORS去请求外部JS模块的-ESM的script标签会延迟执行脚本#导入和导出-导入导出使用的 {} 并不是对象的解构，只是一种语法-模块的导出过程中，外部导出的成员会受内部修改的影响-导出的成员是一个只读的成员，无法被修改#导入的用法-导入时必须使用完整的扩...
2020-10-09 21:07:29
209
原创 学习十一、模块化
#模块化开发概述————当下最重要的前端开发模式-提高开发效率-减少开发成本#模块化的演变过程-stage1文件划分方式将一个文件设定为一个模块，里面存放模块内部需要的变量和方法缺点：全局引用，污染全局作用域模块外部都可以调用和修改模块内的成员早期模块化完全依靠约定-stage2命名空间方式在第一个阶段基础之上，将每一个模块包裹成一个全局对象的方式缺点：模块成员仍然可以在外部调用...
2020-10-09 21:03:06
73
原创 学习十、前端工程化概述
一、为什么要做前端工程化技术是为了解决问题而存在的1、为了使用ES6+新特性，但是兼容有问题。2、想要使用Less，Sass，PostCSS增强CSS的编程性，但是运行环境不能支持。3、想要使用模块化的方式提高项目的可维护性，但是运行环境不能直接支持。4、部署上线前需要手动压缩代码及资源文件、部署过程需要手动上传代码到服务器。5、多人协作开发，无法硬性统一大家的代码风格，从仓库PULL回来的代码质量无法保证。6、部分功能开发...
2020-10-03 19:35:53
72
原创 学习九、JS性能代码优化概述
JS性能测试：使用基于Benchmark.js的http://jsperf.com/完成本质上就是采集大量的执行样本进行数学统计和分析使用方法:1)使用Github登录2)填写个人信息（可选）3)填写详细的测试用例信息（title、slug）4)准备填写代码（DOM操作时经常使用）5)填写必要的setup与teardown代码6)填写测试代码片段一、慎用全局变量为什么要慎用全局变...
2020-10-01 22:04:20
62
原创 学习八、JavaScript的内存管理及垃圾回收（GC算法）
一、内存管理1)内存：由可读写单元组成，表示一片可操作空间2)管理：人为的去操作一片空间的申请，使用和释放3)内存管理：开发者主动申请空间，使用空间，释放空间4)管理流程：申请————使用————释放二、垃圾回收与常见GC算法1、JavaScript中的垃圾回收 1)JavaScript中的内存管理是自动的 2)对象不再被引用时是垃圾 3)对象不能从根上访问到时是垃圾JavaScr...
2020-10-01 21:58:15
1647
转载 ES6 之 Reflect 的方法总结（转载）
原作者地址：https://www.cnblogs.com/houfee/p/11369609.html1. 概述 将 Object 对象的一些明显属于语言内部的方法（比如 Object.defineProperty ），放到 Reflect 对象上。 修改某些 Object 方法的返回结果，让其变得更合理。比如， Object.defineProperty(obj, name, desc) 在无法定义属性时，会抛出一个错误，而 Reflect.defineProperty(obj, n
2020-09-29 15:39:35
625
原创 学习七、ES2016新特性概要、ES2017新特性概要
一、ECMAScript2016版本概述1、Array.includes();可以查找数组中是否含有某个参数，包括NaN，之前的indexOf可以返回数组中某个参数的下标，但是无法确认是否含有NaN。const arr = ['foo', 1, NaN, false]// 找到返回元素下标console.log(arr.indexOf('foo'))// 找不到返回 -1console.log(arr.indexOf('bar'))// 无法找到数组中的 NaNconsole.lo
2020-09-27 23:21:53
713
1
原创 学习六、ES2015的新特性简要
新特性有四大类：1、解决原有语法上的一些问题或不足2、对原有语法进行增强3、全新的对象，全新的方法，全新的功能4、全新的数据类型和数据结构一、Let，Const和块级作用域在ES2015之前，只有全局作用域和函数作用域，现在可以声明Let和Const它们都属于块级作用域中的定义变量，并且不会声明提前。for (let i = 0; i < 3; i++) { let i = 'foo' console.log(i)}二、数组和对象的解构我们可以这样.
2020-09-27 22:50:34
231
原创 学习五、Promise
一、Promise的特征1、Promise对象的then方法会返回一个全新的Promise对象。2、后面的then方法就是在为上一个then返回的Promise对象注册回调。3、前面的then方法中回调函数的返回值会作为后面then方法回调的参数。4、如果回调中返回的是Promise，那么后面的then方法的回调就是为这个Promise注册的。二、Promise的静态方法1、Promise.resolve会将这个对象作为Promise执行2、Promise.rejec...
2020-09-25 20:34:10
239
原创 学习四、函子的概念
一、函子为什么要学习函子？到目前为止已经学习了函数式编程的一些基础，但是我们还没有演示在函数式编程中如何把副作用控制在可控范围之内、异常处理、异步操作等。什么是Functor？容器：包含值和值的变形关系，这个变形关系就是函数。函子：是一个特殊的容器，通过一个普通的对象来实现，该对象具有map方法，map方法可以运行一个函数对值进行处理。总结:1、函数式编程的运算不直接操作值，而是有函子完成。2、函子就是一个实现了map契约的对象。3、我们可以把函子想象成一..
2020-09-25 20:24:42
113
原创 学习三：函数组合
纯函数和柯里化很容易写出洋葱代码，函数组合就可以把细粒度的函数重新组合成一个新的函数。函数组合案例：function compose (fn1, fn2){ return function(value){ return fn1(fn2 ( value )); }}function reverse (array){ return array.reverse()}function first (array){ return array[0].
2020-09-20 21:12:51
87
原创 学习二、柯里化
当一个函数有多个函数，可以先传递一部分参数，这部分参数不会再发生变化。后然后再返回一个新的函数收集剩余的参数，返回结果——这就是柯里化adash中的柯里化方法curry：_.curry(func)参数：需要柯里化的函数，返回值柯里化后的参数。const_=require('lodash');functiongetSum(a,b,c){returna+b+c;}constcurried=_.curry(getSum)...
2020-09-19 20:40:17
71
原创 学习一、函数式编程
函数式编程，缩写FP，是一种编程风格，与面向对象、面向过程等编程范式并列。函数式编程中的函数不是function，而是Y与X的关系这一数学层面中的函数关系。————相同的输入始终都等于相同的输出。函数式编程用来描述（函数）之间的映射。例：//非函数式letnum1=1;letnum2=2;letsum=num1+num2;console.log(sum);//函数式functionadd(num1,nu...
2020-09-19 11:42:03
90
原创 2020-09-18我的学习博客开博了！
由于日新月异的前端技术，我深知只在公司完成领导布置的任务，远远跟不上前端技术的更新迭代，于是我再一次认真开始了我的学习之旅，我会把我学到的记录在这里，成为我自己的学习进度管理中心。...
2020-09-18 21:40:38
73
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人