前端开发小技巧分享

使用 URL 简化 url 操作

获取 url 的相关信息

直接获取 url 的相关信息,可以使用 URL 接口来获取

为 url 去除某个/某些参数

比如给链接删除一个 channel 参数

js 复制代码
const removeUrlParam = (url, param) => {
  const urlObj = new URL(url);
  urlObj.searchParams.delete(param);
  return urlObj.toString();
};
removeUrlParam('https://juejin.cn/hot?channel=alibase&category=javascript', 'channel')
// 'https://juejin.cn/hot?category=javascript'

可以扩展一下使得它可以批量删除 url 中的参数,比如给链接中批量删除 channel 和 category 参数,传入一个数组即可

js 复制代码
const removeUrlParams = (url, params) => {
  const urlObj = new URL(url);
  const paramsToDelete = Array.isArray(params) ? params : [params];

  paramsToDelete.forEach(param => {
    urlObj.searchParams.delete(param);
  });

  return urlObj.toString();
};
removeUrlParams('https://juejin.cn/hot?channel=alibase&category=javascript', ['channel', 'category']);
// 'https://juejin.cn/hot'

为 url 添加某些参数

比如给链接中添加 channel 和 category 参数

js 复制代码
const addUrlParams = (url, params) => {
  const urlObj = new URL(url);
  Object.entries(params).forEach(([key, value]) => {
    urlObj.searchParams.set(key, value);
  });
  return urlObj.toString();
};
addUrlParams('https://juejin.cn/hot', { channel: 'alibase', category: 'javascript' });
// 'https://juejin.cn/hot/articles?channel=alibase&category=javascript'

获取url的某个参数

比如获取链接中的 channel 参数

js 复制代码
const getUrlParam = (url, key) => {
  return new URLSearchParams(new URL(url).search).get(key)
}
getUrlParam('https://juejin.cn/hot?channel=alibase&category=javascript', 'channel')
// alibase

页面返回回到顶部小技巧

不知道你有没有遇到过一个场景:在页面跳转之后操作页面返回,页面还会停留在原来滚动到的位置,即使刷新页面,依旧不会回到顶部。

我们在遇到这个问题的时候,很可能会尝试在页面每次加载的时候,去使用 js 去手动操作回到顶部。

但是,我想介绍一种更为优雅的处理方式:

我们可以使用 history 的滚动恢复属性:scrollRestoration

它有两个可选项:auto 和 manual

MDN文档developer.mozilla.org/zh-CN/docs/...

  1. manual (不记住滚动位置)
js 复制代码
window.history.scrollRestoration = "manual"

如下图,我们将 history 的 scrollRestoration 属性设置为 manual。当我们将A页面滑动到底部,点击跳转到B页面,返回之后,页面是可以重新回到顶部的。

  1. auto(记住上一次滚动位置,一般浏览器默认是 auto)
js 复制代码
window.history.scrollRestoration = "auto"

如下图,我们将 history 的 scrollRestoration 属性设置为 auto。当我们将A页面滑动到底部,点击跳转到B页面,返回之后,页面依然停留在跳转前的位置。

如上所述,你可以通过设置 history 的滚动恢复属性 scrollRestoration 去设置浏览器是否记住当前的滚动位置。

字符串转化为数字

js 复制代码
const numText = '996'
const num = +numText // 996

数字取整

~~可以代替parseInt(),并且~~的效率会更高,btw 个人还是觉得 parseInt 可读性强一点。

js 复制代码
~~3.14159 // 3

复制到剪切板

使用 navigator.clipboard 功能来实现

js 复制代码
const toClipboard = (text)=>{
  navigator.clipboard.writeText(text);
}

css 实现字母大小写

css 复制代码
text-transform: uppercase; // 大写
css 复制代码
text-transform: lowercase; // 小写

比如我们来改一下掘金的首页,直接改 body 的这个 text-transform 属性

GIT

将任意分支的某个 commit 转移到当前分支

shell 复制代码
git cherry-pick commitID

将当前要提交的代码和上一份提交合并为一个提交

shell 复制代码
git commit --amend --no-edit

将当前要提交的代码和上一份提交合并为一个提交,并且修改提交信息

shell 复制代码
git commit --amend -m 'feat:***'

将本地分支重置为远程分支

shell 复制代码
git reset --hard origin/branch

本地有提交,拉取远程代码时建议使用(这样不会 多出一个 Merge 提交)

shell 复制代码
git pull --rebase

后记

本文到此结束,感谢观看,未完待续,后续还会持续分享,欢迎点赞关注。

相关推荐
理想不理想v9 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我10 分钟前
浏览器交互事件汇总
前端·交互
小阮的学习笔记23 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜24 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=24 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck29 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!1 小时前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。1 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript