该系列记录了从零开始学习 Flutter 的学习路径，第一站就是 Dart 语法。本文可以扫除看 Flutter 教程，写 Flutter 代码中和语言有关的绝大部分障碍。值得收藏~

声明并初始化变量

int i = 1; // 非空类型必须被初始化

int? k = 2; // 可空类型

int? h; // 只声明未初始化，则默认为 null

var j = 2; // 自动推断类型为int

late int m; // 惰性加载

final name = 'taylor'; // 不可变量

final String name = 'taylor'; // 不可变量

Dart 中语句的结尾是带有分号;的。

Dart 中声明变量时可以选择是否为它赋初始值。但非空类型必须被初始化。

Dart 中声明变量可以显示指明类型，类型分为可空和非空，前者用类型?表示。也可以用var来声明变量，此时编译器会根据变量初始值自动推断类型。

late关键词用于表示惰性加载，它让非空类型惰性赋值成为可能。得在使用它之前赋值，否则会报运行时错误。

惰性加载用于延迟计算耗时操作，比如：

late String str = readFile();

str 的值不会被计算，直到它第一次被使用。

??可为空类型提供默认值

String? name;

var ret = name ?? ''

如果 name 为空则返回空字串，否则返回 name 本身。

数量

在 Dart 中int和double是两个有关数量的内建类型，它们都是num的子类型。

若声明变量为num，则可同时被赋值为int或double

num i = 1;

i = 2.5;

字串

''和""都可以定义一个字串

var str1 = 'this is a str';

var str2 = "this is another str";

字串拼接

使用+拼接字符串

var str = 'abc'+'def'; // 输出 abcdef

多行字串

使用'''声明多行字符串

var str = '''

this is a 

multiple line string

''';

纯字串

使用r声明纯字符串，其中不会发生转义。

var str = r'this is a raw \n string'; // 输出 this is a raw \n string

字串内嵌表达式

字符串中可以内嵌使用${}来包裹一个有返回值的表达式。

var str = 'today is ${data.get()}';

字串和数量相互转化：

int.parse('1'); // 将字串转换为 int

double.parse('1.1'); // 将字串转换为 double

1.toString(); // 将 int 转换为字串

1.123.toStringAsFixed(2); // 将 double 转换为字串，输出 '1.12'

集合

声明 List

与有序列表对应的类型是List。

用[]声明有序列表，并用,分割列表元素，最后一个列表元素后依然可以跟一个,以消灭复制粘贴带来的错误。

var list = [1,2,3,];

存取 List 元素

列表是基于索引的线性结构，索引从 0 开始。使用[index]可以获取指定索引的列表元素：

var first = list[0]; // 获取列表第一个元素

list[0] = 1; //为列表第一个元素赋值

展开操作符

...是展开操作符，用于将一个列表的所有元素展开：

var list1 = [1, 2, 3];

var list2 = [...list1, 4, 5, 6];

上述代码在声明 list2 时将 list1 展开，此时 list2 包含 [1,2,3,4,5,6]

除此之外，还有一个可空的展开操作符...?，用于过滤为null的列表：

var list; // 声明时未赋初始值，则默认为 null

var list2 = [1, ...?list]; // 此时 list2 内容还是[1]

条件插入

if和for是两个条件表达式，用于有条件的向列表中插入内容：

var list = [

    'aa',

    'bb',

    if (hasMore) 'cc'

];

如果 hasMore 为 true 则 list 中包含'cc'，否则就不包含。

var list = [1,2,3];

var list2 = [

    '0',

    for (var i in list) '$i'

];// list2 中包含 0,1,2,3

在构建 list2 的时候，通过遍历 list 来向其中添加元素。

Set

Set中的元素是可不重复的。

用{}声明Set，并用,分割元素：

var set = {1,2,3}; // 声明一个 set 并赋初始元素

var set2 = {}; // 声明一个空 set

var set3 = new Set(); // 声明一个空 set

var set4 = Set(); // 声明一个空 set，new 关键词可有可无

Map

Map是键值对，其中键可以是任何类型但不能重复。

var map = {

    'a': 1,

    'b': 2,

}; // 声明并初始化一个 map，自动推断类型为 Map



var map2 = Map(); // 声明一个空 map

map2['a'] = 1; // 写 map

var value = map['a']; //读 map

读写Map都通过[]。

const

const是一个关键词，表示一经赋值则不可修改：

// list

var list = const [1,2,3];

list.add(4); // 运行时报错，const list 不可新增元素



// set

var set = const {1,2,3};

set.add(4); // 运行时报错，const set 不可新增元素



// map

var map = const {'a': 1};

map['b'] = 2; // 运行时报错，const map 不能新增元素。

类

声明类

class Pointer {

    double x;

    double y;

    

    void func() {...} // void 表示没有返回值

    double getX(){

        return x;

    }

}

• 用关键词 class声明一个类。
• 类体中用类型 变量名;来声明类成员变量。
• 类体中用返回值 方法名(){方法体}来声明类实例方法。

构造方法

上述代码会在 x ，y 这里报错，说是非空字段必须被初始化。通常在构造方法中初始化成员变量。

构造方法是一种特殊的方法，它返回类实例且签名和类名一模一样。

class Point {

    double x = 0;

    double y = 0;

    // 带两个参数的构造方法

    Point(double x, double y) {

        this.x = x;

        this.y = y;

    }

}

这种给成员变量直接赋值的构造方法有一种简洁的表达方式：

class Point {

    double x = 0;

    double y = 0;

    

    Point(this.x, this.y); // 当方法没有方法体时，得用;表示结束

}

命名构造方法

Dart 中还有另一个构造方法，它的名字不必和类名一致：

class Point {

  double x;

  double y;



  Point.fromMap(Map map)

      : x = map['x'],

        y = map['y'];

}

为 Point 声明一个名为fromMap的构造方法，其中的:表示初始化列表，初始化列表用来初始化成员变量，每一个初始化赋值语句用,隔开。

初始化列表的调用顺序是最高的，在一个类实例化时会遵循如下顺序进行初始化：

1. 初始化列表
2. 父类构造方法
3. 子类构造方法

Point.fromMap() 从一个 Map 实例中取值并初始化给成员变量。

然后就可以像这样使用命名构造方法：

Map map = {'x': 1.0, 'y': 2.0};

Point point = Point.fromMap(map);

命名构造方法的好处是可以将复杂的成员赋值的逻辑隐藏在类内部。

继承构造方法

子类的构造方法不能独立存在，而是必须调用父类的构造方法：

class SubPoint extends Point {

  SubPoint(double x, double y) {}

}

上述 SubPointer 的声明会报错，提示得调用父类构造方法，于是改造如下：

class SubPoint extends Point {

  SubPoint(double x, double y) : super(x, y);

}

在初始化列表中通过super调用了父类的构造方法。父类命名构造方法的调用也是类似的：

class SubPoint extends Point {

  SubPoint(Map map) : super.fromMap(map);

}

构造方法重定向

有些构造方法的目的只是调用另一个构造方法，为此可以在初始化列表中通过this实现：

class Point {

    double x = 0;

    double y = 0;

    

    Point(this.x, this.y);

    Point.onlyX(double x): this(x, 0);

}

Point.onlyX() 通过调用另一个构造方法并为 y 值赋值为 0 来实现初始化。

方法

Dart 中方法也是一种类型，对应Function类，所以方法可以被赋值给变量或作为参数传入另一个方法。

// 下面声明的两个方法是等价的。

bool isValid(int value){

    return value != 0;

}



isValid(int value){// 可自动推断返回值类型为 bool

    return value != 0;

}

声明一个返回布尔值的方法，它需传入一个 int 类型的参数。

其中方法返回值bool是可有可无的。

bool isValid(int value) => value != 0;

如果方法体只有一行表达式，可将其书写成单行方法样式，方法名和方法体用=>连接。

Dart 中的方法不必隶属于一个类，它也可以顶层方法的形式出现（即定义在.dart文件中）。定义在类中的方法没有可见性修饰符public private protected ，而是简单的以下划线区分，_开头的函数及变量是私有的，否则是公有的。

可选参数 & 命名参数

Dart 方法可以拥有任意数据的参数，对于非必要参数，可将其声明为可选参数，调用方法时，就不用为其传入实参：

bool isValid(int value1, [int value2 = 2, int value3 = 3]){...}

定义了一个具有两个可选参数的方法，其中第二三个参数用[]包裹，表示是可选的。而且在声明方法时为可选参数提供了默认值，以便在未提供相应实参时使用。所以如下对该方法的调用都是合法的。

var ret = isValid(1) // 不传任何可选参数

var ret2 = isValid(1,2) // 传入1个可选参数

var ret3 = isValid(1,2,3) // 传入2个可选参数

使用[]定义可选参数时，如果想只给 value1，value3 传参，则无法做到。于是乎就有了{}：

bool isValid(int value1, {int value2 = 2, int value3 = 3}) {...}

然后就可以跳过 value2 直接给 value3 传参：

var ret = isValid(1, value3 : 3)

这种语法叫可选命名参数。

Dart 还提供了关键词required指定在众多可选命名参数中哪些是必选的：

bool isValid(int value1, {int value2, required int value3}) {...}

匿名方法

匿名方法表示在给定参数上进行一顿操作，它的定义语法如下：

(类型 形参) {

    方法体

};

如果方法体只有一行代码可以将匿名函数用单行表示：

(类型 形参) => 方法体;

操作符

三元操作符

三元操作符格式如下：布尔值 ？ 表达式1 ： 表达式2;

var ret = isValid ? 'good' : 'no-good';

如果 isValid 为 true 则返回表达式1，否则返回表达式2。

瀑布符

该操作符..用于合并在同一对象上的多个连续操作：

val paint = Paint()

    ..color = Colors.black

    ..strokeCap = StrokeCap.round

    ..strokeWidth = 5.0

构建一个画笔对象并连续设置了 3 个属性。

如果对象可控则需使用?..：

paint?..color = Colors.black

    ..strokeCap = StrokeCap.round

    ..strokeWidth = 5.0

类型判定操作符

as 是强转操作符，表示将一个类型强转为另一个类型。

is 是类型判定操作符，用于判断某个实例是否是指定类型。

is! 是与 is 相反的判定。

流程控制

if-else

if (isRaining()) {

  you.bringRainCoat();

} else if (isSnowing()) {

  you.wearJacket();

} else {

  car.putTopDown();

}

for

for (var i = 0; i < 5; i++) {

  message.write('!');

}

如果不需要关心循环的索引值，则可以这样：

for (var item in list) {

  item.do();

}

while

while (!isDone()) {

  doSomething();

}

do {

  printLine();

} while (!atEndOfPage());

break & continue

break & continue 可用于 for 和 while 循环。

break用于跳出循环

var i = 0

while (true) {

  if (i > 2) break;

  print('$i');

  i++;

} // 输出 0,1,2

continue用于跳过当前循环的剩余代码：

for (int i = 0; i < 10; i++) {

  if (i % 2 == 0) continue;

  print('$i');

}// 输出 1,3,5,7,9

switch-case

Dart 中的 switch-case 支持 String、int、枚举的比较，以 String 为例：

var command = 'OPEN';

switch (command) {

  case 'CLOSED': 

  case 'PENDING': // 两个 case 共用逻辑

    executePending();

    break; // 必须有 break

  case 'APPROVED':

    executeApproved();

    break;

  case 'DENIED':

    executeDenied();

    break;

  case 'OPEN':

    executeOpen();

    break;

  default: // 当所有 case 都未命中时执行 default 逻辑

    executeUnknown();

}

关键词

所有的关键词如下所示：

文丨陈根

21世纪是一个技术井喷的的时代，从互联网、云计算、大数据到通信技术、人工智能、数字孪生等等，一系列的技术都随着其发展和成熟日渐融入人们所生活的社会，并共同雕刻着这个属于技术的时代。元宇宙就是这个时代里一系列创新技术集大成的重要标志之一。

元宇宙构建了一个脱胎于现实世界，又与现实世界平行、相互影响，并且始终在线的虚拟世界。在元宇宙理想形态背后，是基于扩展现实技术提供沉浸式体验，基于数字孪生技术生成现实世界的镜像，基于区块链技术搭建经济体系，并且允许每个用户进行内容生产和世界编辑。

技术的发展是元宇宙初现的前提，技术的集成则是元宇宙爆发的背景。尽管当前元宇宙已经吸引了足够多的市场注意力和资本的目光，但站在技术演化的角度，元宇宙又该如何顺应技术发展趋势？元宇宙的终点又是什么技术？

技术聚合，进发元宇宙

乔布斯曾提出一个著名的“项链”比喻，iPhone的出现，串联了多点触控屏、iOS、高像素摄像头、大容量电池等单点技术，重新定义了手机，开启了激荡十几年的移动互联网时代。

正如iPhone的出现一样，元宇宙也是一系列“连点成线”技术创新的总和。元宇宙是算力持续提升、高速无线通信网络、云计算、区块链、虚拟引擎、VR/AR、数字孪生等技术创新逐渐聚合的结果，是整合多种新技术而产生的新型虚实相融的互联网应用和社会形态。

1969年，互联网诞生，元宇宙的实现有了全球化的软硬件基础。1989年，万维网标准开始制定，为互联网技术的发展奠定了基础。1990年到1998年，人类用户主要通过字符化的电子公告牌（BBS）进行信息交互。彼时，在数字空间中没有数字世界环境的构建，没有明确的个人角色，用户交互界面还以字符为主。

1998年到2003年，博客开始兴起，互联网进入2.0时代。数字空间出现了独立的“数字人”角色，主要表现形式为字符和图片构成博客个人空间的主体。自此，互联网用户有了个人身份和角色，并逐渐向一个完善的数字生态系统过渡。

以博客为例，在博客中发言和展示个人信息内容，是数字空间的微观层面；某一个个体的博客平台所吸纳的人群，是数字空间中观层面；整个博客世界则是其宏观层面。博客生态系统不是一个简单的“写”与“看”的供求关系，甚至也不是一种简单的“表演”与“观看”的关系，而是由人们在社会整体生态环境影响下形成的多重需求构成的生态关系。

2004年，社交网络开始兴起，Facebook正式上线，QQ、Twitter、微博不断出现并高速发展。数字空间中，数字人（个人用户空间）与数字人可以进行信息交互，形成社交网络和社交关系。2009年，移动互联网进入3G时代，随着智能手机的广泛应用，数字空间伴随社交网络的应用范围扩大而进一步扩大，大量的图片，声音元素丰富了虚拟数字空间的内容。

2014年，以Facebook购买虚拟现实公司Oculus为标志，虚拟现实成为产业热点。但是由于当时的VR眼镜还不成熟，VR追求的是沉浸式和场景化体验，但由于用户的参与感太过薄弱，只充当观众的用户量级显然无法支撑VR的全民热情，再加上社交网络巨头和消费者对虚拟现实社交网络准备不足。几年后，虚拟现实热潮退去，数字空间向三维化阶段进化的第一次努力失败。

同年，4G网络兴起，视频开始成为社交网络为基础的数字空间的重要内容形式。2018年，电子商务和知识付费、NFT、虚拟货币在社交网络为基础的数字空间中初步成熟并广泛应用。

2019年，5G商用正式宣告了5G时代的来临。5G技术具有万物互联、高速度、泛在网、低时延、低功耗、重构安全等特点和优势。5G技术的发展使整个人类社会的生产和生活产生深刻变革，5G构建起万物互联的核心基础能力，不仅带来了更快更好的网络通信，更肩负起赋能各行各业的历史使命。

2020年，以城市大脑、数字政府、组织化转型为主的产业化持续拓展社交网络和数字空间向万物互联、万物交互方向演进，但仍然处于萌芽状态。

在这样的背景下，囊括了上述技术、带着强烈科幻色彩的元宇宙随着开放式游戏创建平台Roblox的上市成为了网络讨论的热点。在大厂布局、资本追捧下，现在，“元宇宙”概念已然成为市场最炙手可热的名词。

元宇宙，发展进行时

元宇宙的兴起是技术的聚合，从目前已经呈现的前端征兆和发展趋势看，在通信网络、云计算、区块链、虚拟现实等技术的支持下，元宇宙将生成一个与人类物理世界全方位连接起来的虚拟宇宙，人们得以感受到由此生成的超大尺度、无限扩张、层级丰富和谐运行的虚拟系统，呈现在人们面前的将是现实世界与数字世界融合的全新的文明景观。

元宇宙连接虚拟和现实，丰富人的感知，提升体验，延展人的创造力和更多可能。虚拟世界从物理的世界的模拟、复刻，变成物理世界的延伸和拓展，进而反作用于物理世界，最终模糊虚拟世界和现实世界的界限。从这一角度来说，元宇宙的兴起也可以看做是数字空间向三维化阶段进化的第二次尝试。

虽然当前人们还不能准确描绘出元宇宙的景观，但事实上，现在人们已经以不同的方式生活在元宇宙之中。人们正不断地构建着数字世界，数字化着自己以及物理世界，而元宇宙的变化过程也会从不同的现实变量出发，比如教育、就业、消费等影响着真实社会的生产和生活。

对于元宇宙来说，不同的阶段有着不同的成熟度。如果说信息化和数字化，是元宇宙兴起的前提，那么数字孪生，就是元宇宙发展的初级阶段。2011年，迈克尔教授在《几乎完美：通过产品全声明周期管理驱动创新和精益产品》中引用了其合作者约翰·维克斯描述概念模型的名词“数字孪生”，并一直沿用至今。

正如我在《数字孪生》所说的“数字孪生就是在一个设备或系统‘物理实体’的基础上，创造一个数字版的‘虚拟模型’。这个‘虚拟模型’被创建在信息化平台上提供服务”。值得一提的是，与电脑的设计图纸又不同，相比于设计图纸，数字孪生体最大的特点在于，它是对实体对象的动态仿真。

明眼望去，数字孪生是物理实体的“灵魂”。当前，数字孪生技术在经历了技术准备期、概念产生期和应用探索期后，正在进入大浪淘沙的领先应用期。随着图书馆、博物馆、各种景点的孪生体化，数字孪生还在加速发展，而数字孪生发展的终极，就是走向元宇宙。

2021年初举行的计算机图形学顶级学术会议SIGGRAPH 2021上，英伟达就通过一部纪录片，自曝了2021年4月公司发布会中，英伟达CEO黄仁勋通过数字孪生技术制造了演讲中14秒片段的数字替身。尽管只有短暂的14秒，但黄仁勋标志性的皮衣，表情、动作、头发却足以乱真，几乎骗过了所有人。

未来，数字孪生技术将为元宇宙中的各种虚拟对象提供了丰富的数字孪生体模型，并通过从传感器和其他连接设备收集的实时数据与现实世界中的数字孪生化对象相关联，使得元宇宙环境中的虚拟对象能够镜像、分析和预测其数字孪生化对象的行为。可以说，作为对现实世界的动态模拟，“数字孪生”是元宇宙从未来伸过来的一根触角。

技术的进路，本质的到达

当然，虽然元宇宙在数字孪生中有所体现，但必然不止于数字孪生。Beamable公司创始人Jon Radoff提出了元宇宙的七层架构：基础设施、人机交互、去中心化、空间计算、创作者经济、发现和体验。

其中，基础设施包括支持元宇宙的设备、将它们连接到网络并提供内容的技术；人机交互则主要是智能可穿戴设备；去中心化是构建元宇宙人与人关系的重要转折，可以把元宇宙的所有资源更公平的分配；计算层将真实计算和虚拟计算进行混合，以消除物理世界和虚拟世界之间的障碍；创作者经济层包含创作者每天用来制作人们喜欢的体验的所有技术；发现层类似于互联网的门户网站和搜索引擎；体验层则是用户直接面对的游戏、社交平台等。

从元宇宙的七层架构可以看出，元宇宙是个比数字孪生更庞大、更复杂的体系。如果数字孪生已经是个复杂技术体系的话，那么元宇宙就是个复杂的技术-社会体系。问题是，这个复杂的技术-社会体系就是人类技术发展的终点吗？元宇宙的尽头又在哪里？

显然，元宇宙作为功能意义上的一种技术群存在，是信息技术发展的高级阶段。但从社会角度来看，元宇宙的生成与发展依赖于现实世界，又反作用于现实世界的发展。

一方面，元宇宙不完全是一种人造的数字化空间或现实世界的数字化映像。元宇宙作为人类制造出来的一种现实性的非实在事物，其非实在性在于，元宇宙中的一切事物包括它本身都是信息的集合而非物质的集合。另一方面，元宇宙也只能部分地、有条件地反映出人类思维空间中的事物。

这意味着，元宇宙是虚拟演化的最终形态，元宇宙发展的根本，还是为了促进现实世界的发展。2019年出版的《崛起的超级智能》曾经绘制了一幅世界数字大脑的发育示意图，书中就预言了在混合智能和云反射弧之后，世界数字大脑的思维空间和梦境空间将成为新的热点，而它们与元宇宙存在着密切的关系。

根据《崛起的超级智能》，社交网络对应了神经元网络；3G/4G/5G对应神经纤维；人工智能对应驱动世界数据大脑运转的基础和动力；城市大脑、工业大脑对应世界数字大脑的初步成型。作一个类脑复杂巨系统，世界数据大脑的思维空间和梦境空间将在大数据、虚拟现实、数字孪生等技术的推动下不断成熟。

从这一维度来说，元宇宙从本质上可以看作是思维空间和梦境空间的产业化名称。元宇宙是组成这个世界数字大脑的一部分，承担了它意识和梦境的构造，主要特征是大社交网络为核心的数字空间开始从二维向三维进化，能够将现实世界映射到数字空间，也可以将人类的幻想具象化，带给人类梦境般真实体验。

而世界数字大脑的作用就是提高人类社会的运行效率，解决人类社会发展过程中面临的复杂问题，更好地为人类协同发展提供支撑。世界神经系统将为人类社会的协同发展，构建起全球统一的类脑智能支撑平台，实现对世界的认知、判断、决策、反馈和改造，共同应对来自自然的各种挑战和风险，满足人类社会的各种需求。

归根到底，从信息化到数字化，从数字化向数字孪生进化，再向元宇宙进发。技术的演化之路也是人类的进化之路，使得人类们对虚拟和现实、物理和数字有更本质的认识。

https://baijiahao.baidu.com/s?id=1716003827693985340&wfr=spider&for=pc

导语

任何前端系统与用户关系最密切的部分就是UI。一个按钮，一个标签，都是通过对应的UI元素展示与交互。初学时，我们往往只关注如何使用。但如果只知道如何使用，遇到问题我们很难找到解决的办法和思路，也无法针对一些特定场景进行优化。本期针对Flutter的UI系统和大家一起进阶学习：

1、原来我一直在错误的使用 setState()?

2、面试必问：说说Widget和State的生命周期

3、Flutter的布局约束原理

4、15个例子解析Flutter布局过程

读完本文你将收获：Flutter的渲染机制以及setState()背后的原理

引言

初学Flutter的时候，当需要更新页面数据时，我们通常会想到调用setState()。但很多博客以及官方文章并不建议我们在页面的节点使用setState()，因为这样会带来不必要的开销（仅针对页面节点，当然Flutter的Widget刷新一定离不开setState()），很多状态管理方案也是为了达到所谓的“局部刷新”。到这我们不仅要思考为什么使用setState()能刷新页面，又为何可能会带来额外的损耗？这个函数背后做了什么逻辑？这篇文章和大家一一揭晓。

一、为什么setState()能刷新页面

1、setState()

我们的demo从一个最简单的计数器开始

在页面中点击底部的➕号，本地变量加一，之后调用了当前页面的setState()，页面重新构建，显示的数据增加。从现象推断，整个流程必然会经过setState（）-···················->当前State的build()-················->页面绘制-············->屏幕刷新。
那么下面我们看看setState()到底做了什么？

State#setState(VoidCallback fn)

@protected

void setState(VoidCallback fn) {

  final dynamic result = fn() as dynamic;

  _element.markNeedsBuild();

}

在去掉所有的断言之后，其实setState只做了两件事儿

1、调用我们传入的VoidCallback fn

2、调用_element.markNeedsBuild()

2、element.markNeedsBuild()

Flutter开发中我们一般和Widget打交道，但Widget上有这样一个注释。

Describes the configuration for an [Element].

abstract class Widget extends DiagnosticableTree {

  final Key key;

  Element createElement();

  String toStringShort() {

    return key == null ? '$runtimeType' : '$runtimeType-$key';

  }

Widget只是用于描述Element的一个配置文件，实际在Framework层管理页面的构建，渲染等，都是通过Element完成，Element由Widget创建，并且持有Widget对象，每一种Widget都会对应的一种Element。

在上面的demo中，我们在HomePageState调用了setState()，这里的Element有HomePage对象创建。HomePage(Widget) - HomePageState(State) - HomePageElement(StatefulElement) 三者一一对应。

Element#markNeedsBuild()

/// The object that manages the lifecycle of this element.

/// 负责管理所有element的构建以及生命周期

@override

BuildOwner get owner => _owner;



void markNeedsBuild() {

  //将自己标记为脏

  _dirty = true;

  owner.scheduleBuildFor(this);

}

调用了BuildOwner.scheduleBuildFor(element)，这里的BuildOwner在WidgetsBinding的初始化中完成实例化，负责管理widget框架，每个Element对象在mount到element树中之后都会从父节点获得它的引用。

WidgetsBinding#initInstances()

void initInstances() {

  super.initInstances();

  _instance = this;

  _buildOwner = BuildOwner();

  buildOwner.onBuildScheduled = _handleBuildScheduled;

 /······/

}

BuildOwner#scheduleBuildFor(Element element)

void scheduleBuildFor(Element element) {

  //添加到_dirtyElements集合中

  _dirtyElements.add(element);

  element._inDirtyList = true;

}

最后将自己添加到BuildOwner中维护的一个脏element集合。

总结：1、Element: 持有Widget，存放上下文信息，RenderObjectElement 额外持有 RenderObject。通过它来遍历视图树，支撑UI结构。

2、setState()过程其实只是将当前对应的Element标记为脏(demo中对应HomePageState)，并且添加到_dirtyElements合中。

3、Flutter渲染机制

上面的过程看起来没做任何渲染相关的事儿，那么页面是如何重新绘制？关键点就在于Flutter的渲染机制

开始FrameWork层会通知Engine表示自己可以进行渲染了，在下一个Vsync信号到来之时，Engine层会通过Windows.onDrawFrame回调Framework进行整个页面的构建与绘制。（这里我想为什么要先由Framework发起通知，而不是直接由Vsync驱动。如果一个页面非常卡顿，恰好每一帧绘制的时间大于一个Vsync周期，这样每帧都不能在一个Vsync的时间段内完成绘制。而先由framework保证上完成构建与绘制后，发起通知在下一个Vsync信号再绘制则可以避免这样的情况）。每次收到渲染页面的通知后，Engine调用Windows.onDrawFrame最终交给_handleDrawFrame()方法进行处理。

@protected

void ensureFrameCallbacksRegistered() {

  //构建帧前的处理，主要是进行动画相关的计算

  window.onBeginFrame ??= _handleBeginFrame;

  //Windows.onDrawFrame交给_handleDrawFrame进行处理

  window.onDrawFrame ??= _handleDrawFrame;

}

复制代码

SchedulerBinding#handleDrawFrame()

void handleDrawFrame() {

  try {

    // PERSISTENT FRAME CALLBACKS

    // 关键回调

    for (FrameCallback callback in _persistentCallbacks)

      _invokeFrameCallback(callback, _currentFrameTimeStamp);

    // POST-FRAME CALLBACKS

    final List<FrameCallback> localPostFrameCallbacks =

        List<FrameCallback>.from(_postFrameCallbacks);

    _postFrameCallbacks.clear();

   for (FrameCallback callback in localPostFrameCallbacks)

        _invokeFrameCallback(callback, _currentFrameTimeStamp);

  } finally {

 	/·····························/

  }

}

在Flutter AnimationController回调原理一期中我们提到过，在Flutter的SchedulerBinding中维护了这样三个队列

• Transient callbacks，由系统的[Window.onBeginFrame]回调，用于同步应用程序的行为 到系统的展示。例如，[Ticker]s和[AnimationController]s触发器来自与它。


• Persistent callbacks 由系统的[Window.onDrawFrame]方法触发回调。例如，框架层使用他来驱动渲染管道进行build， layout，paint


• Post-frame callbacks在下一帧绘制前回调，主要做一些清理和准备工作 Non-rendering tasks 非渲染的任务，可以通过此回调获取一帧的渲染时间进行帧率相关的性能监控。

SchedulerBinding.handleDrawFrame()中对_persistentCallbacks和_postFrameCallbacks集合进行了回调。根据上面的描述可知，_persistentCallbacks中是一些固定流程的回调，例如build，layout，paint。跟踪这个_persistentCallbacks这个集合，发现在RendererBinding.initInstances()初始化中调用了addPersistentFrameCallback(_handlePersistentFrameCallback)方法。这个方法只有一行调用就是drawFrame()。

总结：

• SchedulerBinding中维护了这样三个队列TransientCallbacks(动画处理)，PersistentCallbacks(页面构建渲染),PostframeCallbacks(每帧绘制完成后)，并在合适的时机对其进行回调。


• 当收到Engine的渲染通知之后通过Windows.onDrawFrame方法回调到Framework层调用handleDrawFrame


• handleDrawFrame回调PersistentCallbacks(页面构建渲染),最终调用drawFrame()

4、drawFrame()

查看drawFrame()方法一般会直接点击到RendererBinding中

RendererBinding#drawFrame()

void drawFrame() {

  pipelineOwner.flushLayout();

  pipelineOwner.flushCompositingBits();

  pipelineOwner.flushPaint();

  renderView.compositeFrame(); // this sends the bits to the GPU

  pipelineOwner.flushSemantics(); // this also sends the semantics to the OS.

}

从这几个方法名能大致看出，这里调用了布局，绘制，渲染帧的。而且看类名，这是负责渲染的Binding，并没有调用Widget的构建。这是因为WidgetsBinding是onRendererBinding的（理解为继承），其中重写了drawFrame()，实际上调用的应该是WidgetsBinding.drawFrame()。

WidgetsBinding#drawFrame()

@override

void drawFrame() {

try {

    if (renderViewElement != null)

      // buildOwner就是前面提到的负责管理widgetbuild的对象

      // 这里的renderViewElement是整个UI树的根节点

      buildOwner.buildScope(renderViewElement);

    super.drawFrame();

  		//将不再活跃的节点从UI树中移除

    buildOwner.finalizeTree();

  } finally {

		/·················/

  }

}

在super.drawFrame()之前，先调用 buildOwner.buildScope(renderViewElement)。
BuildOwner#buildScope(Element context, [ VoidCallback callback ])

void buildScope(Element context, [ VoidCallback callback ]) {

  if (callback == null && _dirtyElements.isEmpty)

    return;

  try {

    _scheduledFlushDirtyElements = true;

    _dirtyElementsNeedsResorting = false;

    _dirtyElements.sort(Element._sort);

    _dirtyElementsNeedsResorting = false;

    int dirtyCount = _dirtyElements.length;

    int index = 0;

    while (index < dirtyCount) {

      try {

        ///关键在这

        _dirtyElements[index].rebuild();

      } catch (e, stack) {

     	/···············/

      }

    }

  } finally {

    for (Element element in _dirtyElements) {

      element._inDirtyList = false;

    }

    _dirtyElements.clear();

  }

}

前面在setState()之后，将homePageState添加到_dirtyElements里面。而这个方法会对集合内的每一个对象调用rebuild()。rebuild()这个方法最终走到performRebuild()，这是一个Element中的一个抽象方法。

二、为什么高位置的setState ()会消耗性能

1、performRebuild()

查看StatelessElement和StatefulElement共同祖先CompantElement中的实现

CompantElement#performRebuild()

void performRebuild() {

  Widget built;

  try {

    built = build();

  } catch (e, stack) {

    built = ErrorWidget.builder();

  } 

  try {

    _child = updateChild(_child, built, slot);

  } catch (e, stack) {

    built = ErrorWidget.builder();

    _child = updateChild(null, built, slot);

  }



}

这个方法直接调用子类的build方法返回了一个Widget，对应调用前面的HomePageState()中的build方法。

将这个新build()出来的widget和之前挂载在Element树上的_child(Element类型)作为参数，传入updateChild(_child, built, slot)中。setState()的核心逻辑就在 updateChild(_child, built, slot)。

2、updateChild(_child, built, slot)

StatefulElement#updateChild(Element child, Widget newWidget, dynamic newSlot)

@protected

Element updateChild(Element child, Widget newWidget, dynamic newSlot) {

  if (newWidget == null) {

    if (child != null)

      //child == null && newWidget == null

      deactivateChild(child);

    //child != null && newWidget == null

    return null;

  }

  if (child != null) {

    if (child.widget == newWidget) {

      //child != null && newWidget == child.widget

      if (child.slot != newSlot)

        updateSlotForChild(child, newSlot);

      return child;

    }

    if (Widget.canUpdate(child.widget, newWidget)) {

      if (child.slot != newSlot)

        updateSlotForChild(child, newSlot);

      //child != null && Widget.canUpdate(child.widget, newWidget)

      child.update(newWidget);

      return child;

    }

    deactivateChild(child);

  }

  // child != null && !Widget.canUpdate(child.widget, newWidget)

  return inflateWidget(newWidget, newSlot);

}

这个方法上官方提供了这样的注释：

总的来说，根据之前挂载在Element树上的_child以及再次调用build()出来的newWidget对象，共有四种情况

• 如果之前的位置child为null
  
  
  
  • A、如果newWidget为null的话，说明这个位置始终没有子节点，直接返回null即可。
  
  
  • B、如果newWidget不为null，说明这个位置新增加了子节点调用inflateWidget(newWidget, newSlot)生成一个新的Element返回
  
  
  
  


• 如果之前的child不为null
  
  
  
  • C、如果newWidget为null的话，说明这个位置需要移除以前的节点，调用 deactivateChild(child)移除并且返回null
  
  
  • D、如果newWidget不为null的话，先调用Widget.canUpdate(child.widget, newWidget)对比是否能更新。这个方法会对比两个Widget的runtimeType和key，如果一致则说明子Widget没有改变，只是需要根据newWidget(配置清单)更新下当前节点的数据child.update(newWidget)；如果不一致说明这个位置发生变化，则deactivateChild(child)后返回inflateWidget(newWidget, newSlot)
  
  
  
  

而在demo中，观察代码我们可以知道

在homePageState中调用setState()后，child和newWidget都不为空都是Scaffold类型，并且由于我们没有显示的指定key，所以会走child.update(newWidget)方法**（注意这里的child已经变成Scaffold）**。

3、递归更新

update(covariant Widget newWidget)是一个抽象方法，不同element有不同实现，以StatulElement为例

void update(StatefulWidget newWidget) {

  super.update(newWidget);

  assert(widget == newWidget);

  final StatefulWidget oldWidget = _state._widget;

  // Notice that we mark ourselves as dirty before calling didUpdateWidget to

  // let authors call setState from within didUpdateWidget without triggering

  // asserts.

  _dirty = true;

  _state._widget = widget;

  try {

    final dynamic debugCheckForReturnedFuture = _state.didUpdateWidget(oldWidget) as dynamic;

  } finally {

    _debugSetAllowIgnoredCallsToMarkNeedsBuild(false);

  }

  rebuild();

}

这个方法先回调用_state.didUpdateWidget我们可以在State中重写这个方法，走到最后发现最终再次调用了rebuild()。但这里需要注意这次调用rebuild()的已经不是HomePageState了，而是他的第一个子节点Scaffold。所以整个过程又会再次走到performRebuild(),又在再次调用updateChild(_child, built, slot)更新子节点。不断的递归直到页面的最子一级节点。如图：

build()过程虽然只是调用一个组件的构造方法，不涉及对Element树的挂载操作。但因为我们一个组件往往是N多个Widget的嵌套组合，每个都遍历一遍开销算下来并不小（感兴趣可以数数Scaffold有多少层嵌套）。

回到我们的demo中，其实我们的诉求只是点击+号改变以前显示的数据。

但直接在页面节点调用setState()将会重新调用所有Widget（包括他们中的各种嵌套）的build()方法，如果我们的需求是一个较为复杂的页面，这样带来的开销消耗可想而知。

而要想解决这个问题可以参考告别setState()！ 优雅的UI与Model绑定 Flutter DataBus使用~

总结

当我们在一个高节点调用setState()的时候会构建再次build所有的Widget，虽然不一定挂载到Element树中，但是平时我们使用的Widget中往往嵌套多个其他类型的Widget，每个build()方法走下来最终也会带来不小的开销，因此通过各种状态管理方案，Stream等方式，只做局部刷新，是我们日常开发中应该养成的良好习惯。

最后

本期我们分析了setState()过程，重点分析了递归更新的过程。正如安卓Activity或者Fragment的生命周期，Flutter中Widget和State同样也提供了对应的回调，如initState()，build()。这些方法背后是谁在调用，他们的调用时序是如何？Element的生命周期是如何调用的？将会在下一期和大家一一分析~

在Object常用的方法中，Object.freeze和Object.seal对于初学者而言，是两个较为容易混淆的概念，常常傻傻分不清两者的区别和应用场景

概念

先看看两者定义

Object.freeze在MDN中的定义

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

Object.seal在MDN中的定义

Object.seal()方法封闭一个对象，阻止添加新属性并将所有现有属性标记为不可配置。当前属性的值只要原来是可写的就可以改变。

从两者定义可以得到两者差异：Object.freeze核心是冻结，强调的是不可修改。Object.seal核心是封闭，强调的是不可配置，不影响老的属性值修改

差异

定义一个对象，接下来的对比围绕这个对象进行

"use strict";

const obj = {

    name: "nordon"

};

使用Object.freeze

Object.freeze(obj);

Object.isFrozen(obj); // true

obj.name = "wy";

使用Object.isFrozen可以检测数据是否被Object.freeze冻结，返回一个Boolean类型数据

此时对冻结之后的数据进行修改，控制台将会报错：Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Object>'

使用Object.seal

Object.seal(obj);

Object.isSealed(obj); // true

obj.name = "wy";

使用Object.isSealed可以检测数据是否被Object.seal封闭，返回一个Boolean类型数据

此时修改name是成功的，此时的obj也成功被修改

注意：若是不开启严格模式，浏览器会采用静默模式，不会在控制台抛出异常信息

共同点

主要以Object.seal演示

不可删除

delete obj.name;

控制台将会抛出异常：Uncaught TypeError: Cannot delete property 'name' of #<Object>

不可配置

可以修改原有的属性值

Object.defineProperty(obj, 'name', {

  value: 'wy'

})

不可增加新的属性值

Object.defineProperty(obj, "age", {

    value: 12,

});

控制台将会抛出异常：Uncaught TypeError: Cannot define property age, object is not extensible

深层嵌套

两者对于深层嵌套的数据都表现为：无能为力

定义一个嵌套的对象

"use strict";

const obj = {

  name: "nordon",

  info: {

    foo: 'bar'

  }

};

对于obj而言，无论是freeze还是seal，操作info内部的数据都无法做到对应的处理

obj.info.msg = 'msg'

数据源obj被修改，不受冻结或者冰封的影响

若是想要做到嵌套数据的处理，需要递归便利数据源处理，此操作需要注意：数据中包含循环引用时，将会触发无限循环

preventExtensions

最后介绍一下Object.preventExtensions，为何这个方法没有放在与Object.freeze、Object.seal一起对比呢？因为其和seal基本可保持一致，唯一的区别就是可以delete属性，因此单独放在最后介绍

看一段代码

"use strict";

const obj = {

    name: "nordon",

};



Object.preventExtensions(obj);

Object.isExtensible(obj); // false， 代表其不可扩展



delete obj.name;

前言

这次，我们用vue2+scss，带大家来实现一个六面体的猫立方。

本次的逻辑我们不适用任何的js代码，仅仅只依靠css来完成。

所以，通过本片文章，你可以收获一些css动画相关的技巧。

先看看效果

预习

本次我们要用到的知识点

1. transform

解释：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

要用哪个，可以对着这个表格查

2. transform-style

解释：transform--style属性指定嵌套元素是怎样在三维空间中呈现。

注意：  使用此属性必须先使用 transform 属性.

3. transition

解释：transition 属性是一个简写属性，用于设置四个过渡属性：

• transition-property


• transition-duration


• transition-timing-function


• transition-delay

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

分析

我们先拆解下这个猫3D的特点，它有以下特点

1. 它一直在不停的转


2. 它由两个六面体组成，外面一个，里面一个


3. 鼠标靠近外面的六面体，六面体的六个面会往外扩，露出里面的小六面体

开始

1.因为我们做的是六面体，有2个六面体，一个在里面，一个在外面。2个六面体，12个面，先准备12张猫主子的图片。

2. 然后我们新建img3D.vue文件，开干

步骤一

先来完成第一个特点不停的转

代码如下:

<template>

  <div>

    <div class="container">

    </div>

  </div>

</template>



<script>



</script>



<style lang="scss" scoped>

* {

  margin: 0px;

  padding: 0px;

}



.container {

  position: relative;

  margin: 0px auto;

  margin-top: 9%;

  margin-left: 42%;

  width: 200px;

  height: 200px;

  transform: rotateX(-30deg) rotateY(-80deg);

  transform-style: preserve-3d;

  animation: rotate 15s infinite;

  /* 我这里用一个边框线来更容易看到效果 */

  border: 1px solid red;

}



/* 旋转立方体 */

@keyframes rotate {

  from {

    transform: rotateX(0deg) rotateY(0deg);

  }



  to {

    transform: rotateX(360deg) rotateY(360deg);

  }

}

</style>

步骤二

弄外面的六面体，并且六面体在鼠标悬停的时候，需要往外扩
效果如下：

<template>

  <div>

    <div class="container">

      <!-- 外层立方体 -->

      <div class="outer-container">

        <div class="outer-top">

          <img :src="cat1" />

        </div>

        <div class="outer-bottom">

          <img :src="cat2" />

        </div>

        <div class="outer-front">

          <img :src="cat3" />

        </div>

        <div class="outer-back">

          <img :src="cat4" />

        </div>

        <div class="outer-left">

          <img :src="cat5" />

        </div>

        <div class="outer-right">

          <img :src="cat6" />

        </div>

      </div>

    </div>

  </div>

</template>



<script>

import cat1 from "@/assets/cats/cat1.png";

import cat2 from "@/assets/cats/cat2.png";

import cat3 from "@/assets/cats/cat3.png";

import cat4 from "@/assets/cats/cat4.png";

import cat5 from "@/assets/cats/cat5.png";

import cat6 from "@/assets/cats/cat6.png";



export default {

  data() {

    return {

      cat1,

      cat2,

      cat3,

      cat4,

      cat5,

      cat6,

    };

  },

};

</script>



<style lang="scss" scoped>

...

/* 设置图片可以在三维空间里展示 */

.container .outer-container {

  transform-style: preserve-3d;

}

/* 设置图片尺寸固定宽高200px */

.outer-container img {

  width: 200px;

  height: 200px;

}



/* 外层立方体样式 */

.outer-container .outer-top,

.outer-container .outer-bottom,

.outer-container .outer-right,

.outer-container .outer-left,

.outer-container .outer-front,

.outer-container .outer-back {

  position: absolute;

  top: 0;

  left: 0;

  width: 200px;

  height: 200px;

  border: 1px solid #fff;

  opacity: 0.3;

  transition: all 0.9s;

}



/* 全靠transform 属性撑起来了外面的六面体 */

.outer-top {

  transform: rotateX(90deg) translateZ(100px);

}



.outer-bottom {

  transform: rotateX(-90deg) translateZ(100px);

}



.outer-front {

  transform: rotateY(0deg) translateZ(100px);

}



.outer-back {

  transform: translateZ(-100px) rotateY(180deg);

}



.outer-left {

  transform: rotateY(90deg) translateZ(100px);

}



.outer-right {

  transform: rotateY(-90deg) translateZ(100px);

}



/* 鼠标悬停 外面的六面体，六条边都往外扩出去，并且透明度变浅了，猫猫图片更清晰了 */

.cube:hover .outer-top {

  right: -70px;

  bottom: -70px;

  opacity: 0.8;

  transform: rotateX(90deg) translateZ(200px);

}



.container:hover .outer-bottom {

  right: -70px;

  bottom: -70px;

  opacity: 0.8;

  transform: rotateX(-90deg) translateZ(200px);

}



.container:hover .outer-front {

  right: -70px;

  bottom: -70px;

  opacity: 0.8;

  transform: rotateY(0deg) translateZ(200px);

}



.container:hover .outer-back {

  right: -70px;

  bottom: -70px;

  opacity: 0.8;

  transform: translateZ(-200px) rotateY(180deg);

}



.container:hover .outer-left {

  right: -70px;

  bottom: -70px;

  opacity: 0.8;

  transform: rotateY(90deg) translateZ(200px);

}



.container:hover .outer-right {

  right: -70px;

  bottom: -70px;

  opacity: 0.8;

  transform: rotateY(-90deg) translateZ(200px);

}

</style>

步骤三

弄里面的六面体,这个六边形比较简单，没有移入移出，鼠标悬停等的样式效果
效果如下：

代码如下：

<template>

  <div>

    <div class="container">

      <!-- 外层立方体 -->

      ...

      <!-- 内层立方体 -->

      <div class="inner-container">

        <div class="inner-top">

          <img :src="cat7" />

        </div>

        <div class="inner-bottom">

          <img :src="cat8" />

        </div>

        <div class="inner-front">

          <img :src="cat9" />

        </div>

        <div class="inner-back">

          <img :src="cat10" />

        </div>

        <div class="inner-left">

          <img :src="cat11" />

        </div>

        <div class="inner-right">

          <img :src="cat12" />

        </div>

      </div>

    </div>

  </div>

</template>



<script>

...

import cat7 from "@/assets/cats/cat7.png";

import cat8 from "@/assets/cats/cat8.png";

import cat9 from "@/assets/cats/cat9.png";

import cat10 from "@/assets/cats/cat10.png";

import cat11 from "@/assets/cats/cat11.png";

import cat12 from "@/assets/cats/cat12.png";



export default {

  data() {

    return {

      ...

      cat7,

      cat8,

      cat9,

      cat10,

      cat11,

      cat12,

    };

  },

};

</script>



<style lang="scss" scoped>

...

/* 设置图片可以在三维空间里展示 */

.container .outer-container,

.container .inner-container {

  transform-style: preserve-3d;

}



...



/* 设置里面的六面体样式 */

/* 嵌套的内层立方体样式 */

.inner-container > div {

  position: absolute;

  top: 35px;

  left: 35px;

  width: 130px;

  height: 130px;

}

/* 里面的六面体尺寸宽高设置130px */

.inner-container img {

  width: 130px;

  height: 130px;

}



.inner-top {

  transform: rotateX(90deg) translateZ(65px);

}



.inner-bottom {

  transform: rotateX(-90deg) translateZ(65px);

}



.inner-front {

  transform: rotateY(0deg) translateZ(65px);

}



.inner-back {

  transform: translateZ(-65px) rotateY(180deg);

}



.inner-left {

  transform: rotateY(90deg) translateZ(65px);

}



.inner-right {

  transform: rotateY(-90deg) translateZ(65px);

}

</style>

最后完整代码：

<template>

  <div>

    <div class="container">

      <!-- 外层立方体 -->

      <div class="outer-container">

        <div class="outer-top">

          <img :src="cat1" />

        </div>

        <div class="outer-bottom">

          <img :src="cat2" />

        </div>

        <div class="outer-front">

          <img :src="cat3" />

        </div>

        <div class="outer-back">

          <img :src="cat4" />

        </div>

        <div class="outer-left">

          <img :src="cat5" />

        </div>

        <div class="outer-right">

          <img :src="cat6" />

        </div>

      </div>

      <!-- 内层立方体 -->

      <div class="inner-container">

        <div class="inner-top">

          <img :src="cat7" />

        </div>

        <div class="inner-bottom">

          <img :src="cat8" />

        </div>

        <div class="inner-front">

          <img :src="cat9" />

        </div>

        <div class="inner-back">

          <img :src="cat10" />

        </div>

        <div class="inner-left">

          <img :src="cat11" />

        </div>

        <div class="inner-right">

          <img :src="cat12" />

        </div>

      </div>

    </div>

  </div>

</template>



<script>

import cat1 from "@/assets/cats/cat1.png";

import cat2 from "@/assets/cats/cat2.png";

import cat3 from "@/assets/cats/cat3.png";

import cat4 from "@/assets/cats/cat4.png";

import cat5 from "@/assets/cats/cat5.png";

import cat6 from "@/assets/cats/cat6.png";

import cat7 from "@/assets/cats/cat7.png";

import cat8 from "@/assets/cats/cat8.png";

import cat9 from "@/assets/cats/cat9.png";

import cat10 from "@/assets/cats/cat10.png";

import cat11 from "@/assets/cats/cat11.png";

import cat12 from "@/assets/cats/cat12.png";



export default {

  data() {

    return {

      cat1,

      cat2,

      cat3,

      cat4,

      cat5,

      cat6,

      cat7,

      cat8,

      cat9,

      cat10,

      cat11,

      cat12,

    };

  },

};

</script>



<style lang="scss" scoped>

* {

  margin: 0px;

  padding: 0px;

}



.container {

  position: relative;

  margin: 0px auto;

  margin-top: 9%;

  margin-left: 42%;

  width: 200px;

  height: 200px;

  transform: rotateX(-30deg) rotateY(-80deg);

  transform-style: preserve-3d;

  animation: rotate 15s infinite;

  /* 我这里用一个边框线来更容易看到效果 */

  /* border: 1px solid red; */

}



/* 旋转立方体 */

@keyframes rotate {

  from {

    transform: rotateX(0deg) rotateY(0deg);

  }



  to {

    transform: rotateX(360deg) rotateY(360deg);

  }

}

/* 设置图片可以在三维空间里展示 */

.container .outer-container,

.container .inner-container {

  transform-style: preserve-3d;

}

/* 设置图片尺寸固定宽高200px */

.outer-container img {

  width: 200px;

  height: 200px;

}



/* 外层立方体样式 */

.outer-container .outer-top,

.outer-container .outer-bottom,

.outer-container .outer-right,

.outer-container .outer-left,

.outer-container .outer-front,

.outer-container .outer-back {

  position: absolute;

  top: 0;

  left: 0;

  width: 200px;

  height: 200px;

  border: 1px solid #fff;

  opacity: 0.3;

  transition: all 0.9s;

}



/* 全靠transform 属性撑起来了外面的六面体 */

.outer-top {

  transform: rotateX(90deg) translateZ(100px);

}



.outer-bottom {

  transform: rotateX(-90deg) translateZ(100px);

}



.outer-front {

  transform: rotateY(0deg) translateZ(100px);

}



.outer-back {

  transform: translateZ(-100px) rotateY(180deg);

}



.outer-left {

  transform: rotateY(90deg) translateZ(100px);

}



.outer-right {

  transform: rotateY(-90deg) translateZ(100px);

}



// 鼠标悬停 外面的六面体，六条边都往外扩出去，并且透明度变浅了，猫猫图片更清晰了

.cube:hover .outer-top {

  right: -70px;

  bottom: -70px;

  opacity: 0.8;

  transform: rotateX(90deg) translateZ(200px);

}



.container:hover .outer-bottom {

  right: -70px;

  bottom: -70px;

  opacity: 0.8;

  transform: rotateX(-90deg) translateZ(200px);

}



.container:hover .outer-front {

  right: -70px;

  bottom: -70px;

  opacity: 0.8;

  transform: rotateY(0deg) translateZ(200px);

}



.container:hover .outer-back {

  right: -70px;

  bottom: -70px;

  opacity: 0.8;

  transform: translateZ(-200px) rotateY(180deg);

}



.container:hover .outer-left {

  right: -70px;

  bottom: -70px;

  opacity: 0.8;

  transform: rotateY(90deg) translateZ(200px);

}



.container:hover .outer-right {

  right: -70px;

  bottom: -70px;

  opacity: 0.8;

  transform: rotateY(-90deg) translateZ(200px);

}



/* 设置里面的六面体样式 */

/* 嵌套的内层立方体样式 */

.inner-container > div {

  position: absolute;

  top: 35px;

  left: 35px;

  width: 130px;

  height: 130px;

}

/* 里面的六面体尺寸宽高设置130px */

.inner-container img {

  width: 130px;

  height: 130px;

}



.inner-top {

  transform: rotateX(90deg) translateZ(65px);

}



.inner-bottom {

  transform: rotateX(-90deg) translateZ(65px);

}



.inner-front {

  transform: rotateY(0deg) translateZ(65px);

}



.inner-back {

  transform: translateZ(-65px) rotateY(180deg);

}



.inner-left {

  transform: rotateY(90deg) translateZ(65px);

}



.inner-right {

  transform: rotateY(-90deg) translateZ(65px);

}

</style>

都看到这里了，求各位观众大佬们点个赞再走吧，你的赞对我非常重要

说一说从输入URL到页面呈现发生了什么？（知识点）

❝

这个题可以说是面试最常见也是一道可以无限难的题了，一般面试官出这道题就是为了考察你的前端知识的深度与广度。

❞

1.浏览器接受URL开启网络请求线程（涉及到：浏览器机制，线程与进程等）

2.开启网络线程到发出一个完整的http请求（涉及到：DNS解析，TCP/IP请求，5层网络协议等）

3.从服务器接收到请求到对应后台接受到请求（涉及到：负载均衡，安全拦截，后台内部处理等）

4.后台与前台的http交互（涉及到：http头，响应码，报文结构，cookie等）

5.缓存问题（涉及到：http强缓存与协商缓存等）（请看上一篇文章[这些浏览器面试题，看看你能回答几个？](juejin.cn/post/702653…

6.浏览器接受到http数据包后的解析流程（涉及到html词法分析，解析成DOM树，解析CSS生成CSSOM树，合并生成render渲染树。然后layout布局，painting渲染，复合图层合成，GPU绘制，等）

在浏览器地址栏输入URL

当我们在浏览器地址栏输入URL地址后，浏览器会开一个线程来对我们输入的URL进行解析处理。

浏览器中的各个进程及作用：（多进程）

• 浏览器进程：负责管理标签页的创建销毁以及页面的显示，资源下载等。


• 第三方插件进程：负责管理第三方插件。


• GPU进程：负责3D绘制与硬件加速（最多一个）。


• 渲染进程：负责页面文档解析（HTML，CSS，JS），执行与渲染。（可以有多个）

DNS域名解析

为什么需要DNS域名解析？

因为我们在浏览器中输入的URL通常是一个域名，并不会直接去输入IP地址（纯粹因为域名比IP好记），但我们的计算机并不认识域名，它只知道IP，所以就需要这一步操作将域名解析成IP。

URL组成部分

• protocol：协议头，比如http，https，ftp等；


• host：主机域名或者IP地址；


• port：端口号；


• path：目录路径；


• query：查询的参数；


• hash：#后边的hash值，用来定位某一个位置。

解析过程

• 首先会查看浏览器DNS缓存，有的话直接使用浏览器缓存


• 没有的话就查询计算机本地DNS缓存（localhost）


• 还没有就询问递归式DNS服务器（就是网络提供商，一般这个服务器都会有自己的缓存）


• 如果依然没有缓存，那就需要通过 根域名服务器 和TLD域名服务器 再到对应的 权威DNS服务器 找记录，并缓存到 递归式服务器，然后 递归服务器 再将记录返回给本地

「⚠️注意：」

❝

DNS解析是非常耗时的，如果页面中需要解析的域名过多，是非常影响页面性能的。考虑使用dns与加载或减少DNS解析进行优化。

❞

发送HTTP请求

拿到了IP地址后，就可以发起HTTP请求了。HTTP请求的本质就是TCP/IP的请求构建。建立连接时需要**「3次握手」进行验证，断开链接也同样需要「4次挥手」**进行验证，保证传输的可靠性。

3次握手

• 第一次握手：客户端发送位码为 SYN = 1（SYN 标志位置位），随机产生初始序列号 Seq = J 的数据包到服务器。服务器由 SYN = 1（置位）知道，客户端要求建立联机。


• 第二次握手：服务器收到请求后要确认联机信息，向客户端发送确认号Ack = （客户端的Seq +1，J+1），SYN = 1，ACK = 1（SYN，ACK 标志位置位），随机产生的序列号 Seq = K 的数据包。


• 第三次握手：客户端收到后检查 Ack 是否正确，即第一次发送的 Seq +1（J+1），以及位码ACK是否为1。若正确，客户端会再发送 Ack = （服务器端的Seq+1，K+1），ACK = 1，以及序号Seq为服务器确认号J 的确认包。服务器收到后确认之前发送的 Seq（K+1） 值与 ACK= 1 （ACK置位）则连接建立成功。

「直白理解：」

(客户端：hello，你是server么？服务端：hello，我是server，你是client么 客户端：yes，我是client 建立成功之后，接下来就是正式传输数据。)

4次挥手

• 客户端发送一个FIN Seq = M（FIN置位，序号为M）包，用来关闭客户端到服务器端的数据传送。


• 服务器端收到这个FIN，它发回一个ACK，确认序号Ack 为收到的序号M+1。


• 服务器端关闭与客户端的连接，发送一个FIN Seq = N 给客户端。


• 客户端发回ACK 报文确认，确认序号Ack 为收到的序号N+1。

「直白理解：」

(主动方：我已经关闭了向你那边的主动通道了，只能被动接收了 被动方：收到通道关闭的信息 被动方：那我也告诉你，我这边向你的主动通道也关闭了 主动方：最后收到数据，之后双方无法通信)

五层网络协议

1、应用层（DNS，HTTP）：DNS解析成IP并发送http请求；

2、传输层（TCP，UDP）：建立TCP连接（3次握手）；

3、网络层（IP，ARP）：IP寻址；

4、数据链路层（PPP）：封装成帧；

5、物理层（利用物理介质传输比特流）：物理传输（通过双绞线，电磁波等各种介质）。

「OSI七层框架：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层」

服务器接收请求做出响应

HTTP 请求到达服务器，服务器进行对应的处理。 最后要把数据传给浏览器，也就是返回网络响应。

跟请求部分类似，网络响应具有三个部分:响应行、响应头和响应体。

响应完成之后怎么办？TCP 连接就断开了吗？

不一定。这时候要判断Connection字段, 如果请求头或响应头中包含Connection: Keep-Alive， 表示建立了持久连接，这样TCP连接会一直保持，之后请求统一站点的资源会复用这个连接。否则断开TCP连接, 请求-响应流程结束。

状态码

状态码是由3位数组成，第一个数字定义了响应的类别，且有五种可能取值:

• 1xx：指示信息–表示请求已接收，继续处理。


• 2xx：成功–表示请求已被成功接收、理解、接受。


• 3xx：重定向–要完成请求必须进行更进一步的操作。


• 4xx：客户端错误–请求有语法错误或请求无法实现。


• 5xx：服务器端错误–服务器未能实现合法的请求。 平时遇到比较常见的状态码有:200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500(分别表示什么请自行查找)。

服务器返回相应文件

请求成功后，服务器会返回相应的网页，浏览器接收到响应成功的报文后便开始下载网页，至此，网络通信结束。

浏览器解析渲染页面

浏览器在接收到HTML，CSS，JS文件之后，它是如何将页面渲染在屏幕上的？

解析HTML构建DOM Tree

浏览器在拿到服务器返回的网页之后，首先会根据顶部定义的DTD类型进行对应的解析，解析过程将被交给内部的GUI渲染线程来处理。

「DTD（Document Type Definition）文档类型定义」

常见的文档类型定义

//HTML5文档定义

<!DOCTYPE html>

//用于XHTML 4.0 的严格型 

<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

//用于XHTML 4.0 的过渡型 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

//用于XHTML 1.0 的严格型 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

//用于XHTML 1.0 的过渡型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML解释器的工作就是将网络或者本地磁盘获取的HTML网页或资源从字节流解释成DOM树🌲结构

通过上图可以清楚的了解这一过程：首先是字节流，经过解码之后是字符流，然后通过词法分析器会被解释成词语（Tokens），之后经过语法分析器构建成节点，最后这些节点被组建成一颗 DOM 树。

对于线程化的解释器，字符流后的整个解释、布局和渲染过程基本会交给一个单独的渲染线程来管理（不是绝对的）。由于 DOM 树只能在渲染线程上创建和访问，所以构建 DOM 树的过程只能在渲染线程中进行。但是，从字符串到词语这个阶段可以交给单独的线程来做，Chrome 浏览器使用的就是这个思想。在解释成词语之后，Webkit 会分批次将结果词语传递回渲染线程。

这个过程中，如果遇到的节点是 JS 代码，就会调用 JS引擎 对 JS代码进行解释执行，此时由于 JS引擎 和 GUI渲染线程 的互斥，GUI渲染线程 就会被挂起，渲染过程停止，如果 JS 代码的运行中对DOM树进行了修改，那么DOM的构建需要从新开始

如果节点需要依赖其他资源，图片/CSS等等，就会调用网络模块的资源加载器来加载它们，它们是异步的，不会阻塞当前DOM树的构建

如果遇到的是 JS 资源URL（没有标记异步），则需要停止当前DOM的构建，直到 JS 的资源加载并被 JS引擎 执行后才继续构建DOM

解析CSS构建CSSOM Tree

CSS解释器会将CSS文件解释成内部表示结构，生成CSS规则树，这个过程也是和DOM解析类似的，CSS 字节转换成字符，接着词法解析与法解析，最后构成 CSS对象模型(CSSOM) 的树结构

构建渲染树（Render Tree）

等DOM Tree与CSSOM Tree都构建完毕后，接着将它们合并成渲染树（Render Tree），渲染树 只包含渲染网页所需的节点，然后用于计算每个可见元素的布局，并输出给绘制流程，将像素渲染到屏幕上。

渲染（布局，绘制，合成）

• 计算CSS样式 ；


• 构建渲染树 ；


• 布局，主要定位坐标和大小，是否换行，各种position overflow z-index属性 ；


• 绘制，将图像绘制出来。

这个过程比较复杂，涉及到两个概念: reflow(回流)和repain(重绘)。DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。

这里Reflow和Repaint的概念是有区别的：

（1）Reflow：即回流。一般意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树。

（2）Repaint：即重绘。意味着元素发生的改变只是影响了元素的一些外观之类的时候（例如，背景色，边框颜色，文字颜色等），此时只需要应用新样式绘制这个元素就可以了。

回流的成本开销要高于重绘，而且一个节点的回流往往回导致子节点以及同级节点的回流， 所以优化方案中一般都包括，尽量避免回流。

「回流一定导致重绘，但重绘不一定会导致回流」

「合成（composite）」

最后一步合成( composite )，这一步骤浏览器会将各层信息发送给GPU，GPU将各层合成，显示在屏幕上

普通图层和复合图层

可以简单的这样理解，浏览器渲染的图层一般包含两大类：普通图层以及复合图层

首先，普通文档流内可以理解为一个复合图层（这里称为默认复合层，里面不管添加多少元素，其实都是在同一个复合图层中）

其次，absolute布局（fixed也一样），虽然可以脱离普通文档流，但它仍然属于默认复合层。

然后，可以通过硬件加速的方式，声明一个新的复合图层，它会单独分配资源 （当然也会脱离普通文档流，这样一来，不管这个复合图层中怎么变化，也不会影响默认复合层里的回流重绘）

可以简单理解下：「GPU中，各个复合图层是单独绘制的，所以互不影响」，这也是为什么某些场景硬件加速效果一级棒

可以Chrome源码调试 -> More Tools -> Rendering -> Layer borders中看到，黄色的就是复合图层信息。

1. 隐藏活动栏

VS Code 左侧图标列表是“活动栏”，我们可以点击图标跳转到各个模块，我们可以通过配置 workbench.activityBar.visible 来控制活动栏的显示；

如果你想恢复显示，可以自定义快捷键来再次显示这块空间；

如何设置快捷键：keybindings

我们可以用 Ctrl+B 来隐藏/显示文件资源管理器，用 Ctrl+Alt+B 来隐藏/显示活动栏；

虽然，你也可以在命令面板 Ctrl+Shift+P 中搜索，不过使用快捷键就更有装杯效果~

活动栏在隐藏状态下，我们也可以通过快捷键跳转到不同的工作空间，比如 Ctrl+Shift+E（跳转到文件资源管理器）、Ctrl+Shift+X（跳转到扩展）、Ctrl+Shift+H（搜索和替换）等

2. AI 编码

GitHub Copilot 是 VS Code 的一个扩展，可在你编写代码时生成片段代码；

由于它是人工智能、机器学习，有可能会产生一些你不喜欢的代码，但是请别仇视它，毕竟 AI 编码是未来趋势！

处于隐私考虑，建议不要在工作中使用 Copilot，但是可以在个人项目中使用它，有趣又有用，尤其是对于单元测试；

可以在 settings.json 中配置 Copilot；

3. 字体与缩放

这个不多做解释，根据自己的需求进行文字大小及缩放比例的配置；

当然，你不一定要在 settings.json 中去编写这个配置，也可以在可选项及输入配置窗口进行配置。

4. 无拖拽/删除确认

如果你对自己的编程技能足够自信，或者对 VS Code 的 Ctrl+Z 足够自信，你可以配置取消删除确认；因为拖拽/删除确认有时也会干扰思路~

5. 自更新绝对路径

VS Code 的最佳功能之一是它的文件导入很友善，使用绝对路径，例如：@/components/Button 比 ../../Button 更让人舒适；

当移动文件重新组织目录时，希望 VS Code 能自动更新文件的路径？你可以配置它们：

请注意，您需要在 .tsconfig/.jsconfig 文件中配置路径才能使用绝对路径导入。

6. 保存执行

配置过 ESLint 保存修正的应该都知道这个配置。这个非常强大，出了 fixAll，还能 addMissingImports 补充缺少的 Imports，或者其它你想在保存后执行的行为；

这个配置就像是编程魔法~

7. CSS 格式化

你可能已经在使用 Stylelint 了，如果没有，请在配置中设置它！

另一个设置是 editor.suggest.insertMode，当设置为“replace”时，意味着——当你选择一个提示并按 Tab 或 Enter 时，将替换整个文本为提示，这非常有用。

8. 开启 Emmet

你可能熟悉 Emmet —— Web 开发人员必备工具包，如果没有，请设置它；虽然它内置于 VS Code，但必须手动配置启用；

9. Tailwind CSS

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。

虽然它目前尚未内置在 VS Code 中，但可作为免费的 VS Code 扩展进行安装使用，还可以配置附加设置增强它的功能！

10. 单击打开文件

VS Code 默认用户界面，有个奇怪的现象，它需要双击才能从文件资源管理器中打开文件。

单击一下得到的是奇怪的“预览”模式，当你单击下一个文件时，第一个文件就会消失。这就像只有一个标签。

需要进行这个配置，关闭后，单击将在新选项卡中打开文件。问题解决了~

将配置用 Settings Sync 进行同步，去哪都能个性化、自定义！酷的！

以上就是本篇分享，你有啥压箱底的 VS Code-settings.json 配置吗？欢迎评论留言，分享交流 (#^.^#)

defer 使用场景

defer 语句块中的代码, 会在当前作用域结束前调用, 常用场景如异常退出后, 关闭数据库连接

func someQuery() -> ([Result], [Result]){

    let db = DBOpen("xxx")

    defer {

        db.close()

    }

    guard results1 = db.query("query1") else {

        return nil

    }

    guard results2 = db.query("query2") else {

        return nil

    }

    return (results1, results2)

}

需要注意的是, 如果有多个 defer, 那么后加入的先执行

func someDeferFunction() {

    defer {

        print("\(#function)-end-1-1")

        print("\(#function)-end-1-2")

    }

    defer {

        print("\(#function)-end-2-1")

        print("\(#function)-end-2-2")

    }

    if true {

        defer {

            print("if defer")

        }

        print("if end")

    }

    print("function end")

}

someDeferFunction()

// 输出

// if end

// if defer

// function end

// someDeferFunction()-end-2-1

// someDeferFunction()-end-2-2

// someDeferFunction()-end-1-1

// someDeferFunction()-end-1-2

String 与 NSString 的关系与区别

NSString 与 String 之间可以随意转换,

let someString = "123"

let someNSString = NSString(string: "n123")

let strintToNSString = someString as NSString

let nsstringToString = someNSString as String

String 是结构体, 值类型, NSString 是类, 引用类型.

通常, 没必要使用 NSString 类, 除非你要使用一些特有方法, 例如使用 pathExtension 属性

怎么获取一个 String 的长度

不考虑编码, 只是想知道字符的数量, 用characters.count

"hello".characters.count // 5

"你好".characters.count // 2

"こんにちは".characters.count // 5

如果想知道在某个编码下占多少字节, 可以用

"hello".lengthOfBytes(using: .ascii) // 5

"hello".lengthOfBytes(using: .unicode) // 10

"你好".lengthOfBytes(using: .unicode) // 4

"你好".lengthOfBytes(using: .utf8) // 6

"こんにちは".lengthOfBytes(using: .unicode) // 10

"こんにちは".lengthOfBytes(using: .utf8) // 15

如何截取 String 的某段字符串

swift 中, 有三个取子串函数,

substring:to , substring:from, substring:with.

let simpleString = "Hello, world"

simpleString.substring(to: simpleString.index(simpleString.startIndex, offsetBy: 5))

// hello

simpleString.substring(from: simpleString.index(simpleString.endIndex, offsetBy: -5))

// world

simpleString.substring(with: simpleString.index(simpleString.startIndex, offsetBy: 5) ..< simpleString.index(simpleString.endIndex, offsetBy: -5))

// ,

使用起来略微麻烦, 具体用法可以参考我的另一篇文章http://www.jianshu.com/p/b3231f9406e9

throws 和 rethrows 的用法与作用

throws 用在函数上, 表示这个函数会抛出错误.

有两种情况会抛出错误, 一种是直接使用 throw 抛出, 另一种是调用其他抛出异常的函数时, 直接使用 try xx 没有处理异常.

如

enum DivideError: Error {

    case EqualZeroError;

}

func divide(_ a: Double, _ b: Double) throws -> Double {

    guard b != Double(0) else {

        throw DivideError.EqualZeroError

    }

    return a / b

}

func split(pieces: Int) throws -> Double {

    return try divide(1, Double(pieces))

}

rethrows 与 throws 类似, 不过只适用于参数中有函数, 且函数会抛出异常的情况, rethrows 可以用 throws 替换, 反过来不行

如

func processNumber(a: Double, b: Double, function: (Double, Double) throws -> Double) rethrows -> Double {

    return try function(a, b)

}

try？ 和 try！是什么意思

这两个都用于处理可抛出异常的函数, 使用这两个关键字可以不用写 do catch.

区别在于, try? 在用于处理可抛出异常函数时, 如果函数抛出异常, 则返回 nil, 否则返回函数返回值的可选值, 如:

print(try? divide(2, 1))

// Optional(2.0)

print(try? divide(2, 0))

// nil

而 try! 则在函数抛出异常的时候崩溃, 否则则返会函数返回值, 相当于(try? xxx)!, 如:

print(try! divide(2, 1))

// 2.0

print(try! divide(2, 0))

// 崩溃

associatedtype 的作用

简单来说就是 protocol 使用的泛型

例如定义一个列表协议

protocol ListProtcol {

    associatedtype Element

    func push(_ element:Element)

    func pop(_ element:Element) -> Element?

}

实现协议的时候, 可以使用 typealias 指定为特定的类型, 也可以自动推断, 如

class IntList: ListProtcol {

    typealias Element = Int // 使用 typealias 指定为 Int

    var list = [Element]()

    func push(_ element: Element) {

        self.list.append(element)

    }

    func pop(_ element: Element) -> Element? {

        return self.list.popLast()

    }

}

class DoubleList: ListProtcol {

    var list = [Double]()

    func push(_ element: Double) {// 自动推断

        self.list.append(element)

    }

    func pop(_ element: Double) -> Double? {

        return self.list.popLast()

    }

}

使用泛型也可以

class AnyList<T>: ListProtcol {

    var list = [T]()

    func push(_ element: T) {

        self.list.append(element)

    }

    func pop(_ element: T) -> T? {

        return self.list.popLast()

    }

}

可以使用 where 字句限定 Element 类型, 如:

extension ListProtcol where Element == Int {

    func isInt() ->Bool {

        return true

    }

}

什么时候使用 final

final 用于限制继承和重写. 如果只是需要在某一个属性前加一个 final.

如果需要限制整个类无法被继承, 那么可以在类名之前加一个final

public 和 open 的区别

这两个都用于在模块中声明需要对外界暴露的函数, 区别在于, public 修饰的类, 在模块外无法继承, 而 open 则可以任意继承, 公开度来说, public < open

声明一个只有一个参数没有返回值闭包的别名

没有返回值也就是返回值为 Void

typealias SomeClosuerType = (String) -> (Void)

let someClosuer: SomeClosuerType = { (name: String) in

    print("hello,", name)

}

someClosuer("world")

// hello, world

Self 的使用场景

Self 通常在协议中使用, 用来表示实现者或者实现者的子类类型.

例如, 定义一个复制的协议

protocol CopyProtocol {

    func copy() -> Self

}

如果是结构体去实现, 要将Self 换为具体的类型

struct SomeStruct: CopyProtocol {

    let value: Int

    func copySelf() -> SomeStruct {

        return SomeStruct(value: self.value)

    }

}

如果是类去实现, 则有点复杂, 需要有一个 required 初始化方法, 具体可以看这里 http://swifter.tips/use-self/

class SomeCopyableClass: CopyProtocol {

    func copySelf() -> Self {

        return type(of: self).init()

    }

    required init(){}

}

dynamic 的作用

由于 swift 是一个静态语言, 所以没有 Objective-C 中的消息发送这些动态机制, dynamic 的作用就是让 swift 代码也能有 Objective-C 中的动态机制, 常用的地方就是 KVO 了, 如果要监控一个属性, 则必须要标记为 dynamic, 可以参考我的文章http://www.jianshu.com/p/ae26100b9edf

什么时候使用 @objc

@objc 用途是为了在 Objective-C 和 Swift 混编的时候, 能够正常调用 Swift 代码. 可以用于修饰类, 协议, 方法, 属性.

常用的地方是在定义 delegate 协议中, 会将协议中的部分方法声明为可选方法, 需要用到@objc

@objc protocol OptionalProtocol {

    @objc optional func optionalFunc()

    func normalFunc()

}

class OptionProtocolClass: OptionalProtocol {

    func normalFunc() {

    }

}

let someOptionalDelegate: OptionalProtocol = OptionProtocolClass()

someOptionalDelegate.optionalFunc?()

Optional（可选型） 是用什么实现的

Optional 是一个泛型枚举

大致定义如下:

enum Optional<Wrapped> {

  case none

  case some(Wrapped)

}

除了使用 let someValue: Int? = nil 之外, 还可以使用let optional1: Optional<Int> = nil 来定义

前后端接口联调需要API文档，我们经常会使用工具来生成。之前经常使用Swagger来生成，最近发现一款好用的API文档生成工具smart-doc, 它有着很多Swagger不具备的特点，推荐给大家。

SpringBoot实战电商项目mall（50k+star）地址：github.com/macrozheng/…

聊聊Swagger

在我们使用Swagger的时候，经常会需要用到它的注解，比如@Api、@ApiOperation这些，Swagger通过它们来生成API文档。比如下面的代码：

Swagger对代码的入侵性比较强，有时候代码注释和注解中的内容有点重复了。有没有什么工具能实现零注解入侵，直接根据代码注释生成API文档呢？smart-doc恰好是这种工具！

smart-doc简介

smart-doc是一款API文档生成工具，无需多余操作，只要你规范地写好代码注释，就能生成API文档。同时能直接生成Postman调试文件，一键导入Postman即可调试，非常好用！

smart-doc具有如下优点：

生成API文档

接下来我们把smart-doc集成到SpringBoot项目中，体验一下它的API文档生成功能。

• 首先我们需要在项目中添加smart-doc的Maven插件，可以发现smart-doc就是个插件，连依赖都不用添加，真正零入侵啊；

<plugin>

    <groupId>com.github.shalousun</groupId>

    <artifactId>smart-doc-maven-plugin</artifactId>

    <version>2.2.8</version>

    <configuration>

        <!--指定smart-doc使用的配置文件路径-->

        <configFile>./src/main/resources/smart-doc.json</configFile>

        <!--指定项目名称-->

        <projectName>mall-tiny-smart-doc</projectName>

    </configuration>

</plugin>

• 接下来在项目的resources目录下，添加配置文件smart-doc.json，属性说明直接参考注释即可；

{

  "serverUrl": "http://localhost:8088", //指定后端服务访问地址

  "outPath": "src/main/resources/static/doc", //指定文档的输出路径，生成到项目静态文件目录下，随项目启动可以查看

  "isStrict": false, //是否开启严格模式

  "allInOne": true, //是否将文档合并到一个文件中

  "createDebugPage": false, //是否创建可以测试的html页面

  "packageFilters": "com.macro.mall.tiny.controller.*", //controller包过滤

  "style":"xt256", //基于highlight.js的代码高设置

  "projectName": "mall-tiny-smart-doc", //配置自己的项目名称

  "showAuthor":false, //是否显示接口作者名称

  "allInOneDocFileName":"index.html" //自定义设置输出文档名称

}

• 打开IDEA的Maven面板，双击smart-doc插件的smart-doc:html按钮，即可生成API文档；

• 此时我们可以发现，在项目的static/doc目录下已经生成如下文件；

• 运行项目，访问生成的API接口文档，发现文档非常详细，包括了请求参数和响应结果的各种说明，访问地址：http://localhost:8088/doc/index.html

• 我们回过来看下实体类的代码，可以发现我们只是规范地添加了字段注释，生成文档的时候就自动有了；

public class PmsBrand implements Serializable {

    /**

     * ID

     */

    private Long id;



    /**

     * 名称

     * @required

     */

    private String name;



    /**

     * 首字母

     * @since 1.0

     */

    private String firstLetter;



    /**

     * 排序

     */

    private Integer sort;



    /**

     * 是否为品牌制造商(0,1)

     */

    private Integer factoryStatus;



    /**

     * 显示状态(0,1)

     * @ignore

     */

    private Integer showStatus;



    /**

     * 产品数量

     */

    private Integer productCount;



    /**

     * 产品评论数量

     */

    private Integer productCommentCount;



    /**

     * 品牌logo

     */

    private String logo;



    /**

     * 专区大图

     */

    private String bigPic;



    /**

     * 品牌故事

     */

    private String brandStory;

    //省略getter、setter方法

}

• 再来看下Controller中代码，我们同样规范地在方法上添加了注释，生成API文档的时候也自动有了；

/**

 * 商品品牌管理

 */

@Controller

@RequestMapping("/brand")

public class PmsBrandController {

    @Autowired

    private PmsBrandService brandService;

    

    /**

     * 分页查询品牌列表

     *

     * @param pageNum 页码

     * @param pageSize 分页大小

     */

    @RequestMapping(value = "/list", method = RequestMethod.GET)

    @ResponseBody

    @PreAuthorize("hasRole('ADMIN')")

    public CommonResult<CommonPage<PmsBrand>> listBrand(@RequestParam(value = "pageNum", defaultValue = "1")

                                                                Integer pageNum,

                                                        @RequestParam(value = "pageSize", defaultValue = "3")

                                                                Integer pageSize) {

        List<PmsBrand> brandList = brandService.listBrand(pageNum, pageSize);

        return CommonResult.success(CommonPage.restPage(brandList));

    }

}

• 当然smart-doc还提供了自定义注释tag，用于增强文档功能；
  
  
  
  • @ignore：生成文档时是否要过滤该属性；
  
  
  • @required：用于修饰接口请求参数是否必须；
  
  
  • @since：用于修饰接口中属性添加的版本号。
  
  
  
  


• 为了写出优雅的API文档接口，我们经常会对返回结果进行统一封装，smart-doc也支持这样的设置，在smart-doc.json中添加如下配置即可；

{

  "responseBodyAdvice":{ //统一返回结果设置

    "className":"com.macro.mall.tiny.common.api.CommonResult" //对应封装类

  }

}

• 我们也经常会用枚举类型来封装状态码，在smart-doc.json中添加如下配置即可；

{

  "errorCodeDictionaries": [{ //错误码列表设置

    "title": "title",

    "enumClassName": "com.macro.mall.tiny.common.api.ResultCode", //错误码枚举类

    "codeField": "code", //错误码对应字段

    "descField": "message" //错误码描述对应字段

  }]

}

• 配置成功后，即可在API文档中生成错误码列表；

• 有时候我们也会想给某些接口添加自定义请求头，比如给一些需要登录的接口添加Authorization头，在smart-doc.json中添加如下配置即可；

{

  "requestHeaders": [{ //请求头设置

    "name": "Authorization", //请求头名称

    "type": "string", //请求头类型

    "desc": "token请求头的值", //请求头描述

    "value":"token请求头的值", //请求头的值

    "required": false, //是否必须

    "since": "-", //添加版本

    "pathPatterns": "/brand/**", //哪些路径需要添加请求头

    "excludePathPatterns":"/admin/login" //哪些路径不需要添加请求头

  }]

}

• 配置成功后，在接口文档中即可查看到自定义请求头信息了。

使用Postman测试接口

我们使用Swagger生成文档时候，是可以直接在上面测试接口的，而smart-doc的接口测试能力真的很弱，这也许是它拥抱Postman的原因吧，毕竟Postman是非常好用的接口测试工具，下面我们来结合Postman使用下！

• smart-doc内置了Postman的json生成插件，可以一键生成并导入到Postman中去，双击smart-doc:postman按钮即可生成；

• 此时将在项目的static/doc目录下生成postman.json文件；

• 将postman.json文件直接导入到Postman中即可使用；

• 导入成功后，所有接口都将在Postman中显示，这下我们可以愉快地测试接口了！

总结

smart-doc确实是一款好用的API文档生成工具，尤其是它零注解侵入的特点。虽然它的接口测试能力有所不足，但是可以一键生成JSON文件并导入到Postman中去，使用起来也是非常方便的！

参考资料

官方文档：gitee.com/smart-doc-t…

项目源码地址

github.com/macrozheng/…

前言

列表 ListView 是应用中最为常见得组件，而列表往往也会承载很多元素，当元素多，尤其是那种图片文件比较大的场合，就可能会导致列表卡顿，严重的时候可能导致应用崩溃。本篇来介绍如何优化列表。

优化点1：使用 builder构建列表

当你的列表元素是动态增长的时候（比如上拉加载更多），请不要直接用children 的方式，一直往children 的数组增加组件，那样会很糟糕。

//糟糕的用法

ListView(

  children: [

    item1,

    item2,

    item3,

    ...

  ],

)



//正确的用法

ListView.builder(

  itemBuilder: (context, index) => ListItem(),

  itemCount: itemCount,

)

对于 ListView.builder 是按需构建列表元素，也就是只有那些可见得元素才会调用itemBuilder 构建元素，这样对于大列表而言性能开销自然会小很多。

Creates a scrollable, linear array of widgets that are created on demand.
This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.

优化点2：禁用 addAutomaticKeepAlives 和 addRepaintBoundaries 特性

这两个属性都是为了优化滚动过程中的用户体验的。
addAutomaticKeepAlives 特性默认是 true，意思是在列表元素不可见后可以保持元素的状态，从而在再次出现在屏幕的时候能够快速构建。这其实是一个拿空间换时间的方法，会造成一定程度得内存开销。可以设置为 false 关闭这一特性。缺点是滑动过快的时候可能会出现短暂的白屏（实际会很少发生）。

addRepaintBoundaries 是将列表元素使用一个重绘边界（Repaint Boundary）包裹，从而使得滚动的时候可以避免重绘。而如果列表很容易绘制（列表元素布局比较简单的情况下）的时候，可以关闭这个特性来提高滚动的流畅度。

addAutomaticKeepAlives: false,

addRepaintBoundaries: false,

优化点3：尽可能将列表元素中不变的组件使用 const 修饰

使用 const 相当于将元素缓存起来实现共用，若列表元素某些部分一直保持不变，那么可以使用 const 修饰。

return Padding(

  child: Row(

    children: [

      const ListImage(),

      const SizedBox(

        width: 5.0,

      ),

      Text('第$index 个元素'),

    ],

  ),

  padding: EdgeInsets.all(10.0),

);

优化点4：使用 itemExtent 确定列表元素滚动方向的尺寸

对于很多列表，我们在滚动方向上的尺寸是提前可以根据 UI设计稿知道的，如果能够知道的话，那么使用 itemExtent 属性制定列表元素在滚动方向的尺寸，可以提升性能。这是因为，如果不指定的话，在滚动过程中，会需要推算每个元素在滚动方向的尺寸从而消耗计算资源。

itemExtent: 120,

优化实例

下面是一开始未改造的列表，嗯，可以认为是垃圾代码。

class LargeListView extends StatefulWidget {

  const LargeListView({Key? key}) : super(key: key);



  @override

  _LargeListViewState createState() => _LargeListViewState();

}



class _LargeListViewState extends State<LargeListView> {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('大列表'),

        brightness: Brightness.dark,

      ),

      body: ListView(

        children: List.generate(

          1000,

          (index) => Padding(

            padding: EdgeInsets.all(10.0),

            child: Row(

              children: [

                Image.network(

                  'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7869eac08a7d4177b600dc7d64998204~tplv-k3u1fbpfcp-watermark.jpeg',

                  width: 200,

                ),

                const SizedBox(

                  width: 5.0,

                ),

                Text('第$index 个元素'),

              ],

            ),

          ),

        ),

      ),

    );

  }

}

当然，实际不会是用 List.generate 来生成列表元素，**但是也不要用一个 List<Widget> 列表对象一直往里面加列表元素，然后把这个列表作为 ListView 的 **children！
改造后的代码如下所示，因为将列表元素拆分得更细，代码量是多一些，但是性能上会好很多。

import 'package:flutter/material.dart';



class LargeListView extends StatefulWidget {

  const LargeListView({Key? key}) : super(key: key);



  @override

  _LargeListViewState createState() => _LargeListViewState();

}



class _LargeListViewState extends State<LargeListView> {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('大列表'),

        brightness: Brightness.dark,

      ),

      body: ListView.builder(

        itemBuilder: (context, index) => ListItem(

          index: index,

        ),

        itemCount: 1000,

        addAutomaticKeepAlives: false,

        addRepaintBoundaries: false,

        itemExtent: 120.0,

      ),

    );

  }

}



class ListItem extends StatelessWidget {

  final int index;

  ListItem({Key? key, required this.index}) : super(key: key);



  @override

  Widget build(BuildContext context) {

    return Padding(

      child: Row(

        children: [

          const ListImage(),

          const SizedBox(

            width: 5.0,

          ),

          Text('第$index 个元素'),

        ],

      ),

      padding: EdgeInsets.all(10.0),

    );

  }

}



class ListImage extends StatelessWidget {

  const ListImage({Key? key}) : super(key: key);



  @override

  Widget build(BuildContext context) {

    return Image.network(

      'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7869eac08a7d4177b600dc7d64998204~tplv-k3u1fbpfcp-watermark.jpeg',

      width: 200,

    );

  }

}

总结

本篇介绍了 Flutter ListView 的4个优化要点，非常实用哦！实际上，这些要点都可以从官网的文档里找出对应得说明。因此，如果遇到了性能问题，除了搜索引擎外，也建议多看看官方的文档。另外一个，对于列表图片，有时候也需要前后端配合，比如目前的手机都是号称1亿像素的，如果上传的时候直接上传原图，那么加载如此大的图片肯定是非常消耗资源的。对于这种情况，建议是生成列表缩略图（可能需要针对不同屏幕尺寸生成不同的缩略图，比如掘金的文章头图，就分了几种分辨率）。