前端面试总结（二）

1. JS 或者 OC实现多继承

function obj1 () {
	this.aaa = '124'

	// body...
}
	obj1.prototype.b = function aa () {

		console.log('111')
	}

function obj2 () {

	this.bbb = '123'

	// body...
}
	obj2.prototype.a = function obj2func () {

		console.log('222')
	}

function obj3 () {
	// body...
	obj2.call(this)
}

obj3.prototype = new obj1()
obj3.prototype.constructor = obj3

// var obj3 = new obj3()
console.log('111')

for (var i  in  obj2.prototype){

	// console.log('111')

	// console.log(obj2.prototype[i])
	obj3.prototype[i] = obj2.prototype[i]
}


var obj4= new obj3()
obj4.a()
obj4.b()
console.log(obj4.aaa,obj4.bbb)

2. 实现水平居中或者垂直剧中的多种方式

行内标签

/*第一种*/
/*display: flex;*/
/*justify-content: center;*/
/*align-items: center;*/
/*第二种*/
/*text-align: center;*/
/*第三种*/
/*position: relative;*/

块级标签：

子元素：margin：0 auto

 

3. href和src的区别

href 可以导入a、link，不影响当前界面

src会先下载src资源，在加载当前界面，所以script放到最后

 

import与link的区别

1)从属关系

link是HTML提供的签，除了加载CSS外，还可以定义rel属性等

@import是CSS提供的语法规则，只能用于加载CSS

2)加载的顺序

link引入的css在页面加载的时候会同时被加载

@import引用的CSS会等到页面加载完后再加载
3)兼容性的区别

@import是CSS2.1 提出的，只在IE5+以上才能被识别

link是HTML标签，不存在兼容问题

4)DOM可控性的区别

可以通过js操作DOM，插入link标签来改变样式

由于DOM方法是基于文档的，无法使用@import的方法插入样式

function removeRule(num, index){
    var sheet = document.styleSheets[num];
    if (typeof sheet.deleteRule != 'undefined') {
        sheet.deleteRule(index);
    }else if(typeof sheet.removeRule != 'undefined'){
        sheet.removeRule(index);
    }
}

function addRule(num, selector, selectorText, position){
    //获取要操作的link标签对象
    var sheet = document.styleSheets[num];
    if (typeof sheet.insertRule != 'undefined'){//w3c
        sheet.insertRule(selector + '{' + selectorText + '}', position);
    }else if (typeof sheet.addRule != 'undefined'){//ie
        sheet.addRule(selector, selectorText, position)
    }
}

5)权重的区别

link引入的样式权重大于@import引入的样式意思是：是在link标签中引入的css文件中使用@import时，相同样式将被该css文件本身的样式覆盖

3. 对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素

4. 天生的inline-block属性的元素

block：块级标签，独占一行，可以设置高和宽；div、li、ul、h1、h2、p

inline-block：不独占一行，可以设置高和宽；img、button、input、TEXTAREA

inline：不独占一行，不可以设置高和宽；lable、span、a、em

5. iframe有什么优缺点

6. ES6解构

var b ={foo:'123',baz:'456',aaa:'000',bbb:'111'}

var  {
    v = '1121',
    foo:nnn, // 别名 nnn=‘123’，foo undefine
    ...rest
} = b

console.log(foo)

7. opercity与rgba的区别

opercity：子元素也会受影响

rgba：只有当前元素透明

8.为什么优先加载CSS

 

9.性能优化有什么方式

10. vue 双向绑定的原理

11.JS哪些操作会造成内存泄漏

12.CSS3 新增加的伪类

13. 平时工作中如何解决问题或者学习

14. 知道哪些盒模型

15. vue修饰符

prevent：阻止默认事件

once：只执行一次

capature：添加事件侦听器时使用事件捕获模式 -->

stop：阻止冒泡

self： 只当事件在该元素本身（而不是子元素）触发时触发回调

16.事件捕获与事件冒泡

17. 小程序框架taro