知识点记录

1. H5新特性

1.新增了语义化标签 header footer

2.新增了视频video 音频sudio

3.新增了canvas和svg绘图

4.新增了拖拽API(drapable)

5.新增了地理位置

6.新增了多线程技术web worker

7.新增了即时通讯web socket

1. Css3新特性

1. 增加了transiton渐变，Animation动画，选择器，阴影，弹性布局，媒体查询

1. W3c标准

 结构，行为，表现

1. 文档类型需要声明（doctype）
2. 编码格式需要声明（meta charset = ‘utf-8’）
3. javascript需要定义
4. css需要定义
5. 标签名称和标签内属性名字小写等

1. 浏览器兼容

不同浏览器中标签的内外间距不同      图片有默认间距

1. 怎么解决兼容

  Ie浏览器可以使用css Hack的方式解决，具体做法是根据不同Ie版本分别在前面使用* - + 等开发效率低

   谷歌实在属性前面加上-webkit   火狐是  -moz

   可以使用webpack当中的postcss加载器来解决

1. 伪类,为元素,块级元素，行内元素，行内块元素

块级元素：div p h1-h6 ul ol li dl dt dd tr

行内块元素：img input

行内元素：span a font strong em i

1. 伪类：用于当已有元素处于某个状态时。为其添加样式，这个状态时根据用户行为而动态变化的   hover   active  link  focus  first-child
2. 伪元素：用于创建一些不在文档树中的元素，并为其添加样式 (选择某个给其添加样式) before   after

1. 如何使用媒体查询/媒体查询原理

根据屏幕尺寸的不同，动态设置html字体大小，html字体大小即为rem大小，通过给其他标签设置rem来实现不同尺寸屏幕大小

em是相对于父级标签的字体大小来定义的

rem是相对于html标签的字体大小来定义的

1. 常用的适配手段

1. 媒体查询
2. 使用各种UI框架
3. 弹性布局

flex时Fiexible Box的缩写，意为弹性布局，用来为盒模型提供最大的灵活性传统的 布局方式，基于盒模型，依赖displat+position+float 。他对于那些特殊的布局非常 不方便 比如垂直居中

Flex布局可以快速且方便的对子元素进行水平和垂直方向的排列，且可以设置元素的起始位置和排列方式，相比于传统的布局，既不需要定位也不需要请浮动

1. BFC

Block formatting context块级格式化上下文，它是独立的渲染区域，只有Block-level box参与，规定了内部的Block-level box如何布局，并且与这个区域外部毫无关系

作用：避免margin重叠，清楚浮动

对BFC规范（块级格式化上下文）的理解

BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响

BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。

怎么触发BFC

1. float的值left或right

2. overflow的值不为visible（默认）

3. display的值为inline-block、table-cell、table-caption

4. position的值为absolute（绝对定位）或fixed固定定位

规则：

1、BFC的区域不会与float box重叠。

2、BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

3、计算BFC的高度时，浮动元素也会参与计算。

4、内部的Box会在垂直方向上一个接一个放置。

5、Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。

BEC的应用

1、可以用来自适应布局

利用BFC的这个原理可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。

给左边盒子加浮动，右边盒子加overflow:hidden;变成BFC，就可以消除外部左边盒子因浮动对他的影响

2、可以清除浮动

一个父元素中的子元素，设置浮动时，父元素没有设置高度，这时子元素脱离文档流，父元素感知不到子元素的高度，造成父元素的塌陷。 这时候给父元素添加overflow:hidden / auto,变成BFC就可以解决这种问题。

什么是回流什么是重绘以及区别？

回流:

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree.

重绘:

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘.

区别:

回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流，当页面布局和几何属性改变时就需要回流

1. 清楚浮动的方式有哪些？

1. 浮动元素后新增标签，并且设置属性clear:both
2. 浮动元素的父标签设置属性 overflow:hidden
3. 设置伪类选择器 XX:after{clear:both}

从浏览器地址栏输入url到显示页面的步骤

· 浏览器根据请求的 URL 交给 DNS 进行域名解析，找到真实 IP 地址，向服务器发起请求；

· 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、CSS、JS、images等）；

· 浏览器对加载到的资源（HTML、CSS、JS、images等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；

· 载入解析到的资源文件，渲染页面，完成。

页面导入时，使用link和@import有什么区别

页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面链接调用，其中外面引用有两种：Link引入和@import导入，两者都是外部引用CSS的方式，但是存在一定的区别：

1、从属关系: link是标签，@import是css提供的.

2. 加载差异: link： 结构和样式同时加载；而@import 先加载结构，后加载样式

3. 兼容性:link没有兼容问题，@import不兼容ie5以下的浏览器.

4.可操作性: link可以通过js操作dom插入link标签改变样式，而@import不能

1. Js函数

1. 函数（方法）是油时间驱动的或者当它被调用时执行的可重复使用的代码块

1. 函数可以看做一个功能 内部封装了一些操作，只有我们去调用的时候才会执行

1. this指向

This永远指向最后一个调用它的那个对象

如何解决this指向问题？

1. 使用箭头函数

1. 写法不同：箭头函数使用箭头定义，普通函数没有
2. 箭头函数不能用于构造函数，普通函数可以用于构造函数，以次创建对象    实例
3. 箭头函数的this指向不同

箭头函数本身没有this 它的this 是父级普通函数的this

在普通函数中，this总是指向调用它的对象，如果用作构造函数，它指向创建的实例对象

1. 箭头函数不具有arguments对象

1.  它是函数一创建就有的
2.  是一个类数组（并不是一个真正的数组）
3.  方法调用的时候。可以得到所有传进来的参数

5.  箭头函数不能当做generator函数 不能使用yield关键字

6.  箭头函数不具有prototype原型对象

7.  箭头函数不具有super

1. 函数内部_this = this
2. 使用apply   call  bind

1.都可以更改this指向

2.call，bind后面的第一个参数是指向的对象，第二个参数是往对象传的值

3、apply后面的第一个参数是指向的对象，第二个参数是数组，数组里面是 往对象传的值（arguments   全部参数）

4.call和apply更改this指向会自动调用，bind需要手动调用

xw.say.call(xh,"实验小学","六年级");

xw.say.apply(xh,["实验小学","六年级"]);

xw.say.bind(xh,"实验小学","六年级")();

1. new实例化一个对象

1、创建一个新对象，如：var person = {};

2、新对象的_proto_属性指向构造函数的原型对象。

3、将构造函数的作用域赋值给新对象。（也所以this对象指向新对象）

4、执行构造函数内部的代码，将属性添加给person中的this对象。

5、返回新对象person。

function Person(name) {

    this.name = name

    this.sayName= function () {

        console.log(`我是 ${this.name}!`)

    }

}

function myNew(that, ...args) {

    const obj = Object.create(null)

    obj.__proto__ = that.prototype

    const res = that.call(obj, ...args)

    return res instanceof Object ? res : obj

}

let person= myNew(Person, '小明')

person.sayWorld(); // 我是小明

13.JavaScript的事件流

事件冒泡：事件有最具体的元素接受，让后逐级向上传播

事件捕捉：事件由最不具体的节点接受，让后逐级向下，一直到最具体的

DOM事件流：三个阶段 事件捕捉 目标阶段 事件冒泡

14.防抖和节流

1. 防抖

当持续触发事件时，一段时间内只能触发一次。将几次操作合并为一次操作进行

let telInput = document.querySelector('input');

telInput.addEventListener('input', function(e) {

        let timeOut = null;

        if(timeOut){

clearTimeout(timeOut)

}else{

timeOut = setTimeout(()=>{

  $.ajax({})

  },2000)

    }

})

1. 节流

当持续触发事件时，保证一定时间内只调用一次事件处理函数

let throttle = function(func, delay) {            

let prev = Date.now();            

return function() {                

var context = this;                

var args = arguments;                

var now = Date.now();                

if (now - prev >= delay) {                    

func.apply(context, args);                    

prev = Date.now();                

}            

}        

}        

function demo() {            

//do something

    //ajax({})

    //...      

}        

box.addEventListener('touchmove', throttle(demo, 2000));

1. promise generator aysnc/await

promise比较简单，也是最常用的，主要就是将原来用  回调函数异步编程的方法  转成  relsove和reject触发事件；

    对象内含有四个方法，then()异步请求成功后

                      catch()异步请求错误的回调方法

                      finally()请求之后无论是什么状态都会执行

                      resolve()将现有对象转换为Promise对象

                      all()此方法用于将多个Promise实例包装成一个新的promise  实例。

                      race()也是将多个Promise实例包装成一个新的promise实例

                      reject()返回一个状态为Rejected的新Promise实例。

    有点：让回调函数变成了规范的链式写法，程序流程可以看的很清楚

    缺点:编写的难度比传统写法高，阅读代码也不是一眼可以看懂

const promise = new Promise((resolve, reject) => {

    // do something here ...

    if (success) {

        resolve(value); // fulfilled

    } else {

        reject(error); // rejected

    }

});

generator是一个迭代生成器,其返回值为迭代器(lterator),是ES6标准引入的新的数据类型，主要用于异步编程,它借鉴于Python中的generator概念和语法；

generator函数内有两个重要方法，1 yield表达式 2.next()

Generator 函数是分段执行的，yield表达式是暂停执行的标记，而 next方法可以恢复执行

优点：1.利用循环，每调用一次，就使用一次，不占内存空间 2.打破了普通函数执行的完整性

缺点: 需要用next()方法手动调用,直接调用返回无效iterator

function fn(){ // 定义一个Generator函数

yield ‘hello’;

yield ‘world’;

return ‘end’;

}

var f1 =fn(); // 调用Generator函数

console.log(f1); // fn {[[GeneratorStatus]]: “suspended”}

console.log(f1.next()); // {value: “hello”, done: false}

console.log(f1.next()); // {value: “world”, done: false}

console.log(f1.next()); // {value: “end”, done: true}

console.log(f1.next()); // {value: undefined, done: true}

   

    async：异步函数

    await：同步操作

     es7中提出来的异步解决方法,是目前解决异步编程终它基极解决方案,于promise为基础,其实也就是generator的高级语法糖,本身自己就相当于一个迭代生成器(状态机),它并不需要手动通过next()来调用自己,与普通函数一样

     

    async就相当于generator函数中的*,await相当于yield,

    async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。

     function getSomething() {

          return "something";

    }

    async function testAsync() {

        return Promise.resolve("hello async");

    }

    async function test() {

        //await是在等待一个async函数完成

        const v1 = await getSomething();

        //await后面不仅可以接Promise，还可以接普通函数或者直接量

        const v2 = await testAsync();

        console.log(v1, v2);

    }

1. 原型，原型链，构造函数，继承

构造函数原型：每一个构造函数的内部都有一个 prototype 属性，这个属性时一个 指针，指向另一个对象，这个对象包含了可以由该构造函数的所有实例共 享的属性和方法。

对象原型：当我们使用构造函数新建一个对象后，在这个对象的内部将包含一个指 针，这个指针指向构造函数的 prototype 属性对应的值，这个指针称为 对象的原型。

当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype，然后Object.prototype.__proto _ _为null。

原型：每个JavaScript对象创建的时候，都会与之关联另一个对象，这个对象就是我们所说的原型，每个对象都会从原型中继承属性

  在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象

  每个对象都会有一个—proto——属性，整个属性指向的是该对象的原型

  每个原型都有一个constructor属性，指向该关联的构造函数

原型链：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的指针，如果我们让原型对象等于另一个类型的实例，此时的原型对象将包含一个指向另一个原型的指针，相应的，另一个原型中也包含一个指向另一个原型的指针，假如另一个原型又是另一个原型的实例的实例，就构成了实例与原型的链条，这就是所谓的原型链

构造函数：它是在创建对象时候执行的，而且只执行一次，并先于其他成员函数执行，构造函数不需要人为调用，也不能被人为调用，一般声明为公有的，每个构造函数应该为每个数据成员提供初始化

继承：继承是子类对象里藏着一个父类对象。可以认为，创建子类对象时，也就同时创建了一个隐藏的父类对象。

1. 子类继承了父类的方法和属性，但是子类不能访问父类的private方法和属性
2. 使用子类的引用可以调用父类的公有属性
3. 使用子类的引用可以调用父类的方法
4. 就好像子类的引用可以一物两用，既可以当做父类的引用使用，又可以当子类      的引用使用

1. js 基本数据类型

1.基本数据类型：js 一共有六种基本数据类型，分别是 Undefined、Null、Boolean、Number、 String，还有在 ES6 中新增的 Symbol 类型。

Symbol 代表创建后独一无二且不可变的数据类型，它的出现我认为 主要是为了解决可能出现的全局变量冲突的问题。

2.引用数据类型: 引用数据类型统称为 Object 对象，主要包括对象、数组、函数、日 期和正则等等。 

3.判断数据类型的方法：

1.基本类型判断：在 JavaScript 里 使用 typeof 来判断数据类型，只 能区分基本类型，即’number’,’string’,’ undefined’,’boolean’， ‘object ‘,"function"六种

2.引用类型判断：区别对象、数组、函数可以使用 Object.prototype.toString.call 方法。判断某个对象值属于哪种<