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