我欲乘风破浪

文章目录年份月份日组合起来判断年月日判断时间是否符合要求综合判断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-

目录 什么是CSRF攻击 自动发起GET请求 自动发起POST请求 引诱用户点击链接 与XSS区别 防范CSRF攻击 Cookie的SameSite属性 验证请求的来源站点 CSRF Token 什么是CSRF攻击 CSRF：Cross-site request forgery，“跨站请求伪造”，黑客引诱用户打开黑客的网站，在黑客的网站用，利用用户的登录状态发起的跨站请求。简单来讲，CSRF攻击就是黑客利用了用户的登录状态，并通过第三方的站点来做一些坏事 自动发起GET请求 .

目录 什么是XSS攻击 恶意代码是怎么注入的 存储型XSS攻击 反射性XSS攻击 基于DOM的XSS攻击 如何阻止XSS攻击 服务器对输入脚本进行过滤或者转码 充分利用CSP 使用HttpOnly属性 我们默认页面中可以引用任意第三方资源，然后又引入了CSP策略来加以限制；默认XMLHttpRequest和Fetch不能跨站请求资源，然后又通过CORS策略来支持其跨域。 不支持页面中的第三方资源引用和CORS也带来了许多问题，其中最典型的就是XSS攻击 什么是XSS攻击 XS.

目录 PWA Web应用 VS 本地应用 Service Worker 设计思路 浏览器三大进化路线： 应用程序Web化 Web应用移动化 Web操作系统化 主要说一下第二个：Web应用移动化 对于收集设备来说，前有本地App，后有移动小程序，想要浏览器切入到移动端时相当困难的一件事，因为浏览器的运行性能时低于本地App的，并且Google也没有类似微信或者Facebook体量的用户群体 不过要想切入到移动端，让其取得和原生应用同等待遇，Google提出了P.

目录 开源 节流 缓存 HTTP/2 硬件软件、内部外部、花钱不花钱 购买更好的硬件：CPU、网卡、带宽、服务器 购买外部的软件或者服务：CDN ​ ​ 不花钱 开源 使用高性能的Web服务器 启用长连接：connect：keep-alive TCP Fast Open 节流 gzip和br算法压缩 HTML/CSS/JS，压缩去掉多余的空格、换行、注释等 资源合并的优化 减少header地大小，不必.

目录 why 请求-应答的缺点 轮询的缺点 websocket特点 websocket帧结构 "WebSocket"是一种基于TCP的轻量级网络通信协议，在地位上与HTTP“平级”的 why "WebSocket"与HTTP/2一样，都是为了解决HTTP某方面的缺陷而诞生的。 HTTP/2针对的是“队头阻塞” WebSocket针对的是“请求-应答”的通信模式 请求-应答的缺点 “请求-应答”是一种“半双工”的通信模式，虽然可以双向收发数据，但同一时刻只能一个方向.

目录 why what 加速内容 负载均衡 缓存代理 CDN （Content Delivery Network）内容分发网络 why 地理因素：跨越大半个地球去连接服务，没有本地连接来得快 运营商网络：各个运营商之间的互联，需要跨网传输，多个用户去挤“连接点”，带宽终究是优先的，能抢到就看个人运气 路由转发：网络中存在许多路由器、网管，数据每经过一个节点，都要停顿一下，在二层、三层解析转发，这也会消耗一定的时间，带来延迟 what CDN有三个关键词：“内容”

文章目录toString递归reduce toString function flatten(arr) { return arr.toString().split(",").map(Number); } 递归 function flatten(arr) { let res = []; for (let i = 0; i < arr.length; i++) { if (...

文章目录垃圾回收策略调用栈中的数据是如何回收的堆中的数据如何回收代际假说和分代收集代际假说副/主垃圾回收器垃圾谁后期的工作流程副垃圾会回收器Scanvenge算法主垃圾回收器标记-清除算法标记-整理全停顿增量标记算法 垃圾回收策略 不同的语言有不同的垃圾回收策略 手动回收：C/C++ 何时分配内存、何时销毁内存都时由代码控制的 自动回收：JavaScript、python、Java 产生...

文章目录什么是组件化阻碍前端组件化的因素webComponent组件化开发实现使用template创建模板创建一个相关的class类直接使用 WebComponent能够提供开发者组件化开发的能力 什么是组件化 组件化没有一个明确的定义，但是一般形容就是：“高内聚，低耦合”，对内各个元素彼此紧密结合、相互依赖，对外和其他组件的联系最少且接口简单。 阻碍前端组件化的因素 在前端虽然HTML、CSS和...

之前的文章大致分析了一个有关宏任务/微任务的题目，后来做了一个完整的扩展，可能不全，如果有考虑不到的，私信吧~ async function foo() { console.log('foo'); return 'foo return'; } async function bar() { console.log('bar start'); let res = await foo...

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...

观察者模式 观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生变化时，所有依赖于它的对象都将得到通知，并自动更新。观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯。 观察者模式有一个别名叫“发布-订阅模式”，订阅者和订阅目标是联系再一起的，当订阅目标发生改变时，逐个通知订阅者。 发布/订阅模式 在24种基本的设计模式中并没有发布订...

跨站资源请求 文章目录两种请求简单请求基本流程withCredentials属性非简单请求预检请求预检请求的回应与JSONP对比 浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。 两种请求 简单请求 非简单请求 简单请求 只包含满足如下:方法和首部字段： HEAD、GET、POST Accept、Accept-Language、Co...

文章目录变量的作用域如何从外部读取局部变量？闭包注意点 变量的作用域 全局变量 局部变量 Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。 var n=999; function f1(){ alert(n); } f1(); // 999 当然，函数外部自然无法读取到函数内的局部变量 function f1(){ var n=999; } alert...

文章目录构造函数创建对象使用new发生了什么prototype` __proto__`constructor实例与原型原型的原型--> 原型链补充constructor`__proto__`真的有继承吗？ 构造函数创建对象 function Person() {} var person = new Person(); person.name = 'mzy'; console.log(pers...

文章目录使用JavaScript实现使用img的属性实现 使用JavaScript实现 使用JavaScript实现的思想：监听用户滚动的状态，如果用户滚动的可视区域中有需要显示的图片，就需要把对应图片的src写入到img标签中，浏览器会自动加载图片并且显示。 <!-- 将图片的正确链接保存到data-src中 --> <img data-src="...

使用link的rel支持的一个属性alternate stylesheet实现一键换肤功能 之前写过一个直接利用JS实现换肤的可以参考下JavaScript一键换肤 alternate stylesheet中文意思是：可替代的样式，不过我们用的不是很多，一般只用stylesheet就够用 首先需要一个index.html、style1.css、style2.css、index.js文件 Tips:...

场景叙述：点击某一个按钮，能够加载一个新的css文件，并且页面进行相应的更改 // index.html ---->需要引入一个style1.css和index.js文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta nam...

文章目录CommonJSAMDCMDAMD和CMD的区别 说起模块化编程，经常会听到什么CMD、AMD、CommonJS，记录一下自己的理解，虽然自己用得不是很多。 CommonJS NodeJS就是参照CommonJS规范实现的 // 导出 module.export math = ... // 引入 var math = require('math'); 但是存在一个问题，就是必须等模块导...

模拟使用递归链式的发送请求 class sendAll { constructor(arr) { this.arr = arr; this.index = 0; this.sendAll(); } send() { return new Promise((resolve, reject) =>...

首先了解一下虚拟dom和diff算法 虚拟dom：用一个简单的对象去替代复杂的dom对象，该对象存储了对应dom的一些重要参数，在改变dom之前，会先比较相应的虚拟dom，如果需要改变，才会将相应的改变应用到真实dom上 diff算法（差异算法）：用新渲染的对象树和旧的树进行对比，记录这两颗树的差异，记录下来的不同就是我们需要对页面正真的dom操作，然后把他们应用到正真的dom操作中，进行页面的...

文章目录JavaScript有哪些数据类型？es6中新增了什么数据类型，说说特点，有什么作用？对象在内存中怎么存储的？null和undefined的共同点和区别？那些情况会出现undefined？基本类型没有方法，为什么我们还是对基本类型使用.toString()、.valueOf()方法？对包装对象增加一个方法会有什么样的结果？ JavaScript有哪些数据类型？ JavaScript由七种...

文章目录@[TOC]拷贝的分类浅拷贝Object.assign(target,...sources)展开运算符(...)手动实现深拷贝JSON.parse(JSON.stringify(target))手动实现 上图是对象在内存中存储的情况，我们可以明显的知道obj和obj2是共享同一片地址空间的，如果对其中的任何一个进行修改，都会影响到指向同一片地址空间的其他变量。但是在很多情况下，我们需要复...

如何判断一个数组是数组 arr instanceOf Array arr.constructor === Array Object.prototype.toString(arr) === “[object Array]” Array.isArray(arr) 数组有那些方法 之前总结过：JavaScript数组的有关方法 截取数组 arr.slice(ac,en) arr.split() /...

总结以下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循环基本在...

数据存储的位置关系到代码执行过程中数据的检索速度。JavaScript中有四种存储方式。 字面量：只代表自身：string、number、boolean、object、array、function、regex、null、undefined（就是不适用new创建的实例） 本地变量：使用var定义的数据存储单元 数组元素 对象元素 每一种数据存储的位置都有不同的读写消耗，对于消耗性能的影响排序：...

script的加载和执行 脚本的位置 JavaScript代码的下载和执行是阻塞其他文件的下载的 如果把script标签放到head中，那么，假设需要加载三个js文件和一个css文件，那么运行图就是， 如果把script标签放到前面：我们知道HTML的渲染是从上至下的，当把所有的HTML渲染完成之后，但是在用户打开时能够看到页面时有基本的HTML内容的，只是可能暂时不能完成交互，这样是能够留...

作者:马小跳 时间:2019-7-25(今天总得做些什么吧) 总结JavaScript数组的一些方法 -如果需要查找某些方法，建议ctrl+F进行需要查找 检测数组 判断某个对象是不是数组 value instanceof Array //只有一个全局执行环境 Array.isArray(value) //es5方法 Object.prototype.toString...

作者：马小跳 时间：2019-7-25 既然开始总结了，就继续吧 总结下数组去重的一些方法 比较有效的方法（去除NaN）是下面的第4 7 8中方法 var a = [1,4,2,6,3,2,1,6,9,6,3,undefined,NaN,undefined,NaN]; var b = []; 旧数组内容和新数组内容比较 for (var i = 0;i < a.len...

作者:马小跳 时间:2019-7-25睡不着的凌晨 总结以下undefined 和 null的区别和联系 首先聊一下undefined,学过多门语言的都知道,在这么多种语言里面,都存在null这么一个值的,但是只有JavaScript有undefined,这是因为在最初设计语言的时候,开发者也只设计了null,但是在使用过程中发现一些错误的产生并不是空指针的问题,所以在后面的时间里面就引...

String对象的方法 方法一: indexOf() (推荐) var str = "123"; console.log(str.indexOf("3") != -1 ); // true indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。 方法二: search() var str = "123...

大致需求就是，有关时间的内容存储到数组里面的某一项，并且是以字符串的形式展示 var data = [{ "id": "001", "time": "2019-5-28" },{ "id": "002", "time": "2019-5-28" },{ "id": "003", "time": "2019-6-28" },{ ...

基本需求是：用户在input框输入需要的内容，按回车键之后进行搜索 //$input为目标对象 $input.bind("input propertychange", function() { document.onkeyup = function (e) { if(e.code == "Enter"){ // 默认按回车键...

模板字符串的开始时( `` )就是tab键上面的那个，分别代表模板字符串的开始和结束，使用的方法类似于在html中直接使用，如果需要里面的某些内容替换成自己在js里面的内容，语法是$(...) var str = ` <tr> <td>${data[i].ID}</td> <td>${data[i].name}</td> <...

简单的来说localStrage的作用是储存一定的数据在浏览器里面，对于IE浏览器，IE8以上才兼容，首先得判断浏览器是不是支持 if(! window.localStorage){ alert("浏览器不支持localstorage"); return false; }else{ //主逻辑业务 } var storage=window.localStorage;...

实现点：设置两个参数，分别代表markPoint文字是否显示flag = false，和点显示大小 pointSize = 0;（默认是没有的，达到了条件） 满足条件将内容显示并且将flag = true;pointSize = 80; var flag = false,xOffset,yOffset,pointSize = 0; //xOffset和yOffset是自己设置的poin...

整体的想法就是：（父页面）绑定一个事件，把this传给处理的函数，然后找到可以区分的信息内容，放到页面的一个特定的地方，（子页面）通过parent.找到相对应的内容，然后获取对应的内容即可 具体步骤实现： 父页面 我在需要点击的部分绑定了一个点击事件onclick="showIcon(this)"，然后一直索引索引，找到不同的地方var parentnode = node.parent...

正则表达式是对字符串的一种操作，运用到JS中可以帮助我们去寻找符合要求的字符串(表单验证)。 http：//regexper.com （这个网站可以把正则表达式输入进去然后用图形显示出来，因为是国外的网站，国内登入可能比较慢，甚至进不去，但是可以把把这个东西从git下载到本地，然后在本地http://localhost:8080端口打开，具体操作可以参考其他博客） 其实我觉得正则表达式的学习...

作者：马小跳 时间：2019-7-31 总结IIFE（立即调用函数表达式） 什么是立执行函数：申明一个匿名函数并且马上调用这个匿名函数 自执行函数表达式的作用： 创建一个匿名函数并执行 创建一个独立的作用域，避免全局作用域的污染 一些立执行函数的表示方法： (function(//接收参数){})(//参数); (function(){}()); var a = function(){}...