1：项目背景

一个项目往往会有小程序，APP，PC等多端访问，比如淘宝，京东等。这时候就会有一些踢人下线的需求，比如你在一台电脑登录了PC端，这时候你再另外一台电脑也登录PC端，这时候之前在另外一台电脑上就会被强制下线。

或者你登录了PC端，这时候你登陆了APP或者小程序，这时候PC端的账号也会被强制下线

2：项目只有PC端

假设我们现在的项目只有PC端，没有小程序或者APP，那么这时候就是很简单了，用户的sessin(也就是所谓的Token)一般都是存储在redis中，session中包括用户ID等一些信息，当然还有一个最重要的就是登录的ip地址。

1：用户在登录的时候，从redis中获取用户session，如果没有就可以直接登录了

2：用户在另外一台电脑登录，从redis中获取到用户session，这时候用户session是有的，说明用户之前已经登录过了

3：这时候从用户session中获取IP，判断二者的ip是不是相同，如果不同，这时候就要发送一个通知给客户端，让另外一台设备登录的账号强制下线即可

3：项目有PC端和APP端和小程序端

当你的应用有PC端和APP端的时候，我们用户的session如果还是只存一个ip地址，那明显就是不够的，因为很多情况下，我们PC端和APP端是可以同时登录的，比如淘宝，京东等都是，也就是所谓的双端登录

这时候就会有多种情况

单端登录：PC端，APP端，小程序只能有一端登录

双端登录：允许其中二个端登录

三端登录：三个端都可以同时登录

对于三端可以同时登录就很简单，但是现在有个限制，就是app端只能登录一次，不能同时登录，也就是我一个手机登录了APP，另外一个手机登录的话，之前登录的APP端就要强制下线

所以我们的用户session存储的格式如下

{

   userId：用户的id

   clientType：PC端，小程序端，APP端

   imei：就是设备的唯一编号(对于PC端这个值就是ip地址，其余的就是手机设备的一个唯一编号)

}

单端登录

首先我们要知道，用户登录不同的设备那么用户session是不一样的。对于单端登录，那么我们可以拿到用户的所有的session，然后根据clientType和imei号来强制将其它端的用户session删除掉，然后通知客户端强制下线

双端登录

同样拿到所有用户的session，然后根据自己的业务需求来判定哪一端需要强制下线，比如我们现在已经登录了PC端和APP端，这时候登录小程序，现在要让APP端的强制下线。

这时候登录之后获取用户所有的session，这时候会有二个用户session，首先拿到clientType = APP的session，然后来通知客户端这个端需要强制下线。

如果这时候我登录了PC端和一个APP端，这时候我用另外一台手机登录APP端，那么之前那台手机上登录的APP端就要被强制下线，这个时候仅通过clientType是不行的，因为我二个手机登录的clientType都是APP端。所以这时候就要根据imei号来判断了。因为不同的手机imei号是不一样的。

这时候我拿到用户所有的session

  PC端的session

  sessionA{

      userId: 1,

      clientType: PC,

      imei: "123"

  }

  

  APP端的session

  sessionA{

      userId: 1,

      clientType: APP,

      imei: "12345"

  }

这时候我从另外一台手机登录的时候，生成的session应该是这样的

 APP端的session

  sessionA{

      userId: 1,

      clientType: APP,

      imei: "1234567"

  }

我发现同一个clientType的session已经有了，这时候我要判断imei号是否一样，imei一样说明是同一台设备，不同说明不是同一台设备，我们只需要把对应设备的账号强制下线即可了

总结

不管是单端登录，双端登录还是多端登录，我们都是根据用户session来判断。只要根据clientType和imei号来就可以满足我们大部分的踢人下线需求了。

1.前言

大家好，我是王老狮，近期OpenAI开放了chatGPT的最新gpt-3.5-turbo模型，据介绍该模型是和当前官网使用的相同的模型，如果你还没体验过ChatGPT，那么今天就教大家如何打破网络壁垒，打造一个属于自己的智能助手把。本文包括API Key的申请以及网络代理的搭建,那么事不宜迟，我们现在开始。

2.对接流程

2.1.API-Key的获取

首先第一步要获取OpenAI接口的API Key，该Key是你用来调用接口的token，主要用于接口鉴权。获取该key首先要注册OpenAi的账号，具体可以见我的另外一篇文章，ChatGPT保姆级注册教程。

1. 打开platform.openai.com/网站，点击view API Key，

2. 点击创建key

3. 弹窗显示生成的key，记得把key复制，不然等会就找不到这个key了，只能重新创建。

将API Key保存好以备用

2.2.API用量的查看

这里可以查看API的使用情况，新账号注册默认有5美元的试用额度，之前都是18美元，API成本降了之后试用额度也狠狠地砍了一刀啊，哈哈。

2.3.核心代码实现

2.3.1.pom依赖

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

    <modelVersion>4.0.0modelVersion>

    <groupId>com.webtapgroupId>

    <artifactId>webtapartifactId>

    <version>0.0.1version>

    <packaging>jarpackaging>



    <parent>

        <groupId>org.springframework.bootgroupId>

        <artifactId>spring-boot-starter-parentartifactId>

        <version>2.1.2.RELEASEversion>

    parent>



    <dependencies>

        <dependency>

            <groupId>org.springframework.bootgroupId>

            <artifactId>spring-boot-starter-webartifactId>

        dependency>

        <dependency>

            <groupId>org.springframework.bootgroupId>

            <artifactId>spring-boot-starter-thymeleafartifactId>

        dependency>

        <dependency>

            <groupId>nz.net.ultraq.thymeleafgroupId>

            <artifactId>thymeleaf-layout-dialectartifactId>

        dependency>

        <dependency>

            <groupId>org.springframework.bootgroupId>

            <artifactId>spring-boot-starter-data-jpaartifactId>

        dependency>

        <dependency>

            <groupId>org.springframework.bootgroupId>

            <artifactId>spring-boot-devtoolsartifactId>

        dependency>

        <dependency>

            <groupId>org.springframework.bootgroupId>

            <artifactId>spring-boot-starter-testartifactId>

        dependency>

        <dependency>

            <groupId>org.springframework.bootgroupId>

            <artifactId>spring-boot-starter-mailartifactId>

        dependency>



        <dependency>

            <groupId>mysqlgroupId>

            <artifactId>mysql-connector-javaartifactId>

        dependency>

        <dependency>

            <groupId>org.apache.commonsgroupId>

            <artifactId>commons-lang3artifactId>

            <version>3.4version>

        dependency>

        <dependency>

            <groupId>commons-codecgroupId>

            <artifactId>commons-codecartifactId>

        dependency>

        <dependency>

            <groupId>org.jsoupgroupId>

            <artifactId>jsoupartifactId>

            <version>1.9.2version>

        dependency>

        

        <dependency>

            <groupId>com.alibabagroupId>

            <artifactId>fastjsonartifactId>

            <version>1.2.56version>

        dependency>

        <dependency>

            <groupId>net.sourceforge.nekohtmlgroupId>

            <artifactId>nekohtmlartifactId>

            <version>1.9.22version>

        dependency>

        <dependency>

            <groupId>com.github.pagehelpergroupId>

            <artifactId>pagehelper-spring-boot-starterartifactId>

            <version>1.4.1version>

        dependency>

        <dependency>

            <groupId>org.projectlombokgroupId>

            <artifactId>lombokartifactId>

        dependency>

        <dependency>

            <groupId>org.apache.httpcomponentsgroupId>

            <artifactId>httpasyncclientartifactId>

            <version>4.0.2version>

        dependency>

        <dependency>

            <groupId>org.apache.httpcomponentsgroupId>

            <artifactId>httpcore-nioartifactId>

            <version>4.3.2version>

        dependency>



        <dependency>

            <groupId>org.apache.httpcomponentsgroupId>

            <artifactId>httpclientartifactId>

            <version>4.3.5version>

            <exclusions>

                <exclusion>

                    <artifactId>commons-codecartifactId>

                    <groupId>commons-codecgroupId>

                exclusion>

            exclusions>

        dependency>

        <dependency>

            <groupId>commons-httpclientgroupId>

            <artifactId>commons-httpclientartifactId>

            <version>3.1version>

            <exclusions>

                <exclusion>

                    <artifactId>commons-codecartifactId>

                    <groupId>commons-codecgroupId>

                exclusion>

            exclusions>

        dependency>

        <dependency>

            <groupId>org.mybatis.spring.bootgroupId>

            <artifactId>mybatis-spring-boot-starterartifactId>

            <version>1.3.1version>

        dependency>

        <dependency>

            <groupId>com.github.ulisesbocchiogroupId>

            <artifactId>jasypt-spring-boot-starterartifactId>

            <version>2.0.0version>

        dependency>



    dependencies>



    <build>

        <plugins>

            <plugin>

                <groupId>org.springframework.bootgroupId>

                <artifactId>spring-boot-maven-pluginartifactId>

            plugin>

        plugins>

    build>



project>

2.3.2.实体类ChatMessage.java

用于存放发送的消息信息，注解使用了lombok，如果没有使用lombok可以自动生成构造方法以及get和set方法

@Data

@NoArgsConstructor

@AllArgsConstructor

public class ChatMessage {

    //消息角色

    String role;

    //消息内容

    String content;

}

2.3.3.实体类ChatCompletionRequest.java

用于发送的请求的参数实体类，参数释义如下：

model：选择使用的模型，如gpt-3.5-turbo

messages ：发送的消息列表

temperature ：温度，参数从0-2，越低表示越精准，越高表示越广发，回答的内容重复率越低

n :回复条数，一次对话回复的条数

stream :是否流式处理，就像ChatGPT一样的处理方式，会增量的发送信息。

max_tokens ：生成的答案允许的最大token数

user ：对话用户

@Data

@Builder

public class ChatCompletionRequest {



    String model;



    List<ChatMessage> messages;



    Double temperature;



    Integer n;



    Boolean stream;



    List<String> stop;



    Integer max_tokens;



    String user;

}

2.3.4.实体类ExecuteRet .java

用于接收请求返回的信息以及执行结果

/**

 * 调用返回

 */

public class ExecuteRet {



    /**

     * 操作是否成功

     */

    private final boolean success;



    /**

     * 返回的内容

     */

    private final String respStr;



    /**

     * 请求的地址

     */

    private final HttpMethod method;



    /**

     * statusCode

     */

    private final int statusCode;



    public ExecuteRet(booleansuccess, StringrespStr, HttpMethodmethod, intstatusCode) {

        this.success =success;

        this.respStr =respStr;

        this.method =method;

        this.statusCode =statusCode;

    }



    @Override

    public String toString() {

        return String.format("[success:%s,respStr:%s,statusCode:%s]", success, respStr, statusCode);

    }



    /**

     *@returnthe isSuccess

     */

    public boolean isSuccess() {

        return success;

    }



    /**

     *@returnthe !isSuccess

     */

    public boolean isNotSuccess() {

        return !success;

    }



    /**

     *@returnthe respStr

     */

    public String getRespStr() {

        return respStr;

    }



    /**

     *@returnthe statusCode

     */

    public int getStatusCode() {

        return statusCode;

    }



    /**

     *@returnthe method

     */

    public HttpMethod getMethod() {

        return method;

    }

}

2.3.5.实体类ChatCompletionChoice .java

用于接收ChatGPT返回的数据

@Data

public class ChatCompletionChoice {



    Integer index;



    ChatMessage message;



    String finishReason;

}

2.3.6.接口调用核心类OpenAiApi .java

使用httpclient用于进行api接口的调用，支持post和get方法请求。

url为配置文件open.ai.url的值，表示调用api的地址：https://api.openai.com/ ，token为获取的api-key。
执行post或者get方法时增加头部信息headers.put("Authorization", "Bearer " + token); 用于通过接口鉴权。

@Slf4j

@Component

public class OpenAiApi {



    @Value("${open.ai.url}")

    private String url;

    @Value("${open.ai.token}")

    private String token;



    private static final MultiThreadedHttpConnectionManagerCONNECTION_MANAGER= new MultiThreadedHttpConnectionManager();



    static {

        // 默认单个host最大链接数

CONNECTION_MANAGER.getParams().setDefaultMaxConnectionsPerHost(

                Integer.valueOf(20));

        // 最大总连接数，默认20

CONNECTION_MANAGER.getParams()

                .setMaxTotalConnections(20);

        // 连接超时时间

CONNECTION_MANAGER.getParams()

                .setConnectionTimeout(60000);

        // 读取超时时间

CONNECTION_MANAGER.getParams().setSoTimeout(60000);

    }



    public ExecuteRet get(Stringpath, Map headers) {

        GetMethod method = new GetMethod(url +path);

        if (headers== null) {

            headers = new HashMap<>();

        }

        headers.put("Authorization", "Bearer " + token);

        for (Map.Entry h : headers.entrySet()) {

            method.setRequestHeader(h.getKey(), h.getValue());

        }

        return execute(method);

    }



    public ExecuteRet post(Stringpath, Stringjson, Map headers) {

        try {

            PostMethod method = new PostMethod(url +path);

            //log.info("POST Url is {} ", url + path);

            // 输出传入参数

log.info(String.format("POST JSON HttpMethod's Params = %s",json));

            StringRequestEntity entity = new StringRequestEntity(json, "application/json", "UTF-8");

            method.setRequestEntity(entity);

            if (headers== null) {

                headers = new HashMap<>();

            }

            headers.put("Authorization", "Bearer " + token);

            for (Map.Entry h : headers.entrySet()) {

                method.setRequestHeader(h.getKey(), h.getValue());

            }

            return execute(method);

        } catch (UnsupportedEncodingExceptionex) {

log.error(ex.getMessage(),ex);

        }

        return new ExecuteRet(false, "", null, -1);

    }



    public ExecuteRet execute(HttpMethodmethod) {

        HttpClient client = new HttpClient(CONNECTION_MANAGER);

        int statusCode = -1;

        String respStr = null;

        boolean isSuccess = false;

        try {

            client.getParams().setParameter(HttpMethodParams.HTTP_CONTENT_CHARSET, "UTF8");

            statusCode = client.executeMethod(method);

method.getRequestHeaders();



            // log.info("执行结果statusCode = " + statusCode);

            InputStreamReader inputStreamReader = new InputStreamReader(method.getResponseBodyAsStream(), "UTF-8");

            BufferedReader reader = new BufferedReader(inputStreamReader);

            StringBuilder stringBuffer = new StringBuilder(100);

            String str;

            while ((str = reader.readLine()) != null) {

log.debug("逐行读取String = " + str);

                stringBuffer.append(str.trim());

            }

            respStr = stringBuffer.toString();

            if (respStr != null) {

             log.info(String.format("执行结果String = %s, Length = %d", respStr, respStr.length()));

                          } 

            inputStreamReader.close();

            reader.close();

            // 返回200，接口调用成功

            isSuccess = (statusCode == HttpStatus.SC_OK);

        } catch (IOExceptionex) {

        } finally {

method.releaseConnection();

        }

        return new ExecuteRet(isSuccess, respStr,method, statusCode);

    }



}

2.3.7.定义接口常量类PathConstant.class

用于维护支持的api接口列表

public class PathConstant {

    public static class MODEL {

				//获取模型列表

        public static String MODEL_LIST = "/v1/models";

    }



    public static class COMPLETIONS {

        public static String CREATE_COMPLETION = "/v1/completions";

				//创建对话

        public static String CREATE_CHAT_COMPLETION = "/v1/chat/completions";

      

    }

}

2.3.8.接口调用调试单元测试类OpenAiApplicationTests.class

核心代码都已经准备完毕，接下来写个单元测试测试下接口调用情况。

@SpringBootTest

@RunWith(SpringRunner.class)

public class OpenAiApplicationTests {



    @Autowired

    private OpenAiApi openAiApi;

    @Test

    public void createChatCompletion2() {

        Scanner in = new Scanner(System.in);

        String input = in.next();

        ChatMessage systemMessage = new ChatMessage('user', input);

        messages.add(systemMessage);

        ChatCompletionRequest chatCompletionRequest = ChatCompletionRequest.builder()

                .model("gpt-3.5-turbo-0301")

                .messages(messages)

                .user("testing")

                .max_tokens(500)

                .temperature(1.0)

                .build();

        ExecuteRet executeRet = openAiApi.post(PathConstant.COMPLETIONS.CREATE_CHAT_COMPLETION, JSONObject.toJSONString(chatCompletionRequest),

                null);

        JSONObject result = JSONObject.parseObject(executeRet.getRespStr());

        List choices = result.getJSONArray("choices").toJavaList(ChatCompletionChoice.class);

        System.out.println(choices.get(0).getMessage().getContent());

        ChatMessage context = new ChatMessage(choices.get(0).getMessage().getRole(), choices.get(0).getMessage().getContent());

        System.out.println(context.getContent());

    }



}

• 使用Scanner 用于控制台输入信息，如果单元测试时控制台不能输入，那么进入IDEA的安装目录，修改以下文件。增加最后一行增加-Deditable.java.test.console=true即可。

• 
  

  创建ChatMessage对象，用于存放参数,role有user,system,assistant,一般接口返回的响应为assistant角色，我们一般使用user就好。

  
  


• 
  

  定义请求参数ChatCompletionRequest，这里我们使用3.1日发布的最新模型gpt-3.5-turbo-0301。具体都有哪些模型大家可以调用v1/model接口查看支持的模型。

  
  


• 
  

  之后调用openAiApi.post进行接口的请求，并将请求结果转为JSON对象。取其中的choices字段转为ChatCompletionChoice对象，该对象是存放api返回的具体信息。

  
  

  接口返回信息格式如下：

  
  

  {
  
      "id": "chatcmpl-6rNPw1hqm5xMVMsyf6PXClRHtNQAI",
  
      "object": "chat.completion",
  
      "created": 1678179420,
  
      "model": "gpt-3.5-turbo-0301",
  
      "usage": {
  
          "prompt_tokens": 16,
  
          "completion_tokens": 339,
  
          "total_tokens": 355
  
      },
  
      "choices": [{
  
          "message": {
  
              "role": "assistant",
  
              "content": "\n\nI. 介绍数字孪生的概念和背景\n    A. 数字孪生的定义和意义\n    B. 数字孪生的发展历程\n    C. 数字孪生在现代工业的应用\n\nII. 数字孪生的构建方法\n    A. 数字孪生的数据采集和处理\n    B. 数字孪生的建模和仿真\n    C. 数字孪生的验证和测试\n\nIII. 数字孪生的应用领域和案例分析\n    A. 制造业领域中的数字孪生应用\n    B. 建筑和城市领域中的数字孪生应用\n    C. 医疗和健康领域中的数字孪生应用\n\nIV. 数字孪生的挑战和发展趋势\n    A. 数字孪生的技术挑战\n    B. 数字孪生的实践难点\n    C. 数字孪生的未来发展趋势\n\nV. 结论和展望\n    A. 总结数字孪生的意义和价值\n    B. 展望数字孪生的未来发展趋势和研究方向"
  
          },
  
          "finish_reason": "stop",
  
          "index": 0
  
      }]
  
  }
  
  

  
  


• 
  

  输出对应的信息。

  
  

2.3.9.结果演示

2.4.连续对话实现

2.4.1连续对话的功能实现

基本接口调通之后，发现一次会话之后，没有返回完，输入继续又重新发起了新的会话。那么那么我们该如何实现联系上下文呢？其实只要做一些简单地改动，将每次对话的信息都保存到一个消息列表中，这样问答就支持上下文了，代码如下：

List messages = new ArrayList<>();

@Test

public void createChatCompletion() {

    Scanner in = new Scanner(System.in);

    String input = in.next();

    while (!"exit".equals(input)) {

        ChatMessage systemMessage = new ChatMessage(ChatMessageRole.USER.value(), input);

        messages.add(systemMessage);

        ChatCompletionRequest chatCompletionRequest = ChatCompletionRequest.builder()

                .model("gpt-3.5-turbo-0301")

                .messages(messages)

                .user("testing")

                .max_tokens(500)

                .temperature(1.0)

                .build();

        ExecuteRet executeRet = openAiApi.post(PathConstant.COMPLETIONS.CREATE_CHAT_COMPLETION, JSONObject.toJSONString(chatCompletionRequest),

                null);

        JSONObject result = JSONObject.parseObject(executeRet.getRespStr());

        List choices = result.getJSONArray("choices").toJavaList(ChatCompletionChoice.class);

        System.out.println(choices.get(0).getMessage().getContent());

        ChatMessage context = new ChatMessage(choices.get(0).getMessage().getRole(), choices.get(0).getMessage().getContent());

        messages.add(context);

        in = new Scanner(System.in);

        input = in.next();

    }

}

因为OpenAi的/v1/chat/completions接口消息参数是个list，这个是用来保存我们的上下文的，因此我们只要将每次对话的内容用list进行保存即可。

2.4.2结果如下：

4.常见问题

4.1.OpenAi接口调用不通

因为https://api.openai.com/地址也被限制了，但是接口没有对地区做校验，因此可以自己搭建一个香港代理，也可以走科学上网。

我采用的是香港代理的模式，一劳永逸，具体代理配置流程如下：

1. 购买一台香港的虚拟机，反正以后都会用得到，作为开发者建议搞一个。搞活动的时候新人很便宜，基本3年的才200块钱。


2. 访问nginx.org/download/ng… 下载最新版nginx


3. 部署nginx并修改/nginx/config/nginx.conf文件，配置接口代理路径如下

server {

        listen       19999;

        server_name  ai;



         ssl_certificate      /usr/local/nginx/ssl/server.crt;

        ssl_certificate_key  /usr/local/nginx/ssl/server.key;



        ssl_session_cache    shared:SSL:1m;

        ssl_session_timeout  5m;



        ssl_ciphers  HIGH:!aNULL:!MD5;

        ssl_prefer_server_ciphers  on;



        #charset koi8-r;



        location /v1/ {

                proxy_pass ;

        }

    }

4. 启动nginx


5. 将接口访问地址改为nginx的机器出口IP+端口即可

如果代理配置大家还不了解，可以留下评论我单独出一期教程。

4.2.接口返回401

检查请求方法是否增加token字段以及key是否正确

5.总结

至此JAVA对OpenAI对接就已经完成了，并且也支持连续对话，大家可以在此基础上不断地完善和桥接到web服务，定制自己的ChatGPT助手了。我自己也搭建了个平台，不断地在完善中，具体可见下图，后续会开源出来，想要体验的可以私信我获取地址和账号哈

数据库是公司重要资产，在此类重要资产平台上，尤其是重要操作，应该保持敬畏心。

数据库被删了？可怎么证明是某某某删了数据库？或者根本都不知道谁删除了数据库，又没抓现行，该怎么办？

正文

第一步 证据先行，有录屏有真相

删库动作的录制回放

录制回放让团队能清楚了解和学习用户路径和行为，其中对于关键页面诸如删除等高价值的动作，可以开启录制回放功能，比如下图，就是某一用户某一行为的屏幕录制情况。

删库成功的页面截图

针对录制回放的内容，可以看到用户点击删除按钮这一高风险行为。

第二步 录屏背后是详细的用户访问数据

在rum中查看用户会话

在用户使用产品的那一刻，用户体验就开始了。用户体验数据洞见很多，加购物车、下单、视频播放等高价值按钮背后的性能等相关数据和业务息息相关：比如下图展示了成功删除数据库的提示弹窗。

发现用户登录并浏览数据库平台的详细信息

每一次用户会话中，记录着用户的来源、访问时长，以及用户行为，这里面就包含对页面的加载（切换）和按钮点击。下图便是一个用户登录数据库管理平台后，0-20分钟以内的用户旅程：

发现用户点击删除库的按钮的详细信息

链接或者按钮背后隐藏着逻辑和用户动机，充分利用能转化良好化学反应。反之，在用户旅程中，也能看到用户点击删除数据库的按钮的行为，如下图所示：

点击按钮成功触发删除数据库的接口请求

为了明白请求或行为在系统中的'前世今生'，链路追踪已经成了必备，在下图中，用户行为触发的请求的完整上下文就被“追踪”到了：

后台处理接口请求

在产品使用流畅度中，丝滑不一定是卖点，但“慢”肯定是用户卡点，通过全链路链路追踪综合分析，可以得到请求耗时占比，进一步定位卡在哪里（前端、后端、网络），详情见下图：

第三步 成功删库的链路详情

前后端加上数据库形成可视化闭环，构成的业务链路，能够高效定位业务情况，下图能完整看出一次删库的效率：

第四步 自动关联删库日志

让全链路追踪能锦上添花的要数自动关联日志的功能了，下图能清晰看到链路所产生的日志：

以上我们便通过用户删库的录屏，用户行为、链路信息、操作日志等，还原了删库现场。当然，其中涉及了很多技术内容，下面整理了其中一些常见问题

相关技术点的FAQ ：

1. 如何针对关键步骤开启录制回放功能

以 删除按钮 为例 ，用户点击删除按钮后 可以开启 录制回放功能

  function deleteDB(){

        showConfirm(deleteDB).then((yes,no)=>{

            if(yes)=>[             datafluxRum.startSessionReplayRecording();]

        })

       

    }

2. 录制回放是否涉及密码等用户私密信息

出于数据安全考虑，任何情况下，以下元素都会被屏蔽：

• password、email 和 tel 类型的输入


• 具有 autocomplete 属性的元素，例如信用卡号、到期日期和安全代码

3 . 如何将 用户行为与 后端 进行关联

前后端关联通过http请求头的traceID进行关联，开启rum和apm简单设置即可实现关联。
在rum中仅仅需要在启动时注明后端地址。以本文的后台管理系统为例，需要在启动rum时开启allowTracingOrigin这个字段，配置见下图

可以参照如下代码

 window.DATAFLUX_RUM &&

    window.DATAFLUX_RUM.init({

        applicationId: "node_mongo_admin_express",

        datakitOrigin: "http://mongodb_admin:9529", // 协议（包括：//），域名（或IP地址）[和端口号]

        env: "production",

        service:"node_mongo_admin_express",

        version: "1.0.0",

        trackInteractions: true,

        allowedTracingOrigins: ["http://mongodb_admin:1234"], // 非必填，允许注入trace采集器所需header头部的所有请求列表。可以是请求的origin，也可以是是正则

        sessionSampleRate: 100,

        sessionReplaySampleRate: 100,

        defaultPrivacyLevel:  'allow',      

      });

      window.DATAFLUX_RUM && window.DATAFLUX_RUM.startSessionReplayRecording()

4. 如何自动将采集的日志和链路信息进行关联

需要将traceID注入日志，进行切分，就可以实现链路和日志的关联。本文仅用一行进行了关联，代码见下图。

5. 如何从后端下钻到数据库

仅需要接入追踪工具即可实现下图全链路追踪,本文后端使用node的express框架，链路追踪展示图如下：

其中服务调用拓扑关系如下，也就是web端访问后端（node技术栈）的，后端调用数据库（mongo）

6. 后端支持java吗？

支持java、python、go以及.net等，接入的学习成本是有的，整体对于开发而言，接入配置问题不大。

7. 前端的技术架构或技术栈有兼容性吗？

目前不论是mpa还是spa，不论是ssr、还是csr，亦或是vue、react、jQuery等，都支持，但针对不同架构，需要选择接入的场景。

8. 还支持哪些场景？

支持的场景很多，比如：

• 线上告警的故障定位


• 开发、测试环境的bug调试


• 用户行为的追踪与回放


• 性能瓶颈的查找与性能提升

9.有关请求耗时占比，能更详细的举个例子吗？

我们以后端为例，看到db_create这个接口：

这些数据是如何统计得出的呢？感兴趣的同学可以查看下图：

其中每个部分的计算原理如下：

Queueing（队列）耗时 = Duration - First Byte - Download  

First Byte（首包）耗时 = responseStart - domainLookupStart  

Download（下载）耗时 =  responseEnd - responseStart

更深入的技术内容，我将在今后的文章继续为大家整理。

综上所述

可观测性切入点很多，聪明的团队会观测；可观测性是研发质量的试金石，是企业城墙的基石，用好可观测性，能更多的了解系统，扩宽业务。

本文由观测云高级产品技术专家刘刚和交付工程师 苏桐桐共同撰写，其中所有截图及数据，均来自模拟数据，此外也欢迎一起探讨技术和业务。

参考词汇

• adminMongo：mongo数据库管理平台


• rum: 真实用户体验


• apm: 应用性能管理


• metrics:指标


• logs：日志


• trace：链路

1. 前言

微信小程序开发平台，提供有一类 API，可以让开发者获取到微信登录用户的个人数据。这类 API 统称为开放接口。

Tip：微信小程序开发平台，会把微信登录用户的个人信息分为明文数据和敏感数据。

明文数据也称为公开数据，开发者可以直接获取到，如登录者的昵称、头像……

敏感数据如电话号码、唯一标识符……等数据，只有高级认证开发者和经过登录者授权后才能解密获取到。

这一类 API较多，且 API之间功能有重叠之处，相互之间的区别较微小。有的适用于低版本，有的适用于高版本。

为了避免在使用时出现选择混乱，本文将通过具体应用案例介绍几个常用 API的使用。

2. 开放接口

开放接口是对一类 API的统称，开发者可以通过调用这类接口得到微信登录用户的授权或获取登录者的个人数据。
开放接口又分成几个子类 API ：

• 登录接口： 包括 wx.pluginLogin(Object args)、wx.login(Object object)、wx.checkSession(Object object) 几 个 API。


• 账号信息： 包括Object wx.getAccountInfoSync()此接口用来获取开发者的账号信息。


• 用户信息： 包括 wx.getUserProfile(Object object)、wx.getUserInfo(Object object)、UserInfo。使用频率非常高的接口，常用于小程序中获取登录者个人公开数据。


• 授权接口：wx.authorizeForMiniProgram(Object object)、wx.authorize(Object object)

除上述列出的子类接口，还有收货地址、生物认证……等诸多子类 API，有兴趣者可以自行了解。

2.1 登录接口

登录接口中有 3 个 API，对于开发者来说，使用频率较高的是 login接口，此环节将重点介绍此接口。

非本文特别关注的接口，会简略带过。

wx.pluginLogin(Object args)：此接口只能在插件中可以调用，调用此接口获得插件用户的标志凭证code，插件可使用此凭证换取用于识别用户的唯一标识 OpenpId。

用户不同、宿主小程序不同或插件不同的情况下，该标识均不相同，即当且仅当同一个用户在同一个宿主小程序中使用同一个插件时，OpenpId 才会相同。

对于一般开发者，此 接口用的不是很多，具体使用细节在此处也不做过多复述。

什么是 OpenId?

当微信用户登录公众号或小程序时，微信平台为每一个微信登录者分配的一个唯一标识符号。

2.1.1 wx.login(Object object)

功能描述：

• 
  

  开发者使用此接口可以获取到微信登录者的登录凭证（code）。

  
  

  
  

  登录凭证具有临时性，也就是每次调用时都会不一样，所以code 只能使用一次。

  
  

  
  


• 
  

  开发者可以通过临时code，再向微信接口服务器索取登录者的唯一标识符 OpenId、微信开发平台账号的唯一标识 UnionID(需要当前小程序已绑定到微信开放平台帐号）、以及会话密钥 session_key。

  
  

那么，获取到的openId和session_key对于开发者而言，有什么实质性的意义？

• 
  

  根据 OpenId的唯一性特点，可以在微信用户第一次登录时，把OpenID保存在数据库或缓存中，在后续登录时，只需要检查用户的 OpenId是否存在于数据库或缓存中，便能实现自动登录功能。

  
  


• 
  

  session_key 也称会话密钥，用来解密微信登录者的敏感数据。

  
  

  
  

  后文将详细介绍。

  
  

  
  

如何获取OpenId？

现通过一个简单案例，实现微信小程序端与开发者服务器之间的数据交互。以此了解开发者服务器如何通过微信小程序传递过来的用户临时 code换取到登录者的更多信息。

实现之前，先通过一个简易演示图了解其过程。

简单描述整个请求过程：

• 微信用户打开微信小程序后，开发者在微信小程序中通过调用wx.login接口获取到临时登录凭证 code。


• 在微信小程序中调用 wx.request 接口向开发者服务器发送 http 请求，需要把登录凭证 code一并发送过去。


• 开发者服务器使用发送过来的 code 以及开发者凭证信息向微信接口服务器索取微信登录者的 openId和session_key。

简而言之，就是 3 者(微信小程序、开发者服务器、微信接口服务器)之间的一个击鼓传花游戏。

开发流程：

第一步：项目结构分析

完整的系统由 2 个部分组成：

• 
  

  微信小程序端 APP。

  
  

  
  

  如对微信小程序开发不是很了解，请先阅读官方提供的相关文档。

  
  

  
  


• 
  

  服务器端应用程序。

  
  

  
  

  本文的服务器端应用程序基于 Spring Boot开发平台。

  
  

  
  

本项目结构是标准的前后端分离模式，微信小程序是前端应用，服务器端应用程序为后台应用。

第二步：新建微信小程序(前端应用)

打开微信开发工具，新建一个名为 guokeai 的小程序项目 ，项目会初始化一个index 页面。在 index.js中编写如下代码。

//index.js

const app = getApp()

const httpRequest = require("../../utils/request.js")



Page({

  data: {

    isHasUserInfo: null,

    userInfo: null

  },

  //启动时

  onLoad: function () {

    let this_ = this

    /***

     * 检查微信用户是否已经登录到后台服务器

     * 已经登录的标志，数据库中存在 OPENID

     */

    let code = null

    //调用 login 接口

    wx.login({

      success: (res) => {

        //得到登录用户的临时 code

        code = res.code

        //向开发者服务器发送请求

        let api = "wx/getLoginCertificate"

        let config = {

          url: api,

          method: "GET",

          data: {

            code: code

          }

        }

        let promise = httpRequest.wxRequest(config)

        promise.then(res => {

          let isHas = null

          // 有没有完整的微信登录者信息

          isHas = res.data == 0 ? false : true

          app.globalData.isHasUserInfo = isHas

          this_.setData({

            isHasUserInfo: isHas

          })

        }).catch(res => {

          console.log("fail", res)

        });

      }

    })

  }

})

代码解释：

• 一般会在微信小程序启动时，也就是在页面onload 函数中调用 wx.login接口，检查用户是否登录过。


• http://127.0.0.1:8080/wx/getLoginCertificate 是开发者服务器提供的对外处理微信用户信息的接口。


• 最后只是简单地输出开发者服务器端返回的数据。


• httpRequest.wxRequest(config)是自定义的封装wx.request接口的请求组件。

function wxRequest(config) {

  //返回的数据类型

  let dataType = config.dataType == null ? "json" : config.dataType;

  let responseType = config.responseType == null ? "text" : config.responseType;

  //服务器基地址

  let serverUrl = "http://127.0.0.1:8080/"

  //超时

  let timeout = config.timeout == null ? 50000 : config.timeout;

  //目标地址，基地址+接口

  let url = serverUrl + config.url;

  //数据提交方式

  let method = config.method == null ? "GET" : config.method;

  //提交数据

  let data = config.data == null ? null : config.data

  //头信息

  let header = {

    // 默认值

    'content-type': 'application/json',

    'x-requested-with': 'XMLHttpRequest'

  }

  let sessionId = wx.getStorageSync('sessionId')

  if (sessionId) {

    header["cookie"] = sessionId

  }

  return new Promise(function (resolve, reject) {

    wx.request({

      url: url,

      data: data,

      //返回的数据类型（json）

      dataType: dataType,

      enableCache: false,

      enableHttp2: false,

      enableQuic: false,

      method: method,

      header: header,

      responseType: responseType,

      timeout: timeout,

      success: (res) => {

        console.log("requestData", res)

        if (res.cookies != null && res.cookies.length != 0)

          wx.setStorageSync('sessionId', res.cookies[0])

        resolve(res)

      },

      fail: (res) => {

        console.log("requestException", res)

        reject(res)

      }

    })

  })

}

第三步：创建开发者服务器程序（后台应用）

本文使用 spring boot快速搭建后台应用程序。在项目的 pom.xml文件中除了必要的依赖包外，还需要添加以下 的依赖包。

<dependency>

    <groupId>com.alibaba</groupId>

    <artifactId>fastjson</artifactId>

    <version>1.2.73</version>

</dependency>

<dependency>

    <groupId>org.apache.httpcomponents</groupId>

    <artifactId>httpclient</artifactId>

    <version>4.5.13</version>

</dependency>

<dependency>

     <groupId>mysql</groupId>

     <artifactId>mysql-connector-java</artifactId>

     <scope>runtime</scope>

</dependency>

<dependency>

     <groupId>org.projectlombok</groupId>

     <artifactId>lombok</artifactId>

     <optional>true</optional>

</dependency>

<dependency>

     <groupId>com.baomidou</groupId>

     <artifactId>mybatis-plus-boot-starter</artifactId>

     <version>3.5.1</version>

 </dependency>

• 
  

  fastjson 是阿里云提供的开源 JSON解析框架。

  
  

  
  

  微信小程序和开发者服务器构建的项目结构，是标准的前后端分离模式。

  
  

  请求与响应时，数据交互常使用JSON格式。这时使用 fastjson 作为json解析器，当然，也可以选择其它的类似解析器。

  
  

  
  


• 
  

  httpclient 是一个http请求组件。

  
  


• 
  

  mysql-connector-java 本文案例使用 MySQL数据库，需要加载相应的驱动包。

  
  


• 
  

  mybatis-plus-boot-starter，mybatis-plus 依赖包。

  
  

在后台应用中编写处理器（响应）组件：

@RestController

@RequestMapping("/wx")

public class WxAction {

    @Autowired

    private IWxService wxService;

    /***

     * 获取到微信用户的 OPENID

     */

    @GetMapping("/getLoginCertificate")

    public String getLoginCertificate(@RequestParam("code") String code) throws Exception {

        WxUserInfo wxInfo = this.wxService.getLoginCertificate(code);

        //用户不存在，或者用户的信息不全

        return wxInfo==null || wxInfo.getNickName()==null?"0":"1";

    }

代码解释：

• IWxService是处理器依赖的业务组件，提供有 getLoginCertificate()方法用来实现通过code向微信接口服务器换取微信登录者的 openId和session_key。

编写业务组件：

@Service

public class WxService implements IWxService {

    @Override

    public WxUserInfo getLoginCertificate(String code) throws Exception {

        //请求地址

        String requestUrl = WxUtil.getWxServerUrl(code);

        // 发送请求

        String response = HttpClientUtils.getRequest(requestUrl);

        //格式化JSON数据

        WxUserInfo wxUserInfo = JSONObject.parseObject(response, WxUserInfo.class);

        //检查数据库中是否存在 OPENID

        WxUserInfo wxUserInfo_ = this.wxUserMapper.selectById(wxUserInfo.getOpenId());

        if (wxUserInfo_ == null) {

            //数据库中没有用户的 OPENID，添加到数据库中

            this.wxUserMapper.insert(wxUserInfo);

        } else {

            if (!wxUserInfo.getSessionKey().equals(wxUserInfo_.getSessionKey())) {

                //如果数据库保存的session_key和最新的session_key 不相同，则更新

                wxUserInfo_.setSessionKey(wxUserInfo.getSessionKey());

                this.wxUserMapper.updateById(wxUserInfo_);

            }

        }

        return wxUserInfo_;

    }

}

代码解释：

• 
  

  WxUtil 是自定义的一个工具组件，用来构建请求微信接口服务器的 url。

  
  

  https://api.weixin.qq.com/sns/jscode2session是微信接口服务器对外提供的接口，请求此接口时，需要提供 4 个请求数据。

  
  

  appid：小程序 appId。

  
  

  secret：小程序 appSecret。

  
  

  js_code：获取到的微信登录者的临时 code。

  
  

  grant_type：授权类型，此处只需填写 authorization_code。

  
  

public class WxUtil {

    private final static String APP_ID = "微信小程序开发者申请的 appid";

    private final static String APP_SECRET = "微信小程序开发者申请的 APP_SECRET";

    //

    private final static String WX_LOGIN_SERVER_URL = "https://api.weixin.qq.com/sns/jscode2session?appid={0}&secret={1}&js_code={2}&grant_type=authorization_code";

    public static String getWxServerUrl(String code) throws IOException {

        String url = MessageFormat.format(WX_LOGIN_SERVER_URL, new String[]{APP_ID, APP_SECRET, code});

        return url;

    }

}

• HttpClientUtils也是一个自定义组件，用来向指定的服务器发送 http请求。

public class HttpClientUtils {

	/**

     * GET请求

     */

    public static String getRequest(String url) throws Exception {

        //HttpClient对象

        CloseableHttpClient httpClient = HttpClients.createDefault();

        CloseableHttpResponse response = null;

        try {

            HttpGet httpGet = new HttpGet(url);

            response = httpClient.execute(httpGet);

            //响应体

            HttpEntity entity = response.getEntity();

            if (entity != null) {

                //格式化响应体

                return EntityUtils.toString(entity);

            }

        } catch (ClientProtocolException e) {

           throw  e;

        } catch (IOException e) {

            throw  e;

        } finally {

            response.close();

            httpClient.close();

        }

        return null;

    }

}

• WxUserInfo 是自定义的数据封装类。微信接口服务器返回的数据是以JSON格式组装的，这里需要格式成对象数据，便于在 java中处理。本文使用 MyBatisPlus操作数据库，此类也对应数据库中的gk_wx_user表。

@Data

@AllArgsConstructor

@NoArgsConstructor

@TableName("gk_wx_user")

public class WxUserInfo {

    //OPEN_id

    @TableId(type = IdType.ASSIGN_ID, value = "open_id")

    private String openId;

    //会话密钥

    @TableField(value = "session_key")

    private String sessionKey;

    //头像路径

    @TableField("avatar_url")

    private String avatarUrl;

    //城市

    private String city;

    //国家

    private String country;

    //性别

    private String gender;

    //语言

    private String language;

    //昵称

    @TableField("nick_name")

    private String nickName;

    //备注名或真实名

    @TableField("real_name")

    private String realName;

    //省份

    private String province;

    //学生ID

    @TableField("stu_id")

    private Integer stuId;

}

MyBatis 数据库映射组件：

@Repository

public interface WxUserMapper extends BaseMapper<WxUserInfo> {



}

第四步：测试。

先启动后台应用程序，再启动微信小程序，可以在数据库表中查看到如下信息。

微信用户的openid和session_key已经保存到后台的数据库表中。

2.1.2 wx.checkSession(Object object)

官方文档中，有一段对 session_key的生命周期的描述。

• session_key的生命周期有不确定性，可以使用 wx.login接口刷新 session_key。为了避免频繁调用 wx.login 接口，可以通过调用 wx.checkSession(Object object)接口判断session_key是否已经过期。


• 当开发者在实现自定义登录态时，可以考虑以 session_key 有效期作为自身登录态有效期，也可以实现自定义的时效性策略。

wx.checkSession 的功能，可以使用此接口判断session_key是否过期。

• 调用成功说明当前 session_key 未过期。


• 调用失败说明 session_key 已过期。

2.2 用户信息接口

wx.login接口仅能获取到微信登录者的有限数据，如果想要获取到登录者的更多个人信息，可以使用用户信息接口中的相关API。

• wx.getUserProfile(Object object)。获取用户信息，页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo。


• wx.getUserInfo(Object object) 。和 wx.getUserProfile的功能一样，在基础库 2.10 的后续版本中，其功能已经被削弱。


• UserInfo是用户信息封装类。

getUserProfile是从 基础库2.10.4版本开始支持的接口，该接口用来替换 wx.getUserInfo，意味着官方不建议再使用getUserInfo接口获取用户的个人信息。

下图是官方提供的 2 个接口的功能对比图。

为了避免频繁弹窗，可以在第一次获取到用户信息后保存在数据库中以备以后所用。为了获取到用户的敏感数据，在后台要通过getUserProfile接口所获取的数据进行解密操作。

2.2.2 wx.getUserProfile

下面通过具体代码讲解如何保存微信登录者的个人数据。先了解一下整个数据获取的流程，这里直接截取官方提供的一张流程图。

获取微信登录者的个人信息，需要经过 2 个步骤。

签名效验：

• 通过调用wx.getUserProfile接口获取数据时，接口会同时返回 rawData、signature，其中 signature = sha1( rawData + session_key )。


• 开发者将 signature、rawData 发送到开发者服务器进行校验。服务器利用用户对应的 session_key 使用相同的算法计算出签名 signature2 ，比对signature 与 signature2 即可校验数据的完整性。

解密加密数据：

• 对称解密使用的算法为 AES-128-CBC，数据采用PKCS#7填充。


• 对称解密的目标密文为 Base64_Decode(encryptedData)。


• 对称解密秘钥 aeskey = Base64_Decode(session_key), aeskey 是16字节。


• 对称解密算法初始向量 为Base64_Decode(iv)，其中iv由数据接口返回。

具体编写实现。

**第一步：**在微信小程序端编码。

在index.wxml页面中添加一个按钮，并注册bindtap事件。

<view>

  <button bindtap="getUserProfile">获取用户数据</button>

</view>

在index.js中添加一个名为getUserProfile的事件回调函数。为了避免不必要的弹窗，只有当后台没有获取到个人数据时，才调用wx.getUserProfile接口。

getUserProfile: function (e) {

    let this_ = this

    if (!this.data.isHasUserInfo) {

      //如果服务器端没有保存完整的微信登录者信息

      wx.getUserProfile({

        desc: '需要完善您的资料！',

        success: (res) => {

          this_.setData({

            //小程序中用来显示个人信息  

            userInfo: res.userInfo,

            isHasUserInfo: true

          })

          //再次登录，因为 session_key 有生命中周期

          wx.login({

            success(res_) {

              //保存到服务器端

              let config = {

                url: "wx/wxLogin",

                method: "GET",

                data: {

                  code: res_.code,

                  //明文数据

                  rawData: res.rawData,

                  //加密数据

                  encryptedData: res.encryptedData,

                  iv: res.iv,

                  //数字签名

                  signature: res.signature

                }

              }

              let promise = httpRequest.wxRequest(config)

              promise.then(res => {

                //返回

                console.log("wxLogin", res)

              }).catch(res => {

                console.log("fail", res)

              });

            }

          })

        }

      })

    }

  }

服务器端代码：

在pom.xml文件中添加如下依赖包，用来解密数据。

<dependency>

   <groupId>org.bouncycastle</groupId>

   <artifactId>bcprov-jdk16</artifactId>

   <version>1.46</version>

</dependency>

<dependency>

    <groupId>commons-codec</groupId>

    <artifactId>commons-codec</artifactId>

    <version>1.15</version>

</dependency>

在处理器类WxAction中添加wxLogin响应方法。

@RestController

@RequestMapping("/wx")

public class WxAction {

    @Autowired

    private IWxService wxService;

    /***

     *

     * @param code

     * @param rawData

     * @param encryptedData

     * @param iv

     * @param signature

     * @return

     * @throws Exception

     */

    @GetMapping("/wxLogin")

    public WxUserInfo wxLogin(@RequestParam("code") String code, @RequestParam("rawData") String rawData,

                              @RequestParam("encryptedData") String encryptedData, @RequestParam("iv") String iv,

                              @RequestParam("signature") String signature) throws Exception {

        WxUserInfo wxInfo = this.wxService.getWxUserInfo(code, rawData, encryptedData, iv, signature);

        return wxInfo;

    }

}

业务代码：

小程序中传递过来的数据是经过base64编码以及加密的数据，需要使用 Base64解码字符串，再使用解密算法解密数据。先提供一个解密方法。

public String decrypt(String session_key, String iv, String encryptData) {

   

    String decryptString = "";

    //解码经过 base64 编码的字符串    

    byte[] sessionKeyByte = Base64.getDecoder().decode(session_key);

    byte[] ivByte = Base64.getDecoder().decode(iv);

    byte[] encryptDataByte = Base64.getDecoder().decode(encryptData);



    try {

        Security.addProvider(new BouncyCastleProvider());    

        Cipher cipher = Cipher.getInstance("AES/CBC/PKCS7Padding");

        //得到密钥

        Key key = new SecretKeySpec(sessionKeyByte, "AES");

        //AES 加密算法

        AlgorithmParameters algorithmParameters = AlgorithmParameters.getInstance("AES");

        algorithmParameters.init(new IvParameterSpec(ivByte));

        cipher.init(Cipher.DECRYPT_MODE, key, algorithmParameters);

        byte[] bytes = cipher.doFinal(encryptDataByte);

        decryptString = new String(bytes);

    } catch (Exception e) {

            e.printStackTrace();

    }

    return decryptString;

}

具体获取数据的业务实现：

@Override

public WxUserInfo getWxUserInfo(@NotNull String code, @NotNull String rawData, @NotNull String encryptedData, @NotNull String iv, @NotNull String signature) throws Exception {

        //会话密钥

        WxUserInfo wxUserInfo = this.getLoginCertificate(code);

        String signature2 = DigestUtils.sha1Hex(rawData + wxUserInfo.getSessionKey());

        if (!signature.equals(signature2)) {

            throw new Exception("数字签名验证失败");

        }

        //数字签名验证成功,解密

        String infos = this.decrypt(wxUserInfo.getSessionKey(), iv, encryptedData);

    	//反序列化 JSON 数据	

        WxUserInfo wxUserInfo_ = JSONObject.parseObject(infos, WxUserInfo.class);

        wxUserInfo_.setSessionKey(wxUserInfo.getSessionKey());

        wxUserInfo_.setOpenId(wxUserInfo.getOpenId());

        //更新数据库

        this.wxUserMapper.updateById(wxUserInfo_);

        return wxUserInfo_;

}

测试，启动微信小程序和后台应用，在小程序中触发按钮事件。

在弹出的对话框中，选择允许。

查看后台数据库表中的数据。

能够获取到的微信登录者个人信息都保存到了数据库表中。至于怎么使用这些数据，可以根据自己的业务需要定制。

3.总结

微信开发平台，提供有诸多接口，可以帮助开发者获取到有用的数据。本文主要介绍 wx.login和wx.getProfile接口，因篇幅所限，不能对其它接口做详细介绍 ，有兴趣者可以查阅官方文档。

官方文档只会对接口功能做些介绍 ，如要灵活运用这些接口，还需要结合实际需要演练一下，如此方能有切身体会。

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

序列化和反序列化

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，程序上是知道服务器那边出错了，可以进行对应的显示，比如显示 - ，表示读取不到等操作。

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

RPC方法的返回值和参数必须使用包装类型

RPC调用常常具有超时导致调用失败的情况

如果用包装类型，那么在接收方，就能感知到，这次RPC调用是成功，还是失败。

包装数据类型的null值具有表示额外的信息功能。

彦祖来都来了，点个赞👍再走吧，这对我来说真的非常重要

“yes，你看着这鬼代码，竟然在 for 循环里面搞了个 try-catch，不知道try-catch有性能损耗吗？”老陈煞有其事地指着屏幕里的代码：

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

     try {

         dosth

     } catch (Exception e) {

         e.printStackTrace();

     }

 }

我探过头去看了眼代码，“那老陈你觉得该怎么改？”

“当然是把 try-catch 提到外面啊！”老陈脑子都不转一下，脱口而出。

“你是不是傻？且不说性能，这代码的目的明显是让循环内部单次调用出错不影响循环的运行，你其到外面业务逻辑不就变了吗！”

老陈挠了挠他的地中海，“好像也是啊！”

“回过头来，catch 整个 for 循环和在循环内部 catch，在不出错的情况下，其实性能差不多。” 我喝一口咖啡不经意地提到，准备在老陈前面秀一下。

“啥意思？”老陈有点懵地看着我，“try-catch是有性能损耗的，我可是看过网上资料的！”

果然，老陈上钩了，我二话不说直接打开 idea，一顿操作敲了以下代码：

public class TryCatchTest {



    @Benchmark

    public void tryfor(Blackhole blackhole) {

        try {

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

                blackhole.consume(i);

            }

        } catch (Exception e) {

            e.printStackTrace();

        }

    }



    @Benchmark

    public void fortry(Blackhole blackhole) {

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

            try {

                blackhole.consume(i);

            } catch (Exception e) {

                e.printStackTrace();

            }

        }

    }



}

“BB 不如 show code，看到没，老陈，我把 try-catch 从 for 循环里面提出来跟在for循环里面做个对比跑一下，你猜猜两个差多少？”

“切，肯定 tryfor 性能好，想都不用想，不是的话我倒立洗头！”老陈信誓旦旦道。

我懒得跟他BB，直接开始了 benchmark，跑的结果如下：

可以看到，两者的性能（数字越大越好）其实差不多：

• fortry: 86,261(100359-14098) ~ 114,457(100359+14098)


• tryfor: 95,961(103216-7255) ~ 110,471(103216+7255)

我再调小(一般业务场景 for 循环次数都不会很多)下 for 循环的次数为 1000 ，结果也是差不多：

老陈一看傻了：“说好的性能影响呢？怎么没了？”

我直接一个javap，让老陈看看，其实两个实现在字节码层面没啥区别：

tryfor 的字节码

异常表记录的是 0 - 20 行，如果这些行里面的代码出现问题，直接跳到 23 行处理。

fortry 的字节码

差别也就是异常表的范围小点，包的是 9-14 行，其它跟 tryfor 都差不多。

所以从字节码层面来看，没抛错两者的执行效率其实没啥差别。

“那为什么网上流传着try-catch会有性能问题的说法啊？”老陈觉得非常奇怪。

这个说法确实有，在《Effective Java》这本书里就提到了 try-catch 性能问题：

并且还有下面一段话：

正所谓听话不能听一半，以前读书时候最怕的就是一知半解，因为完全理解选择题能选对，完全不懂蒙可能蒙对，一知半解必定选到错误的选项！

《Effective Java》书中说的其实是不要用 try-catch 来代替正常的代码，书中的举例了正常的 for 循环肯定这样实现：

但有个卧龙偏偏不这样实现，要通过 try-catch 拐着弯来实现循环：

这操作我只能说有点逆天，这两个实现的对比就有性能损耗了。

我们直接再跑下有try-catch 的代码和没 try-catch的 for 循环区别，代码如下：

结果如下：

+-差不多，直接看前面的分数对比，没有 ry-catch 的性能确实好些，这也和书中说的 try-catch 会影响 JVM 一些特定的优化说法吻合，但是具体没有说影响哪些优化，我猜测可能是指令重排之类的。

好了，我再总结下有关 try-catch 性能问题说法：

1. try-catch 相比较没 try-catch，确实有一定的性能影响，但是旨在不推荐我们用 try-catch 来代替正常能不用 try-catch 的实现，而不是不让用 try-catch。


2. for循环内用 try-catch 和用 try-catch 包裹整个 for 循环性能差不多，但是其实两者本质上是业务处理方式的不同，跟性能扯不上关系，关键看你的业务流程处理。


3. 虽然知道try-catch会有性能影响，但是业务上不需要避讳其使用，业务实现优先（只要不是书中举例的那种逆天代码就行），非特殊情况下性能都是其次，有意识地避免大范围的try-catch，只 catch 需要的部分即可（没把握全 catch 也行，代码安全执行第一）。

“好了，老陈你懂了没？”

“行啊yes，BB是一套一套的，走请你喝燕麦拿铁！” 老陈一把拉起我，我直接一个挣脱，“少来，我刚喝过咖啡，你那个倒立洗头，赶紧的！”我立马意识到老陈想岔开话题。

“洗洗洗，我们先喝个咖啡，晚上回去给你洗！”

晚上22点，老陈发来一张图片：

你别说，这头发至少比三毛多。

我是yes，我们下篇见~

我们平时在写代码的时候经常会遇到这样的一种情况

提示说没有处理xxx异常

然后解决办法可以在外面加上try-catch，就像这样

所以我之前经常这样处理

//重新抛出 RuntimeException

public class ThrowsDemo {



    public void demo4throws() {

        try {

            new ThrowsSample().sample4throws();

        } catch (IOException e) {

            throw new RuntimeException(e);

        }

    }

}



//打印日志

@Slf4j

public class ThrowsDemo {



    public void demo4throws() {

        try {

            new ThrowsSample().sample4throws();

        } catch (IOException e) {

            log.error("sample4throws", e);

        }

    }

}



//继续往外抛，但是需要每个方法都添加 throws

public class ThrowsDemo {



    public void demo4throws() throws IOException {

        new ThrowsSample().sample4throws();

    }

}

但是我一直不明白

这个方法为什么不直接帮我做

反而要让我很多余的加上一步

我处理和它处理有什么区别吗？

而且变的好不美观

本来缩进就多，现在加个try-catch更是火上浇油

public class ThrowsDemo {



    public void demo4throws() {

        try {

            if (xxx) {

                try {

                    if (yyy) {

                        

                    } else {

                        

                    }

                } catch (Throwable e) {

                }

            } else {



            }

        } catch (IOException e) {

            

        }

    }

}

上面的代码，就算里面没有业务，看起来也已经比较乱了，分不清哪个括号和哪个括号是一对

还有就是对Lambda很不友好

没有办法直接用::来优化代码，所以就变成了下面这样

本来看起来很简单很舒服的Lambda，现在又变得又臭又长

为什么会强制 try-catch

为什么我们平时写的方法不需要强制try-catch，而很多jdk中的方法却要呢

那是因为那些方法在方法的定义上添加了throws关键字，并且后面跟的异常不是RuntimeException

一旦你显式的添加了这个关键字在方法上，同时后面跟的异常不是RuntimeException，那么使用这个方法的时候就必须要显示的处理

比如使用try-catch或者是给调用这个方法的方法也添加throws以及对应的异常

throws 是用来干什么的

那么为什么要给方法添加throws关键字呢？

给方法添加throws关键字是为了表明这个方法可能会抛出哪些异常

就像一个风险告知

这样你在看到这个方法的定义的时候就一目了然了：这个方法可能会出现什么异常

为什么 RuntimeException 不强制 try-catch

那为什么RuntimeException不强制try-catch呢？

因为很多的RuntimeException都是因为程序的BUG而产生的

比如我们调用Integer.parseInt("A")会抛出NumberFormatException

当我们的代码中出现了这个异常，那么我们就需要修复这个异常

当我们修复了这个异常之后，就不会再抛出这个异常了，所以try-catch就没有必要了

当然像下面这种代码除外

public boolean isInteger(String s) {

    try {

        Integer.parseInt(s);

        return true;

    } catch (NumberFormatException e) {

        return false;

    }

}

这是我们利用这个异常来达成我们的需求，是有意为之的

而另外一些异常是属于没办法用代码解决的异常，比如IOException

我们在进行网络请求的时候就有可能抛出这类异常

因为网络可能会出现不稳定的情况，而我们对这个情况是无法干预的

所以我们需要提前考虑各种突发情况

强制try-catch相当于间接的保证了程序的健壮性

毕竟我们平时写代码，如果IDE没有提示异常处理，我们完全不会认为这个方法会抛出异常

我的代码怎么可能有问题！

看来Java之父完全预判到了程序员的脑回路

throws 和 throw 的区别

java中还有一个关键词throw，和throws只有一个s的差别

throw是用来主动抛出一个异常

public class ThrowsDemo {



    public void demo4throws() throws RuntimeException {

        throw new RuntimeException();

    }

}

两者完全是不同的功能，大家不要弄错了

什么场景用 throws

我们可以发现我们平时写代码的时候其实很少使用throws

因为当我们在开发业务的时候，所有的分支都已经确定了

比如网络请求出现异常的时候，我们常用的方式可能是打印日志，或是进行重试，把异常往外抛等等

所以我们没有那么有必要去使用throws这个关键字来说明异常信息

但是当我们没有办法确定异常要怎么处理的时候呢？

比如我在GitHub上维护了一个功能库，本身没有什么业务属性，主要就是对于一些复杂的功能做了相应的封装，提供给自己或别人使用（如果有兴趣可以看看我的库，顺便给Star，嘿嘿）

对我来说，当我的方法中出现异常时，我是不清楚调用这个方法的人是想要怎么处理的

可能有的想要重试，有的想要打印日志，那么我干脆就往外抛，让调用方法的人自己去考虑，自己去处理

所以简单来说，如果方法主要是给别人用的最好用throws把异常往外抛，反之就是可加可不加

结束

很多时候你的不理解只是因为你还不够了解

一，前言

1,什么是动态化？

目前移动端应用的版本更新， 最常见的方式是定期发版，无论是安卓还是iOS，都需要提交新的安装包到应用市场进行审核。审核通过后，用户在应用市场进行App的下载更新。

而动态化， 就是不依赖更新程序安装包， 就能动态实时更新页面的技术。

2,动态化的必要性

为什么需要动态化技术呢？ 因为上述定期发版更新应用的方式存在一些问题，比如:

1. 审核周期长， 且可能审核不通过。 周期长导致发版本不够灵活， 紧急的业务需求不能及时上线。


2. 线上出现急需修复的bug时，需要较长修复周期，影响用户体验。


3. 安装包过大， 动辄几十兆几百兆的应用升级可能会让用户比较抗拒。


4. 即使上线了，也无法达到全部用户升级， 服务端存在兼容多版本App的问题。

面对这些问题，如果能实现app增量、无感知更新，实现功能同步。无论是对公司还是用户都是非常重要的需求，能实现app动态化更新就显得非常重要，能很好的解决以上问题:

1. 随时实现功能升级，不存在应用市场长时间审核和拒绝上线问题，达到业务需求快速上线的目的。


2. 线上bug可以实时修复，提高用户体验。


3. 可以减小发版功能包体积，只需要替换新增功能即可。


4. 功能保持一致，类似网页一样，发版后用户同步更新，不存在旧版本兼容问题。

接下来，我们就来分析一下，目前业内主要的Flutter动态化更新方式。

二，动态化方案调研

在Flutter实践层面，简单来说分为三个流派：

• 
  

  方案一：JavaScript是最好的语言（🤣碰瓷PHP）
  主要思路：利用Flutter做渲染，开发使用js，逻辑层通过v8/jscore解释运行。代表框架是腾讯的MXFlutter。这个框架是开源的，大写的👍。

  
  


• 
  

  方案三：布局，逻辑，一把梭

  
  

  主要思路：与方案一最主要的区别是，逻辑层也是使用dart，增加了一层语法解析和运行时。有一个代表，美团的MTFlutter，然而没有开源动向，无从考察更多。

  
  


• 
  

  方案二：DSL + JS

  
  

  主要思路：基于模板实现动态化，主要布局层采用Dart转DSL的方式，逻辑层使用JS。代表框架是58同城开源的Fair。

  
  

MXFlutter

项目简介

MXFlutter 是一套基于 JavaScript 的 Flutter 框架，可以用极其类似 Dart 的开发方式，通过编写 JavaScript 代码，来开发 Flutter 应用，或者使用 mxjsbuilder 编译器，把现有Flutter 工程编译为JS，运行在 mxflutter 之上。

核心思想

核心思路是把 Flutter 的渲染逻辑中的三棵树中的第一棵，放到 JavaScript 中生成。用 JavaScript 完整实现了 Flutter 控件层封装，可以使用 JavaScript，用极其类似 Dart 的开发方式，开发Flutter应用，利用JavaScript版的轻量级Flutter Runtime，生成UI描述，传递给Dart层的UI引擎，UI引擎把UI描述生产真正的 Flutter 控件。

MxFlutter 目前已经停止维护，具体请看MXFlutter。
MxFlutter通过JavaScript编写Dart，加载线上js文件，通过引擎在运行时转化并显示，从而达到动态化效果。 官方在0.7.0版本开始接入TypeScript，引入npm生态，优化了js开发的成本，向前端生态进一步靠拢。
很遗憾，在对比各大厂的方案时，发现MxFlutter的性价比极低，学习成本也高，而且又抛弃Dart生态。开发及维护成本都很高。

MTFlutter

项目简介

美团的MTFlutter团队flap项目采用的静态生产DSL方案，通过对Dart语言注解，保证平台一致性。实现了动态下发与解释的逻辑页面一体化的 Flutter 动态化方案。Flap 的出现让 Flutter 动态化和包大小这两个短板得到了一定程度的弥补，促进了 Flutter 生态的发展。

核心思想

通过静态生产 DSL+Runtime 解释运行的思路，实现了动态下发与解释的逻辑页面一体化的 Flutter 动态化方案，建设了一套 Flap 生态体系，涵盖了开发、发布、测试、运维各阶段。

布局和逻辑层都使用Dart, 增加了一层语法解析和运行时。然而没有开源动向，无从考察更多。

Fair

项目简介

Fair是为Flutter设计的动态化框架，通过Fair Compiler工具对原生Dart源文件的自动转化，使项目获得动态更新Widget Tree和State的能力。

创建Fair的目标是支持不发版（Android、iOS、Web）的情况下，通过业务bundle和JS下发实现更新，方式类似于React Native。与Flutter Fair集成后，您可以快速发布新的页面，而无需等待应用的下一个发布日期。Fair提供了标准的Widget，它可以被用作一个新的动态页面或作为现有Flutter页面的一部分，诸如运营位的排版/样式修改，整页面替换，局部替换等都可以使用。

核心思想

Fair是58自研的的动态化框架，通过Fair Compiler工具对原生Dart源文件的自动转化，使项目获得动态更新Widget Tree和State的能力。

三，方案对比

经过上述三个方案的调研，我们来大概对比一下上述框架

可以看到， MXFlutter需要使用js写Dart, 官方已经停止更新，而这种方式我们不能接受， MTFlutter目前未开源，无从继续研究。 接下来着重看一下 Fair。

四，Fair接入过程

1,添加依赖

推荐使用pub形式引入

# add Fair dependency

dependencies:

  fair: 2.7.0



# add compiler dependency

dev_dependencies:

  build_runner: ^2.0.0

  fair_compiler: ^1.2.0

 

# switch "fair_version" according to the local Flutter SDK version

dependency_overrides:

  fair_version: 3.0.0

Flutter版本切换

通过切换 flutter_version 版本进行版本兼容。例如，将本机切换为 flutter 2.0.6 后，Fair 需要同步切换

# switch to another stable flutter version

dependency_overrides:

  fair_version: 2.0.6

2,使用 Fair

在App中接入Fair步骤如下：

将 FairApp 添加为需要动态化部分的顶级节点

常见做法是作为 App 的根节点，如果不是全局采用也可以作为子页面的根节点

void main() {

  WidgetsFlutterBinding.ensureInitialized();



  FairApp.runApplication(

    _getApp(),

    plugins: {

    },

  );

}



dynamic _getApp() => FairApp(

  modules: {

  },

  delegate: {

  },

  child: MaterialApp(

    home: FairWidget(

            name: 'DynamicWidget',

            path: 'assets/bundle/lib_src_page_dynamic_widget.fair.json',

            data: {"fairProps": json.encode({})}),

  ),

);

添加动态组件

每一个动态组件由一个FairWidget表示。

FairWidget(

  name: 'DynamicWidget',

  path: 'assets/bundle/lib_src_page_dynamic_widget.fair.json',

  data: {"fairProps": json.encode({})}),

根据不同场景诉求，FairWidget可以混合和使用

1. 可以作为不同组件混合使用


2. 一般作为一个全屏页面


3. 支持嵌套使用，即可以局部嵌套在普通Widget下，也可以嵌套在另一个FairWidget下

五，Fair接入体验

1，fork,下载工程

将官方Github工程fork到自己仓库后， 下载工程。使用官方提供的 test_case/best_ui_templates工程体验fair的体验。

2, 执行 pub get

在 best_ui_templates工程中，执行 pub get命令获取依赖。

3，开发业务

接下来正式开始开发流程。 把一个页面改写为 用Fair 编写:

1. 创建需要动态化的 componnet, 并添加 @FairPatch() 注解。添加上注解后，在Fair生成产物时，会把此Component build生成 FairWidget加载的产物。

2, 执行 Fair工具链插件的命令生成产物， 如图:

3, 最终生成的产物，拷贝到 assets/bundle目录下(配置config.json后，会自动拷贝)

4, 看效果， 下图为使用 Fair 改造后的页面：

六，Fair优势

1，社区活跃度高

官方对Fair维护力度大，版本更新较快，问题修复及时，活跃的开发者社区氛围。

使得开发者在开发Fair过程中遇到的问题， 能够及时反馈给官方， 并能得到快速的帮助和解决。

2, 一份代码，灵活使用

Fair的区别于MTFlutter和MXFlutter这2种动态化方案，Fair能让同一份代码在Flutter原生和动态之间随意切换。在开发跟版本需求时，使用原生代码发布，以此持续保持Flutter的性能优势；而在热更新场景可以通过下发动态文件来达到动态更新Widget的目的。使用方式更加灵活。

3，配套开发工具丰富

Faircli配套工具链

官方为了让开发者快速上手，降低接入门槛， 解决在接入过程中的痛点。 Fair团队开发了Faircli配套工具链，主要包含三个部分:

• 工程创建：快速搭建Fair载体工程及动态化工程。


• 模板代码：提供页面及组件模板。


• 本地热更新：线下开发使用，实现开发阶段快速预览Fair动态化功能。

在安装了工具链提供的dart命令行工具及AS插件后， 通过创建模板， 构建产物， 本地启服务，体验热更新功能，开发者可以轻松接入并体验Fair。

Fair语法检测插件

官方为了让开发者在Fair开发过程中，出现不正确或者不支持的语法问题。 开发了配套插件去提示用户使用Fair语法糖。

查看以下示例:

1,build方法下if的代码检测，及提示引导信息

2,点击more action 或者 AS代码提示快捷键

3,根据提示点击替换

通过插件，在编写fair过程中，可以快速识别并解决不支持的语法问题。 提高开发Fair效率。

Fair Web代码编辑器

Fair其中一个方向是在线动态化平台，即在网页中编辑dart代码，在线预览Flutter效果和Fair动态化效果，并且发布Fair动态化产物。

通过在Fair Web代码编辑器，开发者可以在没有复杂的IDE配置的情况下，在网页端开发Fair并预览。 这无疑是降低了接入成本， 为开发者可以快速体验Fair提供了非常便捷的方式。

七，总结

通过近期对各大互联网公司在Flutter动态化方向上的探究方案。 发现这些方案都还没有达到成熟阶段，想在实际业务上落地， 还得看各团队后期的维护力度和开发投入程度。

MXFlutter使用js编写Dart的方式， 抛弃了原本Flutter的开发模式， 导致开发成本大，以及后续维护成本也大，官方已停止维护。

MTFlutter采用布局,逻辑都是使用Dart, 通过静态生产 DSL+Runtime 解释运行的思路，解决布局和逻辑的动态化，然而并没有开源计划，无从深入研究。

Fair通过Fair Compiler工具对原生Dart源文件的自动转化，使项目获得动态更新Widget Tree和State的能力。目前官方维护力度较大， 社区活跃，并且有比较全面的Fair生态工具。 期待 Fair 团队可以解决在开发Fair过程中一些体验问题，如语法支持不全等， 让Fair成为真正能够让开发者可以快速接入，能够达到和正常开发Flutter接近的体验。 为广大Flutter开发人员解决动态化的痛点。

支持我们

欢迎大家使用 Fair，也欢迎大家为我们点亮star

Github地址：github.com/wuba/fair

Fair官网：fair.58.com/

欢迎贡献

通过Issue提交问题，贡献代码请提交Pull Request，管理员将对代码进行审核。

引子

view.setOnClickListener { // 当控件被点击时触发的逻辑 }

正是因为 View 对控件点击采用了策略模式，才使得监听任何控件的点击事件变得易如反掌。

我有一个愿望。。。

如果 View 能有一个可见性监听该多好啊！

view.setOnVisibilityChangeListener { isVisible: Boolean ->   }

系统并未提供这个方法。。。

但业务上有可见性监听的需要，比如曝光埋点。当某控件可见时，上报XXX。

数据分析同学经常抱怨曝光数据不准确，有的场景曝光多报了，有的场景曝光少报了。。。

开发同学看到曝光埋点也很头痛，不同场景的曝光检测有不同的方法，缺乏统一的可见性检测入口，存在一定重复开发。

本文就试图为单个控件以及列表项的可见性提供统一的检测入口。

控件的可见性受到诸多因素的影响，下面是影响控件可见性的十大因素：

1. 手机电源开关


2. Home 键


3. 动态替换的 Fragment 遮挡了原有控件


4. ScrollView, NestedScrollView 的滚动


5. ViewPager, ViewPager2 的滚动


6. RecyclerView 的滚动


7. 被 Dialog 遮挡


8. Activity 切换


9. 同一 Activity 中 Fragment 的切换


10. 手动调用 View.setVisibility(View.GONE)


11. 被输入法遮盖

能否把这所有的情况都通过一个回调方法表达？目标是通过一个 View 的扩展方法完成上述所有情况的检测，并将可见性回调给上层，形如：

fun View.onVisibilityChange(block: (view: View, isVisible: Boolean) -> Unit) {}

若能实现就极大化简了上层可见性检测的复杂度，只需要如下代码就能实现任意控件的曝光上报埋点：

view.onVisibilityChange { view, isVisible ->

    if(isVisible) { // 曝光埋点 }

    else {}

}

控件全局可见性检测

可见性检测分为两步：

1. 捕获时机：调用检测算法检测控件可见性的时机。


2. 检测算法：描述如何检测控件是否对用户可见。

拿“手动调用 View.setVisibility(View.GONE)”举例，得先捕获 View Visibility 发生变化的时机，并在此刻检测控件的可见性。

下面是View.setVisibility()的源码：

// android.view.View.java

public void setVisibility(@Visibility int visibility) {

    setFlags(visibility, VISIBILITY_MASK);

}

系统并未在该方法中提供类似于回调的接口，即一个 View 的实例无法通过回调的方式捕获到 visibility 变化的时机。

难道通过自定义 View，然后重写 setVisibility() 方法？

这个做法接入成本太高且不具备通用性。

除了“手动调用 View.setVisibility(View.GONE)”，剩下的影响可见性的因素大多都可找到对应回调。难道得在fun View.onVisibilityChange()中对每个因素逐个添加回调吗？

这样实现太过复杂了，而且也不具备通用性，假设有例外情况，fun View.onVisibilityChange()的实现就得修改。

上面列出的十种影响控件可见性的因素都是现象，不同的现象背后可能对应相同的本质。

经过深挖，上述现象的本质可被收敛为下面四个：

1. 控件全局重绘


2. 控件全局滚动


3. 控件全局焦点变化


4. 容器控件新增子控件

下面就针对这四个本质编程。

捕获全局重绘时机

系统提供了ViewTreeObserver：

public final class ViewTreeObserver {

    public void addOnGlobalLayoutListener(OnGlobalLayoutListener listener) {

        checkIsAlive();

        if (mOnGlobalLayoutListeners == null) {

            mOnGlobalLayoutListeners = new CopyOnWriteArray();

        }

        mOnGlobalLayoutListeners.add(listener);

    }

}

ViewTreeObserver 是一个全局的 View 树变更观察者，它提供了一系列全局的监听器，全局重绘即是其中OnGlobalLayoutListener：

public interface OnGlobalLayoutListener {

    public void onGlobalLayout();

}

当 View 树发生变化需要重绘的时候，就会触发该回调。

调用 View.setVisibility(View.GONE) 之所以能将控件隐藏，正是因为整个 View 树触发了一次重绘。（任何一次微小的重绘都是从 View 树的树根自顶向下的遍历并触发每一个控件的重绘，不需要重绘的控件会跳过，关于 Adroid 绘制机制的分析可以点击Android自定义控件 | View绘制原理（画多大？））

在可见性检测扩展方法中捕获第一个时机：

fun View.onVisibilityChange(block: (view: View, isVisible: Boolean) -> Unit) {

    viewTreeObserver.addOnGlobalLayoutListener {}  

}

其中viewTreeObserver是 View 的方法：

// android.view.View.java

public ViewTreeObserver getViewTreeObserver() {

    if (mAttachInfo != null) {

        return mAttachInfo.mTreeObserver;

    }

    if (mFloatingTreeObserver == null) {

        mFloatingTreeObserver = new ViewTreeObserver(mContext);

    }

    return mFloatingTreeObserver;

}

getViewTreeObserver() 用于返回当前 View 所在 View 树的观察者。

全局重绘其实覆盖了上述的两个场景：

1. 同一 Activity 中 Fragment 的切换


2. 手动调用 View.setVisibility(View.GONE)


3. 被输入法覆盖

这两个场景都会发生 View 树的重绘。

捕获全局滚动时机

1. ScrollView, NestedScrollView 的滚动


2. ViewPager, ViewPager2 的滚动


3. RecyclerView 的滚动

上述三个时机的共同特点是“发生了滚动”。

每个可滚动的容器控件都提供了各自滚动的监听

// android.view.ScrollView.java

public interface OnScrollChangeListener {

    void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY);

}



// androidx.viewpager2.widget.ViewPager2.java

public abstract static class OnPageChangeCallback {

    public void onPageScrolled(int position, float positionOffset, @Px int positionOffsetPixels) {}

    public void onPageSelected(int position) {}

    public void onPageScrollStateChanged(@ScrollState int state) {}

}



// androidx.recyclerview.widget.RecyclerView.java

public abstract static class OnScrollListener {

    public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {}

    public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {}

}

难道要针对不同的滚动控件设置不同的滚动监听器？

这样可见性检测就和控件耦合了，不具有通用性，也愧对View.onVisibilityChange()这个名字。

还好又在ViewTreeObserver中找到了全局的滚动监听：

public final class ViewTreeObserver {

    public void addOnScrollChangedListener(OnScrollChangedListener listener) {

        checkIsAlive();



        if (mOnScrollChangedListeners == null) {

            mOnScrollChangedListeners = new CopyOnWriteArray();

        }



        mOnScrollChangedListeners.add(listener);

    }

}



public interface OnScrollChangedListener {

    public void onScrollChanged();

}

在可见性检测扩展方法中捕获第二个时机：

fun View.onVisibilityChange(block: (view: View, isVisible: Boolean) -> Unit) {

    viewTreeObserver.addOnGlobalLayoutListener {} 

    viewTreeObserver.addOnScrollChangedListener {}

}

捕获全局焦点变化时机

下面这些 case 都是焦点发生了变化：

1. 手机电源开关


2. Home 键


3. 被 Dialog 遮挡


4. Activity 切换

同样借助于 ViewTreeObserver 可以捕获到焦点变化的时机。

到目前为止，全局可见性扩展方法中已经监听了三种时机，分别是全局重绘、全局滚动、全局焦点变化：

fun View.onVisibilityChange(block: (view: View, isVisible: Boolean) -> Unit) {

    viewTreeObserver.addOnGlobalLayoutListener {} 

    viewTreeObserver.addOnScrollChangedListener {}

    viewTreeObserver.addOnWindowFocusChangeListener {}

}

捕获新增子控件时机

最后一个 case 是最复杂的：动态替换的 Fragment 遮挡了原有控件。

该场景如下图所示：

界面中有一个底边栏，其中包含各种 tab 标签，点击其中的标签会以 Fragment 的形式从底部弹出。此时，底边栏各 tab 从可见变为不可见，当点击返回时，又从不可见变为可见。

一开始的思路是“从被遮挡的 View 本身出发”，看看某个 View 被遮挡后，其本身的属性是否会发生变化？

View 内部以is开头的方法如下所示：

我把其中名字看上去可能和被遮挡有关联的方法值全都打印出来了，然后触发 gif 中的场景，观察这些值在触发前后是否会发生变化。

几十个属性，一一比对，在看花眼之前，log 告诉我，被遮挡之后，这些都没有发生任何变化。。。。

绝望。。。但还不死心，继续寻找其他方法：

我又找了 View 内部所有has开头的方法，也把其中看上去和被遮挡有关的方法全打印出来了。。。你猜结果怎么着？依然是徒劳。。。。

我开始质疑出发点是否正确。。。此时一声雷鸣劈醒了我。

视图只可能了解其自身以及其下层视图的情况，它无法得知它的平级甚至是父亲的绘制情况。而 gif 中的场景，即是在底边栏的同级有一个 Fragment 的容器。而且当视图被其他层级的控件遮挡时，整个绘制体系也不必通知那个被遮挡的视图，否则多低效啊（我yy的，若有大佬知道内情，欢迎留言指点一二。）

经过这层思考之后，我跳出了被遮挡的那个视图，转而去 Fragment 的容器哪里寻求解决方案。

Fragment 要被添加到 Activity 必须提供一个容器控件，容器控件提供了一个回调用于监听子控件被添加：

// android.view.ViewGroup.java

public void setOnHierarchyChangeListener(OnHierarchyChangeListener listener) {

    mOnHierarchyChangeListener = listener;

}



public interface OnHierarchyChangeListener {

    void onChildViewAdded(View parent, View child);

    void onChildViewRemoved(View parent, View child);

}

为了监听 Fragment 被添加的这个瞬间，得为可见性检测扩展方法添加一个参数：

fun View.onVisibilityChange(

    viewGroup: ViewGroup? = null, // 容器

    block: (view: View, isVisible: Boolean) -> Unit

) { }

其中 viewGroup 表示 Fragment 的容器控件。

既然 Fragment 的添加也是往 View 树中插入子控件，那 View 树必定会重绘，可以在全局重绘回调中进行分类讨论，下面是伪代码：

fun View.onVisibilityChange(

    viewGroup: ViewGroup? = null, 

    block: (view: View, isVisible: Boolean) -> Unit

) {

    var viewAdded = false

    // View 树重绘时机

    viewTreeObserver.addOnGlobalLayoutListener {

        if(viewAdded){

            // 检测新插入控件是否遮挡当前控件

        }

        else {

            // 检测当前控件是否出现在屏幕中

        }

    } 

    // 监听子控件插入

    viewGroup?.setOnHierarchyChangeListener(object : OnHierarchyChangeListener {

        override fun onChildViewAdded(parent: View?, child: View?) {

                viewAdded = true

            }

        }

        override fun onChildViewRemoved(parent: View?, child: View?) {

            viewAdded = false

        }

    })

}

子控件的插入回调总是先于 View 树重绘回调。所以先在插入时置标志位viewAdded = true，以便在重绘回调中做分类讨论。（因为检测子控件遮挡和是否出现在屏幕中是两种不同的检测方案）

可见性检测算法

检测控件的可见性的算法是：“判断控件的矩形区域是否和屏幕有交集”。

为此新增扩展属性：

val View.isInScreen: Boolean

    get() = ViewCompat.isAttachedToWindow(this) && visibility == View.VISIBLE && getLocalVisibleRect(Rect())

val 类名.属性名: 属性类型这样的语法用于为类的实例添加一个扩展属性，它并不是真地给类新增了一个成员变量，而是在类的外部新增属性值的获取方法。

当前新增的属性是 val 类型的，即常量，所以只需要为其定义个 get() 方法来表达如何获取它的值。

View 是否在屏幕中由三个表达式共同决定。

1. 先通过 ViewCompat.isAttachedToWindow(this) 判断控件是否依附于窗口。


2. 再通过 visibility == View.VISIBLE 判断视图是否可见。


3. 最后调用getLocalVisibleRect()判断它的矩形相对于屏幕是否可见：

// android.view.View.java

public final boolean getLocalVisibleRect(Rect r) {

    final Point offset = mAttachInfo != null ? mAttachInfo.mPoint : new Point();

    if (getGlobalVisibleRect(r, offset)) {

        r.offset(-offset.x, -offset.y);

        return true;

    }

    return false;

}

该方法会先获取控件相对于屏幕的矩形区域并存放在传入的 Rect 参数中，然后再将其偏移到控件坐标系。如果矩形区域为空，则返回 false 表示不在屏幕中，否则为 true。

刚才捕获的那一系列时机，有可能会被多次触发。为了只将可见性发生变化的事件回调给上层，得做一次过滤：

val KEY_VISIBILITY = "KEY_VISIBILITY".hashCode()



val checkVisibility = {

    // 获取上一次可见性

    val lastVisibility = getTag(KEY_VISIBILITY) as? Boolean

    // 获取当前可见性

    val isInScreen = this.isInScreen() && visibility == View.VISIBLE

    // 无上一次可见性，表示第一次检测

    if (lastVisibility == null) {

        if (isInScreen) {

            // 回调可见性回调给上层

            block(this, true)

            // 更新可见性

            setTag(KEY_VISIBILITY, true)

        }

    } 

    // 当前可见性和上次不同

    else if (lastVisibility != isInScreen) {

        // 回调可见性给上层

        block(this, isInScreen)

        // 更新可见性

        setTag(KEY_VISIBILITY, isInScreen)

    }

}

过滤重复事件的方案是记录上一次可见性（记录在 View 的 tag 中），如果这一次可见性检测结果和上一次相同则不回调给上层。

将可见性检测定义为一个 lambda，这样就可以在捕获不同时机时复用。

以下是完整的可见性检测代码：

fun View.onVisibilityChange(

    viewGroups: List<ViewGroup> = emptyList(), // 会被插入 Fragment 的容器集合

    needScrollListener: Boolean = true,

    block: (view: View, isVisible: Boolean) -> Unit

) {

    val KEY_VISIBILITY = "KEY_VISIBILITY".hashCode()

    val KEY_HAS_LISTENER = "KEY_HAS_LISTENER".hashCode()

    // 若当前控件已监听可见性，则返回

    if (getTag(KEY_HAS_LISTENER) == true) return



    // 检测可见性

    val checkVisibility = {

        // 获取上一次可见性

        val lastVisibility = getTag(KEY_VISIBILITY) as? Boolean

        // 判断控件是否出现在屏幕中

        val isInScreen = this.isInScreen

        // 首次可见性变更

        if (lastVisibility == null) {

            if (isInScreen) {

                block(this, true)

                setTag(KEY_VISIBILITY, true)

            }

        } 

        // 非首次可见性变更

        else if (lastVisibility != isInScreen) {

            block(this, isInScreen)

            setTag(KEY_VISIBILITY, isInScreen)

        }

    }



    // 全局重绘监听器

    class LayoutListener : ViewTreeObserver.OnGlobalLayoutListener {

        // 标记位用于区别是否是遮挡case

        var addedView: View? = null

        override fun onGlobalLayout() {

            // 遮挡 case

            if (addedView != null) {

                // 插入视图矩形区域

                val addedRect = Rect().also { addedView?.getGlobalVisibleRect(it) }

                // 当前视图矩形区域

                val rect = Rect().also { this@onVisibilityChange.getGlobalVisibleRect(it) }

                // 如果插入视图矩形区域包含当前视图矩形区域，则视为当前控件不可见

                if (addedRect.contains(rect)) {

                    block(this@onVisibilityChange, false)

                    setTag(KEY_VISIBILITY, false)

                } else {

                    block(this@onVisibilityChange, true)

                    setTag(KEY_VISIBILITY, true)

                }

            } 

            // 非遮挡 case

            else {

                checkVisibility()

            }

        }

    }



    val layoutListener = LayoutListener()

    // 编辑容器监听其插入视图时机

    viewGroups.forEachIndexed { index, viewGroup ->

        viewGroup.setOnHierarchyChangeListener(object : ViewGroup.OnHierarchyChangeListener {

            override fun onChildViewAdded(parent: View?, child: View?) {

                // 当控件插入，则置标记位

                layoutListener.addedView = child

            }



            override fun onChildViewRemoved(parent: View?, child: View?) {

                // 当控件移除，则置标记位

                layoutListener.addedView = null

            }

        })

    }

    viewTreeObserver.addOnGlobalLayoutListener(layoutListener)

    // 全局滚动监听器

    var scrollListener:ViewTreeObserver.OnScrollChangedListener? = null

    if (needScrollListener) {

         scrollListener = ViewTreeObserver.OnScrollChangedListener { checkVisibility() }

        viewTreeObserver.addOnScrollChangedListener(scrollListener)

    }

    // 全局焦点变化监听器

    val focusChangeListener = ViewTreeObserver.OnWindowFocusChangeListener { hasFocus ->

        val lastVisibility = getTag(KEY_VISIBILITY) as? Boolean

        val isInScreen = this.isInScreen

        if (hasFocus) {

            if (lastVisibility != isInScreen) {

                block(this, isInScreen)

                setTag(KEY_VISIBILITY, isInScreen)

            }

        } else {

            if (lastVisibility == true) {

                block(this, false)

                setTag(KEY_VISIBILITY, false)

            }

        }

    }

    viewTreeObserver.addOnWindowFocusChangeListener(focusChangeListener)

    // 为避免内存泄漏，当视图被移出的同时反注册监听器

    addOnAttachStateChangeListener(object : View.OnAttachStateChangeListener {

        override fun onViewAttachedToWindow(v: View?) {

        }



        override fun onViewDetachedFromWindow(v: View?) {

            v ?: return

            // 有时候 View detach 后，还会执行全局重绘，为此退后反注册

            post {

                try {

                    v.viewTreeObserver.removeOnGlobalLayoutListener(layoutListener)

                } catch (_: java.lang.Exception) {

                    v.viewTreeObserver.removeGlobalOnLayoutListener(layoutListener)

                }

                v.viewTreeObserver.removeOnWindowFocusChangeListener(focusChangeListener)

                if(scrollListener !=null) v.viewTreeObserver.removeOnScrollChangedListener(scrollListener)

                viewGroups.forEach { it.setOnHierarchyChangeListener(null) }

            }

            removeOnAttachStateChangeListener(this)

        }

    })

    // 标记已设置监听器

    setTag(KEY_HAS_LISTENER, true)

}

该控件可见性检测方法，最大的用处在于检测 Fragment 的可见性。详细讲解可以点击 页面曝光难点分析及应对方案

Talk is cheap,show me the code

上述源码可以在这里找到。

推荐阅读

业务代码参数透传满天飞？（一）

业务代码参数透传满天飞？（二）

全网最优雅安卓控件可见性检测

全网最优雅安卓列表项可见性检测

页面曝光难点分析及应对方案

你的代码太啰嗦了 | 这么多对象名？

你的代码太啰嗦了 | 这么多方法调用？

自我介绍

我的家乡是浙江-宁波-余姚，是一名就读于一所位于宁波-慈溪（学校：笑死，这就我一所大学，你直接报我名字得了）的双非独立学院的软件工程专业的23年应届生，7到10月有在南京实习，现在是孤身一人在杭州实习的社恐前端实习生，前端练习时长一年半，擅长唱、跳、rap... 还只擅长Vue的渣渣前端程序猿，有兴趣可以关注我的公众号程序猿青空，23年开始我会时不时分享各种优秀文章、学习资源、学习课程，探索初期，还请多多关照。这篇文章会是我公众号的第一篇文章，主要对我这一年来的经历做一个简单的流水账总结，涉及到恋爱、租房、学习、工作等各方面内容，希望这份经验对你也能有所帮助。

学习

大二下半年的时候分流，自主报名到了我们学校的产业学院——企业和学校联合创办的培养应用型人才的学院。我文科相当薄弱，埋头考研会相当痛苦，也很清楚自己做不来官僚主义那一套，公职也不是适合我的职业（没错我对公职有偏见），很坚定就业这条路。因为还没有毕业，我的身份归根结底就是一个双非下流本科的一名大学生，为了避免自己毕业即失业，看当时产业学院的宣传也不错就去了。

事实上因为产业学院刚创办不久，而且并不是所有人来到这里都是为了就业的，也有可能是为了学分、助学金等其他方面的原因，课程设计、师资力量、同学质量等各方面都良莠不齐、鱼龙混杂。每门课程的期末大作业基本都是一个小项目，大三一年里两个期末都有为了大作业通宵的几天，再加上1500💰凑活过的生活费，死贵的电费和食堂伙食费，在这里学习和生活有时候还蛮辛苦的。好在我很清楚自己应该做什么，天赋不够，努力来凑，本来起跑线就低，更应该比别人卷一点。当然我也不是那种能够没日没夜卷的人（👀），关注了鱼皮，加入了他的知识星球，在星球天天学习健身（没错我还健身💪）打卡的flag没两个礼拜就立不住了，知识付费的事咱也没少干，就是说能一直坚持下来的着实不多，咱也明白咱就是个普通人，逆袭这种事确实还是很难做到的，我这人还是比较佛系的。

大三这一年我用一年的时间从零学前端，自认为还算是没有辜负自己，这一年时间的学习也还算有成果，虽然没法和卷王们争第一，也能跟在他们后面做个万年老二（😭呜呜呜）。下半年开始实习后更别说了，新的技术栈的学习基本就停滞了。实习前我还天真的以为能有更多的时间学习，正相反，比在学校学的更少，因为下班到家七八点，生活琐事会比在学校里多得多，而且我下班后还要花一个多钟头健身，再加上忙碌一天后更无心学习，只想躺平。

下半年做过的最卷的事也就参与了字节青训营，课题选择了前端监控平台，可惜的就是没能在青训营期间完成（😭呜呜呜，队友都摆烂了），当然也就没有结营证书。但我也不甘心就这样算罢，这个项目我就自己拉出来，作为我的毕业设计去完成它。解决实习期间学习效率低的最好办法就是在公司学习一些对公司业务有关或者优化公司项目的知识，名正言顺地摸鱼。我是Vue入门的，这一年里也一直守着Vue，来年第一季度目标就是学习React和Nest，开发一个自己的数据聚合的网站，能变现就最好了（😎欸嘿）。

生活&实习

大三下，也就是今年上半年，为了冲刺暑期实习，也就没去做兼职了，感叹本就艰难的生活的同时，殊不知这是为数不多还能自己自由掌控的日子了（😥我哭死）。其实我开始准备实习还是挺晚了，再加上期末没有太多时间，准备并不是太充分，没有太多自信心，投了几家大厂，不是没回应，就是笔试挂，就有点望而却步。

在我一个大佬同学的介绍下，面试了一家南京的小厂，过程很顺利，实习薪资给的也很可观，当时就没考虑那么多，就选择接受offer了（后来在杭州实习认识了几个小伙伴，才学了没几个月，暑假就面试进了独角兽企业，我那个时候确实应该再多投一投的）。刚开始的想法是第一次出门实习，有份经验就可以，在什么城市没关系，然而事实是工作上确实没什么关系，生活上关系可大了。7月13日第一次一个人拎上行李，义无反顾地去了南京，以为自己终于能够大展拳脚，再不济也能够在公司有所贡献，然而现实总是没那么理想。

因为一个人前往外地工作，第一件事情便是租房，为了省点钱就托南京实习公司的一个同事看房子，因为他的房租到期也要找房子就顺便可以租在一起，有个照应。然而实际上因为是第一次出远门工作和生活，一切和自己的理想差距显然大了许多：因为不是自己实地看的房，而且也是第一次租房，虽然房租只有850💰，但是也可能因为是夏季大家都开空调，差不多50多💰一个礼拜的电费和其他乱七八糟的费用，一个月光租房子就差不多得1200💰，并不算贵，但是性价比极低；我的房间没地方晒衣服，只能晒在那个同事的房间的阳台，作为一个社恐患者，每次去都要做很多心理斗争（他会不会睡了，他会不会在忙....🙃）；桌上只能堪堪放下我的显示器和笔记本，鼠标活动范围极小；床应该是睡过好几个租客了，明显的不舒服；吃的方面因为有点水土不服不能随便乱吃，同时也是为了省钱所以选择自己做饭，因此还得购置很多厨具调味品等等，一次性的开销💰不小；回学校的频率比我想象的高，因此来回车费也成为一大负担；当时租房合同是同事代签的，他签了一年，我那时候也不懂也没问，再加上当时换工作离开的比较急，没时间找转租，违约金直接血亏1700💰。

生活的种种问题都还能接受或者解决，然而工作方面，因为进入公司的时间段比较特殊再加上疫情影响，在南京实习的三个月里，我始终没有能够在技术上得到足够的提升，再加上与公司和领导的气场不合，使得我在公司整天如坐针毡，甚至有点无所事事（总之就是过的很不开心），虽然有不低的实习薪资，但是我始终没法在那里躺平。因此在中秋决定参与秋招，开始寻找第二份实习工作。

然而今年找工作并不简单，因为频繁发作的疫情，再加上互联网行业这些年的发展，行业的形势非常的严峻，各大公司都削减了HC（head count，人头数，就是最终录用的人数，肯定有小伙伴不懂这个词，我一开始就不懂🤏），作为一个民本23年应届生，在今年的秋招着实很难找到一份理想的工作。那段时间的想法就是尽快找到下一份工作（急急急急急急，我是急急国王），找到一份离家近、工资高、平台大至少满足两个的工作。从9月10日中秋就开始投出第一份简历，到10月19日确定来到杭州的一家四五百人的SaaS公司，这期间投出过几百份简历，得到的回应却寥寥无几，这是一段非常难忘的经历。

这一个月里每一天都在为找工作烦恼，一开始专注于线上面试，却始终的得不到理想工作的认可，持续的碰壁使得开始怀疑自己这些年的学习，自己的选择是不是错了，是不是自己能力确实没法满足他们的要求（被ktv了），后来也决定不放过线下面试的机会，顶着疫情在南京、杭州、家、学校几地频繁奔波，在杭州线下面试的那一天还是顶着自己身体上的各种不适（持续拉肚子，全身酸痛，萎靡不振），仍然要拿出饱满的精神去面对面试，好在当时就获得了面试官也是现在的leader的认可，简直就是久旱逢甘霖，虽然并不是直接发的offer，但是也是十分有信心。杭州比起南京的工作，实习薪资低了很多，但是因为线下面试，对于当时感受到的公司的氛围十分的心动，也就放弃了其他小公司更高薪资的offer，决定了自己的第二份实习工作。

换工作又是换城市，所以又需要租房搬家，购置各种必需品，又是一大笔开销，在还没进公司前始终在担忧自己先择了薪资更低的工作，到时候会不会付出了这么多，结果又远不如预期让自己更痛苦。不过在经过了一个月左右实习后，我在杭州的公司工作的感受让我相信自己的选择没有错。

10月23日我再一次拖着一大堆行李开始了迁徙，本来打算先简单看房子，先回家住几天再自驾，拖着行李回来看房子签合同，所以我把被子等一些大件的行李都寄回家了，但是这次进入杭州后就黄🐎了（之前几地来回跑黄都没黄一下），只能多看几套房子然后就签下来，好在当天就看到一个自己满意的，10几平，押一付一，一个月算上水电差不多也就1300💰，不至于睡大街，但是我没有被子，当时杭州刚开始降温，温度也就个位数，但是买被子太亏了，之后用不上，就买了床毛毯，多盖几件衣服，凑活过了两天（真的凑活，冷的雅痞）。

11月1日正式入职，正式开启了在杭州的工作生活，有条不紊的入职手续，时长1周的实习生培训，认识了许多和我一起实习的小伙伴，刚进来还赶上公司的双十一活动，让我对未来的工作生活充满希望。

第一月开始接触了一些简单的业务，重新开始了健身，第二个月就参与开发了一个简单的项目，还封装了公共组件、开发了简单的提高开发效率的脚手架工具，我终于能够继续有条不紊运转了。

在南京实习的期间除了参加了字节青训营和准备面试而巩固基础外，专业上可以说是没有丝毫提升，不过生活经验确实收获满满，坚定了自己的目标，职业生涯规划更加清晰，为了达到目标去学会自律。这几个月的开销给自己和父母都增添了不小得负担，好在现在稳定下来勉强能够在杭州自给自足，生活重新步入正轨，比起在南京，杭州的生活更加得心应手。但是并不是说南京不好，南京是一个非常优雅的城市，这里有他躺在超市里超乖的猫猫，超治愈

离开南京前我也花时间去好好游玩了两天（去了一些免费的博物馆，景点）。

比起杭州，我认为南京更适合生活，我只是去到了一个不适合我的公司和因为经验不足吃了不少亏才离开了这个城市。我很珍惜在杭州的这份工作，也非常享受现在忙碌充实的生活，我也希望自己的能力能够不断得到认可，继续探索自己的人生价值。

感情

呜呜呜，鼠鼠该死啊，鼠鼠长了个恋爱脑，但是好在现在穷的雅痞，我还社恐，可以心无旁骛地工作学习（搞💰）。出来实习没几个礼拜就跟在一起一年的女孩子分手了，其实在上半年因为我们对未来规划的分歧就吵过架，她想留在慈溪，而我更向往大城市（当然不止这一点原因啦），那个时候我就很清楚这段感情肯定没法坚持很久，下半年又异地，在各自的城市实习，天天吵架，自然而然就吵分了，累觉不爱。我深知自己不是啥好男人（男人没一个好东西），还没有资本，毕业前绝对要水泥封心（做杭州第一深情）。

其实我家离学校很近，但是从念大学开始还是很少回家了，在学校里没有什么感觉，直到独自出门在外工作才知道在家真好，爸爸妈妈真好（我是妈宝男，呜呜呜😭），看这篇文章的小伙伴不要再随便跟爸爸妈妈撒气了哦。家里的老人只剩下奶奶独自在乡下了，以后一定要多打电话。

展望

在未来的一年中，希望自己能够吸收已经犯过的错误的经验，保质保量地完成未来的各项工作，作为一名程序员最重要的最重要的就是自我驱动，持续学习，通过不断学习才能够在未来的工作中创造更多的价值，以下是我23年的一些计划

学习

• 这个月先抓紧时间把自己的毕设解决，写复盘的分享博客，之后顺利毕业


• 上半年学习React，Nest，开发一个数据聚合分享平台，同样做分享


• 运营自己的博客和各平台账号，不说多少粉丝，能坚持不凉就行，争取每周一个博客


• 每季至少阅读一本书，学习一个技术栈


• 坚持自己的每日计划和每月复盘总结（包含年中和年终总结）

工作

• 因为现在常态化了，不知道今年的就业形势会是什么样的，着实不想再像去年那样被支配了，所以还是希望得到自己满意的薪资的前提下在这里转正，但愿不要出什么幺蛾子吧


• 继续卷进部门更深层业务，目标负责6个项目


• 学习更多优化开发效率和质量的技术栈，明年就简单定个两个的目标吧，要求不高

生活

• 我真的超级想买机车的，但是杭州主城区禁摩，所以先23年下半年花时间考个D照，看情况决定买个机车还是电驴


• 3月份房租到期了，看房肯定又要放进日程了，看看到时候有没有合租的小伙伴吧，如果有人有兴趣到时候可以分享一下杭州租房经验


• 健身肯定是要继续的，有一说一我肉体确实没啥天赋（也可能是吃得不够多），健身更多的是一种生活态度吧


• 我是一个很不喜欢打电话的人，尤其是和长辈，感觉没话聊，但是老人家接到自己孩子的电话，知道孩子过得不错，真的会很开心。明年定个小目标，一个月给奶奶打一通电话。

2022年好像所有人都过的很艰难，或许所有人都想离开浪浪山，但是也不要忘记看看浪浪山的风景，让我们一起加油吧。最后再打个广告，关注公众号程序猿青空，免费领取191本计算机领域黑皮书电子书，更有集赞活动免费挑选精品课程（各个领域的都有），不定期分享各种优秀文章、学习资源、学习课程，能在未来（因为现在还没啥东西）享受更多福利。

iOS 3年开发迷茫随心聊

从毕业开始做iOS，到现在已经是第4个年头了。第一家公司，做了一年，项目没上线就倒闭了，导致找第二家公司的时候也没有一个项目能拿的出手。第二家公司误入一家游戏公司，每天工作就是将H5小游戏做成一个App，想办法上线，一年过去了，技术其实也没什么长进，但是通过这个过程了解一些苹果上架的知识。也有了几个上线项目经验了。由于想找个正经互联网公司做App，也离职找工作。

找工作头一个月，发现面试面的问题都是与底层相关，一问三不知，在家埋头学了2个月底层相关知识（可以理解背题）。原理是懂一点了，但是没有在实际项目中运用，工资也上不太去。在面了20多家公司后，终于找到现在第三份工作。

由于有第二份工作的经历，在第三家公司上班的时候一直在学习，有意识的去面试的原理去解决一些开发中的问题，例如使用runtime解决一些问题，却发现runtime如果没有很强的理解，还是不要用在项目里，因为可能出现未知的风险。例如使用交换方法，全局做了修改，但是后期项目需求更改，保持全局修改的前提下，对其他情况要做不同处理。也没有太多需求会使用到原理的内容，性能也不需要优化。

小公司对技术不太感冒，能完成需求就行，虽然自己力所能及的去做一些规范，但觉得做的还是不够，也不清楚其他公司到底是如何做的。小公司个人感觉对员工做事的责任心更加看重。需求就是写页面，页面还原的好，做的快一点，bug少一点就行了。不是理想的一个团队有什么方案，规范，让开发更有效率。最大感触是还好没有成为一个油腻的开发~。

在现在的公司，做了几个项目，也没有大的bug。学会了Swift进行开发。也许也算是一种收获吧。但是公司不加薪，今年的目标是想学点东西换一份工作。

学了1个月RxSwift，感觉也快学不下去了，公司是不可能用了，网上也有人说这个架构太重了。语言是个问题，自己英语水平有限，学习速度太慢了。如果有看到的这篇文章的小伙伴，也可以给我点意见。

最近想学一点提高开发效率的技能。和面试相关的内容。如果有大神经历过我这个时期，还麻烦给点建议。建议退iOS坑的就不必留言了。个人虽然菜，但是如果还没有做到小公司天花板的话，目前不考虑退坑。

第一次发文章也不知道说啥，后面会更新一些学习

前言

线上出现问题，你的第一反应是什么？

如果是我的话，第一时间想的应该是查日志：

1. if…else 到底进入了哪个分支？


2. 关键参数是不是有缺失？


3. 入参是不是有问题，没做好校验放进去了？

良好的日志能帮我们快速定位到问题所在，坑你的东西往往最为无形，良好的日志就是要让这些玩意无所遁形！

日志级别

Java应用中，日志一般分为以下5个级别：

• ERROR 错误信息


• WARN 警告信息


• INFO 一般信息


• DEBUG 调试信息


• TRACE 跟踪信息

1）ERROR

ERROR 级别的日志一般在 catch 块里面出现，用于记录影响当前线程正常运行的错误，出现 Exception 的地方就可以考虑打印 ERROR 日志，但不包括业务异常。

需要注意的是，如果你抛出了异常，就不要记录 ERROR 日志了，应该在最终的地方处理，下面这样做就是不对的：

try {

    int i = 1 / 0;

} catch (Exception e) {

    log.error("出错了，什么错我不知道，啊哈哈哈！", e);

    throw new CloudBaseException();

}

2）WARN

不应该出现，但是不会影响当前线程执行的情况可以考虑打印 WARN 级别的日志，这种情况有很多，比如：

• 各种池（线程池、连接池、缓存池）的使用超过阈值，达到告警线


• 记录业务异常


• 出现了错误，但是设计了容错机制，因此程序能正常运行，但需要记录一下

3）INFO

使用最多的日志级别，使用范围很广，用来记录系统的运行信息，比如：

• 重要模块中的逻辑步骤呈现


• 客户端请求参数记录


• 调用第三方时的参数和返回结构

4）DEBUG

Debug 日志用来记录自己想知道的所有信息，常常是某个功能模块运行的详细信息，已经中间的数据变化，以及性能信息。

Debug 信息在生产环境一般是关闭状态的，需要使用开关管理（比如 SpringBoot Admin 可以做到），一直开启会产生大量的 Debug，而 Debug 日志在程序正常运行时大部分时间都没什么用。

if (log.isDebugEnabled()) {

    log.debug("开始执行，开始时间:[{}]，参数:[{}]", startTime, params);

    log.debug("通过计算，得到参数1:[{}]，参数2:[{}]", param1, param2);

    log.debug("最后处理结果:[{}]", result);

}

5)TRACE

特别详细的系统运行完成信息，业务代码中一般不使用，除非有特殊的意义，不然一般用 DEBUG 代替，事实上，我编码到现在，也没有用过这个级别的日志。

使用正确的格式

如果你是这样打印日志的：

log.info("根据条件id：{}" + id + "查询用户信息");

不要这样做，会产生大量的字符串对象，占用空间的同时也会影响性能。

正确的做法是使用参数化信息的方式：

log.info("根据条件id：[{}]，查询用户信息", id);

这样做除了能避免大量创建字符串之外，还能明确的把参数隔离出去，当你需要把参数复制出来的时候，只需要双击鼠标即可，而不是用鼠标慢慢对准再划拉一下。

这样打出来的日志，可读性强，对排查问题的帮助也很大！

小技巧

1）多线程

遇到多个线程一起执行的日志怎么打？

有些系统，涉及到并发执行，定时调度等等，就会出现多次执行的日志混在一起，出问题不好排查，我们可以把线程名打印进去，或者加一个标识用来表明这条日志属于哪一次执行：

if (log.isDebugEnabled()) {

    log.debug("执行ID=[{}]，处理了ID=[{}]的消息，处理结果：[{}]", execId, id, result);

}

2）使用 SpringBoot Admin 灵活开关日志级别

写在最后

一开始写代码的时候，没有规范日志的意识，不管哪里，都打个 INFO，打印出来的东西也没有思考过，有没有意义，其实让自己踩了不少坑，加了不少班，回过头，我想对学习时期的我说一句：”能让你加班的东西，都藏在各种细节里！写代码之前，先好好学习如何打日志！“

Diff 算法

写在前面

因为之前看面试直播也经常问到 Diff 算法，然后作者本人用 Vue2 比较多，所以打算研究一下 Vue2 的 Diff 算法，其实很早就想学的，但是可能因为感觉 Diff 算法比较深奥，就一直拖着没学，但是最近在准备面试，就想着迟早都要学的，趁这个机会把 Diff 算法搞懂吧 🧐，作者就花了一天的时间研究了一下，可能没有完全理解 Diff 算法的精髓，请各位见谅。

💡 这个其实算作者的学习笔记，而且作者水平有限，改文章仅代表作者个人观点，如果有错误可以评论区指出来，会不断完善；同时本文很长，所以请读者们有耐心的看完，看完后作者相信你们会对 Diff 算法有更深的了解。本人觉得本文比目前网上讲解 Diff 算法的大部分文章要更好，因为本文从问题出发，教会大家如何思考，而不是直接从答案出发，就像读答案一样，这样感觉没什么意思，本文一步一步的引导大家去感受 Diff 算法的精妙，同时最后也做了一下小实验，让大家对 Diff 算法有更加直观的感受 🎉。

为什么要用 Diff 算法

虚拟 DOM

因为 Vue2 底层是用虚拟 DOM 来表示页面结构的，虚拟 DOM其实就是一个对象，如果想知道怎么生成的，其实大概流程就是：

• 首先解析模板字符串，也就是 .vue 文件


• 然后转换成 AST 语法树


• 接着生成 render 函数


• 最后调用 render 函数，就能生成虚拟 DOM

最小量更新

其实框架为了性能才使用的虚拟 DOM，因为 js 生成 DOM 然后展示页面是很消耗性能的，如果每一次的更新都把整个页面重新生成一遍那体验肯定不好，所以需要找到两个页面中变化的地方，然后只要把变化的地方用 js 更新 (可能是增加、删除或者更新) 一下就行了，也就是最小量更新。
那么怎么实现最小量更新呢？那么就要用 Diff 算法了，那么 Diff 算法对比的到底是什么呢？可能这是刚学 Diff 算法比较容易误解的地方，其实比对的是新旧虚拟 DOM，所以 Diff 算法就是找不同，找到两次虚拟 DOM 的不同之处，然后将不同反应到页面上，这就实现了最小量更新，如果只更新变化的地方那性能肯定更好。

页面更新流程

其实这个比较难解释，作者也就大致说一下，学了 Vue 的都知道这个框架的特点之一就有数据响应式，什么是响应式，也就是数据更新页面也更新，那么页面是怎么知道自己要更新了呢？其实这就是这个框架比较高明的地方了，大致流程如下：

• 之前也说了会运行 render 函数，那么运行 render 函数的时候会被数据劫持，也就是进入 Object.defineProperty 的 get，那么在这里收集依赖，那么是谁收集依赖呢？是每个组件，每个组件就是一个 Watcher，会记录这个组件内的所有变量 (也就是依赖)，当然每个依赖 (Dep) 也会收集自己所在组件的 Watcher；


• 然后当页面中的数据发生变化，那么就会出发 Object.defineProperty 的 set，在这个函数里面数据就会通知每个 Watcher 更新页面，然后每个页面就会调用更新方法，这个方法就是 patch；


• 接着，就要找到两个页面之间的变化量，那么就要用到 Diff 算法了


• 最后找到变化量后就可以进行更新页面了

其实是边找边更新的，为了让大家理解容易就将这两个部分分开了

Diff 算法简单介绍

面试问到 Diff 算法是什么，大家肯定会说两句，比如 头头、尾尾、尾头、头尾、深度优先遍历(dfs)、同层比较 类似这些话语，虽然能说一两句其实也是浅尝辄止。
其实作者看了 CSDN 上发的关于 Diff 算法的文章，就是阅读量很高的文章，作者觉得他也没讲明白，可能他自己没明白，或者自己明白了但是没讲清楚，那么作者会用自己的感悟和大家分享一下。

Diff 算法的前提

为了让大家能够了解清楚，这里先说明一下函数调用流程：

• patch


• patchVnode


• updateChildren

Diff 算法的 前提 这个是很重要的，可能大家会问什么是前提？不就是之前说的那些比较嘛？说的没错但也不对，因为 Diff 算法到达之前说的 头头、尾尾、尾头、头尾 这一步的前提就是两次对比的节点是 相同的，这里的相同不是大家想的完全相同，只是符合某些条件就是相同了，为了简化说明，文章就只考虑一个标签只包含 key 和 标签名(tag)，那么之前说的相同就是 key 相同以及 tag 相同，为了证明作者的说法是有点正确的，那么这里也贴上源码：

// https://github.com/vuejs/vue/blob/main/src/core/vdom/patch.ts

// 36行

function sameVnode(a, b) {

  return (

    a.key === b.key &&

    a.asyncFactory === b.asyncFactory &&

    ((a.tag === b.tag &&

      a.isComment === b.isComment &&

      isDef(a.data) === isDef(b.data) &&

      sameInputType(a, b)) ||

      (isTrue(a.isAsyncPlaceholder) && isUndef(b.asyncFactory.error)))

  )

}

如果怕乱了，下面的可以省略不看也没事不影响整体了解，下面只是为了考虑所有情况才加的一个判断：
那么如果两个虚拟 DOM 不相同其实就不用继续比较了，而且如果相同也不用比较了，这里的相同是真的完全相同，也就是两个虚拟 DOM 的地址是一样的，那么也贴上源码：

function patchVnode(......) {

  if (oldVnode === vnode) {

    return

  }

  ......

}

到目前为止大家可能会比较乱，现在总结一下：

• 在 patch 函数里比较的是新老虚拟 DOM 是否是 key 相同以及 tag 相同，如果不相同那么就直接替换，如果相同用 patchVnode

说了这么多，其实作者也就想表达一个观点，就是只有当两次比较的虚拟 DOM 是 相同的 才会考虑 Diff 算法，如果不符合那直接把原来的删除，替换新的 DOM 就行了。

patchVnode 函数

这个函数里的才是真正意义上的 Diff 算法，那么接下来会结合源码向大家介绍一下。

源码中核心代码在 patch.ts 的 638 行至 655 行。

其实，目前介绍 patchVnode 的都是直接对着源码来介绍的，但是大家可能不清楚为啥要这么分类，那么作者在这里就让大家明白为什么这么分类，首先在这里说一个结论：

• 就是 text 属性和 children 属性不可能同时存在，这个需要大家看模板解析源码部分

那么在对比新旧节点的情况下，主要比较的就是是否存在 text 和 children 的情况，那么会有如下九种情况

按照上面的表格，因为如果新节点有文本节点，其实老节点不管是什么都会被替换掉，那么就可以按照 新节点 text 是否存在来分类，其实 Vue 源码也是这么来分类的：

if (isUndef(vnode.text)) {

  // 新虚拟 DOM 有子节点

} else if (oldVnode.text !== vnode.text) {

  // 如果新虚拟 DOM 是文本节点，直接用 textContent 替换掉

  nodeOps.setTextContent(elm, vnode.text)

}

那么如果有子节点的话，那应该怎么分类呢？我们可以按照每种情况需要做什么来进行分类，比如说：

• 第一种情况，我们啥都不用做，因此也可以不用考虑


• 第二种情况，我们应该把原来 DOM 的 textContent 设置为 ''


• 第三种情况，我们也应该把原来 DOM 的 textContent 设置为 ''


• 第四种情况，我们应该加入新的子节点


• 第五种情况，这个情况比较复杂，需要对比新老子节点的不同


• 第六种情况，我们应该把原来的 textContent 设置为 '' 后再加入新的子节点

那么通过以上六种情况 (新虚拟 DOM 不含有 text，也就是不是文本节点的情况)，我们可以很容易地进行归类：

• 分类 1️⃣： 第二种情况 和 第三种情况。进行的是操作是：把原来 DOM 的 textContent 设置为 ''


• 分类 2️⃣： 第四种情况 和 第六种情况。进行的是操作是：如果老虚拟 DOM 有 text，就置空，然后加入新的子节点


• 分类 3️⃣：第五种情况。进行的是操作是：需要进行精细比较，即对比新老子节点的不同

其实源码也是这么来进行分类的，而且之前说的 同层比较 也就得出来了，因为每次比较都是比较的同一个父节点每一个子元素 (这里的子元素包括文本节点和子节点) 是否相同，而 深度优先遍历(dfs) 是因为每次比较中，如果该节点有子节点 (这里的子节点指的是有 children 属性，而不包括文本节点) 的话需要进行递归遍历，知道最后到文本节点结束。

⭕️ 这里需要搞清楚子节点和子元素的区别和联系

然后我们来看看源码是怎么写吧，只看新虚拟 DOM 不含有 text，也就是不是文本节点的情况：

if (isUndef(vnode.text)) {

  if (isDef(oldCh) && isDef(ch)) {

    if (oldCh !== ch)

      // 递归处理，精细比较

      // 对应分类 3️⃣

      updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)

  } else if (isDef(ch)) {

    if (__DEV__) {

      checkDuplicateKeys(ch) // 可以忽略不看

    }

    // 对应分类 2️⃣

    if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')

    addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)

  } else if (isDef(oldCh)) {

  	// 对应分类 1️⃣

    removeVnodes(oldCh, 0, oldCh.length - 1)

  } else if (isDef(oldVnode.text)) {

  	// 对应分类 1️⃣

    nodeOps.setTextContent(elm, '')

  }

}

❓我们可以看到源码把分类 1️⃣ 拆开来了，这是因为如果老虚拟 DOM 有子节，那么可能绑定了一些函数，需要进行解绑等一系列操作，作者也没自信看，大致瞄了一眼，但是如果我们要求不高，如果只是想自己手动实现 Diff 算法，那么没有拆开的必要。

作者觉得这么讲可能比网上其他介绍 Diff 算法的要好，其他的可能直接给你说源码是怎么写的，可能没有说明白为啥这么写，但是通过之前这么分析讲解后可能你对为什么这么写会有更深的理解和帮助吧。

updateChildren 函数

同层比较

因为当都含有子节点，即都包含 children 属性后，需要精细比较不同，不能像之前那些情况一样进行简单处理就可以了
那么这个函数中就会介绍大家经常说的 头头、尾尾、尾头、头尾 比较了，其实这不是 Vue 提出来的，是很早就提出来的算法，就一直沿用至今，大家可以参考【snabbdom 库】

🌟 在这之前我们要定义四个指针 newStartIdx、newEndIdx、oldStartIdx 和 oldEndIdx，分别指向 新头节点、新尾节点、旧头节点 与 旧尾节点

循环条件如下：

while(oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {

  ......

}

其实这个比较也就是按人类的习惯来进行比较的，比较顺序如下 ：

• 1️⃣ 新头节点与旧头节点：++newStartIdx 和 ++oldStartIdx


• 2️⃣ 新尾节点与旧尾节点：--newEndIdx 和 --oldEndIdx


• 3️⃣ 新尾节点与旧头节点：需要将 旧头节点 移动到 旧尾节点之前，为什么要这么做，讲起来比较复杂，记住就好，然后 --newEndIdx 和 ++oldStartIdx


• 4️⃣ 新头节点与旧尾节点：需要将 旧尾节点 移动到 旧头节点之前，为什么要这么做，讲起来比较复杂，记住就好，然后 ++newStartIdx 和 --oldEndIdx


• 5️⃣ 如果都没有匹配的话，就把 新头节点 在旧节点列表 (也就是 children 属性的值) 中进行查找，查找方式按照如下：
  
  
  
  • 如果有 key 就把 key 在 oldKeyToIdx 进行匹配，oldKeyToIdx 根据旧节点列表中元素的 key 生成对应的下标
  
  
  • 如果没有，就按顺序遍历旧节点列表找到该节点所在的下标
  
  
  • 如果在旧节点列表是否找到也分为两种情况：
    
    
    
    • 找到了，那么只要将 新头节点 添加到 旧头节点 之前即可
    
    
    • 没找到，那么需要创建新的元素然后添加到 旧头节点 之前
    
    
    • 然后把这个节点设置为 undefined
    
    
    
    
  
  
  
  

根据循环条件我们可以得到两种剩余情况，如下：

• 6️⃣ 如果 oldStartIdx > oldEndIdx 说明老节点先遍历完成，那么新节点比老节点多，就要把 newStartIdx 与 newEndIdx 之间的元素添加


• 7️⃣ 如果 newStartIdx > newEndIdx 说明新节点先遍历完成，那么老节点比新节点多，就要把 oldStartIdx 与 oldEndIdx 之间的元素删除

其实我们上面还没有考虑如果节点为 undefined 的情况，因为在上面也提到过，如果四种都不匹配后会将该节点置为 undefined，也只有旧节点列表中才有，因此要在开头考虑这两种情况：

• 8️⃣ 当 oldStartVnode 为 undefined：++oldStartIdx


• 9️⃣ 当 oldEndVnode 为 undefined：--oldEndIdx

那么我们来看源码怎么写的吧，其中用到的函数可以查看源码附录：

// https://github.com/vuejs/vue/blob/main/src/core/vdom/patch.ts

// 439 行至 556 行

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {

  if (isUndef(oldStartVnode)) {

  	// 情况 8️⃣

    oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left

  } else if (isUndef(oldEndVnode)) {

  	// 情况 9️⃣

    oldEndVnode = oldCh[--oldEndIdx]

  } else if (sameVnode(oldStartVnode, newStartVnode)) {

  	// 情况 1️⃣

    patchVnode(...)

    oldStartVnode = oldCh[++oldStartIdx]

    newStartVnode = newCh[++newStartIdx]

  } else if (sameVnode(oldEndVnode, newEndVnode)) {

  	// 情况 2️⃣

    patchVnode(...)

    oldEndVnode = oldCh[--oldEndIdx]

    newEndVnode = newCh[--newEndIdx]

  } else if (sameVnode(oldStartVnode, newEndVnode)) {

    // Vnode moved right

    // 情况 3️⃣

    patchVnode(...)

    canMove &&

      nodeOps.insertBefore(

        parentElm,

        oldStartVnode.elm,

        nodeOps.nextSibling(oldEndVnode.elm)

      )

    oldStartVnode = oldCh[++oldStartIdx]

    newEndVnode = newCh[--newEndIdx]

  } else if (sameVnode(oldEndVnode, newStartVnode)) {

    // Vnode moved left

    // 情况 4️⃣

    patchVnode(...)

    canMove &&

      nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)

    oldEndVnode = oldCh[--oldEndIdx]

    newStartVnode = newCh[++newStartIdx]

  } else {

  	// 情况 5️⃣

    if (isUndef(oldKeyToIdx)) // 创建 key -> index 的 Map

      oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) 

    // 找到 新头节点 的下标

    idxInOld = isDef(newStartVnode.key)

      ? oldKeyToIdx[newStartVnode.key]

      : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)

    if (isUndef(idxInOld)) {

      // New element

      // 如果没找到

      createElm(...)

    } else {

      // 如果找到了

      vnodeToMove = oldCh[idxInOld]

      if (sameVnode(vnodeToMove, newStartVnode)) {

        patchVnode(...)

        oldCh[idxInOld] = undefined

        canMove &&

          nodeOps.insertBefore(

            parentElm,

            vnodeToMove.elm,

            oldStartVnode.elm

          )

      } else {

        // same key but different element. treat as new element

        createElm(...)

      }

    }

    newStartVnode = newCh[++newStartIdx]

  }

}

if (oldStartIdx > oldEndIdx) {

  // 情况 6️⃣

  refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm

  addVnodes(...)

} else if (newStartIdx > newEndIdx) {

  // 情况 7️⃣

  removeVnodes(...)

}