![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
文章平均质量分 65
nenliu
这个作者很懒,什么都没留下…
展开
-
跨域
按照顺序,我们需要先知道什么是跨域(cross-origin)?为什么要跨域?怎么跨域?首先需要了解浏览器的“同源策略”(same-origin policy):同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。而所谓的“源”(origin)指的是:协议,域名,端口号。然后,对于网络小白,需要补充一下域名(domain name)的知识点。百度告诉我们域名...转载 2018-04-11 16:48:29 · 705 阅读 · 0 评论 -
Web安全攻防
参考网址:【干货分享】Web安全漏洞深入分析及其安全编码常见 Web 安全攻防总结Web 安全入门之常见攻击来一张镇博图:安全无小事。1.XSS介绍:全英Cross Site Script,跨站脚本攻击。原理:攻击者在Web页面中插入恶意脚本,当用户浏览页面时,嵌入其中的脚本代码会被执行,从而可以达到攻击目的(盗取用户信息或其他侵犯用户安全隐私)示意图:分类:(1)存储型XSS(Stored XS...转载 2018-04-11 15:39:49 · 7605 阅读 · 0 评论 -
CSS单位——px,em,rem...
1. px # px(像素)是一个虚拟长度单位,是计算机系统的数字化图像长度单位 # 特点: #1. px是一种绝对单位(absolute units)。其他的绝对单位有:mm(毫米),cm(厘米),in(英寸),pt(点),pc(十二点活字) #2. IE无法调整使用px作为单位的字体大小(缩放) ...原创 2018-04-13 11:50:12 · 337 阅读 · 0 评论 -
JavaScript事件委托
参考链接:JavaScript 事件委托详解概念事件委托就是把一个元素响应事件(click,keydown...)的函数委托到另一个元素。一般来讲,会把一个或一组元素的事件委托到它的父层或者更外层元素上,所以真正绑定事件的是外层元素,当时间响应到需要绑定的元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件,然后在外层元素上执行函数。事件流/事件传播假设单击一个li标签,标签内有一个a链接(...原创 2018-04-13 18:14:16 · 393 阅读 · 0 评论 -
DOM原生遍历、获取、修改节点内容
距离上次发表博客应该已经快有两个月了吧,从4月到如今我囤了很多草稿,基本都是开了个头就没继续了,一直想找时间把它们完成的,然而各种懒,各种借口。。。昨天做了阿里的模拟笔试,时间50min,这个是真正意义上的前端笔试,最后有两个问答题需要写点代码,做完觉得我可能需要回炉重练了哈哈哈哈哈。。。讲正题,这篇博主要是熟悉如何使用原生操作DOM节点,并获取节点内容。HTML主体结构:&...原创 2018-09-05 11:16:37 · 3431 阅读 · 2 评论 -
什么是闭包?
简单来说,可以访问外部环境变量的函数就是闭包。为了更好地理解闭包,需要了解一下局部变量和全局变量,我们只需要知道,在函数内部可以直接读取到全局变量,但是在函数外部是无法读取函数体内的局部变量的。所以就需要考虑以下场景:出于种种原因,我们需要得到函数内部的局部变量。这个时候的做法就是,在函数的内部再定义一个函数,那么此时内部函数是可以访问外部函数中的变量的,所以,我们可以把内部函数作...原创 2018-09-10 20:27:08 · 3857 阅读 · 0 评论 -
事件循环(Event Loop)之setTimout与Promise
这是我今年秋招笔试面试被考频率最高的一个知识点,没有之一!在连续摔了两跤之后,觉得真的有必要把这个知识点整理一下。首先了解一下事件循环(event loop)。【参考了阮老师的日志http://www.ruanyifeng.com/blog/2014/10/event-loop.html】1.JavaScript是单线程JavaScript语言的一大特点就是单线程,也就是说在同一时间只...原创 2018-09-18 09:04:15 · 877 阅读 · 1 评论 -
JavaScript逻辑运算符的计算规则
JavaScript中的逻辑运算符包括三种:&&(与),||(或),!(非)。一般情况下这三种运算符的返回结果均是布尔值true或者false。但是&&和||有例外。1.逻辑非(!)其结果一定是一个布尔值。一般使用方式为双非返回一个数值对应的布尔值。其运算规则如下: !运算数运算数 结果 布尔值 true false 布尔值...原创 2018-09-18 10:34:36 · 629 阅读 · 0 评论 -
React Native生命周期
这篇文章主要讲讲RN的生命周期,并概述一下在每个阶段都干了些什么。RN的生命周期大致可分为三个阶段,实例化 -> 运行 -> 销毁。首先讲讲大体的三个阶段做了啥:实例化阶段:组件第一次绘制。这个阶段完成组件的加载和初始化。运行阶段:组件进行交互。这个阶段组件可以处理交互,或者接受新的事件更新界面。销毁阶段:组件卸载消亡。这个阶段做一些组件的清理工作。 下...原创 2018-09-13 11:38:28 · 3485 阅读 · 0 评论 -
再谈DOM原生操作!
前面已经有一篇博文总结了一些DOM的原生操作方法了,今天进个阶吧^^给一个场景,其HTML结构如下(假设页面中只有一个ul标签):<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li></ul>现在,我们要对其做如...原创 2018-09-18 21:28:27 · 276 阅读 · 0 评论 -
数组扁平化
数组的扁平化,就是将一个嵌套多层的数组转换为只有一层的数组。如[1,[2,[3,4]]]经扁平化处理后为[1,2,3,4]。数组扁平化实现方法:1.递归循环遍历数组,如果数组元素为一个数组,则递归调用扁平化方法。使用Array.isArray()来判断是否为数组。//1.递归function flatten(arr){ var result=[]; for(var i=0;...原创 2018-09-13 21:37:36 · 349 阅读 · 0 评论 -
jQuery基础
jQuery是一个JavaScript库。主要是通过jQuery包装DOM对象生成jQuery对象来简化JavaScript编程。基本语法是$(选择器).动作()。常用的jQuery操作方法:用法 释义 $("标签").html() 获取标签对应元素内的HTML代码 $("标签").html("html代码段") 设置(新增/修改)标签内的html代码 $("...原创 2018-09-13 22:12:33 · 155 阅读 · 0 评论 -
MVC,MVP,MVVM架构模式
这篇博简单分析了一下MVC,MVP,MVVM三种架构。1. MVC(Model-View-Controller)功能划分:View即视图,表示用户界面;Model即模型,主要存储数据;Controller即控制器,负责业务逻辑。数据关系:View接受到用户的交互请求 -> View将请求转交给Controller -> Controller操作Model更新数据 ->...原创 2018-09-11 10:50:48 · 203 阅读 · 0 评论 -
ES6的常用特性
1.变量声明let && constlet用于声明变量,const用于声明常量,两者都为块级作用域。const声明的常量被设置完成之后就不能修改,如果声明的是一个对象,那么可以改变对象的值,只要内存地址不变即可。let声明的变量不存在变量提升特性,而var声明的变量存在变量声明提升,即变量可以在声明之前使用,值为undefined。const在声明时必须被赋值。...原创 2018-09-14 21:36:46 · 287 阅读 · 0 评论 -
new操作符到底做了什么?
new操作符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。语法:new constructor[([arguments])]其中,constructor是一个指定对象实例的类型的类或函数,arguments是一个用来被constructor调用的参数列表。 var a = new A();假设我们要创建一个构造函数A()的实例a,则必须使用new操作符。会经...原创 2018-09-14 22:13:21 · 3206 阅读 · 0 评论 -
this,apply,call,bind详解
this的指向在ES5中,this总是指向最后一个调用它的那个对象,也就是说this的指向可能会发生变化。在ES6中,箭头函数的this指向其被定义时所在的对象。看看以下的几个例子:var name="windowName";function func(){ var name="funcName"; console.log(this.name);}func(); //打...原创 2018-09-15 09:30:55 · 204 阅读 · 0 评论 -
CSS——margin : 0 auto;
1. margin : 0 auto表示啥?表示上下外边距为0,左右外边距自适应。也可以拆分为:margin : 0 auto 0 auto;(上 右 下 左)。单独写的话,可以拆分成:margin-top:0;margin-right:auto;margin-bottom:0;margin-left:auto;2.margin:0 auto的作用是啥?一般是用在外层div上的属性。为了让div在...原创 2018-04-04 10:25:30 · 1579 阅读 · 0 评论 -
算法——桶排序(BucketSort)
桶排序的思路就是将数组分到有限的桶中,然后再分别排序,最后将各个桶中的数据有序地合起来。具体如下:(1)遍历数组,找到数组的最小值和最大值(2)根据步长和最值的差值,计算桶的个数Math.ceil((max-min+1)/step)(3)再次遍历数组,分档归入所属的桶内,并使用插入排序决定元素应该被放在桶的哪个位置(4)遍历桶中的数据,将数据有序地合起来桶排序的性能:时间复杂度:最好O(n+k) ...原创 2018-04-10 21:29:50 · 1348 阅读 · 0 评论 -
ES6——给对象部署Iterator接口
Iterator接口的目的就是为所有数据结构提供一种统一访问的机制,用for...of实现。一个数据结构只要有Symbol.iterator属性,就可以认为是“可遍历的”原型部署了Iterator接口的数据结构有三种,具体包含四种,分别是数组,类似数组的对象,Set和Map结构。为什么对象(Object)没有部署Iterator接口呢?有两个原因:一是因为对象的哪个属性先遍历,哪个属性后遍历是不确...原创 2018-03-28 10:07:09 · 2200 阅读 · 2 评论 -
HTTP缓存
起源:通过网络获取内容既缓慢,成本又高。大的响应需要在客户端和服务器之间进行多次往返通信,这样拖延了浏览器可以使用和处理内容的时间,同时也增加了访问者的数据成本。所以缓存和重用已获取的资源能够有效地提升网站与应用的性能。web缓存能够减少延迟与网络阻塞,进而减少显示某个资源所用的时间。借助HTTP缓存,web站点变得更具有响应性。缓存:缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。...原创 2018-09-14 08:39:47 · 897 阅读 · 0 评论 -
ES6——Promise对象
本文参考公众号:web前端教程首先来看一下没有Promise时经常出现的一个回调://请求A开始$.ajax( success:function(res1){ //请求B开始 $.ajax( success:function(res2){ //请求C开始 $.ajax( success:function(res3){ }); ...原创 2018-09-14 08:39:35 · 281 阅读 · 0 评论 -
Vue.js——实现vue组件之间的通信
1.父组件->子组件<div id="app"> <son :message="msg"></son></div><script> //创建一个vue实例 const app=new Vue({ el:"#app", data:{ msg:"我是父组件的数原创 2018-09-14 08:40:26 · 206 阅读 · 0 评论 -
纯CSS绘图
基于今天的面试问题“使用CSS画一个三角形”,特作此总结。参考链接:http://www.jb51.net/css/41448.html图形包括基本的矩形,圆形,椭圆,三角形,多边形,也包括一些复杂的爱心,钻石,阴阳八卦等。1.正方形#square{ width:100px; height:100px; background:red; }2....转载 2018-09-14 08:40:07 · 247 阅读 · 0 评论 -
JavaScript深拷贝与浅拷贝
首先了解一下深拷贝与浅拷贝。在js中把一个对象的属性与方法复制给另一个对象,或者是将父对象的属性拷贝给子对象,称为拷贝。所谓浅拷贝(shallow copy),就是对象被拷贝时,实际上拷贝的只是该对象在内存中的位置指针(也可以说是该对象的引用)。在这种情况下,如果我们修改拷贝对象,就相当于修改了原对象。深拷贝(deep copy)实现方式与浅拷贝基本相同,但是它避免了修改原对象这一问题。首先也是通...原创 2018-03-14 21:17:04 · 355 阅读 · 0 评论 -
ES6中一些新特性的底层实现
最近在看ES6的入门教程,分类很细,知识点也很多,然后脑壳一抽,觉得是不是应该做点什么呢?哈哈,然后就更了此文,若有不当,欢迎指正!此文会不定时更新,毕竟是边看边总结,随时会有补充哒!1.Object.freeze():冻结对象首先,为什么要冻结对象呢?在ES6中有一种变量声明方法为const,当我们使用这个命令来声明一个变量的时候,其实本意是想声明一个只读的常量,也就是说,我们并不希望在以后改变...原创 2018-03-23 22:35:01 · 564 阅读 · 0 评论 -
Flex布局
前言:本文总结自阮一峰老师的博文:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html布局的传统解决方案是基于盒模型的,主要依赖display属性+position属性+float属性。对于一些特殊布局,例如垂直居中,传统的布局方案不易实现。2009年,W3C提出了一种新的方案——Flex布局,可以简便、完整、响应式地实现各种页面布局。F...转载 2018-03-20 22:06:15 · 144 阅读 · 0 评论 -
Flex布局实战篇
说在前面的话,实战案例来源于阮一峰老师的博客,上一篇总结了阮老师的Flex布局语法,本篇主要是实战。啊啊,本来想在gitHub上创建的,想想太麻烦,而且代码量并不多,就算了,先在博客上整理一遍吧。因为阮老师代码给的不全(当然给的都是重点!),所以我贴出了完整的代码(请不要纠结细节),就厚着脸皮戳了原创标签哈哈哈哈哈哈。。。欢迎各位指正不当之处。阮老师Flex布局语法篇:戳这里阮老师Flex布局实战...原创 2018-03-20 22:24:30 · 893 阅读 · 0 评论 -
HTTP/2,了解一下
对于HTTP的版本了解,我个人是因为遇到了缓存相关的问题,所以了解了一些从HTTP 1.0到HTTP 1.1的的一些头信息,其实掌握的并不深入,但是只针对解决当前问题的范畴下,所了解的这些东西貌似也是足够的。然后这两天又看到了关于Web前端优化相关的方案,才知道HTTP/2 居然也发挥了作用,不得不说,我的知识更新很被动,都是需要的时候才知道,有点out啦。下面是HTTP/2的一些个人总结,了解一...原创 2018-04-09 09:55:13 · 378 阅读 · 0 评论 -
CSS3新特性——calc()
到目前为止,我并没有用过这个属性,对于前端,我仍然处于一个被动接受新知识的阶段。所了解的东西也都是冰山一角。前几天看到面试有人被问calc(),作为CSS3新特性之一,必然是有其存在的理由的。所以,我又开始各种google了。。。不谈别的,先看看calc()的作用:自适应布局仅仅是这一个作用,却解决了CSS最让人抓狂的难点,我觉得我说的一点都不过,布局这种东西,乍一看很简单,深入了发现又是一个新世...原创 2018-04-09 12:29:38 · 491 阅读 · 0 评论 -
JS实现继承的几种方式
面试中,继承是一大类问题。本文总结了个人对继承的几种方式的理解,并分析了一些优缺点。1.原型继承//父类:Animalfunction Animal(name){ this.name=name || "Animal"; this.master="铲屎官"; this.sleep=function(){ console.log(this.name+ "正在睡觉"); }}//原型属...原创 2018-04-09 17:34:54 · 155 阅读 · 0 评论 -
Vue的生命周期
去年大致了解过Vuejs的一些特性,最近两天在细看。Vue的生命周期,了解一下。Vue的生命周期通俗点讲,Vue实例从创建到销毁的过程称为Vue的生命周期。具体包括开始创建,初始化数据,编译模板,挂载DOM-->渲染,更新-->渲染,卸载等一系列过程。在Vue的整个生命周期中,它提供了一些生命周期钩子(lifecyclehook),让我们可以执行自定义逻辑。生命周期钩子(lifecyc...原创 2018-04-10 09:12:06 · 217 阅读 · 0 评论 -
ES6的Map结构与其他数据结构之间的转换
前言:有些细节性的东西,或者说以后会被扩展并使用很多的东西,有必要掌握下来。首先简单说明一下Map结构吧!Set是针对数组的优化,同样的,Map是针对对象的优化。JavaScript中的对象(Object),本质是健值对的集合,但是有一个局限性在于它的键必须是字符串。Map是ES6提供的一种数据结构,它类似于对象,不同的是它的键不限于字符串,各种类型的值(包括对象)都可以当做键。Map是一个构造函...原创 2018-03-28 09:23:20 · 520 阅读 · 0 评论 -
HTTP常见的请求方法和状态码
HTTP常见的请求方法:(1)GET(2)POST(3)PUT(4)DELETE(5)HEAD(6)OPTIONS(7)TRACE当浏览器向Web服务器发出请求时,它向服务器传递了一个数据块,也就是请求信息,HTTP请求信息由3部分组成:(1)请求方法URI协议/版本;(2)请求头;(3)请求正文HTTP响应也由3部分组成:(1)协议状态版本代码描述;(2)响应...原创 2018-09-15 13:22:00 · 4514 阅读 · 0 评论