前端基础知识

不积跬步,无以至千里;

不积小流,无以成江河。

什么是盒子模型?

网页设计中常听到的属性:content/padding/border/margin,这些属性用生活中常见的物品比喻————盒子作为比喻理解,盒子模型都具备这些属性。

  • 标准模式盒模型:

    一个模块的总宽度为:width + padding + border + margin

  • 怪异模式盒模型(IE内核浏览器,不对doctype进行定义时,会触发怪异模式):

    一个模块的总宽度为:width(已经包含padding/border) + margin

  • box-sizing: content-box/border-box/inherit
    • 取值content-box时,采用标准模式盒模型计算
    • 取值border-box时,采用怪异模式盒模型计算

flex 布局

参考网站:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

需要注意:兼容性IE10+,一旦设定flex布局后,子元素的float/clear/vertical-align将失效

  • flex容器包含的属性:
    • flex-direction: 决定主轴的方向(即子元素的排列方向)
      • row 默认值,主轴为水平方向,起点在左端
      • row-reverse 主轴为水平方向,起点在右端
      • column 主轴为垂直方向,起点在顶端
      • column-reverse 主轴为垂直方向,起点在底端
    • flex-wrap:如果一条轴线排不下,如何换行
      • nowrap 默认值,不换行
      • wrap 换行,第一行在上方
      • wrap-reverse 换行,第一行在下方
    • flex-flow: 是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
    • justify-content: 定义了子元素在主轴上的对齐方式
      • flex-start 默认值,左对齐
      • flex-end 右对齐
      • center 居中
      • space-between 两端对齐,子元素之间间隔相等
      • space-around 子元素距离父元素边界之间也有间隔,且每个项目两侧的间隔相等
    • align-items: 定义子元素在主轴的交叉轴上如何对齐
      • flex-start 交叉轴的起点对齐
      • flex-end 交叉轴的终点对齐
      • center 交叉轴的中点对齐
      • baseline 子元素的第一行文字的基线对齐
      • stretch 如果子元素未设置高度或设置为auto,将占满整个容器的高度
    • align-content: 定义了多根轴线交叉轴方向的对齐方式。如果项目只有一根轴线,该属性不起作用
      • flex-start 交叉轴的起点对齐
      • flex-end 交叉轴的终点对齐
      • center 交叉轴的中点对齐
      • space-between 与交叉轴两端对齐,轴线之间的间隔平均分布
      • space-around 两端轴线距离父元素边界之间也有间隔,每根轴线两侧的间隔都相等
      • stretch: 默认值轴线占满整个交叉轴。
  • flex子元素的属性
    • order 定义子元素的排列顺序。数值越小,排列越靠前,默认为0
      • 取值为number
    • flex-grow 定义子元素的放大比例,默认为0,即如果存在剩余空间,也不放大
      • 取值为number
    • flex-shrink 属性定义了子元素的缩小比例,默认为1,即如果空间不足,该子元素将缩小;如果一个子元素的flex-shrink属性为0,其他子元素都为1,则空间不足时,前者不缩小
      • 取值为number
    • flex-basis 定义了在分配多余空间之前,子元素占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即子元素的本来大小
      • 取值为length/auto
    • flex 属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选
      • 取值为 none 即:(0 0 auto)
      • 取值为 auto 即:(1 1 auto)
      • <’flex-grow’> (<’flex-shrink’> || <’flex-basis’>)
    • align-self
      • 属性允许单个子元素有与其他子元素不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
      • auto
      • flex-start
      • flex-end
      • center
      • baseline
      • stretch

未知宽高的子元素左右垂直居中

  • 兼容性差:

    1
    2
    3
    4
    5
    .父元素 {
    display: flex;
    justify-content: center;
    align-items: center;
    }
  • 兼容性较差:

    1
    2
    3
    4
    5
    6
    7
    8
    .父元素 {
    position: relative;
    }
    .子元素 {
    position: absolute;
    top: 50%; left: 50%;
    transfrom: translate(-50%, -50%);
    }
  • 兼容性好:

    1
    2
    3
    4
    5
    6
    7
    8
    .父元素 {
    height: 100%;
    line-height: 100%;
    text-align: center;
    }
    .子元素 {
    display: inline-block;
    }

原型链、原型对象、构造函数、实例之间的关系

每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。当原型对象等于另一个类型的实例时,就构成了实例与原型的链条,及原型链。

  • 构造函数模式:通过构造函数,可以自定义对象的类型的属性和方法。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //构造函数
    function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function () {
    alert(this.name);
    }
    }
    //实例化
    var person = new Person('Greg', 27, 'Doctor');
  • 构造函数存在的问题:每个实例对象都会把方法重新创建一次(于是就有了,原型模式)

  • 原型模式:每个函数都有一个prototype(原形)属性,这个属性是一个指针,指向一个对象,用于包含特定类型的所有实例共享的属性和方法。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    //上面的构造函数可以修改为:
    function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    }
    Person.prototype.sayName = function () {
    alert(this.name);
    }

DOM事件绑定的几种方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//直接写在HTML标签属性中
<div onlick="fun()">点击事件</div>
//原生写法:
DOM.onclick = function() {}
//IE9+
DOM.addEventListener('click',function(e){
console.log(e.target) //获取点击中的元素,可实现事件代理
})
//IE8以下
DOM.attachEvent('click',function(e) {})
//jquery写法:
$(DOM).click(function () {})
$(DOM).on('click',function () {})
$(document).on('click','DOM',function () {})

关于http2.0,websocket,https

  • http2.0相较于http1.1的提升:参考网站https://www.zhihu.com/question/34074946
    • 多路复用 (Multiplexing)
      • 同时请求大量资源的速度提升
    • 二进制分帧
      • 单点链接多资源的方式,减少服务器链接的压力,内存占用更少,链接吞吐量更大
      • 由于TCP连接的减少而使网络拥塞的到改善,同时启动的时间减少,使拥塞和丢包恢复速度更快
    • 首部压缩
      • 支持对HTTP首部的压缩
    • 服务端推送
      • 服务器可以对客户端的一个请求发送多个响应
  • websocket
    • WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。
  • https
    • https是以安全为目的http通道。即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。

      http状态码的含义

编号 含义
1XX 消息
2XX 成功
3XX 重定向
4XX 请求错误
5XX、6XX 服务器错误

DOM事件中的target与currentTarget的区别

  • target指向点击目标
  • currentTarget始终指向事件的监听者

JSONP

兼容性好,但是只支持get方法

JSONP的原理:利用<script>标签没有跨域限制的“漏洞”来达到与第三方通讯的目的,后台返回的JSON数据使用前端的“方法”包裹起来返还,前端调用后直接执行改方法

CORS

兼容性:IE10+

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容

// 前端设置是否带cookie
xhr.withCredentials = true;

xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');

xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};

IE8/9:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
if(window.XDomainRequest){
var xdr = new XDomainRequest();

xdr.open("get", "http://example.com/api/method");

xdr.onprogress = function () {
//当请求中发送方法和onload事件中有进展时的处理程序
};

xdr.ontimeout = function () {
//当请求超时时的事件处理程序
};

xdr.onerror = function () {
//当请求发生错误时的处理程序
};

xdr.onload = function() {
//success(xdr.responseText);
//当服务器端的响应被完整接收时的处理程序
}

setTimeout(function () {
xdr.send();
}, 0);
}

call & apply & bind 区别

call() 方法调用一个函数,其具有一个指定的this值和分别提供的参数。

fun.call(thisArg, arg1, arg2, ...)

apply() 方法调用一个函数,其具有一个指定的this值,以及作为一个数组提供的参数。

fun.apply(thisArg, [argsArray])

bind() 方法创建一个新的函数,当这个函数被调用时,将其this关键字设置为提供的值,在调用新函数时,给定的参数序列排在提供的参数序列前面。

fun.bind(thisArg, arg1, arg2, ...)

区别:
call、apply方法是在调用时使用,bind是在创造函数时使用。
除去指定this值参数外,call、bind参数是分别提供的,apply参数是一个数组。

坚持原创技术分享,您的支持将鼓励我继续创作!