1.前言

大家好，最近一款ChatGPT的AI产品横空出世，他的强大的功能引起了广大网友的热议，并迅速席卷全球。

根据UBS发布的研究报告显示， ChatGPT在1月份的月活跃用户数已达1亿，成为史上用户数增长最快的消费者应用，相比之下， TikTok花了九个月的时间月活跃用户数才破亿，1月份平均每天有超过1300万名独立访问者使用ChatGPT ，是去年12月份的两倍多。

那么这么一款现象级的产品，我可不允许大家还没用过，今天就详细出一版ChatGPT注册教程，也是后面我们接入ChatGPT必须要做的第一步。

2.注册准备

ChatGPT把国内给禁掉了，包括港子和湾子，所以如果注册的话就要代理到其他国家。不然浏览器会提示该地区政策禁止使用。注册需要使用邮箱和手机号，手机号也有区域限制，因此手机号和邮箱也需要国外的邮箱手机才能注册成功。我也给大家梳理了以下个人感觉比较好用的虚拟站点，提供使用：

• 官网地址：chat.openai.com/auth/login 用来注册


• 神秘力量上网工具:这个就要靠自己了，也可以私聊我。


• 临时邮箱:temp-mail.org/zh/ 免费的临时虚拟邮箱


• 虚拟手机号:sms-man.com/cn 需要充值1美元，支持国内支付，问题不大

3.注册流程

3.1.账号创建

打开神秘力量上网工具，要走全局代理，不然也会被定位到国内不能使用。之后打开ChatGPT官网chat.openai.com/auth/login

进入创建账号页面，这里需要输入邮箱，我们先进入temp-mail.org/zh/ 获取免费的临时邮箱

输入邮箱，点击继续

输入密码，点击继续

3.2.邮箱验证

接下来就开始提示邮箱验证了，系统会发送一封邮件到邮箱，我们需要打开刚才的邮箱点击验证邮件。

打开temp-mail.org/zh/，发现下面多了一封openai发送的邮件，点开邮件

点击校验邮箱地址

3.3.身份输入

姓名输入，这个可以随便写，之后点击继续

3.4.手机号验证

接下来开始进行手机号验证

进入，sms-man.com/cn地址，先充值1美元的额度，接下来选择对应的国家，然后选择服务，找到OpenAi/ChatGPT,点击购买短信。

之后下方会多出一个号码，这个就是用来接收短信的号码

将短信复制到手机号填写的地方，删掉区号，点击发送短信

之后在虚拟手机号平台点击接收短信，这时候就会收到短信的验证码如下：

在ChatGPT验证码页面输入信息，验证通过后跳转对话页面。

3.5.Hello ChatGPT

验证码输入完成之后进入如下对话页面，来吧，作为传统第一步当然是来一句，Hello ChatGPT啦，到此，注册完毕，接下来就可以使用ChatGPT啦，你学废了吗？

近日，有个叫 ChatGPT 的同学来我司面试前端，考考他面试八股文。先来问问闭包。

第一问，说说 JS 闭包

追问，详细讲讲闭包

篇幅太长，转成文字，以下皆为 ChatGPT 回答

闭包是一个非常重要的 JavaScript 概念，也是相对难以理解的概念之一。为了更好地理解闭包，我们需要介绍一些相关的概念和知识。

1. 作用域

作用域（scope）是指在程序中能够访问变量、函数的区域。JavaScript 中有全局作用域和函数作用域两种。

全局作用域是指在整个程序中都可以访问的变量，它们在程序开始时就被创建，在程序结束时才被销毁。

函数作用域是指在一个函数内部声明的变量，只能在函数内部访问，而在函数外面是不能访问的。当函数执行完毕后，函数内部的变量会被销毁。

2. 词法作用域

词法作用域（lexical scope）是指在编写程序时，变量和函数的作用域是通过它们在代码中声明的位置来确定的。

这意味着，函数可以访问在其外部定义的变量和函数，但在其内部定义的变量和函数不能被外部访问。这是因为 JavaScript 引擎识别变量和函数的作用域是根据它们在代码中的位置来决定的，而不是根据它们被调用的位置。

3. 闭包的定义和作用

闭包（closure）是指函数能够访问其词法作用域之外的变量，即使在函数被调用后仍然可以访问。

换句话说，当一个函数在其外部定义的变量的作用域外被调用时，它可以访问这些变量，并且可以在调用完成之后继续访问这些变量。这就是闭包的作用。

举个例子，假设我们有一个函数 outer，它内部有一个变量 x，还返回了一个函数 inner，这个函数也访问了 x。那么，当我们调用 outer 函数并得到 inner 函数后，inner 函数就形成了一个闭包，它可以继续访问 outer 函数内部的变量 x。

function outer() {

  let x = 1;

  function inner() {

    console.log(x);

  }

  return inner;

}



let closure = outer();

closure(); // 1

在上面的例子中，我们通过调用 outer 函数得到了一个函数 closure，它可以访问 outer 函数内部的变量 x。在调用 closure 函数时，它会输出变量 x 的值。这就是闭包的作用。

4. 闭包的用途和注意事项

闭包可以用来创建一些类似于私有变量和方法的功能，以及实现一些高阶函数，如柯里化等。

举例来说，我们可以使用闭包来实现一个计数器：

function counter() {

  let count = 0;

  return function() {

    count++;

    console.log(count);

  };

}



let myCounter = counter();

myCounter(); // 1

myCounter(); // 2

myCounter(); // 3

在上面的例子中，counter 函数返回了一个函数，这个函数可以访问 counter 函数内部的变量 count，并且会在每次调用时将 count 加一，并输出加一后的结果。

需要注意的是，过多的闭包使用可能会导致性能问题和内存泄漏的风险，所以应该谨慎使用。特别是在循环语句中，不能滥用闭包。

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

  setTimeout(function() {

    console.log(i); // 输出的都是 10

  }, 1000);

}

在上面的例子中，我们在循环中使用了闭包，希望在每次循环时输出当前的计数器。但实际上，这个程序的输出结果是十个 10，因为在循环中创建的闭包都是共享同一个变量 i，而这个变量在循环结束时已经变成了 10。这就是闭包的一个陷阱：不能在循环中共享变量，否则会导致意外的结果。

那么如何解决在循环中使用闭包的陷阱

要解决在循环中使用闭包的陷阱，我们需要创建一个独立的变量。在 ES6 中，我们可以使用 let 关键字来声明一个块级作用域的变量，每次循环都可以创建一个新的变量，从而避免在闭包中共享同一个变量。

例如，在下面的例子中，我们可以通过在循环中使用 let 关键字来解决闭包的陷阱：

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

  setTimeout(function() {

    console.log(i); // 输出 0 到 9

  }, 1000);

}

在上面的例子中，我们使用 let 关键字来声明变量 i，这样每次循环都会创建一个新的变量，并且每个闭包都可以访问自己私有的变量。因此，输出的结果会是 0 到 9。

如果使用 ES5 或更低版本的 JavaScript，我们可以使用一个立即执行函数表达式（IIFE）来创建一个块级作用域。例如：

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

  (function(j) {

    setTimeout(function() {

      console.log(j); // 输出 0 到 9

    }, 1000);

  })(i);

}

在上面的例子中，我们创建了一个即时函数 function(j) { ... }(i)，这个函数会立即执行并创建一个新的作用域，把变量 i 的值传递给参数 j，从而避免在闭包中共享同一个变量。

let 的块级作用域讲讲

ES6 中引入了 let 关键字，它的一个重要特性就是可以创建块级作用域。这意味着，变量在块级作用域中声明，只能在该作用域内部访问，离开作用域后就会被销毁。

块级作用域是指用花括号 {} 包围的代码块，例如函数、条件语句、循环语句等。

举个例子，在下面的代码中，我们使用 let 关键字来声明一个块级作用域的变量 x，它只能在块级作用域中访问。

function myFunction() {

  if (true) {

    let x = 10;

    console.log(x); // 输出 10

  }

  console.log(x); // 报错：ReferenceError: x is not defined

}

在上面的代码中，变量 x 只能在 if 语句的代码块中访问，在代码块外部访问时会报错。

需要注意的是，块级作用域只适用于 let 和 const 关键字，而不适用于 var 关键字。

例如，在下面的代码中，我们使用 var 关键字来声明变量 x，它虽然在函数中声明，但是可以在函数外部访问。

function myFunction() {

  if (true) {

    var x = 10;

    console.log(x); // 输出 10

  }

  console.log(x); // 输出 10

}

在上面的代码中，变量 x 虽然在 if 语句的代码块中声明，但是可以在函数外部访问。这是因为 var 关键字具有提升（hoisting）的特性，即变量会被提升到函数的顶部声明，所以可以在整个函数中访问。但是，它的值只有在实际声明之后才会被赋值。

最后

好了，今天先到这。回去等通知吧。

如果你觉得内容对你有帮助，欢迎「转发」 、 「点赞」 、 「收藏」 。

你的鼓励是我最大的支持，猛戳“关注”，后续文章更精彩。

大家好，我是老表

前天 OpenAI 开放了两个新模型的api接口，专门为聊天而生的 gpt-3.5-turbo 和 gpt-3.5-turbo-0301。

ChatGPT is powered by gpt-3.5-turbo, OpenAI’s most advanced language model.

从上面这句话，我们可以知道现在 chat.openai.com 官网就是由 gpt-3.5-turbo 模型提供的服务，现在官方公开了这一模型的调用接口，这使得我们这些普通开发者也能直接在自己的应用/服务中使用这个狂揽亿万用户的模型。

接下来将和大家介绍如何利用 Python 快速玩转 gpt-3.5-turbo。

本文所有代码已开源，持续更新中：XksA-me/ChatGPT-3.5-AP

先跑起来，再理解

首先你需要有一个 openai 账号，如何注册我就不多说了，网上教程很多，而且很详细，如果有问题可以加我微信：pythonbrief，添加通过后请直接描述你的问题+问题截图。

访问下面页面，登录 openai 账号后，创建一个 api keys。

# api keys 创建页面

https://platform.openai.com/account/api-keys

接下来很简单了，安装 openai 官方的 Python SDK，这里需要注意的是得安装最新版本 openai，官方推荐的是 0.27.0 版本。

pip install openai==0.27.0

直接上请求代码：

import openai

import json



# 目前需要设置代理才可以访问 api

os.environ["HTTP_PROXY"] = "自己的代理地址"

os.environ["HTTPS_PROXY"] = "自己的代理地址"





def get_api_key():

    # 可以自己根据自己实际情况实现

    # 以我为例子，我是存在一个 openai_key 文件里，json 格式

    '''

    {"api": "你的 api keys"}

    '''

    openai_key_file = '../envs/openai_key'

    with open(openai_key_file, 'r', encoding='utf-8') as f:

        openai_key = json.loads(f.read())

    return openai_key['api']



openai.api_key = get_api_key()



q = "用python实现：提示手动输入3个不同的3位数区间，输入结束后计算这3个区间的交集，并输出结果区间"

rsp = openai.ChatCompletion.create(

  model="gpt-3.5-turbo",

  messages=[

        {"role": "system", "content": "一个有10年Python开发经验的资深算法工程师"},

        {"role": "user", "content": q}

    ]

)

代码解析：

• 
  

  get_api_key() 函数是我自己写的一个从文件读取 api keys 的方法，我是存在一个 openai_key 文件里，json 格式，你可以改成你自己的获取方法，甚至可以直接写到代码里（虽然不推荐，但确实最简单）。

  
  


• 
  

  q 是请求的问题

  
  


• 
  

  rsp 是发送请求后返回结果

  
  


• 
  

  openai.ChatCompletion.create 中参数

  
  


• 
  
  
  
  • model 是使用的模型名称，是一个字符串，用最新模型直接设置成gpt-3.5-turbo 即可
  
  
  
  


• 
  
  
  
  • messages 是请求的文本内容，是一个列表，列表里每个元素类型是字典，具体含义如下表：
    
  
  
  
  


• 
  

  程序运行返回内容，从响应回复内容我们可以看到，回复内容是一个 json 字符串，
  
  我们可以通过以下方法直接获取相关信息：

  
  

• 
  
  
  
  • 返回消息内容
  
  
  
  

rsp.get("choices")[0]["message"]["content"]

• 
  
  
  
  • 角色
  
  
  
  

rsp.get("choices")[0]["message"]["role"]

• 
  
  
  
  • 问题+回答总长度
  
  
  
  

rsp.get("usage")["total_tokens"]

其他信息也可以通过类似方法获取。

• 测试 ChatGPT 回答代码运行情况，可以看出代码逻辑和运行都没啥问题，注释也到位。

实现多轮对话

如何实现多轮对话？

gpt-3.5-turbo 模型调用方法 openai.ChatCompletion.create 里传入的 message 是一个列表，列表里每个元素是字典，包含了角色和内容，我们只需将每轮对话都存储起来，然后每次提问都带上之前的问题和回答即可。

• 
  

  效果图
  

  
  


• 
  
  
  
  • 可以看到，我首先问了“1+1=几”，然后问“为什么是这样”，ChatGPT 会根据前面的提问将新问题识别为“为什么1+1=2”。
  
  
  
  


• 
  
  
  
  • 后面继续问水仙花数有哪些，再问“如何写个python程序来识别这些数”，ChatGPT 同样会根据前面的提问将新问题识别为“如何写个python程序来识别这些水仙花数”，并给出对应解答。
  
  
  
  


• 
  

  实现代码

  
  

import openai

import json

import os



os.environ["HTTP_PROXY"] = "http://127.0.0.1:7890"

os.environ["HTTPS_PROXY"] = "http://127.0.0.1:7890"



# 获取 api

def get_api_key():

    # 可以自己根据自己实际情况实现

    # 以我为例子，我是存在一个 openai_key 文件里，json 格式

    '''

    {"api": "你的 api keys"}

    '''

    openai_key_file = '../envs/openai_key'

    with open(openai_key_file, 'r', encoding='utf-8') as f:

        openai_key = json.loads(f.read())

    return openai_key['api']

openai.api_key = get_api_key() 







class ChatGPT:

    def __init__(self, user):

        self.user = user

        self.messages = [{"role": "system", "content": "一个有10年Python开发经验的资深算法工程师"}]

        self.filename="./user_messages.json"



    def ask_gpt(self):

        # q = "用python实现：提示手动输入3个不同的3位数区间，输入结束后计算这3个区间的交集，并输出结果区间"

        rsp = openai.ChatCompletion.create(

          model="gpt-3.5-turbo",

          messages=self.messages

        )

        return rsp.get("choices")[0]["message"]["content"]





    def writeTojson(self):

        try:

            # 判断文件是否存在

            if not os.path.exists(self.filename):

                with open(self.filename, "w") as f:

                    # 创建文件

                    pass

            # 读取

            with open(self.filename, 'r', encoding='utf-8') as f:

                content = f.read()

                msgs = json.loads(content) if len(content) > 0 else {}

            # 追加

            msgs.update({self.user : self.messages})

            # 写入

            with open(self.filename, 'w', encoding='utf-8') as f:

                json.dump(msgs, f)

        except Exception as e:

            print(f"错误代码：{e}")

            



def main():

    user = input("请输入用户名称: ")

    chat = ChatGPT(user)

    

    # 循环

    while 1:

        # 限制对话次数

        if len(chat.messages) >= 11:

            print("******************************")

            print("*********强制重置对话**********")

            print("******************************")

            # 写入之前信息

            chat.writeTojson()

            user = input("请输入用户名称: ")

            chat = ChatGPT(user)

            

        # 提问

        q = input(f"【{chat.user}】")

        

        # 逻辑判断

        if q == "0":

            print("*********退出程序**********")

            # 写入之前信息

            chat.writeTojson()

            break

        elif q == "1":

            print("**************************")

            print("*********重置对话**********")

            print("**************************")

            # 写入之前信息

            chat.writeTojson()

            user = input("请输入用户名称: ")

            chat = ChatGPT(user)

            continue

            

        # 提问-回答-记录

        chat.messages.append({"role": "user", "content": q})

        answer = chat.ask_gpt()

        print(f"【ChatGPT】{answer}")

        chat.messages.append({"role": "assistant", "content": answer})





if __name__ == '__main__':

    main()

代码解析：

• 
  

  ChatGPT 类，包含三个函数：

  
  


• 
  
  
  
  • __init__初始化函数，初始化了三个个实例变量，user、messages、filename（当前用户、消息列表、存储记录的文件路径）。
  
  
  
  


• 
  
  
  
  • ask_gpt函数，将当前用户所有历史消息+最新提问发送给 gpt-3.5-turbo ，并返回响应结果。
  
  
  
  


• 
  
  
  
  • writeTojson函数，结束/重置用户时记录当前用户之前的访问数据。
  
  
  
  


• 
  

  main函数，程序入口函数，用户输入用户名后进入与 ChatGPT 的循环对话中，输入 0 退出程序，输入 1 重置用户，退出和重置都会将当前用户之前访问数据记录搭配 json 文件中。

  
  


• 
  

  由于 gpt-3.5-turbo 单次请求最大 token 数为：4096，所以代码里限制了下对话次数。

  
  

更多拓展

• 你可以写个函数，从 json 文件读取历史用户访问记录，然后每次访问可以选用户。


• 你可以写个 web 服务，使用 session 或者数据库支持多用户同时登录，同时访问。


• 你可以基于之前分享的钉钉机器人项目，将 gpt-3.5-turbo 接入钉钉机器人。

你还可以上 Github 搜索更多 ChatGPT 相关项目，或者其他有意思的项目学习练手，欢迎学习交流。

我创建了个 ChatGPT 应用交流群，如果你感兴趣可以扫下方二维码添加我微信申请加入。

项目已开源，持续更新中：XksA-me/ChatGPT-3.5-AP

前言

时间很快，2022年一整年好像都很忙，也终于从学生过渡到了一名社会人

2022上半年，大四，独自一人去杭州实习，孤独，但在杭州实习的那几个月，是我成长最快的几个月。

2022下半年，毕业，拒绝掉转正offer，拒绝掉对于应届生来说可观的薪资。回成都找了一份离家近，但是薪资少一半的工作，理想中就是钱少事少，下班后能开启新生活的工作，但事实真的如此吗？好多同学、长辈问过我后不后悔，当然后悔了，肠子都悔青了，属于是亲身体会了什么叫卷，什么叫钱少事情多压力大，再不涨薪已经准备提桶跑路了。我说：不后悔，毕竟成长了。

打工人的眼泪

见过凌晨五点的成都吗，我见过，那时候我刚下班。但是第二个月看着我四位数的工资的时候，我还是没忍住骂了一句：wtf？我为什么不去送外卖？

我真的不想把一个原本完美的毕业人设硬生生的过成了一个需要从低薪摸爬滚打上去的人设，但事实是，我好像在第二条路上越走越远。看看现在的自己，确实是有点奋斗逼（贬义）的模样（伤感）。

不可忽略的成长

不可否认的是，这一年，我通过自己的努力从一个前端小白变成了一个可以独当一面的初级前端工程师。

因为大学的专业是数字媒体技术，大一大二学完计算机科班相关知识后，大三主攻的方向有三个：J2EE，游戏开发，动画。

在没经历过秋招的摧残之前，我还沉迷于游戏开发，3d建模，剪视频，做动画。秋招的时候信心满满的投简历，但悲惨的结果就是秋招0 offer（真不怪专业，怪我菜）。看到隔壁软件工程的同学秋招收获满满，想到自己做游戏开发也接触过脚本语言，于是一个从来没接触过web开发的焦虑的大四应届生果断入坑了web前端。

回顾我的2022，大概是这样的：

• 
  

  1月 在系统学习了两个月前端基础知识（b站，红宝书，付费课程）的基础上，狂刷面试题。

  
  


• 
  

  2月 继续狂刷面试题，自学vue3框架，做了一个很简单的后台管理系统（vue3+axios+element plus）。凭借这个项目找到了我的第一份正式的实习

  
  


• 
  

  3月-5月 独自前往杭州实习，开始接触企业级项目，学会了git操作，css预编译sass，响应式布局，学会去封装组件，学会用node.js(egg.js框架)。与此同时，利用我的所有空闲时间去做毕业设计（原生微信小程序+mysql+nodejs+vue3后台管理系统）那段时间每天只能睡4-5个小时，睁开眼睛就要开始敲代码，但不得不说，这是我成长最最最快的三个月。

  
  


• 
  

  6月 回到成都远程办公，完成我的毕业论文，顺利答辩，顺利毕业，转正，离职，毕业旅行。

  
  


• 
  

  7月 毕业旅行完回成都找工作，因为7月只能参加社招，社招跟校招相比薪资待遇没那么好，但竞争不大。凭借之前的实习经验和看得过去的毕设一周拿到了三份offer（所以2023届的学弟学妹真的不要焦虑！），7月中旬入职，成为一名正式的前端开发工程师。

  
  


• 
  

  8月 第一次接触大屏开发，因为项目压力很大，自己也有很多不熟悉的东西，经常加班到凌晨。（抗压能力++

  
  


• 
  

  9月 第一次独立搭建项目，这段时间成长也很快。从0搭建一个项目与在一个大项目里面写功能写组件的差别很大！要考虑的东西非常多，从目录结构到变量命名都需要注意。这段时间我开始学习工程化，架构搭建的知识。了解vite的一些配置，开始注意一些代码规范（eslint，prettier），提交规范（commitlint）。也开始尝试使用TypeScript （独立开发能力++

  
  


• 
  

  10月 可视化开发，开始熟悉echarts相关知识，转正。（新技能++

  
  


• 
  

  11月 普通中后台项目的开发，之前的项目维护。与此同时，公司开发流程逐渐规范，对代码质量也有了一些要求，开始更注重代码的规范。公司有了技术分享会，前端后端一起学习分享，学到了一些工具的使用，大多都是在学校学不到的东西，收获很大，工作效率有了一定程度的提升。（代码整洁度++ 新技能++

  
  


• 
  

  12月 继续之前项目的维护，新的项目开始使用公司更规范更统一的脚手架搭建。这个时候了解了一些自动化ci部署，github action的使用。同时开始总结知识，写了几篇质量不高的博客。并开始尝试研究Git flow。

  
  

以上就是我这一年，从一个前端小白进化成一名初初初初级前端的过程，过程中很感谢大佬们正确的引导，虽然一直都是项目驱动成长，没有构建出完整的知识体系，但也算是入行了吧。可以给想要成为前端er的学弟学妹们一点点参考

2022年值得记录的瞬间

来杭州的第一天，感叹阿里人周末也要加班。

第一次做自我介绍

通宵肝毕设的日子

成为一名合格的铲屎官，小猫名字叫缓存，现在已经八斤啦

回成都后加班成为了日常便饭

2022给我带来了很多新奇的体验，浅浅分享一小部分最最值得纪念的瞬间。

关于2023的期望

立一点关于2023的flag：

• 需要更加熟练已有的技能


• 根据前端roadmap点亮更多技能。


• 学习框架原理、库、网络、性能、浏览器、协议、工程化、node相关知识，完善知识体系，不需要全部深入，但要尽可能了解，提升知识广度。


• 懂业务，深入业务，能解决业务痛点，更好的实现自己的价值


• 学会做饭


• 找个对象

最后最后：

希望自己：严于律己，减少焦虑

希望公司：减少加班，工资翻番

最近有很多朋友咨询我关于想转行学IT的问题，我想结合自身的经历和思考和各位聊几句，本文带有比较强的主观色彩，因此文中观点仅供参考，如有不当之处，敬请海涵。

笔者19年本科毕业于一所中流211，毕业之后一直在做Java开发，我并没有进大厂，也没有年薪百万，就是芸芸众生中普通的那一个。现在回顾当时入行的经历，基本是摸着石头过河，因此在有了一些经验之后，就想给和我当时一样处境的朋友一点建议，希望能对你有所启发。

很多问题其实都要结合个人的实际情况来看，每个人的知识、能力、经历都各不相同，所以无论做出任何决定，都需要结合自身的情况。

是否有必要参加培训机构？

这个问题的答案是因人而异的，最主要的点在于你是否有足够的恒心和自制力。

现在互联网上的学习资料已经非常多了，足够支撑你从零学到能够入行的过程。如果你的自制力比较好，那么你就可以尝试自学，不过自学的过程是孤独的，也是难熬的；如果你的自制力一般，无法在不是“学校”那么环境下进行学习，那就可以考虑培训机构。

需要特别强调的是，不能以为进了培训机构就以为一定能够就业了，说到底，学习这件事情，还是要靠你自己，别人是没有办法把知识灌进你的脑袋里的。培训机构也有一些无法忽视的问题，当你毕业之后，大概率机构会给你伪造一份简历，本来学习的时间就并不是很长，你很快可能就会发现，培训机构里面学的比较浅，还不足以应付面试官的八股文，这时候你可能就会想先入行再说，然后进了一家外包公司，然后开始混日子，这也是笔者见过的最多的案例。

参加培训机构最大的问题是简历，培训机构给大家做的项目都是极其雷同的，也可能会在培训机构之后，让你自己编项目经验，有经验的面试官很容易就能判断出，你是真的参与了项目开发，还是只是包装的。另外你可能还会碰到，很多公司需要上一家公司的离职证明和银行流水，甚至需要你个税APP报税界面的录屏等等问题，这些在求职的时候会碰到的现实问题，培训机构并不会告诉你。

总而言之，转行是一件对你的人生来说，是一件极其重要的事情，要反复思虑，不要脑子一热，听身边的朋友说，那个谁谁谁培训了几个月就月入过万，然后就稀里糊涂花了几万参加了培训机构，结果培训结束真正找工作的时候又发现困难重重，现实往往比想象的残酷。

高中毕业可以从事IT行业吗？

真相是，现在如果要从事IT行业，大专及以上学历是基本要求，不排除个人大专以下学历也找到了很好的IT工作，但是在当下这么“卷”的环境下，就是幸存者偏差了。大专的学历我也非常建议你先提升学历，有一个本科学历。

互联网爆发的红利期已经过去了，在没有新的风口出现的情况下，互联网的业务和从业人员都已经趋于饱和。换句话说，公司也不再会盲目进行扩张，进而产生大量的劳动力缺口，这也是目前为什么互联网公司会越来越在乎学历的原因之一。可以预见，进入这个行业的门槛会越来越高。

前端、后端还是测试？

其实从某种意义来说，选择岗位就是选择某种编程语言，选择编程语言也是在选择岗位，这个问题，你也可以结合下文编程语言之间的对比，找到自己合适的岗位。大体而言，测试、前端、后端，这三者的难度是依次递增的（对大部分人而言）。

如果你没有科班背景，但是又想从事IT行业，那么你可以考虑从事测试、运维工作甚至产品、运营的工作，其实学会写代码并不是唯一的选择。

如果你有一定的基础，但是逻辑思维又不是那么强，那么我建议你可以考虑前端，女生大部分学习编程都会选择前端，前端由于不需要考虑架构、性能（大部分场景），因此难度会小一些，对初学者更加友好。不过，前端经过这些年的发展，知识体系俨然已经非常庞大，后期也需要学习很多的东西。

如果你有一定的基础，且逻辑思维还可以，那么我建议你可以考虑后端，如果你不知道自己的思维能力怎么样，可以学一些Java或者JavaScript语言基础，看看自己是不是能够比较轻松的学会。

Java、Python、C++还是JavaScript？

编程语言只是工具，并没有优劣之分，我们需要在不同的场景选择合适的编程语言。下面我将对常见的几种编程语言做浅要的分析，希望能帮助你找到最适合你的编程语言。

随着时代发展，有了越来越多新的优秀的编程语言，比如Rust、kotlin、Dart等等，它们都在努力的甩掉前面编程语言的历史包袱，但是截止目前，相关的岗位的数量还不是很多，与我下面提到的编程语言相比，它们更适合作为你的第二门编程语言。

Java

如果你已经决定了要从事软件开发行业，但是还不清楚，要选择哪一门编程语言，那我推荐你可以学习Java，Java这门语言本身虽然并不优秀，截止目前，Java已经走过了20个年头，有着非常丰富的生态，web端，它有JSP、Servlet，移动端，它有Android，服务器端有SpringBoot，桌面端它有JavaFX，也有非常优秀的网络通信框架，比如Netty，甚至它也做出过操作系统（塞班系统），可以说，Java虽然很“烂”，但是它真的几乎无所不能。

不可否认Java的成功，但是Java也存在一些隐患，比如在Oracle收购了Sun公司之后，在Oracle不断地花式作妖下，Java的未来似乎也有些扑朔迷离。除此之外，Java在引以为傲的领域也逐渐有了一些竞争对手，比如服务端有go语言、nodejs，Android的开发官方首选语言已经变成kotlin，JSP的市场基本上已经被Vue、React等SPA框架所替代，但是Java却并没有开拓出自己新的应用场景，虽然笔者认为，基于VM的语言并不是消失，但是Java是能否一直守住自己的王座，还是要打一个问号的。

Java目前最多的就业方向就是服务端开发，如果你学习了Java，那么大概率会做服务端开发，短期内，服务端开发Java还是很难被其他语言替代。强类型的语言加上对并发编程的支持，让Java非常适合构建大型的服务端应用，这也是Java最深耕的方向，学会Java服务端的开发，也比较方便向大数据或数据分析岗位进行转型。

最后我想说，Java的岗位在我提到的编程语言里面也是最多的，这也是我推荐你学习它的一个重要原因，很多编程语言，虽然看起来很热门但是，但是当你真正学完去找工作的时候，却又发现岗位少的可怜，没错，说的就是你，Python。

Python

Python这门编程语言，“胶水语言”的特性让它看起来也几乎无所不能，虽然这种能力很有可能来自其他的语言，Python只是作为客户端，调用其他语言的类库。

不够“底层”其实并不是什么缺点，学习Python最大的问题是，是对学历有要求，Python应用最广泛的领域，大部分都对学历有要求，虽然你可能看过很多投放Python的广告，自动化办公、爬虫等等，但是这些特性在企业中的岗位是比较少的，而Python擅长的算法、人工智能、深度学习等领域都是需要研究生学历的。

我们总结一下，如果你有研究生学历，那么学习Python是一个不错的选择，不过我也见过有的研究生朋友学完Python之后发现岗位很少，又被迫转Java的案例。

C++

C++相比于其他的编程语言，其入门的门槛的会更高，花费在学习语言本身的时间的也会很多。C++在经历过这么多年的迭代之后，语言的特性非常多，会让初学者有一种眼花缭乱的特性，实现同一个功能，可能会有很多种写法。不可否认，C++是一门优秀的编程语言，但是高昂的学习成本也让人望而却步，如果你不是科班出身，只是想学一门技术进入互联网行业，那C++并不是一个很好的选择。

C++常见的就业方向有以下几种：服务器端开发、游戏、QT、嵌入式、人工智能。可以看出，C++最适合的还是那些对性能有要求的场景。原来很大一部分C++程序员都是做QT开发，但是C++在桌面端的市场已经出现了越来越多的竞争者，比如Hybrid 技术、React Native、Weex、Flutter，这些技术让原来web端的程序员或者移动端的程序员也能写出跨平台的应用，并且这些技术保留了他们原本的开发习惯，这对QT的打击，无疑是毁灭性的。

那么C++是不是已经过时，或者即将被淘汰呢？其实不然，C++只是让出了一些自己不是那么擅长的领域，但是在底层应用的开发，C++丰富的生态和优越的性能还是首选。如果你有志在这些领域发展，那么C++将是你很好的选择。

随着越来越多的人对核心自研技术的重视，这种比较偏底层的岗位，会越来越多，最近几年，国产操作系统的发展就是一个很好的例子，在政策的扶持下，各家公司几乎都在号称自研操作系统，可以预料，在不远的将来，这些核心的系统的研发，都需要大量C/C++语言的人才。

JavaScript

作为一门十天就被开发出来的编程语言，JavaScript身上的历史包袱也有很多，但这并不妨碍它的伟大，JavaScript在我们的日常生活中，几乎无处不在。

JavaScript也是一门易学难精的语言，虽然上手比较容易，但是后期也需要很多的时间去理解和巩固。JavaScript是前端程序员最重要的技术，没有之一，学好了JavaScript，就能在前端这个领域里无所不能。JavaScript现在也开始逐渐的在其他领域崭露头脚，它与TypeScript相辅相成，可以预见，JavaScript是一门历久弥新，并且前景良好的编程语言。

笔者对JavaScript最深的感受就是，与JavaScript相关的技术栈的更新迭代都非常的快，在我刚刚毕业的时候，Vue.js还是非常新鲜的东西，截止今天，Vue.js已经成为前端找工作的必备技能。JavaScript的框架总是层出不穷，让人有一种学不动了的感觉。造成这种“混乱”的背后原因有很多，这也从侧面反映了大家对JavaScript的热爱和探索。

路漫漫其修远兮，吾将上下而求索

我非常建议你在决定入行之前，提前找一些学习资料，自己尝试一下是否能够学的清楚，并且能从中获取乐趣。

兴趣和恒心是决定你能不能在这个行业长足发展的决定性因素。面对海量的，对你而言是闻所未闻的知识，如果没有兴趣，你每天都会深受折磨；这个行业特质决定了我们需要不断地学习，没有恒心，总有一天会掉队，跟不上技术更新迭代的脚步。

总而言之，道阻且长，希望本文能对你

前言

在日常开发中，随着APP功能迭代发现打出的安装包体积越来越大，这里说的大是猛增的那种大，而并非一点一点增大。从最开始的几兆到后面的几十兆，虽然市面上的很多APP甚至达到上百兆，但毕竟别人功能强大，用到的一些底层库就特别占面积，流量也多所以也可理解。但自研的一些APP可经不住这些考验，所以能压缩就压缩，能优化就尽量优化，以得到用户最好的体验，下面就来说说我在项目中是如何优化APP体积的。

1. 本地资源优化

这里主要是压缩一些图片和视频。项目中本地资源用到最多的应该就是图片，几乎每个页面都离不开图标，甚至一些页面采用大图片的形式。你可知道，正常不经压缩的图片大的可以上大几十兆，小则也是一兆起步。这里做了个实验，同一个文件分别采用svg、png、使用tiny压缩后的png、webp四种类型图片进行展示（顺序是从左到右，从上到下）：

可以看到，加载出来的效果几乎没有什么区别，但体积却有很大的差别（其中webp是采取的默认75%转换）：

所以，别再使用png格式图片，太浪费资源了，就算经过压缩还是不及svg和webp，这里的webp其实还可以加大转换力度，但个人还是比较喜欢svg。

至于音视频文件也是可以通过其他工具进行压缩再放入本地，如非必要，尽量还是使用网络资源。

2. lib优化

一些三方库会使用底层so文件，一般在配置的时候我们尽量选择一种cpu类型，这里选择armeabi-v7a，其实几乎都兼容

ndk {

     //设置支持的SO库架构 armeabi、armeabi-v7a、arm64-v8a、x86、x86_64、mips、mips64

     abiFilters 'armeabi-v7a'

}

可以看看APK体积分析，每种cpu占用体积都比较大，少配置一种就能省下不少空间。

3. 代码混淆、无用资源的删除

在bulid.gradle中配置minifyEnabled true开启代码混淆，还需要配置混淆规则，否则无法找到目标类。shrinkResources true则是打包时不会将无用资源打入包内，这里有个小坑。之前使用腾讯地图时，某些第三方的静态资源会因为这个操作不被打入包内，导致无法找到资源，所以根据具体情况使用。

 release {

            buildConfigField "boolean", "LOG_DEBUG", "false"

            minifyEnabled true

//          shrinkResources true 慎用，可能会导致第三方资源文件找不到

            zipAlignEnabled true

            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'

        }

4. 代码复用，剔除无用代码

项目中由于多人协同开发会出现各写各的情况，需要抽出一些公共库之类的工具，方便代码复用。一些注释掉的代码该删除就删除。其实这一部分优化的体积相当少，但也得做，也是对代码质量的一种提升。

总结

其实只要做到了以上四步，APP体积优化已经得到了很大程度的提升了，其他再怎么优化效果也不是很明显了，最主要的就是本地资源和第三方so包体积占用较多。图片的使用我们尽量做到：小图标用svg，全屏类的大图可以考虑webp，最好不要使用png。ndk配置最好只配置一款cpu，几乎都可兼容，万不得已再加一个。

以上便是全部内容，希望对大家有所帮助。

答案是采用了原型模式。

原型模式的好处在于方便地拷贝某个实例的属性进行使用、又不会对原实例造成影响，其逻辑在于对 Cloneable 接口的实现。

话不多说看下 Intent 的关键源码：

 // frameworks/base/core/java/android/content/Intent.java

 public class Intent implements Parcelable, Cloneable {

     ...

     private static final int COPY_MODE_ALL = 0;

     private static final int COPY_MODE_FILTER = 1;

     private static final int COPY_MODE_HISTORY = 2;

 ​

     @Override

     public Object clone() {

         return new Intent(this);

     }

 ​

     public Intent(Intent o) {

         this(o, COPY_MODE_ALL);

     }

 ​

     private Intent(Intent o, @CopyMode int copyMode) {

         this.mAction = o.mAction;

         this.mData = o.mData;

         this.mType = o.mType;

         this.mIdentifier = o.mIdentifier;

         this.mPackage = o.mPackage;

         this.mComponent = o.mComponent;

         this.mOriginalIntent = o.mOriginalIntent;

         ...

 ​

         if (copyMode != COPY_MODE_FILTER) {

             ...

             if (copyMode != COPY_MODE_HISTORY) {

                 ...

             }

         }

     }

     ...

 }

可以看到 Intent 实现的 clone() 逻辑是直接调用了 new 并传入了自身实例，而非调用 super.clone() 进行拷贝。

默认的拷贝策略是 COPY_MODE_ALL，顾名思义，将完整拷贝源实例的所有属性进行构造。其他的拷贝策略是 COPY_MODE_FILTER 指的是只拷贝跟 Intent-filter 相关的属性，即用来判断启动目标组件的 action、data、type、component、category 等必备信息。无视启动 flag、bundle 等数据。

 // frameworks/base/core/java/android/content/Intent.java

 public class Intent implements Parcelable, Cloneable {

     ...

     public @NonNull Intent cloneFilter() {

         return new Intent(this, COPY_MODE_FILTER);

     }

 ​

     private Intent(Intent o, @CopyMode int copyMode) {

         this.mAction = o.mAction;

         ...

 ​

         if (copyMode != COPY_MODE_FILTER) {

             this.mFlags = o.mFlags;

             this.mContentUserHint = o.mContentUserHint;

             this.mLaunchToken = o.mLaunchToken;

             ...

         }

     }

 }

还有中拷贝策略是 COPY_MODE_HISTORY，不需要 bundle 等历史数据，保留 action 等基本信息和启动 flag 等数据。

 // frameworks/base/core/java/android/content/Intent.java

 public class Intent implements Parcelable, Cloneable {

     ...

     public Intent maybeStripForHistory() {

         if (!canStripForHistory()) {

             return this;

         }

         return new Intent(this, COPY_MODE_HISTORY);

     }

 ​

     private Intent(Intent o, @CopyMode int copyMode) {

         this.mAction = o.mAction;

         ...

 ​

         if (copyMode != COPY_MODE_FILTER) {

             ...

             if (copyMode != COPY_MODE_HISTORY) {

                 if (o.mExtras != null) {

                     this.mExtras = new Bundle(o.mExtras);

                 }

                 if (o.mClipData != null) {

                     this.mClipData = new ClipData(o.mClipData);

                 }

             } else {

                 if (o.mExtras != null && !o.mExtras.isDefinitelyEmpty()) {

                     this.mExtras = Bundle.STRIPPED;

                 }

             }

         }

     }

 }

总结起来：

除了 Intent，Android 源码中还有很多地方采用了原型模式。

• 
  

  Bundle 也实现了 clone()，提供了 new Bundle(this) 的处理：

  
  

   public final class Bundle extends BaseBundle implements Cloneable, Parcelable {
  
       ...
  
       @Override
  
       public Object clone() {
  
           return new Bundle(this);
  
       }
  
   }
  
  

  
  


• 
  

  组件信息类 ComponentName 也在 clone() 中提供了类似的实现：

  
  

   public final class ComponentName implements Parcelable, Cloneable, Comparable<ComponentName> {
  
       ...
  
       public ComponentName clone() {
  
           return new ComponentName(mPackage, mClass);
  
       }
  
   }
  
  

  
  


• 
  

  工具类 IntArray 亦是如此：

  
  

   public class IntArray implements Cloneable {
  
       ...
  
       @Override
  
       public IntArray clone() {
  
           return new IntArray(mValues.clone(), mSize);
  
       }
  
   }
  
  

  
  

原型模式也不一定非得实现 Cloneable，提供了类似的实现即可。比如：

• 
  

  Bitmap 没有实现该接口但提供了 copy()，内部将传递原始 Bitmap 在 native 中的对象指针并伴随目标配置进行新实例的创建：

  
  

   public final class ComponentName implements Parcelable, Cloneable, Comparable<ComponentName> {
  
       ...
  
       public Bitmap copy(Config config, boolean isMutable) {
  
           ...
  
           noteHardwareBitmapSlowCall();
  
           Bitmap b = nativeCopy(mNativePtr, config.nativeInt, isMutable);
  
           if (b != null) {
  
               b.setPremultiplied(mRequestPremultiplied);
  
               b.mDensity = mDensity;
  
           }
  
           return b;
  
       }
  
   }
  
  

  
  

<

作者：TechMerger
来源：juejin.cn/post/7204013918958649405
li>

前言

开发同学应该都很熟悉我们页面的渲染过程一般是从Activity#onCreate开始，再发起网络请求，等请求回调回来后，再基于网络数据渲染页面。可以用下面这幅图来粗略描述这个过程：

可以看到，目标页面渲染完成前必须得等待网络请求，导致渲染速度并没有那么快。尤其是当网络并不好的时候感受会更加明显。并且，当目标页面是H5页面或者是Flutter页面的时候，因为涉及到H5容器与Flutter容器的创建，白屏时间会更长。

那么有没有可能提前发起请求，来缩短网络请求这一部分的等待时间呢？这就是我们今天要讲的部分，接口预请求。

目标

我们要达到的目标很简单，就是提前异步发起目标页面的网络请求，从而加快目标页面的渲染速度。改善后的过程可以用下图表示：

并且，我们的预请求能力需要尽量少地侵入业务，与业务解耦，并保证能力的通用性，适用于工程内的任意页面（Android页面、H5页面、Flutter页面）。

方案

整体链路

首先给大家看一下整体链路，具体的细节可以先不用去抠，下面会一一讲到。

预请求时机

预请求时机一般有三种选择：

1. 由业务层自行选择时机进行异步预请求


2. 点击控件时进行异步预请求


3. 路由最终跳转前进行异步预请求

第1种选择，由业务层自行选择时机进行预请求，需要涉及到业务层的改造，以及对时机合理性的把握。一方面是存在改造成本，另一方面是无法保证业务侧调用时机的合理性。

第2种选择，点击控件时进行预请求。若点击时进行预请求，点击事件监听并不是业务域统一的，无法形成有效封装。并且，若后续路由拦截器修改了参数，或是终止了跳转，这次预请求就失去了意义。

因此这里我们选择第3种，基于统一路由框架，在路由最终跳转前进行预请求。既保证了良好的封装性，也实现了对业务的零侵入，同时也做到了懒请求，即用户必然要发起该请求时才会去预请求。这里需要注意的是必须是在最终跳转前进行预请求，可以理解为是路由的最后一个前置异步拦截器。

预请求规则配置

我们通过本地的json文件（当然，有需要也可以上云通过配置后台下发），对预请求的规则进行配置，并将这份配置在App启动阶段异步读入到内存。后续在路由过程中，只有命中了预请求规则，才能发起预请求。配置demo如下：

{

  "routeConfig":{

    "scheme://domain/path?param1=true&itemId=123":["prefetchKey"],

    "route2":["prefetchKey2"],

    "route3":["prefetchKey3","prefetchKey4"]

  },

  "prefetcher":{

    "prefetchKey":{

      "prefetchType":"network",

      "prefetchInfo":{

        "api":"network.api.name",

        "apiVersion":"1.0",

        "method":"post",

        "needLogin":"false",

        "showLoginUI":"false",

        "params": {

          "itemId":"$route.itemId",

          "firstTime":"true"

        },

        "headers": {

          

        },

        "prefetchImgInResponse": [

          {

            "imgUrl":"$data.imgData.img",

            "imgWidth":"$data.imgData.imgWidth",

            "imgHeight":150

          }

        ]

      }

    },

    "prefetchKey2":{

      "prefetchType":"network",

      "prefetchInfo":{

        "api":"network.api.name2",

        "apiVersion":"1.0",

        "method":"post",

        "needLogin":"false",

        "showLoginUI":"false",

        "params": {

          "itemId":"$route.productId",

          "firstTime":"false"

        },

        "headers": {

          

        }

    },

    "prefetchKey3":{

      "prefetchType":"image",

      "prefetchInfo":{

        "imgUrl":"$route.imgUrl",

        "imgWidth":"$route.imgWidth",

        "imgHeight": 150

      }

    },

    "prefetchKey4":{

      "prefetchInfo":{}

    }

  }

}

规则解读

举例说明

网络预请求

例如跳转目标页面，它的路由是scheme://domain/path?param1=true&itemId=123。

首先我们在跳转路由时，若跳转的路由是这个目标页面，我们就会尝试去发起预请求。根据上面的demo配置文件，它将匹配到prefetchKey这个预请求。

那么我们详细看prefetchKey这个预请求，预请求类型prefetchType为network，是一个网络预请求，prefetchInfo中具备了请求的基本参数（如apiName、apiVersion、method、请求params与请求headers，不同工程不一样，大家可以根据自己的工程项目进行修改）。具体看params中，有一个参数为itemId:$route.itemId。以$route.开头的意思，就是这个value值要从路由中获取，即itemId=123，那么这个值就是123。

图片预请求

在做网络预请求的过程中，我忽然想到图片做预请求也是可以大大提升用户体验的，尤其是当大图片首次下载到内存中渲染需要的时间会比较长。图片预请求分为url已知与url未知两种场景，下面各举两个例子。

图片url已知

什么是图片url已知呢？比如我们在首页跳转首页的二级页面时，如果二级页面需要预加载的图片跟首页的某张图是一样的（尺寸可能不同），那么首页跳转路由时我们是能够提前知道这个图片的url的，所以我们看到prefetchKey3中配置了prefetchType为image的预请求。image的信息来自于路由参数，需要在跳转时将图片url和宽高作为路由参数之一。

比如scheme://domain/path?imgUrl=${encodeUrl}&imgWidth=200，那么根据配置项，我们将提前将encodeUrl这个图片以宽200，高150的尺寸，加载到内存中去。当目标页面用到这个图片时，将能很快渲染出来。

图片url未知

相反，当跳转目标页面时，目标页面所要加载的图片url没法取到，就对应了图片url未知的场景。

例如闪屏页跳转首页时，如果需要预加载首页顶部的图片，此时闪屏页是无法获取到图片的url的，因为这个图片url是首页接口返回的。这种情况下，我们只能依赖首页的预请求进行。

在demo配置文件中，我们可以看到prefetchImgFromResponse字段。这个字段代表着，当这个预请求响应回来之后，我需要去预请求某张图片。其中，imgUrl是$data.param格式，以$data.开头，代表着这份数据是来自于响应数据的。响应数据就是一串json串，可以凭此，索引到预请求响应中图片url的位置，就能实现图片的提前加载了。

至于图片怎么提前加载到内存中，以及真实图片的加载怎么匹配到内存中的图片，这一部分是通过glide已有的preload机制实现的，感兴趣的同学可以去看一下源码了解一下，这里就不展开了。后面讲的预请求的方案细节，都只限于网络请求。

预请求匹配

预请求匹配指的是实际的业务请求怎样与已经执行的预请求匹配上，从而节省请求的空中时间，直接返回预请求的结果。

首先网络预请求执行前先在内存中生成一份PrefetchRecord，代表着已经执行的预请求，其中的字段跟配置文件中差不多，主要就是记录预请求相关的信息：

class PrefetchRecord {

    // 请求信息

    String api;

    String apiVersion;

    String method;

    String needLogin;

    String showLoginUI;

    JSONObject params;

    JSONObject headers;



    // 预请求状态

    int status;

    // 预请求结果

    ResponseModel response;

    // 生成的请求id

    String requestId;



    boolean isMatch(RealRequest realRequest) {

        requestId.equals(realRequest.requestId)

    }

}

每一个PrefetchRecord生成时，都会生成一个requestId，用于跟实际业务请求进行匹配。requestId的生成规则可以自行制定，比如将所有请求信息包一起做一下md5处理之类。

在实际业务请求发起之前，也会根据同样的规则生成requestId。若内存中存在相同requestId对应的PrefetchRecord，那么就相当于匹配成功了。匹配成功后，再根据预请求的状态进行进一步的处理。

预请求状态

预请求状态分为START、FINISH、ABORT，对应“正在发起预请求”、“已经获得预请求结果”、“预请求被抛弃”。ABORT状态下一节再讲。

为什么要记录这个状态呢？因为我们无法保证，预请求的响应一定在实际请求之前。用图来表示：

因为预请求是一个并发行为。当预请求的空中时间特别长，长到目标页面已经发出实际请求了，预请求的响应还没回来，即预请求状态为START，而非FINISH。那么此时该怎么办？我们就需要让实际请求在一旁等着（记录到内存中，RealRequestRecord），等预请求接收到响应了，再根据requestId去进行匹配，匹配到RealRequestRecord了，就触发RealRequestRecord中的回调，返回数据。

另外，在匹配过程中需要注意一点，因为每次路由跳转，如果发起预请求了，总会生成一个Record在内存中等待匹配。因此在匹配结束后，不管是匹配成功还是匹配失败，都要及时释放将Record从内存中释放掉。

超时重试机制

基于实际请求等待预请求响应的场景，我们再延伸一下。若预请求请求超时，迟迟拿不到响应，该怎么办？用图表示：

假设目前的网络请求，端上默认的超时时间是30s。那么在超时场景下，实际的业务请求在30s内若拿不到预请求的结果，就需要重新发起业务请求，抛弃预请求，并将预请求的状态置为ABORT，这样即使后面预请求响应回来了也不做任何处理。

忽然想到一个很贴切的场景来比喻这个预请求方案。

我们把跳转页面理解为去柜台取餐。

预请求代表着我们人还没到柜台，就先远程下单让柜员去准备食物。

如果柜员准备得比较快，那么我们到柜台后就能直接把食物拿走了，就能快点吃上了（代表着页面渲染速度变快）。

如果柜员准备得比较慢，那么我们到柜台后还是得等一会儿才能取餐，但总体上吃上食物的速度还是要比到柜台后再点餐来得快。

但如果这个柜员消极怠工准备得太慢了，我们到柜台等了很久都没拿到食物，那么我们就只能换个柜员重新点了（超时后发起实际的业务请求），同时还不忘投诉一把（预请求空中时间太慢了）。

总结

通过这篇文章，我们知道了什么是接口预请求，怎么实现接口预请求。我们通过配置文件+统一路由处理+预请求发起、匹配、回调，实现了与业务解耦的，可适用于任意页面的轻量级预请求方案，从而提升页面的渲染速度。

最近写了一个好玩的 Button，它除了是一个 Button 外，还可以当镜子照。

那这个好玩的 Button 是怎么实现的呢？

很容易想到是用到了摄像头。

没错，这里要使用浏览器的获取媒体设备的 api 来拿到摄像头的视频流，设置到 video 上，然后对 video 做下镜像反转，加点模糊就好了。

button 的部分倒是很容易，主要是阴影稍微麻烦点。

把 video 作为 button 的子元素，加个 overflow:hidden 就完成了上面的效果。

思路很容易，那我们就来实现下吧。

获取摄像头用的是 navigator.mediaDevices.getUserMedia 的 api。

在 MDN 中可以看到 mediaDevices 的介绍：

可以用来获取摄像头、麦克风、屏幕等。

它有这些 api：

getDisplayMedia 可以用来录制屏幕，截图。

getUserMedia 可以获取摄像头、麦克风的输入。

我们这里用到的是 getUserMedia 的 api。

它要指定音频和视频的参数，开启、关闭、分辨率、前后摄像头啥的：

这里我们把 video 开启，把 audio 关闭。

也就是这样：

navigator.mediaDevices.getUserMedia({

    video: true,

    audio: false,

})

.then((stream) => {

    //...

}).catch(e => {

    console.log(e)

})

然后把获取到的 stream 用一个 video 来展示：

navigator.mediaDevices.getUserMedia({

    video: true,

    audio: false,

})

.then((stream) => {

  const video = document.getElementById('video');

  video.srcObject = stream;

  video.onloadedmetadata = () => {

    video.play();

  };

})

.catch((e) => console.log(e));

就是这样的：

通过 css 的 filter 来加点感觉：

比如加点 blur：

video {

  filter: blur(10px);

}

加点饱和度：

video {

  filter: saturate(5)

}

或者加点亮度：

video: {

  filter: brightness(3);

}

filter 可以组合，调整调整达到这样的效果就可以了：

video {

  filter: blur(2px) saturate(0.6) brightness(1.1);

}

然后调整下大小：

video {

  width: 300px;

  height: 100px;

  filter: blur(2px) saturate(0.6) brightness(1.1);

}

你会发现视频的画面没有达到设置的宽高。

这时候通过 object-fit 的样式来设置：

video {

  width: 300px;

  height: 100px;

  object-fit: cover;

  filter: blur(2px) saturate(0.6) brightness(1.1);

}

cover 是充满容器，也就是这样：

但画面显示的位置不大对，看不到脸。我想显示往下一点的画面怎么办呢？

可以通过 object-position 来设置：

video {

  width: 300px;

  height: 100px;

  object-fit: cover;

  filter: blur(2px) saturate(0.6) brightness(1.1);

  object-position: 0 -100px;

}

y 向下移动 100 px ，也就是这样的：

现在画面显示的位置就对了。

其实现在还有一个特别隐蔽的问题，不知道大家发现没，就是方向是错的。照镜子的时候应该左右翻转才对。

所以加一个 scaleX(-1)，这样就可以绕 x 周反转了。

video {

  width: 300px;

  height: 100px;

  object-fit: cover;

  filter: blur(2px) saturate(0.6) brightness(1.1);

  object-position: 0 -100px;

  transform: scaleX(-1);

}

这样就是镜面反射的感觉了。

然后再就是 button 部分，这个我们倒是经常写：

function Button({ children }) {

  const [buttonPressed, setButtonPressed] = useState(false);



  return (

    <div

      className={`button-wrap ${buttonPressed ? "pressed" : null}`}

    >

      <div

        className={`button ${buttonPressed ? "pressed" : null}`}

        onPointerDown={() => setButtonPressed(true)}

        onPointerUp={() => setButtonPressed(false)}

      >

         <video/>

      </div>

      <div className="text">{children}</div>

    </div>

  );

}

这里我用 jsx 写的，点击的时候修改 pressed 状态，设置不同的 class。

样式部分是这样的：

:root {

  --transition: 0.1s;

  --border-radius: 56px;

}



.button-wrap {

  width: 300px;

  height: 100px;

  position: relative;

  transition: transform var(--transition), box-shadow var(--transition);

}



.button-wrap.pressed {

  transform: translateZ(0) scale(0.95);

}



.button {

  width: 100%;

  height: 100%;

  border: 1px solid #fff;

  overflow: hidden;

  border-radius: var(--border-radius);

  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25), 0px 8px 16px rgba(0, 0, 0, 0.15),

    0px 16px 32px rgba(0, 0, 0, 0.125);

  transform: translateZ(0);

  cursor: pointer;

}



.button.pressed {

  box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.5), 0px 1px 1px rgba(0, 0, 0, 0.5);

}



.text {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  pointer-events: none;

  color: rgba(0, 0, 0, 0.7);

  font-size: 48px;

  font-weight: 500;

  text-shadow:0px -1px 0px rgba(255, 255, 255, 0.5),0px 1px 0px rgba(255, 255, 255, 0.5);

}

这种 button 大家写的很多了，也就不用过多解释。

要注意的是 text 和 video 都是绝对定位来做的居中。

再就是阴影的设置。

阴影的 4 个值是 x、y、扩散半径、颜色。

我设置了个多重阴影：

然后再改成不同透明度的黑就可以了：

再就是按下时的阴影，设置了上下位置的 1px 黑色阴影：

.button.pressed {

  box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.5), 0px 1px 1px rgba(0, 0, 0, 0.5);

}

同时，按下时还有个 scale 的设置：

再就是文字的阴影，也是上下都设置了 1px 阴影，达到环绕的效果：

text-shadow:0px -1px 0px rgba(255, 255, 255, 0.5),0px 1px 0px rgba(255, 255, 255, 0.5);

最后，把这个 video 嵌进去就行了。

完整代码如下：

import React, { useState, useEffect, useRef } from "react";

import "./button.css";



function Button({ children }) {

  const reflectionRef = useRef(null);

  const [buttonPressed, setButtonPressed] = useState(false);



  useEffect(() => {

    if (!reflectionRef.current) return;

    navigator.mediaDevices.getUserMedia({

        video: true,

        audio: false,

    })

    .then((stream) => {

        const video = reflectionRef.current;

        video.srcObject = stream;

        video.onloadedmetadata = () => {

        video.play();

        };

    })

    .catch((e) => console.log(e));

  }, [reflectionRef]);



  return (

    <div

      className={`button-wrap ${buttonPressed ? "pressed" : null}`}

    >

      <div

        className={`button ${buttonPressed ? "pressed" : null}`}

        onPointerDown={() => setButtonPressed(true)}

        onPointerUp={() => setButtonPressed(false)}

      >

        <video

          className="button-reflection"

          ref={reflectionRef}

        />

      </div>

      <div className="text">{children}</div>

    </div>

  );

}



export default Button;

body {

  padding: 200px;

}

:root {

  --transition: 0.1s;

  --border-radius: 56px;

}



.button-wrap {

  width: 300px;

  height: 100px;

  position: relative;

  transition: transform var(--transition), box-shadow var(--transition);

}



.button-wrap.pressed {

  transform: translateZ(0) scale(0.95);

}



.button {

  width: 100%;

  height: 100%;

  border: 1px solid #fff;

  overflow: hidden;

  border-radius: var(--border-radius);

  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25), 0px 8px 16px rgba(0, 0, 0, 0.15),

    0px 16px 32px rgba(0, 0, 0, 0.125);

  transform: translateZ(0);

  cursor: pointer;

}



.button.pressed {

  box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.5), 0px 1px 1px rgba(0, 0, 0, 0.5);

}



.text {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  pointer-events: none;

  color: rgba(0, 0, 0, 0.7);

  font-size: 48px;

  font-weight: 500;

  text-shadow:0px -1px 0px rgba(255, 255, 255, 0.5),0px 1px 0px rgba(255, 255, 255, 0.5);

}



.text::selection {

  background-color: transparent;

}



.button .button-reflection {

  width: 100%;

  height: 100%;

  transform: scaleX(-1);

  object-fit: cover;

  opacity: 0.7;

  filter: blur(2px) saturate(0.6) brightness(1.1);

  object-position: 0 -100px;

}

总结

浏览器提供了 media devices 的 api，可以获取摄像头、屏幕、麦克风等的输入。

除了常规的用途外，还可以用来做一些好玩的事情，比如今天这个的可以照镜子的 button。

它看起来就像我上厕所时看到的这个东西一样😂：

测试妹子给我提了个bug,说为什么一次操作，network里面两个请求。

我脸色一变”不可能，我写的代码明明是一次操作，怎么可能两个请求“。走过去一看，原来是多了个options请求。

”这个你不用管，这个是浏览器默认发送的一个预检请求“。可是妹子很执着”这可肯定不行啊，明明是一次请求，干嘛要两次呢？“。

”哟呵，挺固执啊，那我就给你讲个明白，到时候你可别说听不懂“。

HTTP的请求分为两种简单请求和非简单请求

简单请求

简单请求要满足两个条件：

1. 请求方法为：HEAD、GET、POST


2. header中只能包含以下请求头字段：
   
   
   
   • Accept
   
   
   • Accept-Language
   
   
   • Content-Language
   
   
   • Content-Type: 所指的媒体类型值仅仅限于下列三者之一
     
     
     
     • text/plain
     
     
     • multipart/form-data
     
     
     • application/x-www-form-urlencoded
     
     
     
     
   
   
   
   

浏览器的不同处理方式

对于简单请求来说，如果请求跨域，那么浏览器会放行让请求发出。浏览器会发出cors请求，并携带origin。此时不管服务端返回的是什么，浏览器都会把返回拦截，并检查返回的response的header中有没有Access-Control-Allow-Origin是否为true，说明资源是共享的，可以拿到。如果没有这个头信息，说明服务端没有开启资源共享，浏览器会认为这次请求失败终止这次请求，并且报错。

非简单请求

只要不满足简单请求的条件，都认为是非简单请求。

发出非简单cors请求，浏览器会做一个http的查询请求（预检请求）也就是options。options请求会按照简单请求来处理。那么为什么会做一次options请求呢？

检查服务器是否支持跨域请求，并且确认实际请求的安全性。预检请求的目的是为了保护客户端的安全，防止不受信任的网站利用用户的浏览器向其他网站发送恶意请求。
预检请求头中除了携带了origin字段还包含了两个特殊字段：

• Access-Control-Request-Method： 告知服务器实际请求使用的HTTP方法


• Access-Control-Request-Headers：告知服务器实际请求所携带的自定义首部字段。
  比如：

OPTIONS /resources/post-here/ HTTP/1.1

Host: bar.other

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: en-us,en;q=0.5

Accept-Encoding: gzip,deflate

Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7

Connection: keep-alive

Origin: http://foo.example

Access-Control-Request-Method: POST

Access-Control-Request-Headers: X-PINGOTHER, Content-Type

以上报文中就可以看到，使用了OPTIONS请求，浏览器根据上面的使用的请求参数来决定是否需要发送，这样服务器就可以回应是否可以接受用实际的请求参数来发送请求。Access-Control-Request-Method告知服务器，实际请求将使用 POST 方法。Access-Control-Request-Headers告知服务器，实际请求将携带两个自定义请求标头字段：X-PINGOTHER 与 Content-Type。服务器据此决定，该实际请求是否被允许。

什么时候会触发预检请求呢？

1. 发送跨域请求时，请求头中包含了一些非简单请求的头信息，例如自定义头（custom header）等；


2. 发送跨域请求时，使用了 PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH等请求方法。

我得意的说“讲完了，老妹你听懂了吗？”

妹子说“似懂非懂”

那行吧，带你看下实际场景。（借鉴文章CORS 简单请求+预检请求（彻底理解跨域）的两张图）

妹子说“这样就明了很多”，满是崇拜的关闭了Bug。

兄弟们，妹子都懂了，你懂了吗？😄

参考：

CORS 简单请求+预检请求（彻底理解跨域）

OPTIONS | MDN

跨源资源共享（CORS）| MDN

说明一下哈，以上事件是真实事件，只不过当时讲的时候没有那么的详细，😂

前言

我有一个坏习惯：就是下班之后不关电脑，但是电脑一般来说第二天电量不会有什么损失。但是后来突然有一天它开不起来了，上午要罢工？那也不好吧，也不能在光天化日之下划水啊；聪明的我还是找到了原因：电池耗尽了；于是赶紧来查一查原因，到底是什么程序把电池耗尽了呢？

这里我直接揭晓答案：是一个Web应用，看来这个锅必须要前端来背了；我们来梳理一下js中有哪些耗电的操作。

js中有哪些耗电的操作

js中有哪些耗电的操作？我们不如问问浏览器有哪些耗电的操作，浏览器在渲染一个页面的时候经历了GPU进程、渲染进程、网络进程，由此可见持续的GPU绘制、持续的网络请求和页面刷新都会导致持续耗电，那么对应到js中有哪些操作呢？

Ajax、Fetch等网络请求

单只是一个Ajax、Fetch请求不会消耗多少电量，但是如果有一个定时器一直轮询地向服务器发送请求，那么CPU一直持续运转，并且网络进程持续工作，它甚至有可能会阻止电脑进行休眠，就这样它会一直轮询到电脑电池不足而关机；
所以我们应该尽量少地去做轮询查询；

持续的动画

持续的动画会不断地触发GPU重新渲染，如果没有进行优化的话，甚至会导致主线程不断地进行重排重绘等操作，这样会加速电池的消耗，但是js动画与css动画又不相同，这里我们埋下伏笔，等到后文再讲；

定时器

持续的定时器也可能会唤醒CPU，从而导致电池消耗加速；

上面都是一些加速电池消耗的操作,其实大部分场景都是由于定时器导致的电池消耗，那么下面来看看怎么优化定时器的场景；

针对定时器的优化

先试一试定时器，当我们关闭屏幕时，看定时器回调是否还会执行呢？

let num = 0;

let timer = null;

function poll() {

    clearTimeout(timer);

    timer = setTimeout(()=>{

        console.log("测试后台时是否打印",num++);

        poll();

    },1000*10)

}

结果如下图，即使暂时关闭屏幕，它仍然会不断地执行：

如果把定时器换成requestAnimationFrame呢？

let num = 0;

let lastCallTime = 0;

function poll() {

    requestAnimationFrame(() =>{

        const now = Date.now();

        if(now - lastCallTime > 1000*10){

            console.log("测试raf后台时是否打印",num++);

            lastCallTime = now;

        }

        poll();

    });

}

屏幕关闭之前打印到了1，屏幕唤醒之后才开始打印2，真神奇！

当屏幕关闭时回调执行停止了，而且当唤醒屏幕时又继续执行。屏幕关闭时我们不断地去轮询请求，刷新页面，执行动画，有什么意义呢？因此才出现了requestAnimationFrame这个API，浏览器对它进行了优化，用它来代替定时器能减少很多不必要的能耗；

requestAnimationFrame的好处还不止这一点：它还能节省CPU，只要当页面处于未激活状态，它就会停止执行，包括屏幕关闭、标签页切换；对于防抖节流函数，由于频繁触发的回调即使执行次数再多，它的结果在一帧的时间内也只会更新一次，因此不如在一帧的时间内只触发一次；它还能优化DOM更新，将多次的重排放在一次完成，提高DOM更新的性能；

但是如果浏览器不支持，我们必须用定时器，那该怎么办呢？

这个时候可以监听页面是否被隐藏，如果隐藏了那么清除定时器，如果重新展示出来再创建定时器：

let num = 0;

let timer = null;

function poll() {

    clearTimeout(timer);

    timer = setTimeout(()=>{

        console.log("测试后台时是否打印",num++);

        poll();

    },1000*10)

}



document.addEventListener('visibilitychange',()=>{

    if(document.visibilityState==="visible"){

        console.log("visible");

        poll();

    } else {

        clearTimeout(timer);

    }

})

针对动画优化

首先动画有js动画、css动画，它们有什么区别呢？

打开《我的世界》这款游戏官网，可以看到有一个keyframes定义的动画：

切换到其他标签页再切回来，这个扫描二维码的线会突然跳转；

因此可以得出一个结论：css动画在屏幕隐藏时仍然会执行，但是这一点我们不好控制。

js动画又分为三种种：canvas动画、SVG动画、使用js直接操作css的动画，我们今天不讨论SVG动画，先来看一看canvas动画（MuMu官网）：

canvas动画在页面切换之后再切回来能够完美衔接，看起来动画在页面隐藏时也并没有执行；

那么js直接操作css的动画呢？动画还是按照原来的方式一直执行，例如大话西游这个官网的”获奖公示“；针对这种情况我们可以将动画放在requestAnimationFrame中执行，这样就能在用户离开屏幕时停止动画执行

上面我们对大部分情况已经进行优化，那么其他情况我们没办法考虑周到，所以可以考虑判断当前用户电池电量来兼容；

Battery Status API兜底

浏览器给我们提供了获取电池电量的API，我们可以用上去，先看看怎么用这个API：

调用navigator.getBattery方法，该方法返回一个promise，在这个promise中返回了一个电池对象，我们可以监听电池剩余量、电池是否在充电；

navigator.getBattery().then((battery) => {

  function updateAllBatteryInfo() {

    updateChargeInfo();

    updateLevelInfo();

    updateChargingInfo();

    updateDischargingInfo();

  }

  updateAllBatteryInfo();



  battery.addEventListener("chargingchange", () => {

    updateChargeInfo();

  });

  function updateChargeInfo() {

    console.log(`Battery charging? ${battery.charging ? "Yes" : "No"}`);

  }



  battery.addEventListener("levelchange", () => {

    updateLevelInfo();

  });

  function updateLevelInfo() {

    console.log(`Battery level: ${battery.level * 100}%`);

  }



  battery.addEventListener("chargingtimechange", () => {

    updateChargingInfo();

  });

  function updateChargingInfo() {

    console.log(`Battery charging time: ${battery.chargingTime} seconds`);

  }



  battery.addEventListener("dischargingtimechange", () => {

    updateDischargingInfo();

  });

  function updateDischargingInfo() {

    console.log(`Battery discharging time: ${battery.dischargingTime} seconds`);

  }

});

当电池处于充电状态，那么我们就什么也不做；当电池不在充电状态并且电池电量已经到达一个危险的值得时候我们需要暂时取消我们的轮询，等到电池开始充电我们再恢复操作

后记

电池如果经常放电到0，这会影响电池的使用寿命，我就是亲身经历者；由于Web应用的轮询，又没有充电，于是一晚上就耗完了所有的电，等到再次使用时电池使用时间下降了好多，真是一次痛心的体验；于是后来我每次下班前将Chrome关闭，并关闭所有聊天软件，但是这样做很不方便，而且很有可能遗忘；

如果每一个前端都能关注到自己的Web程序对于用户电池的影响，然后尝试从定时器和动画这两个方面去优化自己的代码，那么我想应该就不会发生这种事情了。注意：桌面端程序也有可能是披着羊皮的狼，就是披着原生程序的Web应用；

参考：
MDN

我司大概从今年（2022年）年初决定思维导图，经过半年多的研究与实践，我们基于自研的绘图框架初步完成了一个脑图组件并成功集成到我们 PingCode Wiki 中，这篇文章主要探讨下这个绘图框架（Plait）的一些设计点和思维导图落地的一些关键技术。

概论

对于思维导图、流程图前期我们做了很多调研工作，流程图方向我们研究了 excalidraw 和 react-flow，它们都是基于 react 框架实现的库，在社区中有很高的知名度，思维导图方向我们研究了 mind-elixir、 mindmap-layouts （自动布局算法），在开源领域中思维导图发展不是很好，没有成熟、知名的作品。

mind-exlixir 介绍：

mind-elixir 功能示意图

优点：

1. 麻雀虽小但五脏俱全


2. 纯 JS 库、轻量

缺点：

1. 不依赖前端框架、开发方式和主流的方式不同


2. 架构设计没有太多可取之处，节点布局方式不易扩展

虽然我们前期的目标是研发 「思维导图」 ，但是最终我们的产品目标应该是做一个 「一体化的交互式绘图画板」 ，包含思维导图、流程图、自由画笔等。

最终调研发现目前开源社区恰恰缺少这样一个一体化的绘图框架，用于实现一体化的交互式绘图编辑器，集思维导图、流程图、自由画笔于一体，所以我们结合做富文本编辑器的经验，重新架构了一套绘图框架（Plait）、拥有插件机制，并在它的基础上实现思维导图插件、落地到 PingCode Wiki 产品中，所以今天分享的主角就是 Plait 框架。

下面正式进入今天的主题，分为四部分：

1. 绘图框架设计


2. 思维导图整体方案


3. 思维导图自动布局算法


4. 框架历程/未来

一、绘图框架设计

这部分首先会先简单介绍下绘图方案的选型（Canvas vs SVG）考量，然后介绍下 Plait 绘图框架中核心部分的设计：插件机制、数据管理，最后介绍下框架优势。

绘图方案：Canvas vs SVG

Canvas 还是 SVG 其实社区中也没有一个明确的答案，我们参考了一些知名产品的方案选型，SVG 和 Canvas 都有并且实现的效果都不差，比如语雀的白板使用的是 SVG，ProcessOn 使用的是 Canvas，Excalidraw 使用的是 Canvas，drawio 使用的是 SVG 等等。因为我们没有 Canvas 的使用经验，加上我们的思维导图节点希望支持富文本内容，所以暂时选定对 DOM 更友好的 SVG，觉得先按照这个方案试试水。

经过这么长时间的验证，发现基于 SVG 的方案并没有什么明显的不足，性能问题我们也经过验证，支持 1000+ 的思维导图节点渲染完全没有问题、操作依然很流畅。

对于 SVG 绘制我们没有直接使用 SVG 的底层API ，而是使用了一个第三方的绘图库 roughjs。

下面我们看看 Plait 框架「插件机制」的部分，这部分的灵感来源于富文本编辑器框架 Slate。

插件机制

Web 前端的画图领域有很多可以深度研发的业务方向，如何基于同一个框架实现不同业务方向功能开发，就需要用到插件机制了。

插件机制是 Plait 框架一个重要特性，框架底层并不提供具体的业务功能实现，业务功能都需要基于插件机制实现，如下图所示：

插件机制通俗讲就是框架层构建的一座基础桥梁，为实现具体的业务功能提供必要的支持，Plait 插件机制有三个核心要素：

1. 抽象数据范式（插件数据）


2. 可复写行为（识别交互）


3. 可复写渲染（控制渲染）

具体到流程图、思维导图这类绘图场景，它的核心是基于用户交互行为（鼠标、键盘操作）实现符合交互预期的元素绘制、渲染，如果做成可扩展的那就插件开发者可以自定义交互行为、自定义节点元素渲染，基于自定义交互生成插件数据，基于插件数据控制插件元素渲染，构成插件闭环，如下图所示（插件机制闭环示意图）：

这部分的核心就是设计可重写方法，目前 Plait 中主要有两类：

第一类用于实现自定义交互：mousedown、mouseup、mousemove、keydow、keyup。

第二类用于实现自定义渲染：drawElement、redrawElement、destroyElement 然后就是框架层与插件衔接部分的设计了，这一部分在 plait/core 中目前被设计的是比较松散的，drawElement 可以返回一个 SVGGElement 类型的 DOM 元素也可以返回一个框架组件，既可以直接衔接框架也可以基于 DOM 的方式对接。

目前 Plait 框架整个是基于 Angular 框架实现的，后续可能会考虑脱离框架的设计模式，这不是本文的重点。

举个例子： 画圆插件三步走

步骤一：定义数据结构

export interface CircleElement {

    type: 'cirle';

    radius: number;

    dot: [x: number, y: number];

}

步骤二：处理画圆交互

board.mousedown = (event: MouseEvent) => {

  if (board.cursor === 'circle') {

    start = toPoint(event.x, event.y, board.host);

    return;

  }

  mousedown(event);

};

board.mousemove = (event: MouseEvent) => {

  if (start) {

    end = toPoint(event.x, event.y, board.host);

    if (board.cursor === 'circle') {

      // fake draw circle

    }

    return;

  }

  mousemove(event);

};

board.globalMouseup = (event: MouseEvent) => {

  globalMouseup(event);

  if (start) {

    end = toPoint(event.x, event.y, board.host);

    const radius = Math.hypot(end[0] - start[0], end[1] - start[1]);

    const circleElement = { type: 'circle', dot: start, radius };

    Transforms.insertNode(board, circleElement, [0]);

  }

};

步骤三：实现画圆方法

board.drawElement = (context) => {

  if (context.elementInstance.element.type === 'circle') {

    const roughSVG = HOST_TO_ROUGH_SVG.get(board.host) as RoughSVG;

    const circle = context.elementInstance.element as unknown as CircleElement;

    roughSVG.circle(circle.dot[0], circle.dot[1], circle.radius);

  }

  return drawElement(context);

}

这是一个最简单的插件示例，通过框架提供的桥梁实现一个画圆插件：拖放画一个圆 -> 生成对应圆数据 -> 根据数据渲圆。

插件机制大概就是这些内容，下面看看数据管理部分。

数据管理

数据管理是 Plait 框架中非常重要的部分，它是框架的灵魂，前面的插件机制是外在表现，主要包含以下特性：

1. 提供基础数据模型


2. 提供基于原子的数据变化方法（Transfroms）


3. 基于不可变数据模型（基于 Immer）


4. 提供 Change 机制，与框架配合完成数据驱动渲染


5. 与插件机制融合，数据修改的过程可以被拦截处理

这些都是非常优秀的特性，既可以完成数据的约束，又可以灵活实现很多复杂高级的需求，感觉这块的设计和实现其实可以算是一种特定场景的状态管理。

框架状态流转图：

上面说到的插件机制的闭环要依赖数据模型状态作为的标准，最终的插件闭环如下图所示：

这里可以列举两个具体的业务场景，都是我们开发中经常落入的陷阱，体现数据管理在的约束作用及灵活性（这部分可能不好理解，谨慎阅读，其实也是框架作用的具体说明）：

场景 1： 自动选中根节点

下面这张图是一个需求示意：新建脑图时自动选中根节点并弹出工具栏

新建思维导图自动弹出工具栏示需求意图

这是一个合理的需求，但它不是常规的交互路径（常规路径是用户点击节点，触发节点选中，进而触发工具栏弹出），我们的新同学在最开始的时候就选择了一种不标准的数据修改方式（手动修改数据）去完成这个需求。

常规点选：

框架数据会存储一个选区状态（点击位置或者框选位置），点击操作会触发选区数据变化，选区变化会触发 Change 事件，基于这个机制处理节点选中和工具栏弹出。

自动选中（手动修改数据）：

不推荐的操作路径示意图

这里的思路是首先模拟位置（根据自动选择的节点计算），手动修改数据，然后自己手动调用工具栏的弹出、强制刷新界面让节点选中，这就是典型的没有按照框架约束实现需求的例子，前面说到的数据流没有正确运转，需要做很多特殊处理。 不通过 Transfrom 的方式手动修改数据是不被框架允许的，不会触发框架 Change 行为，理论上应该直接抛出异常（很可惜当时没有做到这步）。

自动选中（标准路径）：

标准路径就是基于模拟位置通过 Transfrom 的方式修改数据（相当于模拟点击了要自动选中的节点），后面的流程就可以依赖框架机制去控制执行，无须再做很多手动的处理。

场景 2： 思维导图节点删除后节点的选中状态自动切换到临近节点

这是一个很基础的需求，目前我们的实现是拦截节点删除行为（按 Delete/Backspace 键）处理，这样做有两个弊端：

1. 假如将来要做右键菜单删除需要把这部分的处理代码再写一遍，即使封装成工具方法，也要额外增加一个调用入口。


2. 一个不太好解决的问题，新建一个节点后按 Ctrl + Z 撤回，无法把选中状态转移到临近节点上，虽然这里撤回执行的也是节点删除操作。

推荐路径：

拦截节点删除操作，前面提到框架统一了数据修改的方法，所以插件开发者可以对数据修改过程进行拦截，这个拦截过程可以在数据修改前，也可以在在数据修改后（Change），在这个地方做出就不会有任何漏掉的场景。

框架作用

1. 插件机制实现分层


2. 数据管理实现约束


3. 配合框架规范数据流

框架最大的意义就是分层解构，降低业务的复杂度，每个领域或者每个模块只处理自己的事情。

比如前端框架，组件化开发，就是能够把一定的逻辑归拢到一个逻辑域中（组件），而不是所有东西杂糅在一起，这是架构演进的趋势。

架构图：

二、思维导图整体方案

这里简单介绍下思维导图插件的整体技术方案，但是不会介绍特别细，因为它是基于 Plait 框架实现，大的方案肯定是与 Plait 框架一致。

思维导图整体技术方案导图

1、整体方案

我们整体是 SVG + Richtext 的方案。

绘图使用 SVG ，目前我们脑图节点、节点连线、展开收起图标等等都是基于 SVG 绘制的。

节点内容使用 foreignObject 包括嵌入到 SVG 中，这种方案使节点内容支持富文本。

2、功能方案

脑图核心交互处理及渲染都是可重写方法完成，与 Plait 集成。

脑图插件仅仅负责脑图部分的渲染，至于整个画布的渲染以及画布的移动放大缩小等等是框架底层功能。

因为 Plait 是支持扩展任意元素的，支持渲染多个元素，它只由数据决定，所以它支持同时渲染多个脑图。

底层脑图插件并不包含工具栏实现，它只处理核心交互、渲染、布局。

3、组件化

脑图组件渲染、节点渲染的整体机制就是我们前端经常提到的：组件化、数据驱动，虽然组件内部节点渲染还是创建 DOM、销毁 DOM，但是大的功能还是通过组件来进行划分的。

基于脑图业务里面有两个非常重要的组件：MindmapComponent 、MindmapNodeComponent，MindmapComponent 处理脑图整体的逻辑，比如执行节点布局算法，MindmapNodeComponent 处理某一个节点的逻辑，比如节点绘制、连线绘制、节点主题绘制等。

之所以把这个部分提出来说一下，是因为我觉得这块的思想其实是主流前端框架思想的延续，包括和 Plait 框架整体的机制是统一的。

4、绘图编辑器

这里可以理解为业务层的封装，业务层级决定集成那些扩展插件，以及进一步扩展插件上层功（比如脑图节点工具栏实现），Mindmap 插件层不依赖于我们的组件库和业务组件，所以工具栏这类需要组件库组件的场景统一放到业务层实现，这样 Mindmap 插件层可以减少依赖、保持聚焦。

思维导图具体落地到 PingCode Wiki 业务中，其实有一个更虽复杂、但清晰的分层结构：

三、自动布局算法

节点自动布局是思维导图的一个核心技术，它是思维导图美观以及内容表现力的决定性因素，它关注节点如何分布，这部分说复杂不复杂，说简单也不简单，包含以下几个部分：

1. 布局分类


2. 节点抽象


3. 算法过程


4. 方向变换


5. 布局嵌套

布局分类

介绍说明下常规思维导图的布局分类：

示意图

标准布局：

逻辑布局：

缩进布局：

时间线：

鱼骨图：

美学标准

前面说过思维导图对可视化树的展现有很高的要求，需要它是美观（这个就很直观，每个人的审美可能不一样，但是它也应当有一些基础标准）的，所以需要基础的美学标准：

1. 节点不重叠


2. 子节点按照指定的顺序排列


3. 父节点在子节点中心（逻辑布局）


4. 主轴方向上不同层级节点不重叠

节点抽象

为了简化可视化树的绘制，[Reingold-Tilford] 提出可以把节点之间的间距和绘制连线抽象出来。通过在节点的宽度和高度上添加间隙来添加节点之间的间距。如下图中的实线框显示了原始宽度和高度，虚线框显示了添加间隙后的宽度和高度。

[Reingold-Tilford] 可视化树节点抽象示意图

我们的思维导图自动布局遵循这个抽象：

1. 节点布局本身不关注节点连线，只关注节点的宽高和间距


2. 节点从间距中抽象出来（节点宽高和节点间隙作抽象为一个虚拟节点 LayoutNode）


3. 布局算法基于 LayoutNode 进行布局

节点在布局时它的宽和高已经融合了实际宽高和上下左右的间隙了，这样可以降低自动布局的复杂度，上图其实是我们布局后的结果，节点从间距中抽象出来之后，节点的垂直顶部位置是其父节点的底部坐标，而父节点的底部坐标又是其顶部坐标加上其高度，真实节点与虚拟节点的逻辑关系如下图所示：

LayoutNode 示意图

算法执行过程

算法流程图：

自动布局算法执行流程图

用一个包含三个节点的例子介绍它自动布局过程，理想的结果应当如下图所示：

步骤一、前置操作： 构造 LayoutNode

这个就是前面提到的节点抽象，基于节点宽高和节点之间的间隙构建布局使用的抽象节点，此时三个处于初始状态，x、y 坐标均为零且相互重叠，如下图所示：

初始状态示意图

左边是真实状态，右侧虚线框部分没有特别的意义，只是一个不重叠的示意

步骤二、布局准备： 垂直分离

布局准备：垂直分离示意图

基于节点的父子级关系进行分层，保证垂直方向是父子级节点不重叠（节点 0与节点 1、2不重叠）。

步骤三：分离兄弟节点

分离兄弟节点过程示意图

就是分离「节点 1」和「节点 2」，保证他们水平不重叠。

步骤四：定位父节点

父级节点定位示意图

基于「节点 1」和「节点 2」重新地位父节点「节点 0」的水平位置，保证父节点水平方向上居中与「节点 1」 和「节点 2」。

布局结果：

以上就是一个的完整布局过程（逻辑下布局），逻辑并不复杂，即使多一些层级和节点也只需要递归执行「步骤三」和「步骤四」。

可以看出「逻辑下布局」只用了「算法流程图」中的前四步就完成了，最后一步「方向变换」就是在「逻辑下布局」的基础上通过数学变换的方式实现「逻辑上」「逻辑右」等布局，下面对方向变换进行专门的解释。

方向变换

1、逻辑下 -> 逻辑上

可以看出这是垂直方向上的变换关系，它们应该是基于一个水平线对称，具体的变换关系如下图所示：

逻辑上变换图

可以看最右侧最下方的节点的「y 点」应该就对应的最右侧最上方的节点「y点」，它们的位置关系应该就是：y= y - (y-yBase) * 2 - node.height。

注意上下变换应该只涉及位移，不涉及上下翻转，也就是节点内部的方向不变，y 对应 y`这两个对应的都是节点的下边上的点位。

2、逻辑下 -> 逻辑右

逻辑右示意图

从上图可以看出，这个逻辑变换也不复杂：就是一个垂直到水平的变换过程，反应到布局算法层中 x、y 方向以及节点宽高的变换，比如：

1. 垂直分层：需要将垂直分层变换为水平分层


2. 增加 buildTee 过程：基于分层的节点需要将节点宽度变换高度、x 坐标变为 y 坐标

处理水平布局：增加 buildTree 过程示意图

最后在「方向变换」中将宽高和 x、y 再变换回来：

得到布局结果：

3、逻辑右 -> 逻辑左

逻辑右到逻辑左的位置对应关系应该和最上面说逻辑下到逻辑上的类似，这里不再赘述。

方向变换大概就这三种，下面介绍下下布局嵌套的思路。

布局嵌套

先看一个布局嵌套的示意：

上图第二个子节点使用了另外一种布局（缩进布局），这就属于布局嵌套，布局嵌套仍然需要保证前面说到的「美学标准」比如节点不重叠、父节点居中对齐等。

简单思考： 布局嵌套中的那个有独立布局的子树，它对于整体布局的影响在于它的延伸方向的不受控制，但是如果把有独立布局的子树看做一个整体，提前计算出子树的布局，然后把子树作为整体代入布局算法就可以屏蔽子树延伸方式对整体布局的影响。

整体的处理思路如下图所示：

布局嵌套处理思路示意图

这里可以有一个抽象：把有独立布局的子节点抽象成一个黑盒子（我把它叫做 BlackNode），那么子树布局的影响就会被带入到主布局中，而子树的布局可以保持独立性。

关键点：需要先计算出有独立布局的子树的布局，然后才可以计算父节点布局

四、框架历程/未来

从技术调研到架构设想再到架构落地到产品中，历时大概1年左右的时间，核心工作集中在 2022 年的 1-9 月份，大概的时间线如下：

Plait 框架未来的一些设想

结束语

本文主要介绍从零开始做画图应用、自研画图框架、落地思维导图场景的一些技术方案，作为一个 Web 前端开发者有机会做这样的东西个人感觉很幸运，对于 Plait 框架未来还有很多事情要做，希望它可以发展成为一个成熟的开源社区作品，也期待对画图框架有兴趣的同学可以加入到 Plait 的开源建设中。

前言

大家好，最近公司在做公众号的海报图生成功能，功能不难，但是其中也遇到了一些坑还有一些细节的问题，这里给大家复盘一下，相互借鉴及学习

制作海报选用工具

这里我看了几款生成图片的工具：

• html2canvas


• dom-to-image

这里我选用的是html2canvas,因为大部分人使用这个比较多，而且我也只听过这个🤣，另一个大家可以去自行摸索，毕竟我看github上也有9k的star

开始使用插件生成

引入插件

// npm 下载插件

npm install html2canvas

// 项目引入插件

import html2canvas from 'html2canvas';

html2canvas的option配置

调用html2canvas时传入两个参数，第一个参数是dom节点，第二个参数是options配置项（配置项可根据上方表格进行对应配置）

html2canvas(document.body).then(function(canvas) {

    document.body.appendChild(canvas);

});

调用方法生成海报

1.获取节点：let img = document.querySelector("#myImg");

2.配置需要参数：

let options = {

        useCORS: true,// 开启跨域

        backgroundColor: "#caddff",// 背景色

        ignoreElements: (ele) => {},// dom节点

        scale: 4,// 渲染出来的比例

      };

3.调用方法

html2canvas(img, options).then((canvas) => {

        let url = canvas.toDataURL("image/png"); // canvas转png（base64）

        this.url = url;

        this.isShow = false;

      });

到这里html2canvas的相关使用及配置就介绍完了，接下来就是遇见的问题

使用时遇见的坑点及解决方案

图片跨域问题

第一次用我就遇见了这个问题，第一个就是百度的方法，配置useCORS: true,// 开启跨域，然后图片标签上加crossorigin="anonymous"，但是结果没用，图片依旧跨域，这时候咱们前端就要硬气一点，直接让后端处理，让后端把图片地址改成base64的形式传给你，或者服务器配置跨域

生成海报时图片模糊问题

生成海报如果模糊，建议把配置项的scale配置高一点，生成的canvas图片把盒子固定大小，显示的图片就更清晰

dom之间有一道横杠

本人是在公众号上做生成海报功能，dom元素顶部是两张图片，图片顶部有一道白线，而且两张图片之间还有一道杠（不好形容），后面发现是因为生成这个海报我在公众号上用的是image标签，改成img标签就没用影响了，具体原因应该是uniapp内部处理image标签时的一些样式问题吧，这是我的猜测

注意：app上不支持html2canvas生成海报（我也是调试的时候发现的）

全部代码

这里代码仅供大家参考

<template>

  <view class="poster-content">

    <view class="poster-img" id="myImg" v-if="isShow">

      <img class="flow" src="../../static/QC-code.png" />

      <view class="card-item">

        <view class="title-card">爽卡优势</view>

        <view class="tip-content">

          <view class="left">

            <p>零月租，随充随用，不用不扣费</p>

            <p>全程4G、不限APP、不限速</p>

            <p>支持多场景使用</p>

            <p>官方正品、品质保证</p>

          </view>

          <view class="right">

            <view class="right-item">

              <view class="qr-code">

                <img

                  id="codeImg"

                  :src="imgUrl"

                  style="width: 100%; height: 100%"

                  class="flow"

                  crossorigin="anonymous"

                />

              </view>

              <view style="color: #0032d0">扫码免费领取</view>

            </view>

          </view>

        </view>

      </view>

    </view>

    <view v-else class="canvas-img">

      <img style="width: 100vw" :src="url" alt="" />

    </view>

    <view v-if="isShow" style="padding-bottom: 10px">

      <view @click="getImage" class="createPoster">点击生成海报</view>

    </view>

    <view style="padding-bottom: 50px">

      <view

        @click="close"

        class="createPoster"

        style="background-color: #fff; color: #4f80e6"

        >关闭</view

      >

    </view>

  </view>

</template>



<script>

import html2canvas from "html2canvas";

export default {

  props: {

    imgUrl: {

      type: String,

      default: "",

    },

    hasQrCode: {

      type: Boolean,

      default: false,

    },

  },

  data() {

    return {

      url: "",

      isShow: true,

    };

  },

  onShow() {},

  methods: {

    close() {

      this.$emit("closePop");

    },

    getImage() {

      // this.saveImg()

      this.saveImg();

    },

    saveImg() {

      let img = document.querySelector("#myImg");

      let options = {

        useCORS: true,

        backgroundColor: "#caddff",

        ignoreElements: (ele) => {},

        scale: 4,

      };

      html2canvas(img, options).then((canvas) => {

        let url = canvas.toDataURL("image/png"); // canvas转png（base64）

        this.url = url;

        this.isShow = false;

      });

    },

  },

};

</script>



<style lang="scss" scoped>

.poster-content {

  width: 100vw;

  background-color: #caddff;

  height: calc(100vh - 50px);

  overflow: scroll;

  margin-top: -50px;

}

.poster-img {

  width: 80vw;

  margin: 0 auto;

  background-color: #caddff;

  // display: flex;

  // flex-direction: column;

  padding: 40upx 20upx;

  text-align: center;

  .title {

    width: 203px;

    height: 96px;

  }

  .flow {

    width: 100%;

    height: 300px;

  }

  .card-item {

    background-color: #fff;

    font-size: 14px;

    margin-top: -12upx;

    padding: 20upx 0 40upx;

    text-align-last: left;

    border-radius: 20upx;

    .title-card {

      color: #0032d0;

      font-size: 36upx;

      font-weight: 700;

      padding-left: 10upx;

    }

    .tip-content {

      display: flex;

      justify-content: space-between;

      font-size: 26upx;

      .left {

        flex: 1;

        margin-top: 10upx;

        & > p {

          line-height: 1.5em;

          margin-top: 20upx;

          padding-left: 40upx;

          position: relative;

          &::after {

            content: "";

            position: absolute;

            top: calc(50% - 10upx);

            left: 8upx;

            width: 20upx;

            height: 20upx;

            border-radius: 20upx;

            background-color: #0256ff;

          }

        }

      }

      .right {

        width: 90px;

        font-size: 20upx;

        display: flex;

        align-items: center;

        padding-right: 16upx;

        .right-item {

          display: flex;

          flex-direction: column;

          justify-content: space-around;

          align-items: center;

          // height: 143px;

          .qr-code {

            width: 160upx;

            height: 160upx;

            background-color: #fff;

            border-radius: 10upx;

            display: flex;

            justify-content: center;

            align-items: center;

          }

        }

      }

    }

  }

  .canvas-img {

    width: 100vw;

    height: calc(100vh - 50px);

    overflow: scroll;

  }

}

.createPoster {

  line-height: 2.8em;

  width: 90%;

  background-color: #5479f7;

  margin: auto;

  border-radius: 40upx;

  color: #fff;

  text-align: center;

}

</style>

结尾

这些就是本人在做海报功能所遇见的一些问题及解决方案，希望掘友们相互学习共同进步，如果有什么描述错误的地方希望给我指正，欢迎大家跟我一起交流

今年正式进入不惑之年。按 2011 年统计数据，国内 40 岁以上的程序员约是 1.5%，乐观来看，我进入了前 5% 的群体。

美国 2016 年此比例已经有 12.6%，大家还是应该乐观点。

大家都知道的国内第一代程序员，求伯君/雷军已经退休或做 CEO 了，而目前还在活跃的骨灰级程序员有陈皓（左耳朵耗子）。估计之后应该也会有越来越多的老程序员，或者说是目前活跃的程序员变成老程序员，出现在大家的视野。

程序员这个职业发展起来也就 20 年，还是一个很年轻的职业，年龄焦虑这个事情着实没有必要。

换位思考一下，如果我是公司的技术招聘者，15年内工作经验的都是大有前途的，只要你技术过得去，价格合理，我都愿意招你。

相反，15年以上的程序员就没那么受欢迎了。

因为初入职场就是互联网的蓬勃发展期，人才短缺是一直存在的，知识积累不够不要紧，个人品行不妥也不要紧，只要你敢于承担一些压力，那你的职业道路都会比较顺畅。如果再幸运一些，就能进入大厂。

但是，这也造成了一些不良的现象，在这行业，投机份子其实挺多的。什么热门就跟风炒一炒，能不能做成不要紧，最主要是自己的 KPI 好看。另外，互联网企业的优待，让他们多少有些娇气。从大厂出来，薪资待遇要翻倍，要股票要期权，要好资源要好项目。

所以，一般的公司未必能容纳这些人。他们也未必愿意去这些公司。于是，35岁危机就来了。

年轻人其实是很难感受到中年危机的，中年危机与年轻失业的区别就像新冠与感冒的区别。你以为你经历了中年危机，实际上只是年轻失业。

今年经济不景气，裁员潮估计让一部分人离开了这个行业。年纪大的想要回炉再造，是很难的。但是，如果你还年轻，平时多积累，我相信能很轻松地找到一份工作的。

如何面对危机？

年轻人都会说苟住，换个正能量的说法是活在当下。

读好书、做好事，是能切切实实忘掉焦虑的。

今年读的《反脆弱》、《心流》和《毫无意义的工作》，将这三本书放在一起，还是很有意思的，能看到不同的观点：

• 
  

  《反脆弱》让我对工作也有了新认识。看似很稳定的工作，会有可能让你过度依赖，如果遭遇失业就手足无措了。而类似的士司机，饿一餐饱一顿的，反而平时就很有充足的经验应对收入不稳定的情况。

  
  

  今年的形势让人更趋于进入大公司、国企、公务员单位，然后这些稳定的工作就真的这么值得大家去追随吗？越是追求稳定，最后是否会适得其反？

  
  


• 
  

  《毫无意义的工作》今年敲醒了不少人，他提醒我们，日常琐碎的工作中消磨了我们的生命。然而这本书更多是情绪的宣泄，并没有什么好的解决方法。

  
  


• 
  

  而《心流》则希望我们投入去做事情，只有投入了才会获得心流，才会有幸福感。同时，它让我意识到，无法逃避的事实是，工作占了我们生命的 1/4 时间。如果无法从中获得乐趣，那我们的人生注定是悲剧的。

  
  

这几本书都让我重新思考我与工作的关系，即使今年外部恶劣的情况，我们也应该重拾自身的信心，重新找回我们的热情、专注。

在面对人员缩减，项目被砍的情况下，我们也许可以把目光放在现有的项目上。

就前端而言，SSR 做不了，Docker 做不了，那就看看 nginx 缓存优化能不能做；低代码做不了，那就看看页面模板能不能做；开源做不了，就看看公共组件能不能做；什么都做不了，那首屏优化，静态资源优化，图片压缩也是能做的，而且还能做得很深。

只要你想，总有做不完的事情。并且这些事情，其实是我们要还的技术债务。

而此时也是做好技术积累的时机。

面向对象、设计模式、函数式编程、类型编程、异步编程这些基础都可以恶补一下；网络安全、网络通信、内存、CPU等等向外延伸的各类计算机知识也是我们必须掌握的。

工作上认真对待自己的每一行代码，生活中认真对待自己的每一分钱。

深挖知识，深入研究，懂得越多，焦虑自然就越少。

有足够的知识与经验，你的中年危机也许永远不会来

最后，对于年龄的焦虑，再推荐大家看看方励老师在“一席”的演讲《即使是像我这把年龄的人，好奇心也从来没变过，因为我们还活在人间的》

《亲戚计算器》大概是我迄今为止写过最复杂的算法了，它可能看起来它好像逻辑简单，仅1个方法调用而已，却耗费了我大量的时间！从一开始灵光乍现，想到实现它的初步思路，到如今开源已7年多了。这期间，我一直在不断更新才让它日趋完善，它的工作不仅是对数据的整理，还有我对程序逻辑的梳理和设计思路的推敲。

如果你也对传统文化稍微有点兴趣，不妨耐心的看下去……也许你会发现：原理我们日常习以为常的一个称呼，需要考虑那么多细节。

称谓系统的庞大

中国的亲戚称呼系统复杂在于，它对每种亲戚关系都有特定的称呼，同时对于同种关系不同地方、对于不同性别的人都可能有不同的称呼。

1. 
   

   对外国人而言，父母的兄弟姐妹不外乎：uncle、aunt；而对于我们来说，父母的兄弟姐妹有：伯父、叔叔、姑姑、舅舅、姨妈；

   
   


2. 
   

   不同地方对同个亲戚的称呼都是不一样的，以爸爸为例，别称包含有：爸爸、父亲、老爸、阿爸、老窦、爹地、老汉、老爷子等等；

   
   


3. 
   

   不同关系链可能具有相同的称呼；比如“舅公”一词，可以是父母亲的舅舅，也可以是老公的舅舅，而这两种关系辈分却不同。究其原因我猜测是，传统上由姻亲产生的亲戚关系，为表达谦卑会自降一辈，随子女称呼配偶的长辈。

   
   


4. 
   

   一个称呼中可能是多种关系的合称。比如：“父母”、“子女”、“公婆”，他们不是指代一个人物关系，而是几个关系的合称。

   
   

在设计这套算法的时候，我希望它能尽量包含各种称呼、各种关系链，因为我之所以做这个项目就是像让它真正集合多种需求，否则如果它不够全面那终究是个代码演示而已。

关系网络的表达

亲戚的关系网络是以血缘和婚姻为纽带联系在一起的，每个节点都是一个人，每个人都有诸如：父、母、兄、弟、姐、妹、子、女、夫、妻这样的基础关系。关系网络中的节点数量随着层级的加深而指数增长！如果是5层关系，大概就有9x9x9x9x9 = 59049种关系了（当然，这其中有小部分是重复的）。如果想要把几万个关系，数十万个称呼全部尽收其中显然是不可能的，没人有那个精力去维护。

如何将亲戚关系网络中每个节点之间的关系用数据结构表现出来是一个难点。它需要保证数据量尽量全、占用体积小、易检索、可扩展等特点，这样才能保证算法检索关系时的完整性和高效性。

网络的寻址问题

既然是计算，那一定不是简单通过父、母、子、女等这些基础关系找对应称呼了。否则这就是简单的字典查询而已，谈不上算法。如果问的是：“舅妈的儿子的奶奶的外孙”又该如何呢？首先，需要在网络中找到单一称呼，如“舅妈”，而下一步找她的“儿子”，而非你自己的“儿子”。这就要求有类似于指针的功能，关系链每往前走一步，指针就指引着关系的节点，最终需找到答案。

而就像前面说到的一样，某些称谓可能对应多条关系，同时有些关系并不是唯一的。比方说你爸爸的儿子就是你吗？有没有可能是弟弟或者哥哥？而这些是不是同时取决于你的性别呢？
因为如果你是女的，那么你爸爸的儿子必然不是你呀！

这就对算法提出了一个要求，它必须准确的包含多种可能性。

年龄和性别的推测

随着关系链的复杂，最终得到的答案也有多种。那有没有一种可能，在对关系链的描述中是否存在一些词，可以通过逻辑判断知道对方的性别或年纪大小，进而排除一些不可呢？

例如“爱人的婆婆的儿子”，单从“爱人”二字我们并不能推测自己的性别，而后的“婆婆”确是只有女性才有的亲戚，“爱人的婆婆”就足以推断自己是男的，那么“爱人的婆婆的儿子”必然包含自己。相反，“爱人的婆婆的女儿”一定不是自己，只能是自己的姊妹。

再比如：自己哥哥的表哥也是你的表哥，你弟弟的表哥还是你表哥吗？因为你无法判断你弟弟和他的表哥谁大，自然无法判断对方是你的表哥还是表弟。既然都有可能存在，就需要保留可能性进一步计算。这就涉及到了在关系链的计算中不仅仅需要考虑隐藏的性别线索，还有年龄线索。

身份角度的切换

单从亲戚和自己的关系链条中开始算亲戚的称呼，仅仅是单向的推算，只需要一个个关系往下算就好。如果想知道对方称呼为我什么，这就需要站在对方的角度，重新逆向的调理出我和他之间的关系了。比如我的“外孙”应该叫我什么？

另一方面，如果把我置身于第三者，想知道我的两个亲戚他们之间如何称呼，就必须要同时站在两个亲戚的角度，看待他们彼此之间的关系了。比如：我的“舅妈”该叫我的“外婆”什么呢？

年龄排序的问题

前面说到的都是对不同关系链中的可能性推敲，那如果相同的关系如何判断年龄呢？如果你有3个舅舅呢？虽然不管哪个舅舅，他们对于你的关系都一样，他们的老婆你都得叫声“舅妈”。但他们毕竟有年龄区别，自然就有长幼的排序了。有了排序，就又引发了对他们之间关系的思考。

还是举例说明下：“舅舅”和“舅妈”是什么关系？相信大部分第一反应就是夫妻关系呗！其实不尽然，毕竟有些人不会只有一个舅舅吧？那“大舅妈”和“二舅”就不是夫妻关系了，他们是叔嫂关系呀。“二舅”得管“大舅妈”叫“嫂子”，“大舅妈”得管“二舅”叫“小叔子”。

再进一步说，“二舅的儿子”得叫“大舅妈”为“伯母”，“大舅的儿子”得叫“二舅”为“二叔”。这些由父辈的排序问题影响自己称谓的不同，而是我这套算法需要考虑的内容。

怎么样？是不是没有想象中的那么简单？
如果你想了解更多实现和思路的细节，可以关注本项目开源代码哦：github.com/mumuy/relat…

你也可以在此了解算法的基础原理：算法实现原理介绍

序列化隐秘的吭，你踩过了没？

序列化和反序列化

Java序列化的目的主要有2个：

• 网络传输


• 对象持久化

当2个相对独立的进程，需要进行跨进程服务调用时，就需要把被传输的Java对象编码为字节数组或者ByteBuffer对象。

接收方只需要把这些字节数组或者Bytebuf对象重新解码成内存对象即可实现通信、调用的作用。

那么在我们使用序列化的时候有哪些需要注意的，避免的坑呢？

成员变量不能以is开头

阿里的《Java开发手册》明文规定了：成员变量禁止使用类似 isXxxx 的命名方式，也不要有isXxx命名的方法

大概的意思就是：不要加is前缀，因为部分框架序列化的时候，会以为对应的字段名是isXxxx后面的Xxxx

• 比如：isSucceed序列化成Succeed，前端读取isSucceed的时候就会发现没有这个字段，然后出错了。

这里面的序列化框架其实就是fastjson，我们可以直接去看他的源码

fastjson源码分析：computeGetters

去找get前缀的方法，然后进行字符串切割找到get后面的

去找is前缀的方法，然后进行字符串切割

• 这里还进行了驼峰命名的判断：ixXxx，第三个字符是否是大写等判断

所以isSucceed字段会被fastjson框架认为Succeed字段。

默认值

成员变量的默认值同样会带来坑

同样是阿里的《Java开发手册》里面也是规定了：POJO类、RPC方法必须使用包装类型。

关于包装类型和基本类型的区别，如果还有不清楚的，赶紧去看，这是最基础的面试知识点..

POJO类必须使用包装类型

尽量让错误暴露在编译期，不要拖到运行期

基本类型具有初始值，比如：

• Int：0


• float：0.0f


• boolean：false

一个统计点赞的接口里面的返回值包含一个表示点赞数变化的字段，当发生错误的时候，这个字段没有进行赋初始值，就会出现以下情况：

• 基本类型：读默认值，0，表达的意思就是没有点赞数变化，程序上并不知道是服务器那边出了错。


• 包装类型：读到了个null，程序上是知道服务器那边出错了，可以进行对应的显示，比如显示 - ，表示读取不到等操作。

总的来说就是：如果字段设置为基础类型并且基础类型的默认值具有业务意义，那么就会出错，并且无法感知错误