聚美優品面試題

CSS
1.  overflow-x  屬於 CSS2 仍是 CSS3

css3，能夠查找css參考手冊，附上最新版的css手冊

 

2.  請列舉幾種能夠清除浮動的方法（至少兩種）

先來講說浮動的原理和清除浮動的緣由：浮動的框能夠左右移動，直至它的外邊緣遇到包含框或者另外一個浮動框的邊緣。浮動框不屬於(或脫離了)文檔中的普通流，當一個元素浮動以後，不會影響到塊級框的佈局而只會影響行內元素(如span、a、em)的排列，即行內元素浮動後就會表現得像塊級元素同樣。當浮動框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（或者能夠稱爲「高度塌陷」現象）。在實際佈局中，每每這並非咱們所但願的，因此須要閉合浮動元素，使其包含框表現出正常的高度。

清除浮動方法：

（1）添加額外(空)標籤
經過在浮動元素末尾添加一個空的標籤例如 <div style=」clear:both」></div>
優勢：通俗易懂，容易掌握；
缺點：增長無心義的標籤，有違結構與表現的分離。

（2）父元素設置 overflow：hidden
經過設置父元素overflow值爲hidden；在IE6中還須要觸發 hasLayout ，例如 zoom：1；
優勢：不存在結構和語義化問題，代碼量極少；
缺點：內容增多時候容易形成不會自動換行致使內容被隱藏掉，沒法顯示須要溢出的元素。

（3）父元素也設置浮動
優勢：不存在結構和語義化問題，代碼量極少;
缺點：使得與父元素相鄰的元素的佈局會受到影響，不可能一直浮動到body，不推薦使用。

（4）給父元素添加clearfix類
因爲IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
優勢：結構和語義化徹底正確,代碼量居中;
缺點：複用方式不當會形成代碼量增長。

clearfix類代碼以下：

//:after會在元素內容——而不是元素後面插入一個僞素，該規則只添加了一個清除的包含句點做爲非浮動元素，注意，:after不是僞類，而是僞元素
.clearfix:after { 
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
// 觸發IE六、7下的haslayout
.clearfix {
    *zoom: 1;
}

 

3.  display:none  和  visibility:hidden  的區別是什麼

相同點：display:none與visibility:hidden均可以用來隱藏某個元素；

不一樣點：display:none在隱藏元素的時候，將其佔位空間也去掉；而visibility:hidden只是隱藏了內容而已，其佔位空間仍然保留。

 

4.  請縮寫如下代碼：
.box {
     background-position: 10px 20px;
     background-repeat: no-repeat;
     background-attachment: fixed;
     
     background-image: url(box.png);
}

這個沒什麼好說的，只要是使用過css背景屬性的人都知道縮寫形式，另外需一提的是color屬性可放在最前面也能夠放在最後面。

.box {
     background: red url(box.png) no-repeat 10px 20px  fixed;
}

 

5.  如何讓一段文本中的全部英文單詞的首字母大寫

css的text-transform：none(默認值) | capitalize | uppercase | lowercase | full-width(css3新增)；

取值方面可查看手冊，具體是什麼就很少說了。

Javascript
1.  請解釋一下什麼是閉包

對於閉包，相信每一個人都有本身的看法，而且網上一大推關於閉包的概念，個人理解是可以訪問到其包含(外部)函數內部變量的函數。

主要有兩個特性：

一個是能夠讀取其包含函數內部的變量；另外一個就是讓這些變量的值始終保持在內存中。

使用閉包的注意點：
過多使用會形成內存泄露的現象，由於閉包會引用其包含函數做用域的變量對象，使得即便包含函數執行完畢後，其做用域的變量對象不會被銷燬，即其佔用的內存沒法獲得回收，直至閉包執行完畢後纔會被銷燬。因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露。解決方法是，在退出函數以前，將不使用的局部變量所有刪除。對於做用域(或者成爲執行環境)、做用域鏈、變量對象的概念，你們可參考javascript高級程序設計的第四章節，關於變量、做用域、內存的分析。這就是爲何說理解閉包前首先要理解js中做用域從產生到銷燬過程發生的一系列有趣的事情。

 

2.  call 和 apply 的區別是什麼

相同點：均可以在特定做用域(環境)下調用函數；

不一樣點：傳遞的參數形式不一樣，call方法的參數必須一個個列舉出來，而apply方法的參數是以一個數組的形式進行傳遞，也支持arguments參數。

 

3.  如何使用原生 Javascript 代碼深度克隆一個對象（注意區分對象類型）

對於深度克隆，個人理解是：在克隆或擴展一個對象時，當該對象是一個包括子對象的對象，也會遍歷該子對象的屬性並進行復制拷貝。因此深度克隆適用於對象的屬性也是對象的狀況。

貼出js代碼：

   /**
    * 深度擴展對象--適用於對象的屬性也是對象的狀況
    * @param {Object}
    * @return {Object}
    */
    var deepextend = function (destination, source) {
        for (var property in source) {
            var copy = source[property]; // 獲取source屬性值

            if (destination === copy) {
                continue;
            }

            // 若是copy是一個對象，則遞歸調用(並傳入copy參數)，直到copy不是一個對象爲止
            if (typeof copy === 'object') {//$.isObj(copy)
                destination[property] = arguments.callee(destination[property] || {}, copy); //遞歸調用
            // 不然直接把copy賦值給destination對象的屬性(此時與$.extend方法等價)
            } else {
                destination[property] = copy;
            }
        }
        return destination;
    };

例子測試：

var destination = {
    name: "hcy", 
    age: 22, 
    info: {sex: "man", job: "student"}
};
var source = {
    name: "hc",
    age: 23, 
    info: {sex: "woman", job: "developer"}
};
console.log(deepextend(destination, source));
// 輸出destination的所有屬性
for (var i in destination) {
    if (typeof destination[i] === "object") {
        for (var j in destination[i]) {
            console.log(destination[i] + ":\t" + destination[i][j]);
        }
    } else {
        console.log(i + ":\t" + destination[i]);
    }
}

firebug下測試結果截圖：

 

4.  jQuery 中  $('.class')  和  $('div.class')  在 IE 8 下哪一個效率更高，請解釋緣由

這題是關於selector的性能問題，$(".class")在查找和遍歷頁面的元素時，會遍歷全部帶有class類的元素，不論是div、p、span或者是其餘元素；而$("div.class")首先會查找出div元素，而後在全部的div中查詢帶有class類的相關div，因此在效率方面，固然是div.class選擇器高於.class。這是我我的的理解，相關標準的方案求大神解答。

HTML
1.  如下哪一個不是 HTML5 的新標籤：
a.  <article>
b.  <section>
c.  <address>
d.  <time>

address不是html5新增的標籤，而是在HTML4.01中就已經存在了，用於可定義一個地址或者文檔做者或擁有者的聯繫信息。而article、section、time標籤是html5新增的語義化標籤，具體表明啥含義，咋用法就很少說了，可查看官方文檔或一些html5技術論壇的相關說明。

 

2.  正確使用 HTML 和 CSS 實現如下效果（中間方框部分表示圖片，右側爲文字列表。儘可能不要
使用 float 屬性）：

這題比較簡單，只要學過css的相信都不大問題。對於該圖片和文字的佈局，可以使用定位來解決。外層容器相對定位，裏面的圖片和文字列表絕對定位，就能夠實現上圖的效果了。貼出代碼：

html結構：

<div class="wrap">
    <img src="images/love.jpg" alt="愛的呼喚" width="200" height="200" />
    <ul>
        <li><a href="#">只要人人都獻出一點愛，世界將變成美好人間</a></li>
        <li><a href="#">只要人人都獻出一點愛，世界將變成美好人間</a></li>
        <li><a href="#">只要人人都獻出一點愛，世界將變成美好人間</a></li>
        <li><a href="#">只要人人都獻出一點愛，世界將變成美好人間</a></li>
        <li><a href="#">只要人人都獻出一點愛，世界將變成美好人間</a></li>
        <li><a href="#">只要人人都獻出一點愛，世界將變成美好人間</a></li>
        <li><a href="#">只要人人都獻出一點愛，世界將變成美好人間</a></li>
        <li><a href="#">只要人人都獻出一點愛，世界將變成美好人間</a></li>
    </ul>
</div>

css代碼：

body, div, ul, li {margin: 0; padding: 0;}
body {font: 12px/1.6 Arial,Helvetica,sans-serif;}
ul {list-style-type: none;}
a {text-decoration: none; color: #999;}
a:hover {text-decoration: underline;color: #666;}
.wrap {
    margin: 30px auto;
    width: 520px;
    height: 250px;
    border: 1px solid #ccc;
    position: relative; /* 這是關鍵 */
}
.wrap img {
    border: 1px dashed red;
    position: absolute; /* 這是關鍵 */
    left: 20px;
    top: 20px;
}
.wrap ul {
    position: absolute; /* 這是關鍵 */
    right: 20px;
    top: 20px;
}
.wrap ul li a {
    display: block; 
    height: 25px;
    line-height: 25px;
}

例子結果截圖：

 

最後還有兩道簡答題：

簡答
1.  jumei.com 和 weibo.com 完整載入後，html 代碼各有多少 KB
2.  最近關注了哪些前端相關的技術/博客/論壇，簡述心得和見解

對於第一題計算頁面所有元素加載完畢後，html代碼的大小。這個問題以前沒有遇到過，因此求大神貼出解決方案？？？

對於第二題，每一個人都有不一樣的答案，對於本身，最近在忙於找實習，接觸了不久以前就比較流行的瀑布流，瞭解了一些js MVC框架，如backbone、angular、ember，而後也是以前不久開通的這個博客園的博客，但願記錄本身的一些成長經歷和學習的點點滴滴，以前也關注過淘寶的UED、騰訊的Alloy Team，平時閒着的時候會逛逛w3cfuns、blueidea、伯樂在線、html5中國等一些技術論壇，也會在豆瓣和知乎發現和了解一些話題。這就是我最近作的一些事情，相信也是我之後一直堅持下去的事情。。。。

 

 

 

轉自：http://blog.csdn.net/shenshen123jun/article/details/9004412