前端小技巧

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(灰度滤镜)

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}

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)阻止整个页面的运行,这这时候再打开控制台就能正常的调试了。

7.工程化

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

概念:

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

目的:

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

注册发布自己的npm包

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/594.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据分析自学路线

数据分析作为近几年火起来的IT技术岗位&#xff0c;在大数据时代的浪潮下迅速发酵膨胀&#xff0c;席卷了众多互联网企业&#xff0c;漫延到了金融、教育、医疗、消费等传统行业&#xff0c;在新经济领域也有重要作用&#xff0c;比如人工智能、新能源、电子芯片、企业数字化服…

力扣-排名靠前的旅行者

大家好&#xff0c;我是空空star&#xff0c;本篇带大家了解一道简单的力扣sql练习题。 文章目录前言一、题目&#xff1a;1407. 排名靠前的旅行者二、解题1.正确示范①提交SQL运行结果2.正确示范②提交SQL运行结果3.正确示范③提交SQL运行结果4.正确示范④提交SQL运行结果5.其…

20年程序员生涯,读了200多本技术书,挑了几本精华好书分享给大家

不知不觉已经又走过了20个年头了&#xff0c;今年已经44了&#xff0c;虽然我已经退休在家&#xff0c;但一直都保持着读书的习惯&#xff0c;我每年平均要读10本技术书籍&#xff0c;保持不让自己的技术落伍。 这些年读的技术书不下200本&#xff0c;很多好书我都会保存在家&a…

【蓝桥杯-筑基篇】排序算法

&#x1f353;系列专栏:蓝桥杯 &#x1f349;个人主页:个人主页 目录 前言&#xff1a; 一、冒泡排序 二、选择排序 三、插入排序 四、图书推荐 前言&#xff1a; 算法工具推荐&#xff1a; 还在为数据结构发愁吗&#xff1f;这款可视化工具&#xff0c;帮助你更好的了解…

列表排序-第14届蓝桥杯STEMA测评Scratch真题精选

[导读]&#xff1a;超平老师的《Scratch蓝桥杯真题解析100讲》已经全部完成&#xff0c;后续会不定期解读蓝桥杯真题&#xff0c;这是Scratch蓝桥杯真题解析第108讲。 蓝桥杯选拔赛现已更名为STEMA&#xff0c;即STEM 能力测试&#xff0c;是蓝桥杯大赛组委会与美国普林斯顿多…

Request和Response的概述

⭐作者介绍&#xff1a;大二本科网络工程专业在读&#xff0c;持续学习Java&#xff0c;输出优质文章⭐作者主页&#xff1a;︶ㄣ释然⭐如果觉得文章写的不错&#xff0c;欢迎点个关注&#x1f609;有写的不好的地方也欢迎指正&#xff0c;一同进步&#x1f601;Request和Respo…

UE笔记-AI Move To无法正常结束/打断 1

启用Stop on Overlap 会导致AI与目标距离受到碰撞影响&#xff0c;实际效果需按要求处理 当Lock AILogic为True时&#xff0c;Move To的Task无法被黑板装饰器打断 当Use Continuos Goal Tracking为True时&#xff0c;Move To的节点不会根据Acceptance Radius设定而结束&#x…

第五周作业、第一次作业(1.5个小时)、练习一

一、创建servlet的过程没有太多好说的&#xff0c;唯一需要注意的就是&#xff1a;旧版本的servlet确实需要手动配置web.xml文件&#xff0c;但是servlet2.5以后,servlet的配置直接在Java代码中进行注解配置。我用的版本就不再需要手动去配置web.xml文件了&#xff0c;所以我只…

Spring Cloud Alibaba 微服务2,注册中心演变 + Nacos注册中心与配置中心

目录专栏导读一、什么是Nacos&#xff1f;二、注册中心演变及其设计思想1、RestTemplate调用远程服务2、通过Nginx维护服务列表&#xff08;upStream&#xff09;3、通过Nacos实现注册中心4、心跳版Nacos三、Nacos Discovery四、Nacos核心功能1、服务注册2、服务心跳3、服务同步…

Python的30个编程技巧

1. 原地交换两个数字 Python 提供了一个直观的在一行代码中赋值与交换&#xff08;变量值&#xff09;的方法&#xff0c;请参见下面的示例&#xff1a; x,y 10,20 print(x,y) x,y y,x print(x,y) #1 (10, 20) #2 (20, 10) 赋值的右侧形成了一个新的元组&#xff0c;左侧立即解…

Kubernetes详细安装

By&#xff1a;雪月三十 参考&#xff1a; https://blog.csdn.net/qq_43580215/article/details/125153959 https://juejin.cn/post/6844903943051411469 https://mp.weixin.qq.com/s?__bizMzI0MDQ4MTM5NQ&mid2247502359&idx1&sn8c16100c9731359b9864403183f44233…

python 正则使用详解

python 正则使用详解什么是正则在 python 中使用正则一些正则的定义python 正则的方法match 从字符串开头匹配正则返回的结果分析&#xff08;重要&#xff09;fullmatch 严格匹配整个字符串search 任意位置开始匹配sub 替换匹配内容subn 以元组方式返回替换结果split 正则切割…

一 Go环境搭建

1. 下载地址 https://golang.google.cn/dl/ 傻瓜式安装&#xff0c;自动会配置path的变量&#xff0c;安装完成后可以使用go version 查看当前安装的版本 本文使用目前最新的1.20.2版本 2. 配置go环境 cmd控制栏打开输入以下命令&#xff08;如果cmd有问题可以尝试powershe…

面试了一个32岁的程序员,一个细节就看出来是培训班的····

首先&#xff0c;我说一句&#xff1a;培训出来的&#xff0c;优秀学员大有人在&#xff0c;我不希望因为带着培训的标签而无法达到用人单位和候选人的双向匹配&#xff0c;是非常遗憾的事情。 最近&#xff0c;在网上看到这样一个留言&#xff0c;引发了程序员这个圈子不少的…

Qt(c++)调用海康威视监控摄像头

文章目录一.海康威视监控摄像头开发SDK介绍二.海康SDK模块说明三.Qt项目中海康威视SDK配置四.实时预览摄像头图像程序一.海康威视监控摄像头开发SDK介绍 设备网络SDK是基于设备私有网络通信协议开发的&#xff0c;为嵌入式网络硬盘录像机、NVR、网络摄像机、网络球机、视频服务…

【Linux】冯诺依曼体系结构

冯诺依曼体系结构一、计算机结构体系来源二、冯诺依曼体系结构三、冯诺依曼体系结构中的数据流动一、计算机结构体系来源 研制电子计算机的想法产生于第二次世界大战期间&#xff0c;主要用来进行弹道计算&#xff0c;在"时间就是胜利"的战争年代&#xff0c;迫切需…

【JavaEE进阶篇1】认识Spring、认识IoC、使用spring创建对象

目录 一、什么是Spring 1.1容器 1.2什么是IoC 传统方式创建对象的问题&#xff1a; 类与类之间的耦合性过大 Ioc的优点 Spring IoC容器最核心的功能 1.3DI概念说明(Dependency Injection) IoC和DI的区别是什么 二、Spring项目的创建 三、Spring的使用(把对象存储到spr…

ChatGPT是如何训练得到的?通俗讲解

首先声明喔&#xff0c;我是没有任何人工智能基础的小白&#xff0c;不会涉及算法和底层原理。 我依照我自己的简易理解&#xff0c;总结出了ChatGPT是怎么训练得到的&#xff0c;非计算机专业的同学也应该能看懂。看完后训练自己的min-ChatGPT应该没问题 希望大牛如果看到这…

stm32外设-中断详解

0. 写在最前 本栏目笔记都是基于stm32F10x 1. 中断是啥&#xff1f; 什么是中断&#xff1a;CPU在处理某一事件A时&#xff0c;发生的另外某一事件B请求CPU去处理&#xff08;产生了中断&#xff09;&#xff0c;随后CPU暂时中断当前正在执行的任务&#xff0c;去对事件B进行处…

Java的二叉树、红黑树、B+树

数组和链表是常用的数据结构&#xff0c;数组虽然查找快&#xff08;有序数组可以通过二分法查找&#xff09;&#xff0c;但是插入和删除是比较慢的&#xff1b;而链表&#xff0c;插入和删除很快&#xff08;只需要改变一些引用值&#xff09;&#xff0c;但是查找就很慢&…
最新文章