- 博客(31)
- 收藏
- 关注
RSS订阅原创 拉勾前端高薪就业课程笔记第十一弹（模块4-1）
从4-1模块开始将要进入到ReactJs的学习，4-1模块主要讲解了React 15的核心原理、React 16中Fiber的原理以及实现以及React 16初始渲染部分源码的解读
2021-06-15 17:21:13
194
原创 React15 核心原理模拟实现
搭建开发环境要模拟 React 的核心原理我们只需要将babel转换jsx代码是调用的createElement方法转换成自定义的React即可。所以搭建开发环境时只需要能够转换jsx和es语法以及能够启动开发服务器即可。创建文件结构在空文件夹下创建如下的文件结构其中TinyReact文件夹存放要实现的React核心代码开发依赖依赖插件描述webpack打包工具webpack-cliwebpack命令行工具webpack-dev-server开发服务器插件
2021-06-15 17:16:43
186
原创 react16 初始渲染流程源码解读
从createElement开始createElment(type, config, …children)：生成虚拟DOM对象。babel转换react时调用该方法将jsx语法转换成js语法。createElment主要完成以下功能：处理config中的特殊属性：ref、key、__self、__source。将config中的非特殊属性保存到props中。将第3个参数开始以后的参数记录到一个数组中，并保存到props.children上。为props中的属性赋默认值。创建ReactElem
2021-06-15 17:15:49
211
原创 React Fiber 原理实现
react16之前的问题react16之前dom元素的更新采用递归遍历的方式来对比子节点。一旦进入到递归遍历，整个过程将不能被打断，如果dom树的层次比较深，整个对比过程将耗时较长。而js的运行和dom的渲染又是互斥的，所以很容易造成卡顿。Fiberfiber是react16采用的一种新的节点对比更新方法，是为了解决react16之前的问题而产生的。核心思想任务拆分，将任务才分成一个个小的任务在浏览器空闲时间执行任务，避免长时间占用主线程使用循环模拟递归，因为循环是可以中断的实现思路在
2021-06-09 17:18:34
1044
原创 拉勾前端高薪就业课程笔记第十弹（模块3-6）
本模块主要讲解Vue实战中遇到的一些技术点，通过一个课程管理项目的实操来讲解在实战中如何使用Vue进行开发。Vue项目中使用TypeScript在vue项目中使用ts有两种情况，一、在新项目中使用TypeScript；二、在已有Vue项目中使用TypeScript。在新项目中使用TypeScript使用@vue/cli工具创建是选择使用ts即可。创建完的项目中会有两个ts文件。其中shims-ts.d.ts文件是jsx语法的类型补充/** * Jsx 类型声明补充 */import Vu
2021-05-27 12:11:37
163
原创 拉勾前端高薪就业课程笔记第九弹（模块3-5）
本模块主要介绍Vue3.0的最新特性，并介绍了Composition API相关的方法，分析了Vue3.0中响应式的原理，最后介绍了Vite的实现原理。Vue3.0的变化源码和组织方式的变化Vue3.0使用TypeScript重写了源码，并且使用Monorepo的包管理方式来管理源码，使得每个模块都能单独引入。Composition APIVue3.0提供了Composition API，来解决业务功能分散，以及逻辑重用等问题。在Vue2.x中，组件的功能实现一般被分布到不同的对象中，data、c
2021-05-18 17:05:35
130
原创 拉勾前端高薪就业课程笔记第八弹（模块3-4）
本模块重点介绍SSR和组件库开发相关的内容，主要包括以下三个部分：从零搭建SSR项目使用Gridsome生成静态网站Vue组件库的开发
2021-05-13 15:20:55
116
原创 Vue 组件库开发
快速原型开发VueCli提供了一个插件可以进行原型快速开发，需要先全局安装@vue/cli-service-global插件，然后再通过VueCli创建项目。开发时可以使用vue serve 快速查看组件的运行效果vue serve 如果不指定参数默认会在当前目录下寻找一些入口文件：main.js、index.js、App.vue、app.vue。可以传入参数指定要加载的组件 vue serve ./src/post.vue结合Element-ui进行快速的原型开发使用命令行vue add
2021-04-22 16:07:26
1822
原创 静态网站生成器Gridsome
什么是静态网站生成器静态网站生成器是使用一系列配置、模板以及数据、生成静态HTML文件及相关资源的工具，也叫预渲染。生成的网站不需要服务器 ，只要放到支持静态资源的 Web Server 或 CDN 上即可运行。静态网站的好处省钱：不需要专业的服务器，只要托管静态文件的空间即可快速：不需要经过后端服务器处理，只传输内容安全：没有后端程序的执行，更安全常见的静态网站生成器Jekyll(Ruby)Hexo(Node)Hugo(Golang)Gatsby(Node/React)Grid
2021-04-21 17:10:47
627
原创 拉勾前端高薪就业课程笔记第七弹（模块3-3）
该模块主要讲解了Vuex的基本使用和原理、服务端渲染及Nuxt.js介绍，并使用Nuxt.js开发了RealWorld应用。最后还介绍了如何使用GitHub Action来做自动化部署。
2021-03-29 16:07:08
141
原创 Nuxt.js
Nuxt.js是什么Nuxt.js是一个基于Vue.js生态的第三方开源服务端渲染应用框架，用于构建同构应用。为什么要使用Nuxt.js传统的服务端渲染在用户访问网页地址时，服务端读取模板和数据，并将模板和数据组合成最终的渲染结果发送给客户端，所有操作都在服务端进行，服务端的压力较大，前后端耦合度高，不利于开发和维护，开发成本也较高。每次获取新的页面内容都要刷新页面，用户体验也不好。而客户端渲染在用户访问网页地址时，首先服务端返回一个空白的HTML页面，然后客户端通过ajax请求数据，数据返回之后
2021-03-29 15:56:08
268
原创 Vuex核心介绍
Vuex简介Vuex是一款状态管理的Vue插件。插件注册之后会向Vue的原型添加一个$store属性用来存储Vuex实例，组件内容可以通过该属性来访问Vuex中的state，或通过响应的方法修改state中的属性。
2021-03-29 11:50:25
108
原创 拉勾前端高薪就业课程笔记第六弹（模块3-2）
从这个模块正式开始解读Vue的源码，模块内容包括Vue2.x响应式原理分析、Vue2.x虚拟DOM原理、Vue2.x模板编译原理以及Vue2.x组件化过程。 组件源码的学习过程比较痛苦，需要在不同的方法之间来回跳转，往往一个方法看到一半就需要跳转到另一个方法里，上一个方法的功能还没有搞清就需要开始看下一个方法，然后回到上一个方法之后又忘了上一个方法是干啥的，还好可以看学习视频，来来回回翻看教学视频，直到看懂为止。同时做好笔记也很关键。...
2021-03-16 15:07:59
86
原创 Vue2.x源码解读-组件化
组件的概念 Vue组件就是拥有预定义选项的Vue实例。组件的注册方式全局组件：通过Vue.component方法注册。局部组件：在组件的选项参数的components中定义，只能在注册的组件中使用。
2021-03-16 14:53:29
89
原创 Vue2.x原码解析-虚拟DOM
虚拟DOM的概念虚拟DOM（Virtual DOM）是使用js对象描述真实DOM。通过对比变化前后的虚拟DOM，可以精确定位到视图的变化，只修改变化部分的视图，提高复杂视图变化时的渲染效率。Vue中的虚拟DOMVue中的虚拟DOM借鉴了Snabbdom，其模块机制，钩子函数以及diff算法和Snabbdom几乎一致，但Snabbdom的基础上添加了Vue的特性，如指令和组件机制。虚拟DOM的优缺点优点避免直接操作DOM，提交开发效率。作为中间层可以实现跨平台。复杂视图情况下可以提升渲染性能
2021-03-16 14:52:55
201
原创 Vue2.x源码解读-响应式原理剖析
准备工作下载vue源码，可以先将vue项目fork到自己的github仓库，然后在clone自己仓库的vue，这样在解读源码的时候可以随时添加注释，并将注释提交到自己的仓库。源码代码主要结构说明：dist：打包生成的文件examples：实例代码目录src：源码文件目录compiler：编译器相关代码，把template模板转化成render函数core：核心代码components：定义vue自带的keep-alive组件global-api：定义vue中的今天方法，包括m
2021-03-16 14:52:13
283
原创 拉勾前端高薪就业课程笔记第五弹（模块3-1）
从这个模块开始就要进入到第三部分内容的学习了，这个部分主要是引领我们深入了解Vue的源码。这个模块从VueRouter的开始，从VueRouter的使用，逐步深入到原理分析，到最后模拟实现了一个基础的VueRouter插件。学习的过程中形成了Vue-Router原理实现这一篇笔记。学习完VueRouter之后，开始正式学习Vue的原理了。响应式是Vue的特色之一，其中又包括响应式数据、双向绑定、数据驱动这些概念，它们共同组成了Vue的响应式。Vue2.x和Vue3.x的响应式的实现有所不同，但都是通过对
2021-01-22 00:00:34
220
原创 Virtual DOM 的实现原理
Virtual DOMVirtual DOM(虚拟DOM)，是由普通的js对象来描述DOM对象。为什么要使用虚拟DOM真实DOM的创建需要花费很大代价虚拟DOM通过比较前后两次状态差异更新真实DOM
2021-01-21 23:54:05
152
原创 Vue响应式原理
相关概念数据驱动数据响应式数据模型仅仅是普通js对象，当我们修改数据时，更图会自动更新，避免了繁琐的DOM操作，提高开发效率。双向绑定数据改变，视图随之发生改变；视图改变，数据也会发生改变。使用v-model在表单上创建双向绑定。数据驱动是Vue最独特的特性之一，开发过程中只需要关注数据，不需要关心数据时如何渲染到视图。响应式核心原理Vue2.x响应式核心原理当把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 prop
2021-01-21 23:42:18
157
原创 Vue-Router原理实现
Vue-Router的使用步骤在vue项目中使用vue-router的步骤：安装vue-router创建router对象使用 Vue.use注册vue-router组件定义路由规则根据路由规则创建 router 对象import Vue from "vue";import VueRouter from "vue-router";// Vue.use注册组件，如果传入的是一个方法，则调用该方法注册组件，如果传入的是一个对象，则调用对象的install方法来注册组件Vue.
2021-01-06 11:40:55
241
原创 前端规范化标准
规范化标准是践行前端工程化的重要组成部分。为什么需要规范化标准软件开发通常需要多人协同，不同的开发者有不同的编码习惯和喜好，不同的习惯和喜好会增加项目维护成本，所以每个项目或团队需要明确统一的标准。哪里需要规范化标准开发过程中人为编写的一切。如代码、文档、纪要甚至是提交日志，其中代码的标准化规范尤为重要，因为代码的质量关于项目的质量以及项目后期的维护成本。实施规范化的方法编码前人为约定通过工具实现LintESLint基本介绍ESLint是当前最为主流的javascript Lin
2021-01-03 19:16:16
783
原创 模块化打包工具
模块打包工具产生的原因ESM 存在兼容问题模块文件过多，网络请求频繁所有前端资源都需要模块化，不仅仅是js文件需要有一个工具能自动完成下列工作编译最新特性，使浏览器能够兼容最新特性能够将模块文件打包到一起能够支持不同种类的资源类型，如图片，html，js，css，以及其他的各种文件常用的模块打包工具WebpackRollupParcelWebpack使用基本使用安装 webpack 及 webpack-cli命令行运行 yarn webpack 即可打包，we
2020-12-31 15:30:29
363
1
原创 前端模块化
模块化是一种思想1、模块化的演进过程在没有工具和规范情况下模块化是怎么实现的呢？最早的时候我们以文件的方式来划分模块，一个文件就是一个模块。将每个功能以及其相关的状态数据放到同一个文件当中，然后通过srcipt标签引入，一个script标签对应一个模块。这样实现有几个比较明显缺点：1、所有变量都以全局的方式声明，会污染全局作用域；2、变量命名比较容易产生冲突；3、模块的依赖关系混乱。后来，为了减少命名冲突，在文件划分的基础之上，将每个模块包裹在一个全局对象中...
2020-12-28 17:03:24
124
原创 拉勾前端高薪就业课程笔记第三弹（模块2-1）
一、简述模块2-1主要的学习内容是前端工程化。包括web前端脚手架的开发、web前端项目的自动化构建。二、主要内容工程化概念：遵循一定的标准和规范，通过工具提高效率降低成本解决的问题传统语言或语法带来的兼容问题。如最新的ES6语法、Less、Sass、无法兼容，运行环境不能直接支持无法直接使用模块化/组件化重复的机械化工作代码风格无法统一、编码质量得不到保证依赖后端服务接口支持整体依赖后端项目在开发流程中的体现创建项目: 使用脚手架工具自动完成基本项目的搭建编码阶段
2020-12-16 15:03:39
326
原创 作业part1-2
一、请说出下列最终的执行结果，并解释为什么。答案： 10，函数执行时，输出的 i 是for循环中的变量 i，函数执行时，循环结束，变量 i 的值为10，故输出的 i 也就是 10。二、请说出下列最终的执行结果，并将解释为什么。答案： 将会提示错误，因为在 if 块级作用域中，存在 let 声明的 tmp 变量，但是在声明之前就使用了，let 声明变量不存在变量声明提升，因此将提示错误。三、结合ES6新语法，用最简单的方式找出数组中最小值。答案：arr.reduce((v, n) =>
2020-10-27 16:17:10
120
原创 拉勾前端高薪就业课程笔记第一弹（模块1-1）
一. 函数式编程1、为什么要使用用函数式编程（Function Programming, FP）流程框架逐步拥抱，React、Vue3都使用了函数式编程方便tree shaking 过滤无用的代码不用再关注this方便测试以及并行处理多种库帮助开发：lodash、underscore、ramda2、函数式编程原则不保存中间的计算结果，变量是不可以变的更细粒度的纯函数，有很多函数式编程的库帮助开发， 不用自己开发细粒度的纯函数使用函数组合，将多个细粒度的函数组合起来生成新的函数，来实
2020-10-14 13:49:18
364
原创 前端训练营part1-1作业答案
简答题一、js异步编程实际是将部分js代码的执行滞后。js是单线程的，如果没有异步，对于某些耗时较大的操作，如异步获取数据，IO操作等，js将等待操作完成再执行下面的代码，这样会造成界面卡顿、白屏等现象。而js的异步编程就是用来解决这个问题的。js在执行时，会将js代码解析成一个一个任务，然后依次执行。任务分为同步任务和异步任务。同步任务js在执行同步任务时会将任务添加到执行栈中并立即执行，等待任务执行完成之后再将其从执行栈中弹出。异步任务js在执行异步任务时，会经过相应的处理模块处理之后添加
2020-10-13 16:44:54
282
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人