前端笔记

HTML------------------------

CSS--------------------------

伪类&伪元素

伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息
伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式

伪类：
1.格式化DOM树以外的信息。
比如： a标签的:link、:visited 等。这些信息不存在于DOM树中。

2.不能被常规CSS选择器获取到的信息。
比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child 来获取到。

伪元素：
CSS3官方定义翻译：
伪元素可以创建一些文档语言无法创建的虚拟元素。
比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。
同时，伪元素还可以创建源文档不存在的内容。
比如使用 ::before 或 ::after。
伪类、伪元素的区别

CSS优先级

!important优先级最高

specifity = A + B + C + D
A: 内联样式存在 A = 1， 不存在 A = 0
B: id选择器 出现的次数
C: 类选择器，伪类，属性选择器 出现的次数
D: 标签选择器，伪元素 出现的次数

//example
li:first-child h2 .title            /* (0, 0, 2, 2) */

盒模型

是什么:
页面是由一个个盒模型组成的，每个元素都可以视为一个盒模型
包括：
从外到内： margin -> border -> padding -> content
分类：
标准盒模型 | IE盒模型
区别：
标准盒模型的内容大小 = content的大小
IE盒模型的内容大小 = content + padding + border
如何设置盒模型的种类：
box-sizing: content-box
box-sizing: border-box

flex布局

对某元素设置display:flex;即变为弹性布局

·justify-content：x轴对齐方式

.box{
    justify-content:flex-start | flex-end | center | space-between |space-around;
    //左对齐|右对齐|居中|两端对齐，项目之间的间隔都相等|每个项目两侧的间隔相等，该间隔 = 2*项目与边框的间隔。
}

·align-items：y轴对齐方式

.box{
    align-items:flex-start | flex-end | center |baseline | stretch;
    //上对齐|下对齐|居中|以第一行文字的基线对齐|占满容器(默认)
}

·align-content：多根轴线对齐方式，单根轴线无效

.box{
    align-content:flex-start | flex-end | center | spance-between | space-around |stretch;
}

·flex： flex-grow + flex-shrink + flex-basis //default: 0 1 auto

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

.align-self属性

align-self为单个项目设置对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

flex布局30分钟好贴

display:inline-block

inline（行内元素）:

使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 
不能更改元素的height，width的值，大小由内容撑开. 
可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.

block（块级元素）:

使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度. 
能够改变元素的height，width的值. 
可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.

inline-block（融合行内于块级）:

结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
用通俗的话讲，就是不独占一行的块级元素

display:inline-block

实现水平垂直居中

1.不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）

.child{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
} 

2.确定了当前div的宽度，margin值为当前div宽度一半的负值

.child{
    width:600px;
    height: 600px;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-300px;
    margin-top:-300px;
} 

3.绝对定位下top left right bottom 都设置0

.child{
    width: 600px;
    height: 600px;
    background: red;
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

4.利用flex布局

.child{
    display:flex;
    align-items:center;
    justify-content:center;
}

5.table-cell实现水平垂直居中: table-cell middle center组合使用

.child {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

margin上下元素重叠情况

重叠的意义：
上下排列一系列规则的块级元素（如段落P）时，块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离
重叠的情况：
块级盒模型相邻的上下margin会发生重叠
margin都为正或都为负，取绝对值最大的margin
margin不都为正/负，用最大正值+最小负值

不重叠的情况：
水平margin永远不会重叠
·相邻盒模型，有一个是浮动的，不重叠，契额浮动盒模型与子元素也不重叠
·设置overflow属性的元素和子元素不重叠
·绝对定位 和 display:inline 不会重叠
·根元素的垂直margin不会被重叠
防止外边距重叠的方法：
内层元素绝对定位 postion:absolute:
外层元素 overflow:hidden;
内层元素 加float:left;或display:inline-block;

原文

margin为负值产生的影响及应用

margin为负值产生的影响及应用

JavaScript-----------------

原型、原型链

什么是原型？
我们创建的每个函数都有一个prototype属性，这个属性是一个指针，指向一个对象，这个对象包含了由特定类型的所有实例可以共享的属性、方法，prototype就是通过调用构造函数创建的对象实例的原型对象
为什么使用原型？
可以让对象的实例共享它所包含的属性和方法，不必在构造函数中添加定义对象信息，而是可以将这些信息添加到原型中（如果使用构造函数就要让每个方法都在实例中创建一遍）
什么是原型链？
_proto_是实例指向原型对象的一个指针，是任何对象都有的属性,js万物皆对象，所以就形成了一条由_proto_连起来的链条，递归访问到头，终值为null

在读取一个实例的属性时，如果该属性在当前实例没有找到，那么就会循着_proto_指定的原型继续向上找，如果还找不到，则寻找原型的原型，如果一直没有找到，则直到搜索到null为止

function Father(){             //被继承的函数叫做超类型（父类，基类）
    this.name = "Jack";
}

function Son(){          //继承的函数叫做子类型（子类，派生类）
    this.age = 10;
}
//通过原型链继承，赋值给子类型的原型属性
//new Father()会将father构造里的信息和原型里的信息都交给Son

Son.prototype = new Father();//Son继承了Father,通过原型，形成链条

var son = new Son();
alert(son.name);//弹出 Jack

原型、原型链

原型继承：

手撕节流防抖

防抖：

window.onresize =()=> fangdou();
var fangdou = debounce(func,wait);
function debounce(func, wait) {
      let timeout, context, args; //默认都是undefined

      return function() {
        context = this;
        args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
          //执行的时候到了
          func.apply(context, args);
        }, wait);
      };
    }

节流：

window.onresize =()=> jieliu();
var jieliu = throttle(func,wait);
function throttle(func, wait) {
      let context,args,doSomething = true;
      
      return function() {
        if (!doSomething) 
            return;
        context = this;
        args = arguments;
        doSomething = false;
        setTimeout(function() {
          //执行的时候到了
          func.apply(context, args);
          doSomething = true;
        }, wait);
      };
    }

10.toString()报错

在JavaScript中，数字后面的"."操作符是的意义是不确定。因为它既可能是一个浮点数的标志，又可能是取一个对象的属性的运算符。但是JavaScript的解释器把他当做了浮点数的标志
--from stackoverflow

console.log((10.).toString());//正常
console.log((10.)toString());//报错

函数表达式和函数声明的区别

区别：
解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问）；
函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解释执行。

函数声明：

alert(sum(10,10);
function sum(a,b){
return a+b; //20
}

函数表达式：

alert(sum(10,10));
var sum = function(a,b){
return a+b; //报错
}

高阶函数

定义：
高阶函数是对其他函数进行操作的函数，可以将它们作为参数或返回它们。

高阶函数源自于函数式编程，是函数式编程的基本技术。
函数式编程：
将函数作为参数传递给其他函数并且能够将函数作为值返回

Promise

三种状态： resolve reject pending
构建Promise

function myPromise() {
        var promise = new Promise(function(resolve,reject){
        if(/*操作成功*/)
            resolve(data);
        else
            reject(error);
    });
    return promise; 
}

异步操作成功调用resolve，将结果作为参数传递出去
异步操作失败调用reject，将报出的错误作为参数传递出去

Promise构建完成后，使用then方法指定resolve状态和reject状态的回调函数
promise.then(成功回调函数，失败的回调函数（非必要）)
//这两个函数都接受promise传出的值作为参数

promise.then(function(data) {
    do xxxx for success
 },function(error){do xxxx for failure});

Promise新建后就执行，then方法指定的回调函数会在当前脚本的所有同步任务执行结束后再执行
Promise的优势在于，可以在then方法中继续写Promise对象并返回，然后继续调用then来进行回调操作。能够简化层层回调的写法。
Promise的精髓在于，用维护状态、传递状态的方式使得回调函数能够及时调用，比传递callback要简单、灵活
Promise的其他方法

.catch()
用于指定发生错误时的回调函数，等同于reject部分
和reject的区别：
promise.then(onFulfilled,onRejected)在onFulfilled发生异常，在onRejected中捕获不到
promise.then(onFulfilled).catch(onRejected)能够捕获异常。也可以用then替换，只是写法不同。本质上没有区别

.all()
用于将多个Promise实例包装成一个新的Promise实例

var p = Promise.all([p1, p2, p3]);

p1p2p3都需为promise实例
当p1p2p3都为fulfilled时，p才会变为fulfilled
只要有一个变为rejected，p就会变成rejected

.race()
用于将多个Promise实例包装成一个新的Promise实例
与all()的区别类似于 AND 和 OR
p1p2p3有一个状态发生改变，p的状态就发生改变，并返回第一个改变状态的promsie返回值，传递给p

.done()
Promise 对象的回调链，不管以then方法或catch方法结尾，要是最后一个方法抛出错误，都有可能无法捕捉到（因为 Promise 内部的错误不会冒泡到全局）。因此，我们可以提供一个done方法，总是处于回调链的尾端，保证抛出任何可能出现的错误。
done方法的使用，可以像then方法那样用，提供fulfilled和rejected状态的回调函数，也可以不提供任何参数。但不管怎样，done都会捕捉到任何可能出现的错误，并向全局抛出

.finally()
finally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。它与done方法的最大区别，它接受一个普通的回调函数作为参数，该函数不管怎样都必须执行。

.resolve()
看作new Promise()的快捷方式
实例：

Promise.resolve('Success');

/*******等同于*******/
new Promise(function (resolve) {
    resolve('Success');
});

让对象立刻进入resolved状态

promise封装ajax

function ajaxPromise() {
    var getJSON = function(url) {
        var promise = new Promise(function(resolve,reject){
            var client = new XMLHttpRequest();
            client.open('GET',url);
            client.onreadystatechange = handler;
            client.responseType = 'json';
            client.setRequestHeader('Accept','application/json');
            client.send();

            function handler() {
                if(this.readyState !== 4) {
                    return ;
                }
                if(this.status === 200) {
                    resolve(this.response);
                } else {
                    reject(new Error(this.statusText));
                }
            }
        }); 
    };
}

跨域

数组去重

let arr = [11, 23, 26, 23,23, 11, 9,1,1,2,2]
function filterUnique (arr){
    var arr1 = arr.filter(i => arr.indexOf(i) !== arr.lastIndexOf(i))
    return arr1;
}
 
console.log(filterUnique(arr)); 
var result=new Set(filterUnique(arr));
var result=[...result];
console.log(result);

Vue--------------------------

父子组件通信

子组件访问父组件
1.prop
子组件的props选项能够接收来自父组件数据
·静态传递
子组件通过props选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据了。
·动态传递
需要动态的数据。这时候就可以用 v-bind 来实现。通过v-bind绑定props的自定义的属性，传递去过的就不是静态的字符串了，它可以是一个表达式、布尔值、对象等等任何类型的值。

2.this.parent 直接访问父组件

3.this.$emit()
需要在父组件调用子组件时绑定 @change='dosomething'
//dosomething为父组件方法
在子组件中this.$emit('change')可访问父组件

父组件访问子组件

1.$refs
·如果ref用在组件上，指向的是组件实例，可以理解为对子组件的索引，通过$ref可能获取到在子组件里定义的属性和方法。
·如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似。
vue中如果父组件想调用子组件的方法，可以在子组件中加上ref，然后通过this.$refs.ref.method调用

prop和$ref之间的区别：
prop 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。
$ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。

兄弟组件通信

1.子1传父，父传子2
2.使用vuex进行兄弟组件通信的核心思路就是将vuex作为一个store(vuex被设计的原因之一)，将每个子组件的数据都存放进去，每个子组件都从vuex里获取数据，其实就是一句话——把vuex作为一个桥
3.eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。
使用vuex进行兄弟组件通信

v-if和v-show的区别

相同点：v-if与v-show都可以动态控制dom元素显示隐藏
不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。

Vue的生命周期

beforeCreate（创建前） 在数据观测和初始化事件还未开始
created（创建后） 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来
beforeMount（载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted（载入后） 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
1.什么是vue生命周期？
答： Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

2.vue生命周期的作用是什么？
答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

3.vue生命周期总共有几个阶段？
答：它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。

4.第一次页面加载会触发哪几个钩子？
答：会触发 下面这几个beforeCreate, created, beforeMount, mounted 。

5.DOM 渲染在 哪个周期中就已经完成？
答：DOM 渲染在 mounted 中就已经完成了。
Vue生命周期，面试常见问题

vue和react的区别

react学习曲线陡峭 社区活跃成熟，所以开发相对灵活多变 更适合大型项目开发
react的函数式编程也更容易实现前端自动化测试
vue门槛低，学习曲线平缓

两者本质的区别：模板和组件化的区别

Vue本质是MVVM框架，由MVC发展而来(model-view-controller)；
React是前端组件化框架，由后端组件化发展而来；
Vue使用模板
React使用JSX
React本身就是组件化
Vue是在MVVM上扩展的

写法上 React类似的组件写法 Vue声明式写法

共同点：

都支持组件化，都是数据驱动视图

MVVM

链接描述

Webpack--------------------

React-------------------------

Redux

redux

数据结构---------------------

计算机网络--------------------

HTTP和HTTPS的区别

一、Http和Https的基本概念

Http：超文本传输协议（Http，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。设计Http最初的目的是为了提供一种发布和接收HTML页面的方法。它可以使浏览器更加高效。Http协议是以明文方式发送信息的，如果黑客截取了Web浏览器和服务器之间的传输报文，就可以直接获得其中的信息。

Https：是以安全为目标的Http通道，是Http的安全版。Https的安全基础是SSL。SSL协议位于TCP/IP协议与各种应用层协议之间，为数据通讯提供安全支持。SSL协议可分为两层：SSL记录协议（SSL Record Protocol），它建立在可靠的传输协议（如TCP）之上，为高层协议提供数据封装、压缩、加密等基本功能的支持。SSL握手协议（SSL Handshake Protocol），它建立在SSL记录协议之上，用于在实际的数据传输开始前，通讯双方进行身份认证、协商加密算法、交换加密密钥等。

二、Http与Https的区别

1、https协议需要到CA申请证书，一般免费证书较少，因而需要一定费用。(原来网易官网是http，而网易邮箱是https。)

2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、http的连接很简单，是无状态的。Https协议是由SSL+Http协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

面试题HTTP和https的区别