- H5新特性
1.新增了语义化标签 header footer
2.新增了视频video 音频sudio
3.新增了canvas和svg绘图
4.新增了拖拽API(drapable)
5.新增了地理位置
6.新增了多线程技术web worker
7.新增了即时通讯web socket
- Css3新特性
- 增加了transiton渐变,Animation动画,选择器,阴影,弹性布局,媒体查询
- W3c标准
结构,行为,表现
- 文档类型需要声明(doctype)
- 编码格式需要声明(meta charset = ‘utf-8’)
- javascript需要定义
- css需要定义
- 标签名称和标签内属性名字小写等
- 浏览器兼容
不同浏览器中标签的内外间距不同 图片有默认间距
- 怎么解决兼容
Ie浏览器可以使用css Hack的方式解决,具体做法是根据不同Ie版本分别在前面使用* - + 等开发效率低
谷歌实在属性前面加上-webkit 火狐是 -moz
可以使用webpack当中的postcss加载器来解决
- 伪类,为元素,块级元素,行内元素,行内块元素
块级元素:div p h1-h6 ul ol li dl dt dd tr
行内块元素:img input
行内元素:span a font strong em i
- 伪类:用于当已有元素处于某个状态时。为其添加样式,这个状态时根据用户行为而动态变化的 hover active link focus first-child
- 伪元素:用于创建一些不在文档树中的元素,并为其添加样式 (选择某个给其添加样式) before after
- 如何使用媒体查询/媒体查询原理
根据屏幕尺寸的不同,动态设置html字体大小,html字体大小即为rem大小,通过给其他标签设置rem来实现不同尺寸屏幕大小
em是相对于父级标签的字体大小来定义的
rem是相对于html标签的字体大小来定义的
- 常用的适配手段
- 媒体查询
- 使用各种UI框架
- 弹性布局
flex时Fiexible Box的缩写,意为弹性布局,用来为盒模型提供最大的灵活性传统的 布局方式,基于盒模型,依赖displat+position+float 。他对于那些特殊的布局非常 不方便 比如垂直居中
Flex布局可以快速且方便的对子元素进行水平和垂直方向的排列,且可以设置元素的起始位置和排列方式,相比于传统的布局,既不需要定位也不需要请浮动
- 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。则就叫称为重绘.
区别:
回流必将引起重绘,而重绘不一定会引起回流。比如:只有颜色改变的时候就只会发生重绘而不会引起回流,当页面布局和几何属性改变时就需要回流
- 清楚浮动的方式有哪些?
- 浮动元素后新增标签,并且设置属性clear:both
- 浮动元素的父标签设置属性 overflow:hidden
- 设置伪类选择器 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不能
- Js函数
- 函数(方法)是油时间驱动的或者当它被调用时执行的可重复使用的代码块
- 函数可以看做一个功能 内部封装了一些操作,只有我们去调用的时候才会执行
- this指向
This永远指向最后一个调用它的那个对象
如何解决this指向问题?
- 使用箭头函数
- 写法不同:箭头函数使用箭头定义,普通函数没有
- 箭头函数不能用于构造函数,普通函数可以用于构造函数,以次创建对象 实例
- 箭头函数的this指向不同
箭头函数本身没有this 它的this 是父级普通函数的this
在普通函数中,this总是指向调用它的对象,如果用作构造函数,它指向创建的实例对象
- 箭头函数不具有arguments对象
- 它是函数一创建就有的
- 是一个类数组(并不是一个真正的数组)
- 方法调用的时候。可以得到所有传进来的参数
5. 箭头函数不能当做generator函数 不能使用yield关键字
6. 箭头函数不具有prototype原型对象
7. 箭头函数不具有super
- 函数内部_this = this
- 使用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,"实验小学","六年级")();
- 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.防抖和节流
- 防抖
当持续触发事件时,一段时间内只能触发一次。将几次操作合并为一次操作进行
let telInput = document.querySelector('input');
telInput.addEventListener('input', function(e) {
let timeOut = null;
if(timeOut){
clearTimeout(timeOut)
}else{
timeOut = setTimeout(()=>{
$.ajax({})
},2000)
}
})
- 节流
当持续触发事件时,保证一定时间内只调用一次事件处理函数
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));
- 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);
}
- 原型,原型链,构造函数,继承
构造函数原型:每一个构造函数的内部都有一个 prototype 属性,这个属性时一个 指针,指向另一个对象,这个对象包含了可以由该构造函数的所有实例共 享的属性和方法。
对象原型:当我们使用构造函数新建一个对象后,在这个对象的内部将包含一个指 针,这个指针指向构造函数的 prototype 属性对应的值,这个指针称为 对象的原型。
当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么它就会去它的原型对象里找这个属性,这个原型对象又会有自己的原型,于是就这样一直找下去,也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype,然后Object.prototype.__proto _ _为null。
原型:每个JavaScript对象创建的时候,都会与之关联另一个对象,这个对象就是我们所说的原型,每个对象都会从原型中继承属性
在JavaScript中,每个函数都有一个prototype属性,这个属性指向函数的原型对象
每个对象都会有一个—proto——属性,整个属性指向的是该对象的原型
每个原型都有一个constructor属性,指向该关联的构造函数
原型链:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的指针,如果我们让原型对象等于另一个类型的实例,此时的原型对象将包含一个指向另一个原型的指针,相应的,另一个原型中也包含一个指向另一个原型的指针,假如另一个原型又是另一个原型的实例的实例,就构成了实例与原型的链条,这就是所谓的原型链
构造函数:它是在创建对象时候执行的,而且只执行一次,并先于其他成员函数执行,构造函数不需要人为调用,也不能被人为调用,一般声明为公有的,每个构造函数应该为每个数据成员提供初始化
继承:继承是子类对象里藏着一个父类对象。可以认为,创建子类对象时,也就同时创建了一个隐藏的父类对象。
- 子类继承了父类的方法和属性,但是子类不能访问父类的private方法和属性
- 使用子类的引用可以调用父类的公有属性
- 使用子类的引用可以调用父类的方法
- 就好像子类的引用可以一物两用,既可以当做父类的引用使用,又可以当子类 的引用使用
- 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 方法。判断某个对象值属于哪种<