摘要：面試會(huì)進(jìn)入下一個(gè)環(huán)節(jié)。如果在頁(yè)面中有多個(gè)按鈕，那么這個(gè)彈出窗要如何實(shí)現(xiàn)同上，根據(jù)之前的建議在回答問(wèn)題之前要問(wèn)清楚問(wèn)題中模棱兩可的地方。是否觸發(fā)不同按鈕彈出的窗口現(xiàn)實(shí)的內(nèi)容不同。

這道面試題，當(dāng)初我面試的時(shí)候被問(wèn)過(guò)兩次，因此比較深，此外，我記得還有設(shè)計(jì)模式的考察，所以，有深刻的體會(huì)。

面試不是個(gè)輕松的活，不管是對(duì)面試官還是面試者都一樣。對(duì)于面試官來(lái)說(shuō)，別的先不管，首先一點(diǎn)技術(shù)要過(guò)關(guān)，對(duì)候選人的基本要求就是基礎(chǔ)扎實(shí)，有相關(guān)項(xiàng)目經(jīng)驗(yàn)，有解決問(wèn)題的能力，思路清晰，易于溝通。而對(duì)于面試者來(lái)說(shuō)要技術(shù)扎實(shí)，知識(shí)面要廣，要有技術(shù)閃光點(diǎn)，對(duì)于各種技術(shù)提起來(lái)都知道點(diǎn)，但經(jīng)不起深層次的詢(xún)問(wèn)，這種‘一瓶子水不滿(mǎn)，半瓶子水晃地’現(xiàn)象很不受面試官的喜歡。

雖然，我工作的時(shí)間不長(zhǎng)，但被面試過(guò)，也面試過(guò)別人。所以，將這道題被問(wèn)的情況和自己的體會(huì)理解分享給大家。

注：面試公司 去哪兒，360

注：這是按照面試官的預(yù)想可能出現(xiàn)的情況設(shè)定的，不同的面試者臨場(chǎng)發(fā)揮不一樣，面試官可能問(wèn)的問(wèn)題也有所變化，但歸根結(jié)底，這個(gè)系列的問(wèn)題大致如下。

這里你在回答前需要問(wèn)清楚實(shí)現(xiàn)有什么限制沒(méi)，如果沒(méi)有，你可以以任意的方式來(lái)實(shí)現(xiàn)；如果有，問(wèn)清楚限制，一般限制有如下情況，一種定寬定高，另一種不定寬高（補(bǔ)丁寬高一般用js控制），但是使用css3亦可實(shí)現(xiàn)，如果你回答出一種，面試官往往會(huì)問(wèn)有沒(méi)有其他的實(shí)現(xiàn)方法，如果面試管這樣問(wèn)了，你如果，回答沒(méi)有，會(huì)被扣分的。面試會(huì)進(jìn)入下一個(gè)環(huán)節(jié)。

html:

this is a pop-up box

css:

.box-default {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99;
    padding: 20px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.box-wh {
    width: 200px;
    height: 200px;
}

.box-vc-mar {
    margin-left: -100px;
    margin-top: -100px;
}

JSFiddle效果演示

html:

this is a pop-up box

css:

.box-default {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99;
    padding: 20px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.box-vc-mar {
    margin-left: -100px;
    margin-top: -100px;
}

js:

var $box = $(".box-default"),
    bw = $box.width(),
    bh = $box.height();
$box.css({
  marginLeft: - bw/2 + "px",
  marginTop: - bh/2 + "px",
});

JSFiddle效果演示

答案：有

html:

this is a pop-up box that only html+css

css:

.box-default {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99;
    padding: 20px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.box-vc-trf {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

JSFiddle效果演示

html：

this is a pop-up box that only html+css

css：

.box-default {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99;
  padding: 20px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 8px;
}
.box-vc-trf {
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 98;
  background-color: #000;
  opacity: 0.75;
  filter: alpha(opacity=75);
}

JSFiddle效果演示

下面的問(wèn)題就問(wèn)的比較深了，牽涉到了一些簡(jiǎn)單業(yè)務(wù)實(shí)現(xiàn)

根據(jù)是之前實(shí)現(xiàn)的結(jié)果，如果在頁(yè)面中有一個(gè)按鈕，通過(guò)觸發(fā)鈕如何實(shí)現(xiàn)彈出窗以及實(shí)現(xiàn)關(guān)閉彈出窗

示例代碼如下：

html:

this is a pop-up box that only html+css


click it

css:

.box-default {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99;
  display: none;
  padding: 20px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.box-in {
  display: block;
}

.box-vc-trf {
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 98;
  display: none;
  background-color: #000;
  opacity: 0.75;
  filter: alpha(opacity=75);
}

.mask-in {
  display: block;
}

js:

var $box = $(".box-default"),
    $mask = $(".mask"),
    $btn = $("#btn");

$btn.on("click", function(event) {
  event.preventDefault();
  $box.addClass("box-in");
  $mask.addClass("mask-in");
});

$mask.on("click", function(event) {
  event.preventDefault();
  $(this).removeClass("mask-in");
  $box.removeClass("box-in");
});

JSFiddle效果演示

這個(gè)只是我的實(shí)現(xiàn)，每個(gè)人的實(shí)現(xiàn)都會(huì)有所不同。

此外，像這里如何關(guān)閉彈出窗的實(shí)現(xiàn)方式，并不一定要通過(guò)觸發(fā)遮罩層來(lái)實(shí)現(xiàn)，我們常見(jiàn)的實(shí)現(xiàn)是在彈出窗中加一個(gè)關(guān)閉按鈕。像在這里這種模棱兩可的地方，往往存在陷阱，我建議在你給出答案前先問(wèn)清楚這個(gè)關(guān)閉彈出窗要如何實(shí)現(xiàn)，并給出自己的方案，因?yàn)樵趯?shí)際的項(xiàng)目開(kāi)發(fā)的過(guò)程有些細(xì)節(jié)問(wèn)題產(chǎn)品經(jīng)理并不會(huì)面面俱到，會(huì)有疏漏的地方，而作為一個(gè)前端你要及時(shí)的提出來(lái)，進(jìn)行溝通確認(rèn)，這里可能會(huì)考察你的觀(guān)察，判斷和溝通能力。但有些時(shí)候你問(wèn)過(guò)后，面試官會(huì)對(duì)你笑笑，讓你自由發(fā)揮，你這時(shí)就會(huì)明白，這是一處坑。但有時(shí)候不是這樣，所以，面試時(shí)要主動(dòng)與面試官溝通，避免因細(xì)節(jié)問(wèn)題在面試過(guò)程中被降分。

同上，根據(jù)之前的建議在回答問(wèn)題之前要問(wèn)清楚問(wèn)題中模棱兩可的地方。

1.多個(gè)按鈕是不是成百上千個(gè)，或者就是幾個(gè)。

2.是否觸發(fā)不同按鈕彈出的窗口現(xiàn)實(shí)的內(nèi)容不同。

同時(shí)也可以不問(wèn)，你只要明白要考察的知識(shí)點(diǎn)即可，問(wèn)只是讓你更清楚的知曉面試官的考察點(diǎn)。

html:

this is a pop-up box that only html+css


click
click2
click3
click4
click5
click6

css:

css 同上個(gè)示例

js:

$(function(){
    var $box = $(".box-default"),
        $mask = $(".mask");
    
    $mask.on("click", function(event) {
      event.preventDefault();
      hideMask();
    });

    $(".btns").forEach(function(el, i) {
        el.on("click", function(event) {
          event.preventDefault();
          var content = getText($(this));
          showMask(content);
        }
    });

    function getText(obj) {
        return obj.text()
    }

    function showMask(content) {
      $box.addClass("box-in").html(content);
      $mask.addClass("mask-in");
    }

    function hideMask(obj) {
      $mask.removeClass("mask-in");
      $box.removeClass("box-in");
    }
});

這里主要考察了兩點(diǎn):

1.js基礎(chǔ)是否扎實(shí)

表現(xiàn)和行為的分離

可維護(hù)性

可擴(kuò)展性

2.是否使用了事件代理

代碼修改如下：

$(function(){
    ...

    $(document.body).on("click", ".btn", function(event) {
      event.preventDefault();
      var content = getText($(this));
      showMask(content);
    });

    ...
});

JSFiddle效果演示

有時(shí)候面試官會(huì)讓你用原生js來(lái)實(shí)現(xiàn)事件代理，那么我們應(yīng)該如何回答呢？

由于事件委托可以實(shí)現(xiàn)目標(biāo)對(duì)象的隱藏，在開(kāi)發(fā)這對(duì)于我們保護(hù)一些核心的對(duì)象非常有用，不過(guò)實(shí)話(huà)來(lái)說(shuō)，在JavaScript中就是call，apply的使用，因?yàn)閖s中只有這兩個(gè)方法提供了改變當(dāng)前函數(shù)內(nèi)部this作用域的功能。當(dāng)然這只是對(duì)象的委托，而要實(shí)現(xiàn)對(duì)類(lèi)的委托則要相對(duì)復(fù)雜些，對(duì)類(lèi)的實(shí)現(xiàn)大家有興趣的可以參考以下Prototype.js或Jquery中的相應(yīng)實(shí)現(xiàn)。

事件代理就要改變偵聽(tīng)器的位置，或者說(shuō)改變事件綁定的對(duì)象。得益于js的事件傳播機(jī)制，實(shí)現(xiàn)起來(lái)非常容易。

下面這個(gè)例子大家都可能見(jiàn)過(guò)：

html:

    
CSDN
    
Segmentdefault
    
github
    
稀土掘金
    
博客園

js:

window.onload = function(){
  var nav = document.getElementById("nav");
  nav.onclick = function () {
    var e = arguments[0] || window.event,
        target = e.srcElement ? e.srcElement : e.target;
    if (target.nodeName.toLowerCase() === "a")
        alert(target.innerHTML);
    return false;
  }
}

JSFiddle效果演示

var addEvent = (function () {
    if (document.addEventListener) {
      return function (el, type, fn) {
        el.addEventListener(type, fn, false);
      };
    } else if (document.attachEvent) {
      return function (el, type, fn) {
        el.attachEvent("on" + type, fn);
      }
    } else {
        el["on" + type] = fn
    }
  })();

上面這個(gè)事件監(jiān)聽(tīng)的兼容性代碼片段，是面試官問(wèn)我是否對(duì)jQuery源碼有所了解，我當(dāng)然說(shuō)有，就讓我說(shuō)一下如何實(shí)現(xiàn)。

好了，關(guān)于事件代理的問(wèn)題就不深入討論了，我們接著了解關(guān)于彈出窗的其他問(wèn)題。

同一個(gè)頁(yè)面我們可以考慮，直接在頁(yè)面中加一個(gè)表示遮罩層的div，
但是對(duì)于不同的頁(yè)面我們最好用js來(lái)控制。

問(wèn)題：這里面試管會(huì)問(wèn)，如何實(shí)現(xiàn)遮罩層的共享？

我們通常會(huì)寫(xiě)下面的一個(gè)代碼片段：

function createMask() {
    return $(document.body).append($("
").addClass("mask"));
}

雖然，這樣添加一個(gè)遮罩層，在隱藏的時(shí)候可以使用remove()移除它，但顯然這樣在頁(yè)面中頻繁的添加，刪除dom元素不合理。

問(wèn)題：有沒(méi)有什么方法可以對(duì)它進(jìn)行優(yōu)化？

我們可能會(huì)考慮對(duì)它進(jìn)行優(yōu)化，先在全局創(chuàng)建一個(gè)這個(gè)遮罩層div，用一個(gè)變量來(lái)引用它。代碼如下：

var mask = $(document.body).append($("
").addClass("mask"));

這樣頁(yè)面就只會(huì)創(chuàng)建一個(gè)遮罩層div，但是可能出現(xiàn)，我們?cè)谑褂玫倪^(guò)程中不會(huì)用到這個(gè)div，這樣我們就會(huì)造成資源的浪費(fèi)，dom的節(jié)點(diǎn)就會(huì)平白多出一個(gè)無(wú)用的div。

這時(shí)我們可以借助一個(gè)變量來(lái)判斷是否創(chuàng)建過(guò)div。代碼如下：

var mask;
function createMask() {
    if (mask) {
        return mask;
    } else {
        mask = $("
").addClass("mask").appendTo($(document.body));
        return mask;
    }
}

細(xì)心的你是否發(fā)現(xiàn)這是一個(gè)單例？

當(dāng)你在面試前對(duì)這個(gè)問(wèn)題有研究，你說(shuō)用一個(gè)單例模式來(lái)解決，面試官會(huì)讓你先實(shí)現(xiàn)，然后讓你說(shuō)說(shuō)單例模式的理解，最后詢(xún)問(wèn)相關(guān)的問(wèn)題。如：什么是單例模式，單例模式有何優(yōu)缺點(diǎn)，如何使用單例模式。

但是也有時(shí)候面試官會(huì)讓你直接使用一個(gè)設(shè)計(jì)模式來(lái)對(duì)它進(jìn)行優(yōu)化？

在這里，面試官的詢(xún)問(wèn)方向跟面試官的知識(shí)面和掌控度有關(guān)。所以，面試大廠(chǎng)或者面試中/高級(jí)工程師的童鞋還是把自己的所學(xué)知識(shí)技能系統(tǒng)化比較好。

你發(fā)現(xiàn)上面那段代碼實(shí)現(xiàn)有哪里不妥嗎？對(duì)了，你在函數(shù)體內(nèi)改變了函數(shù)外的變量mask的引用，在多人協(xié)作的項(xiàng)目中，你寫(xiě)的createMask是一個(gè)不安全的函數(shù)，此外我們開(kāi)發(fā)中應(yīng)盡量避免像mask這樣的全局變量使用，用一個(gè)局部變量如何來(lái)解決這個(gè)問(wèn)題呢，我想很多同學(xué)會(huì)想到閉包，修改后的代碼如下：

function createMask() {
    var mask;
    return function() {
        if (mask) {
            return mask;
        } else {
            mask = $("
").addClass("mask").appendTo($(document.body));
            return mask;
        }
    }            
}

好吧，到了這里你可能在心里想‘這下總算完了吧’，是的，我想說(shuō)的是這道題你答成這個(gè)樣子，對(duì)于中級(jí)工程師來(lái)說(shuō)已經(jīng)過(guò)關(guān)了，但是對(duì)于高級(jí)工程師來(lái)說(shuō)，你還需要對(duì)這個(gè)代碼進(jìn)行優(yōu)化，如果經(jīng)常研究源碼的童鞋會(huì)見(jiàn)到這樣寫(xiě)的代碼片段：

function createMask() {
    var mask;
    return function() {
        return mask || mask = $("
").addClass("mask").appendTo($(document.body));    
    }            
}

對(duì)于那些開(kāi)發(fā)框架，常用庫(kù)或插件的大牛來(lái)說(shuō)，同樣的功能，同樣的性能，不會(huì)多浪費(fèi)一個(gè)字符。

如果是面試高級(jí)工程師，可能還會(huì)被問(wèn)到，如何多個(gè)功能都要用到單例模式，該如何解決？

function singleton(fn) {
    var res;
    return function() {
        return res || (res = fn.apply(this, arguments))
    }
}

var createMask = singleton(function () {
    return $("
").addClass("mask").appendTo($(document.body));
});

其實(shí)，這里又用到了另一種設(shè)計(jì)模式——橋接模式。

面試到這里一般就算完了。通過(guò)上面的代碼我們發(fā)現(xiàn)，設(shè)計(jì)模式也不是什么洪水猛獸，只不過(guò)是設(shè)計(jì)模式的使用靈活多變，但要想真正完全掌握設(shè)計(jì)模式，不是看兩篇文章就行的最重要的還是要多想，多實(shí)踐。

更多面試問(wèn)題請(qǐng)關(guān)注我的github