【web前端】面题整理（2）

wuhairui 2019-05-20 原文

今天是520，祝各位520快乐！

DOM节点统计

DOM 的体积过大会影响页面性能，假如你想在用户关闭页面时统计（计算并反馈给服务器）当前页面中元素节点的数量总和、元素节点的最大嵌套深度以及最大子元素个数，请用 JS 配合原生 DOM API 实现该需求（不用考虑陈旧浏览器以及在现代浏览器中的兼容性，可以使用任意浏览器的最新特性；不用考虑 shadow DOM）。比如在如下页面中运行后

<html>
  <head></head>
  <body>
    <div>
      <span>f</span>
      <span>o</span>
      <span>o</span>
    </div>
  </body>
</html>

会得出这样一个对象：

{
  totalElementsCount: 7,
  maxDOMTreeDepth: 4,
  maxChildrenCount: 3
}

我的答案

const obj={}
class Ele{
    constructor(ele){
        this.ele=ele;
        this.funum=1;
    }
    //取当前节点的元素深度
    getEleDepth(){
        let fuele=this.ele.parentNode;
        if(fuele!==document){
            this.funum++;
            this.ele=fuele;
            return this.getEleDepth();
        }else{
            return this.funum;
        }
    }
    //去当前节点的子元素个数
    getEleSubNum(){
        let zieles=this.ele.childNodes,zinum=0;
        for(let i=0;i<zieles.length;i++){
            if(zieles[i].nodeName!=='#text'){
                zinum++;
            }
        }
        return zinum;
    }
}
const totalElements=document.getElementsByTagName("*")
obj.totalElementsCount=totalElements.length;//dom中的所有节点数量

let eleDepthArr=[];
let eleSubArr=[];
for(let i=0;i<totalElements.length;i++){
    eleDepthArr.push(new Ele(totalElements[i]).getEleDepth())
    eleSubArr.push(new Ele(totalElements[i]).getEleSubNum())
}
eleDepthArr=eleDepthArr.sort((a,b)=>(b-a))
eleSubArr=eleSubArr.sort((a,b)=>(b-a))
obj.maxDOMTreeDepth=eleDepthArr[0]//元素节点的最大嵌套深度
obj.maxChildrenCount=eleSubArr[0]//最大子元素个数

console.log(obj)

按图完成布局和拖动效果

在已提供的HTML片段的基础上继续编写 CSS 和 JS，已完成如下效果图所演示的效果，且要求左侧left部分最小宽度100px，最大宽度300px。提示：可以使用 mousedown, mouseup, mousemove 几个事件来组合处理拖动效果，也欢迎使用其他方案。
已知HTML片段：

效果图：

给点html：

<html>
  <head>
    <title>按图完成布局和拖动效果</title>
  </head>
  <body>
    <div class="container">
     <div class="left">left<div class="drag"></div></div>
      <div class="right">right</div>
    </div>
  </body>
</html>

给定部分css：

.container {
  width: 100%;
  height: 500px;
  min-width: 500px;
  overflow: scroll;
}
.left,
.right {
  border: 1px solid #ccc;
  font-size: 22px;
  color: #333;
  font-weight: bold;
  text-align: center;
  line-height: 500px;
}
.right {
  border-left: 0 none;
}

我的改动：

有些未完成。。。暂时想到是这个思路

.container {
    width: 100%;
    height: 500px;
    min-width: 500px;
    overflow: scroll;
    /*--*/
    display: flex;
    justify-content: flex-start;

}
.left,.right {
    border: 1px solid #ccc;
    font-size: 22px;
    color: #333;
    font-weight: bold;
    text-align: center;
    line-height: 500px;
}
.right {
    border-left: 0 none;

    width: 100%;
}
/*--*/
.left{
    max-width: 300px;
    min-width: 100px;
    position: relative;
}
.drag{
    height: 100%;
    width: 10px;
    float: right;
    margin-right: -5px;
}

<div class="container">
    <div id="left" class="left">
        left
        <div id="drag" class="drag"></div>
    </div>
    <div class="right">right</div>
</div>

const drag=document.getElementById("drag");
const left=document.getElementById("left");
drag.onmousedown=function(e){
    // console.log(e.clientX)
    let mx=e.clientX
    this.onmousemove=function(){
        let cw=left.clientWidth;
        console.log(e.clientX)
    }
    this.onmouseup=function(){
        console.log(3)
        this.onmousemove=null;
        this.onmouseup=null;
    }
}