一、什么是微前端?

微前端的概念由我司(ThoughtWorks)在2016年十一月份的技术雷达中被列为组织应评估的技术,后来又被提升为试用版,最后将其推广到 Adopt 中。

微前端是一种类似于微服务的架构。它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应用转变为把多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发,独立部署,这样我们也就实现了应用的自治。而划分的团队之间也可以自治,独立定义自己的命名规则、代码规范、技术栈、开发流程等。

阅读更多

一、与浏览器中事件循环机制的差异

前面我们对浏览器中的事件循环机制有了一些了解,那 Node 环境下事件循环机制是否也是一致的呢?看段代码:

setTimeout(() => {
  console.log('timer1');

  Promise.resolve().then(function () {
    console.log('promise1');
  });
}, 0);

setTimeout(() => {
  console.log('timer2');

  Promise.resolve().then(function () {
    console.log('promise2');
  });
}, 0);
阅读更多

在看 Event loop 的时候,我发现相关的文章有很多,但是有的文章写得零碎,有的文章只讲解了浏览器或者 Node 环境之一的事件循环,这两者如果没有对比起来理解的话,总是觉得比较模糊。所以在读了很多文章之后,整理出来本文,本篇文章为《浏览器中的事件循环》,下一篇为《Node.JS中的事件循环》,二者对比起来理解会更好。

一、单线程和异步

提到 JavaScript ,就会想到它的 单线程异步 两大特性。那么在 JavaScript 中单线程是如何做到异步的呢?我们先了解一下单线程和异步之间的关系。

JavaScript 中的任务分为 同步异步 两种,它们的处理方式存在很大的不同。

1、异步

同步任务 是直接在 主线程 上排队执行。在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务。所有同步任务都在主线程上执行,形成一个 执行栈execution context stack)。

异步任务 则是被放在 任务队列 (task queue) 中,不进入主线程,只有 任务队列 通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。任务队列类似一个缓冲区,任务下一步会被移到 执行栈,然后主线程执行 执行栈 的任务。如果有多个异步任务,那这些异步任务就要在任务队列中排队等候。

阅读更多

前段时间在搭建前端项目的基础设施时,遇到这样一个问题:在 pipline 上将前端项目 build 之后的文件夹拷贝到 aws 上,我使用 scp 命令将目录从一个远程服务器复制到另一个远程服务器上的新目录,命令如下:

$ scp -r server1:dir1 server2:dir2

如果在 server2 上不存在 dir2,这可以正常工作,它会创建一个名为 dir2 的新目录,其中包含 server1dir1 的所有内容。

但是当 dir2 已经存在于 server2 上时,就会出现问题,已经存在的文件不会被覆盖。

阅读更多

一、标准数据类型

1、六个标准的数据类型:

  • Number(数字)

    支持三种不同的数值类型:整型(int)、浮点型(float)和复数(complex)

  • String(字符串)

    • 使用引号( '" )来创建字符串;
    • 三引号允许一个字符串跨多行,字符串中可以包含换行符、制表符以及其他特殊字符。
  • List(列表)

    列表用 [ ] 标识,支持字符,数字,字符串甚至可以包含列表(即嵌套)。

  • Tuple(元组)

    元组用 () 标识,类似于 List(列表)。内部元素用逗号隔开。但是元组不能二次赋值,相当于只读列表。

阅读更多

一、介绍

  • Flutter 是由 Google 的工程师团队打造的,用于创建高性能、跨平台的移动应用的框架

  • Flutter 针对当下以及未来的移动设备进行优化,专注于 Android and iOS 低延迟的输入和高帧率

  • Flutter 的设计跟 react-native 很像,但是比 RN 进了一步

  • Flutter 的开发语言是 Dart

  • Flutter 的热重载(hot-reload)特性让人惊叹,它能在编 码时为你提供超快的视觉反馈

二、安装

1、获取 Flutter SDK

  • Flutter 项目克隆到本地:
阅读更多

HookReact v16.8 的新增特性。它可以让你在不创建 class 式组件的情况下使用 state 以及其他的 React 特性。

一、 React Hook 出现的背景

我们知道,React 的核心思想就是:将一个页面拆分成一些独立的、可复用的组件,并且用自上而下的单向数据流的形式将这些组件串联起来。

但是在实际项目中,很多组件式非常冗杂且难以复用的。对于那些 class 式的组件,因为它们本身包含了自己的状态( state ),所以这类组件复用起来是非常麻烦的。对于这个问题,React 官方也给出了两种推荐的解决方式:

阅读更多
3 / 12