- 博客(50)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 vue编译过程分析
前言先正式讲解之前先看一张来自Vue官网的实例生命周期图。由图中可知,当我们实例化一个Vue对象并完成初始化后,Vue会检查el和template属性,以获取模板字符串。然后将得到的模...
2020-10-20 08:00:00
1695
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 Vue执行流程解析
引言相信绝大多数的前端小伙伴已记不清做了多少项目,写了多少代码了,每个人如同教科书般地写着Vue代码:// 单文件组件中常见代码export default { data () {...
2020-08-13 19:57:01
1318
原创 谈谈对vitejs预构建的理解
vite在官网介绍中,第一条就提到的特性就是自己的本地冷启动极快。这主要是得益于它在本地服务启动的时候做了预构建。出于好奇,抽时间了解了下vite在预构建部分的主要实现思路,分享出来供大家参考。为啥要预构建简单来讲就是为了提高本地开发服务器的冷启动速度。按照vite的说法,当冷启动开发服务器时,基于打包器的方式启动必须优先抓取并构建你的整个应用,然后才能提供服务。随着应用...
2022-03-24 19:15:00
1249
1
原创 前端应该了解的直播知识
背景在移动互联网时代,涌现了一大波视频直播平台,例如以淘宝、京东为代表的电商直播,以抖音、快手为代表的娱乐互动直播,以斗鱼、YY为代表的游戏直播,以猿辅导、作业帮为代表的教育直播……无论是...
2021-07-06 08:00:00
982
原创 一文弄懂JS模块、模块格式,模块加载器和模块打包器
前言目前现代化的JS开发方式大行其道。撸代码时,你可能也会不理解为啥要使用这些繁复的现代化工具。接下来我们就来一起学习下js模块、模块化解决方案、模块加载器和模块打包器的区别。本文的主要...
2021-01-15 08:00:00
451
原创 如何删除镜像、容器和数据卷?几个值得掌握的docker命令
前言在docker的实践过程中,如果没有注意docker对磁盘的占用,在某一天你可能发现磁盘空间已经被docker一点点吃掉了。那么今天给大家介绍几个清理docker镜像、容器和数据卷的...
2021-01-06 19:00:00
1146
2
原创 图解HTTPS数字签名
前言近期在查阅HTTP相关的资料时,发现了几篇不错的文章,对于我们理解HTTP/HTTPS很有帮助。接下来几周会陆续发布。今天带给大家的是一篇有故事情节的小短文,文中通俗易懂地介绍了数字...
2020-12-26 16:35:04
310
原创 深入理解vue响应式原理
非侵入性的响应式系统是vue最独特的特性之一。作为一个基于MVVM的前端框架,vue的数据模型只是一个普通的 js 对象。当我们修改数据对象时,视图会进行更新。习惯了响应式系统带给我们的...
2020-12-10 19:00:00
297
原创 深入理解Vue实例生命周期
vue实例生命周期与生命周期钩子每个 Vue 实例在被创建时都会经过一系列的初始化过程。例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。为了让...
2020-12-07 08:00:00
245
原创 keep-alive是如何保持组件状态的
keep-alive的设计初衷有些业务场景需要根据不同的判断条件,动态地在多个组件之间切换。频繁的组件切换会导致组件反复渲染,如果组件包含有大量的逻辑和dom节点,极易造成性能问题。其次...
2020-12-01 19:00:00
179
原创 vue组件实现原理解析
组件机制的设计,可以让开发者把一个复杂的应用分割成一个个功能独立组件,降低开发的难度的同时,也提供了极好的复用性和可维护性。本文我们一起从源码的角度,了解一下组件的底层实现原理。组件注册...
2020-11-07 18:00:00
1113
原创 vue渲染过程解析-VDOM &DOM
前言从上篇文章《vue编译过程分析》中,我们了解到HTML模板经过编译,最终会生成一个render函数。render函数的主要功能是生成vnode。在vue的渲染过程中总共涉及两大工作:...
2020-11-02 08:00:00
250
原创 开篇:到底什么是前端工程化?
前端工程化是现代前端的必备技能Web 前端这几年进化速度之快让人咂舌。很多前端工程师都不禁吐槽“学不动了”。如今已经不是 HTML、CSS、JS 前端三剑客仗剑走天下的时代了。以笔者的亲身经历举例。笔者在 2011 年左右进入前端这个行业。当时工作的主要内容是,将设计稿切图转成静态页面,然后用 jQuery 插件实现一些页面的轮播图、跑马灯等交互效果。最后使用后端的模板语言如 smart、ve...
2020-09-22 12:01:04
239
原创 第 01 课:模板功能设计
1 项目模板我们的项目框架都是基于项目模板生成的。学过 JS 的知道:function Person(name = 'ant') { this.name = name;}let man = new Person();这里 Person 是 man 的原型对象。同样项目模板相当于对象 Person,具体的项目相当于 man。通过项目模板,我们可以事先将项目所需要的功能点定义好,...
2020-09-22 12:01:02
218
原创 第 02 课:Webpack 基本介绍
1 Webpack 的特点图片来源于网络Webpack 是一款强大的打包工具。在 Webpack 中一切皆模块。Webpack 官网的 banner 图完美地诠释了这一理念。Webpack 从一个入口文件开始递归地分析模块的依赖关系,根据依赖关系将这些模块打包成一个或多个文件。目前几乎所有的前端构建和开发都是采用 Webpack 。因为 Webpack 有强大的社区生态,每月 Webpac...
2020-09-22 12:01:01
110
原创 第 03 课:搭建项目模板框架
因为我们的脚手架是基于 Vue 开发框架的,所以本节课程中,我们将以 Vue 为基础来搭建起来我们的项目框架。使用 React、Angular 的读者可以对应替换调整。项目初始化创建项目目录,并执行 npm 初始化:mkdir vueTpl & npm init -y创建了项目模板目录 vueTpl,在目录下有一个 npm 的配置文件 package.json,其内容如下:{...
2020-09-22 12:00:59
241
原创 第 04 课:前端模块化解决方案
1 模块化出现的背景(图片来源于网络)在 Web 发展的早期,前端还没有作为一个单独的工种分离出来,JavaScript 的作用也只是在 HTML 上 用来实现简单的表单验证,到后来无非实现一些轮播图等简单的视觉效果。一句话来讲,很长时间以来我们的前端很简单,JS 代码也很少。随着 Web 的发展,Web 应用越来越复杂,诸如淘宝、京东、美团等 Web 应用,其复杂度是极高的。前端的交互、...
2020-09-22 12:00:58
111
原创 第 05 课:搭建本地开发环境
背景在前面的课程中,我们已经完成了项目模板的整体框架了,但是在开发过程中还有很多地方需要补充和完善以提高开发效率。比如:手动执行构建。每次代码发生变动后,我们都需要手动执行以下构建命令。手动刷新浏览器。构建完成后,如果我们需要在页面中验证效果,需要手动刷新。无法精确定位错误。代码构建完成后,源代码被打包成一个 bundle,如果代码中出错,无法精确定位到出错代码的位置。自动构建每次...
2020-09-22 12:00:56
112
原创 第 06 课:搭建本地 Mock 服务
背景前后端分离的协作模式下,前后端之间的数据传输都是基于 HTTP 接口实现。显然前端的开发是依赖后端接口实现的。在讲求快速迭代的互联网公司这种串行的等待肯定是不会出现的。前后端约定好接口的出参和入参之后,前端数据模拟(mock)就很有必要了。前端基于接口文档自己模拟一份假数据作为前端的数据源。后端按照约定的文档实现接口功能。待接口完全实现之后,前后端切换到真实的接口进行联调。显然,mock 对...
2020-09-22 12:00:55
251
原创 第 07 课:引入代码检查工具
背景在多人或者团队共同开发一个项目的时候,由于每个人的习惯和能力不同,产出的代码可能风格各异,日积月累整个工程的代码乱作一团,可维护性很差。因此需要共同遵守一定的代码书写规范,来提高工程的可维护性。对于规范我们不能寄希望于大家自觉遵守,因为每个人都可能由于各种原因导致代码规范最终无法落地执行。作为提供给整个团队使用的项目模板,我们希望通过从工具层面强制大家按照统一的规范去编码。本节课程将介绍如...
2020-09-22 12:00:53
114
原创 第 08 课:自动生成雪碧图
背景在开发过程中,可能存在大量的小图片和小图标,虽然每张图的尺寸不大,但每次都需要发起一次 HTTP 请求,从性能优化的角度来说是不合理的。常见的做法是我们将多个小图片拼成一张大图(前端界叫做雪碧图或 CSS Sprite),然后通过 CSS 的 background-position 来控制图片的展示,这样可以极大减少 HTTP 请求次数。我们可以手动拼装雪碧图,但这样效率实在太低。本节课程将...
2020-09-22 12:00:52
660
原创 第 09 课:根据浏览器构建
背景在 Babel 等转译工具的帮助下,我们可以在项目中使用所有的 ES6+ 的语言特性,但是我们最终交付的代码仍旧需要转译成 ES5 代码以兼容旧浏览器。现在所有的现代浏览器都已经很好地支持了 ES6+ 的语言特性,为了那很小的一部分旧浏览器,我们却不得不强迫所有的现代浏览器运行转译后的冗长、执行效率低下的 ES5 代码。为了更好的用户体验,作为开发者我们有责任去解决这个问题。1 特性检查...
2020-09-22 12:00:50
45
原创 第 10 课:根据环境构建
背景开发环境和生产环境的构建目标差异很大。在开发环境中,我们需要考虑更多的是开发和调试的便利性。比如开发环节我们需要一个本地服务器来承载我们的页面和资源,最好可以做到修改代码,实时看到页面刷新。当然如果有热加载的功能,代码改动页面局部刷新就更完美了。当我们调试代码的时候,我们希望调试器能方便地定位到源代码所在的行列号,而不是定位到已被压缩工具处理的面目全非的代码行列号。生产环境中,我们考虑更...
2020-09-22 12:00:48
74
原创 第 11 课:集成移动端调试工具
背景随着移动互联网的普及,Web 前端开发者的工作发生了根本的变化,开发的东西基本上以纯移动端页面、微信生态的 H5、APP 混合的 H5 页面为主。在 PC 时代给开发者带来巨大帮助的调试工具,如 Chrome 的调试器、火狐的调试器,在移动互联时代有点力不从心了。为了与移动 Web 开发相配套,移动端的调试工具是开发者最渴望拥有的武器。远程调试工具从移动端的 Web 开发诞生至今,也相继...
2020-09-22 12:00:46
99
原创 第 12 课:引入单元测试
背景长期以来,单元测试在前端开发的普及度并不高,大多数的前端工程师并没有注意和重视。但是随着前端应用的复杂化,以及模块之间高内聚低耦合的诉求,单元测试在前端应用中显得很有必要。良好的单元测试在保证工程的质量和可维护性的同时,还可以起到项目文档的作用。本文我们一起学习下如何在 Vue 的前端工程中进行单元测试。读者在跟随本文进行代码实操之前,先将代码从 GitHub 上下载下来熟悉一下目录结构,...
2020-09-22 12:00:45
97
原创 第 13 课:引入 e2e 测试
背景e2e(end to end)测试也叫功能测试,属于黑盒测试。与单元测试不同,e2e 测试是站在用户的角度上,通过编写测试用例模拟用户的操作。例如自动打开浏览器,测试 dom 元素是否正常渲染,页面是否正常跳转,Ajax 请求是否符合预期。e2e 测试的关注点是功能是否可用,不关注代码细节,开发者可以改变代码的实现方式,用在代码重构后的功能验证非常合适。本篇将带领大家在前端 Vue 项目中...
2020-09-22 12:00:43
378
原创 第 14 课:Webpack 构建性能优化
背景应用越复杂,代码量越大,编译的时候所耗费的时间也是越长。在开发阶段,如果编译时间太长,一个小小的变动都要等待很长时间,开发效率非常低。在我们的搭建脚手架的过程中,虽然代码量还不是太大,但也能看到热替换的时候,速度就非常慢。本节我们一起优化 Webpack 的构建性能,提升一下开发体验。使用缓存Webpack 的 cache 配置开启 cache 的情况下,Webpack 会缓存模块和生...
2020-09-22 12:00:41
81
原创 第 15 课:添加部署功能
背景代码开发完之后,剩下的最后一步就是将代码部署到服务器了。前后端分离的情况下,前端独立进行发布。为了避免手动通过 FTP 上传前端资源,我们介绍一下两种方式,自动化地完成前端资源的发布。1 部署到 ECS1.1 scp 命令实现前端部署现在很多公司都在使用云服务器,比如阿里云的 ECS。ECS 类似于咱们普通的服务器,如果你除了单纯存放前端的静态资源之外,还需要使用 Node.js 对后...
2020-09-22 12:00:39
174
原创 第 16 课:聚合项目配置并模板化
背景通过前面的学习,我们的项目模板功能已经完成了。剩下的工作还有两点。第一,将一些用户在开发中需要频繁改动的地方抽离出来,聚合到配置文件中;第二,使用 handlebars 改写项目模板。抽离配置项我们在根目录下新建一个配置文件 app.config.js,来聚合用户自定义的配置项:module.exports = { // 配置dll入口 dllEntry: {}, // ...
2020-09-22 12:00:38
152
原创 第 17 课:cli 功能设计(上)
背景相信前端小伙伴们都使用过诸如 vue-cli,create-react-app 等命令行工具。经过前面课程的学习,已经完成了项目模板的搭建,我们实现脚手架工具的第一步已经完成。接下来我们来实现一个 cli 命令,通过 cli 命令快速实现项目的初始化。命令行工作流程我们给命令行工具命名为 kgt-cli,下图是 kgt-cli 的工作流程图:用户在终端中运行 kgt init te...
2020-09-22 12:00:36
169
原创 第 18 课:cli 功能设计(下)
背景上一节课程,我们完成了命令行工具的初始化,并介绍了 kgt-cli 的工作流程。本节课我们重点来讲解下载、模板渲染等功能的实现。kgt-init判断用户指定的项目生成目录是否为当前目录或该目录已经存在。如果是,执行 5,否则执行 2。执行 run 方法,判断用户指定的模板是否为本地模板。如果是,执行 3,否则执行 4。执行 generate 方法创建项目。执行 download...
2020-09-22 12:00:34
142
原创 结语:开放的心态才是更高阶的工程化
写作心路历程从 2019 年 1 月 22 日到 2019 年 7 月 30 日,历经半年的时间,终于完成了《透视前端工程化》课程的写作。从零开始完成一个脚手架的搭建,对于我来讲可能算不上一件困难的事,但是把这个实现过程总结成课程,去教会更多的人却对我来说是一个极大的挑战。这也再次证明了,当学生比当老师容易,当球员比当教练容易。大纲的编写相当于提前将课程的内容规划好了。但是从课程大纲的确定到课...
2020-09-22 12:00:32
58
原创 HTTP 服务器消息推送之SSE
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形...
2020-07-23 19:00:00
1834
原创 总结-使用CORS解决跨域问题
对前端来说跨域应该是不陌生的,解决跨域的方案有很多种。而我司前端接口调用也正是CORS的方式,所以难免在联调阶段会遇见一些CORS跨域的问题,下面通过一个简单的demo验证一下CORS解...
2020-07-20 19:40:32
3229
原创 在知识的海洋狗刨,使用canvas绘制标签
下面总结了一些canvas绘制标签的心得体会,希望能够对你有所帮助。绘制圆弧<canvas id="canvas" width="300" heig...
2020-07-09 19:00:00
172
原创 不走寻常路,CSS垂直居中的另类实现
前言众所周知,“css如何实现元素垂直居中?”已经是一个老生常谈的问题了,这个问题目前已经有了许多解决方案,这些方案也都有各自适用的场景以及优缺点,大致如下:flex布局grid布局ta...
2020-07-02 19:00:00
112
转载 前端获取微信头像 base64 数据的踩坑实践
团队招聘正文开始前,插播一则招聘信息。欢迎感兴趣的同学投递简历。岗位职责:负责快狗打车产品相关前端开发工作通过技术提高FE团队整体效率任职要求:本科及以上学历3年以上前端开发经验,负责过...
2020-06-18 20:56:20
1146
原创 如何让你的JavaScript代码更优雅
写了好多年的JavaScript代码,你的代码是不是可以更加优雅?下面整理了一些优化代码的建议,大家可以酌情做一下参考,希望能给到大家一些帮助。1.推荐使用全等和不全等操作符ECMASc...
2020-06-11 19:00:00
175
原创 vue路由hash模式引发的血案
背景路径1:https://xxxxx.djtest.cn/driver-register/index.html?hmsr=qqqqq#/register路径2:https://xxxx...
2020-06-05 18:52:30
2017
2
原创 【建议收藏】你不知道的css技巧
下面总结了一些常用又有趣的css技巧,希望大家收藏,以减少查资料的时间。三角形最常见的一种形状了。切图,不存在的。/** 正三角 */.triangle { width: 0; ...
2020-06-01 08:00:00
163
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人