Javascript
前端酱紫
这个作者很懒,什么都没留下…
展开
-
看谷歌浏览器源码,为什么p标签和div标签为块元素
【代码】看谷歌浏览器源码,为什么p标签和div标签为块元素。原创 2023-10-27 11:17:35 · 1793 阅读 · 0 评论 -
js自定义随机16进制颜色
js自定义随机16进制颜色。原创 2023-05-19 17:39:38 · 585 阅读 · 0 评论 -
nrm 切换npm源 淘宝镜像
nrm 切换npm源 淘宝镜像下载 nrm : npm i nrm查询 列表 :nrm lsPS C:\Users\link\Desktop\WebSocket> nrm ls npm -------- https://registry.npmjs.org/ yarn ------- https://registry.yarnpkg.com/ c...原创 2020-05-01 03:42:12 · 2287 阅读 · 2 评论 -
宏任务 和 微任务 执行顺序
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>中国人</title></head><body></body><script> setTimeout((...原创 2020-04-09 23:38:55 · 1201 阅读 · 2 评论 -
由手机号正则引发的思考,正则属性 lastIndex
这个正则我们平时用来验证手机号的,好像也看不出什么毛病,把正则放到浏览器控制台,简单代入,可以对手机号正确验证。,regs.lastIndex 为 4 ,因为匹配到了1,所以从2开始,这里的2索引为4。,regs.lastIndex 为 1 ,因为匹配到了1,所以从2开始,2的索引为1。,regs.lastIndex为0,因为没有匹配到1,索引从0开始。1.把提前打印的去处即可,但这种方法发生bug 的概率还是挺高的。才对,为什么我输入了11位手机号却提示。根据文档我们在写个类似的demo看。原创 2022-12-26 11:39:21 · 1588 阅读 · 0 评论 -
输入内容后,输入框宽度根据内容自动撑开contenteditable=“true“
实在想不到怎么做了,终极大招:百度一下,结果还整知道了方法使用 contenteditable=“true”,但是百度找到的方法只能输入内容后宽度自动变宽,这个需求还不够用,我自己还得加入清空方法。1.使用element-ui 的el-input宽度设置auto (不可行)2.使用input输入框宽度设置 auto (不可行)产品需求:输入内容后,输入框宽度根据内容自动撑开。不需要内容的时候把内容清空掉。...............原创 2022-08-06 17:13:41 · 3298 阅读 · 1 评论 -
点击某个dom元素,让dom元素全屏显示
产品的需求里有个全屏的功能,我在网上找了一下这种全屏的方法,还真有,不过下载新版本的。尽量下载这个版本,最新版本可能会报错或者不成功。好像用的有些问题,版本降低到。原创 2022-07-26 20:54:48 · 1591 阅读 · 0 评论 -
前端vue项目导出表格
项目里经常用到表格导出,但是表格导出一般都是后台写的接口,今天后台想偷懒不想写表格接口了,于是我想了下看我们自己前端能不能做个导出的功能,在网上搜了一下,还真有这种插件。以下是代码示例,要是导出不成功,按照我这边的版本下载试下。于是照葫芦画瓢把网上的方法搬下来用在项目里。...原创 2022-07-26 20:34:59 · 1498 阅读 · 3 评论 -
sortablejs拖动排序组件 使用方法
sortablejs拖动排序组件 使用方法,拖动排序后得到的值是唯一值数组['(','4','-','1',')','*','3']这样也可以做简易计算器拼接好了后使用join(“”)拼接起来。然后使用eval把值代入进去计算。原创 2022-07-25 21:39:48 · 1076 阅读 · 0 评论 -
vue项目里 使用Element table 把多个表格合并追加到右侧,更简洁版本(cv即食)
vue项目里 使用Element table 把多个表格合并追加到右侧,更简洁版本原创 2022-07-16 23:36:57 · 892 阅读 · 0 评论 -
js 深拷贝
js 深拷贝原创 2022-07-16 10:41:31 · 103 阅读 · 0 评论 -
vue项目 element表格数据行转列数据互转
后台返回的格式一个人名里面带有这个人的所有信息,我们需要数据转化(俗称行转列 ) 这个平时可以用在时间日期上比较多,这个案例只是把这个写法记录下来原创 2022-07-01 01:11:16 · 3354 阅读 · 0 评论 -
js数字处理:保留几位小数,最大值,最小值
js数字处理:保留几位小数,最大值,最小值function checkDigit(val) { // 调用案例 checkDigit({ number: " 1f发1,a.g5.1A62ag84", max: 100, min: -1 ,len: 2 }) let { number: number = "", // 需要校验的数字; len: len = "all", // 保留小数点后几位( 都保留传'all' ) max: max = 9999999, // 最大值原创 2022-05-19 19:18:20 · 1368 阅读 · 1 评论 -
js sleep 休眠延迟程序
js sleep 休眠延迟程序当我们请求数据后台返回的太快,loading效果一点看不出来可以试试弄个休眠延迟程序试试方法一:这种实现方式是利用一个伪死循环阻塞主线程。因为JS是单线程的。所以通过这种方式可以实现真正意义上的sleep()。 function sleep (delay) { var start = (new Date()).getTime(); while ((new Date()).getTime() - start < delay) {原创 2022-04-26 15:54:16 · 1614 阅读 · 0 评论 -
vue项目 数字自动增加 并转化成带有分号的数字
<template> <div class="headers"> <CountTo :startVal="0" :endVal="传入数字" /> </div></template><script>import CountTo from "@/components/CountTo/CountTo.vue";components: { CountTo,}</script>s原创 2022-04-18 15:39:15 · 1060 阅读 · 0 评论 -
vue 输入框输入任意内容返回数字
vue 输入框输入任意内容返回数字输入任意内容只返回数字<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2022-03-29 20:16:58 · 1191 阅读 · 0 评论 -
Promise 存在的意义:
Promise 存在的意义:异步问题同步化解决方案 只是顺便解决了回调地狱问题 <script> let p = new Promise((resolve, reject) => { setTimeout(() => { console.log('晚上好2'); }) }) p.then((res) => { console.log(res); }) console.原创 2021-12-17 00:31:08 · 282 阅读 · 0 评论 -
vue 路由 使用 require.context 一行代码 自动导入 所有路由文件
项目router路由引入js文件数目太多怎么办?可以使用 require.context 优化项目代码在 component 文件夹下 N个路由文件src/router/component/about.jsexport default [xxxx] // 用 export default 导出在router文件里引入自动导入方法src/router/index.js// 自动引入路由 方法import { importAllFn } from "@/utils/importAll原创 2021-12-05 16:43:31 · 1117 阅读 · 0 评论 -
对象里根据value排序?
问:对象里根据value排序? let obj = { 小明: 60, 小红: 48, 大白: 59, 小李: 70, 大王: 80, 小吴: 78 } →→→ 展开答案 let obj = { 小明: 60, 小红: 48, 大白: 59, 小李: 70, 大王: 80, 小吴: 78 } obj.arr = [] // 不增加新变量了,直接在obj里面加个 arr数组原创 2021-12-03 17:59:49 · 532 阅读 · 0 评论 -
js 数据填充 排序
问题描述:后台返回给前端的时间(ywDate)是无序的,有的营销部门周 可能是断断断续续的需求:1.本部门没有的日期(snDate) 但在其他部门有,就需要把其他部门的时间日期(ywDate) 填充到这个部门 并设置(sale)为 02.在部门里面 按照时间 从小到大的顺序排序// 后台返回的代码var obj = { 营销一部: [ { ywDate: '2020年 第1周', sale: 50 }, { ywDate: '2021年 第14周',原创 2021-12-03 12:13:56 · 328 阅读 · 0 评论 -
简单粗暴地理解js原型链--js面向对象编程
简单粗暴地理解js原型链–js面向对象编程原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好。不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么。简单粗暴点看原型链吧,想点与代码无关的事,比如人、妖以及人妖。1)人是人他妈生的,妖是妖他妈生的。人和妖都是对象实例,而人他妈和妖他妈就是原型。原型也是对象,叫原型对象。2)人他妈和人他爸啪啪啪能生出一堆人宝宝、妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗称造人。3)原创 2021-11-16 16:37:09 · 101 阅读 · 0 评论 -
Node模块化加载机制,干货版
Node.js模块化机制,使用npm下的第三方包,我们在项目中引入第三方包:let x= require(“包名”) ,那么require方法加载第三方包的原理是什么呢?1.require(“包名”) 优先在加载该包的模块的同级目录node_modules中找第三方包举例jquery:let $ = require("jquery")引入 jquery,去node_modules目录下找 jquery找到后,在jquery目录下找 package.json在 package.json里找mai原创 2021-10-25 00:46:36 · 127 阅读 · 0 评论 -
exports 和 module.exports 你要了解一些概念和为什么
默认导出空对象:在没有任何内容导出的时候,默认会导出 module.exports 一个空对象 “{}”require获取文件路径时,可以不加后缀名,默认的后缀名是"js"exports 和 module.exports 相等原因系统默认设置:exports = module.exports ,把exports 的内存地址指向module.exports的内存地址这两个导出都是在同一个对象里面,说明 exports 和 module.exports 指向的是同一个对象修改导出的值,原创 2021-10-25 00:08:59 · 482 阅读 · 0 评论 -
宏任务 微任务 同步任务 setTimeout,setInterval,promise.then和process.nextTick()的执行顺序。
1.关于javaScript的单线程:应用场景决定了javascript的单线程的特性,假如javascript是多线程,同时进行:一个线程对某一个dom进行添加属性操作,另一个线程对该线程进行删除操作,那么浏览器该听哪一个。这就决定javascript必须是单线程。web worker:是一个多线程。它出现的目的是当浏览器有大量密集的计算时候或者响应时间很长的运算时候,页面出现卡顿,可以起一个worker子线程,主线程和worker线程互不干预,这样页面就可以进行点击之类的操作,但这个子线程不能操作D原创 2021-10-20 17:37:27 · 1368 阅读 · 0 评论 -
手写 vue 自定义指令(directive) v-loading 加载,项目实战
手写 vue 自定义指令 v-loading目标效果:在vue项目的标签里面使用 v-loading="true" ,如同element-ui里面使用v-loading一样 会展示loading 效果。在这里我做两个laoding效果:一个全屏的loading效果,用于进入页面的时候使用loaidng一个局部的load 效果,用户分页或者加载部分内容的时候load效果目录结构> 多余的文件夹就不展示了> loading里面的5个文件创建好,把代码复制进去,然后在ma原创 2021-10-11 16:52:42 · 2335 阅读 · 0 评论 -
手写 浅拷贝 深拷贝
递归浅拷贝浅拷贝都是能拷贝基本类型的深度克隆:function copy(obj) { let newobj = {} for (let key in obj) { if (obj[key] instanceof Object) { newobj[key] = copy(obj[key]); } else { newobj[key] = obj[key] } } re原创 2021-10-10 10:26:56 · 110 阅读 · 0 评论 -
闭包的理解
闭包的理解什么是闭包函数嵌套函数,内部函数就是闭包正常情况下,函数执行完成,内部变量会销毁(销毁:释放内存空间)特性: 内部函数没有执行完成,外部函数变量不会被销毁闭包函数举例:作用域链:函数内部使用变量,如果当前作用域没有,会到上一层去找,如果还是没有继续上一层 直至全局去找,要是还是没有 报错undefined...原创 2021-10-09 16:54:40 · 89 阅读 · 0 评论 -
Promise async await 宏任务 微任务执行顺序
Promiseresolve(“里面的值”) 是 then((里的形参)=>{})asyncasync 函数返回的是 promise对象那么怎么才能拿到 “1” 呢?可以使用 then() 能拿到 “1”async 换成 promise练习1.同步任务2.nextTick3.微任务4.宏任务如图所示 任务执行顺序...原创 2021-10-09 00:10:29 · 176 阅读 · 0 评论 -
手写const
手写const // 1. 自定义容器充当数据的存储 let obj = {} function getConst(key, val) { obj[key] = val; Object.defineProperty(obj, key, { value: val, // 传进来的值 writable: false, //是否可修改改属性值 configurable: false, //配置信息是否可修改原创 2021-10-08 14:17:43 · 304 阅读 · 0 评论 -
js 手写call
js 手写call // call的实现原理 Function.prototype.mycall = function (ctx) { ctx = ctx || window // 有就用ctx 没有就用window ctx._F = this; // a._F = this (添加属性) ,this===b (this指向b) let arg = [...arguments].slice(1) // 截取参数 let res原创 2021-09-26 00:46:39 · 97 阅读 · 0 评论 -
2021 秋季 最新前端面试题
promise 表达的导入导出 容易搞混淆es6 classnodejs Buffer缓冲区reactvue3 和vue2有什么不同 ?优缺点试什么 ?MVVM 表达自定义写个v-loadingwebpack原理vite原理防抖节流重绘重排this.$nextTick原理1. HTTP 常用的请求方式,区别和用途?GET: 发送请求,获取服务器数据POST:向 URL 指定的资源提交数据PUT:向服务器提交数据,以修改数据HEAD: 请求页面的首部,获取资源的.原创 2021-09-17 22:40:15 · 302 阅读 · 0 评论 -
js vue项目使用 时间日期 date 格式化
js utils 时间日期 date格式化// 对Date的扩展,将 Date 转化为指定格式的String// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,// 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423// (new Date()).Format(原创 2021-09-16 09:58:48 · 639 阅读 · 0 评论 -
js千分位 正则匹配
js千分位 正则匹配var num = '123456789.45748';var str = a.replace(/(\d)(?=(\d{3})+\.)/g, '$1,');//使用正则替换,每隔三个数加一个','// 使用正则替换,每隔三个数加一个','// 结果:'123,456,789.46'原创 2021-09-16 00:28:40 · 464 阅读 · 0 评论 -
js 防抖 原理
一、在前端中有一些事件会频繁的触发容易造成页面卡顿,例如:window 的 resize、scrollmousedown、mousemovekeyup、keydowninput 的 input 事件二、防抖的原理答:不管触发多少次事件,都会等到事件触发 **n 秒后 **才会执行,如果在事件触发的 n 秒内 又触发了这个事件,那么就以新的事件的时间为准重新计算,总之,就是要等你触发事件 n 秒内 不再触发事件,我才会执行,一般用在用户表单输入实时搜索上// 第一版// 缺点:函数的 th原创 2021-09-14 17:52:13 · 5763 阅读 · 1 评论 -
zepto源码注释
zepto源码注释 /* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */ ; (function (undefined) { if (String.prototype.trim === undefined) // fix for iOS 3.2 String.prototype.trim = function () {原创 2021-09-09 01:37:10 · 140 阅读 · 0 评论 -
设计稿750px 配置rem
设计稿750px 配置rem获取设备宽度750 等于750<320 等于320设置字体大小 设备宽度/7.5 1rem=100像素// 设计稿是750px// 设置1半的宽度,就是375px// 1rem == 100px的设计稿宽度// 整个屏幕750px宽度7.5rem,屏幕一半的宽度375px就是3.75rem,100px等于1rem调用window.onresize = function(){ 调用 }function remSize() {原创 2021-08-01 10:40:59 · 3535 阅读 · 0 评论 -
程序休眠 指定时间
<script> sleep = (time = 1000) => { return new Promise((resolve) => { setTimeout(() => { resolve() }, time) }) } sleeps = (time = 1000) => { ...原创 2021-06-27 13:31:37 · 145 阅读 · 0 评论 -
import require module.exports export....
import require module.exports export…index.vue<script>import list from "./data";import { arr, str, btn } from "./data";var res = require("./result");var fun = require("./fn");export default { data() { return {}; }, mounted() {原创 2021-05-31 23:41:05 · 104 阅读 · 3 评论 -
VUE项目配置ESlint后一些报错解决方式
VUE项目配置ESlint后一些报错解决方式一看就会的超详细教程module.exports = { root: true, 'env': { // 浏览器全局变量 'browser': true, // 启用 ES6 语法支持以及新的 ES6 全局变量或类型 'es6': true, // jQuery 全局变量 'jquery': true }, 'extends': [ 'eslint:recommended', '原创 2021-05-31 23:02:40 · 988 阅读 · 0 评论 -
深入浏览器解析渲染
深入浏览器解析渲染构建dom将HTML解析成许多Tokens将tokens解析成object将object组合成一个DOM树构建cssom解析CSS文件,并构建出一个CSSOM树构建renderTree(渲染树)结合DOM和CSSOM构建出一颗Render树layout计算出元素相对于viewport的相对位置5.paint将renderTree转换成像素,显示在屏幕上...原创 2021-04-25 11:42:05 · 123 阅读 · 0 评论