前端小技巧

已于 2023-05-11 11:35:27 修改
阅读量2k 收藏 22
点赞数 7
分类专栏： 业务 笔记 js 文章标签： 前端 javascript 开发语言
于 2023-03-14 16:55:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39818813/article/details/129484817
版权
js 同时被 3 个专栏收录
105 篇文章 0 订阅
订阅专栏
业务
61 篇文章 1 订阅
订阅专栏
笔记
39 篇文章 0 订阅
订阅专栏

1.html

1.1 网站自动刷新

应用场景：

  • 网页定期自动刷新（现在基本淘汰了，采用ajax）；
  • 自动跳转到指定页面，这个自动跳转的好处就是不需要JS调用，属于纯html网页自动跳转

v7-网站自动刷新

你可以在head标签中将网站设置为定时刷新！如<meta http-equiv="refresh" content="2">，content为刷新间隔。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="refresh" content="2">
  <!-- <meta http-equiv='refresh' content='2; URL=https://baidu.com'> -->
  <title>技巧</title>
</head>

<body>

  页面是否刷新

</body>
<script>
  let refresh = localStorage.getItem('refresh') || 0
  localStorage.setItem('refresh', ++refresh)
  console.log('页面刷新了', refresh + '次')
</script>

</html>

2.css

2.1 使元素鼠标事件失效

v3-使元素鼠标事件失效

  .change-btn{
    cursor:not-allowed; //只是悬浮显示禁用图标，仍然可以点击和选中
    pointer-events: none; //只是禁用点击事件
    user-select: none; //只是禁用了用户选中
  }

2.2 字母大小写转换

v-4字母大小写转换

除了用js的toUpperCase()和toLowerCase()转换字母，也可以用css控制

p {text-transform: uppercase}  // 将所有字母变成大写字母
p {text-transform: lowercase}  // 将所有字母变成小写字母
p {text-transform: capitalize} // 首字母大写
p {font-variant: small-caps}   // 将字体变成小型的大写字母

2.3 立体字

v5-立体字

.text_solid {
    font-size: 32px;
    text-align: center;
    font-weight: bold;
    line-height: 100px;
    position: relative;
    background-color: #333;
    color: #fff;
    // 水平阴影的位置，垂直阴影的位置，模糊的距离，阴影的颜色
    text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 3px 0px #a0a0a0,
      0px 4px 0px #909090, 0px 5px 10px rgba(0, 0, 0, 0.6);
  }

2.4 filter(滤镜)

应用场景：图片高亮，黑夜主题

v6-filter(灰度滤镜)

也可以通过颜色反转来设置黑夜主题，在浏览器控制台输入：

document.documentElement.style.filter='invert(85%) hue-rotate(180deg)'

我们也可以通过这个设chorme浏览器的主题切换按钮：

先优化下代码，使得图片不需要进行滤镜转换

;(function () {
  const docStyle = document.documentElement.style
  if (!window.modeIndex) {
    window.modeIndex = 0  // 当前选中的模式的下标，需要挂载到window上进行存储
  }
  // 设置3种模式
  const styleList = [
    '',
    'invert(85%) hue-rotate(180deg)',
    'invert(100%) hue-rotate(180deg)',
  ]
  // 每次点击标往后移一项
  modeIndex = modeIndex >= styleList.length - 1 ? 0 : modeIndex + 1
  docStyle.filter = styleList[modeIndex]
  // modeIndex >0则表示加了滤镜了，这时候需要给图片再加一次滤镜反转，让它恢复本色
  document.body
    .querySelectorAll('img, picture, video')
    .forEach(
      (el) =>
        (el.style.filter = modeIndex ? 'invert(1) hue-rotate(180deg)' : '')
    )
})()
  • 1.新开一个tab页
  • 2.点击收藏
  • 3.点击更多
    在这里插入图片描述
  • 4.输入标签名和js脚本javascript: (function () { const docStyle = document.documentElement.style; if (!window.modeIndex) { window.modeIndex = 0; } const styleList = [ '', 'invert(85%) hue-rotate(180deg)', 'invert(100%) hue-rotate(180deg)', ]; modeIndex = modeIndex >= styleList.length - 1 ? 0 : modeIndex + 1; docStyle.filter = styleList[modeIndex]; document.body.querySelectorAll('img, picture, video').forEach(el => el.style.filter = modeIndex ? 'invert(1) hue-rotate(180deg)' : '');})();，注意要带js前缀
    在这里插入图片描述
  • 5.然后在任意一个网站点击上面的主题切换标签就可以实现切换主题了，可以点击多次进行不同主题的来回切换
    在这里插入图片描述

说明：

  • document.documentElement 获取文档对象的根元素，即
    给html元素样式添加filter滤镜：样式为invert(85%) hue-rotate(180deg)
  • invert()反转颜色通道数值，接收的值在 0~1。
  • hue-rotate()色相旋转，接收的值在 0deg~360deg。

2.5 旋转动画

给一个图片加360°无线旋转

        .img {
            width: 100px;
            height: 100px;
            animation: rotate 3s linear infinite;
            border-radius: 50%;
            -webkit-user-drag: none;
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

2.6 给文字加水波纹滑动效果

times是当前的时间的值，data-text绑定了时间的值

 <div className={styles.timesCard}>
    <div className={styles.times} data-text={times}>
        {times}
    </div>
</div>

.timesCard {
  position: absolute;
  right: 40px;
}

.times {
  font-size: 26px;
  color: transparent;
  background: linear-gradient(to bottom, #fff 10%, #a9d0fb, #fff);
  margin-top: -20px;
  background-clip: text;
 -webkit-background-clip: text;
  position: relative;
  left: 20px;
}
.times::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  background-image: linear-gradient(120deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem, rgba(255, 255, 255, 0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255, 255, 255, 0.6) 32rem, white 33rem, rgba(255, 255, 255, 0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255, 255, 255, 0.3) 45rem, transparent 50rem, transparent 100%);
  -webkit-background-clip: text;
  background-size: 150% 100%;
  background-repeat: no-repeat;
  animation: shine 5s infinite linear;
}

@keyframes shine {
  0% {
    background-position: 50% 0;
  }

  100% {
    background-position: -190% 0;
  }
}

在这里插入图片描述

3.js

3.1 forEach退出循环

var arr = [1,2,3,4,5]
arr.forEach((item,index)=>{
    if(item==3){
        console.log(`%c 匹配到了${item}`,'color:red')
        return
    }
    console.log(`遍历到了${item}`)
})
console.log('%c 后续的代码','color:green')


//打印结果为：
遍历到了1
遍历到了2
匹配到了3
遍历到了4
遍历到了5
后续的代码

结论：forEach中return只会退出当前循环，而不会退出整个循环，也不会退出整个事件

那么怎么直接退出循环：

  1. 使用for循环
  2. 在forEach中使用try catch抛出异常
var arr = [1,2,3,4,5]
try {
    arr.forEach((item,index)=>{
        if(item==3){
            console.log(`%c 匹配到了${item}`,'color:red')
            throw('遍历结束')
        }
        console.log(`遍历到了${item}`)
    })
    console.log('%c 后续的代码','color:green')
} catch (error) {
    console.log('error',error)
}
//打印结果为：
遍历到了1
遍历到了2
匹配到了3
error 遍历结束
  1. 使用some遍历
var arr = [1, 2, 3, 4, 5]
// some：如果表达式有一个条件满足，则剩余元素不会再执行检测(此时表达式返回值会为true，反之为fasle)。
// some里面的return同样不会阻止遍历外的代码执行
let val = arr.some((item, index) => {
    if (item == 3) {
        console.log(`%c 匹配到了${item}`, 'color:red')
        return true
    }
    console.log(`遍历到了${item}`)
})
val && console.log('%c 后续的代码', 'color:green')
//打印结果为：
遍历到了1
遍历到了2
匹配到了3
后续的代码

3.2 移除对象属性

let obj = {a: 1, b: 2, c: 3, d: 4};
//方式1
delete obj.a;
delete obj.b;
delete obj.c;
console.log(obj); // {d: 4}
//方式2
let {a, b, c, ...newObj} = obj;
console.log(newObj);// {d: 4}

3.3 添加实时的时间显示

/**
 * 格式化时间
 * 在日期格式中，月份是从0开始的，因此要加0，
 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
 * @param time 时间
 */
const dateFormat = (time) => {
  var date = new Date(time);
  var year = date.getFullYear();
  var month =
    date.getMonth() + 1 < 10
      ? "0" + (date.getMonth() + 1)
      : date.getMonth() + 1;
  var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  var minutes =
    date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
 var seconds =
    date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  return (
    year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds
  );
};

  const [times, setTimes]: any = useState(""); //转换时间
  useEffect(() => {
    // 监听时间变化
    let timer;
    clearInterval(timer);
    timer = setInterval(() => {
      setTimes(dateFormat(new Date()));
    }, 1000);
  }, []);


 <div className={styles.timesCard}>
     <div className={styles.times} data-text={times}>
         {times}
    </div>
 </div>

4.vue

4.1 自定义指令

自定义指令是用来操作DOM的，尽管vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和拓展，不仅可用于定义DOM操作，而且是可复用的。

参数说明：

  • dire 指令名称
  • el 当前绑定的dom元素
  • bindings 指令解析后的结果，包括指令名称、参数、表达式等，bindings.value返回的是表达式
  • vnode 对应的虚拟dom
//对象注册形式示例：
Vue.directive('dire',{
     bind: function(el,bindings,vnode){
       console.log("bind--最先执行的钩子函数")
     }
     inserted: function(el,bindings,vnode){
       console.log("inserted--在bind后面执行")
     }
     update: function(el,bindings,vnode){
       console.log("update--绑定组件更新前触发执行")
     }
     componentUpdated: function(el,bindings,vnode){
       console.log("componentUpdated--绑定组件更新后触发执行")
     }
     unbind: function(el,bindings,vnode){
       console.log("componentUpdated--组件销毁前触发执行")
     }
 }

介绍完基本概念后，接下来通过一个案例来实操一下，假设这样一个场景：
我们的权限需要做到按钮级的，并且希望做前端埋点记录用户点击是哪个页面的哪个按钮，那么自定义指令就是一个不错的方案：

v1-自定义指令

4.2. vue中怎么重置data

使用场景：

比如，有一个表单，表单提交成功后，希望组件恢复到初始状态，重置data数据。

初始状态下设置data数据的默认值，重置时直接object.assign(this.$data, this.$options.data())

说明：

  • this.$data获取当前状态下的data
  • this.$options.data()获取该组件初始状态下的data(即初始默认值)
  • 如果只想修改data的某个属性值为初始值，可以this[属性名] = this.$options.data()[属性名]，如this.message = this.$options.data().message

5.react

5.1 ant design select 搜索同时支持输入和下拉选中

先看下官网select的搜索怎么用的

ant design select 搜索同时支持输入和下拉选中

6.调试

6.1 控制台打印有样式的文字

当我们打印信息很多，需要明显的区分重要信息时，就可以通过打印高亮来实现

console.log('%c 当前打印的为红色==>','color:red')

console.log('%c 当前打印的为绿色==>','color:green')

console.log('%c 当前打印的为绿色有背景的大文字==>','color:green;font-size:30px;background:#ddd')

打印的格式：%c 空格 内容 逗号 css样式

那么，如何打印动态内容呢？

可以用es6的模板字符串：

const name='小明'
console.log(`%c ${name}`,"font-size:30px")

6.2 跨页面调试

场景：

系统a对接门户b，门户b会携带参数打开一个新的tab页跳转到系统a，此时想打开控制台调试系统a接收门户b的参数，并想查看接口的调用

如果有a，b两个系统的代码，则直接在tab页面打开控制台，进行调试。

如果只有a的代码，这是b跳转到a时候，在a网站打开控制台后，可能接口已经调用完成了。如果想要接口调用慢一点，可以把network的网络调整更慢，但有时候即使网络很慢，接口也调用完成了，这时候可以在a系统的接口调用处写一个alet(1)阻止整个页面的运行，这这时候再打开控制台就能正常的调试了。

6.3 控制台常用调试

6.3.1 重新发送请求

演示地址

当你想再次发送请求，而不想刷新页面，或再次走一遍交互流程，可以直接发送对应的请求

  1. 选中Network
  2. 点击Fetch/XHR
  3. 选择要重新发送的请求
  4. 右键选择Replay XHR
    在这里插入图片描述
6.3.2 在控制台快速发起请求

在联调或修BUG的时候，针对同样的请求，有时候需要修改入参重新发起，而又不想动代码时

  1. 选中Network
  2. 点击Fetch/XHR
  3. 选择Copy ，再选择Copy as fetch
  4. 控制台粘贴刚才copy的代码
  5. 修改参数，回车
  6. 再去Network查看一下新发送的请求的参数是否修改
    在这里插入图片描述
6.3.3 快速找到dom节点信息

除了用js通过document去获取节点，还有更简单快速的方法：

  1. 选中控制台的select
  2. 悬浮到对应的视图（此时可以看到对应的样式：color，font-size等）
  3. 控制输入$0即可把对应的节点打印出来，再通过$0.去拿到对应的属性
  4. 如果要快速的空间样式，找到控制台的Elements，再找到Styles，划到底部，双击数值，进行修改
    在这里插入图片描述
6.3.4 截取一张全屏的网页

应用场景：进行超出一屏的内容截屏

  1. 在要截屏按F12的网页打开控制台
  2. 同时按住ctrl+shift+p
  3. 输入Capture full size screenshot 按下回车
    在这里插入图片描述
    4.查看截下的图片
    在这里插入图片描述
    以上是全屏截图的方法，那么如果只是想截图网页达到一部分？

1.通过select选择对应的节点
2.将上面第3步的指令Capture full size screenshot换成Capture node screenshot在这里插入图片描述

6.3.5 使用$来简化document

在控制台使用$和$$替代document.querySelector和document.querySelectorAll

在这里插入图片描述

6.3.6 直接在控制台安装插件

应用场景：想快捷的调试插件的方法，比如想调试一下moment插件的格式化年月日方法moment(new Date().getTime()).format("YYYY-MM-DD HH:mm:ss.SSS")

  1. 安装chrome插件Console Importer，插件地址
  2. 在控制台输入$i('name')安装npm包
    3.
  3. 安装好以后就可以直接使用插件的方法
6.3.7 Add conditional breakpoint条件断点
  1. 在控制台输入以下代码
const foods = [
  {
    name: '小杯',
    price: 10
  },
  {
    name: '中杯',
    price: 15
  },
  {
    name: '大杯',
    price: 20
  },
]

foods.forEach((i) => {
  console.log(i.name, i.price)
})
  1. 点击打印信息进入调试文件
    在这里插入图片描述
  2. 在要debuger的地方右键选择Add conditional breakpoint
    在这里插入图片描述
    在这里插入图片描述
  3. 再次在控制台输入刚才要调试的代码，回车
    5.

7.工程化

7.1 如何注册发布自己的npm包

概念：

NPM的全称是Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准

目的：

发布npm包为的是代码更加友好的使用和模块化：好复用，易维护

注册发布自己的npm包

v2-如何注册发布自己的npm包

【end】
参考地址

南城夏季
关注
  • 7
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
前端调用接口
weixin_47723644的博客
11-17 5209
这里写目录标题一级目录二级目录三级目录 一级目录 二级目录 三级目录
前端接口请求的几种方式
anban7417的博客
07-18 1973
前端接口请求方式一： jquery.ajax 用法： jQuery.ajax([settings]) $.ajax({ url:"",//请求的url地址 success:function(req){ //请求成功 }, error:function(){ //请求出错 }, ...
前端笔记之基础-请求接口方式
weixin_42011493的博客
01-08 486
日常笔记之前端-请求接口方式 介绍： ​ http请求方式有八种：get、post、head、put、delete、options、trace和connect，这里主要介绍一下get和post（做一下笔记，老是忘）。参考：https://www.cnblogs.com/ljx20180807/p/10412427.html 一、get请求 ​ 主要请求指定url的资源，参数以键值对形式写在导航...
html调用http接口
最新发布
nothing
04-08 974
html调用http接口
前端请求接口的几种方式总结
热门推荐
Smell_rookie的博客
08-24 1万+
作为一名前端工程师，请求后台接口获取数据是必然的，也是要求前端人员需要掌握的必备技能。但你一段时间只用一种请求方法，突然让你换成其他方式不一定能够立马实现的来，为此总结了一下前端请求API的方法，方便今后查阅。 一、vue-resource 优点：体积小、支持主流的浏览器、支持Promise API和URI Templates、支持拦截器。 安装 $ yarn add vue-resour...
帮我写一个前端数据请求接口
weixin_35750747的博客
12-20 215
好的，我会尽力帮助你写一个前端数据请求接口。 前端数据请求接口通常是使用 JavaScript 在浏览器中发送 HTTP 请求来获取数据的方式。 下面是一个简单的例子，使用 JavaScript 中的 fetch 函数来发送一个 GET 请求并获取 JSON 数据： fetch('http://api.example.com/endpoint') .then(response => re...
jQuery前端开发35个小技巧
10-22
主要介绍了jQuery前端开发35个小技巧的相关资料，非常实用,需要的朋友可以参考下
使用MacBook前端开发小技巧（HomeBrew）
01-09
首先作为前端开发可能需要安装各种浏览器和安装一些环境之类的可以使用Homebrew一行代码快速的完成这些安装操作，不必再去浏览器搜索下载安装，例如：Xcode、node（nvm）、git、vscode、wget、Firfox、Google-Chrome...
明信片-前端小程序项目
03-31
【明信片-前端小程序项目】是一个专门为前端学习者和开发者设计的小程序实践项目，它提供了完整的登录、收件箱、发件箱和信件广场等功能模块，旨在帮助新人快速上手并熟悉小程序的开发流程，同时也适用于需要快速...
前端开发必知的15个jQuery小技巧
10-20
【jQuery小技巧详解】 在前端开发中，jQuery作为一个强大的JavaScript库，提供了许多便捷的方法和功能，使得DOM操作、事件处理和动画效果变得简单易行。以下是对标题和描述中提到的15个jQuery小技巧的详细说明： 1...
小程序、前端页面
02-06
综上所述，小程序和前端页面开发涉及的技术和技巧广泛且深入，不仅需要扎实的HTML、CSS和JavaScript基础，还需要对用户体验、性能优化以及测试有深刻理解。随着技术的不断发展，开发者还需要不断学习新的框架和工具...
纯html页面请求接口文档微信分享
11-30
本人新手，有大神帮助写了一个没有在html请求微信jssdk接口做的微信分享，希望有用
html页面模式get/post请求
09-14
用HTML页面模式get/post请求，psot请求参数的格式为json串
WEB前端开发都应知道的jquery小技巧及jquery三个简写
10-23
一个简单技巧的集合，帮你提升 jQuery 技能，下面脚本之家小编给大家收集整理了web前端开发都应知道的jquery小技巧，对jquery小技巧感兴趣的朋友一起学习吧
买来的某租车小程序源码+前端小程序
09-07
【某租车小程序源码+前端小程序】是一款专为租车服务设计的应用程序，涵盖了摩托车和汽车的租赁业务。这款源码提供了完整的前后端解决方案，旨在帮助开发者或创业者快速搭建自己的在线租车平台。源码中包含的教程，...
angularjs的一些优化小技巧
10-25
AngularJS，通常简称为ng，是由Google开发的一款强大的MVVM（Model-View-ViewModel）前端框架，极大地提升了前端项目的开发效率。它通过控制器、指令、服务等组件构建应用程序，并利用依赖注入（DI）来解决各层之间...
html请求接口_前端工程师吐后端工程师（第八讲）——接口的开发
weixin_39688170的博客
11-22 936
上一讲我们介绍了如何写让模板变量在页面上展示，本讲我们介绍一下后端开发工作中最常用的功能——接口。创建一个go_test4文件夹，然后把go_test3中的代码复制进去。然后打开main.go文件，进行更改。说到接口就必不可少的涉及到传值和接口返回，还有GET方式 、POST方式获取数据。下面我们就先举例来看看一个GET接口如何接收参数并且返回数据，具体代码如下：package 代码前半部分还是跟...
原生html发送请求
u013361179的博客
09-26 2036
原生html发送请求 xhr
html请求接口_接口测试平台代码实现77: 多接口用例17
weixin_39991531的博客
12-01 603
首先恭喜下Testerhome大会开幕，并且我们社团在testerhome的百团大战中名列前三。其次是平台的在线体验地址发布：阿里云服务器：http://47.97.77.125:8000/home/用户名：admin密码：123456你也可以自己在登陆页面注册新的。...
较试实用--web前端优化知识总结+笔试+面试总结1
08-08
1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验 2. 从服务商角度而言，优化能够减少页面请求数、或者减小

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值