个人中心
gpt4 book ai didi

【eslint插件开发】禁用location跳转外部链接

转载 作者：我是一只小鸟 更新时间：2023-02-17 22:31:18 27 4
gpt4 key购买 nike

背景

公司 h5 项目需要为跳转的外部链接统一增加参数。举个例子，假设有如下代码:

                        
                          location.href = 'https://www.test.com/a?id=xxx'
location.replace('https://www.test.com/a?id=xxx')

我们需要把所有链接都增加参数uid:

                        
                          location.href = 'https://www.test.com/a?id=xxx&uid=someuid'
location.replace('https://www.test.com/a?id=xxx&uid=someuid')

需求分析

使用函数统一跳转逻辑

方便维护和更新，我们需要使用函数来统一跳转逻辑.

                        
                          // 直接跳转
location.href = 'abc' 转化为 navigateTo('abc')
location.replace('abc') 转化为 redirectTo('abc')

虽然可以查找整个项目进行手动替换，但多个项目的人工操作，显然是费时费力的.

禁止后续提交使用 location 跳转

当我们完成当前代码的替换后，还需要防止其他人使用 location 进行跳转。一个基本事实是，无法用人工监督来杜绝这个行为（或者说可以监督但成本太高）.

使用 eslint 插件 ，自定义错误规则和修复程序，可以完美解决这两个问题.

创建插件 eslint-plugin-huoli

如果首次创建插件，建议先阅读官方文档 Create Plugins .

或者参考我的项目 eslint-plugin-huoli .

插件的写法很简单，就是针对某个 AST 节点类型进行处理。你可以在 ast 官网 查看某条代码对应的 AST 数据结构和节点类型.

注意点

遍历节点时机：enter、exit

可能大家更熟悉 babel 插件，了解遍历 AST 节点有两个时机：进入和退出:

                        
                          module.exports = {
  ...
  AssignmentExpression: {
    enter: node => {},
    exit: node => {},
  }
}

eslint 也有一样，不过写法略有不同:

                        
                          module.exports = {
  ...
  AssignmentExpression() {},
  'AssignmentExpression:exit'(node) {},
}

如何调试插件

开发插件过程中，如果能轻松的进行 debug 会极大提升开发效率。参考 eslint-plugin-huoli 。

首先，使用 Ruletester 创建测试用例.

然后，在 package.json 中增加脚本:

                        
                          {
  scripts: {
    ...
    "debug": "node node_modules/jest/bin/jest",
  }
}

使用 vscode 进行调试 。

最后此篇关于【eslint插件开发】禁用location跳转外部链接的文章就讲到这里了,如果你想了解更多关于【eslint插件开发】禁用location跳转外部链接的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

27 4 0
文章推荐： 《价值流动-ProjectToProduct》读后感
文章推荐： .NetCore中使用NEST简单操作Elasticsearch
文章推荐： C#Replace：一个熟悉而又陌生的替换
文章推荐： Nodejs使用ZooKeeper做服务发现
我是一只小鸟
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com