- 博客(24)
- 收藏
- 关注
RSS订阅原创 React源码解析
1.简述 React 16 版本中初始渲染的流程要将 React 元素渲染到页面中，分为两个阶段，render 阶段和 commit 阶段。render 阶段负责创建 Fiber 数据结构并为 Fiber 节点打标记，标记当前 Fiber 节点要进行的 DOM 操作。commit 阶段负责根据 Fiber 节点标记 ( effectTag ) 进行相应的 DOM 操作。2.为什么 React 16 版本中 render 阶段放弃了使用递归在16之前的版本中采用递归执行。递归耗内存，它使用 Java
2022-05-12 22:25:46
448
1
原创 vue3和vite原理解析
Vue 3.0 性能提升主要是通过哪几方面体现的？响应式系统升级由vue2.0核心defineProperty升级为使用Proxy对象重写响应式系统编译优化源码体积优化移除了一些不常用的APItree-shakingVue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？Options包含一个描述组件选项的对象开发复杂组件,同一个功能逻辑的代码被拆分到不同选项Composition一组基于函数的A
2021-08-06 20:11:44
453
原创 Promise和Proxy
PromisePromise 是一个对象，也是一个构造函数function f1(resolve, reject) { // 异步代码...}var p1 = new Promise(f1);Promise构造函数接受一个回调函数f1作为参数，f1里面是异步操作的代码。然后，返回的p1就是一个 Promise 实例Promise 的设计思想是，所有异步任务都返回一个 Promise 实例。Promise 实例有一个then方法，用来指定下一步的回调函数Promise 对象的状态
2021-07-03 20:06:45
1004
原创 Vue.js 源码剖析-响应式原理、虚拟 DOM、模板编译和组件化
1.请简述 Vue 首次渲染的过程。vue初始化，实例成员，静态成员new vue()this._init()vm.$moment()运行时编译器版本vue如果没有传递render通过compileTofunctions() 生成render()渲染函数options.render = rendervm.$moment()运行时版本vue.jsmountComponent()mountComponent(this, el)触发beforeMount定义update
2021-04-14 01:37:10
154
原创 响应式原理和diff算法
当我们点击按钮的时候动态给 data 增加的成员是否是响应式数据，如果不是的话，如何把新增成员设置成响应式数据，它的内部原理是什么。let vm = new Vue({ el: '#el' data: { o: 'object', dog: {} }, method: { clickHandler () { // 该 name 属性是否是响应式的 this.dog.name = 'Trump' } }})点击添加按钮时不是响应式数据，在实例化的时候在dog上添加
2021-02-24 22:04:50
116
原创 webpack的理解
Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程在项目中一般都会散落着各种资源文件打包原理打包之后是一个自执行函数参数为一个对象，键为各个模块的路径，值为各个-模块的代码在webpack可以用各种loader加载各种资源文件，对资源文件做处理，还可以对...
2021-01-07 22:38:45
129
原创 ES Modules特性
ES Modules基本特性自动采用严格模式，忽略’use strict’每个ESM模块都是单独的私有作用域ESM是通过CORS去请求外部JS模块的ESM的script标签会延迟执行脚本导入导出注意事项export{ }是语法，不是导出一个对象var name = 'jack'var age = 18var obj = {name,gae}// export{ }是语法，不是导出一个对象export {name,age}//导出一个对象export default {nam
2020-12-03 20:49:02
481
原创 静态网页开发工作构建流脚手架tdn-pages(基于gulp开发)
tdn-pagesstatic web app workflowInstallation$ npm install tdn-pages# or yarn$ yarn add tdn-pagesUsage有三个命令可以使用tdn-pages clean清除构建文件夹tdn-pages develop静态开发网页 会开启开发服务器，提供热更新支持e6+和scss开发tdn-pages build构建生产环境代码在根目录添加文件pages.config.js
2020-12-03 00:00:13
156
原创 常用自动化构建工具
介绍自动化构建工作流 就是 把开发出来的源代码自动化转换成生产环境中可以运行的代码或者程序脱离运行环境兼容带来的问题开发阶段去使用高效率的语法、规范和标准构建转换那些不被支持的特性常用的自动化构建工具Grunt Gulp FISGrunt工作过程基于临时文件，构建速度较慢 ，每一步都会有磁盘读写的操作，超大型项目会很慢，生态完善Gulp很好解决了构建速度问题，基于 内存实现，默认支持同时执行多个任务，生态完善FIS更像是捆绑套餐，把项目中典型的需求全部集成到内部了，资源加
2020-11-25 00:33:32
1273
原创 脚手架工作原理，及创建简单 脚手架
介绍在启动脚手架之后会询问一些预设的问题，将回答的结果结合一些模版文件生成一个项目的结构创建脚手架cli应用脚手架工具实际上就是一个node cli应用，创建脚手架 就是创建一个cli应用mkdirsample-scaffoldingcdsample-scaffoldingyarn init在package.json中添加bin属性，加一个入口 文件{ "name": "sample-scaffolding", "version": "1.0.0", "..
2020-11-24 00:17:34
694
原创 plop小型脚手架工具
介绍主要用于创建特定类型文件的小工具，有点类似于yeoman中的sub-generator，一般不独立使用，用于集成到项目当中，创建一些同类型的项目文件实例在react项目中创建组件时，往往需要创建3个文件现在在react项目安装plopyarn add plop --dev安装完成之后，在根目录创建plopfile.js的文件，是入口文件在根目录创建模版目录plop-templates,在其中添加模版.hbs模版引擎类型文件，可以通过{{ }}语法插入相应的数据setGen
2020-11-23 23:44:11
202
原创 最通用的脚手架工具Yeoman
介绍Yeoman官方介绍说是用于创造现代化的web应用的脚手架工具不同于vue-cli，Yeoman更像是一个脚手架运行平台，我们可以通过yeoman搭配不同的generator，去创建任何类型的项目，也可以通过创建我们自己的generator，从而去定制我们自己的前端脚手架在很多专注于框架开发的人眼中，Yeoman过于通用，不够专注，所以更愿意使用vue-cli等之类的脚手架基本使用1.全局安装环境为node 和npm安装yarn global add yo安装对应gen.
2020-11-18 19:01:04
249
原创 前端工程化的理解
1.谈谈你对工程化的初步认识，结合你之前遇到过的问题说出三个以上工程化能够解决问题或者带来的价值前端工程化是指遵循一定的标准和规范，通过工具去提高效率，减低成本的一种手段一切以提高效率，减低成本、质量保证为目的的手段都属于工程化，一切重复的工作都应该被自动化技术往往是为了解决问题而存在的在开发过程当中想要使用es6+的新特性，提高我们的编码效率，但是兼容有问题； 想要使用Less/Sass/PostCSS增强css的编程性，但是在运行环境不能被支持； 想要使用模块化，组件化的方式提高项目
2020-11-18 17:25:03
180
原创 ES新特性与TypeScript、JS性能优化
一.请说出下列的执行结果，并解释为什么var a = [];for(var i = 0; i<10;i++) { a[i] = function() { console.log(i); }}a[6]();结果为10，for循环执行完之后a数组每隔成员只是赋值了一个函数，循环体中的变量i执行后就变成了10，函数执行后查找作用域链查到i为10，所以不管数组中的哪个函数执行后都打印10二.请说出下列的最终的执行结果，并解释为什么var tmp = 1
2020-11-09 23:43:52
261
原创 TypeScript扩展
接口为我们有结构的数据进行类型约束interface Post { title: string content: string}function printPost (post: Post) { console.log(post.title) console.log(post.content)}printPost({ title: 'Hello TypeScript', content: 'A javascript superset'})可选，只读，动态
2020-11-04 21:27:04
418
原创 TypeScript上手
快速上手安装TS ： yarn add typescript --dev编译// 可以完全按照 JavaScript 标准语法编写代码var hello = function (name) { console.log("Hello, " + name);};hello('TypeScript');运行命令 yarn tsc [filename]在文件中就可以看到编译过后的js 文件配置文件编译整个项目1.运行 yarn tsc --init 生成配置文件...
2020-11-04 20:16:14
116
原创 promise经典面试题
在urls数组中存放了 10 个接口地址。同时还定义了一个loadDate函数，这个函数接受一个url参数，返回一个Promise对象，该Promise在接口调用成功时返回resolve，失败时返回reject。要求：任意时刻，同时下载的链接数量不可以超过 3 个。 试写出一段代码实现这个需求，要求尽可能快速地将所有接口中的数据得到。var urls = [ 'http://jsonplaceholder.typicode.com/posts/1', 'http:/...
2020-11-03 20:08:17
326
原创 柯理化
柯理化代码演示function checkAge (age) { let min = 18 return age >= min}// 普通的纯函数function checkAge (min, age) { return age >= min}柯理化就是讲多个参数转化为几个分开的参数// 函数的柯里化function checkAge (min) { return function (age) { return age >= min
2020-10-30 23:44:18
174
原创 纯函数
概念相同的输入总能得到相同的输出，而且没有任何可观察的副作用 lodash是一个纯函数的功能库，提供了对数组，数字，对象，字符串，函数等操作的一些方法 数组中的slice和splice分别是纯函数和不纯的函数 slice返回数组中的指定部分，不会改变原数组 对数组进行操作返回该数组，会改变原数组 // 纯函数和不纯的函数// slice / splicelet array = [1, 2, 3, 4, 5]// 纯函数 得到相同的输出console.log(arra
2020-10-30 23:35:51
69
原创 函数式编程前置知识
前置知识函数是一等公民 高阶函数 闭包1.函数式一等公民函数可以存储在变量中 函数可以作为参数 函数可以作为返回值函数式一等公民是学习高阶函数，柯里化等的基础2.高阶函数可以把函数作为参数传递给另一个函数 可以把函数作为另一个函数的返回结果// 高阶函数-函数作为参数function forEach (array, fn) { for (let i = 0; i < array.length; i++) { fn(array[i]) }}//
2020-10-30 23:18:05
106
原创 手写promise源码
// 静态声明promise的三种状态const PENDING = 'pending'; // 等待const FULFILLED = 'fulfilled'; // 成功const REJECTED = 'rejected'; // 失败// 处理resove函数返回的结果const resovePromise = (promise, x, resolve, reject) => { // 如果返回自己本身抛出错误 if (promise === x) { .
2020-10-29 23:41:32
154
原创 js异步编程
一.谈谈你是如何理解js异步编程的，EventLoop,消息队列都是做什么的，什么是宏任务，什么是微任务？1.采用单线程工作的原因js这门语言刚刚创建出来的时候的特点就是单线程，用来实现页面上的交互，实现交互的核心就是dom操作，必须为单线程，否则就会出现线程同步问题（如删除、移动一起执行），浏览器不知道以哪个线程 为准单线程是指js执行环境中负责执行代码的线程只有一个缺点：有一步耗时的任务会出现阻塞为了解决这个问题，JavaScript将任务的执行模式分为同步模式和异步模式2.异步
2020-10-29 00:51:46
188
原创 函数式编程
1.为什么要学习函数式编程函数式编程随着react流行越来越关注（如redux，高阶组件等都使用了函数式编程的思想）vue2大量使用高阶函数，vue3也开始拥抱函数式编程函数式编程可以抛弃this方便测试，方便并行处理有很多库帮助我们进行函数式编程（loadsh,ramda等）2.什么是函数式编程函数式编程(Functional programming,fp),fp编程范式之一，编程范式还有面向过程编程，面向对象编程。函数式编程思维：对运算过程进行抽象函数式编程不是.
2020-10-27 23:16:46
88
原创 我眼中的大前端
目录1.扩展服务器的一部分2.客户端种类扩大1.服务端开发（扩展服务器的一部分BFF）传统的前端开发是服务器后端开发，客户端前端开发，一般为网页开发。但是前端开发的资源要部署到服务器上，并且一些动态的设置变化项，甚至会和后端的一些结合到一起，导致前端和后端会融合到一起合力形成完整的应用。把本该属于前端的后端一部分分离开来 BFF(Best Friend Forever) 专门为前端准备的后端服务器（一般为node）2.泛客户端开发（客户端种类扩大）但凡与用户接触的所有客户端都
2020-10-27 22:43:03
104
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人