- 博客(15)
- 收藏
- 关注
原创 react服务端渲染方案
1. 渲染方案介绍1.1 什么是客户端渲染1.2 什么是服务器端渲染1.3 传统的服务端渲染(直接返回html,客户端无感知)1.3.1 缺点1.4 客户端渲染1.4.1 优点1.4.2 不足1.5 SPA 应用中服务器端渲染解决的问题:ReacrSSR同构2. 服务器端渲染快速开始2.1 创建 Node 服务器2.2 实现 React SSR2.3 webpack 打包配置2.4 项目启动命令配置2.5 客户端 React 附加事件2.6 客户端 React 打包配置2.7 添加客户端包文件请求链接2..
2021-01-13 15:13:02
816
原创 ReactJS 静态网页生成器方案-Gatsby学习总结
ReactJS 静态网页生成器方案-Gatsby学习总结1. Gatsby 介绍2. 静态应用的优势3. Gatsby 总览4. 创建 Gatsby 项目5. 基于文件的路由系统6. 以编程的方式创建页面7. Link 组件8. GraphQL 数据层8.1 页面组件数据查询8.2 非页面组件数据查询9. Gatsby 插件 ([网址](https://www.gatsbyjs.org/plugins/))9.1 将 JSON 数据放入数据层9.2 图像优化9.3 将 markdown 数据放入数据层9.4
2021-01-13 10:24:19
810
原创 Redux源码实现
Redux深度学习之源码实现Redux 源码实现1. Redux 核心概念及工作流程2. Redux基本功能实现2.1 基本功能:2.2 首先我们实现 `Redux` 的三个基本功能:2.3 实现步骤:3. 实现enhancer函数4. 实现applyMiddleWare函数5. 实现combineReducers函数6. 完整代码Redux 源码实现为了更好的理解Redux,我们这里自己实现一个简单版本的Redux源码,实现了Redux的基本功能如:getState、subscribe、dispatc
2020-11-23 16:37:31
291
原创 React之Virtual DOM 及 Diff 算法概述
React的 Virtual DOM 及 Diff 算法的源码解构复杂,直接根据源码学习会比较吃力.这边文章依据React的Virtual DOM 及 Diff 算法的原理,自己去实现了相关的功能,大大的简化了相关代码,可以更好帮助我们了解整个流程,对工作原理有了一个大致的认识,之后在去阅读学习源码也会更加简单清晰。实现代码1. React 相关知识导读1.1 JSX 到底是什么使用 React 就一定会写 JSX,JSX 到底是什么呢?它是一种 JavaScript 语法的扩展,React 使用它
2020-10-24 16:28:42
528
原创 Vue 3.0响应式系统编程概述
Vue 3.0响应式系统简单实现响应式系统原理3.x响应式回顾核心方法proxy回顾源码实现reactive(只能转换对象)依赖收集effect、 tracktrigger 触发更新ref - 可以接受对象或者基础类型,如果是响应式对象直接返回,是对象则内部会调用reactive将其转换为响应式对象,如果是普通的值则转为具有一个value属性的响应式对象toRefs - 传入的对象必须是reactive返回的响应式对象(proxy对象)然后将传入对象的属性转换为类似ref返回的对象然后将属性挂载在一个新的对
2020-09-27 14:03:51
2307
6
原创 Github Actions自动化部署
Github Actions自动化部署之腾讯云传统的部署方式构建过程保持后台启动现代化的部署方式(CI/CD)Github Actions自动化部署之腾讯云打包过程中的问题之前写过关于服务端渲染的文章,也实现了一个服务端渲染的案例代码地址 预览地址,这章主要是如何将项目发布至腾讯云服务器,并且每次更新自动同步到服务器:传统的部署方式更新本地构建发布更新本地构建发布…构建过程在nuxt.config.js中配置Host + Port(在项目中配置host + po
2020-09-22 16:27:39
1111
原创 服务端渲染二之NUXT
服务端渲染二之NUXTNuxtNuxt.js 是什么Nuxt的使用方式初始化Nuxt项目路由学习NUXT的视图布局 公共布局异步数据 [asyncData](https://zh.nuxtjs.org/guide/async-data)异步数据 上下文对象登录状态持久化处理页面访问权限 -- 中间件插件配置(这里以axios拦截器为例)在上一章中给大家整理了服务端的的相关概念,这章主要是通过NUXT实现服务端渲染:NuxtNuxt.js 是什么一个基于Vue.js生态的第三方开源服务端渲染应用框架
2020-09-22 16:03:17
393
原创 服务端渲染一之相关概念
服务端渲染一之相关概念spa单页面应用同构应用相关概念传统的服务端渲染(直接返回html,客户端无感知)缺点客户端渲染优点不足现代化的服务端渲染(同构渲染 = 后端渲染 + 前端渲染)如何实现同构渲染同构渲染的问题服务端渲染使用建议spa单页面应用优点用户体验好开发效率高渲染性能好可维护性好缺点首屏渲染时间长不利于seo同构应用通过服务端渲染首屏直出,解决spa应用首屏渲染慢及不利于seo问题通过客户端渲染接管页面内容交互得到更好的用户体验这种方式通常称之为现
2020-09-22 14:25:02
556
原创 vue源码学习三之组件化
vue源码学习之组件化组件化什么是组件组件注册过程组件的创建过程文章内容输出来源:拉勾教育大前端高薪训练营在拉钩训练营学习已经有一段时间了,感觉这段时间的收获远比自己独自学习强的多,自己学习的时候经常会因为惰性,无法坚持,在这里有班主任时刻关注你的学习进度(感觉对我这种懒人蛮好的),最重要的是有了一个学习的计划,不用无头苍蝇一样东一点西一点,最后什么都没记住。学习都是需要方法和技巧的,在训练营会有专业的老师为你答疑解惑,同时会教你解决问题的思路及方法,让你能够触类旁通。这篇文章主要是Vue源码学习中
2020-07-28 21:23:56
130
原创 vue源码学习二之template编译过程
vue源码学习之模板编译模板编译模板编译的作用模板编译的入口(src\platforms\web\entry-runtime-with-compiler.js)文章内容输出来源:拉勾教育大前端高薪训练营在拉钩训练营学习已经有一段时间了,感觉这段时间的收获远比自己独自学习强的多,自己学习的时候经常会因为惰性,无法坚持,在这里有班主任时刻关注你的学习进度(感觉对我这种懒人蛮好的),最重要的是有了一个学习的计划,不用无头苍蝇一样东一点西一点,最后什么都没记住。学习都是需要方法和技巧的,在训练营会有专业的老
2020-07-28 21:22:01
361
原创 vue源码学习一之响应式原理及虚拟DOM
@TOC文章内容输出来源:拉勾教育大前端高薪训练营在拉钩训练营学习已经有一段时间了,感觉这段时间的收获远比自己独自学习强的多,自己学习的时候经常会因为惰性,无法坚持,在这里有班主任时刻关注你的学习进度(感觉对我这种懒人蛮好的),最重要的是有了一个学习的计划,不用无头苍蝇一样东一点西一点,最后什么都没记住。训练营的课程基本都是准备工作Vue 源码的获取项目地址:https://github.com/vuejs/vueFork 一份到自己仓库,克隆到本地,可以自己写注释提交到 github为
2020-07-28 21:10:49
842
原创 Vue源码学习之snabbdom分析
Vue源码学习之snabbdom虚拟Dom源码分析流程近期在学习Vue的源码,Vue的源码中其虚拟dom部分主要是 借鉴了snabbdom.js,而snabbdom的代码行数比较少,可以帮助我们更好的理解相关概念,所以这里我们对snabbdom进行学习。虚拟DomvNode实际上只是一个js对象,使用普通js对象来描述dom对象,因为不是真实dom所有叫虚拟dom(创建一个真实Dom的成本非常高,属性非常多),通过新旧虚拟DOM 这两个对象的差异(Diff算法),最终只把变化的部分重新渲染,提高渲染
2020-07-12 16:01:28
276
1
原创 Vue源码学习之Vue响应式数据极简实现
Vue源码学习之Vue响应式数据实现Vue响应式数据发布订阅模式与观察者模式简单实现响应式VueObserverCompilerDepWatcherVue响应式数据说到Vue源码必定会说到Vue的双向数据绑定,这里简单介绍下Vue响应式数据的实现发布订阅模式与观察者模式发布订阅模式 :一个事件中心,有一个事件收集器属性,注册事件,触发事件的方法,通过事件注册将需要执行的方法添加到事件收集器,当触发事件执行时间收集器中的所有方法观察者模式 :没有事件中心,只有发布者与观察者,发布者有依赖收集器,收
2020-07-12 00:51:14
452
原创 Vue源码学习之VueRouter极简实现
Vue源码学习之VueRouterVue源码学习之VueRouter什么是Vue.useVueRouter源码步骤详解install方法initRouteMapinitComponentsinitEventVue源码学习之VueRouter最近在学习使用VueRouter的源码,这里简单介绍下VueRouter的实现什么是Vue.use我们在引入一些插件的时候经常需要在main里面用到这个语法Vue.use(function/object),内部如果是函数直接调用,是对象则调用对象的instal
2020-07-11 22:52:10
165
原创 从零开始一个cli脚手架搭建
从零开始一个cli脚手架搭建从零开始一个cli脚手架搭建项目目录实现从零开始一个cli脚手架搭建最近在学习使用node cli,这里现总结一下cli脚手架的搭建项目目录node_cli├─ templtes //模板文件│ ├─ src│ │ └─ index.html│ ├─ index.html│ ├─ sub│ │ ├─ index.html│ │ ├─index.js│ │ └─ index.css├─ cli.js //入口├─ package.j
2020-06-10 22:40:10
353
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人