前端知识点浅析

前言：每次碰到什么基础面试题，大部分都会提到盒模型，本身表述能力有些差，看了别人的分析发现都没有什么比较满意的文章，碰上满意的总不能一文不变的跟人家说，遂本身整理了一下，加上点本身的理解，但愿明天的我不会嘲笑如今的理解。

正文

我对盒子的理解

盒子模型有IE盒子模型和W3C标准盒子模型两类，它们之间有相同点和不一样点。我先说相同点，它们由内而外的组成部分都是:content（内容）；padding（内边距）；border（边框）；margin（外边距），它们的不一样点在于width（宽度）和height（高度）的计算，IE盒子模型的宽度等于content（内容的宽度）加上 padding-left 和 padding-right（内边距的距离）再加上 border（边框的宽度），高度等于内容的高度加上 padding-top 和padding-bottom（内边距的距离）加 border（边框的宽度）；而标准盒子模型的宽度及高度就等于内容的宽度及高度，两种盒子的选取能够经过box-sizing来进行选择；

它们的适用状况

应该根据实际的需求来选择盒子模型，当元素的宽度须要固定死能够更好的进行布局的时候使用IE盒子，这样元素的宽度就不会随着padding的改变而改变，页面就不会由于元素的微调致使出现变形走位的状况，而当页面需求内容不能变形的，就应该最好选择标准盒子模型，同时由于 box-sizing 仅支持IE8+ 的浏览器，当项目要求兼容IE6，7的时候，最好使用标准盒子模型，固然也可使用CSS Hack（注解①）进行调整

弹性盒子的理解

弹性盒子是CSS3 的一种新的布局模式，它的目的是为了更好的对元素进行排列，对齐及分配空间，弹性盒子由弹性容器和弹性子元素组成，容器设置 display:flex 或 display:inline-flex ,子元素则不需考虑宽度的问题，仅须要考虑在主轴的排列及顺序的分配等，能够更好的进行的页面的元素的排列，其对响应式布局的意义重大，目前的在 IE11+ 主流浏览器兼容，考虑到它的兼容性，目前的应用场景多用于手机端的布局，它的flex容器有着许多属性 ：（肯定主轴方向）flex-direction:row; （主轴对齐）justify-content:centent；（次轴对齐）align-items:centent; 等等

 圣杯和双飞翼

圣杯布局（注解②）和双飞翼布局（注解③）它们的基本结构类似，都是三栏布局，两边固定宽，中间大小自适应，目的也都是同样为了优先渲染内容。先说圣杯布局，首先在一个div 中放入三个div ，都设置 float:left; 第一个div 放置内容目的为了优先渲染，设置width:100%；剩下两个设置固定宽，好比200px ;而后经过设置负 margin 来调整剩下两个div 的位置，给第二个div 设置 margin-left:-100%; 使它移动到左边，给第三个div 设置margin-left:-200px;使它移动到右边， 最后为了阻止中间内容被两边div覆盖，给他们的父容器设置 padding:0 200px; 而后给左边的div 设置 position:relative; left:-200px;给右边的div 设置 position:relative; margin-right:-200px;这样圣杯布局就写好了，而后再说双飞翼，一样在一个div 中放入三个div ，都设置 float:left ;给第一个div 一样设置 width:100%; 剩下的两个div 设置一个固定宽，好比200px; 而后一样经过设置负 margin 来调整剩下两个div 的位置，一样给剩下的两个div 分别设置 margin-left:-100%; 和 margin-left:-200px; 最后为了解决内容被左右两个div 遮盖的问题，双飞翼的解决方法是在内容div 里嵌套一个子div，而后给里面的子 div 设置margin:0 200px; 内容在子div 里展现 。

距离属性相关

当咱们使用js控制页面的时候，须要获取网页元素的各类距离，其中有 offsetWidth 属性：获取元素的标准盒模型宽度（既 content宽度+padding+border）；scrollWidth 属性：获取元素的可滚动宽度（既 content宽度+padding）； clientWidth 属性：获取元素的可见宽度（既 content宽度+padding 和scrollWidth同样）；offsetLeft 属性：获取元素边框border 到文档左边框border 的距离 scrollLeft 属性：获取元素横向滚动的距离（仅在有滚动条的状况下有效）；offsetTop 属性：获取元素边框border 到文档上边框border 的距离； scrollTop 属性：获取元素纵向滚动的距离（仅在有滚动条的状况下有效）；

懒加载预加载

懒加载和预加载的目的都是为了加强用户体验，懒加载也称为延迟加载，首先将图片的的路径或背景图片的路径统一换成 1*1 的图片（咱们称其为占位图），正确的路径放在自定义的属性里，而后当图片出如今页面的可视区域，咱们才将图片的 src 更换成正确的路径，让图片出来。懒加载的优势：页面加载速度快、能够减轻服务器的压力、节约了流量,用户体验好。预加载，图片提早加载到浏览器，当须要调用的时候，直接从本地渲染，建立函数动态添加须要预加载的图片，经过建立 new Image().src="http:www.baidu.com/logo.png" 来预先加载想加载的图片，优势：能让展现效果完美展示，缺点：加载以后的资源会增长加载页面的时间

 瀑布流分析集

瀑布流是由外国流入中国的一种布局方式，是一种多列布局，用户不断拉动页面，页面不断加载新的内容，大小不一的元素列成像流水同样，源源不断的加载，俗称瀑布流，首先计算页面能容下几列，经过计算将每列的高度存储在一个数组里，用户滚动到底部，判断哪列最短，而后将砖块添加入最短的队列，不断添加直到可视区域以外。网上搜索瀑布流，各类方法有不少，例子也有不少，其实只要实现了，都是好的。我写的demo：http://fenleiii.gitee.io/demo/demo/1/index.html

做用域与域链

在 Javascript 中存在两种变量，全局变量和局部变量，它们相对应全局做用域和局部做用域，在任何地方都能访问到的对象拥有全局做用域，好比：最外层的函数和最外层函数外声明的变量拥有全局做用域域，全部的window对象的属性也拥有全局做用域；局部做用域通常只能在一段代码块中能访问到，好比一个函数内，它里面的局部变量就在局部做用域里。在 Javascript 中，一切都是对象。函数也是对象，其拥能够经过代码访问的属性和一系列供 Javascript 引擎访问的内部属性。其中内部属性 scope 包含了函数被建立的做用域中对象的集合，这个集合被称为函数的做用域链,执行函数会建立一个“上下文环境”，做用域链，是由当前环境与上层环境的一系列变量对象组成，它保证了当前执行环境对符合访问权限的变量和函数的有序访问。（即当前做用域像锁链同样直通顶层做用域，俗称：做用域链）

强行解释闭包 

在Javascript 中，通常状况下，函数外没法访问函数内的局部变量，若是要访问函数内的局部变量，变通方法就是在该函数内部定义一个函数，return 里面的函数，由于对里面的函数来讲，外面函数的局部变量对其是可见的，经过里面的函数来访问该函数的局部变量，来达到访问函数内部的局部变量，那么里面的这个函数就算是闭包，闭包就是可以读取其余函数内部变量的函数，

原型跟原型链

在Javascript 中，原型是一个对象，能够经过原型实现对象的属性继承，在每一个对象中都有一个内部属性 [ prototype ]，它对应的就是该对象的原型。Firefox 和Chrome 中提供了"__proto__"这个非标准来查看该对象的原型，定义一个函数 function Fn(){Fn.prototype.name="fgh" } ，每一个函数都有一个prototype 属性 当一个函数被用做构造函数来建立实例时，该函数的prototype 属性值将被做为原型赋值给全部对象实例（也就是设置实例的__proto__ 属性），也就是说，全部实例的原型引用的是函数的 prototype 属性，由于每一个对象和原型都是有原型的对象的原型指向对象的上一级，而原型又指向原型的上一级，这些原型层层连接起来就构成了原型链

解释面向对象

Javascript 是一种面向对象的语言，但它又不是正统的面向对象语言，它没有提供 ‘类’，但 Javascript 依然拥有面向对象的特征：封装 继承 多态 。先说 封装：原始方法： var add=new Object(); （建立一个空对象） add.name="李四"; add.sex:"男"（按照原型对象的方法进行赋值）。这就是最简单的封装，将两个属性封装在一个对象里，而后再说 继承：function A( ){ this.name="李四" }；function B( ){ this.attr="生命" }（定义两个构造函数）， A.prototype=new B;（若是要 A 构造函数继承 B 构造函数，将 A 的 prototype 指向 B 的实例） A.prototype.constructor=A（由于prototype 对象都有一个 constructor 属性指向它的构造函数，由于前面声明 A的prototype 指向 B 的实例，如不进行纠正，那么A.prototype.constructor=B; ）var a=new A 如今 A 的实例会继承 B 的属性。最后说 多态：一个引用类型在不一样的情景下的不一样状态。便可以经过传递不一样的参数判断执行，实现一个引用类型在不一样状况下的多种状态

 

嗯，前端的知识点一但开个头，貌似能够无限延伸下去，这里我就不强行解释了

 

注解：

①：CSS Hack：因为不一样浏览器的不一样及版本的不一样，须要对它们进行私人定制CSS。现基本不考虑IE6，例如：+ （IE7识别） .（IE7 IE8 识别 ） 

②：来自于 Matthew Levine 于2006年在「A LIST APART」上写的一篇文章，它主要讲述了网页中关于三栏布局最佳圣杯的实现方法

③：来着淘宝的UED，由于做者将布局命名为双飞翼布局，所以沿用至今