
JavaScript专题
qq_39125445
挑战自我,持之以恒
展开
-
HTTP状态码和ReadyState状态码
readyState状态码0:请求未初始化1:服务器已建立连接2:请求已接收3:请求处理中4:请求已完成,且响应已就绪http status1**(信息类):表示接收到请求并且继续处理 100——客户必须继续发出请求 101——客户要求服务器根据请求转换HTTP协议版本 2**(响应成功):表示动作被成功接收、理解和接受 200——表明该请求被成功地完...翻译 2018-09-18 11:16:34 · 2506 阅读 · 0 评论 -
web三大安全问题和其解决方案
XSS跨站请求攻击直接举个例子:也就是你发表一篇博客这种,别人会来浏览,你看如果在文章里面写一段带有攻击性的<script><script>的javascript代码,那么问题来了这个js代码依靠他的浏览器执行,获取你浏览器中的cookie,因为你登录信息在里面传到攻击者的服务器。解决方法:将<>通过> <转义XSRF...原创 2019-03-16 11:14:15 · 452 阅读 · 0 评论 -
一次完整的浏览器请求过程
从输入网址到页面收到请求这期间发生了什么过程1.域名解析2.发起TCP三次握手3.建立TCP连接后发起http请求4.服务器响应http请求,浏览器得到html代码5.浏览器解析HTML代码,并请求HTML代码中的资源(如js和css和img)6.浏览器对页面进行渲染呈现给用户1.首先对于域名解析输入域名,然后首先在浏览器DNS缓存中,但是保存时间很短,大概一分...原创 2019-03-12 21:10:50 · 3326 阅读 · 0 评论 -
HTML5新特性
HTML5新特性:1. 拖拽释放(Drag and drop) API2. 语义化更好的内容标签(header,nav,footer,aside,article,section)3. 音频、视频API(audio,video)4. 画布(Canvas) API5. 地理(Geolocation) API6. 本地离线存储 localStorage 长期存储数据,浏览器关闭后...原创 2019-03-17 21:37:52 · 283 阅读 · 0 评论 -
Web前端易错知识点总结
目录1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?2.每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗?3.div+css的布局较table布局有什么优点?4.CSS选择器有哪些?5.@import和link引入css的差别6.常用的行内元素有哪些,块级元素有哪些7.css3新增伪类选择器8.typeof打印奇怪的几个...原创 2019-03-24 19:49:38 · 708 阅读 · 0 评论 -
Git的基本操作
首先在官网安装git的安装包,下载成功的标识可以通过在桌面鼠标右键的内容看到有没git bash这个选项,有表示安装成功。git可以采用两种提交方式1.使用totorise小乌龟桌面提交,具体方式就不多说2.项目中使用最多的命令行提交,可以在cmd里面,git bash或者编辑器里面自带的终端。原理都是一致的,一般cmd和编辑器比如vscode里面都是使用windows的方式对文件...原创 2019-05-09 16:20:32 · 129 阅读 · 0 评论 -
前端Jest测试工具使用
参考官方文档使用:https://jestjs.io/docs/zh-Hans/getting-started.html首先来一个简单的例子使用npm和yarn工具安装都是可以的npm install jest -g安装jest后就可以进行测试了,测试步骤如下1.在终端npm init一个文件夹2.创建被测试的js文件,里面写一个函数,使用common.js或者AMD导出...原创 2019-06-01 21:34:23 · 1885 阅读 · 0 评论 -
JavaScript数据结构与算法
第一阶段基础算法1.字符串问:输入: "Let's take LeetCode contest"输出: "s'teL ekat edoCteeL tsetnoc"使用jest测试并解答:sum.jsfunction sum(str) { //变成数组 const words = str.split(" "); const words...原创 2019-06-01 21:53:39 · 493 阅读 · 0 评论 -
前端项目部署到服务器的几种方式
1.使用github作为服务器在github创建一个特殊的仓库。仓库名是你的“用户名.github.io”,这样里面放入你的打包文件就可以作为服务器访问。访问网址为http://用户名.github.io/文件名2.使用netlify服务器在官网使用github作为注册一个netlify内容3.使用阿里云服务器...原创 2019-06-11 08:02:32 · 26614 阅读 · 0 评论 -
JavaScript事件执行eventLoop讲述
js是单线程的,所以执行任务采用同步,异步的方式进行,执行过程是如下。也就是同步任务全部执行完成,再执行异步任务。异步任务里面又分为宏任务和微任务。执行顺序如下图也就是宏任务多次执行,微任务一次执行。宏任务先执行一个,微任务全部执行,再执行剩余的宏任务宏任务中执行优先级微任务中优先级再次总结就是主任务执行后,执行微任务,再执行setTimeout,set...原创 2019-07-11 13:01:44 · 139 阅读 · 0 评论 -
React redux中间件的使用
Redux-thunk中间件ajax数据请求安装这个插件就是为了返回一个函数,而不是只是对象。先安装依赖npm install redux-thunk --save使用了中间件redux-thunk的作用是什么呢。就是让createAction中创建的action不一定要返回对象,可以返回方法。因为store.dispatch只接受一个对象,但是想要是一个方法,并且执行,就必须使用...原创 2019-07-26 16:16:16 · 962 阅读 · 0 评论 -
react-mobx+less+antd+axios
为了识别装饰器语法,在react中需要配置的文件npm i @babel/plugin-proposal-decorators -d注意一下:babel版本问题装的插件会有点问题,最好装饰器识别装两个插件npm i babel-plugin-transform-decorators-legacy -dmobx需要下载的插件npm i mobx-react mo...原创 2019-07-26 16:16:55 · 643 阅读 · 1 评论 -
前端跨域
跨域跨域源于同源策略,同源包括协议,域名,端口,同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。为了用户上网安全,没有限制同源策略的话,会有安全问题,比如跨站请求伪造(CSRF)CSRF跨站请求伪造的情况的...原创 2019-08-28 17:05:04 · 407 阅读 · 0 评论 -
web性能优化(六)之总结基础(通过页面加载渲染优化)
首先理解页面加载理解页面加载通过题目理解1.这个理解可以参考我的另一篇详细解说第一个问题:https://mp.youkuaiyun.com/postedit/884286262.onload是将所有的资源文件加载完成后,才开始渲染页面,而DOMContentload不加载img,视频等资源就开始渲染页面,然后通过异步的方式加载这些资源,这样的好处是,图片加载慢,那么就使用DOMConte...原创 2019-03-16 10:56:30 · 381 阅读 · 0 评论 -
Web性能优化(五)之从加载网络资源的方式,CDN加速
CDN由来随着互联网人群规模不断增多,访问同一个服务器,网络延迟太大。CDN原理第一步:从主服务器复制内容到边缘服务器也就是访问后,造成的情况是什么呢,通过DNS解析,DNS直接返回IP地址,而是到上一级的智能DNS服务器寻找返回到最近的服务器,然后返回他的IP地址进行返回。CDN分类按照资源分类的话主要的就是内容,静态资源(就是一些HTML和CS...原创 2019-03-10 10:24:11 · 409 阅读 · 1 评论 -
web性能优化(四)之使用JSON进行数据交换和高效使用DOM操作
使用JSON进行数据交换JSON是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript原生格式,这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。与XML序列化相比,JSON序列化后产生的数据一般要比XML序列化后数据体积小,所以在Facebook等知名网站中都采用了JSON作为数据交换方...原创 2019-03-10 09:57:39 · 607 阅读 · 0 评论 -
关于JS构造函数的使用讲解
JS一般是采用自定义构造函数创建对象,那么关于构造函数创建的实例属性,方法和静态属性,方法。实例属性和方法: 都是绑定在使用构造函数创建出来的对象p上; 最终使用的时候也是使用对象p来进行访问,也就是全部依赖于创建的对象传入参数等等决定;调用者始终是对象才有作用 <script> function Person(name,age,fn1){ this...原创 2019-02-22 16:20:29 · 403 阅读 · 0 评论 -
判断内置对象类型的几种方式优缺点详解
1.使用普通类型的typeof();使用typeof只能判断出Object类型,toString会将内容有序打印出来,不能判断2.使用toString();toString会将内容有序打印出来,不能判断3.使用(对象名).constructor.name直接寻找对象的原型对象,然后找到对象的构造函数,再然后再取出其名字,准确4.使用Object.prototype.toSt...原创 2019-02-22 16:35:43 · 288 阅读 · 0 评论 -
关于Instanceof方法的应用
作用:判断实例对象是否是一个构造函数或者他的子类构造函数构造出来的,没理解,不用慌下面举几个例子应用使用格式:左边对象名 instanceof 构造函数名<script> //使用内置对象的形式 //判断是否是直接构造函数Array构造出来 var arr=new Array(); console.log(arr instanceof Array)...原创 2019-02-22 16:55:25 · 467 阅读 · 0 评论 -
js中原型对象详解
我们先来了解一下,js使用原型对象的作用是什么?回答:在使用自定义构造函数创建对象情况下,在实例化多个对象时,可能有很多方法或者属性相同,比如一个人的对象构造函数,那么人都有会跑的方法一样,都有10个拇指等等属性,这个人对象的方法,你实例方法的时候都得一一创建内存空间,这样太耗资源,那么就需要一个共享空间,共享库来装,那么这样实例化的时候,相同的内容就不用浪费内存空间了,在后面继承的时候,你的...原创 2019-02-22 17:39:16 · 1122 阅读 · 0 评论 -
js对象之hasOwnProperty和in和isPrototypeOf
1.in判断属性是否在对象属性和原型属性上面<script> function Person(name,age){ this.name=name; this.age=age; } Person.prototype.height="120"; console.log("name" in Person); con...原创 2019-02-23 09:45:04 · 209 阅读 · 0 评论 -
js对象之call,apply方法
calll,apply都是对象借调方法,用法几乎一致,只有传入参数call是以逗号的形式,而apply是采用数组的形式传入参数首先我们来看看call如何借调方法<script> function Person(name,age){ this.name=name; this.age=age; this.run=functi...原创 2019-02-23 10:14:15 · 810 阅读 · 0 评论 -
关于Javascript各种继承方式及其原理详解
关于JS继承我这边总结出来三种最常用,并且几乎无瑕疵的继承方法,分别是(构造函数+call)也称原型链继承,寄生式继承,ES6类继承在说继承之前我们得先了解关于实例属性,静态属性,私有属性的内容,还有call,apply等方法的使用,关于这些,请慢慢挨着一一看之前的博客1.构造函数加+call的方法,原型链继承原理很简单,你要想继承父类构造函数和原型对象的方法很简单,父类构造函数实例就...原创 2019-02-23 11:21:36 · 515 阅读 · 0 评论 -
js对象之浅拷贝和深拷贝
浅拷贝依次遍历内容,依次赋值 var p={ name:"zhuyu", age:20 }; var k={ }; console.log(p); console.log(k); for(let key in p){ k[key]=p[key]; } console.l...原创 2019-02-23 21:57:17 · 352 阅读 · 0 评论 -
session,cookie,sessionStorage,localStorage的区别及应用场景
浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互。一、cookie和sessioncookie和session都是用来跟踪浏览器用户身份的会话方式。区别:1、保持状态:cookie保存在浏览器端,session保存在服务器端2、使用方式:(1)cookie机制:如果不在浏览器中设置过期时间,cookie被保...转载 2019-02-24 10:56:29 · 235 阅读 · 0 评论 -
Js声明数组的四种方法
//第一种var A=[12,78,78,78,89]console.log(A)//第二种var B=new Array();B[0]=12B[1]=34B[2]=56console.log(B)//第三种var C=new Array(3);C[0]=12C[1]=34C[2]=56console.log(C)//第四种var D=new Arra...原创 2019-03-06 09:28:42 · 61210 阅读 · 1 评论 -
Js声明对象的5种总结方法详解
<script>//内置函数 var obj1=new Object(); obj1.name="zhuyu"; obj1.age=21; obj1.uni=function(){ console.log(this.name+this.age); } conso...原创 2019-03-06 09:58:40 · 8750 阅读 · 0 评论 -
Web性能优化(一)之防抖和节流
节流概念:可以举个应用场景来理解,就是在搜索引擎执行过程中,我们每输入一个汉字后,搜索引擎自动执行ajax请求,但是键盘事件是通过字母触发而不是汉字,所以我们就可以固定频率来节约资源。实现节流使用时间戳 <section style="width: 1200px;height:400px;background: red" id="scry"> </se...原创 2019-03-09 15:44:30 · 1078 阅读 · 0 评论 -
Web性能优化(二)之页面重绘repaint和回流reflow
在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。1. 浏览器把获取到的HTML代码解析成1个DOM树,HTML中的每个tag都是DOM树中的1个节点,根节点就是我们常用的document对象。DOM树里包含了所有HTML...原创 2019-03-10 09:32:41 · 358 阅读 · 1 评论 -
Web性能优(三)之从加载静态资源方式,减少HTTP请求
减少HTTP请求属于页面级优化,这条策略是最重要最有效的。为什么要减少http请求呢,原因是你在浏览器中输入一个域名,浏览器要做的事情就是通过DNS寻址,通过IP地址去访问服务器,等待链接,发送数据,等待服务器响应,接收数据,这是一个漫长的阶段,如果一个页面http请求多了起来,那么就会造成过多的时间成本,资源上每个请求都要携带数据,因此每个请求否需要占用带宽。浏览器请求多了以后,浏览器需要分批次...原创 2019-03-10 09:50:55 · 488 阅读 · 0 评论 -
前端闭包
闭包定义函数A中的函数B,能够访问函数A中的变量,函数B就是一个闭包,闭包的变量是存储在堆内存中。function A(){var a="外面的变量" window.B=function(){ console.log(a);}}这部分代码证明了不必须要return函数才是闭包闭包的意义就是能够间接的访问函数内部变量闭包的作用1.想要改变函数的变量...原创 2019-08-28 21:05:20 · 3295 阅读 · 0 评论