背景与思考

前端在很多后端开发人员中，总是觉得没啥技术含量。尤其是在老java眼中，深深感觉存在严重的鄙视链。然后就是自己的职业规划，也不想一直做前端敲代码。毕竟自己的付出不少，也想收获属于自己的成就感。然后自己的横向发展就成了必然。

后端技术首推Node

Node框架推荐Koa

学习推荐

我当初学习也是想看了一下官网，发现确实如介绍般的简单，但是对于入门者来说，有点简单的过分了。在此推荐阮一峰老师的网络日志（不是打广告，确实是我当初前端起步阶段的老师之一，受益匪浅）。

主要代码解析

项目结构

app.js源码

const Koa = require('koa');

const Router = require('koa-router');



// 跨域模块

var cors = require('koa2-cors');

//文件模块

const fs = require('fs');



const { historyApiFallback } = require('koa2-connect-history-api-fallback');

//静态文件加载

const serve = require('koa-static');

//路径管理

const path = require('path');



//koa-body对文件上传进行配置

const koaBody = require('koa-body')



//实例化koa

const app = new Koa();



app.use(historyApiFallback());



app.use(cors());

const router = new Router();

const bodyParser = require('koa-bodyparser');

const controller = require('./controller');

app.use(async (ctx, next) => {

  ctx.set("Access-Control-Allow-Origin", "*")

  await next()

})

app.use(bodyParser());

// 处理跨域



app.use(controller());



app.use(koaBody({

	multipart:true,

	formidable:{

		maxFileSize:50000*1024*1024, //设置上传文件大小最大限制，默认为2m，2000*1024*1024

		keepExtensions: true // 保留文件拓展名

	}

}))





// 1.主页静态网页 把静态页统一放到public中管理

const main = serve(path.join(__dirname) + '/build');



//配置路由

app.use(router.routes()).use(router.allowedMethods());



const port = 5000;

app.use(main)



app.listen(port, () => {

	console.log(`server started on ${port}`)

});

依赖包讲解

const Koa = require('koa');

这是引入koa框架，这是重中之重，只有引入了才能够在项目中使用。在项目中会通过new来实例化，比如代码中的const app = new Koa();。然后再定义一个监听的端口，app.listen()方法来进行监听。

const fs = require('fs');

这是koa自带的文件模块，如果你想对系统文件进行读取，修改。或者文件上传保存，都离不开整个fs模块，fs.readFile和fs.readFileSync。

const koaBody = require('koa-body')

Koa-body是基于Koa的中间件模型构建的，主要用于文件上传，以及在中间件中对请求体的解析。对请求体的解析中，我们主要使用koa-bodyparser，它可以将http请求中的数据，解析成我们需要的JavaScript对象。

const Router = require('koa-router');

```门口

Router模块就是路由，此路由和前端路由有差异，此路由可以理解为前端理解的api接口，只是叫法不一样而已。



```js

const { historyApiFallback } = require('koa2-connect-history-api-fallback');

koa2-connect-history-api-fallback是一个专门为 Koa2 框架设计的中间件，它的主要目的是在SPA应用中处理URL重定向，尤其是在用户直接输入或者通过后退按钮访问非根URL时。 这个中间件会将所有未匹配到特定路由的请求转发到默认HTML文件（通常是 index.html），确保SPA可以正常启动并处理路由。还记得当初自己终于完成了一整套的项目线上部署，可把自己开心坏了，但是同事在一次用着发现，刷新页面时，页面直接变成了404，你说吓不吓人。盘查一下发现自己在vue前端中的路由为何在后端中变成了一个get请求。

controller.js源码

const fs = require('fs')



// add url-route in /controllers:



function addMapping (router, mapping) {

  for (var url in mapping) {

    if (url.startsWith('GET ')) {

      var path = url.substring(4)

      router.get(path, mapping[url])

      // console.log(`register URL mapping: GET ${path}`);

    } else if (url.startsWith('POST ')) {

      var path = url.substring(5)

      router.post(path, mapping[url])

      // console.log(`register URL mapping: POST ${path}`);

    } else if (url.startsWith('PUT ')) {

      var path = url.substring(4)

      router.put(path, mapping[url])

      // console.log(`register URL mapping: PUT ${path}`);

    } else if (url.startsWith('DELETE ')) {

      var path = url.substring(7)

      router.del(path, mapping[url])

      // console.log(`register URL mapping: DELETE ${path}`);

    } else {

      // console.log(`invalid URL: ${url}`);

    }

  }

}



function addControllers (router, dir) {

  fs.readdirSync(__dirname + '/' + dir)

    .filter(f => {

      return f.endsWith('.js')

    })

    .forEach(f => {

      // console.log(`process controller: ${f}...`);

      let mapping = require(__dirname + '/' + dir + '/' + f)

      addMapping(router, mapping)

    })

}



module.exports = function (dir) {

  let controllers_dir = dir || 'controllers',

    router = require('koa-router')()

  addControllers(router, controllers_dir)

  return router.routes`()`

}

controller讲解

在这个controller中，我们主要做了一件事，那就是路由映射逻辑处理。

function addControllers()

这个方法用于自动加载指定目录下的js文件，它使用fs.readdirSync读取目录，然后通过filter和forEach方法来处理每个文件名，只选择以.js结尾的文件，并将这些文件的路由映射添加到router上

function addMapping()

这个函数用于将HTTP方法（如GET、POST、PUT、DELETE）和对应的URL路径映射到处理函数上。它遍历传入的mapping对象，根据URL的前缀（如GET 、POST 等）来确定使用哪个HTTP方法，并将路径和处理函数注册到router上。

controllers下路由POST方法

const jwt = require('jsonwebtoken')

module.exports = {

  'POST /login': async (ctx, next) => {

    var key = ctx.request.body

    if (key.username && key.password) {

      return new Promise(function (resolve, reject) {

        var MongoClient = require('mongodb').MongoClient

        var MG_URL = 'mongodb://***********/'

        MongoClient.connect(

          MG_URL,

          { useUnifiedTopology: true },

          function (err, db) {

            if (err) throw err

            var dbo = db.db('website')

            dbo

              .collection('user')

              .find({ username: key.username, password: key.password })

              .toArray(function (err, result) {

                if (result.length) {

                  const TOKEN = jwt.sign(

                    {

                      name: result[0].username

                    },

                    'MY_TOKEN',

                    { expiresIn: '24h' }

                  )

                  let data = {

                    username: result[0].username,

                    token: TOKEN

                  }

                  ctx.response.body = {

                    result: 1,

                    status: 200,

                    code: 200,

                    data: data

                  }

                } else {

                  ctx.response.body = {

                    result: 0,

                    status: 200,

                    code: 0,

                    msg: '该用户不存在'

                  }

                }



                if (err) throw err

                resolve(result)

                db.close()

              })

          }

        )

      })

    } else {

      ctx.response.body = {

        result: 0,

        status: 200,

        code: 0,

        msg: 'error'

      }

    }

  }

}

这是一个登录的login方法，用POST进行请求。在这个地方用了一下mongodb数据库存储。在api接口请求login方法时，获取请求中所携带的参数进行解析，并判断此用户以及密码是否在我们的数据库中，如果存在返回成功的提示以及相关数据，如果错误，则提示错误。当然如果还不会数据库的使用，可以去除数据库相关部分，直接用本地json数据，这个比较简单，就是fs读取本地json文件，然后返回给api接口。不在此做详细说明。

controllers下路由GET方法

module.exports = {

  'GET /getNews': async (ctx, next) => {

    return new Promise(function (resolve, reject) {

      var MongoClient = require('mongodb').MongoClient

      var MG_URL = 'mongodb://********'

      MongoClient.connect(

        MG_URL,

        { useUnifiedTopology: true },

        function (err, db) {

          if (err) throw err

          var dbo = db.db('website')

          dbo

            .collection('news')

            .find({})

            .toArray(function (err, result) {

              if (result.length) {

                ctx.response.body = {

                  result: 1,

                  status: 200,

                  code: 1,

                  data: result

                }

              } else {

                ctx.response.body = {

                  result: 0,

                  status: 200,

                  code: 0,

                  msg: '暂无数据'

                }

              }

              if (err) throw err

              resolve(result)

              db.close()

            })

        }

      )

    })

  }

}

这是一个获取新闻的getNews方法，用GET请求。主要用来查询数据库中的list的信息。DELETE，PUT等方法不在此处贴出更多源码。

数据库首推mondodb

学习推荐

为啥选择MongoDB数据库，相对来说操作还是比较简单，而且存储的数据类型都是对象的形式，前端可以轻松拿捏。在这里直接推荐菜鸟的mongodb教程，看名字就知道，这是一个适合菜鸟初步学习的地方。讲解也比较详细，学完上面的内容，用mongodb数据库进行基本的数据存储和操作已经没有问题了。

总结

通过以上的分享，其实对大多数前端来说，开启一个简单的后端服务和接口请求，已经可以开箱即用了。想要完整的学习代码，也可以私信我。虽然不是很完善，但麻雀虽小五脏俱全。

思考

在前端行业已经接7载。曾经害怕java的恐惧而转入前端行业，所有受到鄙视也是有一部分原因吧，毕竟自己曾经年少无知，害怕吃苦选择了一个稍微简单的前端就稀里糊涂的就业了，保命要紧。但是在后来又想改变这个鄙视链，自己就开始了nodejs的学习，python的学习，数据库MongoDB，MySQL，PostgreSQL。学不完，压根学不完。
后面再无尽的内卷中，有的做开发不是自己的路，也想做做管理，毕竟前端做到前端组长就已经是极限了，在公司以java为尊的环境下，想做更高的级别几乎不可能。毕竟自己算是耿直死宅，不善交际，讨不到大领导的喜爱。然后又开始了原型的学习，PMP项目管理证书的考取（进行中），也曾有单独出去做产品的想法，面试过一个，但是与自己的预期薪资相差太大，没去。

在刷抖音的时候，发现有一个直播的专属导航页签，切换到这个页签之后，刷出来的内容全都是直播，不过都是在“门外”观看，没有进入直播间；

短暂的停留之后，会出现一个自动进入直播间的提示，并且有一个描边动画，动画结束之后，就会进入直播间，今天我就尝试通过多种方式来实现这个动画效果。

1. 渐变实现

效果如上图所示，渐变需要使用到的是conic-gradient锥形渐变，文档地址：conic-gradient

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        html,

        body {

            height: 100%;

            margin: 0;

        }



        body {

            display: flex;

            justify-content: center;

            align-items: center;

            background: linear-gradient(90deg, #1F1C2C 0%, #928DAB 100%);

            color: #fff;

        }



        .wrap {

            position: relative;

            background-color: rgba(255, 255, 255, 0.2);

            width: fit-content;

            padding: 10px 20px;

            border-radius: calc(1em + 10px);

        }



        /*使用自定义属性来控制进度*/

        @property --offset {

            syntax: "<length-percentage>";

            inherits: false;

            initial-value: 0;

        }



        .wrap.gradient-animation {

            overflow: hidden;

            /*和普通 css 变量一样使用即可*/

            background-image:

                    conic-gradient(

                    #fff 0%,

                    #fff var(--offset),

                    transparent var(--offset) 100%

            );

        }



        /*需要使用一个遮挡来挡住多余的部分，只保留描边部分*/

        .wrap.gradient-animation::before {

            content: ' ';

            position: absolute;

            top: 2px;

            left: 2px;

            right: 2px;

            bottom: 2px;

            background: #1F1C2C;

            border-radius: inherit;

            z-index: 0;

        }



        .wrap.gradient-animation:hover {

            animation: gradient 5s linear 1 forwards;

        }

        

        @keyframes gradient {

            0% {

                --offset: 0;

            }

            100% {

                --offset: 100%;

            }

        }



    </style>

</head>

<body>

<div class="wrap gradient-animation">

    <!--  需要控制层级显示  -->

    <span style="position: relative; z-index: 1;">自动进入直播间</span>

</div>

</body>

</html>

conic-gradient的技术细节就不展开了，感兴趣的可以自行查阅文档，这里主要的技术点在于--offset这个自定义属性，因为渐变本身是不支持动画的，所以需要借助这个自定义属性来实现动画效果，文档地址：@property

这里的效果其并不是很理想，因为conic-gradient的渐变是一个圆形的渐变，而实际效果是边框的一个描边，所以需要使用一个遮罩来挡住多余的部分，只保留描边部分。

由于使用了伪元素来实现遮罩，所以还需要控制层级显示，避免遮罩挡住了文字，并且原效果是透明的背景，这里使用遮罩层之后背景就不能是透明的了，而且动画在每一个部分执行的时间都不连贯。

可以说这种方式有很多的局限性，所以我们来看看下一种方式。

2. 渐变加 mask 实现

渐变加mask的实现思路和上面的类似，主要是解决了上面的背景半透明的问题，文档地址：mask

代码如下：

<div class="wrap gradient-mask">

    <span style="position: relative; z-index: 1;">自动进入直播间</span>

</div>

.wrap.gradient-mask::before {

    content: ' ';

    position: absolute;

    inset: 0;

    background-color: rgba(255, 255, 255, 0.1);

    background-image: conic-gradient(

            #fff 0%,

            #fff var(--offset),

            transparent var(--offset) 100%

    );

    border-radius: inherit;



    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><rect width='150' x='1' y='1' height='40' rx='20' fill='transparent' stroke='red' stroke-width='2' stroke-alignment='outside'/></svg>");

    mask-size: 100% 100%;

    mask-repeat: no-repeat;

}



.wrap.gradient-mask:hover::before {

    animation: gradient 5s linear 1 forwards;

}

这里把效果整体迁移到了::before伪元素上，使用mask-image里面加了一个svg来处理描边的问题，这样就不需要使用遮罩来挡住多余的部分，只保留描边部分。

但是这里的问题也很明显，那就是svg并不能很好的响应式，而且因为svg的其他原因，导致描边的边宽有点被裁剪，这里也只是提供一个思路，并不是最佳实践。

3. 使用 svg 实现

上面都已经使用到了svg作为遮罩，那么直接使用svg更简单直接，这种情况个人也比较推荐，代码如下：

<div class="wrap svg">

    <svg xmlns="http://www.w3.org/2000/svg">

        <rect width="150" x="1" y="1" height="40" rx="20" stroke="rgba(255, 255, 255, 0.1)" stroke-width="2" />

        <rect width="150" x="1" y="1" height="40" rx="20" class="rect" />

    </svg>

    <span style="position: relative; z-index: 1;">自动进入直播间</span>

</div>

.wrap.svg svg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

}



.wrap.svg svg > rect {

    width: calc(100% - 2px);

    height: calc(100% - 2px);

    fill: transparent;

    stroke-width: 2;

}



.wrap.svg svg > .rect {

    stroke-dasharray: 350;

    stroke-dashoffset: 350;

    stroke: white;

    stroke-width: 2;

}



.wrap.svg:hover svg > .rect {

    transition: stroke-dashoffset 5s linear;

    stroke-dashoffset: 0;

}

svg的描边效果主要是通过stroke-dasharray和stroke-dashoffset来实现的，svg描边效果也是一个非常有趣的实现。

stroke-dasharray是用来控制虚线的，这个值越大，虚线之间的间隔也越大，大到一定程度这个虚线就正好将整个形状包裹住。

stroke-dashoffset是用来控制虚线的偏移量，当这个值等于stroke-dasharray的时候，虚线就会完全消失，等于0的时候，虚线就会完全显示。

根据svg的特性，描边是在形状的外部，所以最外层有一个半透明的边框路径显示的并不完全，需要通过一些技巧来处理。

所以上面的代码会有两个rect，一个是用来描边的，一个是用来做半透明的边框的，这样就可以实现一个比较完美的描边动画效果。

但是上面的描边起点和终点都是在左上角，如果需要在中间的话，可以通过path来实现，感兴趣的可以自行尝试，这里提供path的代码：

<svg viewBox="0 0 600 150" xmlns="http://www.w3.org/2000/svg">

    <path d="M 100 0 L 500 0 A 50 50 0 1 1 500 150 L 100 150 A 50 50 0 1 1 100 0 Z" fill="transparent" stroke="rgba(255, 255, 255, 0.1)" stroke-width="2" />

</svg>

path需要微调，因为没有贴边，可以使用一些在线网站来进行调整，比如：svg-path-editor，可自行探索。

总结

这一篇文章通过多种方式来实现一个描边动画效果，主要技术有：

当然肯定还有其他的方式来实现这个效果，这里只是提供了一些思路，希望对大家有所帮助。

原文：Double your specificity with this one weird trick

在一个理想的世界里，我们的 CSS 代码组织得井井有条，易于维护。然而，现实往往大相径庭。你的 CSS 代码是完美的，但其他人那些烦人的 CSS 可能会与你的风格冲突，或者应用了你不需要的样式。

此外，你可能也无法修改那些 CSS。也许它来自你正在使用的 UI 库，也许是一些第三方的小组件。

更糟糕的是，HTML 也不受你控制，添加一些额外的 class 或 id 属性来覆盖样式也并不可行。

不知不觉中，你被卷入了一场 CSS 优先级之战。你的选择器需要优先于他们的选择器。开发者很容易被『诱惑 😈』去使用 !important，但你知道这是不好的实践，我们能不能有一种更优雅的方式来实现我们覆盖的诉求？

本文将教给你一个技巧，可以用一种不是很 hacky 的方式应对这些情况 👩‍💻。

示例 🔮

假设你正在开发一个网站，该网站有一个新闻订阅表单。它包含一个复选框，但复选框的位置有点偏。你需要修正这个问题，但注册表单是一个嵌入到页面上的第三方组件，你无法直接修改它的 CSS。

通过浏览器检查复选框，确定只要改变它的 top 位置即可。当前的位置是通过选择器.newsletter .newsletter__checkbox .checkbox__icon 设置的，它的权重为 (0,3,0)。

一开始你可能会使用相同的选择器来修改 top 值：

/* 覆盖新闻通讯复选框的顶部位置 */

.newsletter .newsletter__checkbox .checkbox__icon {

  top: 5px;

}

当 CSS 的顺序是固定的，并且你可以保证你的 CSS 规则一定在他们的后面的情况下，这足够了。因为『后来居上』：即如果有多个相同的 CSS 选择器选择了同一个DOM元素，那么最后出现的将“获胜”。

然而，大多数时候你无法保证代码顺序。此时你需要增加选择器的优先级。你可以在 DOM 中寻找一些额外的类名，一般从父元素中添加：

/* 更多的类名！权重现在是(0,4,0) */

.parent-thing .newsletter .newsletter__checkbox .checkbox__icon {

  top: 5px;

}

或者你发现这个元素恰好是一个 ，可以将其加入选择器提高优先级：

/* 权重现在是 (0,3,1) */

.newsletter .newsletter__checkbox span.checkbox__icon {

  top: 5px;

}

但所有这些方法都有副作用，都会使你的代码变得脆弱。如果 .parent-thing 突然不见了呢，比如你升级了某个外部依赖（比如 antd 😅）？或者如果 .checkbox__icon 从 span 改成了不同的元素怎么办？突然间，你的高优先级选择器什么也选不到了！

当浏览器计算 CSS 选择器优先级时，它们本质上是在计算你组合了多少 ID、类、元素或等效选择器。实际上可以多次重复同一个选择器，每次重复都会增加权重。CSS 选择器 Level 4 规范 写到：

CSS 选择器允许多次出现相同的简单选择器，而且可以增加权重。

因此，你可以通过重复（三次、四次……）相同的选择器提高权重：

/* 双重 .checkbox__icon！权重现在是 (0,4,0) */

.newsletter .newsletter__checkbox .checkbox__icon.checkbox__icon {

  top: 5px;

}

注意 .checkbox__icon.checkbox__icon 中没有空格！它是一个选择器，因为你针对的是具有那个类的单个元素

现在你可以简单地重复几次选择器来提升优先级！

译者注：该技巧其实在 MDN !important 章节 有示例（以下示例重复了3次#myElement）：

#myElement#myElement#myElement .myClass.myClass p:hover {

 color: blue;

}



p {

 color: red !important;

}

在 HTML 中重复 🚫

注意，这个技巧只在 CSS 中有效！在 HTML 中重复相同的类名对优先级没有任何影响。

<div class="badger badger badger">

  Mushroom!

div>

总结 🎯

CSS 可以多次重复同一个选择器，每次重复都会增加权重 🏋️‍♂️

这种 CSS 技巧是否有点 hack？也许是。然而我认为它让我们：

• 避免诉诸于 !important


• 『就近原则』提高可读性：重复多次的选择器，这样代码的意图对读者来说更清晰


• 这种模式让你很容易在代码中找到其他人的 CSS 覆盖，如果不再需要我们可以放心删除

只要你不过度使用它，我认为这是一个完全合法且 Robust 的技巧至少相比我们之前学会的所有技巧，下次处理棘手的覆盖三方样式情况时可以考虑用一用。

是否还有更好的解决办法？其实有，@layer 是官方推荐的最佳实践但是兼容性不好 Chrome>=99，而且使用场景有限。

一、为什么要自己制作节日头像？

很多人想为节日换上特别的头像，尤其是在国庆这样的节日气氛中，给自己的WX头像添加节日元素成为了不少人的选择。最初我也以为只需通过一些WX公众号简单操作，就能轻松给头像加上节日图案，比如国庆节、圣诞节头像等。然而，实际体验却很糟糕——广告无处不在！每一步操作几乎都被强制插入广告打断，不仅浪费时间，体验也非常差。

为了避开这些广告，享受更自由、更个性化的制作过程，我决定分享一个不用看广告的好方法：使用 Canvas 自己动手制作一个专属的节日头像！

二、源码 & 在线体验

👀 在线体验 | 📖 源码地址 | 欢迎start、欢迎共同交流

注意事项

• demo_admin 为体验用户，项目一人一号 ，如果体验人数过多，请自行选中项目中的登录方式进行登录
• 本文源码在 yf/ yf-vue-admin / src / views / demo / festival-avatar

三、 实现的功能与后续发展

在解决了广告干扰的问题后，我通过 Canvas 实现了多个实用功能，让大家可以轻松制作个性化的节日头像：

1. 头像裁剪功能
2. 头像与框架的拼接
3. 头像框透明度调节
4. 头像框颜色过滤(可自定义头像框)
5. 后续发展：Fabric.js 自定义贴图功能
6. 后续发展：更新更多节日的头像 & 贴图

四、当前素材及投稿征集

展示目前头像框素材，也欢迎大家投稿，我也会陆续更进头像框（项目中头像框已进行分类，这里为了方便展示，也可以自定义头像框）

1. 头像框

2. 贴图

五、代码实现

整体逻辑非常简单 : 头像 + 头像框 = 所需头像

1. 头像裁剪功能

页面部分

• 使用 :width 来根据设备类型设置宽度（device === DeviceEnum.MOBILE ? '95%' : '42%'）。
•  用于图像裁剪功能。
• 底部有文件上传和旋转按钮。

<template>

  <el-dialog

    v-model="dialog.visible"

    :width="device === DeviceEnum.MOBILE ? '95%' : '42%'"

    class="festival-avatar-upload-dialog"

    destroy-on-close

    draggable

    overflow

    title="上传头像"

  >

    <div style="height: 45vh">

      <vue-cropper

          ref="cropper"

          :autoCrop="true"

          :centerBox="true"

          :fixed="true"

          :fixedNumber="[1,1]"

          :img="imgTemp"

          :outputType="'png'"

      />

    div>

    <template #footer>

      <div class="festival-avatar-dialog-options">

        <el-button @click="uploadAvatar">

          <el-icon style="margin-right: 5px;">

            <UploadFilled/>

          el-icon>

          上传头像

          <input ref="avatarUploaderRef" accept="image/*" class="avatar-uploader" name="file" type="file"

                 @change="handleFileChange">

        el-button>

        <el-button @click="rotateLeft">

          <el-icon><RefreshLeft/>el-icon>

        el-button>

        <el-button @click="rotateRight">

          <el-icon><RefreshRight/>el-icon>

        el-button>

        <el-button type="primary" @click="submitForm">提 交el-button>

      div>

    template>

  el-dialog>

template>

代码逻辑部分（核心部分）

• imgTemp 用来存储上传的临时图片数据。
• handleFileChange 处理文件上传事件，校验文件类型并使用 FileReader 读取图片数据，并本地存储。
• rotateLeft 和 rotateRight 分别用于左旋和右旋图片。

// 省略部分属性定义

const imgTemp = ref<string>("") // 临时图片数据

const cropper = ref();  // 裁剪实例

const avatarUploaderRef = ref<HTMLInputElement | null>(null);  // 上传头像 input 引用



// 上传头像功能

function uploadAvatar() {

  avatarUploaderRef.value?.click(); // 点击 input 触发上传

}



// 上传文件前校验 : 略



// 处理文件上传

function handleFileChange(event: Event) {

  const input = event.target as HTMLInputElement;

  if (input.files && input.files[0]) {

    const file = input.files[0];



    if (!beforeAvatarUpload(file)) return;



    const reader = new FileReader();

    reader.onload = (e: ProgressEvent) => {

      imgTemp.value = e.target?.result as string; // 读取的图片数据赋给 imgTemp

    };

    reader.readAsDataURL(file);

  }

}



// 旋转功能

function rotateLeft() {

  cropper.value?.rotateLeft();

}



const rotateRight = () => {

  cropper.value?.rotateRight();

};

实现效果图

2. 头像与头像框合并

页面部分 （核心部分）

• compositeAvatar 为组合头像 ， avatarData 为头像数据 ，compositeCanvas 头像 Canvas , avatarFrameCanvas 头像框 Canvas
• 在没有 compositeAvatar 的时候展示 avatarData , 没有 avatarData 提示用户点击 PLUS 的图片

<div class="festival-avatar-preview">

  <div class="festival-avatar-preview__plus" @click="openAvatarDialog">

    

    <img v-if="compositeAvatar" :src="compositeAvatar" alt="合成头像"/>



    

    <img v-else-if="avatarData" :src="avatarData" alt="头像"/>



    

    <el-icon v-else color="#8c939d" size="28">

      <Plus>Plus>

    el-icon>

  div>

div>







<canvas ref="compositeCanvas" style="display: none;">canvas>



<canvas ref="avatarFrameCanvas" style="display: none;">canvas>

逻辑部分 （核心部分）

• 通过 toDataURL 转换后合成为组合头像 ， 通过 drawImage 合并 avatarFrameCanvas 和上文中avatarData 进行合并

const context = getCanvasContext(compositeCanvas); // 获取主 Canvas 上下文

const frameContext = getCanvasContext(avatarFrameCanvas); // 获取头像框 Canvas 上下文



// 省略非相关逻辑 , context 中写入 avatarData 内容



// 将处理后的头像框绘制到主 Canvas 上

context.drawImage(avatarFrameCanvas.value, 0, 0, avatarImg.width, avatarImg.height);



// 将合成后的图片转换为数据 URL

compositeAvatar.value = compositeCanvas.value!.toDataURL('image/png');

实现效果

当我们点击头像框的时候，合并头像

3. 头像框透明度调整

页面部分 与上文一样 , 通过调整 avatarFrameCanvas 的内容而调整头像框

逻辑部分 （核心部分）

通过 context 中 globalAlpha 属性设置全局透明度。

setFrameOpacity(frameContext, frameOpacity.value); // 设置头像框透明度

 

/**

 * 设置 Canvas 的透明度

 * @param context Canvas 的 2D 上下文

 * @param opacity 透明度值

 */

function setFrameOpacity(context: CanvasRenderingContext2D, opacity: number) {

  context.globalAlpha = opacity; // 设置全局透明度

}

实现效果

4. 头像框颜色过滤

页面部分 与上文一样 , 通过调整 avatarFrameCanvas 的内容而调整头像框

服务对象 我们有自定义头像框功能，但是自己找的头像很容易有白底的问题，所以更新此功能。

逻辑部分 （核心部分）

filterColorToTransparent 函数

• 作用：将与指定颜色相近的像素变为透明。

colorDistance 函数

• 作用：计算两种颜色（RGB 值）之间的距离。距离越小，颜色越相似。
• 计算方式：使用欧几里得距离公式计算两个 RGB 颜色向量之间的距离，如果距离小于一定的容差值（tolerance），则认为两种颜色足够接近。 

rgbStringToArray 函数

• 作用：将 RGB 字符串（例如 'rgb(255,255,255)'）转换为包含 r, g, b 值的对象。

/**

 * 将指定颜色过滤为透明

 * @param context Canvas 的 2D 上下文

 * @param width Canvas 宽度

 * @param height Canvas 高度

 */

function filterColorToTransparent(context: CanvasRenderingContext2D, width: number, height: number) {

  const frameImageData = context.getImageData(0, 0, width, height);

  const data = frameImageData.data;



  const targetColor = rgbStringToArray(colorFilter.value.color); // 将目标颜色转换为 RGB 数组



  // 遍历所有像素点

  for (let i = 0; i < data.length; i += 4) {

    const r = data[i];

    const g = data[i + 1];

    const b = data[i + 2];

    const distance = colorDistance({r, g, b}, targetColor); // 计算当前颜色与目标颜色的差距



    // 如果颜色差距在容差范围内，则将其透明度设为 0

    if (distance <= colorFilter.value.tolerance) {

      data[i + 3] = 0; // 设置 alpha 通道为 0（透明）

    }

  }



  // 将处理后的图像数据放回 Canvas

  context.putImageData(frameImageData, 0, 0);

}



/**

 * 计算两种颜色之间的距离（欧几里得距离）

 * @param color1 颜色 1，包含 r、g、b 属性

 * @param color2 颜色 2，包含 r、g、b 属性

 * @returns number 返回颜色之间的距离

 */

function colorDistance(color1: { r: number; g: number; b: number }, color2: { r: number; g: number; b: number }) {

  return Math.sqrt(

      (color1.r - color2.r) ** 2 +

      (color1.g - color2.g) ** 2 +

      (color1.b - color2.b) ** 2

  );

}



/**

 * 将 RGB 字符串转换为 RGB 数组

 * @param rgbString RGB 字符串（例如 'rgb(255,255,255)'）

 * @returns 返回一个包含 r、g、b 值的对象

 */

function rgbStringToArray(rgbString: string) {

  const result = rgbString.match(/\d+/g)?.map(Number) || [0, 0, 0]; // 匹配并转换 RGB 值

  return {r: result[0], g: result[1], b: result[2]}; // 返回 r、g、b 对象

}

实现效果

1. 在 Canva 自己制作一个头像

2. 上传头像框，制作头像 ( 过滤白色 )

六、结束语

开发很容易，祝大家各个节日快乐 ！！！

作者：翼飞
来源：juejin.cn/post/7419223935005605914

某天我骑着我的小电驴下班回到我那出租屋，习惯性的看了一眼我那停在门口的二手奥拓，突然发现有点不对劲，走近一看引擎盖上多了一大条划痕，顿时恶向胆边生，是谁！！！为此我决定用现有条件做一套简易的监控系统来应对日后的情况，于是有了这篇文章。

一 准备工作

由于是要做监控，硬件是必不可少的，所以首先想到的就是闲置的手机了，找了一台安卓8.1的古董出来，就决定是你了。因为之前在公司使用过
DroidCam这款软件用来进行webRTC的开发，所以这次就顺理成章的装了这款软件，连上家里的wifi后打开就相当于有了一台简易的视频服务器。那么硬件搞定了，接下来的就是软件了。梳理下来的话只有以下几点了

由于本人是个前端，因此这里就顺理成章的使用node来作为软件实现的第一方案了。

二 获取视频流，啊？怎么是这玩意儿

怎么获取它传过来的视频流呢？看了一下上打开的软件界面，发现给了两个地址，ip端口 和 ip端口/video，不出意料的这两个里面肯定是有能用的东西，挨个打开后发现不带video的地址是相当于一个控制台，带video的是视频的接口地址。那就好办了，我满怀激动的以为一切都很容易的时候，打开控制台一看，咦，这是啥玩意儿？它的所谓的视频是现在img标签里的，这在之前可是没见过哦，再看一眼接口地址，咦，这是一个长链接？点开详情看了一眼，好吧，又学到新东西了。它的Content-Type是multipart/x-mixed-replace;boundary='xxxx',这是啥呀，搜索了一下资料后如下。

MJPEG（Motion Joint Photographic Experts Gr0up）是一种视频压缩格式，其中每一帧图像都分别使用JPEG编码，不使用帧间编码，压缩率通常在20:1-50:1范围内。它的原理是把视频镜头拍成的视频分解成一张张分离的jpg数据发送到客户端。当客户端不断显示图片，即可形成相应的图像。

大致意思懂了，就是这就是一张张的图像呗。后面又看了一下服务端是如何生成这玩意儿的，这里就不细说了。

知道了是啥东西，那就要想怎么把它搞出来了

三 使用ffmpeg 获取每一帧

ffmpeg相信大家都不陌生，使用前需要先在本机上安装，安装方法的话这里就不赘述了。
安装后在系统环境变量高级设置中，增加path变量的值为ffmpeg在电脑上的路径。后续就可以使用了。

随便新建一个js文件

    const fs = require('fs')

    const path = require('path')

    //截取的视频帧的存储路径和命名方式

    const outputFilePattern = path.join(__dirname + '/newFrame', 'd.jpg');

    //视频服务器地址

    const mjpegUrl = 'http://192.168.2.101:4747/video?1920x1080';

    //通过child_process的spawn调用外部文件，执行ffmpeg，并传入参数

    //下方代码执行后在连接到服务后不手动停止的情况下期间会不断的在指定目录下生成获取到的图片

    const ffmpeg = require('child_process').spawn('ffmpeg', [

        '-i',

        mjpegUrl,

        '-vf',

        'fps=24',//设置帧率

        '-q:v',

        '1', // 调整此值以更改输出质量（较低的值表示更好的质量）  

        outputFilePattern // %d 将被替换为帧编号  

    ], { windowsHide: true });//调用时不显示cmd窗口

    

    //错误监听

    ffmpeg.on('error', function (err) {

        throw err;

    });

    

    //关闭监听

    ffmpeg.on('close', function (code) {

        console.log('ffmpeg exited with code ' + code);

    });



  //数据

    ffmpeg.stderr.on('data', function (data) {

        console.log('stderr: ' + data.toString());

        //执行合并图片操作

        //....

    });

上述代码运行后如果能正常连接上服务的话你会在指定目录下看到不断生成的图片。

四 将图片生成为视频

光有图片是不够的，我最终的预期是生成视频以供查看，所以添加以下的代码将图片合并为视频

//上面生成图片后存放的位置

let filePath = path.join(__dirname + '/newFrame', 'd.jpg');

let comd = [

        '-framerate',

        '24',

        '-i',

        filePath,

        '-c:v',

        'libx264',

        '-pix_fmt',

        'yuv420p',

        `${__dirname}/outVideo/${new Date().getFullYear()}-${(new Date().getMonth() + 1).toString().padStart(2, '0')}-${new Date().getDate().toString().padStart(2, '0')}_${new Date().getHours().toString().padStart(2, '0')}${new Date().getMinutes().toString().padStart(2, '0')}${new Date().getSeconds().toString().padStart(2, '0')}.mp4`



    ]

    const ffmpeg = require('child_process').spawn('ffmpeg', comd,{ windowsHide: true });

    ffmpeg.on('close', function (code) {

        console.log('ffmpeg exited with code ' + code);

        console.log('任务执行结束，开始删除')

    });

我这里定的是每2000张图片组合成视频，因此将第三步中的

ffmpeg.stderr.on('data', function (data) {

        console.log('stderr: ' + data.toString());

    });

改成

ffmpeg.stderr.on('data', function (data) {

        console.log('stderr: ' + data.toString());

        //打印结果 =>>frame= 1474 fps= 14 q=1.0 size=N/A time=00:01:01.41 bitrate=N/A speed=0.57x



        let arr = data.toString().split('fps')



        try {

            //获取frame数量用来计数

            frameCount = arr[0].split('=')[1].trim()



            console.log(frameCount)



              //为什么这里用大于而不是等于呢，因为获取frame可能不是总会计数到我们想要的值，踩过坑，注意

            if (frameCount > 2000) {

          

                console.log('数量满足')

                //关闭本次获取流

                ffmpeg.kill('SIGKILL');



                //这里执行合并文件的操作

                //...



            }



        } catch (e) { }



    });

到这里如果你一切顺利的话就能在指定的文件夹里看到合并完成后的MP4视频了。

五 合并完成后删除上次获取的图片

将第四步的

 ffmpeg.on('close', function (code) {

        console.log('ffmpeg exited with code ' + code);

        console.log('任务执行结束，开始删除')

    });

改为

 ffmpeg.on('close', async function (code) {

        console.log('ffmpeg exited with code ' + code);

        console.log('任务执行结束，开始删除')

        try {

        await fsE.emptyDir('your folderPath');

        console.log(`已清空文件夹`);

       

           //重新执行第二步

           //...

     

    } catch (err) {

        console.error(`无法清空文件夹: ${err}`);

    }

    });

这里的fsE是 const fsE = require('fs-extra');，需要安装并且导入

到这里为止，整个基本的流程就完成了

六 总结

整个程序到目前为止已经能基本满足我的需求，但是还存在不足，比如频繁的往硬盘上读写文件、容错处理等等，后续我的想法是把图片保存到内存中，在满足条件后再写入硬盘，减少文件的I/O操作，加入对人体的识别，接入之前写过的邮件通知，有人靠近自动记录时间点并发送到邮箱。当然了，我这个肯定比不了市面上的那些成熟产品，就是自己写着好玩的，请各位大佬轻喷！有错误和意见欢迎指正！

现场

大家好，我是多喝热水。

事情是这样的，那天晚上老板在群里吐槽说他在手机上写了将近 1000 字的评论不小心点了一下黑屏，然后内容就突然没了，如下：

原来是我们编辑器没有做草稿能力，导致关闭后原本编辑的内容都消失了，确实这个体验不太好，想想怎么把这里优化一下。

调研

像我们平时用得比较多的社交平台，比如某音、某书等，先从它们的评论区入手，看看主流的平台是怎么做的。

1）某音

某音的效果是，在某条视频下评论后划走，再划回来编辑的内容就不在了，看样子是没有做草稿能力，如图：

2）某书

某书的效果是，在某个笔记下面评论然后划走，再回来的时候内容是还在的。而且每条评论都有自己的编辑态，互不干扰，如图：

好看真好看，呸好用真好用，既然体验上某书更好，我决定仿照某书的方案来实现。

既然要做成某书的效果，那我们就需要解决两个问题：

1）他们评论区草稿内容是怎么存的？

2）存在哪里了？

内容怎么存？

先说说我的看法，如果要让每条评论都拥有独立的编辑态，那么肯定是需要一个唯一标识的，那我能想到的唯一标识就是ID。

内容存哪里？

存后端还是存前端？存前端的话又存哪里？这里我简单总结了一下：

存后端

优势：数据真正的持久化、安全性高

缺陷：需要网络连接，依赖后端，开发成本高

存前端

优势：简单易用、性能好、脱机可用

缺陷：无法真正持久化、存储空间有限、不安全

方案选择

回归到需求本身，我们不需要实时性多么高，所以存前端就已经可以满足我们的需求了。

但在前端存储还有一个存储空间问题，需要考虑一下存储内容的有效时间，过期了就得删除，不然会存在很多冗余数据，所以我们又面临新的问题，前端用什么来存？

浏览器常用的存储方案：cookie、localStorage、sessionStorage

1）cookie 是可以设置过期时间的，但如果存 cookie，那它的容量只有5kb，有点太小了，并且每次发请求 cookie 都会被携带上，无疑是增加了额外的带宽开销

2）sessionStorage 存储空间最大支持5MB，但窗口被关闭后数据就过期了，有效期仅仅是窗口会话期间，万一用户不小心关闭了窗口，数据也消失了，所以这个方案也不太妥当

3）相比之下 localStorage 的容量也有 5MB，足够大，但是它本身不支持设置过期时间（默认永久有效），需要人为去控制，好在这个成本并不高，综合之下我们还是选择存 localStorage 了

开发

选好方案后，就可以开始动手开发了！先把支持控制过期时间 的 localStorage 逻辑写一下。

写之前我们需要考虑一下代码的复用性，因为在我们网站中，有很多地方都用到了编辑器，比如评论区、交流内容发布等，如果每一处都写一遍的话，那这个代码就太冗余了，所以将它封装为一个 hook 是一个不错的选择，代码如下：

import { CACHE_TYPE, EXPIRES_TIME } from './constants';



/**

 * 缓存数据

 * @param key

 * @returns

 */

export default function useCache(key: string = CACHE_TYPE.ESSAY_CONTENT) {

  /**

   *  删除缓存数据

   */

  const removeCache = () => {

    localStorage.removeItem(key);

  };



  /**

   * 设置缓存数据

   * @param data 数据内容

   * @param expires 过期时间（毫秒）

   */

  const setCache = (data: any, expires: number = EXPIRES_TIME) => {

    const cacheData = {

      value: data,

      expires: expires ? Date.now() + expires : null, // 计算过期时间戳

    };

    localStorage.setItem(key, JSON.stringify(cacheData));

  };



  /**

   *  获取缓存数据

   * @returns 缓存数据或 null

   */

  const getCache = () => {

    const cachedString = localStorage.getItem(key);

    if (!cachedString) {

      return null;

    }

    const cachedObject = JSON.parse(cachedString);

    // 检查是否设置了过期时间并且是否已经过期

    if (cachedObject.expires && Date.now() > cachedObject.expires) {

      removeCache(); // 删除已过期的数据

      return null;

    }

    return cachedObject.value;

  };



  return { removeCache, setCache, getCache };

}

简单解释一下上面的代码：

1）useCache 函数主要接收一个 KEY，删除、获取、设置草稿数据都会用到这个 KEY，且我们保证它是唯一的

2）在设置需要缓存内容时（setCache），会给出一个 expires 的参数用于控制该数据的有效时间

3）获取数据的时候会校验一下有效时间，如果已经过期了则返回 null

在编辑器中应用

最后我们需要在用到编辑器的地方使用这个 hook。

可能有些小伙伴会觉得我们网站中用到编辑器的地方很多，这一步才是一个大工程，其实不然，因为我们所有用到编辑器的地方都是用的同一个组件，我们需要改动的地方就是那个公共的编辑器组件！

这时候封装带来的便捷性就体现的淋漓尽致，省去了不少时间用来摸鱼！！！

改动代码如下（伪代码）：

type GeneralContentEditorProps = {

  targetId?: string; // 缓存ID

  // 省略不相关代码...

};



/**

 * 通用的内容编辑器

 * @param props

 * @returns

 */

export default function GeneralContentEditor({

  targetId,

  // 省略不相关代码...

}: GeneralContentEditorProps) {

  // 省略不相关代码...

  const [content, setContent] = useState('')

  const { getCache, setCache, removeCache } = useCache(targetId);

  

  useEffect(() => {

    setContent(getCache() ?? '')

  }, [])

}

简单解释一下上面的代码：

1）给编辑器新增了一个属性 targetId，这个 targetId 用来作为缓存的唯一标识，由使用方提供给我们

2）初始化的时候去调 getCache 函数读取缓存的数据

3）有内容变更的时候调 setCache 函数去更新缓存的数据

到这里流程已经跑通了，但还缺少重要的一步，需要定时清空一下缓存的数据，因为现在的逻辑是如果我们不主动去获取这个数据，它还是占据着存储空间。

清空冗余数据

其实我们也不需要专门去写定时器来清空，只需要在编辑器初始化的时候去检测一遍就可以，所以代码还需加点料，如下图：

到这一步编辑器草稿能力就完善的差不多了，已经能够正常使用了，我们看看效果，如下：

nice，没有什么问题，好了，我要去摸鱼了 😋

前言

在数字化时代，地图服务已成为各类应用的标配，无论是导航、位置分享还是商业分析，地图都扮演着不可或缺的角色。然而，高质量的地图服务往往伴随着不菲的授权费用。公司原先使用的是国内某知名地图服务，但随着业务的扩展和成本的考量，老板决定寻找一种成本更低的解决方案。于是，我们的目光转向了免费的地图服务——天地图。

天地图简介

天地图（lbs.tianditu.gov.cn/server/guid…
是中国领先的在线地图服务之一，提供全面的地理信息服务。它的API支持地理编码、逆地理编码、周边搜索等多种功能，且完全免费。这正是我们需要的。

具体实现代码

为了将天地图集成到我们的系统中，我们需要进行一系列的开发工作。以下是实现过程中的关键代码段。

1. 逆地理编码

逆地理编码是将经纬度转换为可读的地址。在天地图中，这一功能可以通过以下代码实现：

public static MapLocation reverseGeocode(String longitude, String latitude) {

    Request request = new Request();

    LocateInfo locateInfo = GCJ02_WGS84Utils.gcj02_To_Wgs84(Double.valueOf(latitude), Double.valueOf(longitude));

    longitude = String.valueOf(locateInfo.getLongitude());

    latitude = String.valueOf(locateInfo.getLatitude());

    String postStr = String.format(REVERSE_GEOCODE_POST_STR, longitude, latitude);

    String encodedPostStr = null;

    try {

        encodedPostStr = URLEncoder.encode(postStr, "UTF-8");

    } catch (UnsupportedEncodingException e) {

        e.printStackTrace();

    }

    String url = REVERSE_GEOCODE_URL + "?tk=" + TK + "&type=" + GEOCODE + "&postStr=" + encodedPostStr;

    request.setUrl(url);

    Response<String> response = HttpClientHelper.getWithoutUserAgent(request, null);

    if (response.getSuccess()) {

        String body = response.getBody();

        JSONObject jsonObject = JSON.parseObject(body);

        String status = jsonObject.getString("status");

        if (!"0".equals(status)) {

            return null;

        }

        JSONObject resultObject = jsonObject.getJSONObject("result");

        MapLocation mapLocation = new MapLocation();

        String formattedAddress = resultObject.getString("formatted_address");

        mapLocation.setAddress(formattedAddress);

        String locationStr = resultObject.getString("location");

        JSONObject location = JSON.parseObject(locationStr);

        String lon = location.getString("lon");

        String lat = location.getString("lat");

        locateInfo = GCJ02_WGS84Utils.wgs84_To_Gcj02(Double.valueOf(lat), Double.valueOf(lon));

        lon = String.valueOf(locateInfo.getLongitude());

        lat = String.valueOf(locateInfo.getLatitude());

        mapLocation.setLongitude(lon);

        mapLocation.setLatitude(lat);

        JSONObject addressComponent = resultObject.getJSONObject("addressComponent");

        String address = addressComponent.getString("address");

        mapLocation.setName(address);

        mapLocation.setCity(addressComponent.getString("city"));

        return mapLocation;

    }

    return null;

}

2. 周边搜索

周边搜索允许我们根据一个地点的经纬度搜索附近的其他地点。实现代码如下：

public static List<MapLocation> nearbySearch(String query, String longitude, String latitude, String radius) {

    LocateInfo locateInfo = GCJ02_WGS84Utils.gcj02_To_Wgs84(Double.valueOf(latitude), Double.valueOf(longitude));

    longitude = String.valueOf(locateInfo.getLongitude());

    latitude = String.valueOf(locateInfo.getLatitude());

    Request request = new Request();

    String longLat = longitude + "," + latitude;

    String postStr = String.format(NEARBY_SEARCH_POST_STR, query, Integer.valueOf(radius), longLat);

    String encodedPostStr = null;

    try {

        encodedPostStr = URLEncoder.encode(postStr, "UTF-8");

    } catch (UnsupportedEncodingException e) {

        e.printStackTrace();

    }

    String url = SEARCH_URL + "?tk=" + TK + "&type=" + QUERY + "&postStr=" + encodedPostStr;

    request.setUrl(url);

    Response<String> response = HttpClientHelper.getWithoutUserAgent(request, null);

    List<MapLocation> list = new ArrayList<>();

    if (response.getSuccess()) {

        String body = response.getBody();

        JSONObject jsonObject = JSON.parseObject(body);

        JSONObject statusObject = jsonObject.getJSONObject("status");

        String infoCode = statusObject.getString("infocode");

        if (!"1000".equals(infoCode)) {

            return new ArrayList<>();

        }

        String resultType = jsonObject.getString("resultType");

        String count = jsonObject.getString("count");

        if (!"1".equals(resultType) || "0".equals(count)) {

            return new ArrayList<>();

        }

        JSONArray poisArray = jsonObject.getJSONArray("pois");

        for (int i = 0; i < poisArray.size(); i++) {

            JSONObject poiObject = poisArray.getJSONObject(i);

            MapLocation mapLocation = new MapLocation();

            mapLocation.setName(poiObject.getString("name"));

            mapLocation.setAddress(poiObject.getString("address"));

            String lonlat = poiObject.getString("lonlat");

            String[] lonlatArr = lonlat.split(",");

            locateInfo = GCJ02_WGS84Utils.wgs84_To_Gcj02(Double.valueOf(lonlatArr[1]), Double.valueOf(lonlatArr[0]));

            String lon = String.valueOf(locateInfo.getLongitude());

            String lat = String.valueOf(locateInfo.getLatitude());

            mapLocation.setLongitude(lon);

            mapLocation.setLatitude(lat);

            list.add(mapLocation);

        }

    }

    return list;

}

3. 文本搜索

文本搜索功能允许用户根据关键词搜索地点。实现代码如下：

public static List<MapLocation> searchByText(String query, String mapBound) {

    Request request = new Request();

    String postStr = String.format(SEARCH_BY_TEXT_POST_STR, query, mapBound);

    String encodedPostStr = null;

    try {

        encodedPostStr = URLEncoder.encode(postStr, "UTF-8");

    } catch (UnsupportedEncodingException e) {

        e.printStackTrace();

    }

    String url = SEARCH_URL + "?tk=" + TK + "&type=" + QUERY + "&postStr=" + encodedPostStr;

    request.setUrl(url);

    Response<String> response = HttpClientHelper.getWithoutUserAgent(request, null);

    List<MapLocation> list = new ArrayList<>();

    if (response.getSuccess()) {

        String body = response.getBody();

        JSONObject jsonObject = JSON.parseObject(body);

        JSONObject statusObject = jsonObject.getJSONObject("status");

        String infoCode = statusObject.getString("infocode");

        if (!"1000".equals(infoCode)) {

            return new ArrayList<>();

        }

        String resultType = jsonObject.getString("resultType");

        String count = jsonObject.getString("count");



        if (!"1".equals(resultType) || "0".equals(count)) {

            return new ArrayList<>();

        }

        JSONArray poisArray = jsonObject.getJSONArray("pois");

        for (int i = 0; i < poisArray.size(); i++) {

            JSONObject poiObject = poisArray.getJSONObject(i);

            MapLocation mapLocation = new MapLocation();

            mapLocation.setName(poiObject.getString("name"));

            mapLocation.setAddress(poiObject.getString("address"));

            String lonlat = poiObject.getString("lonlat");

            String[] lonlatArr = lonlat.split(",");

            LocateInfo locateInfo = GCJ02_WGS84Utils.wgs84_To_Gcj02(Double.valueOf(lonlatArr[1]), Double.valueOf(lonlatArr[0]));

            String lon = String.valueOf(locateInfo.getLongitude());

            String lat = String.valueOf(locateInfo.getLatitude());

            mapLocation.setLongitude(lon);

            mapLocation.setLatitude(lat);

            list.add(mapLocation);

        }

    }

    return list;

}

4. 坐标系转换

由于天地图使用的是WGS84坐标系，而国内常用的是GCJ-02坐标系，因此我们需要进行坐标转换。以下是坐标转换的工具类：

/**

 * WGS-84：是国际标准，GPS坐标（Google Earth使用、或者GPS模块）

 * GCJ-02：中国坐标偏移标准，Google Map、高德、腾讯使用

 * BD-09：百度坐标偏移标准，Baidu Map使用（经由GCJ-02加密而来）

 * <p>

 * 这些坐标系是对真实坐标系统进行人为的加偏处理，按照特殊的算法，将真实的坐标加密成虚假的坐标，

 * 而这个加偏并不是线性的加偏，所以各地的偏移情况都会有所不同，具体的内部实现是没有对外开放的，

 * 但是坐标之间的转换算法是对外开放，在网上可以查到的，此算法的误差在0.1-0.4之间。

 */

public class GCJ02_WGS84Utils {



    public static double pi = 3.1415926535897932384626;//圆周率

    public static double a = 6378245.0;//克拉索夫斯基椭球参数长半轴a

    public static double ee = 0.00669342162296594323;//克拉索夫斯基椭球参数第一偏心率平方



    /**

     * 从GPS转高德

     * isOutOfChina 方法用于判断经纬度是否在中国范围内，如果不在中国范围内，则直接返回原始的WGS-84坐标。

     * transformLat 和 transformLon 是辅助函数，用于进行经纬度的转换计算。

     * 最终，wgs84ToGcj02 方法返回转换后的GCJ-02坐标系下的经纬度。

     */

    public static LocateInfo wgs84_To_Gcj02(double lat, double lon) {

        LocateInfo info = new LocateInfo();

        if (isOutOfChina(lat, lon)) {

            info.setChina(false);

            info.setLatitude(lat);

            info.setLongitude(lon);

        } else {

            double dLat = transformLat(lon - 105.0, lat - 35.0);

            double dLon = transformLon(lon - 105.0, lat - 35.0);

            double radLat = lat / 180.0 * pi;

            double magic = Math.sin(radLat);

            magic = 1 - ee * magic * magic;

            double sqrtMagic = Math.sqrt(magic);

            dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);

            dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);

            double mgLat = lat + dLat;

            double mgLon = lon + dLon;

            info.setChina(true);

            info.setLatitude(mgLat);

            info.setLongitude(mgLon);

        }

        return info;

    }



    //从高德转到GPS

    public static LocateInfo gcj02_To_Wgs84(double lat, double lon) {

        LocateInfo info = new LocateInfo();

        LocateInfo gps = transform(lat, lon);

        double lontitude = lon * 2 - gps.getLongitude();

        double latitude = lat * 2 - gps.getLatitude();

        info.setChina(gps.isChina());

        info.setLatitude(latitude);

        info.setLongitude(lontitude);

        return info;

    }



    // 判断坐标是否在国外

    private static boolean isOutOfChina(double lat, double lon) {

        if (lon < 72.004 || lon > 137.8347)

            return true;

        if (lat < 0.8293 || lat > 55.8271)

            return true;

        return false;

    }



    //转换

    private static LocateInfo transform(double lat, double lon) {

        LocateInfo info = new LocateInfo();

        if (isOutOfChina(lat, lon)) {

            info.setChina(false);

            info.setLatitude(lat);

            info.setLongitude(lon);

            return info;

        }

        double dLat = transformLat(lon - 105.0, lat - 35.0);

        double dLon = transformLon(lon - 105.0, lat - 35.0);

        double radLat = lat / 180.0 * pi;

        double magic = Math.sin(radLat);

        magic = 1 - ee * magic * magic;

        double sqrtMagic = Math.sqrt(magic);

        dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);

        dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);

        double mgLat = lat + dLat;

        double mgLon = lon + dLon;

        info.setChina(true);

        info.setLatitude(mgLat);

        info.setLongitude(mgLon);



        return info;

    }



    //转换纬度所需

    private static double transformLat(double x, double y) {

        double ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y

                + 0.2 * Math.sqrt(Math.abs(x));

        ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;

        ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;

        ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;

        return ret;

    }



    //转换经度所需

    private static double transformLon(double x, double y) {

        double ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1

                * Math.sqrt(Math.abs(x));

        ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;

        ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;

        ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;

        return ret;

    }

}

结论

通过上述代码，我们成功地将天地图集成到了我们的系统中，不仅满足了功能需求，还大幅降低了成本。这一过程中，我们深入理解了地图服务的工作原理，也提升了团队的技术能力。

注意事项

• 确保在使用天地图API时遵守其服务条款，尤其是在商业用途中。


• 由于网络或其他原因，天地图API可能存在访问延迟或不稳定的情况，建议在生产环境中做好异常处理和备用方案。


• 坐标系转换是一个复杂的过程，确保使用可靠的算法和工具进行转换，以保证定位的准确性。

通过这次集成，我们不仅为公司节省了成本，还提升了系统的稳定性和用户体验。在未来的开发中，我们将继续探索更多高效、低成本的技术解决方案。

背景

在我们程序开发中，我们的代码会出现这种或那种的错误，我们使用try...catch进行捕获。如果需要不管是成功还是失败都需要执行，我们可能需要finally。

那么有一个问题，无论是否发生错误，在finally中的代码一定会执行吗？

下面我们看一个案例：

1. 案例

场景：请求一个接口，如果接口没有正确返回，我们使用try...finally包裹代码，代码如下：

function getMember(num) {

    return new Promise((resolve, reject) => {

        setTimeout(() => {

            if (num === 1) { 

                resolve(num) 

            }

            if (num === 0) { 

                reject() 

            }

        }, 2000)

    })

}



async function init() {

    try {

        console.log('打印***start')

        await getMember(0)

        console.log('打印***end')

    } catch (err) {

        console.log('打印***err')

    } finally {

        console.log('打印***finally')

    }

}

结果如下：

上述案例中，如果请求传入的num由另外一个接口返回，num的值不是0或者1,上述的getMember就一直处于pengding状态，接下来的finally也不会执行。

我们也可以这样理解，当在处理Promise问题时，我们需要确保Promise始终得到结果，不管是成功还是失败。

上述代码可以完善如下：

function getMember(num) {

    return new Promise((resolve, reject) => {

        setTimeout(() => {

            if (num === 1) {

                resolve(num);

            } else if (num === 0) {

                reject(new Error('Num is 0'));

            } else {

                // 默认情况，也解决Promise  

                resolve('Some default value');

            }

        }, 2000);

    });

}



async function init() {

    try {

        console.log('打印***start');

        const result = await getMember(2); // 传递一个非0非1的值  

        console.log('打印***end', result);

    } catch (err) {

        console.log('打印***err', err);

    } finally {

        console.log('打印***finally'); // 这行总是会被执行  

    }

}



init();

修改后的例子中，无论num的值是什么，Promise都会被解决（要么通过resolve，要么通过reject），,确保Promise被正常处理，才能确保finally执行。

2. try...catch注意点

2.1 仅对运行时的 error 有效

要使得 try...catch 能工作，代码必须是可执行的。换句话说，它必须是有效的 JavaScript 代码。

如果代码包含语法错误，那么 try..catch 将无法正常工作，例如含有不匹配的花括号：

try {

    {

{

} catch (err) {

    alert("引擎无法理解这段代码，它是无效的");

}

结果如下：

JavaScript 引擎首先会读取代码，然后运行它。在读取阶段发生的错误被称为“解析时间（parse-time）”错误，并且无法恢复（从该代码内部）。这是因为引擎无法理解该代码。

所以，try...catch 只能处理有效代码中出现的错误。这类错误被称为“运行时的错误（runtime errors）”，有时被称为“异常（exceptions）”。

2.2 try...catch 同步执行

如果在定时代码中发生异常，例如在 setTimeout 中，则 try...catch 不会捕获到异常：

try {

    setTimeout(function () {

        noSuchVariable; // 脚本将在这里停止运行

    }, 1000);

} catch (err) {

    alert("不工作");

} finally {

    console.log('打印***finally')

}

结果如下：

因为 try...catch 包裹了计划要执行的函数，该函数本身要稍后才执行，这时引擎已经离开了 try...catch 结构。

为了捕获到计划的（scheduled）函数中的异常，那么 try...catch 必须在这个函数内：

try {

    setTimeout(function () {

        try {

            noSuchVariable; // 脚本将在这里停止运行

        } catch (error) {

            console.log(error)

        }

    }, 1000);

} catch (err) {

    alert("不工作");

} finally {

    console.log('打印***finally')

}

结果如下：

总结

在使用try...catch...finally的时候，无论是否发生异常（即是否执行了catch块），finally块中的代码总是会被执行，除非在try、catch或finally块中发生了阻止程序继续执行的情况（如Promsie一直处理pending状态）。

如有错误，请指正O^O!

前言

相信很多前端小伙伴项目中都用到了富文本，但你们有没有做防XSS攻击处理？最近的项目由于比较紧急我也没有处理而是直接正常使用，但公司内部有专门的安全部门针对测试，然后测出来富文本被XSS攻击了，而且危险级别为高。

啊这....，那我就去解决一下吧，顺便从XSS和解决方案两个角度记录到下来毕竟好久没更新文章了。

先说说什么是XSS攻击？

简述：XSS全称Cross-Site Scripting也叫跨站脚本攻击，是最最最常见的网络安全漏洞，其实就是攻击者在受害者的浏览器中注入恶意脚本执行。这种攻击通常发生在 Web 应用程序未能正确过滤用户输入的情况下，导致恶意脚本被嵌入到合法的网页中。
执行后会产生窃取信息、篡改网页、和传播病毒与木马等危害，后果相当严重。

XSS又有三大类

1、存储型 XSS即Stored XSS

恶意的脚本被放置在目标服务器上面，通过正常的网页请求返回给用户端执行。

例如 在观看某个私人博客评论中插入恶意脚本，当其他用户访问该页面时，脚本会执行危险操作。

2、反射型 XSS即Reflected XSS

恶意的脚本通过 URL 参数或一些输入的字段传递给目标的服务器，用户在正常请求时会返回并且执行。

例如 通过链接中的参数后面注入脚本，当用户点击此链接时，脚本就会在用户的浏览器中执行危险操作。

3、DOM 基于的 XSS即DOM-based XSS

恶意的脚本利用 DOM（Document Object Model）操作来修改页面内容。
这种类型的 XSS 攻击不涉及服务器端的代码操作，仅仅是通过客户端插入 JavaScript 代码实现操作。

富文本就是属于第一种，把脚本藏在代码中存到数据库，然后用户获取时会执行。

富文本防XSS的方式？

网上一大堆不明不白的方法还有各种插件可以用，但其实自己转义一下就行，根本不需要复杂化。

当我们不做处理时传给后台的富文本数据是这样的。

上面带有标签，甚至有src和script之类的操作，在里面放一些脚本真的太简单了。

因此，我们创建富文本成功提交给后台的时候把各种<>/\之类危险符号转义成指定的字符就能防止脚本了。

如下所示，方法参数value就是要传递给后台的富文本内容。

  export const getXssFilter = (value: string): string => {

    // 定义一个对象来存储特殊字符及其对应的 HTML 实体

    const htmlEntities = {

      '&': '&',

      '<': '&lt;',

      '>': '&gt;',

      '"': '&quot;',

      '\'': '&#39;',

      '\\': '&#92;',

      '|': '&#124;',

      ';': '&#59;',

      '$': '&#36;',

      '%': '&#37;',

      '@': '&#64;',

      '(': '&#40;',

      ')': '&#41;',

      '+': '&#43;',

      '\r': '&#13;',

      '\n': '&#10;',

      ',': '&#44;',

    };

  

    // 使用正则表达式替换所有特殊字符

    let result = value.replace(/[&<>"'\\|;$%@()+,]/g, function (match) {

      return htmlEntities[match] || match;

    });

  

    return result;

  };

此时传给后台的富文本参数是这样的，把敏感符号全部转义。

但展现给用户看肯定要看正常的内容啊，这里就要把内容重新还原了，这步操作可以在前端完成，也可以在后端完成。

如果是前端完成可以用以下方法把获取到的数据进行转义。

// 还原特殊字符

export const setXssFilter = (input) => {

  return input

  .replace(/|/g, '|')

  .replace(/&/g, '&')

  .replace(/&#59;/g, ';')

  .replace(/$/g, '$')

  .replace(/%/g, '%')

  .replace(/@/g, '@')

  .replace(/'/g, '\'')

  .replace(/"/g, '"')

  .replace(/\/g, '\\')

  .replace(/&lt;/g, '<')

  .replace(/&gt;/g, '>')

  .replace(/&#40;/g, '(')

  .replace(/&#41;/g, ')')

  .replace(/&#43;/g, '+')

  .replace(/&#13;/g, '\r')

  .replace(/&#10;/g, '\n')

  .replace(/&#44;/g, ',');

}

但是。。。。

上面只适合使用于纯富文本的场景，如果在普通文本的地方回显会依然触发危险脚本。如下所示

其实直接转义后不还原即可解决，但由于是富文本这种情况比较特殊情况，不还原就失去文本样式了，怎么办？？

最终解决方案是对部分可能造成XSS攻击的特殊字符和标签进行转义处理，例如：script、iframe等。

示例代码

  export const getXssFilter = (value: string): string => {

    // 定义一个对象来存储特殊字符及其对应的 HTML 实体

    const htmlEntities = {

      '&': '&',

      '\'': ''',

      '\r': '
',

      '\n': '
',

      'script': 'script',

      'iframe': 'iframe',

      // 'img': 'img',

      'object': 'ojst',

      'embed': 'embed',

      'on': 'on',

      'javascript': 'javascript',

      'expression': 'expresssion',

      'video': 'video',

      'audio': 'audio',

      'svg': 'svg',

      'background-image': 'background-image',

    };

  

    // 使用正则表达式替换所有特殊字符

    let result = value.replace(/[&<>"'\\|;$%@()+,]/g, function (match) {

      return htmlEntities[match] || match;

    });

  

    // 额外处理 `script`、`iframe`、`img` 等关键词

    result = result.replace(/script|iframe|object|embed|on|javascript|expression|background-image/gi, function (match) {

      return htmlEntities[match] || match;

    });

  

    return result;

  };

效果只会对敏感部分转义

但这种方案不用还原转义，因为做的针对性限制。

小结

其实就是对特殊符号转换后还原的思路，相当的简单。

如果那里写的不好或者有更好的建议，欢迎大佬指点啦。

前言

Code Review 是什么？

Code Review 通常也简称 CR，中文意思就是 代码审查

一般来说 CR只关心代码规范和代码逻辑，不关心业务

但是，如果CR的人是组长，建议有时间还是看下与自己组内相关业务，能避免一些生产事故的发生

作为前端组长做 Code Review 有必要吗？

主要还是看公司业务情况吧，如果前端组长需求不多的情况，是可以做下CR，能避免一些生产事故

• 锻炼自己的 CR 能力


• 看看别人的代码哪方面写的更好，学习总结


• 和同事交流，加深联系


• 你做了 CR，晋升和面试，不就有东西吹了不是

那要怎么去做Code Review呢？

可以从几个方面入手

• 项目架构规范


• 代码编写规范


• 代码逻辑、代码优化


• 业务需求

具体要怎么做呢？

传统的做法是PR时查看，对于不合理的地方，打回并在PR中备注原因或优化方案

每隔一段时间，和组员开一个简短的CR分享会，把一些平时CR过程中遇到的问题做下总结

当然，不要直接指出是谁写出的代码有问题，毕竟这不是目的，分享会的目的是交流学习

人工CR需要很大的时间精力，与心智负担

随着 AI 的发展，我们可以借助一些 AI 来帮我们完成CR

接下来，我们来看下，vscode中是怎么借助 AI 工具来 CR 的

安装插件 CodeGeex

新建一个项目

mkdir code-review

cd code-review

创建 test.js 并用 vscode 打开

cd .>test.js

code ./

编写下 test.js

function checkStatus() {

  if (isLogin()) {

    if (isVip()) {

      if (isDoubleCheck()) {

        done();

      } else {

        throw new Error("不要重复点击");

      }

    } else {

      throw new Error("不是会员");

    }

  } else {

    throw new Error("未登录");

  }

}

这是连续嵌套的判断逻辑，要怎么优化呢？

侧边栏选择这个 AI 插件，选择我们需要CR的代码

输入 codeRiview，回车

我们来看下 AI 给出的建议

AI 给出的建议还是很不错的，我们可以通过更多的提示词，优化它给出的修改建议，这里就不过多赘述了

通常我们优化这种类型的代码，基本优化思路也是，前置校验逻辑，正常逻辑后置

除了CodeGeex外，还有一些比较专业的 codeRiview 的 AI 工具

比如：CodeRabbit

那既然都有 AI 工具了，我们还需要自己去CR 吗？

还是有必要的，借助 AI 工具我们可以减少一些阅读大量代码环节，提高效率，减少 CR 的时间

但是仍然需要我们根据 AI 工具的建议进行改进，并且总结，有利于拓宽我们见识，从而写出更优质的代码

具体 CR 实践

判断逻辑优化

1. 深层对象判空

// 深层对象

if (

	store.getters &&

  store.getters.userInfo &&

  store.getters.userInfo.menus

) {}

// 可以使用 可选链进行优化

if (store?.getters?.userInfo?.menus) {}

2. 空函数判断

优化之前

props.onChange && props.onChange(e)

支持 ES11 可选链写法，可这样优化，js 中需要这样，ts 因为有属性校验，可以不需要判断，当然也特殊情况

props?.onChange?.(e)

老项目，不支持 ES11 可以这样写

const NOOP = () => 8

const { onChange = NOOP } = props

onChange(e)

3. 复杂判断逻辑抽离成单独函数

// 复杂判断逻辑

function checkGameStatus() {

  if (remaining === 0 ||

    (remaining === 1 && remainingPlayers === 1) ||

    remainingPlayers === 0) {

      quitGame()

  }

}

// 复杂判断逻辑抽离成单独函数，更方便阅读

function isGameOver() {

  return (

    remaining === 0 ||

    (remaining === 1 && remainingPlayers === 1) ||

    remainingPlayers === 0

  );

}



function checkGameStatus() {

  if (isGameOver()) {

    quitGame();

  }

}

4. 判断处理逻辑正确的梳理方式

// 判断逻辑不要嵌套太深

function checkStatus() {

  if (isLogin()) {

    if (isVip()) {

      if (isDoubleCheck()) {

        done();

      } else {

        throw new Error('不要重复点击');

      }

    } else {

      throw new Error('不是会员');

    }

  } else {

    throw new Error('未登录');

  }

}

这个是不是很熟悉呀~

没错，这就是使用 AI 工具 CR的代码片段

通常这种，为了处理特殊状况，所实现的判断逻辑，都可以采用 “异常逻辑前置，正常逻辑后置” 的方式进行梳理优化

// 将判断逻辑的异常逻辑提前，将正常逻辑后置

function checkStatus() {

  if (!isLogin()) {

    throw new Error('未登录');

  }



  if (!isVip()) {

    throw new Error('不是会员');

  }



  if (!isDoubleCheck()) {

    throw new Error('不要重复点击');

  }



  done();

}

函数传参优化

// 形参有非常多个

const getMyInfo = (

  name,

  age,

  gender,

  address,

  phone,

  email,

) => {

  // ...

}

有时，形参有非常多个，这会造成什么问题呢？

• 传实参是的时候，不仅需要知道传入参数的个数，还得知道传入顺序


• 有些参数非必传，还要注意添加默认值，且编写的时候只能从形参的后面添加，很不方便


• 所以啊，那么多的形参，会有很大的心智负担

怎么优化呢？

// 行参封装成对象，对象函数内部解构

const getMyInfo = (options) => {

  const { name, age, gender, address, phone, email } = options;

  // ...

}



getMyInfo(

  {

    name: '张三',

    age: 18,

    gender: '男',

    address: '北京',

    phone: '123456789',

    email: '123456789@qq.com'

  }

)

你看这样是不是就清爽了很多了

命名注释优化

1. 避免魔法数字

// 魔法数字

if (state === 1 || state === 2) {

  // ...

} else if (state === 3) {

  // ...

}

咋一看，这 1、2、3 又是什么意思啊？这是判断啥的？

语义就很不明确，当然，你也可以在旁边写注释

更优雅的做法是，将魔法数字改用常量

这样，其他人一看到常量名大概就知道，判断的是啥了

// 魔法数字改用常量

const UNPUBLISHED = 1;

const PUBLISHED = 2;

const DELETED = 3;



if (state === UNPUBLISHED || state === PUBLISHED) {

  // ...

} else if (state === DELETED) {

  // ...

}

2. 注释别写只表面意思

注释的作用：提供代码没有提供的额外信息

// 无效注释

let id = 1 // id 赋值为 1



// 有效注释，写业务逻辑 what & why

let id = 1 // 赋值文章 id 为 1

3. 合理利用命名空间缩短属性前缀

// 过长命名前缀

class User {

  userName;

  userAge;

  userPwd;



  userLogin() { };

  userRegister() { };

}

如果我们把前面的类里面，变量名、函数名前面的 user 去掉

似乎，也一样能理解变量和函数名称所代表的意思

代码却，清爽了不少

// 利用命名空间缩短属性前缀

class User {

  name;

  age;

  pwd;



  login() {};

  register() {};

}

分支逻辑优化

什么是分支逻辑呢？

使用 if else、switch case ...，这些都是分支逻辑

// switch case

const statusMap = (status: string) => {

    switch(status) {

        case 'success':

            return 'SuccessFully'

        case 'fail':

            return 'failed'

        case 'danger'

            return 'dangerous'

        case 'info'

            return 'information'

        case 'text'

            return 'texts'

        default:

            return status

    }

}

// if else

const statusMap = (status: string) => {

    if(status === 'success') return 'SuccessFully'

    else if (status === 'fail') return 'failed'

		else if (status === 'danger') return 'dangerous'

    else if (status === 'info') return 'information'

    else if (status === 'text') return 'texts'

    else return status

}

这些处理逻辑，我们可以采用 映射代替分支逻辑

// 使用映射进行优化

const STATUS_MAP = {

    'success': 'Successfull',

    'fail': 'failed',

    'warn': 'warning',

    'danger': 'dangerous',

    'info': 'information',

    'text': 'texts'

}



return STATUS_MAP[status] ?? status

【扩展】

?? 是 TypeScript 中的 “空值合并操作符”

当前面的值为 null 或者 undefined 时，取后面的值

对象赋值优化

// 多个对像属性赋值

const setStyle = () => {

    content.body.head_style.style.color = 'red'

    content.body.head_style.style.background = 'yellow'

  	content.body.head_style.style.width = '100px'

  	content.body.head_style.style.height = '300px'

  	// ...

}

这样一个个赋值太麻烦了，全部放一起赋值不就行了

可能，有些同学就这样写

const setStyle = () => {

  	content.body.head_style.style = {

      color: 'red',

      background: 'yellow',

      width: '100px',

      height: '300px'

    }

}

咋一看，好像没问题了呀？那 style 要是有其他属性呢，其他属性不就直接没了吗~

const setStyle = () => {

  	content.body.head_style.style = {

      ...content.body.head_style.style

      color: 'red',

      background: 'yellow',

      width: '100px',

      height: '300px'

    }

}

采用展开运算符，将原属性插入，然后从后面覆盖新属性，这样原属性就不会丢了

隐式耦合优化

// 隐式耦合

function responseInterceptor(response) {

  const token = response.headers.get("authorization");

  if (token) {

    localStorage.setItem('token', token);

  }

}



function requestInterceptor(response) {

  const token = localStorage.getItem('token');

  if (token) {

    response.headers.set("authorization", token);

  }

}

这个上面两个函数有耦合的地方，但是不太明显

比如这样的情况，有一天，我不想在 responseInterceptor 函数中保存 token 到 localStorage了

function responseInterceptor(response) {

  const token = response.headers.get("authorization");

}



function requestInterceptor(response) {

  const token = localStorage.getItem('token');

  if (token) {

    response.headers.set("authorization", token);

  }

}

会发生什么？

localStorage.getItem('token')一直拿不到数据，requestInterceptor 这个函数就报废了，没用了

函数 responseInterceptor改动，影响到函数 requestInterceptor 了，隐式耦合了

怎么优化呢？

// 将隐式耦合的常数抽离成常量

const TOKEN_KEY = "authorization";

const TOKEN = 'token';



function responseInterceptor(response) {

  const token = response.headers.get(TOKEN_KEY);

  if (token) {

    localStorage.setItem(TOKEN_KEY, token);

  }

}



function requestInterceptor(response) {

  const token = localStorage.getItem(TOKEN_KEY);

  if (token) {

    response.headers.set(TOKEN_KEY, token);

  }

}

这样做有什么好处呢？比刚才好在哪里？

还是刚才的例子，我去掉了保存 localStorage.setItem(TOKEN_KEY, token)

我可以根据TOKEN_KEY这个常量来查找还有哪些地方用到了这个 TOKEN_KEY，从而进行修改，就不会出现冗余，或错误

不对啊，那我不用常量，用token也可以查找啊，但你想想 token 这个词是不是得全局查找，其他地方也会出现token

查找起来比较费时间，有时可能还会改错了

用常量的话，全局查找出现重复的概率很小

而且如果你是用 ts 的话，window 下鼠标停在常量上，按 ALT 键就能看到使用到这个常量的地方了，非常方便

小结

codeRiview（代码审查）不仅对个人技能的成长有帮助，也对我们在升职加薪、面试有所裨益

CR 除了传统的方式外，也可以借助 AI 工具，来简化其中流程，提高效率

上述的优化案例，虽然优化方式不同，但是核心思想都是一样，都是为了代码 更简洁、更容易理解、更容易维护

当然了，优化方式还有很多，如果后期遇到了也会继续补充进来