- 博客(21)
- 收藏
- 关注
RSS订阅原创 Fiber详解
1. 开发环境配置1.1 文件夹结构文件 / 文件夹描述src存储源文件dist存储客户端代码打包文件build存储服务端代码打包文件server.js存储服务器端代码webpack.config.server.js服务端 webpack 配置文件webpack.config.client.js客户端 webpack 配置文件babel.config.jsonbabel 配置文件package.json项目工程文件创建
2021-07-13 22:53:57
188
原创 React中的 Virtual DOM 及 Diff 算法
1. JSX 到底是什么使用 React 就一定会写 JSX，JSX 到底是什么呢？它是一种 JavaScript 语法的扩展，React 使用它来描述用户界面长成什么样子。虽然它看起来非常像 HTML，但它确实是 JavaScript 。在 React 代码执行之前，Babel 会对将 JSX 编译为 React API。// JSX<div className="container"> <h3>Hello React</h3> <p>Rea
2021-07-05 22:45:00
205
原创 React基础知识
1. React 介绍React 是一个用于构建用户界面的 JavaScript 库，它只负责应用的视图层，帮助开发人员构建快速且交互式的 web 应用程序。在React中，All in JS，因为构建用户的界面、构建界面的样式、构建界面的逻辑都是使用JS。React 使用组件的方式构建用户界面。2. JSX 语法在 React 中使用 JSX 语法描述用户界面，它是一种 JavaScript 语法扩展，它不是html。在 React 代码执行之前，Babel 会将 JSX 语法转换为标准的 Ja
2021-07-04 23:04:10
156
原创 Vue实战总结
主要讲解Vue（Vue.js + Vuex + TypeScript）实战中遇到的一些技术点。Vue项目中使用TypeScript在vue项目中使用ts有两种情况：在新项目中使用TypeScript在已有Vue项目中使用TypeScript。在新项目中使用TypeScript使用@vue/cli工具创建是选择使用ts即可。创建完的项目中会有两个ts文件。其中shims-ts.d.ts文件是jsx语法的类型补充/** * Jsx 类型声明补充 */import Vue, { VNod
2021-06-20 12:28:43
1089
原创 Vue.js 3.0 Composition APIs 及 3.0 原理剖析
Vue 3.0介绍Composition APIVue.js 3.0 响应式系统原理Vite 实现原理
2021-05-04 22:32:49
528
原创 前端组件化开发
一、前言开源组件库Element-UIiViewCDD组件优先的开发方式，组件驱动开发。自上而下从组件级别开始，到页面级别结束CDD的好处：组件在最大程度被重用并行开发可视化测试二、组件开发相关Vue知识点处理组件的边界情况$root：访问到Vue的根实例，操作根实例中的成员，可以在Vue根实例中存储共享数据，但还是推荐使用Vuex管理状态。parent/parent/parent/children：获取父组件/子组件，并操作其中成员。大多数情况下，不推荐使用。
2021-04-16 15:19:05
2284
原创 如何生成一个静态站点（Gridsome）
静态网站生成器什么是静态网站生成器静态网站生成器是使用一系列配置、模板以及数据，生成静态HTML文件及相关资源的工具。这个功能也叫预渲染生成的网站不需要类似PHP/Java这样的服务器去部署运行只需要放到支持静态资源的Web Server 或 CDN上即可运行静态网站的好处省钱：不需要专业的服务器，只要能托管静态文件的空间即可快速：不经过后端服务器的处理，只需要传输内容安全：没有后端程序的执行，自然会更安全常见的静态网站生成器Jekyll(Ruby)Hexo(Node)H
2021-04-16 10:32:15
579
原创 跟我学习搭建一个SSR
Vue SSR 介绍是什么官方文档：https://ssr.vuejs.org/Vue SSR（Vue.js Server-Side Rendering） 是 Vue.js 官方提供的一个服务端渲染（同构应用）解决方案。使用它可以构建同构应用。还是基于原有的 Vue.js 技术栈。官方文档的解释：Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出Vue组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏
2021-03-13 11:28:35
3061
原创 服务端渲染
概述随着前端技术栈和工具链的迭代成熟，前端工程化、模块化也已成为了当下的主流技术方案，在这波前端技术浪潮中，涌现了诸如 React、Vue、Angular 等基于客户端渲染的前端框架，这类框架所构建的单页应用（SPA）具有：优点：用户体验好开发效率高渲染性能好可维护性好缺点：首屏渲染时间长与传统服务端渲染直接获取服务端渲染好的 HTML 不同，单页应用使用 JavaScript 在客户端生成HTML来呈现内容，用户需要等待客户端 JS 解析执行完成才能看到页面，这就使得首屏加载时
2021-02-25 15:08:34
288
原创 Vuex 状态管理
组件内的状态管理流程Vue 最核心的两个功能：数据驱动和组件化。组件化开发给我们带来了：更快的开发效率更好的可维护性每个组件都有自己的状态/数据、视图/模板和行为/方法等组成部分。new Vue({ // state data() { return { count: 0 } }, // view template: ` <div>{{ count }}</div>
2021-02-25 15:04:24
125
原创 NuxtJS基础
NuxtJS介绍Nuxt.js是什么一个基于Vue.js生态的第三方开源服务端渲染应用框架它可以帮我们轻松的使用Vue.js技术栈构建同构应用Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置官网：https://zh.nuxtjs.org/GitHub 仓库：https://github.com/nuxt/nuxt.jsNuxt.js 框架是如何运作的Nuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用：Vue.jsVue Rout
2021-02-25 15:02:28
2345
原创 Vue源码剖析
响应式原理Vue源码获取:Vue 2.6 ： https://github.com/vuejs/vueVue 3.0：https://github.com/vuejs/vue-nextVue.js 的静态成员和实例成员初始化过程首次渲染的过程数据响应式原理虚拟 DOM模板编译和组件
2021-01-24 16:02:55
337
原创 Vue原理深度剖析
一、Vue基础语法Vue.js基础结构使用el方式：使用render函数方式：Vue生命周期Vue.js语法和概念插值表达式插值表达式相当于一个占位符，只会替换掉其中的占位置的内容。v-text只能显示Vue对象传递过来的数据，会替换掉节点里已有的内容。插值表达式和v-text不能够解析html标签，v-html能够解析html标签。结论：如果只是单独展示Vue对象里的数据，建议使用“v-text”指令。如果要同时展示用户前台数据，那么就需要用插值表达式，但是不要忘记和“v-c
2021-01-03 10:02:46
2423
3
原创 前端规范化标准
规范化是我们践行前端工程化中重要的一部分。规范化介绍为什么要有规范化标准软件开发需要多人协同不同开发者具有不同的编码习惯和喜好不同的喜好增加项目维护成本每个项目或者团队需要明确统一的标准哪里需要规范化标准代码、文档、甚至是提交日志开发过程中人为编写的成果物代码标准化规范最为重要实施规范化的方法编码前人为的标准约定通过工具实现LintESLint对TypeScript的支持ESLint结合自动化工具或者Webpack基于ESLint的衍生工具Stylelint工具的
2020-12-19 19:26:16
401
4
原创 细说前端模块化开发
一、模块化概述模块化开发是当下最重要的前端开发范式之一。随着前端应用的日益复杂，我们的项目代码已经逐渐膨胀到了不得不花大量时间去管理的程度了。模块化就是一种最主流的代码组织方式，它通过把我们的复杂代码按照功能的不同，划分为不同的模块单独维护的这种方式，去提高我们的开发效率，降低维护成本。模块化只是思想，不包含具体实现。二、模块化演变过程Stage1 - 文件划分方式具体做法：将每个功能以及它相关的一些状态数据，单独存放到不同的文件当中，我们去约定每一个文件就是一个独立的模块。我们去使用这
2020-12-19 17:13:41
5059
原创 细聊前端工程化
前端工程化概述1、工程化的定义和主要解决的问题工程化的定义前端工程化是指遵循一定的标准和规范，通过工具去提高效率，降低成本的一种手段。全副武装：通过工程化提升[战斗力]工程化出现的原因：前端应用功能要求不断提高，业务逻辑日益复杂。主要解决的问题技术是为了解决问题而存在的。想要使用ES6+新特性，但是兼容有问题想要使用Less/Sass/PostCSS增强CSS的编程性，但是运行环境不能直接支持。想要使用模块化的方式提高项目的可维护性，但运行环境不能直接支持。部署上线前需要手动压缩
2020-11-25 23:07:53
299
原创 JavaScript性能优化详解
性能优化介绍性能优化是不可避免的无处不在的前端性能优化function func(){ arr = [] arr[100000] = 'lg is a dog'}func()JavaScript语言的优化1、内存管理内存管理介绍内存：由可读写单元组成，表示一片可操作空间管理：人为的去操作一片空间的申请、使用和释放内存管理：开发者主动申请空间、使用空间、释放空间管理流程：申请-使用-释放JavaScript中的内存管理申请内存空间使用内存空间释放内存空间//申请l
2020-11-15 17:08:03
263
原创 Typescript详解
Typescript是一门基于JavaScript之上的语言，重点解决了JavaScript自由类型系统的问题。使用Typescript可以大大提高代码的可靠程度。类型系统强类型和弱类型(类型安全)强类型：语言层面限制函数的实参类型必须与形参类型相同弱类型：语言层面不会限制实参的类型由于这种强弱类型之分根本不是某一个权威机构的定义，所以导致后人对这种鉴定方式的细节，出现了不一致的理解。但整体上大家的鉴定方式都是在描述强类型有更强的类型约束，而弱类型中几乎没有什么约束。强类型语言中不允许有任
2020-11-14 11:01:41
2326
原创 ES6 新特性介绍
ECMAScript 新特性ECMAScript 与JavaScriptECMAScript 也是一门脚本语言，就是JavaScript的语言本身，通常被看作JavaScript的标准化规范，实际上JavaScript是ECMAScript的扩展语言因为ECMAScript 中只提供了最基本的语法，而JavaScript实现了ECMAScript 这种语言的标准，并且再此基础之上，做了些扩展。总之，在浏览器中的JavaScript = ECMAScript + webAPIS提供的（BOM+DO
2020-11-11 23:11:45
188
原创 JavaScript--详解异步编程
JavaScript–异步编程众所周知，目前主流的JavaScript环境都是以单线程模式去执行的JavaScript代码。JavaScript采用单线程模式工作的原因，与它的设计初衷有关。最早JavaScript这门语言是运行在浏览器端的脚本语言，目的是为了实现页面的的交互效果，页面的交互核心就是DOM操作，这就决定了它必须使用单线程模型，否则会出现很复杂的线程同步问题。单线程JS执行环境中负责执行代码的线程只有一个。同一时间，只有一个任务能运行，其他任务必须排队，容易造成阻塞。JavaScrip
2020-11-06 00:12:25
247
原创 JavaScript--详解函数
JavaScript–函数篇在JavaScript中函数就是一个普通的对象（可以通过new Function()）,我们可以把函数存储到变量/数组中，它还可以作为另外一个函数的参数和返回值，甚至我们可以在程序运行的时候通过new Function(‘alert(1)’来构造一个新的函数。...
2020-10-28 08:34:55
372
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人