前端
不吃饭会饿
世界を変えよう!
展开
-
Cookie、Session、Token与JWT解析
https://www.jianshu.com/p/cab856c32222原创 2021-08-21 20:38:36 · 172 阅读 · 0 评论 -
Node 跨域 CORS 模块
Node 跨域 CORS 模块只有 Web 才有跨域 CORS,移动端 iOS 与 Android 就没有,谁让 Web 能看源代码呢,沙盒机制也不如移动端健全。同源策略的限制:XmlHttpRequest 只允许请求当前源(域名、协议、端口)的资源,所以AJAX是不允许跨域的。相反就是跨域:如果想让XmlHttpRequest 按照自己意愿(域名、协议、端口)请求数据,那就需要跨域那为什么有同源策略限制?没有同源策略的话,资源(如HTTP头、Cookie、DOM、localStorage等转载 2020-07-30 21:03:52 · 861 阅读 · 0 评论 -
JS中数据类型的判断( typeof,instanceof,constructor,Object.prototype.toString.call() )
我们在写封装的插件或者函数时,常常用到JS的数据类型判断,典型的案例就是深度拷贝函数用到数据类型判断,这个知识点在面试的时候也是经常考到的一个问题。今天在这里总结一下我个人遇到的可以判断数据类型的几种方式。如果有哪里写的不对还请指点一下小弟,以免文章误导他人。1. typeof关键字console.log(typeof 2); // n...转载 2019-03-19 17:25:49 · 234 阅读 · 0 评论 -
事件模型
事件模型 JavaScript事件使得网页具备互动和交互性,我们应该对其深入了解以便开发工作,在各式各样的浏览器中,JavaScript事件模型主要分为3种:原始事件模型、DOM2事件模型、IE事件模型。 1.原始事件模型(DOM0级) 这是一种被所有浏览器都支持的事件模型,对于原始事件而言,没有事件流,事件一旦发生将马上进行处理,有两种方式可以实现原始事件: ...原创 2019-03-20 15:47:17 · 967 阅读 · 0 评论 -
e.target与e.currentTarget的区别
在DOM事件对象中有两个属性总是时不时的困扰我,就是target和currentTarget,有时候很迷惑分不清两者的区别,因此有必要把这两个属性好好梳理一下,加深理解,以便日后的查询。MDN中对target的解释为,一个触发事件的对象的引用, 当事件处理程序在事件的冒泡或捕获阶段被调用时。而对于currentTarget,它指的是当事件遍历DO...转载 2019-03-20 16:28:40 · 230 阅读 · 0 评论 -
JS基本数据类型和引用数据类型的区别及深浅拷贝
1、栈(stack)和堆(heap) stack为自动分配的内存空间,它由系统自动释放;而heap则是动态分配的内存,大小也不一定会自动释放2、数据类型 JS分两种数据类型: 基本数据类型:Number、String、Boolean、Null、 Undefined、Symbol(ES6),这些类型可以直接操作保存在变量中的实际值。 引用数据类型:Obje...原创 2019-03-17 10:05:14 · 242 阅读 · 0 评论 -
JavaScript事件循环(Event Loop)机制
JavaScript 是单线程单并发语言什么是单线程主程序只有一个线程,即同一时间片断内其只能执行单个任务。为什么选择单线程?JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。单线程意味着什么?单线程就意味着,所有任务都需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就需要一直等着。...原创 2019-03-17 12:17:33 · 147 阅读 · 0 评论 -
前端性能优化方案都有哪些?
前端是庞大的,包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,前端优化的目的是什么 ? 1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。 2. 从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。 ...原创 2019-03-17 17:05:29 · 733 阅读 · 0 评论 -
es6新特性
ES6语法const 与 let 变量使用var带来的麻烦:function getClothing(isCold) { if (isCold) { var freezing = 'Grab a jacket!'; } else { var hot = 'It's a shorts kind of day.'; ...原创 2019-03-17 17:15:56 · 13546 阅读 · 0 评论 -
promise的用法
JS - Promise使用详解1(基本概念、使用优点)一、promises相关概念promises 的概念是由 CommonJS 小组的成员在 Promises/A 规范中提出来的。1,then()方法介绍根据 Promise/A 规范,promise 是一个对象,只需要 then 这一个...原创 2019-03-17 18:01:09 · 369 阅读 · 0 评论 -
promise(2)
Promise的用法简单入门作者:KevinWang,原文地址众所周知的,Javascript是一种单线程的语言,所有的代码必须按照所谓的“自上而下”的顺序来执行。本特性带来的问题就是,一些将来的、未知的操作,必须异步实现(关于异步,我会在另一篇文章里进行讨论)。本文将讨论一个比较常见的异步解决方案——Promise,时至本文最后更新的日子,Promise的应用已经极其广泛。...原创 2019-03-17 18:48:31 · 141 阅读 · 0 评论 -
双飞翼布局与圣杯布局
双飞翼布局稍微说明一下:html代码中 middle部分首先要放在container的最前部分。然后是left,right1.将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到)2.middle部分 width:100%占满3.此时middle占满了,所以要把left拉到最左边,使用margin-left:-100%4.这时le...原创 2019-03-24 19:26:23 · 129 阅读 · 0 评论 -
两列布局
根据bfc布局中介绍的双列布局的具体代码<style> .www{ width: 500px; height: 100px; float: left; background-color: red } .eee{ height: 300px; background-color: skyblue; word-wrap:break-word; ...原创 2019-03-24 20:07:18 · 218 阅读 · 0 评论 -
meta标签
之前学习前端中,对meta标签的了解仅仅只是这一句。<meta charset="UTF-8">但是打开任意的网站,其head标签内都有一列的meta标签。比如我博客的。但是自己却很不熟悉,于是把meta标签加入了寒假学习计划的最前方。简介在查阅w3school中,第一句话中的“元数据”就让我开始了Google之旅。然后很顺利的在英文版的w3school找到...转载 2019-03-24 21:18:32 · 276 阅读 · 0 评论 -
js事件模型
三种事件模型:原始事件模型(DOM0),DOM2事件模型,IE事件模型;不同点: 事件程序的注册(给HTML元素所对应的JS对象绑定事件) 事件传播的过程事件模型的注册: 一、原始事件模型(没有兼容性问题)原始事件模型的特点:事件类型上面有ON(onclick)没有事件的传播(事件一旦发生就立刻调用事件句柄)一个DOM对象只能注册一个类型的事件,如果注册了两个,则会...转载 2019-03-24 21:47:05 · 171 阅读 · 0 评论 -
promise源码实现
本篇文章主要在于探究 Promise 的实现原理,带领大家一步一步实现一个 Promise , 不对其用法做说明,如果读者还对Promise的用法不了解,可以查看阮一峰老师的ES6 Promise教程。接下来,带你一步一步实现一个 Promise1. Promise 基本结构new Promise((resolve, reject) => { setTimeout(() =>...原创 2019-03-18 11:18:24 · 430 阅读 · 0 评论 -
图解http简单笔记
五层协议的体系结构物理层:物理层的任务就是透明地传送比特流。(注意:传递信息的物理媒体,如双绞线、同轴电缆、光缆等,是在物理层的下面,当做第0 层。)物理层还要确定连接电缆插头的定义及连接法。数据链路层:将网络层交下来的IP数据报组装成帧,在两个相邻结点间的链路上”透明“的传送以帧为单位的数据。每一帧包括数据和必要的控制信息。在收到数据时,控制信息使收到端直到哪个帧从哪个比特开始和结束。网...原创 2019-03-25 18:17:42 · 143 阅读 · 0 评论 -
async/await
随着 Node 7 的发布,越来越多的人开始研究据说是异步编程终级解决方案的 async/await。我第一次看到这组关键字并不是在 JavaScript 语言里,而是在 c# 5.0 的语法中。C# 的 async/await 需要在 .NET Framework 4.5 以上的版本中使用,因此我还很悲伤了一阵——为了要兼容 XP 系统,我们开发的软件不能使用高于 4.0 版本的 .NET ...转载 2019-03-18 21:42:09 · 136 阅读 · 0 评论 -
引用类型
引用类型通常叫做类(class)。本教程会讨论大量的 ECMAScript 预定义引用类型。引用类型引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象。本教程会讨论大量的 ECMAScript 预定义引用类型。从现在起,将重点讨论与已经讨论过的原始类型紧密相关的引用类型。注意:从传统意义上来说,ECMAScript 并不真正具有类。事实上,除了说明不存在类,...原创 2019-03-29 17:12:52 · 411 阅读 · 0 评论 -
typeof,instanceof,hasOwnProperty,in的用法和区别
JavaScript中typeof,instanceof,hasOwnProperty,in的用法和区别 一. typeof操作符typeof操作符用于返回正在使用值的类型。// 使用原始值let mNull = null;let mUndefined = undefined;let mString = 'mazey';let mNumbe...转载 2019-03-29 18:27:52 · 260 阅读 · 0 评论 -
跨域(js+php)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。先简要介绍一下跨域JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。那什么是跨域呢,简单地理解就是因为JavaScript同源策略的限制,a.com域名下的js...转载 2019-08-06 12:43:34 · 1016 阅读 · 0 评论 -
new()做了什么
题目点评考察对new关键的深刻认识,是否对前端知识有专研,如果没有专研的人,肯定说创建了一个对象,恭喜你面试官知道你是小菜鸟来的,这次面试基本上没有太大的希望了。一定要对new过程的4个步骤非常清楚,这样才能深深地抓住面试官的心!题目解析先看代码var Func=function(){};var func=new Fun...转载 2019-03-30 19:10:50 · 2768 阅读 · 0 评论 -
HTTP1.1和HTTP2.0
HTTP1.1这是一个使用了很长时间的协议,并且目前还在使用,它的前面有0.9、1.0。HTTP1.1默认是个持久连接,也就是不用频繁去创建连接,这对性能上提升是很大的,大家都知道,HTTP连接的创建是耗性能的。以前的版本都是发一个请求,服务器回应后就会断开连接,下一个请求时会重新创建连接。显然,这种情况是必需改进的,于是有了HTTP1.1。虽然它是个长连接,但在连接中发送的多个请求还是会顺序...原创 2019-03-31 12:42:01 · 417 阅读 · 0 评论 -
bfc布局
本文讲了BFC的概念是什么; BFC的约束规则;咋样才能触发生成新的BFC;BFC在布局中的应用:防止margin重叠(塌陷,以最大的为准); 清除内部浮动;自适应两(多)栏布局。1. BFC是什么?Block fomatting context = block-level box + Formatti...转载 2019-03-24 16:54:30 · 296 阅读 · 1 评论 -
this指向及修复
原先总结过this指向问题,但看了大佬们写的之后,觉得自己遗漏了很多点,所以,结合大佬们的,重写一遍一、函数的调用方式决定了 this 的指向不同:1.普通函数调用,此时 this 指向 window function fn() { console.log(this); // window } fn(); // window.fn(),此处默认...转载 2019-03-27 14:10:43 · 214 阅读 · 0 评论 -
arguments,callee,caller
arguments是函数调用时,创建的一个类似的数组但又不是数组的对象,并且它存储的是实际传递给函数的参数,并不局限于函数声明的参数列表哦。尼玛,什么意思?写个demo看看,代码见下<!DOCTYPE html> <head> <title>arguments</title> <meta http...转载 2019-04-10 10:08:37 · 161 阅读 · 0 评论 -
http缓存
彻底弄懂HTTP缓存机制及原理 前言Http 缓存机制作为 web 性能优化的重要手段,对于从事 Web 开发的同学们来说,应该是知识体系库中的一个基础环节,同时对于有志成为前端架构师的同学来说是必备的知识技能。但是对于很多前端同学来说,仅仅只是知道浏览器会对请求的静态文件进行缓存,但是为什么被缓存,缓存是怎样生效的,却并不是很清楚。在此,我会尝试用...转载 2019-04-05 12:22:22 · 129 阅读 · 0 评论 -
CMD,AMD的原理,区别,应用场景
作者:佑界链接:https://www.zhihu.com/question/21347409/answer/17959757来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。有必要简单提一下两者的主要区别,CMD推崇依赖就近,可以把依赖写进你的代码中的任意一行,例:define(...转载 2019-04-10 12:26:30 · 489 阅读 · 0 评论 -
常见的web攻击手段及防御
版权声明:本文为博主原创文章,首发于微信公众号《Java学习录》转载请保留 https://blog.csdn.net/myFirstCN/article/details/80934303 XSS:跨站脚本攻击-典型实例为:当用户在表达输入一段数据后,提交给服务端进行持久化。如果此用户输入的是一段脚本语言,而服务端用户输入的数据没有经过转码、校验...转载 2019-04-01 12:11:26 · 301 阅读 · 0 评论 -
问题
h5可视化首屏加载时间浏览器的渲染机制原创 2019-04-06 11:06:05 · 111 阅读 · 0 评论 -
闭包与变量问题
想了一晚上,哥们儿讲的太好了,终于让我搞懂了许多人第一次接触闭包大概都是从高程里这段代码开始的:function createFunctions() { var result = new Array(); for(var i=0; i<10; i++) { result[i] = function() { return i...转载 2019-03-27 22:35:16 · 324 阅读 · 0 评论 -
闭包两个实例的自我理解
闭包与变量的经典实例**一、闭包导致变量泄露为全局变量**function CreatFunction(){ var result=[]; // var j=5; for (var i =0; i <10; i++) { result[i]=function() { return i; }; } return resu...原创 2019-03-28 11:21:08 · 211 阅读 · 0 评论 -
史上最全常用正则表达式大全
史上最全常用正则表达式大全 很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下,在这里分享一下。给自己留个底,也给朋友们做个参考。 一、校验数字的表达式 1. 数字:^[0-9]*$2. n位的数字:^\d{n}$3. 至少n位...转载 2019-04-01 21:27:06 · 223 阅读 · 0 评论 -
css如何将div画成三角形
css如何将div画成三角形 首先了解一下盒模型:盒模型先看一段代码:#div1{ height: 100px; border-style: solid; border-width: 100px 100px 100px 100px; border-col...原创 2019-03-28 21:53:21 · 3027 阅读 · 0 评论 -
css实现正方形(js待补充)
实现一个子div,要求边长等于父div宽度的一半一、若父div是window的话,可以用vm单位(1vw = 1% viewport width)二、父div是一个不知道长款的div(这里为了方便,我还是把长宽写出来了,其实是未知的)此时子div的宽度为250px,高度为0,这个蓝色的长度是他的padding-bottom撑起来的。...原创 2019-03-28 22:31:45 · 667 阅读 · 0 评论 -
重绘与重排
1.document.write和innerHTML的区别document.write重排整个页面innerHTML可以重绘页面的一部分2.浏览器运行机制1、构建DOM树(parse):渲染引擎解析HTML文档,首先将标签转换成DOM树中的DOM node(包括js生成的标签)生成内...转载 2019-04-08 10:51:30 · 155 阅读 · 0 评论 -
scrollWidth,clientWidth,offsetWidth的区别
web前端学习笔记---scrollWidth,clientWidth,offsetWidth的区别 通过一个demo测试这三个属性的差别。说明:scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。 clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。 offse...转载 2019-03-29 11:11:00 · 173 阅读 · 0 评论 -
关于['1','2','3'].map(parsetInt)简单明白的原理分析
let arr = ['1','2','3']let arr2 = arr.map(parseInt)运行结果如下为啥呐。首先来了解一下map 这个函数。map 函数接受两个参数,即array.map(function(currentValue,index,arr), thi...转载 2019-04-08 16:07:41 · 626 阅读 · 0 评论 -
js事件绑定的几种方式
要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。在JavaScript中,有三种常用的绑定事件的方法:在DOM元素中直接绑定;在JavaScript代码中绑定;绑定事件监听函数。一. 在DOM元素中直接绑定这里的DOM元素,可以理解为HTML标签。JavaScri...转载 2019-04-10 09:28:22 · 7234 阅读 · 0 评论 -
react基础---组建数据交互pros
重点在this.pros.属性<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script src="dist/browser.min.js"></...原创 2019-06-21 11:52:57 · 222 阅读 · 0 评论