js
暖光_&
不积跬步无以至千里,不积小流无以成江海
展开
-
常用的数据验证封装 返回promise可扩展
// 常用正则const isPhone = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/; // 手机号验证const isEmial = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/; // 邮箱const isChinese = /^[\u4E00-\u9FA5\uf900-\ufa2d]$/; // 汉字const isBanking = /^[1-9]\d{9,29}$/; // 银行卡号...原创 2021-08-24 19:02:54 · 129 阅读 · 0 评论 -
js 对象(Object)方法总结
1. create创建一个对象const obj = Object.create({a:1}, {b: {value: 2}})第一个参数为对象,对象为函数调用之后返回新对象的原型对象,第二个参数为对象本身的实例方法(默认不能修改,不能枚举)obj.__proto__.a === 1 // true obj.b = 3;console.log(obj.b) // 2//创建一个可写的,可枚举的,可配置的属性pobj2 = Object.create({}, {原创 2021-08-24 11:10:46 · 2171 阅读 · 1 评论 -
js 预编译 GO与AO 变量和函数声明提升
预编译预编译分为全局(GO)预编译和局部(AO)预编译,全局预编译发生在页面加载完成时执行,而局部预编译发生在函数执行的前一刻。js运行三步曲首先JavaScript的执行过程会先扫描一下整体语法语句,如果存在逻辑错误或者语法错误,那么直接报错,程序停止执行,没有错误的话,开始从上到下解释一行执行一行。1 语法分析2 预编译3 解释执行局部预编译(AO)的4个步骤在执行的前一刻会创建一个ao对象将函数内所有的形参和变量声明储存到ao对象中,value为undefined;将形参和实原创 2020-12-23 11:45:19 · 567 阅读 · 0 评论 -
js 新手常用小技巧 简写语法总结归纳
变量简写var a ;var b=8;var c;//等价于var a, b=8, c;对象属性简写当对象的属性与值是同一个值时let obj ={a:a,b:b}// 等价于let obj = {a,b}拓展运算符let a = [1,2,3];let b = [4,5,6];//如果说a,b合并,ES5的方法必然是使用a.concat(b),如果使用...不是更好吗?let c = [1,2,3,...b]//还有就是如果两个对象之间相互复制,使用拓展运算符就原创 2020-12-23 11:14:46 · 288 阅读 · 2 评论 -
js浏览器端 代码执行顺序 事件循环Event Loop 宏任务与微任务
js -> 单线程单线程我们可以理解为:就是js代码在执行过程中,后面的代码想要执行就必须等当前代码执行完成后才可以进行。同步任务与异步任务先执行同步任务,再执行异步任务。同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异步任务指的是,不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。宏任务与微任务异步任务又分为了宏任务与微任务;其重要作用是为了增加代码执原创 2020-12-22 17:18:51 · 147 阅读 · 1 评论 -
NProgress 页面加载进度条插件
本文示例是在vue中展示首先安装nprogressnpm nprogress -S然后在路由的全局钩子函数中配置很简单,一会就实现了import { createRouter, createWebHistory } from "vue-router";import NProgress from "nprogress";import "nprogress/nprogress.css";import Routes from "./routers";const router = cre.原创 2020-12-21 18:30:25 · 171 阅读 · 0 评论 -
详解js数据类型之深浅拷贝
数据类型undefined ---------- 未定义 Undefinedboolean ------------ 布尔值 Booleanstring -------------- 字符串 Stringnumber ------------ 数值类型 Numberobject ------------- 对象 Objectnull --------------- 空 Nullsymbol ------------ Symbol es6新增的深浅拷贝js数据类型分为基本数据类型原创 2020-12-21 15:12:30 · 186 阅读 · 0 评论 -
改变this指向 bind,apply,call三者区别与用法 arguments
apply、call call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向。var func = function(arg1, arg2) { };func.call(this, arg1, arg2);func.apply(this, [arg1, arg2])其中 this 是你想指定的上下文,他可以是任何一个 JavaScript 对象(JavaScript 中一切皆对象)...原创 2020-10-26 16:32:41 · 309 阅读 · 0 评论 -
js和vue 防抖(debounce)、节流(throttle)
防抖(debounce): 当持续触发某事件时,一定时间间隔内没有再触发事件时,事件处理函数才会执行一次,如果设定的时间间隔到来之前,又一次触发了事件,就重新开始延时。js实现:/** * 函数防抖 */function debounce(fn, delay) { // 记录上一次的延时器 var timer = null; var delay = delay || 200; return function() { var args = argume...原创 2020-09-14 11:13:50 · 798 阅读 · 0 评论 -
jVectorMap 地图根据经纬度标点 足迹图,分布图
根据经纬度地图标点jVectorMap$('#map').vectorMap({ // 此处更改地图 map: 'cn_merc_en', // 中国地图 //map: 'us_aea', // 美国地图 //map: 'world_mill', // 世界地图 // backgroundColor: 'transparent', backgroundColor:'rgba(255,255,255,0)'原创 2020-06-09 16:19:18 · 625 阅读 · 0 评论 -
js与app交互篇
/** * 判断是安卓还是ios * @return {number} 0 安卓 1 ios 2其他 */ function h5userAgent() { var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') &...原创 2020-04-05 17:13:34 · 602 阅读 · 0 评论 -
动态引入js和css
/*** url 静态资源路径* type 1是css 2是js*/function appendHead(url,type){ let Head = document.getElementsByTagName('head')[0] if(type==1){ let link = document.createElement('link...原创 2019-12-28 14:18:55 · 123 阅读 · 0 评论 -
前端js常用正则总结
/**手机号验证 * @param {string} string * @return {boolean} */ verPhone: function(string) { var mobile = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/; return mobile.test(string...原创 2019-09-21 11:02:53 · 117 阅读 · 0 评论 -
js string,json,number数据类型互转
1 string转json JSON.parse()2 json转stringJSON.stringify()3 number转stringtoString()4 sting转number/* * 整数型 第一个参数是值,第二个是进制(2~36)*/parseInt("1000", 10)/** 浮点型*/parseFloat()/**向下取...原创 2019-09-21 10:56:25 · 2570 阅读 · 0 评论 -
js 浏览器局部打印img不显示
浏览器局部打印不显示原创 2019-07-12 18:15:55 · 3154 阅读 · 0 评论 -
websoket连接 封装
websoket连接方法的封装/* * websoket连接 {'send':{'message':111},'message':callBack,'url':""} */ function webSoket(obj){ var sock = ''; var lockReconnect = false; var count = 0; var send = obj...原创 2019-07-12 18:25:14 · 225 阅读 · 0 评论 -
javascript ajax 自定义请求头
// 需要设置请求报文 ajax.setRequestHeader("Token",token); ajax.setRequestHeader("DX",daxi); ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");但是"Token"和"DX"这两个参数,需要在后端定义一下,才能传过去...原创 2019-07-12 18:45:53 · 1567 阅读 · 0 评论 -
鼠标左键自定义菜单
这个例子是把左边菜单的id取到,给.click的标签添加成class。每添加一次之前都会初始化一次,删除以前添加的<!-- 右键菜单 --> <ul class="myMenu" id="myMenu"> <li id="one">出勤</li> <li id="two">事假</li> <...原创 2019-07-13 11:33:24 · 926 阅读 · 0 评论 -
input placeholder低版本浏览器不支持问题
采用的方案是用input的value属性显示placeholder,密码框单独处理//ie用value替换placeholderfunction ieInput() { // 如果不支持placeholder,用jQuery来完成 if(!isSupportPlaceholder()) { // console.log(11111); // 遍历所有...原创 2019-07-13 12:00:06 · 178 阅读 · 0 评论 -
draggable 拖拽 把一个标签拖到另一个框
拖拽的时候把一个标签拖动到另一个框,且这个框里已经有元素的话,不可再拖进去。实现原理就是自定义属性,每次拖完去重置属性,标签有属性的不可再拖进去支持i9及i9+<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> ...原创 2019-07-13 15:58:05 · 1776 阅读 · 0 评论 -
js 轮播图封装
html部分<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>轮播</title> <link rel="stylesheet" type="text/css" href="style.css"/> <script ...原创 2019-07-13 16:13:46 · 354 阅读 · 2 评论 -
js原生FormData实现文件上传
js文件上传 /**上传文件 * @param {Object} obj * id 选中文件id * url 上传地址 * callBack 回调函数 */ function uplaodFile(obj) { var url = obj.url; var file = document.getElementById(obj.id).files[0];...原创 2019-07-13 16:30:06 · 676 阅读 · 0 评论 -
获取地址栏参数 js
/* 获取网址的get参数 * param string 参数名 * return 参数值 不存在反回null */ function getParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.subs...原创 2019-07-13 16:36:52 · 119 阅读 · 0 评论 -
js cookie的封装
/** 设置cookie* param key存储的key val对应的值 time存储时间(单位天)*/function setCookie(key, val, time) { var date = new Date(); var expiresDays = time; date.setTime(date.getTime() + expiresDays * 24 * 3600 *...原创 2019-07-13 16:51:17 · 89 阅读 · 0 评论 -
Storage存储 localStorage sessionStorage js
localStorage 其存储的数据能在跨浏览器会话保留,存储在 localStorage的数据可以长期保留localStorage 存储对象的封装/* * 存储LocalStorage * param string name value */ function setLocalStorage(name, value) { if (!window.localStorage)...原创 2019-07-15 11:50:26 · 199 阅读 · 0 评论 -
获取iframe当前的url
/**获取iframe 的当前url* @param {Object} id iframe的id*/function getIframUrl(id){ var url = parent.document.getElementById(id).contentWindow.location.href; return url;}原创 2019-07-12 17:59:46 · 11894 阅读 · 0 评论