前端页面开发
醉生梦死bug中
我命由我不由天
展开
-
防抖节流函数
【代码】防抖节流函数。原创 2022-10-26 14:20:12 · 190 阅读 · 1 评论 -
eslint配置
module.exports = {root: true,env: { node: true },extends: ["plugin:vue/essential", "eslint:recommended"],rules: {"no-console": "off", //禁止使用console"no-const-assign": 2//禁止修改const声明的变量"no-multi-spaces": 1//不能用多余的空格"no-dupe-keys": 2//在创建对象字..原创 2022-03-09 16:56:29 · 368 阅读 · 0 评论 -
promise和async/await
两者都是用来处理js异步的一种方式,都是非阻塞的,async/await是基于promise实现的,async/wait写法要比promise写法简洁易懂许多。promise:是一个构造函数,其中的参数有两个resolve和reject,代表成功和失败的两种状态。then用于执行异步函数。可以叠加多重异步执行函数。catch函数用于捕捉异常。async/await:是一种语法糖,大致的语法就是在外层的函数定义async,在里面具体的异步执行任务前面加await让异步的函数看起来更像是同步的。...原创 2021-07-05 11:55:17 · 150 阅读 · 0 评论 -
关于浏览器缓存
我觉得需要一片文章来写一写浏览器缓存这个东西,长期更新。。。浏览器的缓存是三级缓存,首先从内存加载,内存没有就从硬盘获取,硬盘没有再进行网络请求。200 from memory cache:从内存中读取缓存,浏览器关闭之后,数据将不存在。200 from memory cache:从硬盘中读取缓存,浏览器关闭之后,数据依然存在。304 Not Modified:访问服务器,资源没有更新返回此状态码,从缓存中读取资源。浏览器的资源分为主资源和派生资源(以上两种缓存只缓存派生资源),主资源指原创 2021-06-23 17:25:53 · 430 阅读 · 0 评论 -
js事件定义和执行特性的区别
定义事件的写法有很多种,简单的事件定义或许还无需分清楚其中的差别,但是在你定义元素和事件错综复杂的页面逻辑时,你就会开始晕,这篇文章让你搞懂不同事件定义方式的差别和具体场景的运用。事件定义的方式有很多种,以点击事件为例,其中定义的方式分为主要分为两种,0级和2级,0级事件分为两种,一种是HTML标签内定义,一种是js中obj.事件=function这种定义。2级事件定义也叫事件流写法是:对象.addEventListener,事件流事件有冒泡型和捕捉型,默认为false冒泡,true为捕捉。0级原创 2021-06-07 16:34:52 · 170 阅读 · 0 评论 -
阻止浏览器默认行为和阻止事件的冒泡
js事件中有时候需要阻止浏览器的默认行为以及阻止事件冒泡来避免对定义事件产生影响,阻止默认行为写法为functionstopDefault(e){if(e&&e.preventDefault){e.preventDefault();//防止浏览器默认行为(W3C)}else{window.event.returnValue=false;//IE中阻止浏览器行为...原创 2021-06-07 14:52:13 · 245 阅读 · 0 评论 -
ifame父子页面调用方法属性以及获取元素
子页面调用父页面:调用方法属性:window.parent.fn() window.parent.aaa获取dom元素:$("#id,window.parent").html(),这是jquery写法,如果要用原生的dom写法可以举一反三父页面调用子页面调用方法属性:document.getElementById("contIframe").contentWindow.fn() document.getElementById("contIframe").contentWindo...原创 2021-06-04 11:57:31 · 167 阅读 · 0 评论 -
左右滚动菜单的实现
左右箭头按钮设置为绝对定位放在两边,中间菜单栏的宽度定义为100%减去左右按钮的长度,菜单栏设置为inline-block,里面的菜单都设置为inline-block,菜单栏设置overflow为hidden,设置不换行white-space:nowrap。这是dom的设置。js的实现就是获取滚动距离,点击按钮重新设置滚动距离document.getElementById(`tab`).scrollLeft,滚动距离只有上下两方向的,如果是竖直滚动就用scrollTop。移动策略自己定。...原创 2021-05-13 17:32:31 · 362 阅读 · 0 评论