vscode 中自定义task的方法

vscode 中自定义task的方法

在 VS Code 中,你可以通过自定义任务(Tasks)来完成点击按钮直接进入某个文件夹并执行 npm 命令的功能。VS Code 提供了一种基于 JSON 配置的 tasks.json 文件,你可以定义自定义任务来自动化各种操作,包括执行脚本、命令等。

阅读更多
一种实现前端所有请求添加签名校验的方法

一种实现前端所有请求添加签名校验的方法

为了防止前端接口数据被恶意篡改以及程序批量请求,在 Request Header 中可以添加公共的签名字段,该字段采用SHA256对请求的参数按照一定规则进行加密,后端服务器接收到请求后,使用加密私钥对该请求的参数进行同样规则加密,若签名字段相同,则代表该请求为有效请求。

以下为在 Nextjs 中添加该实现的一种方式。

要使用 HMAC-SHA256 实现数据签名,可以利用 CryptoJS 提供的 HmacSHA256 方法。这种方式比简单的 SHA256 加密更加安全,因为它结合了私钥与数据进行加密,防止数据篡改。

阅读更多
记录一次 iOS 16.1 JavaScript 语法兼容性问题

记录一次 iOS 16.1 JavaScript 语法兼容性问题

在使用 Next.js 开发一个线上应用的时候,发现页面在 iOS 16.1 点击没反应。当时得到这个问题反馈的时候,我第一反应肯定是 JavaScript 语法兼容性的问题。于是开启了 Debug 的过程。

阅读更多

npm init(yarn create) 后发生了什么

在 Vue.js 最新的文档中,通过脚手架 Vite 初始化项目,给出了一个这样的命令:

1
2
3
4
npm init vite hello-vue3 -- --template vue

或 yarn create vite hello-vue3 --template vue

之前的一些 CLI 的使用方式是先去全局安装一个 npm 包,然后该 npm 包会被全局注册,使用全局指令去完成一些动作。

直接使用 npm init 或者 yarn create 发生了什么?

阅读更多
一种使用 Vercel 部署 Webapp 的方式

一种使用 Vercel 部署 Webapp 的方式

之前为自己的项目或者 demo 创建一个演示静态页时,往往采用 github gh-pages 功能。通常做法是将我们构建好后 dist 或者 public 文件夹推送到 github repo 中的 gh-pages 分支,github 会帮我们自动托管静态页面。

阅读更多

js中初始化二维数组

有这样一个场景,需要初始化一个二维数组,自然就想到了 Array.prototype.fill 这个 API

在一维数组的初始化过程中,我们可以很自然的想到下面的方法:

1
2
// 初始化一个长度为3的二维数组并全部用0填充
const a = new Array(3).fill(0);
阅读更多

状态管理之 Redux & React Redux

在进行 React 技术栈的一些技术方案的「挖坟」过程中,有这样一个体会:为什么需要这样一个方案,是遇到了什么的问题,引入该方案会带来什么样的收益。任何技术方案的引入都对应了某些技术场景下遇到的问题。

Vue 的开发中引入了状态管理方案 Vuex,Vuex 的引入可有效降低组件之间的通信复杂度同时还提供了全局状态管理的能力,对于一个中大型平台来说,引入状态管理方案势在必得。

阅读更多

继承行为在 ES5 与 ES6 中的区别

笔者注:一句话引发的基础知识回炉,基础不扎实,还要什么自行车

最近在看 React 方面的一些文章时,看到了这样一个问题,「为什么每个 class 中都要写 super, super 是做什么的?」, 刚看到这个问题时,直接就想到了继承行为在 javascript 中的表现。后面作者的一句话「super 不可以省略,省略的话会报错」。当时脑海中蹦出来一个念头,这个同学是不是写错了,super 不就是用来完成调用父类构造函数,将父类的实例属性挂在到 this 上吗?为什么不写还会报错?

阅读更多

npx 是什么

今天在看到 create-react-app 仓库时,在其安装方式上看到这样一条指令,一脸懵逼,这是什么?

1
2
3
npx create-react-app my-app
cd my-app
npm start

nvmnrmnpmnpx, 类似的名词屡见不鲜,npx 到底是什么?

阅读更多

vue 单文件探索

以 vue 作为开发技术栈的前端开发者,往往会配合前端构建工具,进行项目的工程化管理。比如,大家常用的 vue 全家桶 + webpack 的方案进行一些中大型前端项目的开发。配合 webpack 后,vue 的组件化优势更加明显,我们可以通过单文件的组件化开发方式,在工作实践中搭建前端页面,从而提高开发效率。

阅读更多