学习笔记01

已于 2024-01-03 14:46:19 修改
阅读量722 收藏
点赞数
分类专栏： 前端知识库 文章标签： 学习
于 2022-09-29 11:08:41 首次发布
本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45266979/article/details/125524628
版权
本文详细介绍了JavaScript中正则表达式的应用，包括IP、Port、域名的验证，以及URL地址的处理。此外，还涉及Echarts在Vue3中的页面自适应解决方案，子组件向父组件和父组件向子组件的数据传递，以及全屏控制的方法。同时，分享了数字字符串转数字的几种方式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

JS学习笔记

一、 强制渲染

  1. this.$set(this.selectForm[index],“isUse”,true);

  2. this.$forceUpdate();

二、正则

（一） IP的JS正则

a. /^(((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))$/—匹配192.168.10.156
b. /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/—匹配192.168.10.156

实例：

    validateIP(rule, value, callback) {
      if (!value) {
        callback(new Error("请填写IP"));
      } else {
        const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
        if (!reg.test(value)) {
          callback(new Error("IP格式不正确"));
        } else {
          callback();
        }
      }
    },

学习：ip和端口号的正则表达式
工具地址：https://regex101.com/

（二） Port的JS正则

端口号的地址是：1-65535
a. /^(\:([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{4}|65[0-4]\d{2}|655[0-2]\d|6553[0-5]))$/—匹配:8080
b. ^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$ —匹配8080
c. ^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{4}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$—匹配8080

实例：

    validatePort(rule, value, callback) {
      if (!value) {
        callback(new Error("请填写端口"));
      } else {
        const reg = /^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/;
        if (!reg.test(value)) {
          callback(new Error("端口格式不正确"));
        } else {
          callback();
        }
      }
    },

学习：ip和端口号的正则表达式

（三）域名

域名的验证字段：

  1. ^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$
  2. ^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$
  3. ^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$
    域名以及ip同时验证
validateIP(rule, value, callback) {
      if (value == '' || value == undefined || value == null) {
        callback(new Error('IP/域名不能为空'));
      } else {
        const reg = /((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d)(\.((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d)){3}/;
        const domain = /^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$/
        if (reg.test(value) && value != '') {
          console.log(222)
          callback();
        } else if (domain.test(value) && value != '') {
          console.log(333)
          callback();
        } else {
          console.log(444)
          callback(new Error('请输入正确的IP/域名'));
        }
      }
    },

（四）URL地址

适用于

	var textArr = ['www.baidu.com','http://www.baidu.com','http://www.baidu.com/','https://www.baidu.com/a/b/c','https://www.baidu.com:8080/a/b?t=123','https://www.baidu.com:8080/a/b?t=123&c=王炸','https://www.baidu.com:8080?a=网&b=33','http://192.168.99.111:1212/a/b/c','112.22.12.2','a.b.c','localhost/cc/2/b/5','ftp://192.17.11.22:22/测试.tar','https://m.www.baidu.我爱你:8080?a=战三&b=333&c=666'];

leakUrl: [{required: validateUrl, message: ‘请填写漏洞地址’, trigger: ‘blur’}],

const checkURL = (url) => {
	const strRegex = '^((https|http|ftp)://)?'//(https或http或ftp):// 可有可无
		+ '(([\\w_!~*\'()\\.&=+$%-]+: )?[\\w_!~*\'()\\.&=+$%-]+@)?' //ftp的user@  可有可无
		+ '(([0-9]{1,3}\\.){3}[0-9]{1,3}' // IP形式的URL- 3位数字.3位数字.3位数字.3位数字
		+ '|' // 允许IP和DOMAIN（域名）
		+ '(localhost)|' //匹配localhost
		+ '([\\w_!~*\'()-]+\\.)*' // 域名- 至少一个[英文或数字_!~*\'()-]加上.
		+ '\\w+\\.' // 一级域名 -英文或数字  加上.
		+ '[a-zA-Z]{1,6})' // 顶级域名- 1-6位英文
		+ '(:[0-9]{1,5})?' // 端口- :80 ,1-5位数字
		+ '((/?)|' // url无参数结尾 - 斜杆或这没有
		+ '(/[\\w_!~*\'()\\.;?:@&=+$,%#-]+)+/?)$';//请求参数结尾- 英文或数字和[]内的各种字符

	const strRegex1 = '^(?=^.{3,255}$)((http|https|ftp)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/)?(?:\/(.+)\/?$)?(\/\w+\.\w+)*([\?&]\w+=\w*|[\u4e00-\u9fa5]+)*$';
	const re = new RegExp(strRegex, 'i');//i不区分大小写
	//将url做uri转码后再匹配，解除请求参数中的中文和空字符影响
	if (re.test(encodeURI(url))) {
		return (true);
	} else {
		return (false);
	}
}

（五）同时验证手机号码和固定电话号码(带区号或不带区号或带分机号)

^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$

验证：
在这里插入图片描述

三、时间类型转换

//Fri Mar 18 2022 14:24:45 GMT+0800(中国标准时间)
//转
//YYYY-MM-DD HH:mm:ss

data.format('YYYY-MM-DD HH:mm:ss')

详情可了解：
js 各种时间格式的转换

四、Echarts页面自适应（VUE3）

这是系统文档写的自适应方法，但是我发现只有修改该页面代码后第一次访问该Echarts时才会自适应，之后刷新页面重新访问，Echarts就不能自适应了，会出现留白或者图表显示不全面问题。

	window.onresize = () => {
		console.log(123)
		Echarts.resize()
	}

经检查发现，后面访问Echarts时，数据不会改变，所以mounted函数不会再次运行，所以里面的自适应方法并不会呗调用，解决办法，可以在这个方法外面包一个监听方法，推荐使用下面第二个，第一个有可能还没执行完function函数，就监听完成了。

	window.addEventListener('resize', function () {
		window.onresize = () => {
			console.log(123)
			Echarts.resize()
		}
	})

或者

	// 自适应大小
	window.addEventListener('resize',
		window.onresize = () => {
			console.log('漏洞7日内趋势:监听屏幕变化')
			Echarts.resize()
		}
	)

当页面有变化时，页面监听函数会执行，便会调用到自适应方法，问题完美解决！
感谢博主：JS监听页面宽度发生变化

五、子父组件传值

父组件接收子组件传值：
父组件：

<projectFome v-if="nums === 1" @getValue="getSonValue"/>

子组件：

emit("getValue", 3)

父组件向子组件传值：
父组件：

<template>
  <div class="parent">
    <Child message="Hello, I am parent!"></Child>
  </div>
</template>

子组件：

<template>
  <div class="child">
    <p>子组件：{{ message }}</p>
  </div>
</template>

<script>
  export default {
    name: 'Child',
    props: ['message'],		//引入父参
    data () {
      return {}
    }
  }
</script>

六、JS控制全屏

各浏览器为了用户体验，禁止js自动全屏，意味着需要用户与浏览器交互才能触发以下全屏API。
Html:
全屏按钮:

		<!--全屏按钮-->
			<div style="margin: 12px 0; text-align: right">
				<span type="primary" @click="screen" class="full">
                    <fullscreen-outlined />
				</span>
			</div>

全屏容器：

<div id="content">
	<a-row style="margin-left: -4%;margin-top:2%">
		<a-col :span="5" class="other">
			<a-input-search
				placeholder="请输入要查询的组件信息名称"
				enter-button="搜索"
					@search="onSearch"							v-model="ActData"
					allowClear
			/>
		</a-col>
	</a-row>
	<areaChart :chart-data="ActivityData"  v-model:val="ActData" ref="dialog"></areaChart>
</div>

JavaScript:

// 是否全屏
const fullscreen = ref(false)
const screen = () => {
	//控制是否显示全屏
	// let element = document.documentElement;
	let element = document.getElementById('content')
	if (fullscreen.value) {
		// 退出全屏
		if (document.exitFullscreen) {
			document.exitFullscreen()
		} else if (document.webkitCancelFullScreen) {
			document.webkitCancelFullScreen()
		} else if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen()
		} else if (document.msExitFullscreen) {
			document.msExitFullscreen()
		}
	} else {
		// 进入全屏
		if (element.requestFullscreen) {
			element.requestFullscreen()
		} else if (element.webkitRequestFullScreen) {
			element.webkitRequestFullScreen()
		} else if (element.mozRequestFullScreen) {
			element.mozRequestFullScreen()
		} else if (element.msRequestFullscreen) {
			// IE11
			element.msRequestFullscreen()
		}
	}
	fullscreen.value = !fullscreen.value
}

容器中搜索框值：

const dialog = ref("")
const ActData = ref('') // 组件图表数据
const onSearch = (searchValue) => {
	console.log(searchValue,'ActData')
	ActData.value = searchValue
		setTimeout(() => {
		dialog.value.initChart()
	}, 300)
}

七、小工具：base64转图片

参考：https://blog.51cto.com/u_14475876/2834925
在这里插入图片描述
注意：转义的时候需要去除多余的部分，一般前后端联调的时候，前面会有image；base64等信息，需要去掉

八、图片转Base64

方法一：

      console.log(file)
      const reader = new FileReader()
      // 因为这两个组件的fils文件不一样所有一个判断
      if (file.originFileObj) {
        reader.readAsDataURL(file.originFileObj)
      } else {
        reader.readAsDataURL(file)
      }
      reader.addEventListener('load', () => {
        // this.base64 = reader.result
        console.log( reader.result)
      })

方法二：

      //读取文件的字符流
      const reader = new FileReader();
      // 将文件读取为 DataURL 以data:开头的字符串
      reader.readAsDataURL(file);
      reader.onload = e => {
        // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
        const code = e.target.result;
        console.log(code, 'code')
        // this.formData.cover = code;
      }

效果：
在这里插入图片描述

九、数字字符串转数字

1.Number()

不会改变数字大小，小数也可以进行转换

2. parseInt()

会改变数字大小，保留整数，后面数字四舍五入

3. xxx.toFixed(2)

保留两位小数，进行四舍五入

前端后续发展可了解方向：
业务逻辑、单页面、sdn、seo

js全局替换ip地址的正则方法
风中追风
05-08 1421
最近有个需求使用的是内外网,不同网段不能访问，系统中有些图片会挂掉，这里我们用。可以使用正则表达式和字符串的replace方法来实现全局替换。方法将其替换为新的 URL。最后输出替换后的字符串。nginx设置完代理后，剩下的就是把。在上面的代码中，使用正则表达式。需要的ip全局替换一下。
vue项目使用this.$forceUpdate()；强制渲染页面
seimeii的博客
04-29 732
解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等） 问题描述: 在使用Vue框架开发时,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值: 解决: **运用 this.forceUpdate()强制刷新∗∗∗∗添加this.forceUpdate()强制刷新** **添加this.forceUpdate()强制刷新∗∗∗∗添加this.forceUpdate();进行强制渲染，效果实现。 搜索资料得出结果：** 因为数据层次
JS强制渲染
IT之常青藤
08-22 1万+
大家在写js代码的时候，有一点需要关注下：当浏览器在执行一段js代码的过程中，一般不会去更新渲染dom文档，而是在整段代码执行完毕的时候才去更新dom文档。浏览器这么实现，是为了尽可能提高性能。 但这种实现有时候会给我们带来一些意外的负面效果，特别是在js代码中使用我们自己开发的预览控件播放监控点实时画面的时候。但用户双击监控点的时候，这个双击事件的响应代码包括以下部分： 1、隐藏地图
js强制渲染
qq_45044074的博客
04-04 1168
js要操作一个一个dom的动画时 要在每一个状态后强制渲染一次 否则会直接到最终的状态没有动画
js IP地址正则校验
qq_37130872的博客
05-16 6539
ip 正则校验
echarts强制更新
最新发布
wjd1994的博客
04-30 517
chart.setOption({ series: updatedSeries }, { notMerge: true // 强制不合并，确保旧数据被清除 });
JQuery 学习笔记01 JQuery初接触
12-09
《JQuery 学习笔记01 - JQuery初接触》 jQuery是一个高效、简洁且功能丰富的JavaScript库，它极大地简化了JavaScript编程，使得开发者能够更快速、更方便地处理DOM操作、事件处理、动画效果和Ajax交互。这篇学习...
jQuery学习笔记01
01-08
1、jQuery介绍 1.1什么是jQuery ?  jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。 1.2 jQuery核心思想  它的核心思想是write less,do more(写得更少,做得更多)，所以它...
我的Python学习笔记01
01-12
以小白的视角从零开始学Python，日结笔记资源。没有过多地=的专业术语，适合和我一样的初学者学习。
Appium学习笔记01-环境搭建
01-03
文章目录环境搭建1.java下载及配置环境变量2.AndroidSDK下载及配置环境变量2.1工具下载2.2设置环境变量2.3验证结果 环境搭建 Android测试，需要Java、AndroidSDK及一部手机（或者用Android模拟器模拟出一部手机） ...
[UI] [AntD] select强制重新渲染
m0_54592449的博客
04-26 471
数据发生变化，但select并没有重新渲染?
[js]一个获取页面ip的正则
10-30
[js]一个获取页面ip的正则
vue强制或手动渲染(重绘)页面,
DDAD9527的博客
11-16 2897
vue重绘
【vue】 Vue中强制组件重新渲染的正确方法
piano_diano的博客
03-30 2278
背景 我在写一个模态框的表单时，发现其中所写的下拉框的默认值只生效一次，比如说我默认值是A，然后我下拉选择B，但是我不提交，然后点击关闭模态框，这个时候应该是算我取消了这次的表单填写，当我下次再点击这个模块框出来时，它应该给我显示的下拉框的默认值为A，但是这里就出现了问题，下拉框的值是我上一次选择的B，也就是说这个下拉框并没有重新渲染，默认值只在页面第一次打开时生效 解决 强制这个组件重新渲染，在每次进入模态框时设置重新渲染，方法主要是给这个下拉框设置一个 :key <a-selec..
js更新dom后页面及时渲染问题（js线程阻塞和解决办法）
前端361
11-02 1万+
参考：https://blog.youkuaiyun.com/qq_39542027/article/details/78893873 两个概念：1，js是同步加载的 2，浏览器执行js程序，高于页面渲染 于是就出现了js更新dom，页面不能及时渲染的问题 代码例子： document.body.html('为什么不先渲染我'); //程序 $.ajax({...
JavaScript之重复渲染问题
clk_esunny的成长之路
05-21 3547
重复渲染问题1. 原因： 对于不断变化的需求，我们不想改变原有代码的实现逻辑，就会想着直接在原有代码基础上累加新需求的代码，这样会导致代码重复，并且页面会多次改变重新渲染——重复渲染，这影响了页面渲染效率。2. 代码：优化前的js代码://全局变量var newInfoList;//全局存储最新的信息：新增/修改var restoreInfoList;//全局存储已...
js重新渲染或重新加载div
热门推荐
ksws0319440的博客
06-25 1万+
js操作div元素
vue强制渲染
qq_40576178的博客
04-27 641
通过this.$forceUpdate()将请求到的数据强制渲染
解决js动态改变dom元素属性后页面及时渲染问题
weixin_34309543的博客
11-17 1769
今天实现一个进度条加载过程，dom结构其实就是两个div 1 <div class="pbar"> 2 <div class="ui-widget-header" id="percent_bar" style="width: 23%;"></div> 3 </div> 控制里层div的宽width属性，就能实现进度条往前走的效果。 ...
Python学习笔记01：小白友好版
"我的Python学习笔记01 - 适合初学者的Python入门教程" 这篇学习笔记是作者以一个管理专业学生的身份，从零基础开始自学Python的心得体会。笔记的特点是避免了过多的专业术语，旨在让同样初级水平的读者能够轻松...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Coisini_甜柚か

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值