最近改了个隐式app 拉起，启动图标也有不同的玩法

0 个启动图标

<intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />



    <category android:name="android.intent.category.BROWSABLE" />

    <action android:name="android.intent.action.VIEW" />

    <category android:name="android.intent.category.DEFAULT" />

    <data

        android:host="app"

        android:path="/"

        android:port="8080"

        android:scheme="lb">

    </data>

</intent-filter>

这里是对接受所有隐式拉起，这个是告诉系统app 启动不需要用户手动拉起，是为了被代码或者其他中转站调用，所以不需要用户手动拉起，自然就不用再显示图标

1个启动图标

<intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

LAUNCHER 是决定是不是要显示在程序列表里，默认为主动唤起，也是Android 标准启动模式，会正常在手机的界面显示

2 个启动图标

<application

    android:allowBackup="true"

    android:icon="@mipmap/ic_launcher"

    android:label="@string/app_name"

    android:theme="@style/AppTheme">



    <activity android:name="com.camera.demo.1Activity"

        android:label="@string/app_name">

        <intent-filter>

            <action android:name="android.intent.action.MAIN" />



            <category android:name="android.intent.category.LAUNCHER" />

        </intent-filter>

    </activity>



    <activity android:name="com.camera.demo.2Activity"

        android:icon="@mipmap/ic_launcher" >

        <intent-filter>

            <action android:name="android.intent.action.MAIN" />



            <category android:name="android.intent.category.LAUNCHER" />

        </intent-filter>

    </activity>



</application>

上面说了android.intent.category.LAUNCHER 为是否显示在应用列表内，所以我们配置多个LAUNCHER，就会有多个图标显示在手机列表内

intent-filter 相关说明

接受页面隐式跳转的过滤器，

action

必须的包含，定义一些操作.android.intent.action.MAIN/android.intent.action.WEB_SEARCH

category

一个字符串， 包含了处理该Intent的组件的种类信息, 起着对action的补充说明作用

data

要指定接受的 Intent 数据，Intent 过滤器既可以不声明任何 <data> 元素，也可以声明多个此类元素，如下例所示：

<intent-filter>

    <data android:mimeType="video/mpeg" android:scheme="http" ... />

    <data android:mimeType="audio/mpeg" android:scheme="http" ... />

    ...

</intent-filter>

每个 <data> 元素均可指定 URI 结构和数据类型（MIME 媒体类型）。URI 的每个部分都是一个单独的属性：scheme、host、port 和 path：

<scheme>://<host>:<port>/<path>

下例所示为这些属性的可能值：

content://com.example.project:200/folder/subfolder/etc

在此 URI 中，架构是 content，主机是 com.example.project，端口是 200，路径是 folder/subfolder/etc。
在 <data> 元素中，上述每个属性均为可选，但存在线性依赖关系：

• 如果未指定架构，则会忽略主机。


• 如果未指定主机，则会忽略端口。


• 如果未指定架构和主机，则会忽略路径。

将 Intent 中的 URI 与过滤器中的 URI 规范进行比较时，它仅与过滤器中包含的部分 URI 进行比较。例如：

• 如果过滤器仅指定架构，则具有该架构的所有 URI 均与该过滤器匹配。


• 如果过滤器指定架构和权限，但未指定路径，则具有相同架构和权限的所有 URI 都会通过过滤器，无论其路径如何均是如此。


• 如果过滤器指定架构、权限和路径，则仅具有相同架构、权限和路径的 URI 才会通过过滤器。

最后贴张LAUNCHER 的原理图

前几天的时候，项目里有一个需求，需要一个开关控制代码中是否执行一段逻辑，于是理所当然的在yml文件中配置了一个属性作为开关，再配合nacos就可以随时改变这个值达到我们的目的，yml文件中是这样写的：

switch:

  turnOn: on

程序中的代码也很简单，大致的逻辑就是下面这样，如果取到的开关字段是on的话，那么就执行if判断中的代码，否则就不执行：

@Value("${switch.turnOn}")

private String on;



@GetMapping("testn")

public void test(){

    if ("on".equals(on)){

        //TODO

    }

}

但是当代码实际跑起来，有意思的地方来了，我们发现判断中的代码一直不会被执行，直到debug一下，才发现这里的取到的值居然不是on而是true。

看到这，是不是感觉有点意思，首先盲猜是在解析yml的过程中把on作为一个特殊的值进行了处理，于是我干脆再多测试了几个例子，把yml中的属性扩展到下面这些：

switch:

  turnOn: on

  turnOff: off

  turnOn2: 'on'

  turnOff2: 'off'

再执行一下代码，看一下映射后的值：

可以看到，yml中没有带引号的on和off被转换成了true和false，带引号的则保持了原来的值不发生改变。

到这里，让我忍不住有点好奇，为什么会发生这种现象呢？于是强忍着困意翻了翻源码，硬磕了一下SpringBoot加载yml配置文件的过程，终于让我看出了点门道，下面我们一点一点细说！

因为配置文件的加载会涉及到一些SpringBoot启动的相关知识，所以如果对SpringBoot启动不是很熟悉的同学，可以先提前先看一下Hydra在古早时期写过一篇Spring Boot零配置启动原理预热一下。下面的介绍中，只会摘出一些对加载和解析配置文件比较重要的步骤进行分析，对其他无关部分进行了省略。

加载监听器

当我们启动一个SpringBoot程序，在执行SpringApplication.run()的时候，首先在初始化SpringApplication的过程中，加载了11个实现了ApplicationListener接口的拦截器。

这11个自动加载的ApplicationListener，是在spring.factories中定义并通过SPI扩展被加载的：

这里列出的10个是在spring-boot中加载的，还有剩余的1个是在spring-boot-autoconfigure中加载的。其中最关键的就是ConfigFileApplicationListener，它和后面要讲到的配置文件的加载相关。

执行run方法

在实例化完成SpringApplication后，会接着往下执行它的run方法。

可以看到，这里通过getRunListeners方法获取的SpringApplicationRunListeners中，EventPublishingRunListener绑定了我们前面加载的11个监听器。但是在执行starting方法时，根据类型进行了过滤，最终实际只执行了4个监听器的onApplicationEvent方法，并没有我们希望看到的ConfigFileApplicationListener，让我们接着往下看。

当run方法执行到prepareEnvironment时，会创建一个ApplicationEnvironmentPreparedEvent类型的事件，并广播出去。这时所有的监听器中，有7个会监听到这个事件，之后会分别调用它们的onApplicationEvent方法，其中就有了我们心心念念的ConfigFileApplicationListener，接下来让我们看看它的onApplicationEvent方法中做了什么。

在方法的调用过程中，会加载系统自己的4个后置处理器以及ConfigFileApplicationListener自身，一共5个后置处理器，并执行他们的postProcessEnvironment方法，其他4个对我们不重要可以略过，最终比较关键的步骤是创建Loader实例并调用它的load方法。

加载配置文件

这里的Loader是ConfigFileApplicationListener的一个内部类，看一下Loader对象实例化的过程：

在实例化Loader对象的过程中，再次通过SPI扩展的方式加载了两个属性文件加载器，其中的YamlPropertySourceLoader就和后面的yml文件的加载、解析密切关联，而另一个PropertiesPropertySourceLoader则负责properties文件的加载。创建完Loader实例后，接下来会调用它的load方法。

在load方法中，会通过嵌套循环方式遍历默认配置文件存放路径，再加上默认的配置文件名称、以及不同配置文件加载器对应解析的后缀名，最终找到我们的yml配置文件。接下来，开始执行loadForFileExtension方法。

在loadForFileExtension方法中，首先将classpath:/application.yml加载为Resource文件，接下来准备正式开始，调用了之前创建好的YamlPropertySourceLoader对象的load方法。

封装Node

在load方法中，开始准备进行配置文件的解析与数据封装：

load方法中调用了OriginTrackedYmlLoader对象的load方法，从字面意思上我们也可以理解，它的用途是原始追踪yml的加载器。中间一连串的方法调用可以忽略，直接看最后也是最重要的是一步，调用OriginTrackingConstructor对象的getData接口，来解析yml并封装成对象。

在解析yml的过程中实际使用了Composer构建器来生成节点，在它的getNode方法中，通过解析器事件来创建节点。通常来说，它会将yml中的一组数据封装成一个MappingNode节点，它的内部实际上是一个NodeTuple组成的List，NodeTuple和Map的结构类似，由一对对应的keyNode和valueNode构成，结构如下：

好了，让我们再回到上面的那张方法调用流程图，它是根据文章开头的yml文件中实际内容内容绘制的，如果内容不同调用流程会发生改变，大家只需要明白这个原理，下面我们具体分析。

首先，创建一个MappingNode节点，并将switch封装成keyNode，然后再创建一个MappingNode，作为外层MappingNode的valueNode，同时存储它下面的4组属性，这也是为什么上面会出现4次循环的原因。如果有点困惑也没关系，看一下下面的这张图，就能一目了然了解它的结构。

在上图中，又引入了一种新的ScalarNode节点，它的用途也比较简单，简单String类型的字符串用它来封装成节点就可以了。到这里，yml中的数据被解析完成并完成了初步的封装，可能眼尖的小伙伴要问了，上面这张图中为什么在ScalarNode中，除了value还有一个tag属性，这个属性是干什么的呢？

在介绍它的作用前，先说一下它是怎么被确定的。这一块的逻辑比较复杂，大家可以翻一下ScannerImpl类fetchMoreTokens方法的源码，这个方法会根据yml中每一个key或value是以什么开头，来决定以什么方式进行解析，其中就包括了{、[、'、%、?等特殊符号的情况。以解析不带任何特殊字符的字符串为例，简要的流程如下，省略了一些不重要部分：

在这张图的中间步骤中，创建了两个比较重要的对象ScalarToken和ScalarEvent，其中都有一个为true的plain属性，可以理解为这个属性是否需要解释，是后面获取Resolver的关键属性之一。

上图中的yamlImplicitResolvers其实是一个提前缓存好的HashMap，已经提前存储好了一些Char类型字符与ResolverTuple的对应关系：

当解析到属性on时，取出首字母o对应的ResolverTuple，其中的tag就是tag:yaml.org.2002:bool。当然了，这里也不是简单的取出就完事了，后续还会对属性进行正则表达式的匹配，看与regexp中的值是否能对的上，检查无误时才会返回这个tag。

到这里，我们就解释清楚了ScalarNode中tag属性究竟是怎么获取到的了，之后方法调用层层返回，返回到OriginTrackingConstructor父类BaseConstructor的getData方法中。接下来，继续执行constructDocument方法，完成对yml文档的解析。

调用构造器

在constructDocument中，有两步比较重要，第一步是推断当前节点应该使用哪种类型的构造器，第二步是使用获得的构造器来重新对Node节点中的value进行赋值，简易流程如下，省去了循环遍历的部分：

推断构造器种类的过程也很简单，在父类BaseConstructor中，缓存了一个HashMap，存放了节点的tag类型到对应构造器的映射关系。在getConstructor方法中，就使用之前节点中存入的tag属性来获得具体要使用的构造器：

当tag为bool类型时，会找到SafeConstruct中的内部类 ConstructYamlBool作为构造器，并调用它的construct方法实例化一个对象，来作为ScalarNode节点的value的值：

在construct方法中，取到的val就是之前的on，至于下面的这个BOOL_VALUES，也是提前初始化好的一个HashMap，里面提前存放了一些对应的映射关系，key是下面列出的这些关键字，value则是Boolean类型的true或false：

到这里，yml中的属性解析流程就基本完成了，我们也明白了为什么yml中的on会被转化为true的原理了。至于最后，Boolean类型的true或false是如何被转化为的字符串，就是@Value注解去实现的了。

思考

那么，下一个问题来了，既然yml文件解析中会做这样的特殊处理，那么如果换成properties配置文件怎么样呢？

sw.turnOn=on

sw.turnOff=off

执行一下程序，看一下结果：

可以看到，使用properties配置文件能够正常读取结果，看来是在解析的过程中没有做特殊处理，至于解析的过程，有兴趣的小伙伴可以自己去阅读一下源码。

那么，今天就写到这里，我们下期见。

本文旨在探究Java中的for循环和foreach循环的性能差异，并帮助读者更好地选择适合自身需求的循环方式

前言

在Java编程中，循环结构是程序员常用的控制流程，而for循环和foreach循环是其中比较常见的两种形式。关于它们哪一个更快的讨论一直存在。本文旨在探究Java中的for循环和foreach循环的性能差异，并帮助读者更好地选择适合自身需求的循环方式。通过详细比较它们的遍历效率、数据结构适用性和编译器优化等因素，我们将为大家揭示它们的差异和适用场景，以便您能够做出更明智的编程决策。

for循环与foreach循环的比较

小编认为for和foreach 之间唯一的实际区别是，对于可索引对象，我们无权访问索引。

for(int i = 0; i < mylist.length; i++) {

 if(i < 5) {

 //do something

 } else {

 //do other stuff

 }

}

但是，我们可以使用 foreach 创建一个单独的索引 int 变量。例如：

int index = -1;

for(int myint : mylist) {

 index++;

 if(index < 5) {

 //do something

 } else {

 //do other stuff

 }

}

现在写一个简单的类，其中有 foreachTest() 方法，该方法使用 forEach 迭代列表。

import java.util.List;



public class ForEachTest {

        List intList;

        

    public void foreachTest(){

        for(Integer i : intList){



        }

    }

}

编译这个类时，编译器会在内部将这段代码转换为迭代器实现。小编通过执行 javap -verbose IterateListTest 反编译代码。

public void foreachTest();

    descriptor: ()V

    flags: ACC_PUBLIC

    Code:

      stack=1, locals=3, args_size=1

         0: aload_0

         1: getfield      #19                 // Field intList:Ljava/util/List;

         4: invokeinterface #21,  1           // InterfaceMethod java/util/List.iterator:()Ljava/util/Iterator;

         9: astore_2

        10: goto          23

        13: aload_2

        14: invokeinterface #27,  1           // InterfaceMethod java/util/Iterator.next:()Ljava/lang/Object;

        19: checkcast     #33                 // class java/lang/Integer

        22: astore_1

        23: aload_2

        24: invokeinterface #35,  1           // InterfaceMethod java/util/Iterator.hasNext:()Z

        29: ifne          13

        32: return

      LineNumberTable:

        line 9: 0

        line 12: 32

      LocalVariableTable:

        Start  Length  Slot  Name   Signature

            0      33     0  this   Lcom/greekykhs/springboot/ForEachTest;

      StackMapTable: number_of_entries = 2

        frame_type = 255 /* full_frame */

          offset_delta = 13

          locals = [ class com/greekykhs/springboot/ForEachTest, top, class java/util/Iterator ]

          stack = []

        frame_type = 9 /* same */

从上面的字节码我们可以看到:

a). getfield命令用于获取变量整数。

b).调用List.iterator获取迭代器实例

c).调用iterator.hasNext，如果返回true，则调用iterator.next方法。

下边来做一下性能测试。在 IterateListTest 的主要方法中，创建了一个列表并使用 for 和 forEach 循环对其进行迭代。

import java.util.ArrayList;

import java.util.List;



public class IterateListTest {

        public static void main(String[] args) {

                List mylist = new ArrayList<>();

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

            mylist.add(i);

        }



        long forLoopStartTime = System.currentTimeMillis();

        for (int i = 0; i < mylist.size(); i++) {mylist.get(i);}



        long forLoopTraversalCost =System.currentTimeMillis()-forLoopStartTime;

        System.out.println("for loop traversal cost for ArrayList= "+ forLoopTraversalCost);



        long forEachStartTime = System.currentTimeMillis();

        for (Integer integer : mylist) {}



        long forEachTraversalCost =System.currentTimeMillis()-forEachStartTime;

        System.out.println("foreach traversal cost for ArrayList= "+ forEachTraversalCost);

        }

}

结果如下：

总结

观察结果显示，for循环的性能优于for-each循环。然后再使用LinkedList比较它们的性能差异。对于 LinkedList 来说，for-each循环展现出更好的性能。ArrayList内部使用连续存储的数组，因此数据的检索时间复杂度为 O(1)，通过索引可以直接访问数据。而 LinkedList 使用双向链表结构，当我们使用 for 循环进行遍历时，每次都需要从链表头节点开始，导致时间复杂度达到了 O(n*n)，因此在这种情况下，for-each 循环更适合操作 LinkedList。

背景经历

在我提出离职之前， 公司断断续续欠薪一年多的时间， 欠薪时长4.5个月（时间这里还搞了个小乌龙， 后面说下）。

2023年5月底，我向领导提出辞职，离职时间确定为2023.6.6日。

虽然公司欠薪， 但当时的我依旧心存幻想， 想着可以跟公司好聚好散， 毕竟在公司待三年多了&同事关系和谐&如果仲裁的话,了解到按我的情况会有n的补偿金（ 以为公司不会冒仲裁风险(公司处于融资阶段)，毕竟仲裁的话我这边赢下的概率比较大），期间我积极进行离职交接，又自以为是的以为公司会在我最后走的时候跟我约定好一个薪资发放的时间把欠我的工资补全(为啥说要约定好呢？ 因为公司欠薪，薪资发放已经不是正常时间了，还有， 各位，记得不要自以为是！)。

时间转眼到了6.6号，期间人事在这之前一直没找我聊，我也没有找人事聊（人事是知道我提离职的, 上面说到我自以为公司这边会跟我约定好薪资发放时间, 这里为啥会有这种意识呢? 因为之前离职的同事工资都拿到了），这最后一天，我去找人事，人事那边拿出相关的材料让我填写离职申请， 我这边挨个找人签字，但是公司老总正好找各个部门领导开会，我这边还卡着最后一位签字，一时半会签不上, 然后我去找人事了。

我问：我这边工资什么时候能给我？

人事回复：我这边也不确定，需要请示下领导。

我问：领导那边回复要多久？

人事回复： 不确定， 领导现在还在开会，等开会完我确认下。

。。。

我回工位了。

等过了一会， 我看开会的人回来了，我又去找人事问。

我问： 能确定了吗？

人事回复：刚刚我去找领导了，领导不在，估计得明天了。（Fuck!）

然后我就去公司董事长办公室，想自己去聊，结果确实不在。

然后我对人事说：那明天你这边给我一个回复，离职材料我填好了，还差XXX签字,现在又去开会了, 找不到他。

下班时间到了，我走了。

因为没有敲定工资发放日期，有种预感公司准备使用拖字诀对付我了，所以我把一些仲裁材料整理了下，这个具体有什么材料后面再说一下。

第二天一早，我给人事和公司老板发消息，如下：

人事下午给我的回复：

而老板呢? 没理我， 么得回复。人事也是我中间又给发了次消息才回复的我。

到这呢， 我就明白了， 公司确实准备拖我了，可能是资金紧张， 也可能是看人下菜，总之，去仲裁吧。

一个简单的时间线

6.6号离职走人。

6.7号与HR和老板交涉，并开始做仲裁准备。

6.8号准备好仲裁材料

6.9号去仲裁

6.26号调解员开始调解

期间给了一些调解方案, 与调解员, HR交涉

7.19号我与公司均不接受互相给的方案, 我这边坚持开庭, 调解员让我联系仲裁委去那边办理开庭手续, 提交相关仲裁资料， 等待开庭。

8.7号调解员联系我, 说公司因为仲裁案频发， 被上级领导要求整改， 然后公司接受我之前一个降级的调解方案, 赔偿金额可以, 但给我的支付时间我没法接受, 我这边坚持当庭支付。

8.8号调解员做出保证： 可以当庭支付， 且如果公司那边没给当庭支付，那就不支付不给我结案， 我依旧可以继续把流程走下去，不必重新排队。

8.10号接受调解并签字， 公司当庭支付，至此我的仲裁到此结束。

仲裁资料准备

这是我的申请诉求和相关证据材料

1. 拖欠薪资

• 劳动合同
• 我的银行流水

2. 加班费用

• 五一期间的打卡记录
• 加班聊天记录

3. (2021年的)年终奖金(应于2022.5月份左右发, 但一直拖欠)

• 与人事沟通的会发年终奖的聊天记录
• 上一年的工资流水

4. 经济补偿金

• n

5. 误工费

这个其实是我想多看能否多拿一点, 因为在劳动仲裁过程中, 我跑了好几趟,都是请假去的, 但是好像不支持, 最后线下提交的时候没填上它

6. 其他

• 从国家企业信用信息公示系统下载的企业报告(这个可以下载, 但是没用到, 去仲裁委提交材料的时候需要从仲裁委的企业信用打印机里打印, 用不到这个 )
• 仲裁申请书, 这个是在劳动仲裁的官方小程序劳动争议调解智慧服务平台上填写并下载的, 现在基本都是线上填写了, 但是提交到仲裁委的时候需要下载下来打印

仲裁仲裁!

6.9号去的仲裁委, 上面的仲裁资料是我最终版的, 去仲裁委之前我只是在网上查的资料, 到了之后让扫个小程序码, 线上提交申请

之后会有调解员联系你(这个时间我等了大概半个月, 6.26才加上调解员的微信), 之后调解员开始调解, 调解员给出公司的方案: 只有正常工资, 加班费和赔偿别想了。这个方案我这边当然不同意， 之后就是各种PK, 我, 公司人事, 调解员三方互相PK, 在两个月之后, 8.11号, 我还是调解了, 拿到了差强人意的money,算是庭前调解, 最终还是没走上开庭。期间我算了下， 两个多月的时间， 大概请了3,4天假。

关于对公司拖欠工资时应对的方案

我想了很多方案， 有应用的也有没用上的， 大家可以看一下或者补充一下：

• 劳动仲裁： 保存好证据，要有打持久战的准备， 我最后实践有效的就是这个渠道。
• 公积金中心举报公司未按实际工资给所有员工缴纳公积金： 网上说只要公司没按你的实际工资缴纳公积金， 你就可以去投诉， 尽管这可能是伤敌一千，自损八百的渠道， 但当时我依旧去了。我准备好银行流水和劳动合同， 结果去了之后工作人员告诉我要等仲裁结果， 仲裁结果赢了之后才可以受理。当时还是冒雨去的，老远了， 呵呵呵。
• 劳动大队投诉： 这个渠道呢， 如果只是想要要回工资不需要补偿， 可以先走这个渠道， 记住这个先， 因为你打电话投诉公司的时候， 工作人员会问： 是否已经在仲裁委那边提交申请？ 如果回答提交了劳动仲裁申请，那这个机构就不会管了。 说辞： 已经被仲裁委受理， 等待仲裁就好了。综合： 这个机构其实在要回工资的时候可能比较给力， 可以先给它打电话投诉公司， 让它给公司施压, 然后再去仲裁。
• 个人所得税投诉： 这个渠道就是比较伤财务， 如果财务话语权比较大的话， 没准就能追回工资，因为财务不想折腾，但我这个公司， 财务没啥话语权，所以财务按税务局的要求折腾了一两天， 然后把我的个人所得税没发工资的那几个月给更新成功0了，然后会在收到工资后再给新的报税。
• 掌上12333 国务院客户端小程序 =>更多 => 投诉 => 全国根治欠薪线索反映平台: 本来我以为这个渠道会比较强势， 但非常可惜， 啥用没有, 可能我傻的只写了自己的欠薪, 没写其他同事的, 数额较小, 没引起注意, 等到我仲裁都结束了好像半个月还是一个月还是更久? 才给我来了个电话。

抖音上看到有个能快速结束仲裁, 然后去法院起诉进行一审的方法: 在申请书上写: 申请枪毙无良老板! 然后这个会被仲裁委驳回, 然后请求仲裁委出具不予受理通知, 拿着这个就可以去起诉公司。这个的话大家纯粹当爽文看吧， 应该不太具有实施成功的可能性。

一点点走心之谈

• 如果公司刚开始拖欠一个月两个月， 别想了， 赶紧去劳动仲裁， 只要申请的诉求中每个单项金额不超过当地月平均工资标准的12个月的金额， 那就可以触发一裁终审， 公司无权再上诉，所以这个只适用于拖欠前期和金额较小时。
• 如果公司拖欠工资， 而你决定去仲裁了，那就别犹犹豫豫的了， 赶紧给公司发一个被动解除劳动通知书, 走邮政和单位邮箱, 这样可以申请到n的劳动补偿, 而我就是因为没有这一步, 没有听取辣条(热心群友)的建议, 导致这条申请诉求被仲裁委支持的概率比较小, 所以选择了庭前调解。诸君引以为鉴。
• 坚持理性，不要感性。
• 说一下最开始说的关于欠薪时长的乌龙, 这个问题其实就是, 我, 搞错了公司拖欠我薪资的时长!怎么说呢? 就是公司发放薪资是在本月的15-20号左右发放上个月的薪资, 也就是说2023.6.6号离职, 我这边的工资应该6.20号发放的5月份工资和7月份发放的6.1-6.6的工资, 而我当时算的是按每月收入算的, 也就是5.20号收到一个月的工资, 6.20号我这边收到的应该是只有6天的薪资, 我不知道当时我为啥这样想...,最后是怎么发现的呢? 是在调解后期人事给的调解方案里发现我少算了一个月的薪资。
• 关于拖欠薪资的日期。所谓百足之虫死而不僵, 有的公司拖欠薪资不是拖欠后就一直不给了, 而是断断续续的给, 拖欠一个月, 给你半个月, 拖欠一个月, 给你一个月, 继续拖, 继续给点, 我前公司就是这样, 断断续续给点, 前前后后欠一年多的时间了总共欠了4.5个月。现在想想， 我是怎么撑下来的？！

相关资源， 以了解仲裁

• 我有买一本书, 《劳动争议仲裁诉讼实战宝典》，但这本书我还没看完我就结束仲裁了， 但， 它确实不错， 至少可以让对仲裁不太了解的人有个大概的了解。
• 现在有很多的AI应用， 大家可以尝试一下，这个我也不太了解， 大家可以补充一下。
• 抖音或b站看劳动仲裁相关的视频， 我有看的是叫晨辉律师。

致谢辣条

非常感谢神奇的程序员@大白群里的不正经网友->辣条, 之前群里聊的时候在我说了公司拖欠工资后他就让我走被动离职这条路, 但当时他给我的印象是不太正经的精神小伙, 所以我没听他的, 就正常离职, 自己写了离职申请, 这是让我后来在仲裁期间非常后悔的事。 仲裁的周期比较长， 我也比较迷茫， 他给了我很多帮助, 期间我很多次都想着放弃吧, 接受吧，能拿回基本工资就不错了, 是辣条帮我坚定了“道心”，在此， 真的非常感谢辣条佬。

2023， 拜拜~

写下这篇文章， 给2023画一个完美的句号。

2023.12.31

作者：掘金沸点顶流
来源：juejin.cn/post/7318446251631493171

前言

首先声明，没有标题党哈！

以下我知道的国内知名react组件库全部都有这个bug，你们现在都能去复现，一个提pr的好机会就让给你们了，哈哈！复现组件库：

• 阿里系：ant design, fusion design，


• 字节系：arco design


• 腾讯：tdesign

本来字节还有一个semi design，结果我发现它没有Affix组件，也就是固钉组件，让他躲过一劫，他有这个组件我也觉得肯定会复现相同的bug。

Affix组件是什么，以及bug复现

Affix组件（固钉组件）能将页面元素钉在可视范围。如下图：

这个button组件，会在距离顶部80px的时候会固定在屏幕上（position: fixed）,如下图：

如何复现bug

你在这个button元素任意父元素上，加上以下任意style属性

• will-change: transform;


• will-change: filter;


• will-change: perspective;


• transform 不为none


• perspective不为none


• 非safari浏览器，filter属性不为none


• 非safari浏览器，backdrop-filter属性不为none


• 等等

都可以让这个固定组件失效，就是原本是距离顶部80px固定。

我的组件库没有这个bug，哈哈

mx-design

目前组件不是很多，还在努力迭代中，不知道凭借没有这个bug的小小优点，能不能从你手里取一个star，哈哈

bug原因

affix组件无非都是用了fixed布局，我是如何发现这个bug的呢，我的组件库动画系统用的framer-motion，我本来是想在react-router切换路由的时候整点动画的，动画效果就是给body元素加入例如transform的变化。

然后我再看我的固钉组件怎么失效了。。。后来仔细一想，才发现想起来fixed布局的一个坑就是，大家都以为fixed布局相对的父元素是window窗口，其实是错误的！

真正的规则如下（以下说的包含块就是fixed布局的定位父元素）：

评论区有很多同学居然觉的这不是bug？

其实这个问题本质是定位错误，在这些组件库里，同样使用到定位的有，例如Tooltip，Select,Popuver等等，明显这些组件跟写Affix组件的不是一个人，其他组件这个bug是没有的，只有Affix组件出现了，所以你说这是不是bug。

还有，如果因为引用了Affix组件，这个固定元素的任一父元素都不能用以上的css属性，我作为使用者，我用了动画库，动画库使用transfrom做Gpu加速，你说不让我用了，因为引起Affix组件bug，我心里想凭啥啊，明明加两行代码就解决了。

最后，只要做过定位组件的同学，其复杂度在前端算是比较高的了，这也是为什么有些组件库直接用第三方定位组件库（floating-ui，@popper-js），而不是自己去实现，因为自己实现很容易出bug，这也是例如以上组件库Tooltip为什么能适应很多边界case而不出bug。

所以你想想，这仅仅是定位组件遇到的一个很小的问题，你这个都解决不了，什么都怪css，你觉得用户会这么想吗，一有css，你所有跟定位相关的组件全部都不能用了，你们还讲理不？

总之一句话，你不能把定位组件的复杂度高怪用户没好好用，建议去看看floating-ui的源码，或者之前我写的@popper-js定位组件的简要逻辑梳理，你就会意识到定位组件不简单。边界case多如牛毛。

解决方案

• 首先是找出要固定元素的定位元素（定位元素的判断逻辑上面写了），然后如果定位元素是window，那么跟目前所有组件库的逻辑一样，所以没有bug，如果不是window，就要求出相对定位父元素距离可视窗口顶部的top的值


• 然后在我们原本要定位的值，比如距离顶部80px的时候固定，此时80px再减去上面说的定位父元素距离可视窗口顶部的top的值，就没有bug了

具体代码如下：

• offsetParent固定元素的定位上下文，也就是相对定位的父元素


• fixedTop是我们要触发固定的值，比如距离可视窗口顶部80px就固定

affixDom.style.top = `${isHTMLElement(offsetParent) ? (fixedTop as number) - offsetParent.getBoundingClientRect().top : fixedTop}px`;

如何找出offsetParent，也就是定位上下文

export function getContainingBlock(element: Element) {

  let currentNode = element.parentElement;

  while (currentNode) {

    if (isContainingBlock(currentNode)) return currentNode;

    currentNode = currentNode.parentElement;

  }

  return null;

}

工具方法，isContainingBlock如下：

import { isSafari } from './isSafari';



export function isContainingBlock(element: Element): boolean {

  const safari = isSafari();

  const css = getComputedStyle(element);



  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block

  return (

    css.transform !== 'none' ||

    css.perspective !== 'none' ||

    (css.containerType ? css.containerType !== 'normal' : false) ||

    (!safari && (css.backdropFilter ? css.backdropFilter !== 'none' : false)) ||

    (!safari && (css.filter ? css.filter !== 'none' : false)) ||

    ['transform', 'perspective', 'filter'].some((value) => (css.willChange || '').includes(value)) ||

    ['paint', 'layout', 'strict', 'content'].some((value) => (css.contain || '').includes(value))

  );

}

本文完毕，求关注，求star!!!对于react组件库感兴趣的小伙伴，欢迎加群一起交流哦！

• [Arrays.asList（）方法介绍]


• [Arrays.asList（）方法的坑]


• [解决Arrays.asList（）方法的坑]


• [总结]


• [Arrays.asList（）方法介绍]


• [Arrays.asList（）方法的坑]


• [解决Arrays.asList（）方法的坑]


• [总结]

在Java中，我们经常需要将数组转换为List来方便地进行操作。Arrays.asList()方法是一种常见的方式，但是它存在一个不太常见但需要注意的坑。

本文将深入探讨Arrays.asList()的使用，揭示其中的陷阱，并提供解决方案。

[Arrays.asList（）方法介绍]

Arrays.asList()方法是将数组转换为List的方法，它返回一个List对象，但这个List对象并不是java.util.ArrayList对象，而是Arrays内部的ArrayList对象。

Arrays.ArrayList类继承自AbstractList，实现了List接口。它重写了add()、remove()等修改List结构的方法，并将它们直接抛出UnsupportedOperationException异常，从而禁止了对List结构的修改。

具体来说，Arrays.asList()方法返回的是Arrays类中的一个私有静态内部类ArrayList，它继承自AbstractList类，实现了List接口。

Arrays.asList()方法的使用非常简单，只需要将一个数组作为参数传递给该方法即可。例如：

String[] arr = new String[]{"a", "b", "c"};

List<String> list = Arrays.asList(arr);

基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 用户小程序，支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能

• 项目地址：github.com/YunaiV/ruoy…


• 视频教程：doc.iocoder.cn/video/

[Arrays.asList（）方法的坑]

尽管Arrays.asList()方法很方便，但也存在一些坑，其中最常见的一个是：在使用Arrays.asList()方法时，如果对返回的List对象进行修改（例如增加、删除元素），将会抛出"UnsupportedOperationException"异常。

为什么会出现这个异常呢？这是因为Arrays.asList()方法返回的List对象，是一个固定大小的List，不能进行结构上的修改，否则会抛出异常。

下面的代码演示了这个问题：

String[] arr = new String[]{"a", "b", "c"};

List<String> list = Arrays.asList(arr);

list.add("d"); // 抛出 UnsupportedOperationException 异常

上述代码中，我们尝试向List对象中添加一个新的元素"d"，结果会抛出"UnsupportedOperationException"异常。

基于 Spring Cloud Alibaba + Gateway + Nacos + RocketMQ + Vue & Element 实现的后台管理系统 + 用户小程序，支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能

• 项目地址：github.com/YunaiV/yuda…


• 视频教程：doc.iocoder.cn/video/

[解决Arrays.asList（）方法的坑]

要解决Arrays.asList()方法的坑，我们需要将返回的List对象转换为一个可修改的List对象。有几种方法可以实现这个目标：

[方法一：使用java.util.ArrayList类]

我们可以使用java.util.ArrayList类，将Arrays.asList()方法返回的List对象转换为一个java.util.ArrayList对象，示例如下：

String[] arr = new String[]{"a", "b", "c"};

List<String> list = new ArrayList<>(Arrays.asList(arr));

list.add("d"); // 正常运行

上述代码中，我们首先使用Arrays.asList()方法将一个数组转换为一个List对象，然后使用ArrayList的构造方法，将这个List对象转换为一个java.util.ArrayList对象，最后可以向这个ArrayList对象中添加元素。

[方法二：使用Collections类]

我们也可以使用Collections类提供的静态方法，将Arrays.asList()方法返回的List对象转换为一个可修改的List对象，示例如下：

String[] arr = new String[]{"a", "b", "c"};

List<String> list = new ArrayList<>(Arrays.asList(arr));

Collections.addAll(list, "d"); // 正常运行

通过Collections.addAll()方法，我们可以将数组中的元素逐个添加到一个新的ArrayList对象中，从而实现了可修改性。

[总结]

在使用Arrays.asList()方法时，需要注意返回的List对象是一个固定大小的List，不支持结构上的修改操作。为了避免这个陷阱，我们可以使用java.util.ArrayList或Collections类提供的方法将返回的List对象转换为可修改的List。通过了解这个陷阱并采取相应的解决方案，我们可以安全地将数组转换为List，并避免潜在的异常情况。

不要让Arrays.asList()的陷阱坑了你的代码！

在Java中，我们经常需要将数组转换为List来方便地进行操作。Arrays.asList()方法是一种常见的方式，但是它存在一个不太常见但需要注意的坑。本文将深入探讨Arrays.asList()的使用，揭示其中的陷阱，并提供解决方案。

[Arrays.asList（）方法介绍]

Arrays.asList()方法是将数组转换为List的方法，它返回一个List对象，但这个List对象并不是java.util.ArrayList对象，而是Arrays内部的ArrayList对象。

Arrays.ArrayList类继承自AbstractList，实现了List接口。它重写了add()、remove()等修改List结构的方法，并将它们直接抛出UnsupportedOperationException异常，从而禁止了对List结构的修改。

具体来说，Arrays.asList()方法返回的是Arrays类中的一个私有静态内部类ArrayList，它继承自AbstractList类，实现了List接口。

Arrays.asList() 方法的使用非常简单，只需要将一个数组作为参数传递给该方法即可。例如：

String[] arr = new String[]{"a", "b", "c"};

List<String> list = Arrays.asList(arr);

[Arrays.asList（）方法的坑]

尽管Arrays.asList()方法很方便，但也存在一些坑，其中最常见的一个是：在使用Arrays.asList()方法时，如果对返回的List对象进行修改（例如增加、删除元素），将会抛出"UnsupportedOperationException"异常。

为什么会出现这个异常呢？这是因为Arrays.asList()方法返回的List对象，是一个固定大小的List，不能进行结构上的修改，否则会抛出异常。

下面的代码演示了这个问题：

String[] arr = new String[]{"a", "b", "c"};

List<String> list = Arrays.asList(arr);

list.add("d"); // 抛出 UnsupportedOperationException 异常

上述代码中，我们尝试向List对象中添加一个新的元素"d"，结果会抛出"UnsupportedOperationException"异常。

[解决Arrays.asList（）方法的坑]

要解决Arrays.asList()方法的坑，我们需要将返回的List对象转换为一个可修改的List对象。有几种方法可以实现这个目标：

[方法一：使用java.util.ArrayList类]

我们可以使用java.util.ArrayList类，将Arrays.asList()方法返回的List对象转换为一个java.util.ArrayList对象，示例如下：

String[] arr = new String[]{"a", "b", "c"};

List<String> list = new ArrayList<>(Arrays.asList(arr));

list.add("d"); // 正常运行

上述代码中，我们首先使用Arrays.asList()方法将一个数组转换为一个List对象，然后使用ArrayList的构造方法，将这个List对象转换为一个java.util.ArrayList对象，最后可以向这个ArrayList对象中添加元素。

[方法二：使用Collections类]

我们也可以使用Collections类提供的静态方法，将Arrays.asList()方法返回的List对象转换为一个可修改的List对象，示例如下：

String[] arr = new String[]{"a", "b", "c"};

List<String> list = new ArrayList<>(Arrays.asList(arr));

Collections.addAll(list, "d"); // 正常运行

通过Collections.addAll()方法，我们可以将数组中的元素逐个添加到一个新的ArrayList对象中，从而实现了可修改性。

[总结]

在使用Arrays.asList()方法时，需要注意返回的List对象是一个固定大小的List，不支持结构上的修改操作。为了避免这个陷阱，我们可以使用java.util.ArrayList或Collections类提供的方法将返回的List对象转换为可修改的List。通过了解这个陷阱并采取相应的解决方案，我们可以安全地将数组转换为List，并避免潜在的异常情况。

不要让Arrays.asList()的陷阱坑了你的代码！

前言

粒子动画经常用于大画幅的渲染效果，实际上难度并不高，但是在使用粒子动画时，必须要遵循的一些要素，主要是：

• 起点


• 矢量速度


• 符合运动学公式

在之前的文章中，如《烟花效果》和《粒子喷泉》是典型的粒子动画，起点之所以重要是因为其实位置决定粒子出现的位置，矢量速度则决定了快慢和方向，运动学公式属于粒子动画的一部分，当然不是物理性的，毕竟平面尺寸也就那么长，这里的物理学公式使得画面更加丝滑而无跳动感觉。

本篇将实现下面的效果

注意：gif图有些卡，实际上流畅很多

本篇效果实现

本篇效果是无数圆随机产生然后渐渐变大并外旋，另外也有雨滴，这里的雨滴相对简单一些。

首先定义粒子对象

定义粒子对象是非常重要的，绝大部分倾下粒子本身就是需要单独控制的，因为每个粒子的轨迹都是有所差别的。

定义圆圈粒子

private static class Circle {

    float x;

    float y;

    int color;



    float radius;



    Circle(float x, float y, float radius) {

        reset(x, y, radius);

    }



    private void reset(float x, float y, float radius) {

        this.x = x;

        this.y = y;

        this.radius = radius;

        this.color = Color.rgb((int) (Math.random() * 256), (int) (Math.random() * 256), (int) (Math.random() * 256));

    }

}

定义雨滴

private static class RainDrop {

    float x;

    float y;



    RainDrop(float x, float y) {

        this.x = x;

        this.y = y;

    }

}

定义粒子管理集合

private ArrayList mParticles;

private ArrayList mRainDrops;

private long mLastUpdateTime; //记录执行时间

生成粒子对象

• 生成雨滴是从顶部屏幕意外开始，而y = -50f值是雨滴的高度决定。


• 圆圈是随机产生，在中心位置圆圈内。

// 创建新的雨滴

if (mRainDrops.size() < 80) {

    int num = getWidth() / padding;

    double nth = num * Math.random() * padding;

    double x = nth + padding / 2f * Math.random();

    RainDrop drop = new RainDrop((float) x, -50f);

    mRainDrops.add(drop);

}



// 创建新的粒子

if (mParticles.size() < 100) {

    float x = (float) (getWidth() / 2f - radius + 2*radius * Math.random());

    float y = (float) (getHeight()/2f - radius + 2*radius * Math.random() );



    Circle particle = new Circle(x, y,5);

    mParticles.add(particle);

}

绘制雨滴

雨滴的绘制非常简单，调用相应的canvas方法即可

// 绘制雨滴

mPaint.setColor(Color.WHITE);

for (RainDrop drop : mRainDrops) {

    canvas.drawLine(drop.x, drop.y, drop.x, drop.y + 20, mPaint);

}



// 绘制粒子

for (Circle particle : mParticles) {

    mPaint.setColor(particle.color);

    canvas.drawCircle(particle.x, particle.y, particle.radius, mPaint);

}

更新粒子位置

雨滴的更新相对简单，但是圆圈的旋转是一个难点，一个重要的问题是如何旋转粒子的，其实有很多方法，其中最笨的方法是旋转Canvas坐标系，底层有很多矩阵计算，但是这个似乎使用Math.atan2(y,x)显然更加方便，我们只需要在当前角度加上偏移量就能旋转。

float angle = (float) Math.atan2(dy, dx) + deltaTime * 0.65f;

下面是完整的更新逻辑

// 更新雨滴位置

Iterator rainIterator = mRainDrops.iterator();

while (rainIterator.hasNext()) {

    RainDrop drop = rainIterator.next();

    if (drop.y > getHeight() + 50) {

        int num = getWidth() / padding;

        double nth = num * Math.random() * padding;

        double x = nth + padding * Math.random();



        drop.x = (float) (x);

        drop.y = -50;

    } else {

        drop.y += 20;

    }



}



// 更新粒子位置

long currentTime = System.currentTimeMillis();

float deltaTime = (currentTime - mLastUpdateTime) / 1000f;

mLastUpdateTime = currentTime;



float centerX = getWidth() / 2f;

float centerY = getHeight() / 2f;



Iterator iterator = mParticles.iterator();

while (iterator.hasNext()) {

    Circle particle = iterator.next();

    float dx = particle.x - centerX;

    float dy = particle.y - centerY;

    float distance = (float) Math.sqrt(dx * dx + dy * dy) + 4.5f;//  增加偏移

    float angle = (float) Math.atan2(dy, dx) + deltaTime * 0.5f;

    particle.radius += 1f;



    particle.x = centerX + (float) Math.cos(angle) * distance;

    particle.y = centerY + (float) Math.sin(angle) * distance;



    if (particle.radius > 10) {

        int maxRadius = 100;

        float fraction = (particle.radius - 10) / (maxRadius - 10);

        if (fraction >= 1) {

            fraction = 1;

        }

        particle.color = argb((int) (255 * (1 - fraction)), Color.red(particle.color), Color.green(particle.color), Color.blue(particle.color));

    }

    if (Color.alpha(particle.color) == 0) {



        float x = (float) (getWidth() / 2f - radius + 2* radius * Math.random());

        float y = (float) (getHeight()/2f - radius + 2*radius * Math.random() );

        particle.reset(x,y, 5);

    }



}

粒子刷新

其实刷新机制我们以前经常使用，调用postInvalidate即可，本身就是View自身的方法。

总结

本篇主要内容总体上就是这些，下面是全部代码逻辑

public class VortexView extends View {



    private Paint mPaint;

    private ArrayList mParticles;

    private ArrayList mRainDrops;

    private long mLastUpdateTime;

    private int padding = 20;



    public VortexView(Context context) {

        super(context);

        mPaint = new Paint();

        mParticles = new ArrayList<>();

        mRainDrops = new ArrayList<>();

        mLastUpdateTime = System.currentTimeMillis();

    }



    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        float radius = Math.min(getWidth(), getHeight()) / 3f;



        // 创建新的雨滴

        if (mRainDrops.size() < 80) {

            int num = getWidth() / padding;

            double nth = num * Math.random() * padding;

            double x = nth + padding / 2f * Math.random();

            RainDrop drop = new RainDrop((float) x, -50f);

            mRainDrops.add(drop);

        }



        // 创建新的粒子

        if (mParticles.size() < 100) {

            float x = (float) (getWidth() / 2f - radius + 2*radius * Math.random());

            float y = (float) (getHeight()/2f - radius + 2*radius * Math.random() );



            Circle particle = new Circle(x, y,5);

            mParticles.add(particle);

        }



        // 绘制雨滴

        mPaint.setColor(Color.WHITE);

        for (RainDrop drop : mRainDrops) {

            canvas.drawLine(drop.x, drop.y, drop.x, drop.y + 20, mPaint);

        }



        // 绘制粒子

        for (Circle particle : mParticles) {

            mPaint.setColor(particle.color);

            canvas.drawCircle(particle.x, particle.y, particle.radius, mPaint);

        }



        // 更新雨滴位置

        Iterator rainIterator = mRainDrops.iterator();

        while (rainIterator.hasNext()) {

            RainDrop drop = rainIterator.next();

            if (drop.y > getHeight() + 50) {

                int num = getWidth() / padding;

                double nth = num * Math.random() * padding;

                double x = nth + padding * Math.random();



                drop.x = (float) (x);

                drop.y = -50;

            } else {

                drop.y += 20;

            }



        }



        // 更新粒子位置

        long currentTime = System.currentTimeMillis();

        float deltaTime = (currentTime - mLastUpdateTime) / 1000f;

        mLastUpdateTime = currentTime;



        float centerX = getWidth() / 2f;

        float centerY = getHeight() / 2f;



        Iterator iterator = mParticles.iterator();

        while (iterator.hasNext()) {

            Circle particle = iterator.next();

            float dx = particle.x - centerX;

            float dy = particle.y - centerY;

            float distance = (float) Math.sqrt(dx * dx + dy * dy) + 3.5f;//  增加偏移

            float angle = (float) Math.atan2(dy, dx) + deltaTime * 0.65f;

            particle.radius += 1f;



            particle.x = centerX + (float) Math.cos(angle) * distance;

            particle.y = centerY + (float) Math.sin(angle) * distance;



            if (particle.radius > 10) {

                int maxRadius = 100;

                float fraction = (particle.radius - 10) / (maxRadius - 10);

                if (fraction >= 1) {

                    fraction = 1;

                }

                particle.color = argb((int) (255 * (1 - fraction)), Color.red(particle.color), Color.green(particle.color), Color.blue(particle.color));

            }

            if (Color.alpha(particle.color) == 0) {



                float x = (float) (getWidth() / 2f - radius + 2* radius * Math.random());

                float y = (float) (getHeight()/2f - radius + 2*radius * Math.random() );

                particle.reset(x,y, 5);

            }



        }



        Collections.sort(mParticles, comparator);



        // 使view无效从而重新绘制，实现动画效果

        invalidate();

    }

    Comparator comparator = new Comparator() {

        @Override

        public int compare(Circle left, Circle right) {

            return (int) (left.radius - right.radius);

        }

    };



    public static int argb(

            int alpha,

            int red,

            int green,

            int blue) {

        return (alpha << 24) | (red << 16) | (green << 8) | blue;

    }



    private static class Circle {

        float x;

        float y;

        int color;



        float radius;



        Circle(float x, float y, float radius) {

            reset(x, y, radius);

        }



        private void reset(float x, float y, float radius) {

            this.x = x;

            this.y = y;

            this.radius = radius;

            this.color = Color.rgb((int) (Math.random() * 256), (int) (Math.random() * 256), (int) (Math.random() * 256));

        }

    }



    private static class RainDrop {

        float x;

        float y;



        RainDrop(float x, float y) {

            this.x = x;

            this.y = y;

        }

    }

}

随着经济的下行以及移动互联网发展趋于成熟，对软件开发人员的需求大大减少，互联网行业所有的公司都在降本增效，合并通道，降薪裁员的新闻层出不穷。

但相比其他行业，互联网行业的从业者薪资还是比较可观的，但要求也比之前高了很多，需要大家掌握更多的技能和在某些技术领域深耕。

本文，我们就聊聊，掌握了哪些技能，能让前端同学，收入高且稳定。

端智能

首推的是端智能，很多行业大咖都认为，随着ChatGPT的横空出世，开启了第四次工业革命，很多产品都可以用大模型重做一遍。当前，我创业的方向，也和大模型有关。

当前的大模型主要还跑在云端，但云端的成本高，大模型的未来在端智能，这也是小米创始人雷军在今年一次发布会上提出的观点。

在2023年8月14日的雷军年度演讲中，雷军宣布小米已经在手机端跑通13亿参数的大模型，部分场景效果媲美云端。

目前，端上大模型的可行性和前景已经得到了业内的普遍认可，国内外各个科技大厂在大模型的端侧部署领域均开始布局，目前大量工程已在PC端、手机端实现大模型的离线部署，更有部分App登陆应用商店，只需下载即可畅通无阻地对话。

我们相信，在不久的将来，端上大模型推理将会成为智能应用的重要组成部分，为用户带来更加便捷、智能的体验。

我在美团从零研发了web端智能推理引擎，当时立项时，就给老板画饼，美团每天的几百亿推理调用，如果有一半用端智能替代的话，每年能为公司节省上亿元。

要想掌握端智能，需要学习深度学习的基本知识，还要掌握图形学和C++编程，通过webgl或webassembly 技术实现在Web端执行深度学习算法。

图形学

前面提到的端智能，只是涉及到了图形学中的webgl计算，但图形学的未来在元宇宙，通过3D渲染，实现VR、AR、XR等各种R。

计算机图形学是一门快速发展的领域，涵盖了三维建模、渲染、动画、虚拟现实等众多技术和应用。在电影、广告、游戏等领域中，计算机图形学的应用已经非常广泛。

熟练使用threejs开发各种3D应用，只能算是入门。真正的图形学高手，不仅可以架构类似3D家装软件的大型应用，而且能掌握渲染管线的底层原理，熟练掌握各种模型格式和解决各种软件，进行模型转换遇到的各种兼容问题。

随着计算机硬件和算法的不断进步，计算机图形学正迎来新的发展趋势。

首先是实时渲染与逼真度提升

• 实时渲染技术：随着游戏和虚拟现实的兴起，对实时渲染的需求越来越高。计算机图形学将继续致力于研发更高效的实时渲染算法和硬件加速技术，以实现更逼真、流畅的视觉效果。


• 光线追踪与全局照明：传统的实时渲染技术在光照模拟方面存在挑战。计算机图形学将借助光线追踪等技术，实现更精确的全局照明效果，提升场景的真实感和细节表现。

其次是虚拟与增强现实的融合

• 混合现实技术：计算机图形学将与传感器技术、机器视觉等相结合，推动虚拟现实与增强现实的融合发展。通过实时感知和交互，用户可以在真实世界中与虚拟对象进行互动，创造更沉浸式的体验。


• 空间感知与虚拟对象定位：计算机图形学将致力于解决空间感知和虚拟对象定位的挑战。利用深度学习、摄像头阵列等技术，实现高精度的空间感知和虚实融合，为虚拟与增强现实应用带来更自然、精确的交互方式。

再次是计算机图形学与人工智能的融合

• 生成对抗网络（GAN）在图形生成中的应用：GAN等人工智能技术为计算机图形学带来了新的创作手段。通过训练模型生成逼真的图像和场景，计算机图形学能够更便捷地创建大量内容，并提供个性化的用户体验。


• 计算机图形学驱动的虚拟人物与角色生成：结合计算机图形学和人工智能技术，研究人员正在努力开发高度逼真的虚拟人物和角色生成方法。这将应用于游戏、影视等领域，带来更具情感表达和交互性的虚拟角色。

最后是可视化分析与科学研究。

• 一是大数据可视化：随着大数据时代的到来，计算机图形学在可视化分析方面扮演着关键角色。通过创新的可视化方法和交互技术，研究人员能够更深入地理解和分析庞大而复杂的数据集，揭示潜在的模式和趋势。


• 二是科学数据可视化：计算机图形学在科学研究中的应用也日益重要。通过将科学数据转化为可视化形式，研究人员能够更直观地理解复杂的数据模式和关系，加快对科学问题的洞察和发现。这种可视化分析有助于领域如天文学、生物学、气象学等的研究进展。

工程提效

其实，过去三年我在美团的工作，至少有一半的精力是做和工程提效相关的事情。当然，也做了降本的事情，从零搭建外包团队。

就像我之前总结的文章：我在美团三年的前端工程化实践回顾 中提到那样，前端工程提效，一般会按照工具化、标准化、平台化和体系化进行演进。

相比前面的端智能和图形学，除了建设低代码平台和WebIDE有点技术难度，其他更多需要的是沟通、整合资源的能力，既要有很强的项目管理能力，又要人产品思维。

前两个方向做好了我们一般称为技术专家，而工程提效则更偏管理者，未来可以成为高管或自己创业。

总结

端智能和图形学，我在美团都尝试过进行深耕，但自己性格外向，很难坐得住。工程提效做得也一般，主要是因为需要换城市而换了部门，没有机缘继续推进，在美团很难往上走，所以只能尝试自己创业。

当前我创业的公司，也需要用到很多端智能的技术，比如我们使用yolov8实现了在web端进行智能抠图(后面计划使用segment anything大模型实现)；也需要用到很多图形学的技能，比如开发3D美术馆为艺培机构招生引流，通过3D展示火箭、太阳系、空间站等，提升教学效果。

未来，我们需要招聘很多端智能及图形学方向的技术人才，欢迎大家加入。

前言

  Java 编程语言的每一次重要更新，都引入了许多新功能和改进。 并且在String 类中引入了一些新的方法，能够更好地满足开发的需求，提高编程效率。

示例

1. repeat(int count)

public class StringRepeatExample {

    public static void main(String[] args) {

        String str = "abc";

        String repeatedStr = str.repeat(3);

        System.out.println(repeatedStr);

    }

}

输出结果：

abcabcabc

2. isBlank()

public class StringIsBlankExample {

    public static void main(String[] args) {

        String str1 = "";

        String str2 = " ";

        String str3 = "  \t  ";



        System.out.println(str1.isBlank());

        System.out.println(str2.isBlank());

        System.out.println(str3.isBlank());

    }

}

输出结果：

true

true

true

3. lines()

import java.util.stream.Stream;



public class StringLinesExample {

    public static void main(String[] args) {

        String str = "Hello\nWorld\nJava";

        Stream<String> lines = str.lines();

        lines.forEach(System.out::println);

    }

}

输出结果：

Hello

World

Java

4. strip()

public class StringStripExample {

    public static void main(String[] args) {

        String str1 = "  abc   ";

        String str2 = "\t def \n";

        System.out.println(str1.strip());

        System.out.println(str2.strip());

    }

}

输出结果：

abc

def

5. stripLeading()

public class StringStripLeadingExample {

    public static void main(String[] args) {

        String str1 = "  abc   ";

        String str2 = "\t def \n";

        System.out.println(str1.stripLeading());

        System.out.println(str2.stripLeading());

    }

}

输出结果：

abc

def

6. stripTrailing()

public class StringStripTrailingExample {

    public static void main(String[] args) {

        String str1 = "  abc   ";

        String str2 = "\t def \n";

        System.out.println(str1.stripTrailing());

        System.out.println(str2.stripTrailing());

    }

}

输出结果：

abc

def

7. formatted(Object... args)

public class StringFormattedExample {

    public static void main(String[] args) {

        String str = "My name is %s, I'm %d years old.";

        String formattedStr = str.formatted( "John", 25);

        System.out.println(formattedStr);

    }

}

输出结果：

My name is John, I'm 25 years old.

8. translateEscapes()

public class StringTranslateEscapesExample {

    public static void main(String[] args) {

        String str = "Hello\\nWorld\\tJava";

        String translatedStr = str.translateEscapes();

        System.out.println(translatedStr);

    }

}

输出结果：

Hello

World   Java

9. transform()

public class StringTransformExample {

    public static void main(String[] args) {  

        String str = "hello world";  

        String result = str.transform(i -> i + "！");  

        System.out.println(result);  

    }

}

输出结果：

hello world！

结尾

  如果觉得对你有帮助，可以多多评论，多多点赞哦，也可以到我的主页看看，说不定有你喜欢的文章，也可以随手点个关注哦，谢谢。

  我是不一样的科技宅，每天进步一点点，体验不一样的生活。我们下期见！

平常我们说的font-size：0；就是设置字体大小为0对吧，但是它的用处不仅仅如此哦，它还可以消除子行内元素间额外多余的空白！

问题描述？

是否出现过当多个img标签平铺的时候，会出现几个像素的间距？就像这样👇（为了醒目加了个红色的框框）

是什么原因造成的呢？

大家都知道img是行内元素，比如当我们的标签换行的时候，回车符会解析一个空白符，所以这是造成会有间距的原因之一。

当然喽，不仅仅是img，包括其他的一些常见的行内元素，比如span👇标签回车换行的效果，同样也会间隙，当然如果是缩进、空格等字符同样也会产生空白间隙，导致元素间产生多余的间距

    <span>背景图</span>

    <span>背景图</span>

    <span>背景图</span>

    <span>背景图</span>

    <img class="item-img" src="./src/assets/login-bg.png" alt="背景图" >

    <img class="item-img" src="./src/assets/login-bg.png" alt="背景图" >

    <img class="item-img" src="./src/assets/login-bg.png" alt="背景图" >

如何解决呢？

那我们首先想到取消换行、空格...

既然是因为标签换行了引起的，那么我们就取消换行、空格等试一试。

<span>背景图</span><span>背景图</span><span>背景图</span><span>背景图</span>

<img class="item-img" src="./src/assets/login-bg.png" alt="背景图" ><img class="item-img" src="./src/assets/login-bg.png" alt="背景图" ><img class="item-img" src="./src/assets/login-bg.png" alt="背景图" >

证明方法还是有用的～ 那还有没有其他的方法解决呢，那这个时候可以借助font-size:0来用一用。

如何使用font-size: 0 解决呢？

利用font-size:0消除子行内元素间额外多余的空白,需要在父元素上添加font-size:0。

是不是就解决了呀？

看一个完整的完整demo效果

当然需要注意一下：

设置font-size: 0时，子元素必须指定一个font-size大小，否则文本内容不会显示哦

示例代码：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>demo</title>

  <style>

    /*************************css代码👇***********************/

    ul {

      margin: 20px;

      display: flex;

      gap: 20px;

    }

    .item {

      width: 300px;

      height: 200px;

      padding: 20px;

      border-radius: 10px;

      background: #fff;

      overflow: hidden;

      font-size: 0;

      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)

    }

    .item-img {

      width: 100%;

      height: 175px;

      object-fit: cover;

      border-radius: 5px;

    }

    .item-text {

      color: #333;

      font-size: 14px;

    }

    span {

      background-color: red;

      padding: 10px;

    }

  </style>

</head>

<body>





  <ul>

    <li class="item">

      <img class="item-img" src="./src/assets/login-bg.png" alt="背景图" ><p class="item-text">《好看的背景图》</p>

    </li>

    <li class="item">

      <img class="item-img" src="./src/assets/login-bg.png" alt="背景图" >

      <p class="item-text">《好看的背景图》</p>

    </li>

    <li class="item">

      <img class="item-img" src="./src/assets/login-bg.png" alt="背景图" >

      <p class="item-text">《好看的背景图》</p>

    </li>

    <li class="item">

      <img class="item-img" src="./src/assets/login-bg.png" alt="背景图" >

      <p class="item-text">《好看的背景图》</p>

    </li>

  </ul>

</body>

</html>

前言

作为一名java开发程序员，不知道大家有没有遇到过一些匪夷所思的bug。这些错误通常需要您几个小时才能解决。当你找到它们的时候，你可能会默默地骂自己是个傻瓜。是的，这些可笑的bug基本上都是你忽略了一些基础知识造成的。其实都是很低级的错误。今天，我总结一些常见的编码错误，然后给出解决方案。希望大家在日常编码中能够避免这样的问题。

1. 使用Objects.equals比较对象

这种方法相信大家并不陌生，甚至很多人都经常使用。是JDK7提供的一种方法，可以快速实现对象的比较，有效避免烦人的空指针检查。但是这种方法很容易用错，例如：

Long longValue = 123L;

System.out.println(longValue==123); //true

System.out.println(Objects.equals(longValue,123)); //false

为什么替换==为Objects.equals()会导致不同的结果？这是因为使用==编译器会得到封装类型对应的基本数据类型longValue，然后与这个基本数据类型进行比较，相当于编译器会自动将常量转换为比较基本数据类型, 而不是包装类型。

使用该Objects.equals()方法后，编译器默认常量的基本数据类型为int。下面是源码Objects.equals()，其中a.equals(b)使用的是Long.equals()会判断对象类型，因为编译器已经认为常量是int类型，所以比较结果一定是false。

public static boolean equals(Object a, Object b) {

    return (a == b) || (a != null && a.equals(b));

}

    

public boolean equals(Object obj) {

    if (obj instanceof Long) {

        return value == ((Long)obj).longValue();

    }

    return false;

}

知道了原因，解决方法就很简单了。直接声明常量的数据类型，如Objects.equals(longValue,123L)。其实如果逻辑严密，就不会出现上面的问题。我们需要做的是保持良好的编码习惯。

2. 日期格式错误

在我们日常的开发中，经常需要对日期进行格式化，但是很多人使用的格式不对，导致出现意想不到的情况。请看下面的例子。

Instant instant = Instant.parse("2021-12-31T00:00:00.00Z");

DateTimeFormatter formatter = DateTimeFormatter.ofPattern("YYYY-MM-dd HH:mm:ss")

.withZone(ZoneId.systemDefault());

System.out.println(formatter.format(instant));//2022-12-31 08:00:00

以上用于YYYY-MM-dd格式化, 年从2021 变成了 2022。为什么？这是因为 java 的DateTimeFormatter 模式YYYY和yyyy之间存在细微的差异。它们都代表一年，但是yyyy代表日历年，而YYYY代表星期。这是一个细微的差异，仅会导致一年左右的变更问题，因此您的代码本可以一直正常运行，而仅在新的一年中引发问题。12月31日按周计算的年份是2022年，正确的方式应该是使用yyyy-MM-dd格式化日期。

这个bug特别隐蔽。这在平时不会有问题。它只会在新的一年到来时触发。我公司就因为这个bug造成了生产事故。

3. 在 ThreadPool 中使用 ThreadLocal

如果创建一个ThreadLocal 变量，访问该变量的线程将创建一个线程局部变量。合理使用ThreadLocal可以避免线程安全问题。

但是，如果在线程池中使用ThreadLocal ，就要小心了。您的代码可能会产生意想不到的结果。举个很简单的例子，假设我们有一个电商平台，用户购买商品后需要发邮件确认。

private ThreadLocal currentUser = ThreadLocal.withInitial(() -> null);



private ExecutorService executorService = Executors.newFixedThreadPool(4);



public void executor() {

    executorService.submit(()->{

        User user = currentUser.get();

        Integer userId = user.getId();

        sendEmail(userId);

    });

}

如果我们使用ThreadLocal来保存用户信息，这里就会有一个隐藏的bug。因为使用了线程池，线程是可以复用的，所以在使用ThreadLocal获取用户信息的时候，很可能会误获取到别人的信息。您可以使用会话来解决这个问题。

4. 使用HashSet去除重复数据

在编码的时候，我们经常会有去重的需求。一想到去重，很多人首先想到的就是用HashSet去重。但是，不小心使用 HashSet 可能会导致去重失败。

User user1 = new User();

user1.setUsername("test");



User user2 = new User();

user2.setUsername("test");



List users = Arrays.asList(user1, user2);

HashSet sets = new HashSet<>(users);

System.out.println(sets.size());// the size is 2

细心的读者应该已经猜到失败的原因了。HashSet使用hashcode对哈希表进行寻址，使用equals方法判断对象是否相等。如果自定义对象没有重写hashcode方法和equals方法，则默认使用父对象的hashcode方法和equals方法。所以HashSet会认为这是两个不同的对象，所以导致去重失败。

5. 线程池中的异常被吃掉

ExecutorService executorService = Executors.newFixedThreadPool(1);

executorService.submit(()->{

    //do something

    double result = 10/0;

});

上面的代码模拟了一个线程池抛出异常的场景。我们真正的业务代码要处理各种可能出现的情况，所以很有可能因为某些特定的原因而触发RuntimeException 。

但是如果没有特殊处理，这个异常就会被线程池吃掉。这样就会导出出现问题你都不知道，这是很严重的后果。因此，最好在线程池中try catch捕获异常。

总结

本文总结了在开发过程中很容易犯的5个错误，希望大家养成良好的编码习惯。

背景

最近做完一个小的后台管理系统，快上线了，发现一个问题，有2个select的选项框线上的数据量是1w+。。而测试环境都是几百的，所以导致页面直接卡住了，over了。

想了一下，如果接口支持搜索和分页，那直接通过上拉加载就可以了。但后端不太愿意改😄。行吧，前端搞也是可以的。

这个故事还有个后续：

过了一周上线后，发现有一个下拉框的数据有30w+！！！加载都加载不出来，哈哈哈哈，接口直接超时报错了，所以又cuocuocuo改了一遍，最后改成了：

方案

通过一顿搜索加联想总结了3种方法，以下方法都需要支持开启filterable支持搜索。

方案一(青铜段位) filterMethod直接过滤数据量

<template>

    <el-select 

      v-model="value" 

      clearable filterable 

      :filter-method="filterMethod">

      <el-option

        v-for="(item, index) in options.slice(0, 100)"

        :key="index"

        :label="item.label"

        :value="item.value">

      </el-option>

    </el-select>

 </template>

 export default {

  name: 'Demo',

  data() {

    return {

      options: [],

      value: ''

    }

  },

  beforeMount() {

    this.getList();

  },

  methods: {

    // 模拟获取大量数据

    getList() {

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

        this.options.push({label: "选择"+i,value:"选择"+i});

      } 

    },

    filterMethod(val) {

      console.log('filterMethod', val);

      this.options = this.options.filter(item => item.value.indexOf(val) > -1).slice(0, 100);

    },

    visibleChange() {

      console.log('visibleChange');

    }

  }

}

方案二(白银段位) 自定义滚动指令，实现翻页加载

写自定义滚动指令，options列表滚动到底部后，再加载下一页。但这时候筛选出来的是已经滚动出来的值。

这里如果直接使用filterable来搜索，搜索出来的内容是已经滑动出来的内容。如果想筛选全部的，就需要重写filterMethod方法来自定义过滤功能。可以根据情况选择是否要重写filterMethod。

<template>

  <div class="dashboard-editor-container">

    <el-select 

      v-model="value" 

      clearable

      filterable 

      v-el-select-loadmore="loadMore"

      :filter-method="filterMethod">

      <el-option

        v-for="(item, index) in options"

        :key="index"

        :label="item.label"

        :value="item.value">

      </el-option>

    </el-select>

  </div>

</template>

<script>

export default {

  name: 'Demo',

  data() {

    return {

      options: [],

      value: '',

      pageNo: 0

    }

  },

  beforeMount() {

    this.getList();

  },

  methods: {

    // 模拟获取大量数据

    getList() {

      const data = [];

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

        data.push({label: "选择"+i,value:"选择"+i});

      }

      this.allData = data;

      this.data = data;

      this.getPageList()

    },

    getPageList(pageSize = 10) {

      this.pageNo++;

      const list = this.data.slice(0, pageSize * (this.pageNo));

      this.options = list;

    },

    loadMore() {

      this.getPageList();

    },

    filterMethod(val) {

      this.data = val ? this.allData.filter(item => item.label.indexOf(val) > -1) : this.allData;

      this.getPageList();

    }

  },

  directives:{

    'el-select-loadmore':(el, binding) => {

      // 获取element-ui定义好的scroll父元素

      const wrapEl = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");

      if(wrapEl){

        wrapEl.addEventListener("scroll", function () {

          /**

           * scrollHeight 获取元素内容高度(只读)

           * scrollTop 获取或者设置元素的偏移值,

           *  常用于:计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.

           * clientHeight 读取元素的可见高度(只读)

           * 如果元素滚动到底, 下面等式返回true, 没有则返回false:

           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;

           */

          if (this.scrollTop + this.clientHeight >= this.scrollHeight) {

            // binding的value就是绑定的loadmore函数

            binding.value();

          }

        });

      }

    },

  },

}

</script>

</script>

方案三(黄金段位) 虚拟列表

引入社区的vue-virtual-scroll-list 支持虚拟列表。但这里想的自己再实现一遍虚拟列表，后续再写吧。

另外，element-plus提供了对应的实现，如果是使用的是plus，则可以直接使用 select-v2组件。

<template>

  <div class="dashboard-editor-container">

    <el-select 

      v-model="value" 

      clearable

      filterable >

      <virtual-list

          class="list"

          style="height: 360px; overflow-y: auto;"

          :data-key="'value'"

          :data-sources="data"

          :data-component="item"

          :estimate-size="50"

        />

    </el-select>

  </div>

</template>

<script>

import VirtualList from 'vue-virtual-scroll-list';

import Item from './item';

export default {

  name: 'Demo',

  components: {VirtualList, Item},

  data() {

    return {

      options: [],

      data: [],

      value: '',

      pageNo: 0,

      item: Item,

    }

  },

  beforeMount() {

    this.getList();

  },

  methods: {

    // 模拟获取大量数据

    getList() {

      const data = [];

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

        data.push({label: "选择"+i,value:"选择"+i});

      }

      this.allData = data;

      this.data = data;

      this.getPageList()

    },

    getPageList(pageSize = 10) {

      this.pageNo++;

      const list = this.data.slice(0, pageSize * (this.pageNo));

      this.options = list;

    },

    loadMore() {

      this.getPageList();

    }

  }

}

</script>



// item组件

<template>

    <el-option :label="source.label" :value="source.value"></el-option>

</template>

  

  <script>

  export default {

    name: 'item',

    props: {

      source: {

        type: Object,

        default() {

          return {}

        }

      }

    }

  }

  </script>

  

  <style scoped>

  </style>