![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 58
shelleyHLX
这个作者很懒,什么都没留下…
展开
-
客户端js 读取 json 数据
采用 XMLHttpRequest 读取。1. new 初始化XMLHttpRequest2. open 设置请求方式,地址3. send 发起请求4.onload 请求成功,返回结果代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...原创 2022-03-15 15:51:48 · 2028 阅读 · 0 评论 -
浅谈javascript函数式编程
函数式编程,属于编程范式的一种1 函数是第一公民,可以返回值,也可以作为其他函数的参数//console是一个函数function con(v){ console.log(v)return v;}// execute 也是一个函数function execute(fn){ fn(1)}//将con函数作为参数传进execute函数execute(con) // 1function con(v) { console.log(v);}con(123);func.转载 2022-02-25 17:47:14 · 186 阅读 · 0 评论 -
ajv 错误
Cannot find module 'ajv/dist/compile/codegen'ajv 6.x可能只能用ajv-errors 1.01的"dependencies": { "-": "^0.0.1", "@vue/babel-plugin-jsx": "^1.1.1", "ajv": "^6.12.6", "ajv-errors": "^1.0.1", "ajv-i18n": "^4.2.0", "core-js": "^...原创 2022-02-07 14:47:30 · 3853 阅读 · 0 评论 -
ajv,json-schema 使用
官网:Getting started | Ajv JSON schema validatorThe fastest JSON schema Validator. Supports JSON Schema draft-04/06/07/2019-09/2020-12 and JSON Type Definition (RFC8927)https://ajv.js.org/guide/getting-started.html安装:npm install ajv -Sformat和自定义的使用运行原创 2022-02-07 14:56:29 · 1026 阅读 · 2 评论 -
深入理解JS防抖与节流
深入理解JS防抖与节流 - 唐吉sir - 博客园参考博客: "JS防抖和节流" ,感谢作者的用心分享 日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确https://www.cnblogs.com/youma/p/10559331.html参考博客:JS防抖和节流,感谢作者的用心分享日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确点,JS把这种.转载 2022-01-07 17:49:24 · 114 阅读 · 0 评论 -
js Proxy的原理详解
理模式的定义,代理是一个对象(proxy)用它来控制**目标对象的访问**。为此他要是先与目标对象相同的接口,但是他不同于装饰者模式,它对目标对象不进行任何修改,它的目的在于延缓"复杂"对象的初始化时间。这样可以在用到这个目标对象的时候再初始化他(对于单例来讲更是重要)。代理模式有两种分类:(1)普通代理(2)惰性代理# 第一,普通代理模式步骤一,接口检验文件的引用步骤二,目标类步骤三,普通代理步骤四,添加数据后,开始访问//定义一个静态方法来实现接口.原创 2021-12-10 15:09:48 · 1655 阅读 · 0 评论 -
JSON例子
JSON不能处理undefinedJSON.stringify任何数据转换成stringJSON.parsestring转换成原来类型的数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body></body><s.原创 2021-12-21 14:21:46 · 113 阅读 · 0 评论 -
JSON.parse Uncaught SyntaxError: Unexpected token u in JSON at position 0
VM97:1 Uncaught SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>) at index.html?_ijt=dg7ncu19ltifa4155hp8p5v8ke&_ij_reload=RELOAD_ON_SAVE:39 var e = undefined; var estr = JSON.stringify(e); consol...原创 2021-12-21 14:16:23 · 665 阅读 · 0 评论 -
localStorage的使用
# localstoragelocalStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库——注意:在IE8以上的IE版本才支持localStorage这个属性。localStorage属于永久性存储,如果存储内容多的话会消耗内存空间,会导致页面变卡。所有数据都转为string类型转换格式和其他数据类型转换为string一样哟。 // string var a = 'shelley'; localStorage.setIt.原创 2021-12-21 09:39:10 · 635 阅读 · 0 评论 -
JS解惑-Object中的key是有序的么?
当我们使用for/in遍历一个Object对象的时候,打印的结果是否按key的顺序打印出来呢?答案是:不一定。背景最近在做一个项目的时候,遇到这样一个需求:一个下拉列表中有3个固定选项,包括:-1:全部;0:正常;1:失效。于是,我就定义了一个对象,然后循环这个对象,把结果放到<option>上面: var obj = { '-1': '全部', '0' : '正常', '1' : '失效' }; 复制代码..转载 2021-12-20 14:13:21 · 711 阅读 · 0 评论 -
datepicker 原生js实现
点击选择,DatePicker组件开发教程-慕课网https://www.imooc.com/video/14518分为:ui,render,事件,日期的操作源码如下:index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-09-18 15:45:19 · 512 阅读 · 0 评论 -
js权威指南-增加class
<!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.0"> <title>Document&.原创 2021-08-12 17:53:50 · 382 阅读 · 0 评论 -
js权威指南-操作动画
<!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.0"> <title>Documen...原创 2021-08-12 17:35:00 · 117 阅读 · 0 评论 -
js权威指南-改变fontsize和background color
<!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.0"> <title>Document&l.原创 2021-08-12 17:25:07 · 178 阅读 · 0 评论 -
如何对HTMLCollection进行遍历
这里创建一个html和js文档作为示范。 比如我们要获取这两个p标签。 可以看出是一个HTMLCollection。 但却不是一个数组。 先转化为数组。 6 现在就可以进行数组方法的运用了。比如遍历。 ...转载 2021-08-11 16:58:07 · 10988 阅读 · 0 评论 -
fancybox 点击图片后跳转到页面顶部的 解决方法
$('.image').fancybox({ helpers: { overlay: { locked: false } }});$('.image').fancybox({ helpers: { overlay: { locked: false } }});转载 2021-08-03 16:14:25 · 261 阅读 · 0 评论 -
js正则表达式
\s\u7ea6:空格约匹配空格和一个约字/(.*)\[(.*)\]\s\u7ea6\[(.*)\]/178******17[4320221:新进线客户] 约[2021-07-12 10:57:32] 未接来电(.*):匹配任意字符\[:匹配[原创 2021-07-12 15:05:48 · 55 阅读 · 0 评论 -
js读取文件
代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>js如原创 2021-07-09 15:04:03 · 222 阅读 · 0 评论 -
浏览器的窗口高度,鼠标坐标,滚动距离,浏览器类型-js
一:网页可见区域宽高,不包括工具栏和滚动条(浏览器窗口可视区域大小)1.对于IE9+、chrome、firefox、Opera、Safari:window.innerHeight浏览器窗口的内部高度;window.innerWidth浏览器窗口的内部宽度;2.对于IE8.7.6.5:document.documentElement.clientHeight:表示HTML文档所在窗口的当前高度;document.documentElement.clientWidth:表示HTML文档所转载 2021-07-05 14:08:14 · 703 阅读 · 0 评论 -
js 函数防抖(debounce)函数节流(throttle)
一、什么是函数节流(throttle)概念:限制一个函数在一定时间内只能执行一次。举个栗子,坐火车或地铁,过安检的时候,在一定时间(例如10秒)内,只允许一个乘客通过安检入口,以配合安检人员完成安检工作。上例中,每10秒内,仅允许一位乘客通过,分析可知,“函数节流”的要点在于,在一定时间之内,限制一个动作只执行一次。上图中绿色块表示触发一次事件,持续触发事件时,throttle会合并一定时间内的事件,并在该时间结束时真正去触发一次事件二、为什么需要函数节流 前端开发过程中...转载 2021-07-01 11:15:34 · 4268 阅读 · 1 评论 -
JS中的单引号和双引号
JS里面的单引号和双引号可以同时使用,但是要遵循一定的准则。最外面用了双引号了,那么里面就不能再用双引号了,因为引号是成双对的,浏览器读到一个双引号后,到第2个双引号时才算结束;同理,浏览器读到一个单引号后,必须要读到第二个单引号才算结束,不管是单引号还是双引号,里面都可以套相反的引号,但是不可以双引号里面套单引号,这个单引号再套双引号,这是不行的。如果在引号里面使用相同的引号,需要用 \ 转义。单引号转义为\'单引号转义为\"单引号和双引号之间的字符串可以相加...转载 2021-06-21 15:00:03 · 6244 阅读 · 0 评论 -
javascript解释器有哪些
1. V8 JavaScript engineChrome 中内置node.js 中内置2.TraceMonkey JavaScript engineFirefox 3.5中内置参考资料:英文维基百科中搜索关键词JavaScript engine。https://blog.csdn.net/qq_30638831/article/details/90552912JS各种引擎介绍http://www.oschina.net/project/tag/296/javascri...转载 2021-05-27 17:44:26 · 2986 阅读 · 0 评论 -
JS理论:调用栈、事件循环、消息队列(也叫任务队和回调队列)、作业队列(微任务队列)
一:调用栈是个什么鬼东西,它具有栈的属性--后进先出先看一段简单的JS代码:const second = function(){console.log('hello there');}const first = function() {console.log('hi,first');second();}console.log('The Start');//直接输出就是直接进栈,执行完后 出栈first();//方法先进栈,执行完内部程序,最后出栈console.log('The转载 2021-05-27 14:35:59 · 373 阅读 · 0 评论 -
JavaScript异步编程
还记得一年前写过一篇关于JavaScript异步编程简述的文章,主要介绍了JavaScript的单线程特性与异步编程实现方式:回调函数,发布订阅模式,Promise对象三种,关于Promise介绍的比较简略,决定再详细总结一下,既是对上一篇文章的补充,也能以更深刻的方式分享自己关于异步编程的理解。前言如果你有志于成为一个优秀的前端工程师,或是想要深入学习JavaScript,异步编程是必不可少的一个知识点,这也是区分初级,中级或高级前端的依据之一。如果你对异步编程没有太清晰的概念,那么我建议你花点转载 2021-05-27 14:33:34 · 137 阅读 · 0 评论 -
JavaScript 中的堆栈调用
在介绍 JavaScript 之前,先介绍一下数据的类型基本类型 (按值访问) 包括:Number 、 String 、 Boolean、 Undefined、Null 引用类型(按引用访问)包括:Object、 Array 介绍一下堆和栈栈 (stack) : 用来保存简单的数据字段 堆 (heap) :用来保存栈中简单数据字段对指针的引用基本类型、引用类型数据以及 堆栈的关系如下图:如上图所示,栈内存中关于 引用类型的数据的是通过指针(地址)来引用的,...转载 2021-05-27 09:25:51 · 614 阅读 · 0 评论 -
JavaScript 异步、栈、事件循环、任务队列
概览我们经常会听到引擎和runtime,它们的区别是什么呢?引擎:解释并编译代码,让它变成能交给机器运行的代码(runnable commands)。 runtime:就是运行环境,它提供一些对外接口供Js调用,以跟外界打交道,比如,浏览器环境、Node.js环境。不同的runtime,会提供不同的接口,比如,在 Node.js 环境中,我们可以通过require来引入模块;而在浏览器中,我们有window、 DOM。Js引擎是单线程的,如上图中,它负责维护任务队列,并通过 Ev...转载 2021-05-26 19:59:39 · 326 阅读 · 1 评论 -
JS 堆栈事件调用(同步调用、异步调用);消息队列和作业队列
同步调用const bar = () => console.log('bar')const baz = () => console.log('baz')const foo = () => { console.log('foo') bar() baz()}foo()代码会打印出foo bar baz调用堆栈:异步调用const bar = () => console.log('bar')const baz = () =&g...转载 2021-05-26 18:32:51 · 554 阅读 · 2 评论 -
javascript的堆栈原理
首先说明一下Javascript的堆栈概念堆&栈两者都是存放临时数据的地方。栈是先进后出的,就像一个桶,后进去的先出来,它下面本来有的东西要等其他出来之后才能出来。堆是在程序运行时,而不是在程序编译时,申请某个大小的内存空间。即动态分配内存,对其访问和对一般内存的访问没有区别。对于堆,我们可以随心所欲的进行增加变量和删除变量,不用遵循次序。栈区(stack) 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等。堆区(heap) 一般由程序员分配释放,若程序员不释放,程序结束时.转载 2021-05-26 18:26:34 · 243 阅读 · 0 评论 -
<script> 中 type 用 text/ecmascript 与 text/javascript 有什么区别?
今天看到一段关于 SVG 实现拖拽的代码:<script type="text/ecmascript"> <![CDATA[ var selectedElement = 0; var currentX = 0; var currentY = 0; var currentMatrix = 0; function selectElement(evt) { selectedElement = evt.target; curr转载 2021-05-24 11:44:31 · 1102 阅读 · 0 评论 -
JSON 字符串 单引号双引号 处理
attr() 方法设置或返回被选元素的属性值。//jquery修改id名:<div id="top"></div>$("#qipa250").attr('id','newQipa250');//之后变成:<div id="newQipa250"></div>//jquery修改class名:<div class="top"></div>$(".qipa250").attr('class','newQipa原创 2021-05-17 13:58:35 · 3628 阅读 · 0 评论 -
js运算
<script> document.write(("ba"+ +"m" + "a").toLowerCase());</script>结果:banana!!!!注意两个+之间是空格原创 2021-05-15 15:11:14 · 65 阅读 · 0 评论 -
58种网页常用小技巧(javascript)
1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键<table border oncontextmenu=return(false)><td>no</table> 可用于Table2. <body onselectstart="return false"> 取消选取、防止复制3. onpaste="return false" 不准粘贴4. oncopy="return false转载 2021-05-12 19:42:18 · 440 阅读 · 0 评论 -
计时器
https://scotch-io.github.io/javascript-starter-course/12-stopwatch.html欣赏一下别人的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Getting Started with JavaScript</title> <link rel="sty原创 2021-05-07 18:17:19 · 69 阅读 · 0 评论 -
点击按钮,鼠标复制文本
//复制编号 $(document).on("click", ".copyCsBtn", function() { $("#csCodeText").select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 DialogUtils.success(msgCode.INFO, "复制成功"); });.原创 2021-05-06 15:01:12 · 144 阅读 · 0 评论 -
javascript
在Web标准中,JavaScript负责网页的行为,也就是页面的交互和一些动态效果。javascript是一门类C的语言,与C、C#,Java的语法类似,所以在讲解时我们就不全面去介绍javascript的语法了而是着重介绍它的不同之处。javascript的使用1、在页面中放置javascript脚本方法 将javascript脚本放置在<script>与</script>标签之间,script标签可以放置在页面任何地方,但通常我们会放置在页头或页脚中。 ...转载 2021-05-04 17:12:57 · 385 阅读 · 0 评论 -
复选框(checkbox)、多选框
1、需求分析可同时选中多个选项,实现全选、全不选、反选等功能。2、技术分析基础的HTML、CSS、JavaScript。3、详细分析3.1 HTML部分图示是一个列表加底部一段文字说明,列表包含三个部分,整体是一个多选列表,上部是总的选项,下面是具体选项,因此该列表是一个自定义列表:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...转载 2021-04-28 17:30:34 · 6620 阅读 · 0 评论 -
window.event对象详尽解析
event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。例子下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转。<HTML><HEAD><TITLE>Cancels Links</TI转载 2021-04-26 16:36:15 · 944 阅读 · 0 评论 -
javascript 里的 string 的扩展函数使用
/** * 在字符串左边补齐指定数量的字符 * * @param c * 指定的字符 * @param count * 补齐的次数 使用方法: var str="999"; str=str.leftPad("0",3); str将输出 "000999" * @returns */String.prototype.leftPad = function(c, count) { if (!isNaN(count)) { ...原创 2021-04-22 18:58:28 · 76 阅读 · 0 评论 -
Chrome - JavaScript调试技巧总结(浏览器调试JS)
Chrome是Google出品的一款非常优秀的浏览器,其内置了开发者工具(Windows系统中按下F12即可开启),可以让我们方便地对JavaScript代码进行调试。为方便大家学习和使用,本文我对Chrome的调试技巧做个系统的总结。 1 一、设置断点 有两种方法可以给代码添加断点方法1:在 Source 内容区设置(1)找到要调试的文件,然后在内容源代码左侧的代码标记行处点击,即可打上一个断点。(2)刷新浏览器,当页面...转载 2021-04-16 11:12:26 · 293 阅读 · 0 评论 -
前端必备javascript书籍测评【含红宝书和绿皮书】
https://juejin.cn/post/6877712145757896717转载 2021-04-10 19:00:11 · 232 阅读 · 0 评论