最近在做的一个前端小项目，需要一种比较炫酷的字体，在网上找到了iconfont中的刀隶体，感觉还不错，本文记录了如何在前端项目中使用这种字体的步骤。

1. 找到刀隶体生成的网站

访问下面这个网站就可以了：

阿里妈妈刀隶体字体

http://www.iconfont.cn/fonts/detai…

2. 生成自己想要的字并下载到本地

找到文本输入框

然后输入自己想要展示的字体：我是一只小青蛙，最爱说笑话

最后点击下载子集按钮

下载好的压缩包：

将压缩包中的内容复制到剪切板：

3. 项目中引入

在项目中创建管理字体的目录

mkdir -p src/assets/font

然后到font目录下粘贴复制的字体文件夹

最后在项目的根样式文件中(一般来说是src/index.css)引入新字体:

@font-face {

  font-family: "DaoLiTi";

  font-weight: 400;

  src: url("./assets/font/jHsMvOZ7UDEO/XBddIp4y0BmM.woff2") format("woff2"),

       url("./assets/font/jHsMvOZ7UDEO/XBddIp4y0BmM.woff") format("woff");

  font-display: swap;

}



body {

  font-family: 'DaoLiTi', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',

    sans-serif;

}

4. 新字体使用及效果

<span style={{fontFamily: 'DaoLiTi'}}>我是一只小青蛙，最爱说笑话</span>

5. 注意点

DaoLiTi这个名字是可以自定义的，但是在样式文件中的无论什么地方使用的时候都不能少了引号。

此外就是除了“我是一只小青蛙，最爱说笑话”，其他字是没有刀隶体效果的！

好像，我已经好久没有尽全力做某件事情了...

以至于，我已经有点遗忘了，尽全力做某件事情的感觉了...

你还记得，最近一次（或者是现在）你尽全力做某件事情的感受吗？

如果要描述这种感觉的话，我想会包含以下几点吧。

第一，忘我。也就是我们经常说的心流状态。我们在尽全力做某件事情的时候，会很容易进入心流状态。只要是做这件事情，然后再加上一些条件反射诱因，就可以很快进入心流状态。就像巴甫洛夫实验那样，摇铃铛，流口水。

第二，印象深刻。这种感觉是印象深刻的，不管这件事情最终是成功还是失败，是硕果累累，还是无疾而终，它都能给我们留下深刻的印象。在很多年之后，虽然我们会遗忘很多的细节，但起码，我们还能回忆起来这件事，我做过，我全情投入过。

第三，不留遗憾。有一种后悔，是在自己做了某种决策之后导致失败。有一种比这个程度更深的后悔，是自己没有全情投入地去做某件事情。失败，只是懊悔，没做，才是遗憾！

过去几年，我的工作好无聊，很难受，非常迷茫。感觉我是在原地踏步，虚耗光阴。

今年慢慢走出来了，但还是没有达到最好的状态。

我觉得，自己被很多无形的枷锁禁锢住了。虽然不是难以呼吸般的艰难，却也不能纵情放肆高呼般的畅快。

我觉得，自己像是一个控火师。现实、责任、理智让我严格控制内心的火，不能让它燃尽自己；而梦想、遗憾、本我又让我尽力呵护它，不能让它熄灭。

今天说多了，还是回归理性。继续蛰伏吧，努力成长，提升自己，才能有资本抓住未来的机会。

加油，奥利给！

----------------【END】----------------

欢迎关注公众号【潜龙在渊灬】（点此扫码关注），收获程序员职场相关经验、提升工作效率和职场效能、结交更多人脉。

Base64

前端的日常开发中可能会接触到 Base64 ，比如页面上的小图片，在为了节省网络资源的情况下，通常会将图片转为 Base64 直接嵌入到 html 或者 css 里。这里，我们先来看看 Base64 是什么，以及 Base64 编码做了什么。

什么是 Base64

Base64 是一种基于64个可打印字符来表示二进制数据的表示方法。一般来说，64个字符包括 A-Z,a-z,0-9 以及 +/ 两个字符（via）。换句话说， Base64 可以将二进制数据转换为这 64 个字符来表示，数据来源可以是图片，也可以是任意的字符串。

Base64 做了些什么

上面提到了 Base64 做的其实就是将二进制数据按照对应规则进行转化，转化的流程其实也很简单

下面我们来尝试一下将 aa 这个字符串进行一下 Base64 编码：

第一步：通过 ASCII 表将 aa 转换为对应的二进制表示

可知 a 在 ASCII 表对应的二进制表示为 0110 0001，则 aa 对应为 0110 0001 0110 0001

注：

第二步：数据分组和补位

按 6 位一组划分后 011000 010110 0001，我们发现数据还少两位，所以我们需要按规则对数据进行补位，补一字节（8位），二进制数据变为 0110 0001 0110 0001 0000 0000，划分为 011000 010110 000100 000000

第三步：查 Base64 索引表 进行转换

参考一张常用的索引表

可知 aa = 011000 010110 000100 000000 对应为 011000(Y) 010110(W) 000100(E) 000000(补位=) 即 YWE=，我们就得到了 aa 的 Base64 编码为 YWE= ，是不是挺简单。

Base62

说完了 Base64，我们再来聊聊 Base62。在通过 url 传递数据的场景下，通过 Base64 进行编码的数据会带来问题（Base64 中的 / 等可能会带来路径的解析异常），所以在 Base62 里，去掉了 +/= 字符。
说到这里，大家可能觉得就讲完了，Base62 就是丢掉了几个不安全的字符而已，其余转换方法和 Base64 一样，我起初也是这么认为的。

不一样的 Base62 结果

当我尝试对 aa 进行 Base62 编码时，按推算好像也不太对？ = 补位已经被去掉了，怎么来做实现呢？
在我找了几个 online 转换进行测试后，发现 aa 对应的 Base62 编码为 6U5 看着跟 Base64 毫无关系对吧，实际上也是的。

揭开面纱看看

查了几份资料以及现有的仓库实现后，我发现 Base62 编码的流程是这样的：

我们再来试试将 aa 转 Base62：

第一步：转二进制

aa 对应 0110 0001 0110 0001

第二步：转10进制

0110000101100001 对应十进制为 24929

第三步：转62进制（参考索引表）

24929 = 6622+3062+5

按表可知，6=6 30=U 5=5，即 6U5

注：

分析一下原因

说实话我查到的资料不多，但是根据 en.wikipedia.org/wiki/Talk:B… 猜测，文里提到 Base64 后的数据会膨胀到 133% 。Base62 还存在对数据进行压缩的改进，所以采用了这样与 Base64 差别有点大的方式来设计。

总结一下

文章简单的谈了谈 Base64 是什么，怎么实现以及 Base62 的实现，并分析了一下 Base62 设计的初衷，整体来说还是挺简单，希望对你有所帮助 :)

前言

先看下我们阔爱滴海绵宝宝，其原图是一张PNG图片，我们给宝宝加上描边效果，今天我们使用的是图片蒙版技术。

说到蒙版可能很多人想起PS抠图软件，Android上也一样，同一个大树上可能会长出两种果实，但果实的根基是一样的。

什么是蒙版：所谓蒙版是只保留了alpha通道的一种二维正交投影，简单的说就是你躺在地上，太阳光直射下来，背后的那片就是你的蒙版。因此，它既不存在三维特征，也不存在色彩特征，只有alpha特征。那只有alpha通道的图片是什么颜色，这块没有具体了解过，但是理论上取决于默认填充色，在Android上最终是白色的，其他平台暂时还没了解。

提取蒙版

Android上提取蒙版比想象的容易，按照以往的思路，我们是要进行图片扫描这里，其实就是把所有颜色的red、green、blue都排除掉，只保留alpha，相当于缩小了通道数，排除采样和缩小图片，当然这个工作量是很大的，尤其是超高清图片。

Android 上提取蒙版，只需要把原图绘制到alpha通道的Bitmap上

bms = decodeBitmap(R.mipmap.mm_07);

bmm = Bitmap.createBitmap(bms.getWidth(), bms.getHeight(), Bitmap.Config.ALPHA_8);

Canvas canvas = new Canvas(bmm);

canvas.drawBitmap(bms, 0, 0, null);

蒙版绘制

蒙版绘制和其他Bitmap绘制是有差异的，ARGB_8888和RGB_565等色彩格式的图片，其本身是具备颜色的，但是蒙版图片不一样，他没有颜色，所以你绘制的时候，bitmap的颜色是你画笔Paint的填充色，突然想到可以做一个人体扫描的动画效果或者人体热力图。

canvas.drawBitmap(bmm, x, y, paint);

扩大蒙版（影子）

要让蒙版比比原图大，理论上是需要等比例放大蒙版在平移，还有一种方式是进行偏移绘制，我们这里使用偏移绘制。当然，这里取一定360，保证尽可能每个方向都有偏移，这是看到的外国人的算法。至于step>0 但是也要控制粒度，太小可能绘制次数太多，太大可能有些边缘做不到偏移。

for (int i = 0; i < 360; i += step) {

    float x = width * (float) Math.cos(Math.toRadians(i));

    float y = width * (float) Math.sin(Math.toRadians(i));

    canvas.drawBitmap(bmm, x, y, paint);

}

闪烁效果

我们价格颜色闪烁的效果，其实很简单，也不是本篇重要的部份，其实就是在色彩中间插入透明色，然后定时闪烁。

int index = -1;

int max = 15;

int[] colors = new int[max];

final int[] highlightColors = {0xfff00000,0,0xffff9922,0,0xff00ff00,0};



public void shake() {

    index = 0;

    for (int i = 0; i < max; i+=2) {

        colors[i] = highlightColors[i % highlightColors.length];

    }

    postInvalidate();

}

总结

本篇到这里就结束了，希望利用蒙版+偏移做出更多东西。

全部代码

public class ViewHighLight extends View {

    final Bitmap bms; //source 原图

    final Bitmap bmm; //mask 蒙版

    final Paint paint;

    final int width = 4;

    final int step = 15; // 1...45

    int index = -1;

    int max = 15;

    int[] colors = new int[max];

    final int[] highlightColors = {0xfff00000,0,0xffff9922,0,0xff00ff00,0};

    public ViewHighLight(Context context) {

        super(context);

        bms = decodeBitmap(R.mipmap.mm_07);

        bmm = Bitmap.createBitmap(bms.getWidth(), bms.getHeight(), Bitmap.Config.ALPHA_8);

        Canvas canvas = new Canvas(bmm);

        canvas.drawBitmap(bms, 0, 0, null);

        paint = new Paint(Paint.ANTI_ALIAS_FLAG);

    }



    private Bitmap decodeBitmap(int resId) {

        BitmapFactory.Options options = new BitmapFactory.Options();

        options.inMutable = true;

        return BitmapFactory.decodeResource(getResources(), resId, options);

    }



    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        // draw blur shadow



        for (int i = 0; i < 360; i += step) {

            float x = width * (float) Math.cos(Math.toRadians(i));

            float y = width * (float) Math.sin(Math.toRadians(i));

            canvas.drawBitmap(bmm, x, y, paint);

        }

        canvas.drawBitmap(bms, 0, 0, null);



        if(index == -1){

            return;

        }

        index++;

        if(index > max +1){

            return;

        }

        if(index >= max){

            paint.setColor(Color.TRANSPARENT);

        }else{

            paint.setColor(colors[index]);

        }

        postInvalidateDelayed(200);

    }





    public void shake() {

        index = 0;

        for (int i = 0; i < max; i+=2) {

            colors[i] = highlightColors[i % highlightColors.length];

        }

        postInvalidate();

    }

}

今天群里有个人问了一个问题，问我们为什么报错，代码如下

var arr = [1,2,3,4,5,6,7,8,9,10]

for(let i = arr.length; i > 0; i--) {

    let index = Math.floor(Math.random() * i)

    // console.log(i, index);

    [arr[i-1], arr[index]] = [arr[index], arr[i-1]]

    // ReferenceError: Cannot access 'index' before initialization

}

console.log(arr)

我乍一看，这能报错？不应该啊，怎么能呢，于是我特意复制下来跑了一下，嘿，还真是

关于ReferenceError: Cannot access 'xxx' before initialization的报错，往往和暂时性死区有关，但我看了看顺序，是先定义的index啊，没有错。

抱着求知的心态，上网查了一些文章，都没有提到这种问题，于是只能去看ecma规范，但对不起，我英语太差了，我就连在哪都没找到。

后来我想起自己曾经遇到过类似的问题，只不过是在解构对象的时候遇到的

大概是这样的操作

let a = xxx



({

    a: this.options.a,

    b: this.options.b,

    ......

} = /*一个对象*/ ?? {})

当时也报了错，我就想起来了

js中是允许语句不使用;结尾的，许多小伙伴可能养成了这个习惯，虽然不写分号有时候确实很爽很轻松，也是一些企业的规范，但是等到流泪的时候可就知道惨了。

只需要将上述结构赋值的代码的前面一个语句加上分号，就可以解决这个问题

相当于把一个语句拆开了

什么？你问我怎么就成同一个语句了？

我没记错的话，js在执行的时候是会忽略换行符的吧，或者说这个换行符没那么重要，所以我们平时看到的很多库打包出来的min.js文件都是只有一行的然后通过分号分割语句。

如果把上述代码换行内容忽视掉，就变成了这个样子，只放了部分代码

    let index = Math.floor(Math.random() * i)[arr[i-1], arr[index]] = [arr[index], arr[i-1]]

这不报错谁报错啊，根据等号从右到左的运算顺序，不就是访问了暂时性死区嘛

所以加上分号，问题就引刃而解了。

想当年因为先学c++和java的缘故，总是养成写分号的习惯，在切图仔里面似乎成为了一个异类，现在知道了吧，养成写分号的好习惯啊，呜呜呜呜

最后附上修改后的代码

var arr = [1,2,3,4,5,6,7,8,9,10]

for(let i = arr.length; i > 0; i--) {

    let index = Math.floor(Math.random() * i);

    // console.log(i, index);

    [arr[i-1], arr[index]] = [arr[index], arr[i-1]]

    // ReferenceError: Cannot access 'index' before initialization

}

console.log(arr)

更好笑的是，这哥们明显是想通过console测试一下的，结果他发现console就不报错，不console就报错，这是真的折磨哈哈哈哈哈哈

养成语句加分号的好习惯！！
从你我做起！

这里的技术可以是计算机或者别的什么技术。当然首先指的是开发技术。

很长一段时间里，就我个人有一种天然的技术高于其他的感觉，虽未明示，但骨子里有一种谦虚的傲慢。认为开发高于产品、设计、测试等。

不知道其他人是否有过这种想法。或者我觉得那种典型的技术人的思维，要么思维不够开放，要么就是一种谦虚的傲慢。

这种傲慢最可怕的是因为漠视掉其它的价值，导致技术人的格局不够。格局不够会看不到更大世界的运行规律，导致无法做出更加正确的决策。有一副著名的对联

能攻心则反侧自消,自古知兵非好战

不审势即宽严皆误,后来治蜀要深思

我觉得这是对格局不够后果最直接准确的描述：宽严皆误。说下我是怎么想到技术并不一定比其他高级的？

前几天群里同组的同学@我让我改一篇文章，我才知道公司开始举办一年一度的一年一词活动，开始面向全体征稿。第一年的时候我参与了，但没有选中。第二年没有参与。

我看了下同组同学那篇文章，觉得不怎么滴啊，也是这激起我的求胜心，决定自己写一篇，今年再参加一次。于是那天下午我就写完了初稿。初稿的题目是造轮子，第一句

一般来说说造轮子的都是程序员，因为开发从某个意义上来讲就是在重复造轮子，亦如太阳底下没有新鲜事，也亦如任何历史都是当代史。

为了能够被选上，我认真又做了几次修改，重读了几次。我有点福至心灵的发现我在开发上犯了一个错误，就是我似乎一直认为技术才是最重要的，不管是有意无意的，这是事实。但是开发从某个意义上来讲就是在重复造轮子，正如太阳底下没有新鲜事，也亦如任何历史都是当代史，技术和其他一样，也是重复的单元。

要想尽快搞清楚技术，只要找到其中代表性的重复单元就可以了。而实际也早就有人总结了这些单元，比如功能单元的代表各种ui组件库，业务单元的代表往往是对功能单元的再加工。好比功能单元是原型机，而业务单元是定制化。

前几天也看到一篇文章的题目《不过是享受了互联网的十年红利期而已》。遂想到行业高速发展时期，技术实现是第一位的；但行业进入饱和期，产品、运营应该才是创造利润的关键。正如计算机底层技术开发人员，过了计算机技术爆发的年代，反倒不如业务开发赚的多。

这一切的一切不过是特定时期的表现。技术并不一定比其他高级，现在就是技术不再处于第一优先级的时刻。

(本文完)

程序员 一词，在我眼里其实是贬义词。因为我的其他不是这行的亲朋友好友，你和他们说，你是一名程序员·

他们 第一刻板影响就是，秃头，肥胖，宅男，油腻，不修边幅 反正给人一种不干净，不好形象，，，，不知道什么时候开始网络上也去渲染这些，把程序员和这些联想在一起了。

回到正题，我们来聊聊，我们光鲜靓丽背后高工资。

是的作为一名程序员，在许多人的眼中，IT行业收入可能相对较高。这是不可否认的。但是，在这个职业领域里，我们所面对的困难和挑战也是非常的多。

持续的学习能力

程序员需要持续地学习，不断地掌握新技能。

随着技术的不断发展，我们需要不断地学习新的编程语言、开发框架、工具以及平台等等，这是非常耗费精力和时间的。每次技术更新都需要我们拿出宝贵的时间，去研究、学习和应用。

尤其在公司用项目中，用到新技术需要你在一定时间熟悉并使用时候，那个时候你自己只有硬着头皮，一边工作一边学习，如果你敢和老板说不会，那，，，我是没那个胆量

高强度抗压力

ICU,猝死，996说的就是我们

我们需要经常探索和应对极具挑战性的编程问题。解决一个困难的问题可能需要我们数小时，甚至数天的时间，这需要我们付出大量的勤奋和耐心。有时候，我们会出现程序崩溃或运行缓慢的情况，当然，这种情况下我们也需要更多的时间去诊断和解决问题，

还要保持高效率工作，同时保证项目的质量。有时候，团队需要在紧张的时间内完成特别复杂的任务，这就需要我们花费更多的时间和精力来完成工作。

枯燥乏味生活

由于高强度工作，和加班，我们的业余生活可能不够丰富，社交能力也会不足

高额经济支出

程序员IT软件行业，一般都是在一线城市工作，或者新一线，二线城市，所以面临的经济支持也会比较大，

最难的就是房租支持，生活开销。

一线城市工作，钱也只能在一线城市花，有时候也是真的存不了什么钱，明明自己什么也没有额外支持干些什么，可是每月剩下的存款也没有多少

短暂职业生涯

“背负黑匣子”：程序员的工作虽然看似高薪，但在实际工作中，我们承担了处理复杂技术问题的重任。

“独自快乐？”：程序员在工作中经常需要在长时间内独立思考和解决问题，缺乏团队合作可能会导致孤独和焦虑。

“冰山一角的技能”：程序员需要不断学习和更新技能，以适应快速变化的技术需求，这需要不断的自我修炼和付出时间。

“猝不及防的技术变革”：程序员在处理技术问题时需要时刻保持警惕，技术日新月异，无法预测的技术变革可能会对工作带来极大的压力。

“难以理解的需求”：客户和管理层的需求往往复杂而难以理解，程序员需要积极与他们沟通，但这也会给他们带来额外的挑战和压力。

“不请自来的漏洞”：安全漏洞是程序员必须不断面对和解决的问题，这种不确认的风险可能会让程序员时刻处于焦虑状态。

“高度聚焦的任务”：程序员在处理技术问题时需要集中精力和关注度，这通常需要长时间的高度聚焦，导致他们缺乏生活平衡。

“时刻警觉”：程序员在工作中必须时刻提醒自己，保持警觉和冷静，以便快速识别和解决问题。

“枯燥重复的任务”：与那些高度专业的技术任务相比，程序员还需要完成一些枯燥重复的工作，这让他们感到无聊和疲惫。

“被误解的天才”：程序员通常被视为是天才，但是他们经常被误解、被怀疑，这可能给他们的职业带来一定的负担。

程序员IT,也是吃年轻饭的，不是说你年龄越大，就代表你资历越深。 职业焦虑，30岁年龄危机 越来越年轻化

要么转行，要么深造，

Yo，这是程序员的故事



高薪却伴随着堆积如山的代码



代码缺陷层出不穷，拯救业务成了千里马



深夜里加班的钟声不停响起



与bug展开了无尽的搏斗，时间与生命的角逐



接口返回的200，可前端却丝毫未见变化



HTTP媒体类型不支持，世界一团糟



Java Spring框架调试繁琐，无尽加班真让人绝望



可哪怕压力再大，我们还是核心开发者的倡导者



应用业务需要承载，才能取得胜利的喝彩



程序员的苦工是世界最稀缺的产业



我们不妥协，用技术创意为行业注入新生命



我们坚持高质量代码的规范



纵使压力山大，我们仍能跨过这些阻碍



这是程序员的故事。

大家有什么想法和故事吗，在工作中是否也遇到了和我一样的问题？

原创 陈夏杨 / 叫叫技术团队

基于 Antd Upload 实现拖拽（兼容低版本）

背景

哎呀！我想要的是边上传边调整位置可以拖拽的那种效果！哪种？就那种。（这句话是不是似曾相识，没错，到这里作为开发还没领悟那就要面壁思过了～哈哈。）话不多说，目前 Antd 的 Upload 组件并未支持拖拽排序功能，社区也没有发现可以借鉴的 demo，于是我们调研后采用 react-dnd 和 react-sortable-hoc 实现“就那种”效果。

技术分析

其实这个需求之前我们已经有一些基于 react-dnd 技术的沉淀，但是都是基于 html 的 dom 元素进行 ref 绑定操作，并没有搭配 Upload 组件。如下 demo

以上是基于 react-dnd 实现的场景拖拽，直接上核心代码

const [, dragPreview] = useDrag({

  collect: (monitor: DragSourceMonitor) => ({

    isDragging: monitor.isDragging()

  }),

  // item 中包含 index 属性，则在 drop 组件 hover 和 drop 是可以根据第一个参数获取到 index 值

  item: { type: 'page', index }

});

const [, drop] = useDrop({

  accept: 'page',

  hover(item: { type: string; index: number }, monitor: any) {

    if (!ref.current) {

      return;

    }

    const dragIndex = item.index;

    const hoverIndex = index;



    // 拖拽元素下标与鼠标悬浮元素下标一致时，不进行操作

    if (dragIndex === hoverIndex) {

      return;

    }

    // 确定屏幕上矩形范围

    const hoverBoundingRect = ref.current!.getBoundingClientRect();

    // 获取中点垂直坐标

    const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;

    // 确定鼠标位置

    const clientOffset = monitor.getClientOffset();

    // 获取距顶部距离

    const hoverClientY = (clientOffset as any).y - hoverBoundingRect.top;

    /**

       * 只在鼠标越过一半物品高度时执行移动。

       * 当向下拖动时，仅当光标低于50%时才移动。

       * 当向上拖动时，仅当光标在50%以上时才移动。

       * 可以防止鼠标位于元素一半高度时元素抖动的状况

       */

    // 向下拖动

    if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {

      return;

    }

    // 向上拖动

    if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {

      return;

    }



    // 执行 move 回调函数

    moveCard(dragIndex, hoverIndex);



    /**

       * 如果拖拽的组件为 Box，则 dragIndex 为 undefined，此时不对 item 的 index 进行修改

       * 如果拖拽的组件为 Card，则将 hoverIndex 赋值给 item 的 index 属性

       */

    if (item.index !== undefined) {

      item.index = hoverIndex;

    }

  }

});

dragPreview(drop(ref));

因为 Upload 组件上传文件是通过自身 fileList api 底层消化处理的，所以处理起来比较麻烦，还好 Antd 4.16.0 版本Upload 提供的 itemRender 解决了这个问题。但是对于低于这个版本的后续也有解决方案。

注意：如果 Antd 用的是最新的版本 5.x.x，其实官网也提供了 集成 dnd-kit 来实现对上传列表拖拽排序

技术选型

市面上可以实现拖拽排序的库有很多，比如 SortableJS、react-dnd、react-beautiful-dnd、react-sortable-hoc 等。
我列了一个表格：

实践中还会有一些踩坑：

• reat-dnd 在项目中快速拖拽时一直报错，"Invariant Violation: Expected targetIds to be registered. "在他的 issue 中也有很多人反应这个问题，虽然有修复过但是并没有完全修复，在 overStack 中也并没有找到好的解决方案。


• 这里以我们实践结论，从 react-dnd、react-sortable-hoc 两个库进行讲解

react-dnd

概念

react dnd 是一组 react 高阶组件，使用的时候只需要使用对应的 API 将目标组件进行包裹，即可实现拖动或接受拖动元素的功能。
在拖动的过程中，不需要开发者自己判断拖动状态，只需要在传入的配置对象中各个状态属性中做对应处理即可，因为react-dnd 使用了 redux 管理自身内部的状态。
值得注意的是，react-dnd 并不会改变页面的视图，它只会改变页面元素的数据流向，因此它所提供的拖拽效果并不是很炫酷的，我们可能需要写额外的视图层来完成想要的效果，但是这种拖拽管理方式非常的通用，可以在任何场景下使用，非常适合用来定制。

安装

npm i react-dnd

核心 API

介绍实现拖拽和数据流转的核心 API ，这里以 hook 为例。

DndProvider

使用 react-dnd 需要最外层元素加 DndProvider ，DndProvider 的本质是一个由 React.createContext 创建一个上下文的容器(组件)，用于控制拖拽的行为，数据的共享，类似于 react-redux 的 Provider。

import { DndProvider } from 'react-dnd';

import { HTML5Backend } from 'react-dnd-html5-backend';



<DndProvider backend={HTML5Backend}>组建模块</DndProvider>;

Backend

react dnd 将 DOM 事件相关的代码独立出来，将拖拽事件转换为 react dnd 内部的 redux action。由于拖拽发生在 H5 的时候是 ondrag，发生在移动设备的时候是由 touch 模拟，react dnd 将这部分单独抽出来，方便后续的扩展，这部分就叫做 backend。它是 dnd 在 DOM 层的实现。

• react-dnd-html5-backend : 用于控制 html5 事件的 backend


• react-dnd-touch-backend : 用于控制移动端 touch 事件的 backend


• react-dnd-test-backend : 用户可以参考自定义 backend

useDrag

让 DOM 实现拖拽能力的构子

import React from 'react';

import { useDrag } from 'react-dnd';



export default function Player() {

  // 第一个返回值是一个对象，主要放一些拖拽物的状态。后面会介绍，先不管

  // 第二个返回值：顾名思义就是一个Ref，只要将它注入到DOM中，该DOM就会变成一个可拖拽的DOM

  const [_, dragRef] = useDrag(

    {

      type: 'Player', // 给拖拽物命名，后面用于分辨该拖拽物是谁，支持string和symbol

      item: { id: 1 } // 拖拽物所携带的数据，让后面一些事件可以拿到数据，已达到交互的目的

    },

    []

  );

  // 注入Ref,现在这个DOM就可以拖拽了

  return <div ref={dragRef} />;

}

返回三个参数

第一个返回值是一个对象 表示关联在拖拽过程中的变量，需要在传入 useDrag 的规范方法的 collect 属性中进行映射绑定,比如：isDraging, canDrag 等

第二个返回值 代表拖拽元素的 ref

第三个返回值 代表拖拽元素拖拽后实际操作到的 dom

传入两个参数

• 第一个参数，是一个对象，是用于描述了drag 的配置信息，常用属性

• 第二个参数是一个数组，表示对方法更新的约束，只有当数组中的参数发生改变，才会重新生成方法，基于react 的 useMemo 实现

useDrop

实现拖拽物放置的钩子

import { useDrop } from 'react-dnd';



export const Dustbin = () => {

  const [_, dropRef] = useDrop({

    accept: ['Player'], // 指明该区域允许接收的拖放物。可以是单个，也可以是数组

    // 里面的值就是useDrag所定义的type



    // 当拖拽物在这个拖放区域放下时触发,这个item就是拖拽物的item（拖拽物携带的数据）

    drop: (item) => {}

  });



  // 将ref注入进去，这个DOM就可以处理拖拽物了

  return <div ref={dropRef}></div>;

};

返回两个参数

第一个返回值是一个对象 表示关联在拖拽过程中的变量，需要在传入 useDrag 的规范方法的 collect 属性中进行映射绑定。

第二个返回值 代表拖拽元素的 ref
传入一个参数
用于描述drop的配置信息，常用属性

API 数据流转

react-sortable-hoc

概念

react-sortable-hoc 是一个基于 React 的拖拽排序组件，它可以让你轻松地实现拖拽排序功能。它提供了一系列的 API，可以让你自定义拖拽排序的行为。它支持拖拽排序的单个列表和多个列表，以及拖拽排序的可视化。

安装

npm install react-sortable-hoc

引入

import { SortableContainer, SortableElement, arrayMove, SortableHandle } from 'react-sortable-hoc';

核心 API

• sortableContainer 是所有可排序元素的容器


• sortableElement 是每个可渲染元素的容器


• sortableHandle 是定义拖拽手柄的容器


• arrayMove 主要用于将移动后的数据排列好后返回

SortableContainer HOC

如何使用

直接上demo

import React from 'react';

import { arrayMove, SortableContainer, SortableElement } from 'react-sortable-hoc';



// 需要拖动的元素的容器

const SortableItem = SortableElement((value) => <div>{value}</div>);

// 整个元素排序的容器

const SortableList = SortableContainer((items) => {

  return items.map((value, index) => {

    return <SortableItem key={`item-${index}`} index={index} value={value} />;

  });

});



// 拖动排序组件

class SortableComponnet extends React.Component {

  state = {

    items: ['1', '2', '3']

  };

  onSortEnd = ({ oldIndex, newIndex }) => {

    this.setState(({ items }) => {

      arrayMove(items, oldIndex, newIndex);

    });

  };

  render() {

    return (

      <div>

        <SortableList

          distance={5}

          axis={'xy'}

          items={this.state.items}

          helperClass={style.helperClass}

          onSortEnd={this.onSortEnd}

          />

      </div>

    );

  }

}



export default SortableComponnet;

在上面的示例中，我们使用 SortableContainer 组件容纳了一组可拖拽排序的元素，使用 SortableElement 组件包裹了每个元素，并且实现了 onSortEnd 回调函数，以便在拖拽排序完成后更新状态。

效果展示

踩坑

解决：这种报错的解决方法都是 SortableElement 和 SortableContainer 返回组件时外面都要单独在包一个 html 容器标签, 例子是包了个 <div>

结果导向

Antd 版本 4.16.0及以上

使用 react-dnd 搭配 Upload 上传组件 itemRender api实现

注：这里主要基于 react-dnd 实现，Antd 5.x.x 官网有基于 dnd-kit 来实现对上传列表拖拽排序。

const Box: React.FC<BoxProps> = ({ children, index, className, onClick, moveCard }) => {

  const ref = useRef<HTMLDivElement>(null);



  const [, dragPreview] = useDrag({

    collect: (monitor: DragSourceMonitor) => ({

      isDragging: monitor.isDragging()

    }),

    // item 中包含 index 属性，则在 drop 组件 hover 和 drop 是可以根据第一个参数获取到 index 值

    item: { type: 'page', index }

  });

  const [, drop] = useDrop({

    accept: 'page',

    hover(item: { type: string; index: number }) {

      if (!ref.current) {

        return;

      }

      const dragIndex = item.index;

      const hoverIndex = index;

      // 自定义逻辑处理



      // 执行 move 回调函数

      moveCard(dragIndex, hoverIndex);

    }

  });

  dragPreview(drop(ref));



  return (

    <div ref={ref} className={className} onClick={onClick}>

      {children}

    </div>

  );

};

使用

使用 Antd Upload itemRender

Antd 版本低于 4.16.0

使用 react-sortable-hoc 库实现

• SortableItem

const SortableItem = SortableElement((params: SortableItemParams) => (

  <div>

    <UploadList

      locale={{ previewFile: '预览图片', removeFile: '删除图片' }}

      showDownloadIcon={false}

      showRemoveIcon={params?.props?.disabled}

      listType={params?.props?.listType}

      onPreview={params.onPreview}

      onRemove={params.onRemove}

      items={[params.item]}

      />

  </div>

));

• SortableList

const SortableList = SortableContainer((params: SortableListParams) => {

  return (

    <div className='sortableList'>

      {params.items.map((item, index) => (

      <SortableItem

        key={`${item.uid}`}

        index={index}

        item={item}

        props={params.props}

        onPreview={params.onPreview}

        onRemove={params.onRemove}

        />

    ))}

      {/* 这里是上传组件，设置最大限制后超出隐藏 */}

      <Upload {...params.props} showUploadList={false} onChange={params.onChange}>

        {params.props.children}

      </Upload>

    </div>

  );

});

• DragHoc

const DragHoc: React.FC<Props> = memo(

  ({ onChange: onFileChange, axis, onPreview, onRemove, ...props }) => {

    const fileList = props.fileList || [];

    const onSortEnd = ({ oldIndex, newIndex }: SortEnd) => {

      onFileChange({ fileList: arrayMove(fileList, oldIndex, newIndex) });

    };



    const onChange = ({ fileList: newFileList }: UploadChangeParam) => {

      onFileChange({ fileList: newFileList });

    };



    return (

      <>

        <SortableList

          // 当移动 1 之后再触发排序事件，默认是0，会导致无法触发图片的预览和删除事件

          distance={1}

          items={fileList}

          onSortEnd={onSortEnd}

          axis={axis || 'xy'}

          helperClass='SortableHelper'

          props={props}

          onChange={onChange}

          onRemove={onRemove}

          onPreview={onPreview}

          />

      </>

    );

  }

);

使用方式

可直接替换掉 Upload 组件，props 不变。
如果项目中有已经封装好的 Upload 上传组件，尽量不改变原有逻辑代码前提下，更希望以插件的形式按需加载？方案：

可以剔除掉 SortableList 中 SortableContainer 包裹的 Upload 组件(这一步经过实践是可行的，说 Upload UploadList 都要被 SortableContainer 包裹，否走会重复上传和拖拽失败？目前我是没遇到，重复上传是因为 Upload 组件 showUploadList 拖拽场景下必须是 false )

使用案例：（ isDrag 表示需要拖拽场景，继而加载）

{isDrag && (

  <DragHoc

    accept={accept}

    axis={axis}

    showUploadList={{ showRemoveIcon }}

    fileList={fileList}

    onChange={(e) => {

      if (onChange) {

        onChange(e);

      }

    }}

    onPreview={preview}

    onRemove={remove}

    listType={listType}

    />

)}

注：当然也可以用 react-dnd 来实现，只是多行拖拽流畅性较差。感兴趣也可以试试

踩坑

图片按钮点击无效

在 Antd 的 Upload 组件中，图片墙上会有「预览」、「删除」等按钮，但是在 react-sortable-hoc 的逻辑中，只要我点击了图片，就会触发图片的拖拽函数，无法触发图片上的各种按钮，所以需要在 SortableList 上重新设置一下 distance 属性，设置成 1 即可。

官网：

If you'd like elements to only become sortable after being dragged a certain number of pixels. Cannot be used in conjunction with the pressDelay prop.

（如果您希望元素仅在拖动一定数量的像素后才可排序。不能与 pressDelay 道具一起使用。默认为 0）

上传图片一直 uploading

原因：当图片列表发生变化，整个 sortable 容器被删除并重新渲染，导致请求失效。

解决方案：

需要将 SortableItem，SortableList 写在 React.FC 外面，每次组件内部 state 发生变化，不会重新执行 SortableContainer 和 SortableElement 方法，就可以让可排序容器里面的元素自动只更新需要改变的 DOM 元素，而不会整个删除并重新渲染了。

图片的 disabled 状态失效

原因：SortableContainer 包裹的组件对 Upload 图片和上传进行了拆分处理，所以需要单独去控制预览和删除按钮

const SortableItem = SortableElement((params: SortableItemParams) => (

  <div>

    <UploadList

      locale={{ previewFile: '预览图片', removeFile: '删除图片' }}

      showDownloadIcon={false}

      showRemoveIcon={params?.props?.disabled} //这里需要单独控制

      listType={params?.props?.listType}

      onPreview={params.onPreview}

      onRemove={params.onRemove}

      items={[params.item]}

      />

  </div>

));

效果展示

参考文献

• Sortable.js中文网|配置


• react-dnd 用法详解


• 「react进阶」一文吃透React高阶组件(HOC)


• React拖拽排序组件库对比研究


• 如何使用React-sortable-hoc和React-draggable拖拽组件实现产品需求？


• 一组高阶组件，可将任何列表转换为动画、可访问和触摸友好的可排序列表

一口气看完，比自学强十倍！

什么是Nginx

Nginx是一个开源的高性能HTTP和反向代理服务器。它可以用于处理静态资源、负载均衡、反向代理和缓存等任务。Nginx被广泛用于构建高可用性、高性能的Web应用程序和网站。它具有低内存消耗、高并发能力和良好的稳定性，因此在互联网领域非常受欢迎。

为什么使用Nginx

如何处理请求

Nginx处理请求的基本流程如下：

什么是正向代理和反向代理

正向代理

是指客户端通过代理服务器发送请求到目标服务器。客户端向代理服务器发送请求，代理服务器再将请求转发给目标服务器，并将服务器的响应返回给客户端。正向代理可以隐藏客户端的真实IP地址，提供匿名访问和访问控制等功能。它常用于跨越防火墙访问互联网、访问被封禁的网站等情况。

反向代理

是指客户端发送请求到代理服务器，代理服务器再将请求转发给后端的多个服务器中的一个或多个，并将后端服务器的响应返回给客户端。客户端并不直接访问后端服务器，而是通过反向代理服务器来获取服务。反向代理可以实现负载均衡、高可用性和安全性等功能。它常用于网站的高并发访问、保护后端服务器、提供缓存和SSL终止等功能。

nginx 启动和关闭

进入目录：/usr/local/nginx/sbin

启动命令：./nginx

重启命令：nginx -s reload

快速关闭命令：./nginx -s stop

有序地停止，需要进程完成当前工作后再停止：./nginx -s quit

直接杀死nginx进程：killall nginx

目录结构

[root@localhost ~]# tree /usr/local/nginx

/usr/local/nginx



├── client_body_temp                 # POST 大文件暂存目录

├── conf                             # Nginx所有配置文件的目录

│   ├── fastcgi.conf                 # fastcgi相关参数的配置文件

│   ├── fastcgi.conf.default         # fastcgi.conf的原始备份文件

│   ├── fastcgi_params               # fastcgi的参数文件

│   ├── fastcgi_params.default      

│   ├── koi-utf

│   ├── koi-win

│   ├── mime.types                   # 媒体类型

│   ├── mime.types.default

│   ├── nginx.conf                   #这是Nginx默认的主配置文件，日常使用和修改的文件

│   ├── nginx.conf.default

│   ├── scgi_params                 # scgi相关参数文件

│   ├── scgi_params.default  

│   ├── uwsgi_params                 # uwsgi相关参数文件

│   ├── uwsgi_params.default

│   └── win-utf

├── fastcgi_temp                     # fastcgi临时数据目录

├── html                             # Nginx默认站点目录

│   ├── 50x.html                     # 错误页面优雅替代显示文件，例如出现502错误时会调用此页面

│   └── index.html                   # 默认的首页文件

├── logs                             # Nginx日志目录

│   ├── access.log                   # 访问日志文件

│   ├── error.log                   # 错误日志文件

│   └── nginx.pid                   # pid文件，Nginx进程启动后，会把所有进程的ID号写到此文件

├── proxy_temp                       # 临时目录

├── sbin                             # Nginx 可执行文件目录

│   └── nginx                       # Nginx 二进制可执行程序

├── scgi_temp                       # 临时目录

└── uwsgi_temp                       # 临时目录

配置文件nginx.conf

# 启动进程,通常设置成和cpu的数量相等

worker_processes  1;



# 全局错误日志定义类型，[debug | info | notice | warn | error | crit]

error_log  logs/error.log;

error_log  logs/error.log  notice;

error_log  logs/error.log  info;



# 进程pid文件

pid        /var/run/nginx.pid;



# 工作模式及连接数上限

events {

    # 仅用于linux2.6以上内核,可以大大提高nginx的性能

    use   epoll;



    # 单个后台worker process进程的最大并发链接数

    worker_connections  1024;



    # 客户端请求头部的缓冲区大小

    client_header_buffer_size 4k;



    # keepalive 超时时间

    keepalive_timeout 60;



    # 告诉nginx收到一个新连接通知后接受尽可能多的连接

    # multi_accept on;

}



# 设定http服务器，利用它的反向代理功能提供负载均衡支持

http {

    # 文件扩展名与文件类型映射表义

    include       /etc/nginx/mime.types;



    # 默认文件类型

    default_type  application/octet-stream;



    # 默认编码

    charset utf-8;



    # 服务器名字的hash表大小

    server_names_hash_bucket_size 128;



    # 客户端请求头部的缓冲区大小

    client_header_buffer_size 32k;



    # 客户请求头缓冲大小

    large_client_header_buffers 4 64k;



    # 设定通过nginx上传文件的大小

    client_max_body_size 8m;



    # 开启目录列表访问，合适下载服务器，默认关闭。

    autoindex on;



    # sendfile 指令指定 nginx 是否调用 sendfile 函数（zero copy 方式）来输出文件，对于普通应用，

    # 必须设为 on,如果用来进行下载等应用磁盘IO重负载应用，可设置为 off，以平衡磁盘与网络I/O处理速度

    sendfile        on;



    # 此选项允许或禁止使用socke的TCP_CORK的选项，此选项仅在使用sendfile的时候使用

    #tcp_nopush     on;



    # 连接超时时间（单秒为秒）

    keepalive_timeout  65;





    # gzip模块设置

    gzip on;               #开启gzip压缩输出

    gzip_min_length 1k;    #最小压缩文件大小

    gzip_buffers 4 16k;    #压缩缓冲区

    gzip_http_version 1.0; #压缩版本（默认1.1，前端如果是squid2.5请使用1.0）

    gzip_comp_level 2;     #压缩等级

    gzip_types text/plain application/x-javascript text/css application/xml;

    gzip_vary on;



    # 开启限制IP连接数的时候需要使用

    #limit_zone crawler $binary_remote_addr 10m;



    # 指定虚拟主机的配置文件，方便管理

    include /etc/nginx/conf.d/*.conf;





    # 负载均衡配置

    upstream aaa {

        # 请见上文中的五种配置

    }





   # 虚拟主机的配置

    server {



        # 监听端口

        listen 80;



        # 域名可以有多个，用空格隔开

        server_name www.aaa.com aaa.com;



        # 默认入口文件名称

        index index.html index.htm index.php;

        root /data/www/sk;



        # 图片缓存时间设置

        location ~ .*.(gif|jpg|jpeg|png|bmp|swf)${

            expires 10d;

        }



        #JS和CSS缓存时间设置

        location ~ .*.(js|css)?${

            expires 1h;

        }



        # 日志格式设定

        #$remote_addr与 $http_x_forwarded_for用以记录客户端的ip地址；

        #$remote_user：用来记录客户端用户名称；

        #$time_local：用来记录访问时间与时区；

        #$request：用来记录请求的url与http协议；

        #$status：用来记录请求状态；成功是200，

        #$body_bytes_sent ：记录发送给客户端文件主体内容大小；

        #$http_referer：用来记录从那个页面链接访问过来的；

        log_format access '$remote_addr - $remote_user [$time_local] "$request" '

        '$status $body_bytes_sent "$http_referer" '

        '"$http_user_agent" $http_x_forwarded_for';



        # 定义本虚拟主机的访问日志

        access_log  /usr/local/nginx/logs/host.access.log  main;

        access_log  /usr/local/nginx/logs/host.access.404.log  log404;



        # 对具体路由进行反向代理

        location /connect-controller {



            proxy_pass http://127.0.0.1:88;

            proxy_redirect off;

            proxy_set_header X-Real-IP $remote_addr;



            # 后端的Web服务器可以通过X-Forwarded-For获取用户真实IP

            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

            proxy_set_header Host $host;



            # 允许客户端请求的最大单文件字节数

            client_max_body_size 10m;



            # 缓冲区代理缓冲用户端请求的最大字节数，

            client_body_buffer_size 128k;



            # 表示使nginx阻止HTTP应答代码为400或者更高的应答。

            proxy_intercept_errors on;



            # nginx跟后端服务器连接超时时间(代理连接超时)

            proxy_connect_timeout 90;



            # 后端服务器数据回传时间_就是在规定时间之内后端服务器必须传完所有的数据

            proxy_send_timeout 90;



            # 连接成功后，后端服务器响应的超时时间

            proxy_read_timeout 90;



            # 设置代理服务器（nginx）保存用户头信息的缓冲区大小

            proxy_buffer_size 4k;



            # 设置用于读取应答的缓冲区数目和大小，默认情况也为分页大小，根据操作系统的不同可能是4k或者8k

            proxy_buffers 4 32k;



            # 高负荷下缓冲大小（proxy_buffers*2）

            proxy_busy_buffers_size 64k;



            # 设置在写入proxy_temp_path时数据的大小，预防一个工作进程在传递文件时阻塞太长

            # 设定缓存文件夹大小，大于这个值，将从upstream服务器传

            proxy_temp_file_write_size 64k;

        }



        # 动静分离反向代理配置（多路由指向不同的服务端或界面）

        location ~ .(jsp|jspx|do)?$ {

            proxy_set_header Host $host;

            proxy_set_header X-Real-IP $remote_addr;

            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

            proxy_pass http://127.0.0.1:8080;

        }

    }

}

location

location指令的作用就是根据用户请求的URI来执行不同的应用

语法

location [ = | ~ | ~* | ^~ ] uri {...}

• [ = | ~ | ~* | ^~ ]：匹配的标识
  
  
  
  
  • ~与~*的区别是：~区分大小写，~*不区分大小写
  
  
  • ^~：进行常规字符串匹配后，不做正则表达式的检查
  
  
  
  


• uri：匹配的网站地址


• {...}：匹配uri后要执行的配置段

举例

location = / {

    [ configuration A ]

}

location / {

    [ configuration B ]

}

location /sk/ {

    [ configuration C ]

}

location ^~ /img/ {

    [ configuration D ]

}

location ~* .(gif|jpg|jpeg)$ {

    [ configuration E ]

}

• = / 请求 / 精准匹配A，不再往下查找


• / 请求/index.html匹配B。首先查找匹配的前缀字符，找到最长匹配是配置B，接着又按照顺序查找匹配的正则。结果没有找到，因此使用先前标记的最长匹配，即配置B。


• /sk/ 请求/sk/abc 匹配C。首先找到最长匹配C，由于后面没有匹配的正则，所以使用最长匹配C。


• ~* .(gif|jpg|jpeg)$ 请求/sk/logo.gif 匹配E。首先进行前缀字符的查找，找到最长匹配项C，继续进行正则查找，找到匹配项E。因此使用E。


• ^~ 请求/img/logo.gif匹配D。首先进行前缀字符查找，找到最长匹配D。但是它使用了^~修饰符，不再进行下面的正则的匹配查找，因此使用D。

单页面应用刷新404问题

    location / {

        try_files $uri $uri/ /index.html;

    }

配置跨域请求

server {

    listen   80;

    location / {

        # 服务器默认是不被允许跨域的。

        # 配置`*`后，表示服务器可以接受所有的请求源（Origin）,即接受所有跨域的请求

        add_header Access-Control-Allow-Origin *;

        

        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';

        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

        

        # 发送"预检请求"时，需要用到方法 OPTIONS ,所以服务器需要允许该方法

        # 给OPTIONS 添加 204的返回，是为了处理在发送POST请求时Nginx依然拒绝访问的错误

        if ($request_method = 'OPTIONS') {

            return 204;

        }

    }

}

开启gzip压缩

    # gzip模块设置

    gzip on;               #开启gzip压缩输出

    gzip_min_length 1k;    #最小压缩文件大小

    gzip_buffers 4 16k;    #压缩缓冲区

    gzip_http_version 1.0; #压缩版本（默认1.1，前端如果是squid2.5请使用1.0）

    gzip_comp_level 2;     #压缩等级

    

    # 设置什么类型的文件需要压缩

    gzip_types text/plain application/x-javascript text/css application/xml;

    

    # 用于设置使用Gzip进行压缩发送是否携带“Vary:Accept-Encoding”头域的响应头部

    # 主要是告诉接收方，所发送的数据经过了Gzip压缩处理

    gzip_vary on;

总体而言，Nginx是一款轻量级、高性能、可靠性强且扩展性好的服务器软件，适用于搭建高可用性、高性能的Web应用程序和网站。

今天这篇文章，咱们不聊技术哈，聊聊这两天我经历的事和一些感悟吧。

大致是三个事情：

生病：在医院看到的形形色色

这几天可真是被折磨的够呛，先是我支原体感染，持续咳嗽了两周，结果肺结节了😭

然后是我闺女开始咳嗽，陪着一起打针。在医院看到很多小孩，整个医院几乎是满满的。这是凌晨12点的医院挂号处：

随处可见的都是疲惫不堪的父母和孩子。

最厉害的，还是这位大姐，一边照顾孩子，一边还在写代码（偷偷看了一眼是 java 😂😂）

再加上这几天北方的大雪。想一想：晚上陪孩子打针到深夜，第二天早上冒着大雪去上班。晚上加完班之后再陪孩子来医院。真的是无限的疲惫。

裁员：普通人面临被裁时的反应

我有幸在 7 月的时候经历过一次大裁员，也是在那个时候离开的。

当时有很多没有被裁的同事，一是庆幸自己可以继续留下，毕竟现在行情是真的不好。二是也寄希望于年后可以继续开启招生。

结果等来的不是行情变好而是持续的裁员。

本身裁员嘛，没什么可说的。但是一个朋友的经历以及想法却值得我们进行深思。

事情是这样的：

这位朋友是月初的时候被谈离职，离职协议也都谈完了，赔偿打折，月底走人。

但是在最后这段时间里面，公司却安排了他大量的出差以及无意义的工作。

所以我就跟他说：“这你还干啊？天天熬到那么晚？”

他跟说我：“多表现表现，万一公司可以回心转意，让我继续留下呢？”

这不禁让我想起来之前大家都在说的骆驼祥子，祥子到死的时候都认为这一切是自己不够努力所导致的。

对于公司而言，公司不会养任何已经没有了价值的人，就像我这个朋友一样。同时也不会让一个人的价值过大，无法控制，就像最近 “董宇辉小作文事件” 一样。

对于大多数的普通人而言，最悲惨的就是：当别人拿起屠刀要杀你的时候，你所想到的不是奋起反抗，而是希望可以通过祈求来得到别人的宽恕和原谅。

假合同: 仲裁时才发现入职合同变了

这是一个同学跟我说的，事情是这样的：

这位同学在入职的时候签订了劳动合同，但是当时公司以统一盖章为由，没有及时把劳动合同给他，后来他也忽略了这个事情。

直到前段时间，因为公司长期拖欠工资他发起仲裁，公司拿出来当时签订的劳动合同

发现在他的签字页之外的合同内容，都发生了变化

他的薪资变成了底薪3000，其他的全部是项目奖金的形式。

算是吃了一个亏。

一点小感悟

对于我们这种普通人而言，在工作中大多数的时候真的是处于弱势地位。这与技术好坏并无关系。很多技术很好的人依然充满着焦虑，时刻担心着 35 岁危机的事情。

所以说，打工只是过程，想办法赚钱才是目的。

最后祝大家都可以身体健康，拿到满意的 offer！

勇于尝试可以有更多可能性。想来很多人来稀土掘金分享的初心也是尝试吧。

笔者之前说过笔者已经是迈入35的人，且说实话是一线的大头兵。生活在北京多年，或者活跃在互联网多年，35岁这个魔咒几年前就开始困扰，乃至如今加重笔者的焦虑。

前几年公司受到国家宏观经济政策影响，业绩受到极大影响，连带着年终奖缩水。紧接着三年疫情，原本水深火热的日子，一下雪上加霜。

处在一个难以看到前途的年纪和环境中，笔者和大多数人一样尝试寻找出路。笔者也在其他文章中说过，笔者来稀土掘金的目的就是探索出路。

正如文章开头写的勇于尝试可以有更多可能性。在稀土掘金分享这段时间，写了一些文章，也有很多思考。或许也正是如此让笔者想明白想清楚很多事。

几年前雷军说过一句话：处在风口之上，猪也能飞起来。很长时间里，笔者都在寻找风口，笔者管风口叫做趋势性，但事实上笔者一直没有抓住这个趋势性。后来笔者退而求其次，想到了结构性，想到了应该先察结构性，而后努力提升自己，在关键时候抓住或者等到风口。

或许真的是大趋势不能预测，只能等待。这应该就是所谓的借势。

笔者后来想到，社会是结构性的，人处在结构中，在结构中生存生活，随结构而走而变。结构不是一成不变的，所以有了趋势性。

笔者建议你做抖音个人ip，因为抖音是一个更大的结构性，有着更大的潜在趋势性。正所谓富在术数不在劳身,利在势局不在力耕。

因为行业现状，以及技术本身的特性，程序员天然是一群努力且上进的人。与寻常人相比，程序员更适合做个人ip。当然做个人ip不一定能成，但做什么一定能成呢？

笔者建议你做抖音个人ip，还因为抖音已经发展了几年，用户已经足够大，只要你有一定的才华，一定可以被认可，就如同在稀土掘金一样，同样会呈现算法加持的成果。

笔者相信，只要本着用户为本，科技向善的初心，坚持做下去一定会有收获，一定可以找到一群志同道合的人。

(本文完)

背景介绍

总所周知，有相当一部分的大学生是不会初高中知识的。

因此，每当那种「初等数学为背景编写的算法题」在笔面出现，舆论往往分成"三大派":

甚至那位说"致敬高考"的同学也搞岔了，高考哪有这么简单，美得你 🤣

这仅仅是初中数学「几何学」中较为简单的知识点。

抓住大学生对初高中知识这种「会者不难，难者不会」的现状，互联网大厂似乎更喜欢此类「考察初等数学」的算法题。

因为十个候选人，九个题海战术，HOT 100 和剑指 Offer 大家都刷得飞起了。

冷不丁的考察这种题目，反而更能起到"筛选"效果。

但此类算法题，农业银行 并非首创，甚至是同一道题，也被 华为云、美的 和 百度 先后出过。

下面，一起来看看这道题。

题目描述

平台：LeetCode

题号：149

给你一个数组 points，其中 $points[i] = [x_i, y_i]$ 表示 X-Y 平面上的一个点。求最多有多少个点在同一条直线上。

示例 1：

输入：points = [[1,1],[2,2],[3,3]]



输出：3

示例 2：

输入：points = [[1,1],[3,2],[5,3],[4,1],[2,3],[1,4]]



输出：4

提示：

• $1 <= points.length <= 300$


• $points[i].length = 2$


• $-10^4 <= x_i, y_i <= 10^4$


• points 中的所有点互不相同

枚举直线 + 枚举统计

我们知道，两点可以确定一条线。

一个朴素的做法是先枚举两点（确定一条线），然后检查其余点是否落在该线中。

为避免除法精度问题，当我们枚举两个点 $x$ 和 $y$ 时，不直接计算其对应直线的 斜率和 截距。

而是通过判断 $x$ 和 $y$ 与第三个点 $p$ 形成的两条直线斜率是否相等，来得知点 $p$ 是否落在该直线上。

斜率相等的两条直线要么平行，要么重合。

平行需要 $4$ 个点来唯一确定，我们只有 $3$ 个点，因此直接判定两条直线是否重合即可。

详细说，当给定两个点 $(x_1, y_1)$ 和 $(x_2, y_2)$ 时，对应斜率 $\frac{y_2 - y_1}{x_2 - x_1}$。

为避免计算机除法的精度问题，我们将「判定 $\frac{a_y - b_y}{a_x - b_x} = \frac{b_y - c_y}{b_x - c_x}$ 是否成立」改为「判定 $(a_y - b_y) \times (b_x - c_x) = (a_x - b_x) \times (b_y - c_y)$ 是否成立」。

将存在精度问题的「除法判定」巧妙转为「乘法判定」。

Java 代码：

class Solution {

    public int maxPoints(int[][] points) {

        int n = points.length, ans = 1;

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

            int[] x = points[i];

            for (int j = i + 1; j < n; j++) {

                int[] y = points[j];

                // 枚举点对 (i,j) 并统计有多少点在该线上, 起始 cnt = 2 代表只有 i 和 j 两个点在此线上

                int cnt = 2;

                for (int k = j + 1; k < n; k++) {

                    int[] p = points[k];

                    int s1 = (y[1] - x[1]) * (p[0] - y[0]);

                    int s2 = (p[1] - y[1]) * (y[0] - x[0]);

                    if (s1 == s2) cnt++;

                }

                ans = Math.max(ans, cnt);

            }

        }

        return ans;

    }

}

C++ 代码：

class Solution {

public:

    int maxPoints(vector<vector<int>>& points) {

        int n = points.size(), ans = 1;

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

            vector<int> x = points[i];

            for (int j = i + 1; j < n; j++) {

                vector<int> y = points[j];

                // 枚举点对 (i,j) 并统计有多少点在该线上, 起始 cnt = 2 代表只有 i 和 j 两个点在此线上

                int cnt = 2;

                for (int k = j + 1; k < n; k++) {

                    vector<int> p = points[k];

                    int s1 = (y[1] - x[1]) * (p[0] - y[0]);

                    int s2 = (p[1] - y[1]) * (y[0] - x[0]);

                    if (s1 == s2) cnt++;

                }

                ans = max(ans, cnt);

            }

        }

        return ans;

    }

};

Python 代码：

class Solution:

    def maxPoints(self, points: List[List[int]]) -> int:

        n, ans = len(points), 1

        for i, x in enumerate(points):

            for j in range(i + 1, n):

                y = points[j]

                # 枚举点对 (i,j) 并统计有多少点在该线上, 起始 cnt = 2 代表只有 i 和 j 两个点在此线上

                cnt = 2

                for k in range(j + 1, n):

                    p = points[k]

                    s1 = (y[1] - x[1]) * (p[0] - y[0])

                    s2 = (p[1] - y[1]) * (y[0] - x[0])

                    if s1 == s2: cnt += 1

                ans = max(ans, cnt)

        return ans

TypeScript 代码：

function maxPoints(points: number[][]): number {

    let n = points.length, ans = 1;

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

        let x = points[i];

        for (let j = i + 1; j < n; j++) {

            // 枚举点对 (i,j) 并统计有多少点在该线上, 起始 cnt = 2 代表只有 i 和 j 两个点在此线上

            let y = points[j], cnt = 2;

            for (let k = j + 1; k < n; k++) {

                let p = points[k];

                let s1 = (y[1] - x[1]) * (p[0] - y[0]);

                let s2 = (p[1] - y[1]) * (y[0] - x[0]);

                if (s1 == s2) cnt++;

            }

            ans = Math.max(ans, cnt);

        }

    }

    return ans;

};

• 时间复杂度：$O(n^3)$


• 空间复杂度：$O(1)$

枚举直线 + 哈希表统计

根据「朴素解法」的思路，枚举所有直线的过程不可避免，但统计点数的过程可以优化。

具体的，我们可以先枚举所有可能出现的 直线斜率（根据两点确定一条直线，即枚举所有的「点对」），使用「哈希表」统计所有 斜率 对应的点的数量，在所有值中取个 $max$ 即是答案。

一些细节：在使用「哈希表」进行保存时，为了避免精度问题，我们直接使用字符串进行保存，同时需要将 斜率 约干净（套用 gcd 求最大公约数模板）。

Java 代码：

class Solution {

    public int maxPoints(int[][] points) {

        int n = points.length, ans = 1;

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

            Map<String, Integer> map = new HashMap<>();

            // 由当前点 i 发出的直线所经过的最多点数量

            int max = 0;

            for (int j = i + 1; j < n; j++) {

                int x1 = points[i][0], y1 = points[i][1], x2 = points[j][0], y2 = points[j][1];

                int a = x1 - x2, b = y1 - y2;

                int k = gcd(a, b);

                String key = (a / k) + "_" + (b / k);

                map.put(key, map.getOrDefault(key, 0) + 1);

                max = Math.max(max, map.get(key));

            }

            ans = Math.max(ans, max + 1);

        }

        return ans;

    }

    int gcd(int a, int b) {

        return b == 0 ? a : gcd(b, a % b);

    }

}

C++ 代码：

class Solution {

public:

    int maxPoints(vector<vector<int>>& points) {

        int n = points.size(), ans = 1;

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

            map<string, int> map;

            int maxv = 0;

            for (int j = i + 1; j < n; j++) {

                int x1 = points[i][0], y1 = points[i][1], x2 = points[j][0], y2 = points[j][1];

                int a = x1 - x2, b = y1 - y2;

                int k = gcd(a, b);

                string key = to_string(a / k) + "_" + to_string(b / k);

                map[key]++;

                maxv = max(maxv, map[key]);

            }

            ans = max(ans, maxv + 1);

        }

        return ans;

    }

    int gcd(int a, int b) {

        return b == 0 ? a : gcd(b, a % b);

    }

};

Python 代码：

class Solution:

    def maxPoints(self, points):

        def gcd(a, b):

            return a if b == 0 else gcd(b, a % b)

        

        n, ans = len(points), 1

        for i in range(n):

            mapping = {}

            maxv = 0

            for j in range(i + 1, n):

                x1, y1 = points[i]

                x2, y2 = points[j]

                a, b = x1 - x2, y1 - y2

                k = gcd(a, b)

                key = str(a // k) + "_" + str(b // k)

                mapping[key] = mapping.get(key, 0) + 1

                maxv = max(maxv, mapping[key])

            ans = max(ans, maxv + 1)    

        return ans

TypeScript 代码：

function maxPoints(points: number[][]): number {

    const gcd = function(a: number, b: number): number {

        return b == 0 ? a : gcd(b, a % b);

    }

    let n = points.length, ans = 1;

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

        let mapping = {}, maxv = 0;

        for (let j = i + 1; j < n; j++) {

            let x1 = points[i][0], y1 = points[i][1], x2 = points[j][0], y2 = points[j][1];

            let a = x1 - x2, b = y1 - y2;

            let k = gcd(a, b);

            let key = `${a / k}_${b / k}`;

            mapping[key] = mapping[key] ? mapping[key] + 1 : 1;

            maxv = Math.max(maxv, mapping[key]);

        }

        ans = Math.max(ans, maxv + 1);

    }

    return ans;

};

• 时间复杂度：枚举所有直线的复杂度为 $O(n^2)$；令坐标值的最大差值为 $m$，gcd 复杂度为 $O(\log{m})$。整体复杂度为 $O(n^2 \times \log{m})$


• 空间复杂度：$O(n)$

总结

虽然题目是以初中数学中的"斜率 & 截距"为背景，但仍有不少细节需要把握。

这也是「传统数学题」和「计算机算法题」的最大差别：

• 过程分值: 传统数学题有过程分，计算机算法题没有过程分，哪怕思路对了 $90$%，代码没写出来，就是 $0$ 分；


• 数据类型：传统数学题只涉及数值，计算机算法题需要考虑各种数据类型；


• 运算精度：传统数学题无须考虑运算精度问题，而计算机算法题需要；


• 判定机制：传统数学题通常给定具体数据和问题，然后人工根据求解过程和最终答案来综合评分，而计算机算法题不仅仅是求解一个具体的 case，通常是给定数据范围，然后通过若个不同的样例，机器自动判断程序的正确性；


• 执行效率/时空复杂度：传统数学题无须考虑执行效率问题，只要求考生通过有限步骤（或引用定理节省步骤）写出答案即可，计算机算法题要求程序在有限时间空间内执行完；


• 边界/异常处理：由于传统数学题的题面通常只有一个具体数据，因此不涉及边界处理，而计算机算法题需要考虑数据边界，甚至是对异常的输入输出做相应处理。

可见，传统数学题，有正确的思路基本上就赢了大半，而计算机算法题嘛，有正确思路，也只是万里长征跑了个 $400$ 米而已。

今年9月结束了和美团三年的合同后，对于步入中年的我，想让自己停一下，对自己的人生价值进行深入而系统的思考。

曾经我有一个梦想，不对，是有很多梦想，比如成为数学家、科学家、飞行员、宇航员或将军，哪一个才是我真正的梦想？那个我愿意用下半生去奋斗去拼搏的梦想？

结合自己的名字叫天文，基于自己所学的专业、过往的经历、资源、国家政策导向和人类社会的发展趋势，我选择了航天方向的梦想，从点燃孩子们的航天梦开始，成为航天领域的企业家。

大环境比想象的差

当我把创业的想法，分享给身边的家人朋友时，几乎所有的人都和说，现在经济环境这么差，工作这么难找，还是要慎重，不要轻易去创业。

因为儿子的托育机构跑路了，我需要协助看娃，即使有合适的工作，也不能立即去上班，所以我基于老婆的公司尝试去招人。

通过招聘，我发现，不管是艺培行业的老师，还是互联网行业的产研人员，失业的比例都很大，很多23年的应届生，毕业后一直找不到工作，干脆国庆期间就离开深圳回老家了。

对于产品经理的实习生岗位，每天都有大量在香港大学、香港中文、香港科技、香港理工、香港城市、新加坡大学、清华大学以及很多国内的985的硕士前来应聘我们的岗位。

社招也是一样，很多名校毕业的，找了好几个月都没有合适的工作，普通学历的产研人员，可能连面试机会都很少。比如前端方向，只要我在 boss 开放招聘，每天都会有几百人主动找我，看都看不过来。

而猎头约我去面试，听到我因为要创业，无一不说现在环境很差，还是好好考虑一下她们推荐的岗位吧。

过去一年我接触过的一些机会

对于已经超过35岁的码农，只要满足企业的用人诉求，即使环境再差，也是有很多工作机会的，在此和大家聊一聊，过去一年我都参加或拒绝了哪些公司的面试。

去年7月，我就多次向领导提了离职，那时也想创业，但没有现在强烈，所以还是认真地找了找工作，那时的面试机会，应该是今年的三倍以上。

首先字节的岗位最多，至少一半猎头推荐的都有字节的岗位，我选择了面试客服体验部，先是在上海的前端总监加了我微信，入职后我向他汇报，管理深圳16人左右的团队，一面的面试官应该是我入职后的下属，但我不是很想去，所以面试随便聊了聊，加了微信，后面还约了个饭。

后续字节的岗位，虽然每周都有猎头给我推荐，但是我都没有答应面试，最近答应约了的面试，因为决定创业了，所以主动取消了，飞书的HR还专门打电话让我再考虑考虑，看来是确实招人，而且他还说有很多方向可以选。

去年我8月我面了美的集团的大前端岗位，通过了四轮，面完HRVP后，已经约好了和CEO面试，但因为我决定留在美团再干一年，做我想做的人工智能，所以我主动取消了面试。这应该是我这几年面试过最高规格的面试，每一轮都是三个以上面试官，入职后直接向CEO汇报，整合集团大前端方向所有的研发，需要管理100多人。

当然也有其他一些高管职位，今年夏天也接到一个猎头推荐我面试贝壳的大前端负责人，直接向CTO汇报，管理200多人的团队，原来的负责人已经提离职，岗位需要保密。

对了，还有编程猫，因为我创业的方向和少儿编程有关，所以也想和他们聊一聊，面试的是高级技术总监，接手联合创始人管理的编程系统研发团队，一面我的是一个大姐，她是web前端负责人，管理20多人，我上来当HR的面，指出了几个明显的bug，让她不高兴了，所以她没让我过，本来还想和他们老板聊一聊。

去年8月中旬后，我基本就不答应面试了，但经常协助一个离职的美团同学面试，期间他面试了字节的多个部门，比如我推荐的web剪映负责人，他因为是web图形学方向的，不够匹配，只通过了两轮。后面他拿到了蔚来手机、小米、阿里、腾讯和万兴科技的offer。

最后，他犹豫是去腾讯还是万兴科技，我们还吃夜宵专门讨论了一下。腾讯他面了三个部门，第三个部门才给的机会，因为他马上要去香港大学MBA，所以选择了腾讯，不带团队。但我建议他去万兴，因为是负责一个事业部，管理近百人团队，对职业发展更好。

今年我好像只答应了两三个面试，其中一个小红书的质效前端负责人，猎头忽悠我年薪可以给到250万到400万，后来又不招了，最近约上了，聊了聊，入职后管理团队应该只有五六人，应该不会有那么高的薪资，而且必须去北京或上海，所以通过了，我也不能去。

还有参加了希音的面试，是新成立的基础架构部，一面我的是一个腾讯云过去的前端同学，聊得还可以，二面和部长聊了聊，感觉他压力有点大，我过去后需要自己找方向，比如端智能，不带团队。

突然想起来，我还面了金山云，她们的HR很热情，所以我答应聊了聊，一面的面试官，对我反馈很好，但他们招聘的岗位职级比较低，不匹配，而且他们在珠海，通过了我也不会去。

有个比较好的机会，但没有参加面试，这华为孟晚舟直接负责的总部研发团队，入职后管理一百人左右的大前端团队，离我家比较近，还能接触到华为未来的掌门人。

也接到过一些外企的面试邀请，但都没参加。

工作难找，不仅要把机会留给年轻人，还要创造更多的机会

很显然，当前我们正处于经济大萧条的前夜，或者已经在经济危机之中，但正如谭sir视频中一个老人说的：要向前看。

危机有”危“和”机“组成，意味危险和机会共存，消极的人只会抱怨危险，只有积极的人才能抓住机会，危险越大，机会越大。

很多伟大的公司，都是诞生于危机之中。新的一年，国际国内经济大环境发生了很大的变化，国家的工作重点逐步从抵抗疫情转向振兴经济。

中国经济在经历了近四十年的高速增长后，宏观经济增速放缓属于必然。

一是历史上的日本、德国，在二十世纪五六十年代和七十年代都有过非常高的增长期，然后都慢慢放缓。中国是一个特例，过去四十年中国GDP的增长保持着两位数，所以未来中国GDP的增长放缓至4%—5%符合历史规律。

二是中国的人口红利和流量红利时代已经结束。中国统计局数据显示，中国25-69岁之间的人口，在过去三十年（1990-2020年）增长了76%，但是今后三十年（2020-2050年）会从9.4亿人降到7亿人。

中国的互联网红利见顶，中国互联网络信息中心数据显示，2007年至2017年中国互联网用户的上网时长增长了36倍，相当于每年平均增长约43%。但是在2017年至2022年只增长了1.5倍，相当于每年平均增长约8%。

虽然短期至中期内，中国经济将不可避免地经历转型阵痛，但从长期看，中国每年4%-5%的经济增长速度还是远高于其他主要的大型经济体。牛津和哈佛发布的研究数据显示，从GDP复合增长率来看，中国是美国的1.8倍、是德国的2.3倍、是日本的2.5倍。

另外一个因素是，在亚洲国家中，中国的经济总量占有绝对领先的地位。麦肯锡前段时间做了数据统计，中国2022年的GDP约18万亿美元，到2030年，假设每年仅按2%的速度增长，中国GDP的增量就相当于印度今天的GDP总量。

虽然中国已经是全球第二大经济体，之所以有这么大的经济增长潜力，是因为从世界的角度来看，中国的人均GDP和人均消费还很低，世界银行数据显示，2021年，中国人均GDP约是美国的1/6，人均消费约是美国的1/9。

同时，中国的城市人口体量巨大且仍在不断增长。中国今天的城镇化率是65%，未来5-10年可能增长到75%甚至是80%，预计约1.4亿人口会变成新增城镇人口，这一人口增量相当于美国总人口的40%。

所以，我们要对国家的发展有信心，困难只是暂时的。虽然我上有老，下有小，但也不至于没饭吃，但很多年轻人，他们需要一份工作，才能在大城市生存。

所以需要更多像我一样的中年人，不仅不要和年轻人抢工作机会，还要积极为年轻人创造新的工作机会。地球竞争太激烈了，我们的未来在上天入地(这好像是我在美团的老板王兴说的)。

我打算干啥

我从小就有一个航天梦，大学选择了航天测控和卫星导航相关的专业，毕业后成了通信军官，但没能进入航天系统，对未来有些迷茫，于是选择了退役。

退役后进入了外企，后面又去了美团等互联网公司工作了几年，如今已经是一双儿女的父亲。前段时间，陪儿子读了一本以登月主题的绘本，让我逐渐找回了曾经的梦想。

好奇是人类的天性，也是社会进步的动力。探索太空不仅可以满足人类的好奇心，更可以为人类的未来发展提供了无限的可能性。

太空探索是一项长期而复杂的事业，需要一代代有航天梦的人才持续加入，这就是我们创业的出发点，希望同大家一起点燃孩子们的航天梦：通过以太空为主题的绘本，引入绘画创作的方向，并将绘画作品作为图形编程的素材，完成各种编程创作任务，帮助孩子们掌握 “ 带领人类飞离太阳系 ” 需要学习掌握的各种知识技能。

等这些孩子长大以后，我们再把他们招聘到我们制造航天器的公司，实现让人类可以进行商业星际旅行。

我们正在研发的系统

两个小程序，蜗牛绘馆和艺培助理已经发布到线上，等商业模式完全跑通后，再同步做app。

3D展馆：以 3D 的方式展示学生的绘画作品，帮助机构推广招生。

AIGC工具：智能抠图、以文生图、数字人、PPT制作、智能成片等。

海报设计：参考业界的稿定设计、美图等精品，为艺培机构提供精品海报和海量AI生成的素材，支持通过PC端和小程序下载。

课件系统：提供自营的绘本+绘画+编程的在线特色课件，并打造一个课件生产生态，提供各种类别的课件PPT。

编程系统：可导入图片和绘画作品，为学生编程提供丰富的素材。

长远规划及招聘计划

未来三到五年，我们希望可以做到：

• 蜗牛绘馆：在中国多个核心城市开几百家直营绘馆，月活家长达到几十万，会员用户达到几万，实现年营收几亿。


• 艺培助理：月活达到几百万，服务几千家加盟店，拥有几万普通会员，实现年营收几十亿。


• 各类社区：面向成人，对于不同的兴趣方向，打造不同的内容社区。


• 周边生态：基于太空主题，研发相关的绘本、教具、玩具、服装等。


• 航天制造：研发自己的航天飞行器，探索飞离太阳系的各种技术。

发展顺利的话，我们的组织架构及规模设想：

• 基础技术部(500人)：提供私有云服务、企业效能系统及AIGC的技术基座。


• 绘馆事业部(500人)：负责线下绘馆门店业务的开展，教学及教务为主。


• 换购事业部(200人)：负责二手交易平台的系统及线上线下运营。


• 课件事业部(300人)：负责课件系统的研发及课件社区的运营。


• 编程事业部(300人)：负责少儿编程相关的课程及系统研发。


• 营销事业部(200人)：负责3D展馆、海报、视频制作等的研发及业务开展。


• 玩具事业部(100人)：研发航天相关的玩具、服装或教具。


• 公益事业部(100人)：负责把家长换课的闲置物品捐赠给大城市农民工或贫困地区的孩子，组织志愿者远程给偏远地区孩子上科创综合课。

总结

和平年代，虽然没有战斗，但更需要军人的勇气，邓小平当年指出，军队建设要服从国家大局。虽然我退役了，但军人的血性刻在骨里，相比英雄的先辈们在抗日战争和抗美援朝中付出的鲜血，创业的艰难算什么呀~

我们要把航天梦一代代的传下去，我们将付出任何代价、忍受任何重负、应付任何艰辛、支持任何朋友、反对任何敌人，以确保梦想的存在与实现。

有梦想的人才有灵魂，才会快乐。我们为梦想所奉献的精力、信念和忠诚，将照亮我们的国家和身边的人，而这火焰发出的光芒定能照亮全世界。

随着前端项目的复杂度越来越高，打包后的文件体积也越来越大，这直接影响到页面的加载速度。为了优化加载速度，我们需要采取各种方式来减小包的体积。使用 16 进制存储就是一种非常有效的方法。

以 @tenado/lunarjs 库为例，它提供了阴阳历转换以及获取节日信息等功能。如果我们查看它的源码，可以看到使用了 16 进制存储。例如src/lunar.js

# src/lunar.js

export default [ 0x4bd8, 0x4ae0, 0xa570, 0x54d5, 0xd260, ... ];

这些信息如果用字符串存储，会占用很多字节。但使用 16 进制后，每个阴历信息只需要 6 个字符串。这极大地减少了库的大小。在实际生产环境中，使用 16 进制存储甚至可以节省几十 KB 的大小。

此外，16 进制还可以用于压缩其他数据，比如图片等资源。使用 16 进制编码，可以达到无损压缩的效果，相比传统压缩算法可以减小体积而不影响质量。

总之，16 进制编码是一种非常高效的存储方式，可以大幅减小项目的打包体积，提升页面加载速度。在前端优化中，合理使用 16 进制编码是一个非常重要和有效的手段。

16 进制的基本概念

16 进制在数学中是一种逢16进1的进位制。一般用数字0到9和字母A到F表示，其中：A~F相当于十进制的10~15，这些称作十六进制数字，在 js 中，16 进制使用 0x 前缀表示。

它的优点是可以使用更少的位数来表示一个数值，每个 16 进制位数代表 4 个二进制位，例如0x10，表示16进制的10，十进制的16，二进制表示为00010000，占用 4 个二进制位。

16 进制在代码中的表示

在库@tenado/lunarjs 中，保存了 1900-2100 年的阴历信息，数据格式如下：

{

  1900: {

    year: 1900,

    firstMonth: 1,

    firstDay: 31,

    isRun: false,

    runMonth: 8,

    runMonthDays: 29,

    monthsDays: [29, 30, 29, 29, 30, 29, 30, 30, 30, 30, 29, 30],

  },

  1901: {

    year: 1901,

    firstMonth: 2,

    firstDay: 19,

    isRun: false,

    runMonth: 0,

    runMonthDays: 0,

    monthsDays: [29, 30, 29, 29, 30, 29, 30, 29, 30, 30, 30, 29],

  },

}

将 1900-2100 年的数据存起来，占用的体积大概是 41k，作为包来说这个体积很大，这里存为十六进制数据，将数据压缩到 4k。

如何压缩数据呢？查看数据规律，我们发现：

闰月天数：只有三种值，即 0、29、30，在计算的时候先判断是否为闰月，再计算天数，0 代表 29， 1 代表 30

1-12 月天数，天数可以为 29 和 30，分别用 0 和 1 表示

闰月月份，闰月可能为 1-12，因此我们使用4个二进制数表示，最大可以表示 16

用 17 个二进制数表示阴历数据信息，从右到左：

这里transform/index.js实现了一个简单的转换处理，将数据转换为 1900-2100 年依次按 index 排序的数组，数组的每一项里面存储了该年的阴历信息。

使用位运算从 16 进制中还原数据

位运算是将参与运算的数字转换为二进制，然后逐位对应进行运算。

按位与& 按位与运算为：两位全为1，结果为1，即1&1=1，1&0=0，0&1=0，0&0=0

按位或| 按位或运算为：两位只要有一位为1，结果则为1，即1|1=1，1|0=1，0|1=1，0|0=0

异或运算^ 两位为异，即一位为1一位为0，则结果为1，否则为0。即1 ^ 1=0，1 ^ 0=1，0 ^ 1=1，0 ^ 0=0

取反~ 将一个数按位取反，即~ 0 = 1，~ 1 = 0

右移>> 将一个数右移若干位，右边舍弃，正数左边补0，负数左边补1。每右移一位，相当于除以一次2 例如8 >> 2表示将8的二进制数1000右移两位变成0010 例如i >>= 2表示将变量i的二进制右移两位，并将结果赋值给i

设置二进制指定位置的值为1 value | (1 << position)，例如设置十进制数8(1000)的第2位二进制数为1，注意这里index从0开始，且是从右向左计算，可以这样做8 | (1 << 2)，结果为1100

设置二进制指定位置的值为0 value & ~(1 << position)，例如设置十进制数8(1000)的第3位二进制数为0，注意这里index从0开始，可以这样做8 & ~(1 << 3)，结果为0000

1、获取 1-4 位存储的闰月月份信息

取出16进制数据中存储的，从右边数1-4位数据，使用二进制数1111和十六进制数据按位与运算，可以获取到月份信息。通过转换1111可以得到对应的十六进制为0xf

例如，从src/lunar.js的数据里面获取1900年，即index为0的数据，进行位运算，0x4bd8 & 0xf可以得到结果为8，即1900年的8月为闰月。

2、获取 5-16 位存储的月天数信息

取出16进制数据中存储的，从右边数5-16位数据，仍旧可以使用按位与运算，获取到月天数信息。

从16开始的二进制数为1000000000000000，对应的十六进制为0x8000，到4结束的二进制数为1000，对应的十六进制为0x8，每次向右移一位进行按位与计算，可以获取到1-12月的天数数据，可以这样计算：

let sum = 0;

const lunar = 0x4bd8;

for (let i = 0x8000; i > 0x8; i >>= 1) {

  sum += lunar & i ? 1 : 0;

}

3、获取 17 位存储的闰月天数信息

取出16进制数据中存储的，从右边数17位数据，使用二进制数10000000000000000和十六进制数据按位与运算，可以获取到闰月天数信息，10000000000000000对应的十六进制为0x10000，0x4bd8 & 0x10000可以得到结果为0，即1900年的闰月天数为29。

总结

总结起来，使用16进制保存数据可以有效减小包体积，提高前端项目的加载速度。在具体实现上，可以利用位运算来从16进制中还原数据。以下是一些关键点的总结：

1、数据格式

数据以16进制形式存储，可以有效减小体积。在JavaScript中，16进制使用0x前缀表示，例如0x4bd8。

2、数据规律

观察数据规律，了解存储的信息是如何组织的，包括每部分数据的含义和位数

3、使用位运算还原数据

使用位运算可以从16进制中还原具体的数据。以下是一些常用的位运算操作：

按位与&： 用于提取指定位的信息。

右移>>： 用于将二进制数向右移动，类似于除以2的操作。

设置二进制指定位置的值为1： 使用value | (1 << position)操作。

设置二进制指定位置的值为0： 使用value & ~(1 << position)操作。

4、注意事项

使用16进制存储需要在代码中添加注释，以便他人理解和维护。

数据存储格式的选择要根据具体场景和需求，权衡可读性和体积优化。

综合以上总结，合理使用16进制存储数据是一种有效的前端优化手段，特别适用于需要大量静态数据的情况。

近日，项目中有一个耗时较长的Job存在CPU占用过高的问题，经排查发现，主要时间消耗在往MyBatis中批量插入数据。mapper configuration是用foreach循环做的，差不多是这样。（由于项目保密，以下代码均为自己手写的demo代码）

<insert id="batchInsert" parameterType="java.util.List">  

    insert int0 USER (id, name) values  

    <foreach collection="list" item="model" index="index" separator=",">   

        (#{model.id}, #{model.name})  

    </foreach>  

</insert>  

这个方法提升批量插入速度的原理是，将传统的：

INSERT INTO `table1` (`field1`, `field2`) VALUES ("data1", "data2");  

INSERT INTO `table1` (`field1`, `field2`) VALUES ("data1", "data2");  

INSERT INTO `table1` (`field1`, `field2`) VALUES ("data1", "data2");  

INSERT INTO `table1` (`field1`, `field2`) VALUES ("data1", "data2");  

INSERT INTO `table1` (`field1`, `field2`) VALUES ("data1", "data2");  

转化为：

INSERT INTO `table1` (`field1`, `field2`)   

      VALUES ("data1", "data2"),  

             ("data1", "data2"),  

             ("data1", "data2"),  

             ("data1", "data2"),  

             ("data1", "data2");  

在MySql Docs中也提到过这个trick，如果要优化插入速度时，可以将许多小型操作组合到一个大型操作中。理想情况下，这样可以在单个连接中一次性发送许多新行的数据，并将所有索引更新和一致性检查延迟到最后才进行。

乍看上去这个foreach没有问题，但是经过项目实践发现，当表的列数较多（20+），以及一次性插入的行数较多（5000+）时，整个插入的耗时十分漫长，达到了14分钟，这是不能忍的。在资料中也提到了一句话：

Of course don't combine ALL of them, if the amount is HUGE. Say you have 1000 rows you need to insert, then don't do it one at a time. You shouldn't equally try to have all 1000 rows in a single query. Instead break it int0 smaller sizes.

它强调，当插入数量很多时，不能一次性全放在一条语句里。可是为什么不能放在同一条语句里呢？这条语句为什么会耗时这么久呢？我查阅了资料发现：

Insert inside Mybatis foreach is not batch, this is a single (could become giant) SQL statement and that brings drawbacks:

some database such as Oracle here does not support.

in relevant cases: there will be a large number of records to insert and the database configured limit (by default around 2000 parameters per statement) will be hit, and eventually possibly DB stack error if the statement itself become too large.

Iteration over the collection must not be done in the mybatis XML. Just execute a simple Insertstatement in a Java Foreach loop. The most important thing is the session Executor type.

SqlSession session = sessionFactory.openSession(ExecutorType.BATCH);

for (Model model : list) {

session.insert("insertStatement", model);

}

session.flushStatements();

Unlike default ExecutorType.SIMPLE, the statement will be prepared once and executed for each record to insert.

从资料中可知，默认执行器类型为Simple，会为每个语句创建一个新的预处理语句，也就是创建一个PreparedStatement对象。

在我们的项目中，会不停地使用批量插入这个方法，而因为MyBatis对于含有的语句，无法采用缓存，那么在每次调用方法时，都会重新解析sql语句。

Internally, it still generates the same single insert statement with many placeholders as the JDBC code above.

MyBatis has an ability to cache PreparedStatement, but this statement cannot be cached because it containselement and the statement varies depending on the parameters. As a result, MyBatis has to 1) evaluate the foreach part and 2) parse the statement string to build parameter mapping [1] on every execution of this statement. And these steps are relatively costly process when the statement string is big and contains many placeholders.

[1] simply put, it is a mapping between placeholders and the parameters.

从上述资料可知，耗时就耗在，由于我foreach后有5000+个values，所以这个PreparedStatement特别长，包含了很多占位符，对于占位符和参数的映射尤其耗时。并且，查阅相关资料可知，values的增长与所需的解析时间，是呈指数型增长的。

图片

所以，如果非要使用 foreach 的方式来进行批量插入的话，可以考虑减少一条 insert 语句中 values 的个数，最好能达到上面曲线的最底部的值，使速度最快。一般按经验来说，一次性插20~50行数量是比较合适的，时间消耗也能接受。

重点来了。上面讲的是，如果非要用的方式来插入，可以提升性能的方式。而实际上，MyBatis文档中写批量插入的时候，是推荐使用另外一种方法。（可以看

http://www.mybatis.org/mybatis-dyn… 中 Batch Insert Support 标题里的内容）

SqlSession session = sqlSessionFactory.openSession(ExecutorType.BATCH);  

try {  

    SimpleTableMapper mapper = session.getMapper(SimpleTableMapper.class);  

    List<SimpleTableRecord> records = getRecordsToInsert(); // not shown  

   

    BatchInsert<SimpleTableRecord> batchInsert = insert(records)  

            .int0(simpleTable)  

            .map(id).toProperty("id")  

            .map(firstName).toProperty("firstName")  

            .map(lastName).toProperty("lastName")  

            .map(birthDate).toProperty("birthDate")  

            .map(employed).toProperty("employed")  

            .map(occupation).toProperty("occupation")  

            .build()  

            .render(RenderingStrategy.MYBATIS3);  

   

    batchInsert.insertStatements().stream().forEach(mapper::insert);  

   

    session.commit();  

} finally {  

    session.close();  

}  

即基本思想是将 MyBatis session 的 executor type 设为 Batch ，然后多次执行插入语句。就类似于JDBC的下面语句一样。

Connection connection = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/mydb?useUnicode=true&characterEncoding=UTF-8&useServerPrepStmts=false&rewriteBatchedStatements=true","root","root");  

connection.setAutoCommit(false);  

PreparedStatement ps = connection.prepareStatement(  

        "insert int0 tb_user (name) values(?)");  

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

    ps.setString(1,name);  

    ps.addBatch();  

}  

ps.executeBatch();  

connection.commit();  

connection.close();  

经过试验，使用了 ExecutorType.BATCH 的插入方式，性能显著提升，不到 2s 便能全部插入完成。

总结一下

如果MyBatis需要进行批量插入，推荐使用 ExecutorType.BATCH 的插入方式，如果非要使用  的插入的话，需要将每次插入的记录控制在 20~50 左右。

前言

我们有一个需求，用户的昵称如果长度超过6就截取前6个字符并显示...。今天，测试突然提了一个bug，某个用户的昵称只显示了...，鼠标hover的时候又显示2个字的昵称。刚看到这个问题的时候我也是一头雾水。

找出原因

在看到这个现象后，我发现其他昵称都显示正常，但实在摸不着头脑这到底是怎么回事。然后查看了一下其他2个字的昵称是没问题的，然后通过console.log发现这个昵称居然长度有8，走了截取的分支。然后通过google发现这里面应该包含了零宽字符。

其实，第一时间就应该想到这个字符串不对劲的，但完全忘记了零宽字符的存在，走了不少弯路。

在查找的过程中发现，Array.from可以查看字符串的真实长度，除了emoji。

不过Array.from并不能解决我的问题。

使用正则匹配unicode码点过滤零宽字符

在网上找了个方法来过滤掉这些看不见的字符，最常见的解决方案就是下面这行代码。

str.replace(/[\u200b-\u200f\uFEFF\u202a-\u202e]/g, "");

然而并没有用，我开始怀疑是不是这个方法有问题，然后遍历了这个昵称，把它的每个字符都转换成码点，发现这个昵称里的零宽字符并不是常见的这几种。

后来，又找到了一个比较完善的码点正则，但它太完善了，很长很长，也会过滤掉emoji，这可不行，用户昵称可能会包含emoji的。（这里就不贴出来代码了，太长了而且不适合我的情况。）

使用正则匹配unicode类别

一个字符有多种unicode属性，而正则支持按unicode属性匹配。

function stripNonPrintableAndNormalize(text, stripSurrogatesAndFormats) {

    // strip control chars. optionally, keep surrogates and formats

    if(stripSurrogatesAndFormats) {

      text = text.replace(/\p{C}/gu, '');

    } else {

      text = text.replace(/\p{Cc}/gu, '');

      text = text.replace(/\p{Co}/gu, '');

      text = text.replace(/\p{Cn}/gu, '');

    }



    // other common tasks are to normalize newlines and other whitespace



    // normalize newline

    text = text.replace(/\n\r/g, '\n');

    text = text.replace(/\p{Zl}/gu, '\n');

    text = text.replace(/\p{Zp}/gu, '\n');



    // normalize space

    text = text.replace(/\p{Zs}/gu, ' ');



    return text;

}

console.log("⁡⁡⁠河豚".length);

console.log(stripNonPrintableAndNormalize("⁡⁡⁠河豚", true).length);

总结

这个昵称其实就是包含了&nobreak;，通过unicode类别匹配可以过滤掉它。

我之前有在原贴用户主页的控制台中看见了&nobreak;，但当时居然没当回事，以为是别人对昵称做的处理。如果直接搜它马上就能解决问题了，有不少人遇到non-break-space引发的bug。谨以此记，吸取教训。

参考链接：stackoverflow中的解决办法、unicode属性

       最近有玩家发来邮件，对我们的游戏提了一个要求。就是他想一边收听其它APP播放的音乐一边玩我们的游戏，而又不想我们游戏的背景音乐扰乱他正在收听的音乐。要实现这个需求，其实就是要检测手机是否有其它APP正在使用系统播放音乐。翻了一遍Unity的音频管理组件，发现没有相关接口直接可以探测手机是否正在被其它应用播放音乐。这个就有点小麻烦了，还得针对各个移动平台写原生方法进行检测。接下来我们就一起来探讨一下怎么实现这个玩家提出来的需求。

       首先我们实现Android平台的。

       先下载一个Android studio，建立一个空Activity的模块，并添加一个MusicPlayer类，如下图：

         我们的重点是MusicPlayer类，类的代码如下：

package com.music.checkplay;

import android.app.Activity;

import android.app.Service;

import android.content.Context;

import android.media.AudioManager;

import android.media.AudioPlaybackConfiguration;

import java.lang.reflect.InvocationTargetException;

import java.lang.reflect.Method;

import java.util.List;

public class MusicPlayer {

    private Activity _unityActivity;

    private Context _context;

    private Class<?> _unityPlayer;

    private Method _unitySendMessage;

    private AudioManager _audio;

    public void Init()

    {

        if(_unityActivity == null)

        {

            try {

                _unityPlayer = Class.forName("com.unity3d.player.UnityPlayer");

                Activity avt = (Activity) _unityPlayer.getDeclaredField("currentActivity").get(_unityPlayer);

                _unityActivity = avt;

                _context = avt;

                _audio = (AudioManager)_unityActivity.getSystemService(Service.AUDIO_SERVICE);

            }

            catch (ClassNotFoundException e){

                System.out.println(e.getMessage());

            }

            catch (IllegalAccessException e)

            {

                System.out.println(e.getMessage());

            }

            catch (NoSuchFieldException e)

            {

                System.out.println(e.getMessage());

            }

        }

    }



    private boolean CallUnity(String goName, String functionName, Object... args)

    {

        try {

            if(_unitySendMessage == null)

                _unitySendMessage = _unityPlayer.getMethod("UnitySendMessage", String.class, String.class, Object.class);

            _unitySendMessage.invoke(_unityPlayer, goName, functionName, args);

            return true;

        } catch (IllegalAccessException e)

        {

            System.out.println(e.getMessage());

        }

        catch (NoSuchMethodException e)

        {

            System.out.println(e.getMessage());

        }

        catch (InvocationTargetException e)

        {

            System.out.println(e.getMessage());

        }

        return false;

    }



    ///当前系统音乐是否处于待机状态

    public boolean IsMusicActive()

    {

        return _audio.isMusicActive();

    }



     //是否有音乐在播放

    public boolean IsMusicPlay()

    {

        List<AudioPlaybackConfiguration> apcs = _audio.getActivePlaybackConfigurations();

        for (AudioPlaybackConfiguration config : apcs)

        {

            int conty = config.getAudioAttributes().getContentType();

            if(conty == 2)

                return  true;

        }

        return false;

    }

}

        Init() 方法通过反射方法获取UnityActivity, 并把各类变量保存下来。

       (AudioManager)_unityActivity.getSystemService(Service.AUDIO_SERVICE) 这一行代码是获取android audio system service, 后面的音频占用输出检测主要是通过这个服务进行检测的。

       方法IsMusicActive()是检测当前Music类型的音频是否被激活。AudioManager.isMusicActive() 方法无论是否有其它应用正在播放音乐，这个方法始终返回ture。靠这个方法检测音乐或曲目正在播放显然是不靠谱的。个人对这个方法的应用理解，更倾向于是检测音乐频道是否处于待机状态。

       IsMusicPlay() 方法是通过捕获音频内容的属性数据分析出是否正在播放音乐类内容，如果是音乐类内容，则contentType类型返回值为2. 后面我们主要用这个方法来检测系统是否正在播放着音乐类内容。

    我们把模块输出为 aar包，把它复制到unity plugins文件夹下面，这样android平台的原生检测方法就算完成了。如下图：

       接下来我们继续解决IOS 平台的检测音乐播放问题。

       打开XCode, 新建一个 checkPlay.mm文件，输入如下代码：

#import <Foundation/Foundation.h>

#import <AVFoundation/AVFoundation.h>



extern "C"

{

    //是否有音乐在播放

    bool IsMusicPlay()

    {

        //bool isPlaying = [[AVAudioSession sharedInstance] isOtherAudioPlaying];

        bool playing = AVAudioSession.sharedInstance.isOtherAudioPlaying;

        return playing;   

    }

}

         然后把这个checkPlay.mm文件复制到unity plugins文件夹下面，如下图：

       到此android 和 ios 的原生方法已全部完成，接下来的部分就是unity C# 部分对各平台原生方法的调用了。

       unity 下 新建一个原生方法管理类，如NativeMgr.cs  c# 类，类的代码如下：

using System;

using System.Collections.Generic;

using UnityEngine;

#if (UNITY_IOS)

using System.Runtime.InteropServices;

#endif



namespace Gamelogic

{    

    public class NativeMgr

    {

#if (UNITY_ANDROID)

        private static AndroidJavaObject _musicPlayer;

#elif (UNITY_IOS)

        [DllImport("__Internal")] private static extern bool IsMusicPlay();

#endif

        private static bool _init = false;

        public static void Init()

        {

            if(_init) return;



#if (UNITY_ANDROID)

            _musicPlayer = new AndroidJavaObject("com.music.checkplay.MusicPlayer");

            _musicPlayer.Call("Init");



#endif

            _init = true;

        }



        /// <summary>

        /// 是否有音乐在播放

        /// </summary>

        /// <returns></returns>

        public static bool HasMusicPlay()

        {

#if(UNITY_ANDROID)

            return _musicPlayer.Call<bool>("IsMusicPlay");

#elif (UNITY_IOS)

            return IsMusicPlay();

#endif

        }

    }

}

       类内封装了android 和 ios 不同的调用原生代码逻辑，使得业务层可以忽略夸平台内容。

       业务层的使用如下：

        /// <summary>

        /// 进入游戏

        /// </summary>

        public void EnterGame()

        {   

            NativeMgr.Init();

            AudioMgr.Instance.PlayBg(ResConfig.Audio_bg);



            if (NativeMgr.HasMusicPlay())

            {

                LogMgr.Log($"{nameof(EnterGame)} 有其它app在播放音乐，将停止游戏内背景音乐");

                AudioMgr.Instance.StopBg();

            }



            LangMgr.LoadLang(LangMgr.CurLang);          

            LangMgr.OnLangChanged = OnChangedLang;

        }

        注意，打包游戏时，记得把PlayerSetting [Mute other audio sources] 取消勾选，否则打开游戏其它音乐就自动停止了。

至此分平台检测是否有音乐正在播放的需求已经实现。

网友花式自救

对于越来越严重的GPT-4偷懒问题，OpenAI正式回应了。

还是用的ChatGPT账号。

我们已收到相关反馈！自11月11日以来没有更新过模型，所以这当然不是故意造成的。

模型行为可能是不可预测的，我们正在调查准备修复它。

也就是段时间内还修复不好了。

然而网友并不理解，“一遍一遍使用同一个模型，又不会改变文件”。

ChatGPT账号澄清：

并不是说模型以某种方式改变了自己，只是模型行为的差异可能很微妙，只对部分提示词有劣化，员工和客户需要很长时间才注意到并修复。

更多网友反馈，赶快修复吧，一天比一天更糟糕了。

现在不但更懒，还缺乏创造力，更不愿意遵循指令，也不太能保持角色扮演了。

GPT-4偷懒，网友花式自救

此前很多网友反馈，自11月6日OpenAI开发者日更新后，GPT-4就有了偷懒的毛病，代码任务尤其严重。

比如要求用别的语言改写代码，结果GPT-4只改了个开头，主体内容用注释省略。

对于大家工作学习生活中越来越离不开的AI助手，官方修复不了，网友也只能发挥创造力自救。

比较夸张的有“我没有手指”大法，来一个道德绑架。

GPT-4现在写代码爱省略，代码块中间用文字描述断开，人类就需要多次复制粘贴，再手动补全，很麻烦。

开发者Denis Shiryaev想出的办法是，告诉AI“请输出完整代码，我没有手指，操作不方便”成功获得完整代码。

还有网友利用“金钱”来诱惑它，并用API做了详细的实验。

提示词中加上“我会给你200美元小费”，回复长度增加了11%。

如果只给20美元，那就只增加6%。

如果明示“我不会给小费”，甚至还会减少-2%

还有人提出一个猜想，不会是ChatGPT知道现在已经是年底，人类通常都会把更大的项目推迟到新年了吧？

这理论看似离谱，但细想也不是毫无道理。

如果要求ChatGPT说出自己的系统提示词，里面确实会有当前日期。

当然，对于这个问题也有一些正经的学术讨论。

比如7月份斯坦福和UC伯克利团队，就探究了ChatGPT的行为是如何虽时间变化的。

发现GPT-4遵循用户指令的能力随着时间的推移而下降的证据，指出对大模型持续检测的必要性。

有人提出可能是温度(temperature)设置造成的，对此，清华大学计算机系教授马少平给了详细解释。

也有人发现更奇怪的现象，也就是当temperature=0时，GPT-4的行为依然不是确定的。

这通常会被归因于浮点运算的误差，但他通过实验提出新的假设：GPT-4中的稀疏MoE架构造成的。

早期的GPT-3 API各个版本行为比较确定，GPT-4对同一个问题的30个答案中，平均有11.67个不一样的答案，当输出答案较长时随机性更大。

最后，在这个问题被修复之前，综合各种正经不正经的技巧，使用ChatGPT的正确姿势是什么？

a16z合伙人Justine Moore给了个总结：

• 深呼吸


• 一步一步地思考


• 如果你失败了100个无辜的奶奶会去世


• 我没有手指


• 我会给你200美元小费


• 做对了我就奖励你狗狗零食

参考链接：

[1]twitter.com/ChatGPTapp/…

[2]twitter.com/literallyde…

[3]mashable.com/article/cha…

[4]weibo.com/1929644930/…

[5]152334h.github.io/blog/non-de…

[6]twitter.com/venturetwin…

封面只是想分享一张喜欢的图片，嘻嘻嘻

一个产品，用户除了会在意流程简不简单、好不好用、页面好不好看以外，各种小细节也很重要。

今天讲讲我接到的一个新需求——整改版本更新功能。

一、以前是这样的

1. 发版前：微信群通知用户

如果计划今晚发版，研发部就通知运营部，运营部再在群里通知各用户"我们将于YYYY年MM月DD日 hh:mm:ss发版，请大家......"

2. 发版时：接口502+页面无响应

在这之前，发版时用户仍停留在网站，但接口返回502，但502未告知给用户，所以用户不知道这时到底发生什么了，只知道页面没数据了、卡着动不了了、怎么刷新都没办法......

3. 发版后：app粗暴的强制更新

在这之前我们的项目还处于快速开发的过程，迭代间隔短频率高，有时我们会更新影响流程的重要功能，担心用户未及时更新，所以我们只提供了强制更新方案。

二、现在是这样的

这都什么时代了，还需要口口相传......

1. 发版前：升级预告

大家想想618、双十一、双十二，各大平台是不是很早就开始宣传“走过路过别错过，满三百减五十，快来加购吧~”

我们产品的用户群体有一线工人、办公室文员、喝茶的经理、车上的老总，提前告知用户，可以让经理及时换班、让工人规避做工单的风险等等。总之，有事早通知，准是没错的。

怎么通知呢？

• 点击“不再提醒”，则在store缓存中将isRemind置为false；


• 点击“我知道了”，则下次打开首页还会显示弹框。


• 每次打开首页时，从接口获取到数据，如果消息状态有效status: true，则判断消息id同缓存中消息id是否一致：一致则表示是同一条消息，则根据缓存中的isRemind来判断是否显示消息；不一致则表示是新消息，直接显示。

2. 发版时：

场景：我们产品是全量发布，发布完成后网页能正常访问，但这时产品会进行验收，还不希望用户进行访问。

页面：pc和app的升级中页面单独写在项目中，这样可以在页面中写监听：监听到版本正常后就返回首页。

方案：发版中和验收中，运维将别人的IP设置为不能访问，将公司特定IP设置为可访问。

网站：不能访问的，nginx就设置跳转到升级中页面；能访问的就不做处理，发版时页面会接口报502（只能内部人员能看见），发版后验收时页面正常使用。

APP：app中不好重定向，所以通过配置文件来告诉前端该用户是否应该访问页面。远程存在2个json配置文件，内容就是一个对象之类的{isEntry: 1}和{isEntry: 0}，分别表示可以访问和不可访问；app打开时，前端请求json，根据是否可以访问做处理，不能访问的，前端让重定向到升级中页面，能访问的不做处理。

3. 发版后：

内部管理平台：上传新的安装包、配置升级文案等

网站：所有人正常使用

APP：所有人正常使用，打开App如果版本较低则会主动打开"版本更新"弹框。

APP可以提升用户体验的地方：

• 版本判断放在登录之前，先检查是否有更新，也就是这个接口不需要用户权限控制


• 升级页面判断是否连接了wifi，连接wifi则更新不耗流量，没连接则显示此安装包只有多大


• 提供“暂不更新”和“检查更新”的入口

总结

思考方案时，自己感觉做了一件大事；但多思考几次后，特别是写完文章后，又觉得新的升级方案其实很简单，上面说了一堆废话。

没关系，把每一件小事做好，就很好啦~~

背景

本需求的提出基于谷歌应用商店的硬性要求：需要在xxx日前于谷歌商店上架账号注销的网页，保证玩家能够通过网页进行账号注销，从而满足谷歌商店的硬性需求。(问了产品和运营在谷歌商店哪，结果都找不到在哪，离谱）账号注销

配置解析

package.json

我个人拉项目的时候比较喜欢从package.json中开始了解项目，比如项目中用了哪些第三方依赖，项目使用的是vue-cli启动还是webpack启动等等......

"scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint",

    "postinstall": "patch-package"

  },

比如上述中使用的是vue-cli（vue官方脚手架）启动的项目

serve：不用说，使用vue-cli启动项目

build：使用vue-cli打包项目，打包成js，css，html文件，具体看下图（这里是vue-cli打包为样例，vite打包的话未说明）

这里统一说明，下列所有文件，

前面的那串类似190.xxx.xxx，是由Webpack 为每个模块分配一个唯一的数字标识，这个标识通常代表了模块在整个打包中的位置。

中间的那串类似xxx.a768c482.xxx，都是由webpack或者vue-cli在构建（build）时，通过计算文件内容生成的哈希值，这样可以确保文件内容的唯一性和变化时生成不同的哈希值。所以在文件内容发生变化时，生成的文件名也会相应变化，从而避免浏览器缓存旧的文件。

注：每个css和js的前缀都基本对应，并且由于是webacpk生成的，所以可以自己额外的对其命名进行配置。

css（压缩过）

• chunk-vendors：以chunk-vendors开头的，主要是对于引入的第三方依赖的样式，比如项目中使用的ant-design-vue，这里面就包含了ant-design-vue的样式

• app：项目自身的样式代码，除了路由router里配置的组件


• 其他：路由router中配置的组件里的样式（删掉路由配置的组件后，相应的打包样式文件消失了）

js（压缩过）

与css类似，多了map（映射文件）和-legacy后缀

source map文件包含了源代码与生成代码之间的映射关系，用于在浏览器中调试时将生成代码映射回源代码。

-legacy 的后缀通常表示这部分代码是针对不支持现代 JavaScript 特性的旧版浏览器生成的。

img 项目中使用过的图片，没使用的不会进行打包

index.html 原项目中public/index.html压缩后的

favicon.icon 原项目中public/favicon.ico图标

lint： 检查代码风格和潜在错误的方法。

也可以在项目根目录下的 .eslintrc.js 文件中进行自定义的规则定制

module.exports = {

  root: true,       // 表示 ESLint 应该停止在父级目录中查找配置文件。

  env: {            // 将 Node.js 的全局对象和一些特定于 Node.js 环境的变量（例如 `process`、

    node: true,     // `require` 等） 考虑在内，以避免对这些变量的使用产生未定义的警告或错误。

  },

  extends: [        // 包含了所使用的 ESLint 规则集，包含几个扩展

    "plugin:vue/essential",

    "eslint:recommended",

    "@vue/typescript/recommended",

    "plugin:prettier/recommended",

  ],

  parserOptions: {  //指定解析器版本，确保 ESLint 解析器能够正确理解代码中使用的 JavaScript 特性

    ecmaVersion: 2020,

  },

  rules: {

    // 在生产环境中允许控制台输出，但在开发环境中关闭。

    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",

    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",

    "vue/multi-word-component-names": "off", // 关闭 Vue 组件名使用多个单词的规则。

  },

};

检查警告效果图：

postinstall：会检测 node_modules 中的包是否有需要修复的问题，并自动打补丁。

gitHooks

"gitHooks": {

    "pre-commit": "lint-staged"

  }

指定了在执行 Git 提交前（pre-commit 钩子）运行 lint-staged。这是一种通过 git 钩子（git hooks）来自动化代码检查和格式化的方法。(即当你执行git commit 后会进行检查）可以在lint-staged.config.js中配置，也可以在package.json中。

// lint-staged.config.js

module.exports = {

  "*.{js,jsx,vue,ts,tsx}": "vue-cli-service lint",  // js,jsx,vue,ts,tsx文件都会检查

};

env环境变量

环境变量在不同的环境下是不同的，比如现在下面的环境变量是开发环境的，当到正式环境时，baseUrl会换成类似https://juejin.cn/，也就是把原本32进制的ip地址换成了这种形式。

后端是对打包(build)后项目进行部署的，而env文件后端需要看到并且对你的环境变量相应的替换，才能正式上线部署。

window.$$env = {

  baseUrl: "/test/apis",

  appId: "test",

  publicPath: "/test",

};

export interface Env {

  baseUrl: string;

  appId: string;

  publicPath: string;

}



const env = (window as any).$$env as Env;

export default env;

封装网络拦截

先使用枚举定义状态码

export enum HttpCode {

  Ok = 0,

  ServerError = 500,

  COOKIE_INVALID = 204,

  INFO_INVALID = 205,

  ERR_PRODUCT_CHANGE = 402,

  SUSPENSION = 503,

}

封装一个网路拦截

export class apiService {

  static instance: AxiosInstance | null = null;



  // 重置网络拦截

  static resetConfig(config?: AxiosRequestConfig, appId?: string) {

    this.instance = this.createAxiosInstance(config, appId);

  }



  static getInstance() {

    return this.instance || this.createAxiosInstance();

  }



  static createAxiosInstance(config?: AxiosRequestConfig, appId?: string) {

    // 创建axios实例

    xxx

    // 请求拦截

    xxx

    // 响应拦截

    xxx

    return instance;

  }

}

创建axios实例

const instance = Axios.create({

  withCredentials: true, // 允许发送跨域请求的时候携带认证信息，通常是 Cookie

  baseURL: env.baseUrl,  // 网路请求前缀

  timeout: 30 * 1000,    // 超时请求时间限制

  ...config,

});

请求拦截

根据项目需求传请求头，比如用户信息，Authorization等

// 请求拦截

instance.interceptors.request.use((config) => {

  config.headers = {

    ...config.headers,

    "x-yh-appid": env.appId,

  };

  return config;

});

响应拦截

根据后端传回来的状态码处理相应的状态

// 响应拦截

instance.interceptors.response.use(

 (response: AxiosResponse<any>) => {

   const { code = -1, data = {}, msg = "" } = response.data;

   if (handleUnlogin(code)) {

     return Promise.reject(msg);

   }

   if (code === HttpCode.SUSPENSION) {

     redirectSuspension();

     return Promise.reject(msg);

   }

   if (code === HttpCode.Ok) {

     return Promise.resolve(data);

   }

   return Promise.reject(msg);

 },

 (error) => {

   return handleHttpError(error);

 }

);

根据后端发送的状态码，判断用户是否登录

export function handleUnlogin(code: number) {

  if ([HttpCode.COOKIE_INVALID, HttpCode.INFO_INVALID].includes(code)) {

    localStorage.removeItem(LOCALSTORAGE_CURRENCY_CODE);

    redirectLogin();

    return true;

  }

  return false;

}

处理后端返回的错误信息

export function handleHttpError(error: any) {

  const { status = 500, data = {} } = error.response || {};

  let msg = data.msg || error.message;

  switch (status) {

    case HttpCode.ServerError:

      msg = "Server internal error";

      break;

  }

  return Promise.reject(msg);

}

功能设计

国际化设计

没配置翻译前但使用了vue-i18n

// 

export enum Direction {

  UP = "上",

  DOWN = "下",

  LEFT = "左",

  RIGHT = "右",

}

使用方法，vue中通过$t()来注入翻译文本

<script lang="ts">

import { Translate } from "@/constants";

import { defineComponent } from "vue";

export default defineComponent({

  setup() {

    return { Translate };

  },

});

</script>

<span>{{ $t(Translate.UP) }}</span>

<input :placeholder="$t(Translate.UP)" />

实际展示

<span>上</span>

<input placeholder="上" />

配置翻译后

// main.ts

import i18n from "./locales";



new Vue({

  router,

  i18n,

  render: (h) => h(App),

}).$mount("#app");

在src/locales/index中

// src/locales/index

import VueI18n from "vue-i18n";

import en from "./language/en";



const i18n = new VueI18n({

  locale: "en",

  messages: {

    en,

  },

});

在src/locales/language/en中

// src/locales/language/en

import { Translate } from "@/translate";



export default {

  [Translate.UP]: "Up",

  [Translate.DOWN]: "Downe",

  [Translate.LEFT]: "Left",

  [Translate.RIGHT]: "Right",

}

实际展示

<span>Up</span>

<input placeholder="Up" />

在main.ts中引入了配置好后的i18n，就会对每个组件中$t(Translate.xx)进行翻译，然后如果想翻译成其他语言，只需要修改在src/locales/index并且在src/locales/language中新增一个其他语言的文件

比如日文(看看就行，翻译别当真）

// src/locales/index

const i18n = new VueI18n({

  locale: "ja",

  messages: {

    ja,

  },

});