前端面試復(fù)盤

Jason 發(fā)布于2019-08-29 12:21 / 2749人閱讀

摘要：從上面那段代碼可以看到，下的上外邊距只占了兩個(gè)距離的一半，所以兩個(gè)的間距是。下面分別對(duì)第和第個(gè)條件進(jìn)行了測(cè)試。關(guān)于這一點(diǎn)，兩個(gè)元素的間距是這樣計(jì)算的上的下外邊距包裹上的下內(nèi)邊距下的上外邊距可以看下面這個(gè)例子印證第三點(diǎn)。

昨天面了html5前端。
下面是其中3個(gè)問題：

雙外邊距疊加。

用原生js怎么實(shí)現(xiàn)div選項(xiàng)卡。

如何去實(shí)現(xiàn)一個(gè)插件。

一、雙外邊距折疊 問題描述

一上一下兩個(gè)div，上面div的下外邊距是10px，下面div的上外邊距是5px，這兩個(gè)div的距離是多少？

解析

10px。不是15px。

從上面那段代碼可以看到，下div的上外邊距只占了兩個(gè)div距離的一半，所以兩個(gè)div的間距是10px。

這里是關(guān)于這個(gè)問題的一個(gè)描述：https://www.zhihu.com/questio...

發(fā)生的條件：

兩個(gè)或多個(gè)。

毗鄰。

垂直方向。

下面分別對(duì)第2和第3個(gè)條件進(jìn)行了測(cè)試。

與之前不同的是，上div被一個(gè)div包裹住了，而包裹它的div設(shè)置了下內(nèi)邊距1px（如果沒有設(shè)置還是會(huì)發(fā)生疊加）。
可以看到，這時(shí)候下div的上外邊距占了兩個(gè)div間距的三分之一。兩個(gè)元素的間距是16px。

關(guān)于這一點(diǎn)，兩個(gè)元素的間距是這樣計(jì)算的：上div的下外邊距+包裹上div的下內(nèi)邊距+下div的上外邊距

可以看下面這個(gè)例子印證：

第三點(diǎn)。

這里用了float屬性實(shí)現(xiàn)兩個(gè)div水平排布的效果，此時(shí)第二個(gè)div的左外邊距只占了兩個(gè)div間距的三分之一，說明兩個(gè)元素的間距是15px，沒有發(fā)生疊加。

二、用原生js實(shí)現(xiàn)div選項(xiàng)卡 問題描述

用原生js實(shí)現(xiàn)如上div選項(xiàng)卡。

解析

這個(gè)問題有很多的解決方案，原生jq等等都可以實(shí)現(xiàn)（還有一個(gè)我找到時(shí)沒看懂的：http://bbs.blueidea.com/threa...，容我暫時(shí)看不懂），還可以加上錨點(diǎn)使得打開頁(yè)面時(shí)就跳轉(zhuǎn)到固定的選項(xiàng)卡。
但是都不外乎涉及到控制display這個(gè)屬性，被選中的選項(xiàng)卡設(shè)置‘display：block’，不被選中的則為‘display：none’。
選項(xiàng)卡的實(shí)現(xiàn)可以分為兩個(gè)：
1.選擇部分
2.展示部分（一般為div）

對(duì)應(yīng)第一張圖就是‘代辦公文’、‘已辦公文’、‘全部公文’這一塊為選擇部分，讓用戶點(diǎn)擊進(jìn)行選項(xiàng)卡切換。展示部分就是下面的內(nèi)容。一個(gè)選項(xiàng)對(duì)應(yīng)著一個(gè)內(nèi)容（div）。

實(shí)現(xiàn)的步驟很簡(jiǎn)單:1、獲取所有選項(xiàng)元素和內(nèi)容元素，存至數(shù)組（選項(xiàng)元素的序號(hào)與內(nèi)容元素的序號(hào)是一一對(duì)應(yīng)的）。2、給所有的選項(xiàng)元素加上點(diǎn)擊監(jiān)聽。監(jiān)聽函數(shù)的邏輯是把所有的內(nèi)容元素的display屬性設(shè)為none，然后把被點(diǎn)擊元素的display屬性設(shè)為block。





無標(biāo)題文檔







  
    選擇1
    選擇2
    選擇3
    選擇4
  
  
    內(nèi)容1
    內(nèi)容2
    內(nèi)容3
    內(nèi)容4

代碼來自：http://www.cnblogs.com/jingan...

三、如何實(shí)現(xiàn)插件 問題描述

準(zhǔn)確一點(diǎn)是用原生js如何實(shí)現(xiàn)插件。
再放兩個(gè)鏈接：
一步一步實(shí)現(xiàn)JS拖拽插件
如何開發(fā)原生的 JavaScript 插件(知識(shí)點(diǎn)+寫法)

解析

具體的實(shí)現(xiàn)方法上面兩個(gè)鏈接里都有說明了。
主要兩種方式：
1.直接暴露函數(shù)到全局。
2.把函數(shù)保存到一個(gè)對(duì)象當(dāng)中。

如果把上面的選項(xiàng)卡封裝插件可以這樣：

            (function(window) {
                function tab(tab_t, tab_t_tag, tab_c, tag_c_tag, evt) {
                    var tab_t = document.getElementById(tab_t);
                    var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
                    var tab_c = document.getElementById(tab_c);
                    var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
                    var len = tab_t_li.length;
                    var i = 0;
                    for(i = 0; i < len; i++) {
                        tab_t_li[i].index = i;
                        tab_t_li[i][evt] = function() {
                            for(i = 0; i < len; i++) {
                                tab_t_li[i].className = "";
                                tab_c_li[i].className = "hide";
                            }
                            tab_t_li[this.index].className = "act";
                            tab_c_li[this.index].className = "";
                        }
                    }
                }
                window.tab = tab;
            })(window)

引入文件后就可以直接調(diào)用tab方法了。

四、寫在后面

這幾個(gè)問題都非常基礎(chǔ)，雙邊距疊加的問題在css的基礎(chǔ)教程里就有提到。選項(xiàng)卡和插件的實(shí)現(xiàn)的問題其實(shí)自己之前也都遇到，當(dāng)時(shí)是看明白了，但是沒有好好的總結(jié)記錄。另外簡(jiǎn)歷如何寫也是面試當(dāng)中重要的一環(huán)。這次準(zhǔn)備的太不充分了。