JavaScript
关注
分享
扫一扫
文章平均质量分 91
张小益达
谁愿人生暗淡无光，谁愿做绿叶不争芬芳。
美团 | 到店前端开发
展开
-
正则匹配时间字符串
文章目录年份月份日组合起来判断年月日判断时间是否符合要求综合判断yyyy-MM-dd HH:mm:ss后续可以优化形式：yyyy-MM-dd HH:mm:ss连字符可以有：-/. 空格 （没有的情况暂时不考虑，其实是应该考虑的）年份范围：1 - 9999需要排除0000等前置0的情况（只要前面有0，就不会匹配）正则：((?!0{1,4})[0-9]{1,4})月份范围：01 - 12 or 1 - 12需要排除0 / 00 or 超过12的情况正则：(0(?:[1-9])|1(?:[0-原创 2020-07-23 15:44:37 · 3626 阅读 · 0 评论 -
CSRF攻击
目录什么是CSRF攻击自动发起GET请求自动发起POST请求引诱用户点击链接与XSS区别防范CSRF攻击Cookie的SameSite属性验证请求的来源站点CSRF Token什么是CSRF攻击CSRF：Cross-site request forgery，“跨站请求伪造”，黑客引诱用户打开黑客的网站，在黑客的网站用，利用用户的登录状态发起的跨站请求。简单来讲，CSRF攻击就是黑客利用了用户的登录状态，并通过第三方的站点来做一些坏事自动发起GET请求.原创 2020-05-24 12:59:56 · 542 阅读 · 0 评论 -
跨站脚本攻击（XSS）
目录什么是XSS攻击恶意代码是怎么注入的存储型XSS攻击反射性XSS攻击基于DOM的XSS攻击如何阻止XSS攻击服务器对输入脚本进行过滤或者转码充分利用CSP使用HttpOnly属性我们默认页面中可以引用任意第三方资源，然后又引入了CSP策略来加以限制；默认XMLHttpRequest和Fetch不能跨站请求资源，然后又通过CORS策略来支持其跨域。不支持页面中的第三方资源引用和CORS也带来了许多问题，其中最典型的就是XSS攻击什么是XSS攻击XS.原创 2020-05-24 12:58:25 · 518 阅读 · 1 评论 -
渐进式网页应用（PWA）
目录PWAWeb应用 VS 本地应用Service Worker设计思路浏览器三大进化路线： 应用程序Web化 Web应用移动化 Web操作系统化 主要说一下第二个：Web应用移动化对于收集设备来说，前有本地App，后有移动小程序，想要浏览器切入到移动端时相当困难的一件事，因为浏览器的运行性能时低于本地App的，并且Google也没有类似微信或者Facebook体量的用户群体不过要想切入到移动端，让其取得和原生应用同等待遇，Google提出了P.原创 2020-05-24 12:56:14 · 1813 阅读 · 2 评论 -
HTTP性能优化
目录开源节流缓存HTTP/2硬件软件、内部外部、花钱不花钱 购买更好的硬件：CPU、网卡、带宽、服务器 购买外部的软件或者服务：CDN 不花钱开源 使用高性能的Web服务器 启用长连接：connect：keep-alive TCP Fast Open 节流 gzip和br算法压缩 HTML/CSS/JS，压缩去掉多余的空格、换行、注释等 资源合并的优化 减少header地大小，不必.原创 2020-05-24 12:54:30 · 473 阅读 · 0 评论 -
WebSocket
目录why请求-应答的缺点轮询的缺点websocket特点websocket帧结构"WebSocket"是一种基于TCP的轻量级网络通信协议，在地位上与HTTP“平级”的why"WebSocket"与HTTP/2一样，都是为了解决HTTP某方面的缺陷而诞生的。 HTTP/2针对的是“队头阻塞” WebSocket针对的是“请求-应答”的通信模式 请求-应答的缺点“请求-应答”是一种“半双工”的通信模式，虽然可以双向收发数据，但同一时刻只能一个方向.原创 2020-05-24 12:53:35 · 691 阅读 · 0 评论 -
CDN
目录whywhat加速内容负载均衡缓存代理CDN （Content Delivery Network）内容分发网络why 地理因素：跨越大半个地球去连接服务，没有本地连接来得快 运营商网络：各个运营商之间的互联，需要跨网传输，多个用户去挤“连接点”，带宽终究是优先的，能抢到就看个人运气 路由转发：网络中存在许多路由器、网管，数据每经过一个节点，都要停顿一下，在二层、三层解析转发，这也会消耗一定的时间，带来延迟 whatCDN有三个关键词：“内容”原创 2020-05-24 12:51:42 · 297 阅读 · 0 评论 -
数组扁平化
文章目录toString递归reducetoStringfunction flatten(arr) { return arr.toString().split(",").map(Number);}递归function flatten(arr) { let res = []; for (let i = 0; i < arr.length; i++) { if (...原创 2020-04-16 00:10:21 · 213 阅读 · 0 评论 -
JavaScript垃圾回收机制
文章目录垃圾回收策略调用栈中的数据是如何回收的堆中的数据如何回收代际假说和分代收集代际假说副/主垃圾回收器垃圾谁后期的工作流程副垃圾会回收器Scanvenge算法主垃圾回收器标记-清除算法标记-整理全停顿增量标记算法垃圾回收策略不同的语言有不同的垃圾回收策略手动回收：C/C++何时分配内存、何时销毁内存都时由代码控制的自动回收：JavaScript、python、Java产生...原创 2020-04-15 01:07:02 · 739 阅读 · 0 评论 -
WebComponent简介和使用
文章目录什么是组件化阻碍前端组件化的因素webComponent组件化开发实现使用template创建模板创建一个相关的class类直接使用WebComponent能够提供开发者组件化开发的能力什么是组件化组件化没有一个明确的定义，但是一般形容就是：“高内聚，低耦合”，对内各个元素彼此紧密结合、相互依赖，对外和其他组件的联系最少且接口简单。阻碍前端组件化的因素在前端虽然HTML、CSS和...原创 2020-04-15 01:04:02 · 9319 阅读 · 0 评论 -
宏任务/微任务分析题进一步扩展
之前的文章大致分析了一个有关宏任务/微任务的题目，后来做了一个完整的扩展，可能不全，如果有考虑不到的，私信吧~async function foo() { console.log('foo'); return 'foo return';}async function bar() { console.log('bar start'); let res = await foo...原创 2020-04-13 19:10:29 · 197 阅读 · 0 评论 -
宏任务/微任务分析题
async function foo() { console.log('foo');}async function bar() { console.log('bar start'); await foo(); console.log('bar end');}console.log('script start');setTimeout(function () { con...原创 2020-04-13 18:54:29 · 485 阅读 · 0 评论 -
发布/订阅 VS 观察者模式
观察者模式观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生变化时，所有依赖于它的对象都将得到通知，并自动更新。观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯。观察者模式有一个别名叫“发布-订阅模式”，订阅者和订阅目标是联系再一起的，当订阅目标发生改变时，逐个通知订阅者。发布/订阅模式在24种基本的设计模式中并没有发布订...原创 2020-04-10 21:06:58 · 185 阅读 · 0 评论 -
CORS
跨站资源请求文章目录两种请求简单请求基本流程withCredentials属性非简单请求预检请求预检请求的回应与JSONP对比浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。两种请求简单请求非简单请求简单请求只包含满足如下:方法和首部字段：HEAD、GET、POSTAccept、Accept-Language、Co...原创 2020-04-10 21:04:09 · 388 阅读 · 0 评论 -
闭包
文章目录变量的作用域如何从外部读取局部变量？闭包注意点变量的作用域全局变量局部变量Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。var n=999;function f1(){ alert(n);}f1(); // 999当然，函数外部自然无法读取到函数内的局部变量function f1(){ var n=999;}alert...原创 2020-04-10 21:03:19 · 185 阅读 · 0 评论 -
原型到原型链
文章目录构造函数创建对象使用new发生了什么prototype` __proto__`constructor实例与原型原型的原型--> 原型链补充constructor`__proto__`真的有继承吗？构造函数创建对象function Person() {}var person = new Person();person.name = 'mzy';console.log(pers...原创 2020-04-10 21:02:17 · 155 阅读 · 0 评论 -
图片懒加载实现
文章目录使用JavaScript实现使用img的属性实现使用JavaScript实现使用JavaScript实现的思想：监听用户滚动的状态，如果用户滚动的可视区域中有需要显示的图片，就需要把对应图片的src写入到img标签中，浏览器会自动加载图片并且显示。<!-- 将图片的正确链接保存到data-src中 --> <img data-src="...原创 2020-01-24 22:37:09 · 300 阅读 · 0 评论 -
使用alternate stylesheet（CSS）一键换肤
使用link的rel支持的一个属性alternate stylesheet实现一键换肤功能之前写过一个直接利用JS实现换肤的可以参考下JavaScript一键换肤alternate stylesheet中文意思是：可替代的样式，不过我们用的不是很多，一般只用stylesheet就够用首先需要一个index.html、style1.css、style2.css、index.js文件Tips:...原创 2020-01-22 21:12:26 · 1620 阅读 · 0 评论 -
JavaScript一键换肤
场景叙述：点击某一个按钮，能够加载一个新的css文件，并且页面进行相应的更改// index.html ---->需要引入一个style1.css和index.js文件<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta nam...原创 2020-01-21 20:18:57 · 1591 阅读 · 0 评论 -
JavaScript模块化编程
文章目录CommonJSAMDCMDAMD和CMD的区别说起模块化编程，经常会听到什么CMD、AMD、CommonJS，记录一下自己的理解，虽然自己用得不是很多。CommonJSNodeJS就是参照CommonJS规范实现的// 导出module.export math = ...// 引入var math = require('math');但是存在一个问题，就是必须等模块导...原创 2020-01-10 16:41:57 · 278 阅读 · 0 评论 -
JavaScript递归发送多次请求
模拟使用递归链式的发送请求class sendAll { constructor(arr) { this.arr = arr; this.index = 0; this.sendAll(); } send() { return new Promise((resolve, reject) =>...原创 2020-01-09 22:57:28 · 1619 阅读 · 0 评论 -
写React/Vue项目时为什么要在列表组中写key,其作用是什么？
首先了解一下虚拟dom和diff算法虚拟dom：用一个简单的对象去替代复杂的dom对象，该对象存储了对应dom的一些重要参数，在改变dom之前，会先比较相应的虚拟dom，如果需要改变，才会将相应的改变应用到真实dom上diff算法（差异算法）：用新渲染的对象树和旧的树进行对比，记录这两颗树的差异，记录下来的不同就是我们需要对页面正真的dom操作，然后把他们应用到正真的dom操作中，进行页面的...原创 2019-08-13 21:50:50 · 1087 阅读 · 0 评论 -
JavaScript数据类型简要分析
文章目录JavaScript有哪些数据类型？es6中新增了什么数据类型，说说特点，有什么作用？对象在内存中怎么存储的？null和undefined的共同点和区别？那些情况会出现undefined？基本类型没有方法，为什么我们还是对基本类型使用.toString()、.valueOf()方法？对包装对象增加一个方法会有什么样的结果？JavaScript有哪些数据类型？JavaScript由七种...原创 2020-01-08 20:26:21 · 282 阅读 · 0 评论 -
JavaScript的浅拷贝和深拷贝
文章目录@[TOC]拷贝的分类浅拷贝Object.assign(target,...sources)展开运算符(...)手动实现深拷贝JSON.parse(JSON.stringify(target))手动实现上图是对象在内存中存储的情况，我们可以明显的知道obj和obj2是共享同一片地址空间的，如果对其中的任何一个进行修改，都会影响到指向同一片地址空间的其他变量。但是在很多情况下，我们需要复...原创 2020-01-08 23:47:53 · 484 阅读 · 1 评论 -
有关数组面试题解析
如何判断一个数组是数组arr instanceOf Arrayarr.constructor === ArrayObject.prototype.toString(arr) === “[object Array]”Array.isArray(arr)数组有那些方法之前总结过：JavaScript数组的有关方法截取数组arr.slice(ac,en)arr.split() /...原创 2020-01-09 19:51:25 · 168 阅读 · 0 评论 -
JavaScript循环总结
总结以下JavaScript中各种循环及其特点文章目录for循环forEach循环for..in循环for..of循环Object.keys()let arr = [1,null,undefined,NaN,];let obj = {name: ‘mzy’,age: 20,getName: function(){return this.name;}}for循环for循环基本在...原创 2020-01-09 18:52:56 · 322 阅读 · 0 评论 -
JavaScript数据存取
数据存储的位置关系到代码执行过程中数据的检索速度。JavaScript中有四种存储方式。字面量：只代表自身：string、number、boolean、object、array、function、regex、null、undefined（就是不适用new创建的实例）本地变量：使用var定义的数据存储单元数组元素对象元素每一种数据存储的位置都有不同的读写消耗，对于消耗性能的影响排序：...原创 2020-01-08 17:38:18 · 540 阅读 · 0 评论 -
script的加载和执行
script的加载和执行脚本的位置JavaScript代码的下载和执行是阻塞其他文件的下载的如果把script标签放到head中，那么，假设需要加载三个js文件和一个css文件，那么运行图就是，如果把script标签放到前面：我们知道HTML的渲染是从上至下的，当把所有的HTML渲染完成之后，但是在用户打开时能够看到页面时有基本的HTML内容的，只是可能暂时不能完成交互，这样是能够留...原创 2020-01-05 16:16:22 · 1363 阅读 · 0 评论 -
JavaScript数组方法
作者:马小跳 时间:2019-7-25(今天总得做些什么吧)总结JavaScript数组的一些方法-如果需要查找某些方法，建议ctrl+F进行需要查找检测数组判断某个对象是不是数组value instanceof Array //只有一个全局执行环境Array.isArray(value) //es5方法Object.prototype.toString...原创 2019-07-25 23:47:27 · 116 阅读 · 0 评论 -
undefined 和 null的区别和联系
作者:马小跳 时间:2019-7-25睡不着的凌晨总结以下undefined 和 null的区别和联系首先聊一下undefined,学过多门语言的都知道,在这么多种语言里面,都存在null这么一个值的,但是只有JavaScript有undefined,这是因为在最初设计语言的时候,开发者也只设计了null,但是在使用过程中发现一些错误的产生并不是空指针的问题,所以在后面的时间里面就引...原创 2019-07-25 02:21:38 · 425 阅读 · 0 评论 -
js 判断字符串中是否包含某个字符串
String对象的方法方法一: indexOf() (推荐)var str = "123";console.log(str.indexOf("3") != -1 ); // trueindexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。方法二: search()var str = "123...转载 2019-06-03 16:36:56 · 37445 阅读 · 0 评论 -
根据数组里面的时间字符串排序
大致需求就是，有关时间的内容存储到数组里面的某一项，并且是以字符串的形式展示var data = [{ "id": "001", "time": "2019-5-28" },{ "id": "002", "time": "2019-5-28" },{ "id": "003", "time": "2019-6-28" },{ ...原创 2019-06-03 16:31:15 · 4729 阅读 · 0 评论 -
js+jQuery实现搜索（动态监听input框的变化）
基本需求是：用户在input框输入需要的内容，按回车键之后进行搜索//$input为目标对象$input.bind("input propertychange", function() { document.onkeyup = function (e) { if(e.code == "Enter"){ // 默认按回车键...原创 2019-05-27 10:07:58 · 1669 阅读 · 0 评论 -
es6模板字符串简单使用
模板字符串的开始时( `` )就是tab键上面的那个，分别代表模板字符串的开始和结束，使用的方法类似于在html中直接使用，如果需要里面的某些内容替换成自己在js里面的内容，语法是$(...)var str = `<tr><td>${data[i].ID}</td><td>${data[i].name}</td><...原创 2019-05-26 23:15:37 · 274 阅读 · 0 评论 -
localStrage的基本使用
简单的来说localStrage的作用是储存一定的数据在浏览器里面，对于IE浏览器，IE8以上才兼容，首先得判断浏览器是不是支持if(! window.localStorage){ alert("浏览器不支持localstorage"); return false;}else{ //主逻辑业务}var storage=window.localStorage;...原创 2019-04-18 20:05:55 · 533 阅读 · 0 评论 -
echart中markPoint条件显示
实现点：设置两个参数，分别代表markPoint文字是否显示flag = false，和点显示大小 pointSize = 0;（默认是没有的，达到了条件）满足条件将内容显示并且将flag = true;pointSize = 80;var flag = false,xOffset,yOffset,pointSize = 0;//xOffset和yOffset是自己设置的poin...原创 2019-04-10 23:31:50 · 4963 阅读 · 3 评论 -
父页面向子页面传值
整体的想法就是：（父页面）绑定一个事件，把this传给处理的函数，然后找到可以区分的信息内容，放到页面的一个特定的地方，（子页面）通过parent.找到相对应的内容，然后获取对应的内容即可具体步骤实现：父页面我在需要点击的部分绑定了一个点击事件onclick="showIcon(this)"，然后一直索引索引，找到不同的地方var parentnode = node.parent...原创 2019-04-10 09:40:17 · 4191 阅读 · 0 评论 -
正则表达式学习的个人小结
正则表达式是对字符串的一种操作，运用到JS中可以帮助我们去寻找符合要求的字符串(表单验证)。http：//regexper.com（这个网站可以把正则表达式输入进去然后用图形显示出来，因为是国外的网站，国内登入可能比较慢，甚至进不去，但是可以把把这个东西从git下载到本地，然后在本地http://localhost:8080端口打开，具体操作可以参考其他博客）其实我觉得正则表达式的学习...原创 2018-11-11 01:56:32 · 5350 阅读 · 2 评论 -
总结IIFE（立即调用函数表达式）
作者：马小跳 时间：2019-7-31总结IIFE（立即调用函数表达式）什么是立执行函数：申明一个匿名函数并且马上调用这个匿名函数自执行函数表达式的作用：创建一个匿名函数并执行创建一个独立的作用域，避免全局作用域的污染一些立执行函数的表示方法：(function(//接收参数){})(//参数);(function(){}());var a = function(){}...原创 2019-07-31 16:58:53 · 222 阅读 · 0 评论 -
详细解读==运算符
对于==，去判断总的来说可以分为六步首先会比较两者的类型是否相同，如果相同就比较大小类型不相同就会进行类型的转换一开始会先判断是否是null和undefined，如果是直接返回true如果类型是string和number，那么string会转换成unmber如果一方是Boolean，那么会把Boolean转换成number如果一方是Object且另一方是string，number或者...原创 2019-09-19 19:56:23 · 3191 阅读 · 1 评论