2016年某前端羣題目答案參考

時間 2019-11-14

標籤 2016年前端題目答案參考简体版

原文原文鏈接

一.CSS部分

1.什麼是盒模型？

盒模型是網頁製做的基礎，在網頁文檔中每一個元素都將被描繪爲一個矩形盒子來進行渲染。一般來講，一個完整的盒子以下圖所示：css

2.Doctype的幾種類型？

Doctype是Document Type（文檔類型）的簡寫，在頁面中，用來指定頁面所使用的XHTML（或者HTML）版本。html

在 XHTML1.0和HTML 4.01 中有三種 <!DOCTYPE> 聲明。分別爲過渡的（Transitional）、嚴格的（Strict）和框架的（Frameset）。^Doctype前端

（1）過渡的java

一種要求不太嚴格的方式，容許在頁面中使用HTML4.01的標識（符合xhtml語法標準）。過渡的DTD的寫法以下：c++

<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Transitional//EN」git

「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」>github

（2）嚴格的web

一種要求嚴格的DTD，不容許使用任何表現層的標識和屬性，例如<br/>等。嚴格的DTD的寫法以下：正則表達式

<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Strict//EN」算法

「http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd」>

（3）框架的

一種專門針對框架頁面所使用的DTD，當頁面中含有框架元素時，就要採用這種DTD。框架的DTD的寫法以下：

<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Transitional//EN」

「http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd」>

在 HTML5 中只有一種：

<!DOCTYPE html>

3.如何佈局左不動右邊自適應的兩列布局？

思路主要爲如下兩種：

1.左邊定寬，浮動

2.左邊絕對定位

<html>

<head>

margin: 0;

padding: 0;

}

#left {

position:absolute;

/*float: left;/*區別*/

background-color: red;

width: 250px;

}

#content {

background-color: orange;

margin-left: 250px;/*==等於左邊欄寬度==*/

}

</style>

</head>

<body>

<div id=」content」>content</div>

</body>

</html>

4.如何佈局兩列等高？

主要思路以下：

1.假等高列方法，在列的父元素上使用背景圖片在y軸上平鋪，形成等高列的假象

2.table-cell法

<!DOCTYPE html>

<head>

<title>Document</title>

#box{

width:800px;

background:red;

margin:0 auto;

overflow:hidden;

}

.col{

display:table-cell;

width:400px;

}

.col:first-child{

background:blue;

}

.col:last-child{

background:green;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

3.補丁法

<!DOCTYPE html>

<html>

<head>

<title>兩列等高佈局（float+margin+position)</title>

#fa {

width: 800px;

margin: 0 auto;

background-color: #1524e5;

*overflow就決定了#fa元素生成了bfc或者觸發了haslayout

*而且還把超出的高度截掉了

overflow: hidden;

}

.col {

float: left;

width: 50%;

padding-bottom: 10000px;

margin-bottom: -10000px;

*把下面兩行註釋去掉試試看

*你會發現父元素的背景出現了

*這說明父元素的高度是最高的子元素的高度

*而子元素的高度就是根據盒模型算出來的

/* padding-bottom: 100px; */

/* margin-bottom: -100px; */

*因爲生成了bfc，因此若是給子元素加一個margin-top，也會被計算進高度

*不信去掉下面的註釋試試~

*上邊出現了父元素的背景吧~~~

/* margin-top: 20px; */

}

.col:first-child {

background-color: #34ef34;

}

.col:last-child {

background-color: #ef34ef;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

5.如何佈局右側定寬，左側或中間自適應？

<!DOCTYPE html>

<html>

<head>

<title>右側定寬，左側自適應寬</title>

margin: 0;

padding: 0;

}

#content {

width: 100%;

color: red;

float: left;

background:#666;

height:400px;

margin-right: -230px;/*==等於右側欄寬度==*/

}

#side{

width:230px;/*==等於右側欄寬度==*/

height:500px;

color:#fff;

background:green;

float: left;

}

</style>

</head>

<body>

<div id=」content」>Main Content</div>

</body>

</html>

6.如何佈局三列自適應？

主要思路以下：

1.絕對定位法(左右兩欄絕對定位，固定於頁面兩側，主體欄用margin撐開距離）

<!DOCTYPE html>

<html>

<head>

</head>

margin:0px;

height: 100%;

}

#left,#right{

position: absolute;

top:0px;

width: 200px;

height: 100%;

}

#left{

left:0px;

background: red;

}

#right{

right:0px;

background: green;

}

#main{

margin:0 210px;background: blue;height: 100%;

}

</style>

<body>

</body>

</html>

2.margin負值法

主體採用雙層標籤，外層DIV寬度100%顯示，且浮動。內層div爲真正主體內容，左欄與右欄採用margin負值定位，左欄左浮動，margin-left:-100%,使其正好到達最左端，

<!DOCTYPE html>

<html>

<head>

html,body{margin:0; height:100%;}

#main{width:100%; height:100%; float:left;}

#main #body{margin:0 210px; background:#ffe6b8; height:100%;}

#left,#right{width:200px; height:100%; float:left; background:#a0b3d6;}

#left{margin-left:-100%;}

#right{margin-left:-200px;}

</style>

</head>

<body>

</div>

</body>

</html>

3.自身浮動法:

應用標籤浮動跟隨的特性，左欄左浮動，右欄右浮動，主體直接放後面，實現自適應

<!DOCTYPE html>

<html>

<head>

html,body{margin:0; height:100%;}

#main{height:100%; margin:0 210px; background:#ffe6b8;}

#left,#right{width:200px; height:100%; background:#a0b3d6;}

#left{float:left;}

#right{float:right;}

</style>

</head>

<body>

</body>

</html>

7.gif,png,jpg的區別？

參考: ^圖片特色比較

圖片類型	透明性	動畫支持	損耗性	顯示方式
GIF	Gif是一種布爾透明類型，它能夠是全透明或全不透明，可是它並無半透明（alpha 透明）	支持	Gif是一種無損耗的圖像格式，這也意味着你能夠對gif圖片作任何操做也不會使圖像質量產生損耗;	Gif使用LZW算法進行壓縮，當壓縮gif的過程當中，像素是由上到下水平壓縮的，這也意味着同等條件下，橫向的gif圖片比豎向的gif圖片更小。例如50010的圖片比10500的圖片更小	Gif支持可選擇性的間隔漸進顯示；	只有256種顏色的gif圖片不適合做爲照片，它適合作對顏色要求不高的圖形。
PNG	Png是徹底支持alpha透明的(透明，半透明，不透明)	不支持	png是一種無損耗的圖像格式，這意味着png圖片作任何操做也不會使圖像質量產生損耗。這也使得png能夠做爲jpeg編輯的過渡格式;	像GIF同樣，png也是水平掃描的，這意味着水平重複顏色比垂直重複顏色的圖片更小	它支持間隔漸進顯示，可是會使圖片大小更大
JPG	不支持	不支持	除了一些如旋轉（僅僅是90、180、270度旋轉），裁切，從標準類型到先進類型，編輯圖片的原數據以外，全部其它對jpeg圖像的處理都會使它的質量產生損失。因此咱們在編輯過程通常用png做爲過渡格式	它支持隔行漸進顯示（可是ie瀏覽器並不支持這個屬性，可是ie會在整個圖像信息徹底到達的時候顯示）。由上能夠看出Jpeg是最適web上面的攝影圖片和數字照相機中。

綜述：

GIF適合圖形，JPEG適合照片，PNG系列兩種都適合。

PNG相比GIF：

對於相同色值，gif格式圖片會比png32格式圖片小。但png8纔是最優的選擇。

PNG 8除了不支持動畫外，PNG8有GIF全部的特色，可是比GIF更加具備優點的是它支持alpha透明和更優的壓縮。因此，大多數狀況下，你都應該用PNG8不是GIF（除了很是小的圖片GIF會有更好的壓縮外）。

PNG相比JPEG：

JPEG比全色PNG具備更加好的壓縮，所以也使得JPEG適合照片，可是編輯JPEG過程當中容易形成質量的損失，因此全色PNG適合做爲編輯JPEG的過渡格式.

8.什麼是css sprite?優缺點？

CSS Sprites(雪碧圖）就是把網頁中用到的一些背景圖片整合到一張圖片文件中，利用CSS的「background-image」，「background-repeat」，「background-position」來組合進行背景定位。

優勢：減小網頁的http請求，大大提升頁面性能。

缺點：在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好足夠的空間，防止板塊內出現沒必要要的背景。修改編輯圖片時也相對較爲繁瑣。

9.製做細線表格？

定義CSS:border-collapse屬性，將值設爲collapse,合併邊框

10.position:relative,absolute,fixed區別與聯繫？

postion一共有四個可選屬性：static|relative|absolute|fixed，默認是static。

一：relative

relative會致使元素自身位置的相對變化，但不會影響其它元素的位置、大小。

二：absolute

①absolute元素脫離文檔結構（和float元素相似，float元素也會脫離文檔結構）

②absolute元素具備「包裹性」。會使其以前的塊級元素的寬度變爲內容的寬度。

③absolute元素具備「跟隨性」。沒有設置top、left的值時，與其前一個元素的top,left值爲0。

若是爲absolute設置了top、left，absolute元素會根據最近的定位上下文肯定位置，瀏覽器會遞歸查找該元素的全部父元素，若是找到一個設置了position:relative/absolute/fixed的元素，就以該元素爲基準定位，若是沒找到，就以瀏覽器邊界定位。

三：fixed

其實fixed和absolute是同樣的，惟一的區別在於：absolute元素是根據最近的定位上下文肯定位置，而fixed永遠根據瀏覽器肯定位置.

11.如何居中一個float:left的元素

主要思路以下：

1.定義父級元素爲行級元素，在父級元素之上設定text-align:center

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body >

子元素1

</div>

子元素2

</div>

</body>

</html>

2.父元素浮動法

在外層包裹一個父元素，使他浮動，相對定位,left:50%；內部元素一樣相對定位，left:-50%；

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body >

子元素1

</div>

子元素2

</div>

</body>

</html>

12.Css在各瀏覽器下的兼容問題你一般是怎麼來解決的，請分享你的經驗；

解決辦法通常都是平時爲知筆記記錄，搜索時熟悉內容找筆記內容+不熟悉的找谷歌。

二.JS部分

1.parseInt 與 parseFloat 的區別？

parseInt 與 parseFloat 是把字符串轉換成整數和浮點數的方法，

兩者語法以下

parseInt(string, radix)

parseFloat(string)

parseInt多一個可選的radix數字基數。

二者的一些參數執行返回結果以下

str	parseInt(str)	parseFloat(str)
零長度字符串	NaN	NaN
null	NaN	NaN
undefined	NaN	NaN
.3	0	0.3
-.3	NaN	-0.3
-3	-3	-3
3e7	3	30000000
0xFF	255	0
0x3e7	999	0
08	8	8
3	3	3
123abc	123	123

2.valueof 與 toString 的區別？

基本上，全部的JS數據類型都擁有這兩種方法(NULL除外)，他們倆解決了JS值的運算和顯示問題。

在《javaScript　高級程序設計》一書中描述以下：

toString()——返回對象的原始字符串表示

valueOf()——返回最適合該對象的原始值

一個例子：

function Money(gold, silver, coin)

{

this.gold = gold;

this.silver = silver;

this.coin = coin;

}

Money.parse = function(value)

{

var coin = parseInt(value % 25);

var silver = parseInt(value / 25 % 20);

var gold = parseInt(value / 500);

return new Money(gold, silver, coin);

}

Money.prototype.valueOf = function( )

{

return ((this.gold * 20) + this.silver) * 25 + this.coin;

}

Money.prototype.toString = function( )

{

return this.gold + 「金，」 + this.silver + 「銀，」 + this.coin + 「銅」;

}

var money1 = new Money(5, 6, 1);

var money2 = new Money(2, 4, 6);

var money3 = Money.parse(money1 + money2);

alert(money3);//7金，10銀，7銅

</script>

這裏隱式調用了valueOf跟toString，兩者並存的狀況下，在數值運算中，優先調用了valueOf，字符串運算中，優先調用了toString。好比money1 + money2，調用的就是二者valueOf以後的值相加，而alert的時候，把money3先toString了一下。

str	valueOf(str)	toString(str)
Array	Array數組的元素被轉換爲字符串，這些字符串由逗號分隔，鏈接在一塊兒。其操做與 Array.toString 和 Array.join 方法相同。	Array將 Array 的元素轉換爲字符串。結果字符串由逗號分隔，且鏈接起來。
Boolean	Boolean的原始值	Boolean若是 Boolean 值是 true，則返回「true」。不然，返回「false」。
Date	Date存儲的時間是從 1970 年 1 月 1 日午夜開始計的毫秒數 UTC。	Date返回日期的文字表示法。Error返回一個包含相關錯誤消息的字符串。
Function	Function函數自己。	Function返回以下格式的字符串，其中 functionname 是被調用 toString 方法函數的名稱： function functionname( ) { [native code] }
Number	Number數字值。	Number返回數字的文字表示。
Object	Object對象自己。這是默認狀況。	Object默認返回「[object objectname]」，其中 objectname 是對象類型的名稱。
String	String字符串值。	String返回 String 對象的值。

3.全等與相等？

相等(==),當且僅當兩個運算符相等時，返回true。在肯定兩個運算符時會進行類型轉換。

執行類型轉換的規則以下：

若是一個運算數是 Boolean 值，在檢查相等性以前，把它轉換成數字值。false 轉換成 0，true 爲 1。

若是一個運算數是字符串，另外一個是數字，在檢查相等性以前，要嘗試把字符串轉換成數字。

若是一個運算數是對象，另外一個是字符串，在檢查相等性以前，要嘗試把對象轉換成字符串。

若是一個運算數是對象，另外一個是數字，在檢查相等性以前，要嘗試把對象轉換成數字。

全等(===)

只有在無需類型轉換運算數就相等的狀況下，才返回 true。

4.break 與 continue 的區別？

break表示跳出循環，continue表示結束本次循環

5.js的做用域？

js的做用域以函數function來劃分，根據做用域，使得變量存在做用域的概念分爲全局變量和局部變量。

6.Array 的 slice 與 splice 的區別？

arrayObject.slice(start,end)

slice() 方法從已有的數組中返回選定的元素,其接收1或2個參數，返回一個新的數組，包含數組下標從 start 到 end（不包括該元素）的 arrayObject 中的元素。（若是沒有指定end參數，那麼切分的數組包含從 start 到數組結束的全部元素。)

如：

var aCloros = [「red」,」green」,」blue」,」yellow」,」purple」];

var aCloros2 = aCloros.slice(1);

var aCloros3 = aCloros.slice(1,4);

alert(aCloros2);//output 「green,blue,yellow,purple」

alert(aCloros3);//output 「green,blue,yellow」

arrayObject.splice(index,howmany,item1,…..,itemX)

splice() 方法可從數組中添加或刪除項目，而後返回被刪除的項目。

splice() 方法可刪除從 index 處開始的零個或多個元素，howmany表示刪除數量，後面的參數表示向數組中添加的新項目。

var arr = new Array(6)

arr[0] = 「red」

arr[1] = 「green」

arr[2] = 「blue」

arr[3] = 「yellow」

arr[4] = 「purple」

arr.splice(2,0,」white」) //output red,green,white,blue,yellow,purple

arr.splice(2,1,」white」) //output red,green,white,yellow,purple

7.正則中test 與 match 的區別？

RegExpObject.test(str)

test()方法用於檢測一個字符串是否匹配某個模式.若是字符串str中含有與RegExpObject 匹配的文本，則返回 true，不然返回 false。

//匹配正整數

var patten = /^[1-9]\d*$/;

patten.test(「1498924」) //true

patten.test(「-1498924」) //false

stringObject.match(regexp)

match() 方法可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。返回指定的值。

var str=」1 + 2 * 3 / 4″

str.match(/\d+/g) //[「1」, 「2」, 「3」, 「4」]

8.如何在js中建立一個對象並繼承他？

function Person(name) {

this.name = name;

}

Person.prototype = {

constructor: Person, //強制聲明構造函數，默認是Object

sayName : function( ) {

alert(this.name);

}

var Person1 = new Person(「xiaoming」);

9.什麼是prototype ? 什麼是原型鏈？

而JavaScript中每一個對象都有一個內部的連接指向另外一個對象，這個對象就是原對象的原型（prototype）。這個原型對象也有本身的原型，直到對象的原型爲 null 爲止。這種一級一級的鏈結構就是原型鏈。

如經過new運算符建立的對象，構造函數.prototype的值就是該對象的原型對象。

var now = new Date();

now對象的原型對象就是Date.prototype。

經過new 一個對象就能夠調用裏面的公開的方法，屬性。

10.setTimeout 與 setInterval 的區別？

setTimeout()方法用於在指定的毫秒數後調用函數或計算表達式。

setInterval()方法可按照指定的週期（以毫秒計）來調用函數或計算表達式。它會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。

11.cssText?

cssText的本質就是設置HTML元素的style屬性值。

document.getElementById(「d1」).style.cssText = 「color:red; font-size:13px;」;

12.offsetWidth, scrollLeft, scrollHeight?

offsetWidth:元素的寬度（width + padding + border）

scrollLeft:返回和設置當前橫向滾動條的座標值

scrollWidth:獲取對象的滾動高度。

13.IE的事件與w3c事件的區別？

w3c事件流:

從根文檔(html)開始遍歷全部子節點，若是目標事件的父節點設置爲捕獲時觸發，則執行該事件，直到目標被執行，而後再事件冒泡(設置爲捕獲時觸發的事件再也不被執行)。

ie事件流:

從目標事件被執行，而後再冒泡父節點的事件，直到根文檔。

三.高級部分

1.除了jQuery之外，請寫出你所知道的js框架，試說出不一樣框架的特色；

Zeptojs:輕量級的適於移動端的針對高級瀏覽器的JavaScript庫（類jQuery）

Underscore.js:一個JavaScript實用庫，提供了一整套函數式編程的實用功能，沒有擴展任何JavaScript內置對象，彌補了部分jQuery沒有實現的功能。

Bootstrap:擁有豐富的Web組件。

Node.js: 跨平臺、可用於服務器端和網絡應用的運行環境；具備事件驅動、單線程運行、非阻塞I/O調用、V8引擎執行代碼的特性。Node.js含有一系列內置模塊，使得程序能夠做爲獨立服務器運行,適合在分佈式設備上運行的數據密集型的實時應用.

AngularJS: MVVM、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等，適用於單頁面、CRUD應用。

ReactJs:基於組件化開發，並且全部組件有其狀態。將DOM封裝爲能夠相互組合的 Component, 而且將DOM操做抽象爲狀態的改變。

2.對於Javascript中OOP的理念，你認爲在項目開發中有沒有必要，什麼樣的項目適合前端OOP，請談談你的見解；

我我的認爲不過重要，在前端頁面不須要刻意的去追求面向對象。

由於對於面向對象咱們須要注意「繼承、多態、封裝、組合」等特性，它們的出發點都是「分離減小關注點」。使程序以最小的代價來適應「關注點」的變化。

但對於前端代碼須要關注的東西與後端存在許多不一樣，後端程序大多隻需關注項目的「數據+行爲」——關注點很少且容易預測。而前端則是「數據+行爲+展示+交互」，其中多出來的「展示+交互」決定了前端的關注點更多且更加無從預測，除非人爲限制減小相關的關注點，讓UI和交互套在一個相對死的範圍內進行，而這樣不免會影響到UI的靈活性，不可避免的面對：「醜，慢，大」等特性。

結合以上，前端層面上作好代碼的分層、解耦、結構化則更優，但作這些事和追求面向對象沒有必然關係。