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 · 2114 阅读 · 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 · 274 阅读 · 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 · 4893 阅读 · 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 · 1138 阅读 · 2 评论 -
深入理解JS防抖与节流
深入理解JS防抖与节流 - 唐吉sir - 博客园参考博客： "JS防抖和节流" ，感谢作者的用心分享 日常开发过程中，滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿，这时候我们更希望把多次计算合并成一次，只操作一个精确https://www.cnblogs.com/youma/p/10559331.html参考博客：JS防抖和节流，感谢作者的用心分享日常开发过程中，滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿，这时候我们更希望把多次计算合并成一次，只操作一个精确点，JS把这种.转载 2022-01-07 17:49:24 · 137 阅读 · 0 评论 -
js Proxy的原理详解
理模式的定义，代理是一个对象(proxy)用它来控制**目标对象的访问**。为此他要是先与目标对象相同的接口,但是他不同于装饰者模式，它对目标对象不进行任何修改，它的目的在于延缓"复杂"对象的初始化时间。这样可以在用到这个目标对象的时候再初始化他(对于单例来讲更是重要)。代理模式有两种分类：（1）普通代理（2）惰性代理# 第一，普通代理模式步骤一，接口检验文件的引用步骤二，目标类步骤三，普通代理步骤四，添加数据后，开始访问//定义一个静态方法来实现接口.原创 2021-12-10 15:09:48 · 1808 阅读 · 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 · 138 阅读 · 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 · 703 阅读 · 0 评论 -
localStorage的使用
# localstoragelocalStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库——注意：在IE8以上的IE版本才支持localStorage这个属性。localStorage属于永久性存储，如果存储内容多的话会消耗内存空间，会导致页面变卡。所有数据都转为string类型转换格式和其他数据类型转换为string一样哟。 // string var a = 'shelley'; localStorage.setIt.原创 2021-12-21 09:39:10 · 673 阅读 · 0 评论 -
JS解惑-Object中的key是有序的么？
当我们使用for/in遍历一个Object对象的时候，打印的结果是否按key的顺序打印出来呢？答案是：不一定。背景最近在做一个项目的时候，遇到这样一个需求：一个下拉列表中有3个固定选项，包括：-1：全部；0：正常；1：失效。于是，我就定义了一个对象，然后循环这个对象，把结果放到<option>上面： var obj = { '-1': '全部', '0' : '正常', '1' : '失效' }; 复制代码..转载 2021-12-20 14:13:21 · 838 阅读 · 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 · 570 阅读 · 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 · 415 阅读 · 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 · 145 阅读 · 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 · 204 阅读 · 0 评论 -
如何对HTMLCollection进行遍历
这里创建一个html和js文档作为示范。 比如我们要获取这两个p标签。 可以看出是一个HTMLCollection。 但却不是一个数组。 先转化为数组。 6 现在就可以进行数组方法的运用了。比如遍历。 ...转载 2021-08-11 16:58:07 · 11441 阅读 · 0 评论 -
fancybox 点击图片后跳转到页面顶部的 解决方法
$('.image').fancybox({ helpers: { overlay: { locked: false } }});$('.image').fancybox({ helpers: { overlay: { locked: false } }});转载 2021-08-03 16:14:25 · 309 阅读 · 0 评论 -
js正则表达式
\s\u7ea6：空格约匹配空格和一个约字/(.*)\[(.*)\]\s\u7ea6\[(.*)\]/178******17[4320221:新进线客户] 约[2021-07-12 10:57:32] 未接来电(.*)：匹配任意字符\[：匹配[原创 2021-07-12 15:05:48 · 77 阅读 · 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 · 254 阅读 · 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 · 759 阅读 · 0 评论 -
js 函数防抖（debounce）函数节流（throttle）
一、什么是函数节流（throttle）概念：限制一个函数在一定时间内只能执行一次。举个栗子，坐火车或地铁，过安检的时候，在一定时间（例如10秒）内，只允许一个乘客通过安检入口，以配合安检人员完成安检工作。上例中，每10秒内，仅允许一位乘客通过，分析可知，“函数节流”的要点在于，在一定时间之内，限制一个动作只执行一次。上图中绿色块表示触发一次事件，持续触发事件时，throttle会合并一定时间内的事件，并在该时间结束时真正去触发一次事件二、为什么需要函数节流 前端开发过程中...转载 2021-07-01 11:15:34 · 4371 阅读 · 1 评论 -
JS中的单引号和双引号
JS里面的单引号和双引号可以同时使用，但是要遵循一定的准则。最外面用了双引号了，那么里面就不能再用双引号了，因为引号是成双对的，浏览器读到一个双引号后，到第2个双引号时才算结束；同理，浏览器读到一个单引号后，必须要读到第二个单引号才算结束，不管是单引号还是双引号，里面都可以套相反的引号,但是不可以双引号里面套单引号，这个单引号再套双引号，这是不行的。如果在引号里面使用相同的引号，需要用 \ 转义。单引号转义为\'单引号转义为\"单引号和双引号之间的字符串可以相加...转载 2021-06-21 15:00:03 · 6356 阅读 · 0 评论 -
javascript解释器有哪些
1. V8 JavaScript engineChrome 中内置node.js 中内置2.TraceMonkey JavaScript engineFirefox 3.5中内置参考资料：英文维基百科中搜索关键词JavaScript engine。https://blog.youkuaiyun.com/qq_30638831/article/details/90552912JS各种引擎介绍http://www.oschina.net/project/tag/296/javascri...转载 2021-05-27 17:44:26 · 3283 阅读 · 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 · 470 阅读 · 0 评论 -
JavaScript异步编程
还记得一年前写过一篇关于JavaScript异步编程简述的文章，主要介绍了JavaScript的单线程特性与异步编程实现方式：回调函数，发布订阅模式，Promise对象三种，关于Promise介绍的比较简略，决定再详细总结一下，既是对上一篇文章的补充，也能以更深刻的方式分享自己关于异步编程的理解。前言如果你有志于成为一个优秀的前端工程师，或是想要深入学习JavaScript，异步编程是必不可少的一个知识点，这也是区分初级，中级或高级前端的依据之一。如果你对异步编程没有太清晰的概念，那么我建议你花点转载 2021-05-27 14:33:34 · 186 阅读 · 0 评论 -
JavaScript 中的堆栈调用
在介绍 JavaScript 之前，先介绍一下数据的类型基本类型 （按值访问） 包括：Number 、 String 、 Boolean、 Undefined、Null 引用类型(按引用访问)包括：Object、 Array 介绍一下堆和栈栈 (stack) ： 用来保存简单的数据字段 堆 (heap) :用来保存栈中简单数据字段对指针的引用基本类型、引用类型数据以及 堆栈的关系如下图：如上图所示，栈内存中关于 引用类型的数据的是通过指针(地址)来引用的，...转载 2021-05-27 09:25:51 · 731 阅读 · 0 评论 -
JavaScript 异步、栈、事件循环、任务队列
概览我们经常会听到引擎和runtime，它们的区别是什么呢？引擎：解释并编译代码，让它变成能交给机器运行的代码（runnable commands）。 runtime：就是运行环境，它提供一些对外接口供Js调用，以跟外界打交道，比如，浏览器环境、Node.js环境。不同的runtime，会提供不同的接口，比如，在 Node.js 环境中，我们可以通过require来引入模块；而在浏览器中，我们有window、 DOM。Js引擎是单线程的，如上图中，它负责维护任务队列，并通过 Ev...转载 2021-05-26 19:59:39 · 352 阅读 · 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 · 592 阅读 · 2 评论 -
javascript的堆栈原理
首先说明一下Javascript的堆栈概念堆&栈两者都是存放临时数据的地方。栈是先进后出的，就像一个桶，后进去的先出来，它下面本来有的东西要等其他出来之后才能出来。堆是在程序运行时，而不是在程序编译时，申请某个大小的内存空间。即动态分配内存，对其访问和对一般内存的访问没有区别。对于堆，我们可以随心所欲的进行增加变量和删除变量，不用遵循次序。栈区（stack） 由编译器自动分配释放 ，存放函数的参数值，局部变量的值等。堆区（heap） 一般由程序员分配释放，若程序员不释放，程序结束时.转载 2021-05-26 18:26:34 · 262 阅读 · 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 · 1184 阅读 · 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 · 3989 阅读 · 0 评论 -
js运算
<script> document.write(("ba"+ +"m" + "a").toLowerCase());</script>结果：banana！！！！注意两个+之间是空格原创 2021-05-15 15:11:14 · 85 阅读 · 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 · 541 阅读 · 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 · 102 阅读 · 0 评论 -
点击按钮，鼠标复制文本
//复制编号 $(document).on("click", ".copyCsBtn", function() { $("#csCodeText").select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 DialogUtils.success(msgCode.INFO, "复制成功"); });.原创 2021-05-06 15:01:12 · 181 阅读 · 0 评论 -
javascript
在Web标准中，JavaScript负责网页的行为，也就是页面的交互和一些动态效果。javascript是一门类C的语言，与C、C#，Java的语法类似，所以在讲解时我们就不全面去介绍javascript的语法了而是着重介绍它的不同之处。javascript的使用1、在页面中放置javascript脚本方法 将javascript脚本放置在<script>与</script>标签之间，script标签可以放置在页面任何地方，但通常我们会放置在页头或页脚中。 ...转载 2021-05-04 17:12:57 · 424 阅读 · 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 · 6792 阅读 · 0 评论 -
window.event对象详尽解析
event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。例子下面的例子检查鼠标是否在链接上单击，并且，如果shift键被按下，就取消链接的跳转。<HTML><HEAD><TITLE>Cancels Links</TI转载 2021-04-26 16:36:15 · 984 阅读 · 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 · 94 阅读 · 0 评论 -
Chrome - JavaScript调试技巧总结（浏览器调试JS）
Chrome是Google出品的一款非常优秀的浏览器，其内置了开发者工具（Windows系统中按下F12即可开启），可以让我们方便地对JavaScript代码进行调试。为方便大家学习和使用，本文我对Chrome的调试技巧做个系统的总结。 1 一、设置断点 有两种方法可以给代码添加断点方法1：在 Source 内容区设置（1）找到要调试的文件，然后在内容源代码左侧的代码标记行处点击，即可打上一个断点。（2）刷新浏览器，当页面...转载 2021-04-16 11:12:26 · 350 阅读 · 0 评论 -
前端必备javascript书籍测评【含红宝书和绿皮书】
https://juejin.cn/post/6877712145757896717转载 2021-04-10 19:00:11 · 271 阅读 · 0 评论