训练营笔记
文章平均质量分 72
wsq_bsdn
这个作者很懒,什么都没留下…
展开
-
拉勾前端高薪就业课程笔记第十一弹(模块4-1)
从4-1模块开始将要进入到ReactJs的学习,4-1模块主要讲解了React 15的核心原理、React 16中Fiber的原理以及实现以及React 16初始渲染部分源码的解读原创 2021-06-15 17:21:13 · 178 阅读 · 0 评论 -
React15 核心原理模拟实现
搭建开发环境要模拟 React 的核心原理我们只需要将babel转换jsx代码是调用的createElement方法转换成自定义的React即可。所以搭建开发环境时只需要能够转换jsx和es语法以及能够启动开发服务器即可。创建文件结构在空文件夹下创建如下的文件结构其中TinyReact文件夹存放要实现的React核心代码开发依赖依赖插件描述webpack打包工具webpack-cliwebpack命令行工具webpack-dev-server开发服务器插件原创 2021-06-15 17:16:43 · 166 阅读 · 0 评论 -
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 · 189 阅读 · 0 评论 -
React Fiber 原理实现
react16之前的问题react16之前dom元素的更新采用递归遍历的方式来对比子节点。一旦进入到递归遍历,整个过程将不能被打断,如果dom树的层次比较深,整个对比过程将耗时较长。而js的运行和dom的渲染又是互斥的,所以很容易造成卡顿。Fiberfiber是react16采用的一种新的节点对比更新方法,是为了解决react16之前的问题而产生的。核心思想任务拆分,将任务才分成一个个小的任务在浏览器空闲时间执行任务,避免长时间占用主线程使用循环模拟递归,因为循环是可以中断的实现思路在原创 2021-06-09 17:18:34 · 1005 阅读 · 0 评论 -
拉勾前端高薪就业课程笔记第十弹(模块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 · 146 阅读 · 0 评论 -
拉勾前端高薪就业课程笔记第九弹(模块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 · 119 阅读 · 0 评论 -
拉勾前端高薪就业课程笔记第八弹(模块3-4)
本模块重点介绍SSR和组件库开发相关的内容,主要包括以下三个部分:从零搭建SSR项目使用Gridsome生成静态网站Vue组件库的开发原创 2021-05-13 15:20:55 · 107 阅读 · 0 评论 -
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 · 1788 阅读 · 0 评论 -
静态网站生成器Gridsome
什么是静态网站生成器静态网站生成器是使用一系列配置、模板以及数据、生成静态HTML文件及相关资源的工具,也叫预渲染。生成的网站不需要服务器 ,只要放到支持静态资源的 Web Server 或 CDN 上即可运行。静态网站的好处省钱:不需要专业的服务器,只要托管静态文件的空间即可快速:不需要经过后端服务器处理,只传输内容安全:没有后端程序的执行,更安全常见的静态网站生成器Jekyll(Ruby)Hexo(Node)Hugo(Golang)Gatsby(Node/React)Grid原创 2021-04-21 17:10:47 · 612 阅读 · 0 评论 -
拉勾前端高薪就业课程笔记第七弹(模块3-3)
该模块主要讲解了Vuex的基本使用和原理、服务端渲染及Nuxt.js介绍,并使用Nuxt.js开发了RealWorld应用。最后还介绍了如何使用GitHub Action来做自动化部署。原创 2021-03-29 16:07:08 · 120 阅读 · 0 评论 -
拉勾前端高薪就业课程笔记第五弹(模块3-1)
从这个模块开始就要进入到第三部分内容的学习了,这个部分主要是引领我们深入了解Vue的源码。这个模块从VueRouter的开始,从VueRouter的使用,逐步深入到原理分析,到最后模拟实现了一个基础的VueRouter插件。学习的过程中形成了Vue-Router原理实现这一篇笔记。学习完VueRouter之后,开始正式学习Vue的原理了。响应式是Vue的特色之一,其中又包括响应式数据、双向绑定、数据驱动这些概念,它们共同组成了Vue的响应式。Vue2.x和Vue3.x的响应式的实现有所不同,但都是通过对原创 2021-01-22 00:00:34 · 209 阅读 · 0 评论 -
Virtual DOM 的实现原理
Virtual DOMVirtual DOM(虚拟DOM),是由普通的js对象来描述DOM对象。为什么要使用虚拟DOM真实DOM的创建需要花费很大代价虚拟DOM通过比较前后两次状态差异更新真实DOM原创 2021-01-21 23:54:05 · 142 阅读 · 0 评论 -
Vue响应式原理
相关概念数据驱动数据响应式数据模型仅仅是普通js对象,当我们修改数据时,更图会自动更新,避免了繁琐的DOM操作,提高开发效率。双向绑定数据改变,视图随之发生改变;视图改变,数据也会发生改变。使用v-model在表单上创建双向绑定。数据驱动是Vue最独特的特性之一,开发过程中只需要关注数据,不需要关心数据时如何渲染到视图。响应式核心原理Vue2.x响应式核心原理当把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 prop原创 2021-01-21 23:42:18 · 143 阅读 · 0 评论 -
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 · 230 阅读 · 0 评论 -
拉勾前端高薪就业课程笔记第四弹(模块2-2)
2-2模块主要包含3大块内容前端模块化介绍模块化打包工具介绍及使用前端规范标准化原创 2021-01-03 19:27:11 · 137 阅读 · 0 评论 -
模块化打包工具
模块打包工具产生的原因ESM 存在兼容问题模块文件过多,网络请求频繁所有前端资源都需要模块化,不仅仅是js文件需要有一个工具能自动完成下列工作编译最新特性,使浏览器能够兼容最新特性能够将模块文件打包到一起能够支持不同种类的资源类型,如图片,html,js,css,以及其他的各种文件常用的模块打包工具WebpackRollupParcelWebpack使用基本使用安装 webpack 及 webpack-cli命令行运行 yarn webpack 即可打包,we原创 2020-12-31 15:30:29 · 343 阅读 · 1 评论 -
拉勾前端高薪就业课程笔记第二弹(模块1-2)
前言这是第一个模块第二部分的学习笔记。原创 2020-10-29 14:16:16 · 262 阅读 · 2 评论 -
拉勾前端高薪就业课程笔记第一弹(模块1-1)
一. 函数式编程1、为什么要使用用函数式编程(Function Programming, FP)流程框架逐步拥抱,React、Vue3都使用了函数式编程方便tree shaking 过滤无用的代码不用再关注this方便测试以及并行处理多种库帮助开发:lodash、underscore、ramda2、函数式编程原则不保存中间的计算结果,变量是不可以变的更细粒度的纯函数,有很多函数式编程的库帮助开发, 不用自己开发细粒度的纯函数使用函数组合,将多个细粒度的函数组合起来生成新的函数,来实原创 2020-10-14 13:49:18 · 322 阅读 · 0 评论