![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS
文章平均质量分 54
大名张无忌
前端开发,技术栈涉及:Vue、React、小程序,交流可以私信/邮件:2285546178@qq.com
展开
-
【无障碍】自动朗读的弹窗和浮层实现
使用Aria-modal属性在弹窗div上增加属性:<div role="dialog" aria-modal="true" aria-label="xx对话框" >弹窗内容</div>其他效果:用户无法访问到div之外的元素几乎所有的android都不支持这里按理说无需加tabindex属性,但实际实验中发现无tabindex不能朗读,可以加上试试弹窗div加上tabindex属性后,内部需要聚焦的第一个元素也要加上tabindex属性aria-labell原创 2021-11-19 19:09:27 · 3689 阅读 · 0 评论 -
浏览记录-history
这里写自定义目录标题PushHistoryPushHistorylocation.replacelocation.href =History.pushState:向当前浏览器会话的历史堆栈中添加一个状态(state)功能与location.href =基本相同区别:(1)请注意,浏览器不会在调用 pushState() 后尝试加载此 URL,但它可能会稍后尝试加载 URL,例如在用户重新启动浏览器之后。window.location.href = "url"将浏览器导航到新位置,因此原创 2021-11-19 18:13:13 · 447 阅读 · 0 评论 -
模块化规范类型——很火的commonjs和Es Module
模块化的出现为了解决的问题——相对于script标签引入的js文件变量污染问题,每个文件都是独立的作用域,所以不存在变量污染——js文件作用域都是顶层,这会造成变量污染代码维护问题,一个文件里代码非常清晰文件依赖问题,一个文件里可以清楚的看到依赖了那些其它文件模块化的规范commonjsmodule.exports导出变量及函数,也可以导出任意类型的值,require语法导入。exports导出的值是值的拷贝,用解构拿到单个值支持动态导入,代码发生在运行时指顶层的this指向这个模块本身原创 2021-08-21 18:43:38 · 378 阅读 · 0 评论 -
eval的使用—就是别用
with 也不让用了呢eval 函数会在当前作用域中执行一段 JavaScript 代码字符串。在eval()中创建的任何变量或函数都不会被提升,因为在解析代码的时候,它们被包含在一个字符串中;它们只在eval()执行的时候创建。用途:通过eval()执行的代码包含在该次调用的执行环境中,因此被执行的代码具有与该执行环境相同的作用域链。间接用eval的方式:window.eval()或者(0,eavl)()逗号操作符总会返回表达式中的最后一项var foo = 1;function t.原创 2021-08-14 21:15:05 · 401 阅读 · 0 评论 -
JS 沙箱隔离简单实现
随着应用架构复杂,微前端方案的出现,js运行环境沙箱在浏览器中的需求越来越多需要js沙箱的场景多个微前端应用中,变量冲突执行第三方js:当你有必要执行第三方js的时候,而这份js文件又不一定可信的时候需要实现的功能一个独立的上下文作用域,其中的代码执行不会影响到其他的运行环境。需要支持多个沙箱环境存在,每个沙箱需要有加载、卸载、再次恢复的能力,其对应着微应用的运行生命周期。实现过程1、核心是使用proxy对象创建window代理,并将需要被隔离起来的代码的执行作用域绑定到proxy对.原创 2021-08-14 21:12:40 · 1848 阅读 · 1 评论 -
event loop
JavaScript是单线程,非阻塞的JS执行过程中,遇到一些事件(定时器、文件读取之类的),执行需要等很久,一直等着就会造成阻塞。所有JS有一套机制,即event loop,用来确定执行顺序,防止阻塞。浏览器中的event loop宏任务:script(整体代码)、setTimeout()、setInterval()、postMessage、I/O、UI交互事件微任务:new Promise().then(回调)、MutationObserver(html5 新特性)穿插一下任务执行完是否原创 2020-12-13 10:16:16 · 64 阅读 · 0 评论 -
《你不知道的JavaScript—上卷》
两章,一:作用域和闭包,二:this和对象原型。一:作用域和闭包1.1作用域js引擎执行代码的步骤——编译:词法分析,语法分析,代码生成工作原理:js引擎:负责整个程序的编译及执行过程编译器:负责语法分析及代码生成作用域:收集并维护由所有变量(声明的标识符)组成的一系列查询,并实施一套很严格的规则,确定当前执行的代码对变量的访问权限赋值操作的过程:编译器在当前作用域声明一个变量(如果之前没有),运行时引擎在当前作用域查找该变量,找到后赋值。编译器里面:LHS查询:赋值操作的目标是谁.原创 2020-12-09 23:38:34 · 320 阅读 · 0 评论 -
#再读DOM# (1)DOM 事件模型
- 概念事件:事件是用户或者浏览器自己执行的某种动作,是文档或者浏览器发生的一些交互瞬间事件流:当一个事件被触发时,一个event对象将被创建并顺序的传递给事件监听者们。事件传递的顺序称为事件流。事件处理程序:响应事件的函数。如click是事件名称,加上"on"开头,事件处理程序是onclick事件在子元素和父元素之间的传播分为3个阶段:(1)捕获阶段:事件从window对象自上而下向目标节点传播的阶段;(2)目标阶段:真正的目标节点正在处理事件的阶段;(3)冒泡阶段:事件从目标节点自下而上向win原创 2020-10-04 21:03:19 · 248 阅读 · 0 评论 -
#再读JS# (6)jQuery设计思想
jQuery的基本设计思想和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。- 选择网页元素// CSS选择器 $(document) //选择整个文档对象 $('#myId') //选择ID为myId的网页元素 $('div.myClass') // 选择class为myClass的div元素 $('input[name=first]') // 选择name属性等于first的input元素 // 特定表达式 $('a:first') //选择网页中第一个a元原创 2020-10-04 18:19:40 · 83 阅读 · 0 评论 -
#再读JS# (5)JS世界
构造函数(Function、Array、Object)的prototype和__proto__如何方便的区分开:首先理解原型,__proto__用于存放共有属性的对象的地址,等同于其构造函数的prototype的地址。我给自己总结的规律是:prototype是给孩子的,因为孩子可以用自己的__proto__访问到,所以需要把共有属性的地址放里面。而__proto__是给自己的,存自己的共有属性,所以存放创建自己的对象的属性的地址。那么,如构造函数Object,prototype存放的是Obje.原创 2020-09-28 22:30:23 · 83 阅读 · 0 评论 -
#再读JS# (4)位运算符
使用^来交换a、b的值:let a=5;let b=8;a=a^b;b=b^a;a=a^b;基本规则:二进制上,两个相同则为0,否则为1。(类似数学乘法负负得正,0位正,1为负)为了理解它,我们先假装:a和b都只有一位数,a^b的值存在c里面a正b正,则c正,c乘a为正,c乘b为正;a负b负,则c正,c乘a为负,c乘b为负;a正b负,则c负,c乘a为负,c乘b为正;a负b正,则c负,c乘a为正,c乘b为负。每一位都依照上面规则计算,则实现了a与b每一位的交换。而如果,先把c的.原创 2020-09-28 12:44:37 · 76 阅读 · 0 评论 -
#再读JS# (3)for循环打印6个6——JS 的运行机制
js函数执行顺序js是单线程的,一条条执行队列中的任务。js从上往下解析的时候,碰到宏任务、微任务、异步任务。。。。异步任务先放在一边,等到宏任务做完了再去。如下代码,等到去执行setTimeout时,i已经变成6let i = 0for(i = 0; i<6; i++){ setTimeout(()=>{ console.log(i) },0)}let配合使用产生神效配合let使用可实现常规想法,可打印出012345。说是ES6为了迎合大多数人的想法.原创 2020-09-27 12:35:43 · 435 阅读 · 0 评论 -
#再读JS# (2)对象基本用法
声明对象的两种语法第二种才是正规的,第一种是大家的简化版let a={}; //以下都以a为对象来阐述let a=new Object();删除对象的属性delete a.属性名 //只有这样才能删除a.属性名=undefined //只是将a的这个属性置为undefined,实际上还存在查看对象的属性Object.keys(a) //数组形式查看属性值Object.values(a) //数组形式查看属性名Object.entries(a)..原创 2020-09-24 23:56:57 · 93 阅读 · 0 评论 -
#再读JS# (1)基本语法
以下为读完阮一峰的《JavaScript 的基本语法》总结的易被忽略的知识点:语句与表达式语句:JavaScript 程序的执行单位为行,一行就是一个语句。var a=1+2;表达式:指一个为了得到返回值的计算式。表达式的值为函数的返回值。1+2 //值为3console.log //值为console.logconsole.log(3) //值为undefined语句和表达式的区别在于,前者主要为了进行某种操作,一般情况下不需要返回值;后者则是为了得到返回值,一定会返回原创 2020-09-23 23:54:06 · 341 阅读 · 0 评论 -
phpStudy软件配置个人电脑成为Web服务器(内含Apache 配置4h失败惨烈经历)
phpStudy安装连接,傻瓜式服务器软件,太方便了步骤:在网站(https://www.xp.cn/download.html)中下载对应电脑版本,解压到安装目录(安装目录中不允许有中文字/符号);点击exe文件进行安装;安装成功后点击启用Apache和MySQL(会弹出防火墙警告记得点击“允许”);检测安装成功与否:在浏览器中输入自己电脑的ip地址(windows+R...原创 2020-04-12 00:02:36 · 1192 阅读 · 1 评论 -
# localStorage存储TODOLIST
1、html<!doctype html><html lang="en" xmlns="http://www.w3.org/1999/html"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...原创 2020-04-10 23:20:49 · 194 阅读 · 0 评论 -
# 事件
1、模仿微博评论和删除评论操作<style> body { margin: 0; height: 1800px; } div { width: 300px; height: 200px; background-color: pink; } input { ...原创 2020-04-06 15:16:49 · 82 阅读 · 0 评论 -
# 位置操作
侧边栏点击页面滚动到相应位置<style> body { margin: 0; height: 1800px; } .header { width: 1100px; height: 300px; background-color: skyblue; } .ban...原创 2020-04-04 23:59:39 · 110 阅读 · 0 评论 -
# 属性操作
1、购物车全选按钮* { margin: 0 auto; padding: 0 auto; padding-inline-start: 0px; } p { line-height: 30px; margin-left: 30px; }</style><body&g...原创 2020-04-02 22:15:19 · 86 阅读 · 0 评论 -
# 选择器
1、下拉菜单效果<style> * { margin: 0 auto; padding: 0 auto; padding-inline-start: 0; } li { list-style: none; text-align: center; } .nav &...原创 2020-03-29 18:35:53 · 300 阅读 · 0 评论 -
# 本地存储
1、记住用户名<body><input type="text" id="uname"><input type="checkbox" id="remember">记住用户名</body><script> var uname = document.querySelector('#uname'); var remem ...原创 2020-03-29 15:54:27 · 79 阅读 · 0 评论 -
# 动画函数
1、模仿右边栏左滑右滑减速效果<style> .haha { position: fixed; top: 300px; right: 0; width: 50px; height: 25px; text-align: center; } .heihei { ...原创 2020-03-28 21:21:01 · 86 阅读 · 0 评论 -
# 高级事件 IE678浏览器兼容性问题及解决办法汇总
如下方法IE678均不支持 (括号中为IE678支持的方法)1、addEventListner 绑定/移除事件(attachEvent)2、function(event){} 输出event事件对象(window.event)function (event) { event = event || window.event; console.log(event);...原创 2020-03-18 22:56:00 · 738 阅读 · 0 评论 -
# Scroll 系列
1、模仿淘宝右侧固定侧边栏<style> body { margin: 0; height: 1800px; } .header { width: 1100px; height: 300px; background-color: skyblue; } .banner...原创 2020-03-27 23:37:05 · 96 阅读 · 0 评论 -
# offset 系列属性
1、模仿登录界面拖动登录框<style> * { margin: 0 auto; padding: 0 auto; } div { position: absolute; width: 100%; height: 780px; text-align: center;...原创 2020-03-27 00:09:42 · 188 阅读 · 0 评论 -
#常用技巧
1、PC上模仿h5界面的页面跳转if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {wi...原创 2020-03-25 21:34:06 · 76 阅读 · 0 评论 -
# location属性 跳转页面显示输入文字
1、在现在文档中写表单,提交用户输入信息<form action="index.html"> 输入用户名:<input type="text" name="uname"> <input type="submit" value="登录"></form>2、在提交的index页面中获取并展示用户输入信息<style>...原创 2020-03-25 21:09:42 · 155 阅读 · 0 评论 -
# 定时器 setTimeout和setInterval
//模拟页面广告几秒后自动关闭<body><img src="images/phone.png" alt=""><script> var pic = document.querySelector('img'); var callback = setTimeout(function () { pic.style.display...原创 2020-03-22 16:47:16 · 113 阅读 · 0 评论 -
# 高级事件 模拟快递单号输入时放大字体显示
keyup时,将input中的值给div,div的font-size较大<style> input { width: 200px; } div { position: relative; display: none; width: 180px; height: 50px; ...原创 2020-03-22 11:54:20 · 250 阅读 · 0 评论 -
# 高级事件 页面中键盘点击s光标定到输入框中
核心思想:如果键盘事件的keycode==s,focus()<style></style><body><input type="text" value=""><button>搜索</button><script> var input = document.querySelector('input...原创 2020-03-22 10:58:34 · 97 阅读 · 0 评论 -
JS模拟数据入库及删除
自己准备了三个数据入库的<style> tr { width: 400px; } th { width: 80px; background-color: pink; margin: 10px; } td { width: 80px; backgr...原创 2020-03-15 23:52:52 · 175 阅读 · 0 评论