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

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

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

端智能

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

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

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

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

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

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

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

图形学

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

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

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

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

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

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


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

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

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


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

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

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


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

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

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


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

工程提效

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

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

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

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

总结

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

背景

记得几年前做了一个报告，报告里面加载的是用户的历年作品还有会员信息，然后按照年月倒序展示出来，其中历年作品都要将作品的封面展示出来。一开始这个报告到没啥问题，而且一个时间轴下来感觉挺好，有用户的作品、会员记录、关注以及粉丝记录很全面。直到最近忽然有一批用户说一进到这个报告页面就卡住不动了，上去一查发现不得了，都是铁杆用户，每年作品都几百个，导致几年下来，这个报告返回了几千个作品，包含上千的图片。

问题分析

上千的图片，肯定会卡，首先想到的是做图片懒加载。这个很简单，使用一个vue的全局指令就可以了。但是上线发现，没啥用，dom节点多的时候，懒加载也卡。

然后就问服务端能不能支持分页，服务端说数据太散，连表太多，树形结构很难做分页。光查询出来就已经很费劲了。

没办法于是想了一下如何前端来处理掉。

思路

实现

本文仅展示一种基于vue的实现

1. 容器

设计一个可以进行滚动翻页的容器 然后绑定滚动方法OnPageScrolling

<style lang="less" scoped>



.study-backup {



overflow-x: hidden;



overflow-y: auto;



-webkit-overflow-scrolling: touch;



width: 100%;



height: 100%;



position: relative;



min-height: 100vh;



background: #f5f8fb;



box-sizing: border-box;



}



</style>



<template>



<section class="report" @scroll="OnPageScrolling($event)">



</section>



</template>

2.初始化数据

这里定义一下树形列表的数据结构，实现初始化渲染，可以渲染一个树节点，或者一个树节点的部分子节点

GetTreeData() {



treeapi



.GetTreeData({ ... })



.then((result) => {



// 处理结果



const data = Handle(result)



// 这里备份一份数据 不参与展示



this.backTreeList = data.map((item) => {



return {



id: item.id,



children: item.children



}



})



// 这里可以初始化为第一个树节点



const nextTree = this.backTreeList[0]



const nextTansformTree = nextTree.children.splice(0)



this.treeList = [{



id: nextTree.id,



children: nextTansformTree



}]



// 这里可以初始化为第一树节点 但是只渲染第一个子节点



const nextTree = this.backTreeList[0]



const nextTansformTree = nextTree.children.splice(0, 1)



this.treeList = [{



id: nextTree.id,



children: nextTansformTree



}]



})



},

3.滚动加载

这里通过不断的把 backTreeList 的子节点转存入 treeList来实现分页加载。

OnPageScrolling(event) {



const container = event.target



const scrollTop = container.scrollTop



const scrollHeight = container.scrollHeight



const clientHeight = container.clientHeight



// console.log(scrollTop, clientHeight, scrollHeight)



// 判断是否接近底部



if (scrollTop + clientHeight >= scrollHeight - 10) {



// 执行滚动到底部的操作



const currentReport = this.backTreeList[this.treeList.length - 1]



// 检测匹配的当前树节点 treeList的长度作为游标定位



if (currentReport) {



// 判断当前节点的子节点是否还存在 如果存在则转移到渲染树中



if (currentReport.children.length > 0) {



const transformMonth = currentReport.children.splice(0, 1)



this.treeList[this.treeList.length - 1].children.push(



transformMonth[0]



)



// 如果不存在 则寻找下一树节点进行复制 同时复制下一节点的第一个子节点 当然如果寻找不到下一树节点则终止翻页



} else if (this.treeList.length < this.backTreeList.length) {



const nextTree = this.backTreeList[this.treeList.length]



const nextTansformTree = nextTree.children.splice(0, 1)



this.treeList.push({



id: nextTree.id,



children: nextTansformTree



})



}



}



}



}

4. 逻辑细节

从上面代码可以看到，翻页的操作是树copy的操作，将备份树的子节点转移到渲染树中

扩展思路

这个方法可以进行封装，将每次复制的节点数目和每次复制的子节点数目作为传参，一次可复制多个节点，这里就不做展开

前言：

大家好，我是小瑜。最近在网上看到了东方甄选和董宇辉的小作文事件，我也一直是众多吃瓜群众的一员，看完后董宇辉俞敏洪的联合直播，心中也有很多感触。

董宇辉老师说，一放假，就喜欢往家里跑，因为接近土地可以感到踏实。一个千万网红这种纯粹质朴的精神着实让人很贴切。

特别是董老师的另外一番话：你必须人生中有一段经历是自己走过去的。你充满了痛苦，然后充满了孤独，但这个东西叫做成长，好的生活和幸福的经历是不能带来成长的，所以能见到很多人，四五十岁看着还很幼稚，说明他从来没有受到苦，能让你成长的东西，就是让你反思的东西，因为在历史的长河中进化是痛苦的，逼不得已，人才会进步很成长，所以成长都不快乐。但同时也恭喜你一直在成长。

在学习以及编写这篇文章的时候，我也是痛苦的，同时也有所收获。接下来给大家分享this指向以及手写call、apply、bind。

在这之间给大家简单举几个例子说明下this指向的不同

普通函数调用

// 谁调用就是谁, 直接调用window

function sayHi() {

  console.log(this); // window

}

sayHi()  // === window.sayHi()

对象中的方法调用

const obj = {

  name: 'zs',

  objSayHi() {

    console.log(this) // obj

    setTimeout(() => {

     console.log(this, 'setTimeout'); // obj

      }, 1000),

    function inner() {

      console.log(this); // window

    }

    inner() 

  },

  qwe: () => console.log(this) // window

}

obj.objSayHi()

obj.qwe()

obj.objSayHi() => obj

• 因为是 **obj **对象调用，所以 **this **指向 **obj **这个对象

obj.qwe() => window

• 对于箭头函数 qwe，它捕获的是定义时外部的 this 上下文。在浏览器中全局范围内的箭头函数 qwe 的 this 指向的是全局对象 window（或者是全局的 this，具体取决于执行上下文）。

inner() => window

• inner() 函数是通过常规函数声明方式定义的。在 JavaScript 中，常规函数声明方式中的 this 在严格模式下指向 undefined，而在非严格模式下（例如浏览器环境中），this 指向全局对象（在浏览器中通常是 window 对象）。因此，当 inner() 函数在 objSayHi() 方法内部被调用时，其 this 指向全局对象 window。

setTimeout => obj

• objSayHi 方法中，setTimeout 中的回调函数使用了箭头函数。箭头函数内部的 this 会捕获最近的普通函数（非箭头函数）的 this 值，也就是 objSayHi 被调用时的 this。因此，setTimeout 中的箭头函数捕获到的 this 值指向的是 obj 对象。

总结：浏览器环境中, 谁调用this指向谁，但是箭头函数的this义是外部的 this 上下文。通过常规函数声明方式定义this指向window。其他关于this指向可以参考这张图

修改this指向

call

第1个参数为this，第2-n为传入该函数的参数

function myThis1(name, age) {

    console.log(this);

    console.log(name);

    console.log(age);

   }

const obj = {

    name: 'zs',

    age: 18

}

myThis1.call(obj, 'ls', 20) // {name:"zs",age:18} ls 18

apply

第1个参数为this，第2-n已数组的方式传递

function myThis1(name, age) {

    console.log(this);

    console.log(name);

    console.log(age);

   }

const obj = {

    name: 'zs',

    age: 18

}

myThis1.apply(obj, ['王五', 18]) // {name:"zs",age:18} 王五 18

bind

bind() 方法创建一个新函数，当调用该新函数时，它会调用原始函数并将其 this 关键字设置为给定的值，同时，还可以传入一系列指定的参数

function myThis1(name, age) {

    console.log(this);

    console.log(name);

    console.log(age);

   }

const obj = {

    name: 'zs',

    age: 18

}



![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92cfe20fc6374374bacf97bcc3d31ac6~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=814&h=308&s=145955&e=png&b=fafafa)

const fn = myThis1.bind(obj, '赵六',30)

fn()  //  {name:"zs",age:18} 赵六 30

手写call函数

要求实现

const obj = {

  name: 'zs',

  age: 20

}

function myFn(a, b, c, d, e) {

  console.log(`大家好,我的名字叫${this.name} 我今年${this.age}岁了`, a, b, c, d, e);

}

myFn.myCall(obj, 1, 2, 3, 4, 5)

简单思路：

实现思路1：通过函数原型的方式，给原型添加 myCall 方法，这样通过原型链就可以使用

Function.prototype.myCall = function () {

  console.log('myCall被调用了');

}

myFn.myCall()

实现思路2：在myCall调用的时候将obj传入到函数中，并根据谁调用this就指向谁的原则给对象添加this方法并执行

首先可以打印看一下thisArg，this 分别是什么

const obj = {

  name: 'zs',

  age: 20

}

Function.prototype.myCall = function (thisArg) {

  console.log('myCall被调用了',thisArg，this);

}

function myFn(a, b, c, d, e) {

  console.log(`大家好,我的名字叫${this.name} 我今年${this.age}岁了`, a, b, c, d, e);

}

myFn.myCall(obj)

很明显 **thisArg 就是 obj **对象 而 this就是 myFn 这个函数，那么就可以根据谁调用this就指向谁的原则，将obj这个对象也就是 **thisArg **添加 myCall 方法 = this

  Function.prototype.myCall = function (thisArg) {

    console.log('myCall被调用了', thisArg, this);

    thisArg.myCall = this

    thisArg.myCall()

}

function myFn(a, b, c, d, e) {

    console.log(`大家好,我的名字叫${this.name} 我今年${this.age}岁了`, a, b, c, d, e);

 }

const obj = {

      name: 'zs',

      age: 20

 }

myFn.myCall(obj, 1, 2, 3, 4, 5)

此时就发现，this已经成功指向了这个obj对象，但是还差参数没有传递，接下去就去实现

实现思路3：利用剩余参数加展开运算符传入参数

  Function.prototype.myCall = function (thisArg,...args) {

    console.log('myCall被调用了', thisArg, this);

    thisArg.myCall = this

    thisArg.myCall(...args)

}

function myFn(a, b, c, d, e) {

    console.log(`大家好,我的名字叫${this.name} 我今年${this.age}岁了`, a, b, c, d, e);

 }

const obj = {

      name: 'zs',

      age: 20

 }

myFn.myCall(obj, 1, 2, 3, 4, 5)

此时就基本上可以完成了，还有一点优化，就是查看** obj 发现 myCall **是一直存在的，因为之前通过给原型添加方法，希望的是使用完成后将myCall方法删除，这里只需要 在 **myCall 最后再添加一句 delete thisArg.myCall **即可

优化： 增加返回值并 利用 Symbol 动态生成唯一的属性名

Function.prototype.myCall = function (thisArg, ...args) {

  const key = Symbol()

  thisArg[key] = this

  const res = thisArg[key](...args)

  delete thisArg[key]

  return res

}

手写apply

apply 方法同理 call 只是第二个参数需要改为数组

Function.prototype.myApply = function (thisArg, args) {

    console.log(args);

    const key = Symbol()

    thisArg[key] = this

    const res = thisArg[key](args)

    delete thisArg[key]

    return res

}

const obj = {

    name: 'zs',

    age: 20

}

function myFn(args) {

    const div = `大家好,我的名字叫${this.name} 我今年${this.age}岁了,${args.toString()}`

    return div

}

const res = myFn.myApply(obj, [1, 2, 3, 4, 5])

console.log(res);

手写bind

Function.prototype.myBind = function (thisArg, ...args) {

    const fn = this

    return function (...args1) {

        const allArgs = [...args, ...args1]

        // 判断是否为new的构造函数

        if (new.target) {

            return new fn(...allArgs)



        } else {

            return fn.call(thisArg, allArgs)

        }

    }

}

const obj = {

    name: 'zs',

    age: 20

}

function myFn(...arg) {

    console.log(`大家好,我的名字叫${this.name} 我今年${this.age}岁了,${arg}`);

    const div = `大家好,我的名字叫${this.name} 我今年${this.age}岁了,${arg}`

    return div

}

const res = myFn.myBind(obj, '1')

console.log(res('122'));

尤大大：理论上来说，每一个 Vue 组件实例都已经在“管理”它自己的响应式状态了。

🤦‍♂️：不会吧🤡！既然Vue本身具备状态管理的能力，我们还有必要引入Pinia🍍或者Vuex等状态管理工具吗？

Vue实例作为状态管理器应该怎么实现？按照vue官网我们来实践一次。

简单状态管理 😎

状态管理器

我们以Vue3为例，实现一个状态管理。首先创建一个名为auth.ts的ts文件，这文件将用来定义状态管理器。

import { reactive, readonly } from 'vue';



export interface Account {

  name: string;

}



export interface AuthStore {

  account: Account | null;

  isAuthed: boolean;

}



const auth = reactive<AuthStore>({

  isAuthed: false,

  account: null,

});



export const useAuthStore = () => {

  return {

    state: readonly(auth),

    actions: {

      login(account: Account) {

        auth.isAuthed = true;

        auth.account = account;

      },

      logout() {

        auth.isAuthed = false;

        auth.account = null;

      },

    },

  };

};



export default useAuthStore;

接下来创建两个组件Info.vue和Login.vue，在这两个组件中使用我们自定义的useAuthStore状态管理器。

Login.vue

使用import { useAuthStore } from '../auth';来引入这个store，通过useAuthStore()获取store实例。

<script setup lang="ts">

import { ref } from 'vue';



import { useAuthStore } from '../auth';



const username = ref('');

const { state, actions } = useAuthStore();

</script>



<template>

  <div>

    <div v-if="!state.isAuthed">

      <div>

        <span>用户名：</span>

        <input v-model="username" />

      </div>

      <button @click="actions.login({ name: username })">登录</button>

    </div>

    <button v-if="state.isAuthed" @click="actions.logout">退出</button>

  </div>

</template>

Info.vue

<script setup lang="ts">

import { useAuthStore } from '../auth';



const { state } = useAuthStore();

</script>



<template>

  <div>

    <div v-if="!state.isAuthed">

      <h1>请登录</h1>

    </div>

    <div v-if="state.isAuthed">

      <h1>欢迎：{{ state.account?.name }}</h1>

    </div>

  </div>

</template>

使用效果

解读

使用reactive()是因为State是一个对象，当然也可以使用ref()。但是，就必须使用.value来访问数据，这并不是想要的效果。

为了实现单向数据流useAuthStore中的State采用Vue3的readonly API将状态对象置为只读的对象，这样避免了在使用该状态对象时直接操作State的情况。因此想要修改State就只能通过Actions，就像下图这样:

Vue2也可以么？😲

虽然 Vue2 中没有reactive()或ref()API，但是事实是 Vue2 也实现简单的状态管理。利用 Vue2 中的Vue.observable()可以将一个普通对象转换为响应式对象，从而实现当State变更时驱动View更新。

🤔需要注意的是 Vue2 中没有 readonly() API，因此在这个例子中，我们直接使用 auth 作为状态。要确保状态不被意外修改，你需要确保只在 actions 对象中的方法内修改状态。

import Vue from 'vue';



export interface Account {

  name: string;

}



export interface AuthStore {

  account: Account | null;

  isAuthed: boolean;

}



const auth = Vue.observable<AuthStore>({

  isAuthed: false,

  account: null,

});



export const useAuthStore = () => {

  return {

    state: auth,

    actions: {

      login(account: Account) {

        auth.isAuthed = true;

        auth.account = account;

      },

      logout() {

        auth.isAuthed = false;

        auth.account = null;

      },

    },

  };

};



export default useAuthStore;

Login.vue

在vue2中将useAuthStore()解构进组件的data中即可。

<template>

  ...

</template>



<script>

import { useAuthStore } from '../auth';



export default {

  data() {

    const { state, actions } = useAuthStore();

    return {

      authState: state,

      login: actions.login,

      logout: actions.logout,

    };

  },

};

</script>

首先从 useAuthStore 文件中导入 useAuthStore 函数。然后，在组件的 data 选项中，我们调用 useAuthStore() 并将返回的 state 和 actions 解构。接下来，我们将 state、login 和 logout 添加到组件的响应式数据中，以便在模板中使用。最后，在模板中，我们根据 authState.isAuthed 的值显示不同的内容，并使用 login 和 logout 方法处理按钮点击事件。

关于服务器端渲染 🧐

在 SSR 环境下，应用模块通常只在服务器启动时初始化一次。同一个应用模块会在多个服务器请求之间被复用，而我们的单例状态对象也一样。如果我们用单个用户特定的数据对共享的单例状态进行修改，那么这个状态可能会意外地泄露给另一个用户的请求。我们把这种情况称为跨请求状态污染。

如果使用 SSR，则需要避免所有请求共享同一存储。在这种情况下，需要为每个请求创建一个单独的存储并提供/注入它。

// app.js （在服务端和客户端间共享）

import { createSSRApp } from 'vue'

import { createStore } from './store.js'



// 每次请求时调用

export function createApp() {

  const app = createSSRApp(/* ... */)

  // 对每个请求都创建新的 store 实例

  const store = createStore(/* ... */)

  // 提供应用级别的 store

  app.provide('store', store)

  // 也为激活过程暴露出 store

  return { app, store }

}

优势与不足

优势

• 简单易学：对于初学者和小型项目来说，这种方法更容易理解和实现。它不需要引入额外的库或学习新的概念。


• 轻量级：由于不需要引入额外的库，这种方法在体积上更轻量级，对于那些对性能有严格要求的项目来说，这可能是一个优势。


• 灵活性：这种方法允许开发人员根据项目需求自由地调整状态管理结构。这种灵活性可能适用于一些具有特殊需求的项目。

不足

• 缺乏结构和约束：这种方法没有强制执行任何特定的结构或约束，这可能导致不一致的代码和难以维护的项目。当多个开发人员协同工作时，这可能会导致问题。


• 缺乏调试工具：与像 Vuex 或 Pinia 这样的专门的状态管理库相比，这种方法没有提供调试工具，这可能会使调试和追踪状态变更更加困难。


• 可扩展性：对于大型应用程序，这种简单的状态管理可能不够强大，因为它可能无法很好地处理复杂的状态逻辑和多个状态模块。


• 性能优化：这种方法可能无法提供像 Vuex 或 Pinia 这样的库所提供的性能优化，例如，缓存计算属性。

🚀简单状态管理 vs Pinia🚀

开发 Vue 应用时，状态管理是一个重要的考虑因素。Vue 自身提供了一些状态管理工具，如 ref 和 reactive，但在某些情况下，引入专门的状态管理库（如 Pinia 或 Vuex）可能会带来更多的便利和优势。那么，在什么情况下你真的需要 Pinia？让我们来总结一下。

使用 Vue 自身的状态管理

在以下场景下，使用 Vue 自身的状态管理就可以完美解决问题：

在这些场景下，使用 Vue 自身的状态管理，如 ref 和 reactive，可以满足应用的需求，而无需引入额外的状态管理库。

这样的小型项目存在吗？

小型项目通常具有以下特点：

这些小型项目可能包括个人博客、简历网站、小型企业网站、原型和概念验证等。

何时考虑使用 Pinia

选择是否一开始就使用 Pinia 取决于项目的需求和预期的复杂性。以下是一些建议：

总之，在决定是否从一开始就使用 Pinia 时，您应该权衡项目的需求、预期的复杂性和团队的经验。如果您认为 Pinia 可以为您的项目带来长期的好处，那么从一开始就使用它是合理的。

最后

没有最好的架构，只有最合适的选择。对于小型项目和初学者，简单的状态管理方法可能是一个合适的选择。然而，在大型、复杂的应用程序中，使用像 Pinia 这样的专门的状态管理库可能更加合适，因为它们提供了更强大的功能、更好的开发体验和更强的约定。

关于项目是否应该使用第三方的状态管理库，完全取决于项目自身和开发团队的选择！

如果您有不同的看法，以自身看法为准

前情提要

今天，产品找到我，说能不能实现这个图呢

众所周知，产品说啥就是啥，于是就直接开干。

小波折

为了实现我的需求做了下调研，看了d3还有x6之类的库，感觉都太重了，也不一定能实现我的需求。于是在沸点上寻求了下建议

掘友们建议canvas直接画

于是决定手撸

结果

之前没有使用canvas画过东西，于是花了一天边看文档，边画，最终画完了，效果如下：

代码及思路

首先构造数据集在画布上的节点位置

 let stations = new Array(13).fill(null);



  /** 拐角的节点 */

  const cornerP = [

    { x: 20, y: 67.5, type: 'corner', showP: true },

    { x: 55, y: 47.5, type: 'corner', showP: false },

    { x: 337.5, y: 47.5, type: 'corner', showP: false },

    { x: 337.5, y: 112.5, type: 'corner', showP: false },

    { x: 55, y: 112.5, type: 'corner', showP: false },

    { x: 20, y: 92.5, type: 'corner', showP: true },

  ];

  /** 生成站点笔触位置 */

  function getStationsPosition(): {

    num: string;

    status: number;

    x: number;

    y: number;

    type?: string;

  }[] {

    const middleIndex = Math.floor(stations.length / 2);

    const { width, height } = canvasRef.current as HTMLCanvasElement;

    let centerPoint = { x: width - 20, y: height / 2 + 20 };

    let leftArr = stations.filter((v, _i) => _i < middleIndex);

    const leftWidth = (width - 40 - 35 - 32.5) / (leftArr.length - 1);

    const leftP = leftArr.map((v, i) => ({

      x: leftWidth * i + 55,

      y: height / 2 + 20 - 32.5,

    }));

      

    const rightArr = stations.filter((v, _i) => _i > middleIndex);

    const rightWidth = (width - 40 - 35 - 32.5) / (rightArr.length - 1);

    const rightP = rightArr.map((v, i) => ({

      x: 370 - 32.5 - rightWidth * i,

      y: height / 2 + 20 + 32.5,

    }));



    return [

      cornerP[0],

      cornerP[1],

      ...leftP,

      cornerP[2],

      centerPoint,

      cornerP[3],

      ...rightP,

      cornerP[4],

      cornerP[5],

    ].map((v, i) => ({

      ...v,

      num: String(2),

      status: i > 3 ? 0 : i > 2 ? 1 : 2,

    }));

  }

为了避免实际使用过程中，数据点位不够，上面的点位生成主动加入了拐角的点位。

然后画出背景路径

   function drawBgLine(

    points: ReturnType<typeof getStationsPosition>,

    color?: string,

  ) {

    const ctx = canvasRef.current?.getContext(

      '2d',

    ) as unknown as CanvasRenderingContext2D;



    points.forEach((item, index) => {

      const next = points[index + 1];

      if (next) {

        if (next.y === item.y) {

          ctx.beginPath();

          ctx.moveTo(item.x, item.y);

          ctx.lineWidth = 4;

          ctx.strokeStyle = color ?? 'rgba(55, 59, 62, )';

          ctx.lineTo(next.x, next.y);

          ctx.stroke();

        } else if (Math.abs(next.y - item.y) === 32.5) {

          ctx.beginPath();

          if (next.x < item.x) {

            ctx.arc(

              next.x,

              item.y,

              32.5,

              (Math.PI / 180) * 0,

              (Math.PI / 180) * 90,

            );

          } else {

            ctx.arc(

              item.x,

              next.y,

              32.5,

              (Math.PI / 180) * 270,

              (Math.PI / 180) * 0,

            );

          }

          ctx.lineWidth = 4;

          ctx.strokeStyle = color ?? 'rgba(55, 59, 62, 0.5)';

          ctx.stroke();

        } else if (Math.abs(next.y - item.y) < 32.5) {

          ctx.beginPath();

          if (next.x < item.x) {

            ctx.moveTo(item.x, item.y);

            ctx.quadraticCurveTo(next.x, item.y, next.x, next.y);

            ctx.lineWidth = 4;

            ctx.strokeStyle = color ?? 'rgba(55, 59, 62, 0.5)';

            ctx.stroke();

            ctx.beginPath();

            ctx.fillStyle = color ?? 'rgba(55, 59, 62, 0.5)';



            ctx.arc(next.x, next.y, 4, 0, Math.PI * 2);



            ctx.fill();

          } else {

            ctx.moveTo(item.x, item.y);

            ctx.quadraticCurveTo(item.x, next.y, next.x, next.y);

            ctx.lineWidth = 4;

            ctx.strokeStyle = color ?? 'rgba(55, 59, 62, 0.5)';

            ctx.stroke();

            ctx.beginPath();

            ctx.fillStyle = color ?? 'rgba(55, 59, 62, 0.5)';



            ctx.arc(item.x, item.y, 4, 0, Math.PI * 2);

            ctx.fill();

          }

        }

      }

    });

  }

此处主要的思路是根据相领点位的高低差，来画不同的路径

然后画进度图层

  function drawProgressBgLine(points: ReturnType<typeof getStationsPosition>) {

    const ctx = canvasRef.current?.getContext(

      '2d',

    ) as unknown as CanvasRenderingContext2D;



    const index = points.findIndex((v) => v.status === 0);



    const newArr = points.slice(0, index);

    const lastEl = points[index];

    const curEl = points[index - 1];

    console.log(lastEl, curEl);



    if (lastEl) {

      /**处于顶部的时候画出箭头 */

      if (lastEl.y === curEl.y) {

        if (lastEl.x > curEl.x) {

          const centerP = {

            x: (lastEl.x - curEl.x) / 2 + curEl.x,

            y: curEl.y,

          };

          const img = new Image();

          img.src = carIcon;

          img.onload = function () {

            ctx.drawImage(img, centerP.x - 12, centerP.y - 32, 19, 24);

          };



          ctx.beginPath();

          ctx.moveTo(curEl.x, curEl.y);

          ctx.lineTo(centerP.x, centerP.y);

          /**生成三角形标记 */

          ctx.lineTo(centerP.x, centerP.y - 2);

          ctx.lineTo(centerP.x + 3, centerP.y);

          ctx.lineTo(centerP.x, centerP.y + 2);

          ctx.lineTo(centerP.x, centerP.y);

          ctx.fillStyle = 'rgba(107, 255, 236, 1)';

          ctx.fill();



          ctx.lineWidth = 4;

          ctx.strokeStyle = 'rgba(107, 255, 236, 1)';

          ctx.stroke();

        }

        /** 其他条件暂时留空 */

      }

    }



    /** 生成带进度颜色背景 */

    drawBgLine(newArr, 'rgba(107, 255, 236, 1)');

  }

主要是已经走过的路径线路变蓝，未走过的，获取两点中间位置，添加图标，箭头。这里箭头判断我未补全，等待实际使用补全

最后画出节点就可以了

  function draw() {

    if (!canvasRef.current) {

      return;

    }

    const ctx = canvasRef.current?.getContext(

      '2d',

    ) as unknown as CanvasRenderingContext2D;



    ctx.clearRect(0, 0, canvasRef.current?.width, canvasRef.current?.height);

    if (ctx) {

      /** 绘制当前遍数的文字 */

      ctx.font = '12px serif';



      ctx.fillStyle = '#fff';

      ctx.fillText(text, 10, canvasRef.current?.height / 2 + 24);



      const points = getStationsPosition();

      /** 画出背景线 */

      drawBgLine(points);



      /** 画出当前进度 */

      drawProgressBgLine(points);



      points.forEach((item) => {

        if (item.type !== 'corner') {

          ctx.clearRect(item.x - 6, item.y - 6, 12, 12);

          ctx.beginPath();

          /** 生成标记点 */

          ctx.moveTo(item.x, item.y);



          ctx.fillStyle =

            item.status === 2

              ? 'rgba(255, 157, 31, 1)'

              : item.status === 1

              ? 'rgba(107, 255, 236, 1)'

              : 'rgba(55, 59, 62, 1)';

          ctx.arc(item.x, item.y, 4, 0, Math.PI * 2);

          ctx.fill();

          ctx.beginPath();

          ctx.lineWidth = 1;

          ctx.strokeStyle = 'rgba(55, 59, 62, 1)';

          ctx.arc(item.x, item.y, 6, 0, Math.PI * 2);

          ctx.stroke();

          ctx.closePath();



          ctx.fillStyle = '#fff';

          ctx.fillText(item.num, item.x - 4, item.y - 12);

        }

      });

    }

  }

最后贴一下全部代码

import carIcon from '@/assets/images/map/map_car1.png';

import { useEffect, useRef } from 'react';

const LineCanvas = () => {

  const canvasRef = useRef<HTMLCanvasElement>(null);

  let text = '第3遍（15:00-18:00）';



  let stations = new Array(13).fill(null);



  /** 拐角的节点 */

  const cornerP = [

    { x: 20, y: 67.5, type: 'corner', showP: true },

    { x: 55, y: 47.5, type: 'corner', showP: false },

    { x: 337.5, y: 47.5, type: 'corner', showP: false },

    { x: 337.5, y: 112.5, type: 'corner', showP: false },

    { x: 55, y: 112.5, type: 'corner', showP: false },

    { x: 20, y: 92.5, type: 'corner', showP: true },

  ];

  /** 生成站点笔触位置 */

  function getStationsPosition(): {

    num: string;

    status: number;

    x: number;

    y: number;

    type?: string;

  }[] {

    const middleIndex = Math.floor(stations.length / 2);

    const { width, height } = canvasRef.current as HTMLCanvasElement;

    let centerPoint = { x: width - 20, y: height / 2 + 20 };

    let leftArr = stations.filter((v, _i) => _i < middleIndex);

    const leftWidth = (width - 40 - 35 - 32.5) / (leftArr.length - 1);

    const leftP = leftArr.map((v, i) => ({

      x: leftWidth * i + 55,

      y: height / 2 + 20 - 32.5,

    }));



    const rightArr = stations.filter((v, _i) => _i > middleIndex);

    const rightWidth = (width - 40 - 35 - 32.5) / (rightArr.length - 1);

    const rightP = rightArr.map((v, i) => ({

      x: 370 - 32.5 - rightWidth * i,

      y: height / 2 + 20 + 32.5,

    }));



    return [

      cornerP[0],

      cornerP[1],

      ...leftP,

      cornerP[2],

      centerPoint,

      cornerP[3],

      ...rightP,

      cornerP[4],

      cornerP[5],

    ].map((v, i) => ({

      ...v,

      num: String(2),

      status: i > 3 ? 0 : i > 2 ? 1 : 2,

    }));

  }



  function drawBgLine(

    points: ReturnType<typeof getStationsPosition>,

    color?: string,

  ) {

    const ctx = canvasRef.current?.getContext(

      '2d',

    ) as unknown as CanvasRenderingContext2D;



    points.forEach((item, index) => {

      const next = points[index + 1];

      if (next) {

        if (next.y === item.y) {

          ctx.beginPath();

          ctx.moveTo(item.x, item.y);

          ctx.lineWidth = 4;

          ctx.strokeStyle = color ?? 'rgba(55, 59, 62, 0.5)';

          ctx.lineTo(next.x, next.y);

          ctx.stroke();

        } else if (Math.abs(next.y - item.y) === 32.5) {

          ctx.beginPath();

          if (next.x < item.x) {

            ctx.arc(

              next.x,

              item.y,

              32.5,

              (Math.PI / 180) * 0,

              (Math.PI / 180) * 90,

            );

          } else {

            ctx.arc(

              item.x,

              next.y,

              32.5,

              (Math.PI / 180) * 270,

              (Math.PI / 180) * 0,

            );

          }

          ctx.lineWidth = 4;

          ctx.strokeStyle = color ?? 'rgba(55, 59, 62, 0.5)';

          ctx.stroke();

        } else if (Math.abs(next.y - item.y) < 32.5) {

          ctx.beginPath();

          if (next.x < item.x) {

            ctx.moveTo(item.x, item.y);

            ctx.quadraticCurveTo(next.x, item.y, next.x, next.y);

            ctx.lineWidth = 4;

            ctx.strokeStyle = color ?? 'rgba(55, 59, 62, 0.5)';

            ctx.stroke();

            ctx.beginPath();

            ctx.fillStyle = color ?? 'rgba(55, 59, 62, 0.5)';



            ctx.arc(next.x, next.y, 4, 0, Math.PI * 2);



            ctx.fill();

          } else {

            ctx.moveTo(item.x, item.y);

            ctx.quadraticCurveTo(item.x, next.y, next.x, next.y);

            ctx.lineWidth = 4;

            ctx.strokeStyle = color ?? 'rgba(55, 59, 62, 0.5)';

            ctx.stroke();

            ctx.beginPath();

            ctx.fillStyle = color ?? 'rgba(55, 59, 62, 0.5)';



            ctx.arc(item.x, item.y, 4, 0, Math.PI * 2);

            ctx.fill();

          }

        }

      }

    });

  }



  function drawProgressBgLine(points: ReturnType<typeof getStationsPosition>) {

    const ctx = canvasRef.current?.getContext(

      '2d',

    ) as unknown as CanvasRenderingContext2D;



    const index = points.findIndex((v) => v.status === 0);



    const newArr = points.slice(0, index);

    const lastEl = points[index];

    const curEl = points[index - 1];

    console.log(lastEl, curEl);



    if (lastEl) {

      /**处于顶部的时候画出箭头 */

      if (lastEl.y === curEl.y) {

        if (lastEl.x > curEl.x) {

          const centerP = {

            x: (lastEl.x - curEl.x) / 2 + curEl.x,

            y: curEl.y,

          };

          const img = new Image();

          img.src = carIcon;

          img.onload = function () {

            ctx.drawImage(img, centerP.x - 12, centerP.y - 32, 19, 24);

          };



          ctx.beginPath();

          ctx.moveTo(curEl.x, curEl.y);

          ctx.lineTo(centerP.x, centerP.y);

          /**生成三角形标记 */

          ctx.lineTo(centerP.x, centerP.y - 2);

          ctx.lineTo(centerP.x + 3, centerP.y);

          ctx.lineTo(centerP.x, centerP.y + 2);

          ctx.lineTo(centerP.x, centerP.y);

          ctx.fillStyle = 'rgba(107, 255, 236, 1)';

          ctx.fill();



          ctx.lineWidth = 4;

          ctx.strokeStyle = 'rgba(107, 255, 236, 1)';

          ctx.stroke();

        }

        /** 其他条件暂时留空 */

      }

    }



    /** 生成带进度颜色背景 */

    drawBgLine(newArr, 'rgba(107, 255, 236, 1)');

  }

  function draw() {

    if (!canvasRef.current) {

      return;

    }

    const ctx = canvasRef.current?.getContext(

      '2d',

    ) as unknown as CanvasRenderingContext2D;



    ctx.clearRect(0, 0, canvasRef.current?.width, canvasRef.current?.height);

    if (ctx) {

      /** 绘制当前遍数的文字 */

      ctx.font = '12px serif';



      ctx.fillStyle = '#fff';

      ctx.fillText(text, 10, canvasRef.current?.height / 2 + 24);



      const points = getStationsPosition();

      /** 画出背景线 */

      drawBgLine(points);



      /** 画出当前进度 */

      drawProgressBgLine(points);



      points.forEach((item) => {

        if (item.type !== 'corner') {

          ctx.clearRect(item.x - 6, item.y - 6, 12, 12);

          ctx.beginPath();

          /** 生成标记点 */

          ctx.moveTo(item.x, item.y);



          ctx.fillStyle =

            item.status === 2

              ? 'rgba(255, 157, 31, 1)'

              : item.status === 1

              ? 'rgba(107, 255, 236, 1)'

              : 'rgba(55, 59, 62, 1)';

          ctx.arc(item.x, item.y, 4, 0, Math.PI * 2);

          ctx.fill();

          ctx.beginPath();

          ctx.lineWidth = 1;

          ctx.strokeStyle = 'rgba(55, 59, 62, 1)';

          ctx.arc(item.x, item.y, 6, 0, Math.PI * 2);

          ctx.stroke();

          ctx.closePath();



          ctx.fillStyle = '#fff';

          ctx.fillText(item.num, item.x - 4, item.y - 12);

        }

      });

    }

  }



  useEffect(() => {

    draw();

  }, []);



  return <canvas ref={canvasRef} width="390" height="120"></canvas>;

};



export default LineCanvas;

转载请注明出处！

前言

现在的前端要处理越来越多的业务需求，如果你的业务中有涉及PDF的处理，你肯定会遇到这么一种情况，
在一个原始的pdf文件上合成进一张图片，或者一段文字。

之前的解决方案基本上是把图片扔给后端，让后端处理，处理好之后，前端再调用接口拿到。

如果非要前端来做，也不是不可以。

canvas

网上搜了一圈，主流的方案是，用canvas画布将pdf画出来，再将图片合成进canvans。
这里也提供一下这个方案的代码

const renderPDF = async (pdfData, index, pages, newPdf, images = []) => {

  await pdfData.getPage(index).then(async (pdfPage) => {

    const viewport = pdfPage.getViewport({ scale: 3, rotation: 0 })

    const canvas = document.createElement("canvas")

    const context = canvas.getContext("2d")

    canvas.width = 600 * 3

    canvas.height = 800 * 3

    // PDF渲染到canvas

    const renderTask = pdfPage.render({

      canvasContext: context,

      viewport: viewport,

    })



    await renderTask.promise.then(() => {

      if (index > 1) {

        newPdf.addPage()

      }

      newPdf.addImage(canvas, "JPEG", 0, 0, 600, 800, undefined, "FAST")

      images.forEach((item) => {

        let width = item.width

        let height = item.height

        if (index == pages) {

          item.src !== "" &&

            newPdf.addImage(

              item.src,

              "PNG",

              item.x,

              item.y,

              width,

              height,

              undefined,

              "FAST"

            )

        }

      })

    })

  })

}

但是！

这样会有一个很严重的问题，那就是pdf失真，显得很模糊，当然也有解决方案，那就是canvas的缩放比例增加，

但是，缩放比例的增加却带来了pdf文件大小的倍数及增加，前端渲染的压力很大，只有7张的pdf，已经渲染出了8M大小常常见到loading等待。

所以有没有更好的方法解决呢？

有的。

pdf-lib

那就是今天所推荐的库 pdf-lib
github地址
他在github上的star 有5.6k，算的上是成熟，顶级的开源项目

在任何JavaScript环境中创建和修改PDF文档。

好，今天就只介绍如何将图片合成进pdf的功能 ，抛砖引玉。

其余的功能由您自己探索。

合成的思路是这样的：

• 1、我们的原始pdf，转换成pdf-lib 可识别的格式


• 2、同时将我们的图片合成进 pdf-lib里


• 3、pdf-lib 导出合成后的pdf

由于他只是一个工具，没有办法展示pdf
最后找一个pdf预览工具显示在页面即可
我找的是 vue-pdf-embed

这样，使用pdf-lib 方案，就不再是canvas画布画出来的。
我们可以看到，生成后的pdf文件体积增加不大，

而且能够保留原始pdf的文字选择，不再是图片了

同样，页面的缩放不会出现模糊失真的情况（因为不是图片，还是保持文字的矢量）。

代码

以下是代码，请查收

import { PDFDocument } from "pdf-lib"



const getNewPdf = async (pdfBase64, imagesList = []) => {

  // 创建新的pdf

  const pdfDoc = await PDFDocument.create()



  let page = ""

  // 传入的pdf进行格式转换

  const usConstitutionPdf = await PDFDocument.load(pdfBase64)

  // 获取转换后的每一页数据

  const userPdf = usConstitutionPdf.getPages()

  //   将每一个数据 导入到我们新建的pdf每一页上

  for (let index = 0; index < userPdf.length; index++) {

    page = pdfDoc.addPage()

    const element = userPdf[index]

    const firstPageOfConstitution = await pdfDoc.embedPage(element)

    page.drawPage(firstPageOfConstitution)

    // 如果有传入图片，则遍历信息，并将他合成到对应的页码上

    const imageSel = imagesList.filter((i) => i.pageIndex === index)

    if (imageSel.length > 0) {

      for (let idx = 0; idx < imageSel.length; idx++) {

        const el = imageSel[idx]

        const pngImage = await pdfDoc.embedPng(el.src)

        page.drawImage(pngImage, {

          x: +el.x,

          y: +el.y,

          width: +el.width,

          height: +el.height,

        })

      }

    }

  }

  //   保存pdf

  const pdfBytes = await pdfDoc.save()

  // 将arrayButter 转换成 base64 格式

  function ArrayBufferToBase64(buffer) {

    //第一步，将ArrayBuffer转为二进制字符串

    var binary = ""

    var bytes = new Uint8Array(buffer)

    for (var len = bytes.byteLength, i = 0; i < len; i++) {

      binary += String.fromCharCode(bytes[i])

    }

    //将二进制字符串转为base64字符串

    return window.btoa(binary)

  }



  //   console.log("data:application/pdf;base64," + ArrayBufferToBase64(pdfBytes))

  //   最后将合成的pdf返回

  return "data:application/pdf;base64," + ArrayBufferToBase64(pdfBytes)

}

export default getNewPdf

这里的传参要注意，

• pdfBase64 是base64位的格式


• imagesList 数组对象格式为
  

  [
  
    {
  
      src:'base64',
  
      x:'',
  
      yL'',
  
      width:'',
  
      height:'',
  
      pageIndex:''
  
    }
  
  ]
  
  

  
  

最后也附上vue文件中如何使用的代码

<template>

<div>

  <el-button @click="pdfComposite">生成新的pdf</el-button>

  <div class="pdf-content">

    <vue-pdf-embed

      :source="url"

    />

  </div>

</div>



</template>



<script>

import VuePdfEmbed from "vue-pdf-embed/dist/vue2-pdf-embed"

import getNewPdf from "./utils"

import { pngText, pdfbase64 } from "../data"

export default {

  name: "PdfPreview",

  components: {

    VuePdfEmbed,

  },



  data() {

    return {

      url: pdfbase64,// 原始的base64位 pdf

    }

  },

  methods: {

    pdfComposite() {

    // getNewPdf 返回的是promise 对象

      getNewPdf(this.url, pngText).then(res =>{

        this.url =  res 

      })

    },

  },

}

</script>



<style >

.pdf-content {

  width: 400px;

  min-height: 600px;

}

</style>

最近在做的一个前端小项目，需要一种比较炫酷的字体，在网上找到了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这个名字是可以自定义的，但是在样式文件中的无论什么地方使用的时候都不能少了引号。

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

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 设计的初衷，整体来说还是挺简单，希望对你有所帮助 :)

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

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就报错，这是真的折磨哈哈哈哈哈哈

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

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

基于 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拖拽组件实现产品需求？


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

随着前端项目的复杂度越来越高，打包后的文件体积也越来越大，这直接影响到页面的加载速度。为了优化加载速度，我们需要采取各种方式来减小包的体积。使用 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进制存储数据是一种有效的前端优化手段，特别适用于需要大量静态数据的情况。

前言

我们有一个需求，用户的昵称如果长度超过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属性

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

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

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

一、以前是这样的

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 组件名使用多个单词的规则。

  },

};