前端基础

1、事件代理、事件冒泡

“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown......）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

不使用时间代理的缺点：

1. 创建的js对象过多，占用内存

2.JS与DOM之间的关联过多，影响性能，容易造成内存泄漏

3.需要管理的函数过多，对于每个元素都要添加监听**

 

 

一句话描述冒泡的过程就是：事件源（EventTarget）A触发一事件E，浏览器会检查EventTarget A是否有注册对应的事件处理函数，如果有对应的处理函数，则调用，否则，事件传递到父节点AF上，然后重复前一过程直至事件传递到Window对象终止。

 

 

 

取消事件冒泡有两种方式：

标准的W3C 方式：e.stopPropagation();这里的stopPropagation是标准的事件对象的一个方法，调用即可

非标准的IE方式:ev.cancelBubble=true; 这里的cancelBubble是 IE事件对象的属性，设为true就可以了

不冒泡的事件有：

• abort blur error focus load mouseenter mouseleave resize unload

2、文档碎片

在需要多次使用 innerHTML 的地方，一般是推荐用 DocumentFragment 来缓存，最后一次性插入 body，从而减少浏览器的渲染，提高性能

如果我们要在一个ul中添加100个li，如果不使用文档碎片，那么我们就需要使用append经常100次的追加，这会导致浏览器一直不停的渲染，是非常消耗资源的。但是如果我们使用文档碎片了，我们可以先将100个li添加到文档碎片中，然后直接把这个文档碎片追加到ul中即可。所以文档碎片其实就是一个临时的仓库。

for(var i=0;i<5;i++)
{ 
    var op = document.createElement("span"); 
    var oText = document.createTextNode(i); 
    op.appendChild(oText); 
    document.body.appendChild(op); 
} 

var oDiv = document.createElement("div"); 
for(var i=0;i<10000;i++)
{ 
    var op = document.createElement("span"); 
    var oText = document.createTextNode(i); 
    op.appendChild(oText); 
    oDiv.appendChild(op);  
} 
document.body.appendChild(oDiv); 

但这样会在body中多添加一个div节点。用文档碎片就不会产生这种节点，引入createDocumentFragement()方法，它的作用是创建一个文档碎片，把要插入的新节点先插入它里面，然后再一次性地添加到document中。

//先创建文档碎片
​
var oFragmeng = document.createDocumentFragment(); 
​
​
for(var i=0;i<10000;i++)
​
{ 
​
    var op = document.createElement("span"); 
​
    var oText = document.createTextNode(i); 
​
    op.appendChild(oText); 
​
    //先附加在文档碎片中
​
    oFragmeng.appendChild(op);  
​
} 
​
​
//最后一次性添加到document中
​
document.body.appendChild(oFragmeng); 

3、querySelector支持的原生选择器

获取文档中第一个 <p> 元素：

document.querySelector("p");

获取文档中 class="example" 的第一个元素:

document.querySelector(".example");

获取文档中 class="example" 的第一个 <p> 元素:

document.querySelector("p.example");

获取文档中有 "target" 属性的第一个 <a> 元素：

document.querySelector("a[target]");

 

querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。

NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。

4、面向切面编程、面向对象编程、函数式编程

　AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来，这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出来之后， 再通过“动态织入”的方式掺入业务逻辑模块中。

\1. 简单AOP实现

简单的AOP实现，就是在原函数执行的前后，增加运行before和after两个增强方法，用这个新函数替换原函数，为此，我编写了一个类似于构造器的函数（后文就称它为构造器），代码如下：

// originFun为原函数，before和after为增强方法
    function constructor(originFun, before, after){
        function _class(){
            before.apply(this, arguments);
            originFun.apply(this, arguments);
            after.apply(this, arguments);
        }
        return _class;
    }

使用时，用构造器生成的新函数替换原函数即可，测试代码如下：

// 加法运算，作为测试的原函数
    function calcAdd(a,b){
        console.log(a + "+" + b + "=" + (a + b));
        return a+b;
    }
    // AOP增强
    calcAdd = constructor(calcAdd, function(){console.log("我在原方法前执行")}, function(){console.log("我在原方法后执行")});
    // 调用方法进行测试
    calcAdd(2, 3);

5、css样式书写规范

自己的问题

1.嵌套的样式太多了，会增加页面渲染和维护成本的

2.很多冗余没有抽出来

3.宽度分离，父元素定宽，子元素定义margin，padding，boorder

4.习惯在页面的less中定义body，html等父元素height

顺序 定位相关———>盒模型相关

6、常见事件的执行顺序

HTML DOM addEventListener() 方法

参数	描述
event	必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function	必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值:true - 事件句柄在捕获阶段执行false- false- 默认。事件句柄在冒泡阶段执行

 

 

 

7.macro-task(宏任务)和micro-task(微任务)

任务还可以分为宏任务和微任务 宏任务:macrotask 可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行,每一个宏任务会从头到尾将这个任务执行完毕，不会执行其它）包括整体代码script，setTimeout，setInterval 微任务:，可以理解是在当前 task 执行结束后立即执行的任务 包括Promise，process.nextTick

上代码

 

setTimeout(function() {
    console.log('1');
})
​
new Promise(function(resolve) {
    console.log('2');
}).then(function() {
    console.log('3');
})
​
console.log('4');
​
//打印顺序 2 4 3 1

首先整体代码是一个宏任务,遇到setTimeout,会创建另一个宏任务,接着执行当前的宏任务,Promise 新建后就会立即执行。所以会首先打印2，then方法是一个微任务，遇到then，添加到微任务队列，代码接着执行会打印4。此时宏任务执行完毕，接着就会检查当前微任务队列是否有微任务，如果有，立即执行当前的微任务（也就是then 打印3），当前微任务执行完毕之后，开始执行下一轮的宏任务setTimeout，会打印1。