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

海瑞菌·部落格發表於2019-05-20
Web前端

今天是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;
    }
}

 

相關文章