javascript
文章平均质量分 69
一月清辉
这个作者很懒,什么都没留下…
展开
-
构造函数和class的区别
也就是不能先调用class生成实例,再定义class类,但是构造函数可以。class必须使用new执行,但是构造函数没有new也可以执行。在es5中构造函数其实就是在定义一个类,可以实例化对象,es6中class其实是构造函数的语法糖。在class内部和class的方法内部,class中的extends方式的继承,,但是构造函数可以不采用严格模式。class 内部无法重写类名。,不能使用 new 来调用。,也就是不能被遍历。转载 2023-03-06 14:49:56 · 514 阅读 · 0 评论 -
什么是尾调用,使用尾调用有什么好处?
尾调用就是在函数执行的最后一步调用另一个函数。转载 2023-01-31 16:57:41 · 613 阅读 · 0 评论 -
WeakMap和WeakSet
文章目录WeakMapWeakSetWeakMapWeakMap 和 Map 的第一个不同点就是,WeakMap 的键必须是对象,不能是原始值。let john = { name: "John" };let weakMap = new WeakMap();weakMap.set(john, "...");john = null; // 覆盖引用// john 被从内存删除了WeakMap 不支持迭代以及 keys(),values() 和 entries() 方法。所以没有办法获取 W转载 2022-03-22 14:39:11 · 317 阅读 · 0 评论 -
观察者模式与发布订阅模式
1、观察者模式1.1、定义观察者模式,即观察者监听被观察者的变化,被观察者发生改变时,通知所有的观察者。1.2、代码实现// 观察者class Observer { constructor() { } update(val) { }}// 观察者列表class ObserverList { constructor() { this.observerList = [] } add(observer) {转载 2022-02-21 23:02:41 · 350 阅读 · 0 评论 -
Web Worker 的初步学习
1. 概述众所周知,浏览器在执行js脚本时,页面的状态是不可响应的,直到脚本执行完成后, 页面才变成可响应。Web Workers 使得一个Web应用程序,可以在与主执行线程分离的后台线程中运行一个脚本操作。这样做的好处是可以在一个单独的线程中执行费时的处理任务,从而不阻塞主线程的运行。它的作用就是给JS创造多线程运行环境,允许主线程创建worker线程,分配任务给后者,主线程运行的同时worker线程也在运行,相互不干扰,在worker线程运行结束后把结果返回给主线程。这样做的好处是主线程可以把计算转载 2022-01-08 17:29:33 · 199 阅读 · 0 评论 -
http请求头、响应头 以及状态码详解
文章目录一、http协议的简单了解二、Http的请求报文、响应报文1、请求报文1.1、**请求行**1.2、 **请求头部**1.3、**空行**1.4、**请求数据**2、请求报文2.1、**响应行**2.2、 **响应头**2.3、**空行**2.4、**响应体**三、常见的请求状态码1、**xhr.status的值及解释:**2、各状态的详细解释四、post和get的异同点1、**相同点:**2、**不同点:**五、其它1、什么是持久连接2、关于Http 2.0的了解一、http协议的简单了解1、原创 2022-01-06 22:39:52 · 3329 阅读 · 0 评论 -
Babel、AST 原理
1. 什么是babelBabel 是一个 JavaScript 编译器。他把最新版的javascript编译成当下可以执行的版本,简言之,利用babel就可以让我们在当前的项目中随意的使用这些新最新的es6,甚至es7的语法。2、babel 是如何工作的首先得要先了解一个概念:抽象语法树(Abstract Syntax Tree, AST),Babel 本质上就是在操作 AST 来完成代码的转译。2.1、AST是什么AST:即用一个树型结构的对象来描述js代码分析 AST:https://ast转载 2021-11-30 20:52:23 · 654 阅读 · 0 评论 -
JavaScript全排列的六种算法 具体实现
算法一:交换(递归)/* 全排列(递归交换)算法 1、将第一个位置分别放置各个不同的元素; 2、对剩余的位置进行全排列(递归); 3、递归出口为只对一个元素进行全排列。 */ function swap(arr,i,j) { if(i!=j) { var temp=arr[i]; arr[i]=arr[j]; arr[j]=temp; } } var count=0; function s转载 2021-11-28 10:33:26 · 1318 阅读 · 0 评论 -
mouseover 和 mouseenter 的区别
mouseover:当鼠标移入元素或其子元素都会触发事件,所以有一个重复触发,冒泡的过 程。对应的移除事件是 mouseout 。mouseenter:当鼠标移除元素本身(不包含元素的子元素)会触发事件,也就是不会冒泡,对应的移除事件是 mouseleave<div style="background:gray;" onmouseover="mouse('over')" onmouseout="mouse('out')" onmouseenter="mous.原创 2021-11-27 16:31:26 · 766 阅读 · 0 评论 -
postman 如何测试websocket
如果左侧没有New按钮,请更新postman版本原创 2021-11-18 17:00:02 · 2890 阅读 · 0 评论 -
HTML、CSS、JS开发规范
(一)、HTML规范1、img标签要写alt属性如果图片显示不出来,就直接alt提示的内容。<img src="company-logo.svg" /> // ✗ avoid<img src="company-logo.svg" alt="ABC CompanyLogo"/> // ✓ ok 2、自定义属性要以data-开头自己添加的非标准的属性要以data-开头,否则w3c会认为是不规范的<div count="5"></div>原创 2021-10-28 11:17:24 · 467 阅读 · 0 评论 -
事件绑定onclick 与事件监听addEventListener 的区别
事件绑定与事件监听的区别事件绑定:同一个对象,进行多次事件绑定,则后绑定的事件会覆盖之前绑定的事件,总之只能执行最后一个事件. -------- onclick事件监听:同一个对象,进行多次事件监听,都会执行 -------addEventListener示例如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </he原创 2021-07-08 09:26:31 · 887 阅读 · 0 评论 -
服务器IIS中所有网站打开后,自动跳转到//index.html
步骤:1、打开默认文档2、有index.html的话,把其上移到第一位,没有的话,添加后再把其添加到第一位原创 2021-06-16 15:28:51 · 1741 阅读 · 1 评论 -
JavaScript中的事件模型如何理解
一、事件与事件流1、什么是事件javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性, 常见的有加载事件、鼠标事件、自定义事件等2、什么是事件流由于DOM是一个树结构,如果在父子节点绑定事件时候,当触发子节点的时候,就存在一个顺序问题,这就涉及到了事件流的概念。事件流都会经历三个阶段:事件捕获阶段(capture phase)处于目标阶段(target phase)事件冒泡阶段(bubbling phase)事件冒泡是一种从下往上.转载 2021-02-25 12:08:00 · 216 阅读 · 0 评论 -
JavaScript中执行上下文和执行栈是什么?
一、执行上下文1、是什么简单的来说,执行上下文是对Javascript代码执行环境的一种抽象概念,只要有Javascript代码运行,那么它就一定是运行在执行上下文中。2、执行上下文的类型分为三种全局执行上下文:只有一个,浏览器中的全局对象就是 window对象,this 指向这个全局对象函数执行上下文:存在无数个,只有在函数被调用的时候才会被创建,每次调用函数都会创建一个新的执行上下文Eval 函数执行上下文:指的是运行在 eval 函数中的代码,很少用而且不建议使用3、例子紫色框.转载 2021-02-25 10:26:48 · 754 阅读 · 0 评论 -
复制内容到剪切板
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p><span ondblclick="copy(this)" style="" >operations@rccbermuda.bm</span></p> </body&g转载 2021-02-24 15:50:31 · 73 阅读 · 0 评论 -
说说JavaScript中的数据类型
前言在JavaScript中,我们可以分成两种类型基本类型引用类型基本类型基本类型主要为以下6种:Number、String、Boolean、Undefined、null、symbol注意点如下:1、Number在数值类型中,存在一个特殊数值NaN,意为“不是数值”,用于表示本来要返回数值的操作失败了(而不是抛出错误)console.log(0/0); // NaNconsole.log(-0/+0); // NaN2、String字符串可以使用双引号(")、单引号(’)或.转载 2021-02-03 18:58:44 · 131 阅读 · 0 评论 -
JS操作小技巧
1、随机生成字母和数组的组合Math.random().toString(36).substr(2);2、加号(+)的那些你不知道的功能获取当前的时间戳,相当于new Date().getTime():+new Date();// 相等于new Date().getTime()3、判断变量是否是数组1.[] instanceof Array2.[].constructor === Array3.Array.isArray([]) 4.Object.prototype.toStri原创 2021-01-29 17:37:17 · 69 阅读 · 0 评论 -
cookie和token安全上的区别
token为什么就比cookie安全cookie是什么:登陆后,后端生成一个sessionid放在cookie中返回给客户端,并且服务端一直记录着这个sessionid,客户端以后每次请求都会自动带上这个sessionid,服务端通过这个sessionid来验证身份之类的操作。所以别人拿到了cookie等于拿到了sessionid,就可以完全替代你。token是什么:登陆后,后端会返回一个token给客户端,客户端将这个token存储起来,然后每次客户端请求都需要开发者手动将token放在h转载 2021-01-01 21:10:41 · 2823 阅读 · 3 评论 -
js 对中文字符的 解码 与 编码
1、 decodeURIComponent 与 encodeURIComponent1.1、decodeURIComponent 解码字符功能: 解码由 encodeURIComponent 方法或者其它类似方法编码的标识符,一般用于解码标识符为中文。Demo:let encodeStr = encodeURIComponent('中文')console.log(encodeStr) // "%E4%B8%AD%E6%96%87"let decodeStr = decodeU转载 2020-12-16 11:03:05 · 17096 阅读 · 0 评论 -
setInterval、setTimeout给定时/延时执行的函数添加参数
1、语法var intervalID = setInterval(func, delay, [arg1, arg2, ...]);var timeoutID = setTimeout(func [, delay, arg1, arg2, ...]);func : 要重复调用的函数。delay:延迟的毫秒数 (定时器必传,延时器默认0)arg1、arg2、… :将被传递给func指定函数的附加参数2、定时器、延时器传参以下以延时器为例:2.1、根据定时器、延时器语法,传入第三个以及之后的参转载 2020-12-14 16:19:59 · 722 阅读 · 0 评论 -
JS实现二叉树(广度、深度遍历)
//二叉树方法function BinaryTree(){ let Node=function(key){ this.key=key; this.left=null; this.right=null; } let root=null; let insertNode =(node,newNode)=>{ if(newNode.key < node.key){ if(node.left===null){ node.left = newNode; }els转载 2020-12-14 19:31:02 · 1238 阅读 · 0 评论 -
function 的 length 属性
功能:返回一个函数形参的个数function test1(a,b,c) {}console.log(test1.length); // 3 function test2(a,b,c,d) {}console.log(test2.length); // 4如果函数内部是通过 arguments 调用参数,而没有实际定义参数的话,length 只会的得到 0。function test() { console.log( arguments );}console.log(test.length)翻译 2020-12-11 20:16:45 · 783 阅读 · 0 评论 -
快速解析 get 参数的方法
快速解析 get 参数的方法通过 replace 方法获取 url 中的参数键值对,可以快速解析 get 参数。const q = {};location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);console.log(q);k是第一个括号匹配的字符,v是第二个括号匹配的字符。String.prototype.replace的参考链接 :https://developer.mozilla.org/zh-转载 2020-12-04 18:34:26 · 1345 阅读 · 0 评论 -
contenteditable属性将标签变为可编辑状态,可用于在线编辑修改文本
1、概述html 中大部分标签都是不可以编辑的,但是添加了contenteditable属性之后,标签会变成可编辑状态。同时可以触发input事件 输入内容变化时触发focus事件 获取焦点时触发blur事件 失去焦点时触发2、示例<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style>原创 2020-12-04 18:01:38 · 1641 阅读 · 1 评论 -
字符串String常用方法
1、str.substring(indexStart [,indexEnd])功能: 返回给定字符串的指定部分的新字符串(包含indexStart,但不包含indexEnd)注意事项:如果 indexStart 等于 indexEnd,substring 返回一个空字符串。如果省略 indexEnd,substring 提取字符一直到字符串末尾。如果任一参数小于 0 或为 NaN,则被当作 0。如果任一参数大于 stringName.length,则被当作 stringName.len转载 2020-12-02 17:35:54 · 248 阅读 · 0 评论 -
页面加载完成事件 - onload,四种写法
在js和jquery使用中,经常使用到页面加载完成后执行某一方法。通过整理,大概是五种方式:js动态加载外部插件后,导致页面加载顺序不是按照代码的书写顺序执行,引起报错,这时候就可以用监听页面加载完成事件来指定代码的加载顺序1、JQuery方法方法$(function){}$(document).ready(function(){})说明$(function){}是$(document).ready(function(){})的简写方式。两个都是document加载完成后就执行回调转载 2020-11-17 17:04:37 · 15994 阅读 · 0 评论 -
JSONP的使用
1、原生JSONP写法 /* * url: jsonp地址 * callback: 返回接收的函数名(String) */ function mockJsonp(url,callback){ var JSONP=document.createElement("script"); JSONP.type="text/javascript"; JSONP.src=`${url}?callback=${callback}`; document.getElementsByTagNam原创 2020-11-17 16:21:44 · 2042 阅读 · 0 评论 -
input、textarea 输入框------光标操作、指定光标位置插入内容
1、光标处插入指定内容/** obj: input/textarea输入框的dom对象* str: 光标处要插入的内容*/function insertText(obj,str) { if (document.selection) { var sel = document.selection.createRange(); sel.text = str; } else if (typeof obj.selectionStart === 'number'转载 2020-11-17 10:41:27 · 4793 阅读 · 0 评论 -
前端安全,常见的攻击类型以及如何防御
CSRF攻击1. 什么是CSRF攻击CSRF即Cross-site request forgery(跨站请求伪造),是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。假如黑客在自己的站点上放置了其他网站的外链,例如www.weibo.com/api,默认情况下,浏览器会带着weibo.com的cookie访问这个网址,如果用户已登录过该网站且网站没有对CSRF攻击进行防御,那么服务器就会认为是用户本人在调用此接口并执行相关操作,致使账号被劫持。2. 如何防御CSRF攻击1.验转载 2020-10-29 20:05:23 · 1844 阅读 · 0 评论 -
jQuery最核心的3个问题
1. jQuery整体理解1、jQuery是一个功能强大的函数库, 封装了以下功能(1)、DOM操作(2)、DOM事件处理(3)、ajax请求(4)、各种小的工具函数2、核心语法(1)、jQuery核心函数(2)、jQuery核心对象3、特点:(1)、链式调用(2)、读写合一(3)、更好的浏览器兼容性2. jQuery核心函数1、是什么?就是jquery库向外暴露的$和jQuery, 一般都用$2、它有2种使用方式(1) 作为函数使用(2) 作为对象使用3、$作为函数转载 2020-10-26 19:28:49 · 142 阅读 · 0 评论 -
ajax请求
1、原生 AJAX 请求处理创建 XMLHttpRequest 对象,也就是创建一个异步调用对象创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL及验证信息设置响应 HTTP 请求状态变化的函数发送HTTP 请求获取异步调用返回的数据使用 JavaScript 和 DOM 实现局部刷新2、同步请求和异步请求的区别同步:浏览器访问服务器请求,用户等待请求完,页面刷新,新内容出现,用户看到新内容,进行下一步操作异步:浏览器访问服务器请求,用户正转载 2020-10-24 20:24:32 · 99 阅读 · 0 评论 -
高德地图的轨迹巡航
1、index.html中引入<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>2、vue组件实现如下<template> <div id="map_container"> <div id="map_test"></div> <div id="btn_pos"> <button原创 2020-10-23 18:08:08 · 2204 阅读 · 1 评论 -
Vue引入高德地图
方法一、直接引入法1.第一步. script引入的方式,引入到index.html中高德地图AMap,一般只需引入这个即可<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己申请的key"> </script>高德地图Loca,用于数据3D可视化作品绘制<script src="https://webapi.amap.com/loca?key=您转载 2020-10-23 15:58:44 · 7279 阅读 · 1 评论 -
CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)
1、是什么pointer-events 直译为指针事件,该属性指定在什么情况下某个DOM可以成为鼠标事件的 target。简而言之,就是允许/禁止DOM的鼠标事件(click事件、hover事件、mouse事件等鼠标事件)2、具体属性分析用法分析:pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | allauto ---转载 2020-10-23 11:50:19 · 19294 阅读 · 0 评论 -
window.requestAnimationFrame()的初步学习
1、说明window.requestAnimationFrame(func) 这个方法接受一个函数为参数,该函数会在浏览器下一次重绘前调用,开发人员可以用这个特性结合递归来更好的操作动画。参数该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行。返回值返回一个 long 整数,请求 ID ,是回调列表中唯一的标识。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。2、使用方法var globalID, k = 2;fun转载 2020-10-21 10:40:11 · 870 阅读 · 0 评论 -
postman请求如何设置Content-type为application/json
1、第一步,设置Content-Type注意:请求头与返回头的Content-Type要保持一致2、第二步,设置json格式的参数原创 2020-10-20 14:42:46 · 47811 阅读 · 1 评论 -
强缓存和协商缓存区别和过程
1、强缓存(本地缓存)1.1. 概念直接使用本地的缓存,不用跟服务器进行通信1.2. 相关header字段expires一个未来时间,代表请求有效期,没有过期之前都使用当前请求。cache-controlno-cache:不使用本地缓存。向浏览器发送新鲜度校验请求pubilc:任何情况下都缓存(即使是HTTP认证的资源)private:只能被终端用户的浏览器缓存,不允许CDN等中继缓存服务器对其缓存no-store:禁止浏览器缓存数据,也禁止保存至临时文件中,每次都重新请求,多次转载 2020-10-19 19:24:13 · 8307 阅读 · 2 评论 -
浏览器数据存储方式总结---localStorage、sessionStorage、cookie
1、cookie1.1、cookie的作用说到cookie,其实cookie有两个主要功能,用于解决http无状态的缺点,在客户端存储会话信息,记录用户的状态也就是我们现在也经常使用cookie在客户端存储一些数据1.2、cookie的构成一般来说,cookie是由浏览器保存的以下几块信息构成的(1)名称:一个唯一确定cookie的名称(2)值:存储在cookie中的字符串值,值必须被URL编码(3)域:cookie对于哪个域是有效的,所有向该域发送的请求都会包含这个cookie信息转载 2020-10-19 18:29:46 · 5660 阅读 · 0 评论 -
浏览器的两个页面之间通信的问题
两个浏览器窗口间通信总结:1、localStorage一个窗口更新localStorage,另一个窗口监听window对象的”storage”事件,来实现通信。// 本窗口的设值代码localStorage.setItem('aaa', (Math.random()*10).toString()) // 其他窗口监听storage事件window.addEventListener("storage", function (e) { console.log(e) console.log转载 2020-10-19 15:59:16 · 6108 阅读 · 0 评论