大前端
文章平均质量分 96
时光海丶
这个作者很懒,什么都没留下…
展开
-
Vue.js 框架源码与进阶 - Vue.js 3.0 介绍
15.1 源码组织方式采用 TypeScript 的方式重写为了提升代码的可维护性,Vue 3.x 的源码全部采用 TypeScript 编写大型项目的开发都推荐使用类型化的语言,在编码的过程当中帮我们检查类型的问题使用 Monorepo 管理项目结构把独立的功能模块都提取到不同的包中,每个功能模块之间的划分明确,模块之间的依赖关系也明确每个功能模块都可以单独测试、单独发布以及单独使用packages 目录结构packages 目录下都是独立发行的包,可以独立使用原创 2021-03-14 18:03:06 · 1641 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - 封装 Vue.js 组件库
封装 Vue.js 组件库组件化开发基础概念处理组件的边界情况$attrs / $listeners组件化开发基础概念CDDCDD(Component-Driven Development)自上而下从组件级别开始,到页面级别结束先从相对完的的设计中抽象出来组件,先隔离开发组件然后再开发页面CDD的好处组件在最大程度被重用并行开发对单个组件的开发使用CDD可以让以页面级开发无法实现的方式在不同团队之间共享任务:开发相对隔离的组件可视化测试通过一些工具可以直接原创 2021-03-05 20:46:00 · 337 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - 搭建自己的SSR
NuxtJS案例 - Realworld项目 - 文章/发布部署Vue SSR 介绍是什么使用场景如何实现 Vue SSRVue SSR 基本使用渲染一个 Vue 实例与服务器集成使用一个页面模板在模板中使用外部数据构建同构渲染 - 构建流程构建同构渲染 - 源码结构App.vueapp.jsentry-client.jsentry-server.jsserver.jsindex.template.html构建同构渲染 - 构建配置安装依赖配置文件及打包命令启动应用解析渲染流程构建同构渲染 - 构建开发模式原创 2021-02-26 17:34:46 · 469 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - NuxtJS案例 - Realworld项目 - 文章/发布部署
NuxtJS案例 - Realworld项目 - 文章/发布部署11.5 文章11.6 发布部署11.5 文章11.6 发布部署原创 2021-01-13 22:51:40 · 459 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - NuxtJS案例 - Realworld项目 - 首页
NuxtJS案例 - Realworld项目 - 首页11.4 首页业务介绍公共文章列表列表分页-分页参数的使用列表分页-页码处理文章标签列表优化并行异步任务标签列表链接和数据导航栏-业务介绍导航栏-展示状态处理导航栏-标签高亮及链接导航栏-用户关注的文章列表统一设置用户Token文章发布时间格式化处理文章点赞11.4 首页业务介绍公共文章列表列表分页-分页参数的使用列表分页-页码处理文章标签列表优化并行异步任务标签列表链接和数据导航栏-业务介绍导航栏-展示状态处理导航栏-标签高亮及链原创 2021-01-08 20:04:05 · 345 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - NuxtJS案例 - Realworld项目 - 登录注册
NuxtJS案例 - Realworld项目 - 登录注册11.3 登录注册实现基本登录功能封装请求方法表单验证错误处理用户注册解析存储登录状态实现流程将登录状态存储到容器中登录状态持久化处理导航栏链接展示状态处理页面访问权限11.3 登录注册实现基本登录功能封装请求方法表单验证错误处理用户注册解析存储登录状态实现流程将登录状态存储到容器中登录状态持久化处理导航栏链接展示状态处理页面访问权限...原创 2021-01-05 23:15:34 · 564 阅读 · 2 评论 -
Vue.js 框架源码与进阶 - NuxtJS案例 - Realworld项目 - 项目初始化
NuxtJS案例 - Realworld项目 - 项目初始化11.1 案例介绍案例相关资源11.2 项目初始化创建项目导入样式资源配置布局组件导入登录注册页面导入剩余页面处理顶部导航链接处理导航链接高亮封装请求模块11.1 案例介绍案例相关资源GitHub仓库:https://github.com/gothinkster/realworld在线示例:https://demo.realworld.io/#/接口文档:https://github.com/gothinkster/realworld原创 2021-01-04 22:52:58 · 458 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - NuxtJS 基础
NuxtJS 基础10.1 NuxtJS 介绍NuxtJS 是什么NuxtJS 特性NuxtJS 框架是如何运作的10.2 创建项目初始化 NuxtJS案例代码分支说明10.3 NuxtJS 路由基础路由路由导航动态路由嵌套路由自定义路由配置10.4 NuxtJS 视图模板布局页面10.5 NuxtJS 异步数据asyncData上下文对象10.6 NuxtJS 生命周期10.7 NuxtJS 渲染流程10.1 NuxtJS 介绍NuxtJS 是什么官网GitHub 仓库Nuxt.js 是一个原创 2021-01-03 21:56:25 · 375 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - 服务端渲染(SSR)基础
服务端渲染基础9.1 什么是渲染9.2 传统的服务端渲染9.3 客户端渲染客户端渲染 概述为什么客户端渲染 首屏渲染慢为什么客户端渲染 不利于 SEO9.4 现代化的服务端渲染(同构渲染)现代化的服务端渲染 概述通过 Nuxt 体验 同构渲染同构渲染的 SPA 应用同构渲染问题9.1 什么是渲染渲染指的是把(数据 + 模板)拼接到一起的这个事儿。例如对于我们前端开发者来说最常见的一种场景就是:请求后端接口数据,然后将数据通过模板绑定语法绑定到页面中,最终呈现给用户。这个过程就是我们这里所指的渲染。渲原创 2021-01-02 17:15:13 · 320 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - Vuex 状态管理 - 购物车案例
Vuex 状态管理 - 购物车案例8.4 Vuex 购物车案例案例演示模板商品列表添加购物车我的购物车 - 列表我的购物车 - 统计我的购物车 - 删除购物车组件 - 购物车列表购物车组件 - 统计本地存储8.4 Vuex 购物车案例接下来我们通过一个购物车案例来演示 Vuex 在项目中的使用方式,首先把购物车的 项目模板 下载下来。案例演示模板商品列表添加购物车我的购物车 - 列表我的购物车 - 统计我的购物车 - 删除购物车组件 - 购物车列表购物车组件 - 统计本地存储原创 2020-12-31 19:22:16 · 864 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - Vuex 状态管理
Vuex 状态管理8.1 组件通信方式组件内的状态管理流程组件间通信方式父组件给子组件传值子组件给父组件传值不相关组件传值通过 ref 获取子组件简易的状态管理方案8.2 Vuex 核心概念什么是 Vuex什么情况下使用 VuexVuex 的核心概念8.3 Vuex 基本使用StateGetterMutationActionMoudule严格模式8.4 Vuex 购物车案例案例演示模板商品列表添加购物车我的购物车 - 列表我的购物车 - 统计我的购物车 - 删除购物车组件 - 购物车列表购物车组件 - 统计原创 2020-12-31 17:13:20 · 169 阅读 · 0 评论 -
【大前端03-02】Vue.js 源码分析(响应式、虚拟 DOM、模板编译和组件化)
【作业】Vue.js 源码分析(响应式、虚拟 DOM、模板编译和组件化)【简答题】一、请简述 Vue 首次渲染的过程。【简答题】二、请简述 Vue 响应式原理。【简答题】三、请简述虚拟 DOM 中 Key 的作用和好处。【简答题】四、请简述 Vue 中模板编译的过程。【简答题】一、请简述 Vue 首次渲染的过程。【简答题】二、请简述 Vue 响应式原理。【简答题】三、请简述虚拟 DOM 中 Key 的作用和好处。【简答题】四、请简述 Vue 中模板编译的过程。...原创 2020-12-19 21:59:05 · 208 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - Vue.js源码剖析 - 组件化
Vue.js源码剖析 - 组件化7.1 组件化组件注册Vue.extend调试组件注册过程组件创建过程组件的 patch 过程7.1 组件化组件化机制组件化可以让我们方便的把页面拆分成多个可重用的组件组件是独立的,系统内可重用,组件之间可以嵌套有了组件可以像搭积木一样开发网页下面我们将从源码的角度来分析 Vue 组件内部如何工作组件实例的创建过程是从上而下组件实例的挂载过程是从下而上组件注册Vue.extend调试组件注册过程组件创建过程创建根组件,首次 _render原创 2020-12-19 18:41:08 · 174 阅读 · 2 评论 -
Vue.js 框架源码与进阶 - Vue.js源码剖析 - 模板编译
响应式原理 - 模板编译和组件化6.1 模板编译6.2 模板编译过程6.1 模板编译6.2 模板编译过程原创 2020-12-18 23:43:39 · 341 阅读 · 1 评论 -
Vue.js 框架源码与进阶 - Vue.js源码剖析 - 虚拟 DOM
响应式原理 - 虚拟 DOM5.1 虚拟 DOM什么是虚拟 DOMVue.js 中的虚拟 DOM5.2 createElement5.3 update5.4 patch5.5 createElm5.6 patchVnode5.7 updateChildren5.8 总结5.1 虚拟 DOM什么是虚拟 DOM虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象来描述 DOM,虚拟 DOM 的本质就是 JavaScript 对象,使用 JavaScript 对象来描述 DOM 的结构原创 2020-12-16 20:24:26 · 161 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - Vue.js源码剖析 - 响应式原理(下)
响应式原理 - 实例方法/数据4.5 实例方法/数据vm.$setvm.$deletevm.$watch异步更新队列 nextTick()4.5 实例方法/数据vm.$setvm.$deletevm.$watch异步更新队列 nextTick()原创 2020-12-13 21:34:44 · 135 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - Vue.js源码剖析 - 响应式原理(中)
响应式原理 - 数据响应式核心4.4 数据响应式核心响应式处理入口ObserverdefineReactive依赖收集数组Watcher总结4.4 数据响应式核心响应式处理入口ObserverdefineReactive依赖收集数组Watcher总结原创 2020-12-13 14:31:26 · 226 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - Vue.js源码剖析 - 响应式原理(上)
响应式原理 - 成员初始化及首次渲染4.1 准备工作源码目录结构调试设置Vue 的不同构建版本寻找入口文件从入口开始4.2 Vue初始化初始化过程两个问题静态成员实例成员 - init实例成员 - initState4.3 Vue首次渲染首次渲染过程首次渲染总结4.1 准备工作源码目录结构调试设置Vue 的不同构建版本寻找入口文件从入口开始4.2 Vue初始化初始化过程两个问题静态成员实例成员 - init实例成员 - initState4.3 Vue首次渲染首次渲染过程首次渲原创 2020-12-11 19:32:40 · 792 阅读 · 0 评论 -
【大前端03-01】手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法
【作业】手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法【简答题】一、当我们点击按钮的时候动态给 data 增加的成员是否是响应式数据,如果不是的话,如何把新增成员设置成响应式数据,它的内部原理是什么。【简答题】二、请简述 Diff 算法的执行过程【编程题】一、模拟 VueRouter 的 hash 模式的实现,实现思路和 History 模式类似,把 URL 中的 # 后面的内容作为路由的地址,可以通过 hashchange 事件监听路由地址的变化。【编程题】二、在模拟 Vue原创 2020-11-24 19:41:34 · 305 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - Virtual DOM 的实现原理
Virtual DOM 的实现原理3.1 Virtual DOM什么是 Virtual DOM为什么使用 Virtual DOMVirtual DOM 的作用Virtual DOM 库3.2 Snabbdom 基本使用Snabbdom 创建项目导入 SnabbdomSnabbdom 使用Snabbdom 中的模块3.3 Snabbdom@0.7.4 源码解析如何学习源码Snabbdom 的核心h 函数VNode 函数Vnode 渲染成真实 DOM(Snabbdom核心)init 函数patch 函数crea原创 2020-11-22 17:40:02 · 315 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - 模拟 Vue.js 响应式原理
模拟 Vue.js 响应式原理2.1 数据驱动2.2 数据响应式的核心原理Vue 2.x - definePropertyVue 3.x - Proxy2.3 发布订阅模式和观察者模式发布/订阅模式观察者模式发布订阅/观察者模式 总结2.42.1 数据驱动在学习 Vue 的过程中,经常会看到三个词:数据响应式、双向绑定、数据驱动数据响应式数据(即数据模型)仅仅是普通的 JavaScript 对象,而当我们修改数据时,视图会进行更新,避免了繁琐的 DOM 操作,提高开发效率双向绑定数原创 2020-11-21 18:48:19 · 323 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - Vue-Router 原理实现
Vue.js 框架源码与进阶1.1Vue-Router 使用步骤1.1Vue-Router 使用步骤yarn add vue-router --devimport Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)样式案例:// router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Index fr原创 2020-11-20 16:23:11 · 454 阅读 · 0 评论 -
【大前端02-02】模块化开发与规范化标准
【作业】模块化开发与规范化标准【简答题】一、Webpack 的构建流程主要有哪些环节?如果可以请尽可能详尽的描述 Webpack 打包的整个过程。【简答题】二、Loader 和 Plugin 有哪些不同?请描述一下开发 Loader 和 Plugin 的思路。【编程题】一、使用 Webpack 实现 Vue 项目打包任务【简答题】一、Webpack 的构建流程主要有哪些环节?如果可以请尽可能详尽的描述 Webpack 打包的整个过程。【简答题】二、Loader 和 Plugin 有哪些不同?请描述一下开原创 2020-11-04 22:52:49 · 874 阅读 · 2 评论 -
前端工程化实战 - 规范化标准
前端工程化实战 - 规范化标准规范化标准概述ESLintESLint 介绍ESLint 快速上手ESLint 配置文件解析ESLint 配置注释ESLint 结合自动化工具(gulp-eslint)ESLint 结合 Webpack(eslint-loader)ESLint 检查 TypeScriptStylelintStylelint 介绍Stylelint 快速上手PrettierPrettier 介绍Prettier 快速上手ESLint 结合 Git HooksGit Hooks 介绍Git Hoo原创 2020-11-03 23:13:02 · 262 阅读 · 0 评论 -
前端工程化实战 - Rollup、Parcel 打包
前端工程化实战 - Rollup、Parcel 打包原创 2020-11-02 13:57:46 · 589 阅读 · 2 评论 -
前端工程化实战 - Webpack 打包
前端工程化实战 - Webpack 打包原创 2020-10-31 20:55:46 · 715 阅读 · 2 评论 -
前端工程化实战 - 模块化开发
前端工程化实战 - 模块化开发4.1模块化开发概述4.2模块化演变过程4.3模块化规范的出现4.1模块化开发概述模块化可以说是最重要的前端开发范式之一。随着前端应用的日益复杂,我们的项目代码已经逐渐膨胀到了不得不花大量时间管理的程度了。而模块化就是一种最主流的代码组织方式,它通过把复杂代码按照功能的不同,划分为不同的模块单独维护的这种方式提高我们的开发效率,降低维护成本。但就模块化这个词而言,它仅仅是一种思想或者说是一种理论,并不包含具体实现。早期的前端技术标准根本没有预料到前端行业会有今天这样一原创 2020-10-23 20:03:18 · 530 阅读 · 0 评论 -
前端工程化实战 - 自动化构建
前端工程化实战 -自动化构建3.1自动化构建概述3.1自动化构建概述原创 2020-10-20 23:31:11 · 239 阅读 · 2 评论 -
【大前端02-01】开发脚手架及封装自动化构建工作流
【作业】开发脚手架及封装自动化构建工作流【简答题】一、谈谈你对工程化的初步认识,结合你之前遇到过的问题说出三个以上工程化能够解决问题或者带来的价值。【简答题】二、你认为脚手架除了为我们创建项目结构,还有什么更深的意义?【编程题】一、概述脚手架实现的过程,并使用 NodeJS 完成一个自定义的小型脚手架工具【编程题】二、尝试使用 Gulp 完成项目的自动化构建【编程题】三、使用 Grunt 完成项目的自动化构建【简答题】一、谈谈你对工程化的初步认识,结合你之前遇到过的问题说出三个以上工程化能够解决问题或者带原创 2020-10-20 10:33:52 · 304 阅读 · 0 评论 -
前端工程化实战 - 脚手架工具
前端工程化实战 - 脚手架工具2.1脚手架工具概要2.2常用的脚手架工具2.3YeomanYeoman 基础使用Sub Generator2.1脚手架工具概要脚手架工具的本质作用:创建项目基础结构、提供项目规范和约定通常我们再去开发相同类型的项目时都会有一些相同的约定,其中包括:相同的组织结构相同的开发范式相同的模块依赖相同的工具配置相同的基础代码这样一来,就会出现,当我们去搭建新项目时有大量的重复工作要做,脚手架工具就是去用来解决这一问题的。我们可以通过脚手架工具去快速搭建特定类型的原创 2020-10-17 21:27:04 · 595 阅读 · 3 评论 -
前端工程化实战 - 工程化概述
前端工程化实战 - 工程化概述1.1 工程化的定义和主要解决的问题1.2 一个项目过程中工程化的表现1.3工程化不等于工具1.4 工程化与Node.js1.1 工程化的定义和主要解决的问题前端工程化是指遵循一定的标准和规范,通过工具提高效率降低成本的一种手段。近些年之所以被广泛的关注和探讨是由于前端应用的功能要求不断提高,业务逻辑日益复杂。从传统的网站到现在的H5、移动APP、桌面应用,以及小程序,前端技术几乎是无所不能的全面覆盖。在这些表象的背后实际上是前端行业对我们开发人员的要求发生了天翻地覆的变原创 2020-10-14 20:40:14 · 642 阅读 · 1 评论 -
JavaScript 深度剖析 - JavaScript 性能优化
JavaScript 深度剖析 - JavaScript 性能优化性能优化介绍JavaScript 内存管理(Memory Management)垃圾回收与常见的GC算法JavaScript 中的垃圾回收GC算法引用计数算法标记清除算法标记整理算法V8引擎的垃圾回收V8 垃圾回收策略V8 如何回收新生代对象V8 如何回收老生代对象Performance工具代码优化实例性能优化介绍性能优化是不可避免的任何一种可以提高运行效率,降低运行开销的行为都可以看做是一种优化操作无处不在的前端性能优化请求资原创 2020-10-10 22:13:13 · 459 阅读 · 1 评论 -
【大前端01-02】ES新特性与TypeScript、JS性能优化
【作业】ES新特性与TypeScript、JS性能优化【简答题】一、请说出下列最终的执行结果,并解释为什么。【简答题】二、请说出下列最终的执行结果,并解释为什么。【简答题】三、结合ES6新语法,用最简单的方法找出数组中的最小值。【简答题】四、请详细说明var,let,const三种声明变量的方式之间的具体差别。【简答题】五、请说出下列代码最终输出的结果,并解释为什么。【简答题】六、简述symbol类型的用途。【简答题】七、说说什么是浅拷贝、什么是深拷贝?【简答题】八、请简述TypeScript与JavaSc原创 2020-10-10 16:56:19 · 256 阅读 · 0 评论 -
JavaScript 深度剖析 - TypeScript 语言
JavaScript 深度剖析 - TypeScript 语言类型系统强类型与弱类型静态类型与动态类型JavaScript类型系统特征弱类型的问题强类型的优势静态类型检查器 FlowFlow概论Flow快速上手Flow编译移除注释Flow开发工具插件Flow类型推断Flow类型注解Flow原始类型类型系统强类型与弱类型类型安全的角度静态类型与动态类型JavaScript类型系统特征弱类型的问题因为弱类型的关系程序中的类型异常需要等到运行时才能发现类型不明确,就会造成函数功能有可能原创 2020-10-08 22:41:41 · 472 阅读 · 1 评论 -
JavaScript 深度剖析 - ECMAScript 新特性
JavaScript 深度剖析 - ECMAScript 新特性ECMAScript与javaScriptECMAScript2015的新特性let 与块级作用域const解构数组的解构对象的解构模板字符串字面量模板字符串标签数组字符串的扩展方法参数默认值剩余参数展开数组箭头函数对象字面量增强对象扩展方法Object.assignObject.isECMAScript与javaScript实际上javaScript是ECMAScript的扩展语言ECMAScript只提供了最基本的语法解决原有原创 2020-10-02 21:07:38 · 169 阅读 · 0 评论 -
【大前端01-01】函数式编程与JS异步编程、手写Promise
【作业】函数式编程与JS异步编程、手写Promise简答题一、谈谈你是如何理解JS异步编程的,EventLoop、消息队列都是做什么的,什么是宏任务、什么是微任务?如何理解JS异步编程EventLoop是做什么的消息队列是做什么的什么是宏任务什么是微任务代码题一、将下面异步代码使用Promise的方式改进二、基于以下代码完成下面的四个练习练习1:使用函数组合fp.flowRight()重新实现下面这个函数练习2:使用fp.flowRight()\fp.prop()和fp.first()获取第一个car的na原创 2020-09-25 19:07:25 · 301 阅读 · 0 评论 -
JavaScript 深度剖析 - JavaScript 异步编程
JavaScript 异步编程2.1异步编程概述2.2同步模式/异步模式同步模式异步模式2.3回调函数2.4Promise (一种更优的异步编程统一方案)概述常见误区链式调用异常处理静态方法Promise.resoler()Promise.reject()并行执行Promise.all()Promise.race()执行时序Promise异步执行顺序的特殊处微任务的目的:提高整体的响应能力2.5Generator为什么要引入Generator概念总结2.1异步编程概述2.2同步模式/异步模式同步模式原创 2020-09-25 17:21:09 · 218 阅读 · 0 评论 -
JavaScript 深度剖析 - 函数式编程范式
函数式编程范式1.1函数式编程概念1.2函数是一等公民1.3高阶函数1.5柯里化(Haskell Brooks Curry)1.6函数组合(compose)1.7Lodash中的fp模块1.8Point Free模式1.9Functor(函子)MayBe函子Either函子IO函子Task函子Pointed函子Monad(单子)总结1.1函数式编程概念1.2函数是一等公民1.3高阶函数1.5柯里化(Haskell Brooks Curry)1.6函数组合(compose)1.7Lodash中的f原创 2020-09-25 16:05:10 · 3064 阅读 · 0 评论