从 0 开始实现一个「学院派」微前端方案

发表于 ，标签： 微前端 架构

前言 2016 年 11 月，ThoughtWorks 在技术雷达（Technology Radar）中首次提出了微前端（Micro Frontends）的概念，将后端微服务化的思想引入前端。此后，在前端社区中，出现了很多优秀的开源解决方案，例如 SingleSPA、Qiankun、IceStark 等。 微前端的实施方式有很多种，具体可以参考 Phodal 的文章。关于这些实现方式和微前端诞生的意义、解决的业务痛点，在这里就不再赘述了。 本文将以一个在校大学生的视角，基于我在学校社团里为数不多的中后台开发实战经验，从 0 开始实现一个「学院派」微前端方案，抛砖引玉地提供我对于微前端技术落地的思考和思路。 设计思路和实现 从目前开源社区的现状来看，SingleSPA 是一个发展历史比较悠久的微前端解决方案，拥有完善的社区支持和维护力量。 SingleSPA 架构中有主应用和子应用两种角色，主应用作为应用的框架运行时环境，动态地配置子应用，通过监听全局路由事件完成子应用的加载、卸载以及其他生命周期的管理。在子应用被挂载完成后，路由便由被挂载的子应用接管。…

构建规范的前端工作流与生态体系

发表于 ，标签： 技术思考 前端 团队协作

一个前端项目，可以只由一个人来完成。那么这时，这一个人就是整个前端团队的规范，而规范的制定则显得无关紧要。但现实往往并非如此。一个成熟的线上项目中往往需要一个前端团队完成技术选型、需求分析、开发、测试、集成、部署等流程。而一个好的前端团队，其强大不仅体现在对技术的使用上，同时也体现在是否有一套完备的工作流（Work Flow）用于规范在团队协作中的个人行为和团队宏观行为，以及一套基础设施用于支撑工作流和业务属性。 这篇文章是在笔者观察到工作室中存在的一些问题后针对这些问题提出的解决方案、参与构建的基础设施项目以及对工作室未来基础设施添加的构想的一次记录。 存在的问题 笔者在三年前加入了工作室，工作室的前端技术栈在当时其实是很先进的。然而，当笔者真正接手项目时，却发现工作室在团队协作和工作规范方面的问题其实比较大。单从前端方面来说，存在问题包括但不限于： 量身定制的脚手架 在工作室的前端项目中，我们通常都是使用特定的脚手架生成项目目录结构。例如，Vue 项目使用 Vue CLI，React 项目使用 Create React App，而有的项目则是由前端自主配置 Webpack 等构建工具。 这样做虽然都能达到工程化开发并上线的结果，但与此同时它带来的问题也是显而易见的：即使目前各大框架官方的脚手架已经十分先进了，但是它们并不能保证符合每个项目的业务属性。也就是说，…

2019 年度总结

发表于 ，标签： 年度总结

现在，2020 年也快过去四分之一了。按照惯例，每年的一月或者二月就该写一篇年度总结了。然而，2020 年一开始确实发生了很多事情，因此一直拖到现在。索性就把 2019 全年和 2020 前三个月的感想一同写进这篇文章里吧。 我是从 2017 年开始写年度总结的，也就是说，我每写一篇年度总结，就意味着我离毕业的那一年又近了一年。这是我的第三篇年度总结，距离我毕业还有一年多的时间了。作为从进入大学开始就盼着早点毕业出去工作的我，当然非常开心。但同时，也有一丝丝的焦虑。 总的来说，我的 2019 年，是一个被不安和躁动充斥着的一年。 回顾 技术 学习和沉淀 从接触到前端开始，我就一直没有停下学习的脚步。当然，学了这么久的前端，我自己感觉我的水平似乎依然在原地踏步走。虽然做了很多项目，但是我总觉得我的基础似乎不那么扎实。与此同时，我发现了一个比较令我担忧的问题：这一年我似乎很少写文章了。要说形成写文章的习惯，还要感谢子健学长当年的引导。这的确是一个非常好的习惯，但在 2019 年却出现了断层的迹象。…

Promise/A+ 规范：诞生与原理初探

发表于 ，标签： Javascript 异步 ECMAScript 6/7/8

在 Philip Roberts 眼中，JavaScript 是一门单线程、异步、非阻塞、解释型脚本语言。我们在享受 JavaScript 异步编程带来的便捷的同时，也在为如何处理异步（或处理异步带来的冗杂的代码）而苦恼。但是，作为一门富有活力的编程语言，JavaScript 也在不断地完善自己的标准与规范，为众多 JavaScript 开发者解决这些苦恼。当我们在谈论如何处理异步时，我们可能会立刻想起回调函数（Callback Functions）。我们可以通过这种神奇的机制完成对每一个异步操作结果的处理。然而，随着我们的代码越来越复杂，异步操作也越来越多，而原始的回调方式暴露出的问题也越来越明显。 好在，Promise 的到来为我们解决了一部分问题。那么究竟是什么使 Promise 具有如此魅力，使得它一度被称为“下一代”异步编程方案呢？我们将在本文中从源码和底层原理层面探讨这些问题。在阅读这篇文章前，我们需要掌握以下内容： JavaScript 事件循环机制 异步编程的基本概念 JavaScript 中回调函数的概念 Promise 规范以及基本使用方式…

面向对象的 JavaScript：封装、继承与多态

发表于 ，标签： Javascript

在现代编程语言中，我们经常提及面向对象编程（Object-Oriented Programming，OOP）。所谓的面向对象，其实是一种具有对象概念的程序编程典范，同时也是一种程序开发的抽象方针。与函数式编程（Functional Programming，FP）不同，面向对象编程希望把所有的事物都认为是一个对象，而对象可以通过实例化一个类或继承一个对象而获得（函数式编程认为一切皆函数，一个确定的输入对应一个确定的输出，并且不会产生副作用）。 面向对象通常可以采用两种方式实现：prototype 或 class。JavaScript 中对象的实现显然属于前者，而后者的代表性语言有 Java、C++、TypeScript（TypeScript 同时支持这两种方式） 等。 本篇文章将会简单地梳理 JavaScript 中的相关问题。读完本文，您应该能了解到包括但不限于以下内容：类与对象、对象创建的几种模式、对象继承的几种模式、对象方法的重写和重载在 JavaScript 中的实现。 前置知识 如何理解类和对象 类是一类事物的抽象概括，它可能包含数据的类型和对数据的处理方法。对象是某个类的实例化。一个生动的例子也许可以帮助我们加深对它们的理解：生物学家会将地球上的生物划分为界、门、…

异步的 JavaScript：浅析浏览器事件循环

发表于 ，标签： 事件循环 Javascript 异步

JavaScript 采用严格单线程的工作方式。这意味着 JavaScript 没有创建多个子线程进行异步任务的功能。但事实往往并非如此简单。在使用 JavaScript 开发时，我们也许会发现 JavaScript 的确能够实现异步。这背后的原因，与 JavaScript 采用的事件处理机制有关。这种机制被称为“事件循环”。在详尽阐释事件循环是什么之前，笔者希望您明白为什么 JavaScript 要采用单线程工作。 我们为何需要理解浏览器事件循环 浏览器事件循环是非常底层的知识。尽管我们在工作中并不是必须了解它。但是，要知道 JavaScript 是一种以事件驱动的语言——如果观察仔细的话，您一定能在您的代码中发现事件处理程序的存在，无论您是有意识地还是无意识地。因此，理解浏览器事件循环的工作原理似乎就显得十分必要，因为只有了解浏览器如何处理各种事件和任务，我们才能更好、更完美地使用事件驱动的方式编写更高质量的代码。 JavaScript 为何采用单线程 自互联网被发明以来，随着逐年增加的互联网用户的涌入，单纯的 HTML 和 CSS 已经无法满足用户日益复杂的需求。因此，当年的网景公司（Netscape Communications…

基于 Webpack 4 多入口生成模板用于服务端渲染的方案及实战

发表于 ，标签： Webpack 服务端渲染

法律声明 警告：本作品遵循 署名-非商业性使用-禁止演绎3.0 未本地化版本（CC BY-NC-ND 3.0） 协议发布。你应该明白与本文有关的一切行为都应该遵循此协议。 这是什么？ 背景 现代化的前端项目中很多都使用了客户端渲染（Client-side Rendering, CSR）的单页面应用（Single Page Application, SPA）。在大多数情况下，它们都应该通过加载 JavaScript 脚本在浏览器中执行以将页面的大部分视图渲染出来，以及获取页面所需要的数据。单页面应用有着许多非常显著的优势，如它们（单页面应用）依赖的公共资源通常仅需加载一次。数据都是通过异步的 JavaScript 与 XML 技术（Asynchoronous JavaScript and XML, Ajax）加载的，异步性能往往非常高。在路由切换时，仅需刷新和（或）更改页面的一部分，而不需要重新加载整个页面以达到切换路由的目的，因此路由的切换在单页面应用中显得比较流畅自然。…

2018年度总结

发表于 ，标签： 年度总结

今天是2019年1月24日，离2018年最后一天也已经过去将近一个月了。之所以现在才开始写年度总结，是因为这个学期期末考试开始得很早，我从18年年底就在复习功课。因此我在期末考试完后的现在完成过去一年的总结。 关于技术 个人感觉，在技术方面，2018年的成长是自学能力的提升。 去年的这个时候，我还是处于对新知识有些畏惧的状态，可以说对新知识或新技术有比较明显的抵触情绪。后来我才渐渐明白，这种情绪的根源是对自己技术的不自信和不认可。所以在过去的2018年，我几乎时时刻刻都在提醒自己不要有这样的想法，并积极接触并掌握了许多很新的技术。下面我想记录一下今年学会的技术 React Native 说到React Native（以下简称“RN”），这是一个非常神奇的框架，能帮助我们通过编写Javascript代码，编译成Android和iOS多端复用的原生代码，对于小公司或者小项目来说非常高效。不过初次接触RN时之前并没有学习过React.js的语法，所以刚起步时可以说是困难重重，后来听一位学长说起RN这个框架，说可以用“React.js一步一个坑，React Native是半步一个坑”来形容这个框架。不过幸好当时没有放弃，最终我对于RN的熟悉程度已经可以赶超Vue.js了。在暑假的时候我使用RN独立自主完成了两个APP项目。 Angular 学习Angular（以下简称“ng”）主要是社团的主要产品重新选型，选择了Angular为重构新版本的框架，前端UI库依旧是Bootstrap。…