2018web前端最新面試題總結(jié)
一半等、Html/Css基礎(chǔ)模塊
基礎(chǔ)部分
-
什么是HTML筒捺？
答：
? HTML并不是真正的的程序語(yǔ)言缩滨，他是一種 標(biāo) 記 語(yǔ) 言 势就，用來(lái)結(jié)構(gòu)化和含義化你想要放
在web 網(wǎng)站上的那些內(nèi)容。它由一系列的元素（elements）所組成脉漏，這些元素可以用來(lái)
封裝你的內(nèi)容中擔(dān)任不同工作的各部分和各個(gè)角色苞冯。 -
什么是CSS？
答：
? 就像 HTML侧巨，CSS 也不是真正的編程語(yǔ)言舅锄。它是樣式表語(yǔ)言，也就是說(shuō)司忱，它允許你有
選擇性的為 HTML 文檔的元素添加樣式皇忿。 -
行內(nèi)元素和塊級(jí)元素的具體區(qū)別是什么畴蹭？行內(nèi)元素的padding和margin可設(shè)置嗎？
答：
塊級(jí)元素(block)特性：
總是獨(dú)占一行鳍烁，表現(xiàn)為另起一行開始叨襟，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)老翘、內(nèi)邊距(padding)和外邊距(margin)都可控制;
內(nèi)聯(lián)元素(inline)特性：
和相鄰的內(nèi)聯(lián)元素在同一行;
寬度(width)芹啥、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是可以設(shè)置的）铺峭，就是里面文字或圖片的大小墓怀。
-
簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解嗤无？
答：
- HTML語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化妄呕，結(jié)構(gòu)更清晰，便于對(duì)瀏覽器布持、搜索引擎解析莉炉；
- 即使在沒有樣式CSS 的情況下也能以一種文檔格式顯示钓账，并且是容易閱讀的；
- 搜索引擎的爬蟲也依賴于HTML標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重絮宁，有利于SEO梆暮；
- 使閱讀源代碼的人更容易將網(wǎng)站分塊，便于閱讀绍昂、維護(hù)和理解啦粹；
-
rgba() 和 opacity 設(shè)置透明度的區(qū)別是什么？
答：
rgba()和opacity都能實(shí)現(xiàn)透明效果窘游，但最大的不同是opacity作用于元素唠椭，以及元素內(nèi)的所有內(nèi)容的透明度，而rgba()只作用于元素的顏色或其背景色忍饰。（設(shè)置rgba透明的元素的子元素不會(huì)繼承透明效果Ｌ吧）
-
DOCTYPE的作用？
答：
- <!DOCTYPE> 聲明位于文檔中的最前面艾蓝，處于 <html> 標(biāo)簽之前力崇。告知瀏覽器以
何種模式來(lái)渲染文檔。
- 嚴(yán)格模式的排版和 JS 運(yùn)作模式是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行赢织。
- 在混雜模式中餐曹，頁(yè)面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站
點(diǎn)無(wú)法工作敌厘。
- DOCTYPE 不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)台猴。
-
介紹一下你對(duì)瀏覽器內(nèi)核的理解？都有哪些常見的瀏覽器內(nèi)核？
答：
? 要或者說(shuō)核心的部分是“Rendering Engine”饱狂，可大概譯為“渲染引擎”曹步，不過(guò)我們
一般習(xí)慣將之稱為“瀏覽器內(nèi)核”。負(fù)責(zé)對(duì)網(wǎng)頁(yè)語(yǔ)法的解釋（如標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)
應(yīng)用 HTML休讳、JavaScript）并渲染（顯示）網(wǎng)頁(yè)讲婚。 所以，通常所謂的瀏覽器內(nèi)核也就是瀏
覽器所采用的渲染引擎俊柔，渲染引擎決定了瀏覽器如何顯示網(wǎng)頁(yè)的內(nèi)容以及頁(yè)面的格式信息筹麸。
不同的瀏覽器內(nèi)核對(duì)網(wǎng)頁(yè)編寫語(yǔ)法的解釋也有不同，因此同一網(wǎng)頁(yè)在不同的內(nèi)核的瀏覽器里
的渲染（顯示）效果也可能不同雏婶，這也是網(wǎng)頁(yè)編寫者需要在不同內(nèi)核的瀏覽器中測(cè)試網(wǎng)頁(yè)顯
示效果的原因物赶。
常見瀏覽器內(nèi)核：
Trident 內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱 MSHTML]
Gecko內(nèi)核：Netscape6 及以上版本留晚，F(xiàn)F,MozillaSuite/SeaMonkey 等酵紫。
Presto 內(nèi)核：Opera7及以上。 [Opera內(nèi)核原為：Presto错维，現(xiàn)為奖地、Blink;]
Webkit 內(nèi)核：Safari,Chrome 等。 [ Chrome 的：Blink（WebKit 的分支）]
EdgeHTML內(nèi)核：Microsoft Edge赋焕。 [此內(nèi)核其實(shí)是從 MSHTML fork 而來(lái)参歹，刪掉了幾
乎所有的 IE私有特性 -
CSS選擇器權(quán)重如何計(jì)算？
答：
頁(yè)面顯示樣式的優(yōu)先級(jí)取決于其“特殊性”’隆判，特殊性越高犬庇，就顯示最高的，當(dāng)特殊性相等
時(shí)蜜氨，顯示后者
特殊性表述為 4個(gè)部分：0,0,0,0
一個(gè)選擇器的特殊性如下:對(duì)于選擇器是#id的屬性值,特殊性值為：0,1,0,0
對(duì)于屬性選擇器，class或偽類捎泻，特殊性值為：0,0,1,0
對(duì)于標(biāo)簽選擇器或偽元素飒炎，特殊性值為：0,0,0,1
通配符‘*’特殊性值為：0,0,0,0
內(nèi)聯(lián)樣式特殊性值為：1,0,0,0 -
對(duì)WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識(shí)？
答：
- 標(biāo)簽閉合笆豁、標(biāo)簽小寫郎汪、不亂嵌套、提高搜索機(jī)器人搜索幾率闯狱、使用外鏈 css 和 js 腳
本煞赢、結(jié)構(gòu)行為表現(xiàn)的分離， - 文件下載與頁(yè)面速度更快哄孤、內(nèi)容能被更多的用戶所訪問(wèn)照筑、內(nèi)容能被更廣泛的設(shè)備所
訪問(wèn)、更少的代碼和組件， - 容易維護(hù)凝危、改版方便波俄，不需要變動(dòng)頁(yè)面內(nèi)容、提供打印版本而不需要復(fù)制內(nèi)容蛾默、提
高網(wǎng)站易用性懦铺。
- 標(biāo)簽閉合笆豁、標(biāo)簽小寫郎汪、不亂嵌套、提高搜索機(jī)器人搜索幾率闯狱、使用外鏈 css 和 js 腳
CSS中優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)有什么區(qū)別？
答：
? 優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)印象中是隨著css3 流出來(lái)的一個(gè)概念支鸡。由于低級(jí)瀏覽器不支持
css3冬念，但 css3 的效果又太優(yōu)秀不忍放棄，所以在高級(jí)瀏覽中使用 css3 而低級(jí)瀏覽器只保證
最基本的功能牧挣。咋一看兩個(gè)概念差不多急前，都是在關(guān)注不同瀏覽器下的不同體驗(yàn)，關(guān)鍵的區(qū)別
是他們所側(cè)重的內(nèi)容浸踩，以及這種不同造成的工作流程的差異叔汁。“優(yōu)雅降級(jí)”觀點(diǎn)認(rèn)為應(yīng)該針對(duì)那些最高級(jí)、最完善的瀏覽器來(lái)設(shè)計(jì)網(wǎng)站检碗。
“漸進(jìn)增強(qiáng)”觀點(diǎn)則認(rèn)為應(yīng)關(guān)注于內(nèi)容本身据块。
-
對(duì)BFC規(guī)范的理解有哪些？
答：
- 定義：
BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"折剃。它是一個(gè)獨(dú)立的渲染區(qū)域另假，
只有 Block-level box 參與，它規(guī)定了內(nèi)部的Block-level Box 如何布局怕犁，并且與這個(gè)區(qū)域
外部毫不相干边篮。
布局規(guī)則：? A. 內(nèi)部的Box 會(huì)在垂直方向，一個(gè)接一個(gè)地放置奏甫。
? B. Box垂直方向的距離由 margin決定戈轿。屬于同一個(gè) BFC的兩個(gè)相鄰 Box的 margin 會(huì)發(fā)
生重疊。
? C. 每個(gè)元素的 margin box 的左邊阵子，與包含塊border box 的左邊相接觸(對(duì)于從左往右的
格式化思杯，否則相反)。即使存在浮動(dòng)也是如此挠进。
? D. BFC 的區(qū)域不會(huì)與 float box 重疊色乾。
? E. BFC 就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素领突。反
之也如此暖璧。
? F. 計(jì)算 BFC 的高度時(shí)，浮動(dòng)元素也參與計(jì)算君旦。-
哪些元素會(huì)生成 BFC：
A. 根元素
B. float 屬性不為 none
C. position為 absolute 或 fixed
D. display為inline-block澎办， table-cell嘲碱， table-caption， flex浮驳， inline-flex
F. overflow 不為 visible
-
有多少種清除浮動(dòng)的方法悍汛？
答：
- 父級(jí)div定義 height
原理：父級(jí) div手動(dòng)定義 height，就解決了父級(jí) div無(wú)法自動(dòng)獲取到高度的問(wèn)題至会。 簡(jiǎn)單离咐、
代碼少、容易掌握 奉件，但只適合高度固定的布局.- 結(jié)尾處加空 div標(biāo)簽 clear：both
原理：在浮動(dòng)元素的后面添加一個(gè)空div兄弟元素宵蛀，利用 css 提高的clear：both清除浮動(dòng)，
讓父級(jí)div能自動(dòng)獲取到高度 县貌，如果頁(yè)面浮動(dòng)布局多术陶，就要增加很多空 div，讓人感覺很
不好 .- 父級(jí)div定義 偽類：after 和 zoom
/清除浮動(dòng)代碼/
.clearfix：after{
content：""煤痕；
display：block梧宫；
visibility：hidden；
height：0摆碉；
line-height：0塘匣；
clear：both；
}
.clearfix{zoom：1}
原理：IE8以上和非 IE瀏覽器才支持：after巷帝，原理和方法 2有點(diǎn)類似忌卤，zoom(IE專有屬性)
可解決ie6，ie7 浮動(dòng)問(wèn)題 楞泼，推薦使用驰徊，建議定義公共類，以減少CSS 代碼堕阔。- 父級(jí)div定義 overflow：hidden
超出盒子部分會(huì)被隱藏棍厂，不推薦使用.
- 雙偽元素法：
.clearfix：before，.clearfix：after {
content： ""超陆；
display： block牺弹；
clear：both；
}
.clearfix {
zoom： 1侥猬；}
實(shí)際工作部分
-
HTML常見兼容性問(wèn)題例驹？
答：
- 雙邊距BUG float引起的 使用display
3像素問(wèn)題 使用float引起的 使用dislpay:inline -3px
超鏈接hover 點(diǎn)擊后失效 使用正確的書寫順序 link visited hover active
Iez-index問(wèn)題 給父級(jí)添加position:relative
Png透明 使用js代碼改
Min-height最小高度 捐韩！Important解決’
select在ie6下遮蓋使用iframe嵌套
為什么沒有辦法定義1px左右的寬度容器（IE6默認(rèn)的行高造成的退唠，使用over:hidden,zoom:0.08line-height:1px）
-
IE5-8不支持opacity，解決辦法：
.opacity{
? opacity: 0.4
? filter: alpha(opacity=60); /* for IE5-7 */
? -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}
IE6不支持PNG透明背景荤胁，解決辦法: IE6下使用gif圖片
-
描述一個(gè)"reset"的CSS文件并如何使用它瞧预。知道
**normalize.css**嗎？你了解他們的不同之處？答：
? 重置樣式非常多垢油，凡是一個(gè)前端開發(fā)人員肯定有一個(gè)常用的重置CSS文件并知道如何使用它們盆驹。他們是盲目的在做還是知道為什么這么做呢？原因是不同的瀏覽器對(duì)一些元素有不同的默認(rèn)樣式滩愁，如果你不處理躯喇，在不同的瀏覽器下會(huì)存在必要的風(fēng)險(xiǎn)，或者更有戲劇性的性發(fā)生硝枉。
你可能會(huì)用Normalize來(lái)代替你的重置樣式文件廉丽。它沒有重置所有的樣式風(fēng)格，但僅提供了一套合理的默認(rèn)樣式值妻味。既能讓眾多瀏覽器達(dá)到一致和合理正压，但又不擾亂其他的東西（如粗體的標(biāo)題）。
在這一方面责球，無(wú)法做每一個(gè)復(fù)位重置焦履。它也確實(shí)有些超過(guò)一個(gè)重置，它處理了你永遠(yuǎn)都不用考慮的怪癖雏逾，像HTML的audio元素不一致或line-height不一致嘉裤。
-
BFC是什么？
答：
BFC（塊級(jí)格式化上下文）校套，一個(gè)創(chuàng)建了新的BFC的盒子是獨(dú)立布局的价脾，盒子內(nèi)元素的布局不會(huì)影響盒子外面的元素。在同一個(gè)BFC中的兩個(gè)相鄰的盒子在垂直方向發(fā)生margin重疊的問(wèn)題
BFC是指瀏覽器中創(chuàng)建了一個(gè)獨(dú)立的渲染區(qū)域笛匙，該區(qū)域內(nèi)所有元素的布局不會(huì)影響到區(qū)域外元素的布局侨把，這個(gè)渲染區(qū)域只對(duì)塊級(jí)元素起作用
-
怎樣實(shí)現(xiàn)三欄布局，兩邊寬度固定妹孙，中間自適應(yīng)秋柄？
答：
圣杯布局 雙飛翼布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #left { width: 200px; height: 200px; float: left; background-color: red; } #right { width: 150px; height: 200px; float: right; background-color: mistyrose; } #middle { height: 200px; margin: 0 150px 0 200px; background-color: saddlebrown; word-break: break-word; } </style> </head> <body> <div id="content"> <div id="left">我是左側(cè)內(nèi)容我是左側(cè)內(nèi)容我是左側(cè)內(nèi)容我是左側(cè)內(nèi)容我是左側(cè)內(nèi)容</div> <div id="right">我是右側(cè)內(nèi)容我是右側(cè)內(nèi)容我是右側(cè)內(nèi)容我是右側(cè)內(nèi)容我是右側(cè)內(nèi)容我是右側(cè)內(nèi)容</div> <div id="middle">我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容</div> </div> </body> </html> -
精靈圖(CSS Sprites)的優(yōu)點(diǎn)和缺點(diǎn)
答：
精靈圖是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式。就是把網(wǎng)頁(yè)中很多小背景圖片整合到一張圖片文件中蠢正，再利用CSS的“background-image”骇笔，“background-repeat”，“background-position”的組合進(jìn)行背景圖顯示及定位嚣崭，達(dá)到顯示某一部分背景圖的效果笨触。
精靈圖的優(yōu)點(diǎn)：
- 減少圖片的體積，因?yàn)槊總€(gè)圖片都有一個(gè)頭部信息雹舀，把多個(gè)圖片放到一個(gè)圖片里芦劣，就會(huì)共用同一個(gè)頭部信息，從而減少了字節(jié)數(shù)说榆。
- 減少了網(wǎng)頁(yè)的http請(qǐng)求次數(shù)虚吟，從而加快了網(wǎng)頁(yè)加載速度寸认，提高用戶體驗(yàn)。
- 解決了網(wǎng)頁(yè)設(shè)計(jì)師在圖片命名上的困擾串慰，只需對(duì)一張集合的圖片上命名就可以了偏塞，不需要對(duì)每一個(gè)小元素進(jìn)行命名，從而提高了網(wǎng)頁(yè)的制作效率邦鲫。
- 更換風(fēng)格方便灸叼，只需要在一張或少?gòu)垐D片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁(yè)的風(fēng)格就可以改變庆捺。維護(hù)起來(lái)更加方便怜姿。
精靈圖的缺點(diǎn)：
- 在圖片合并的時(shí)候，你要把多張圖片有序的合理的合并成一張圖片疼燥，還要留好足夠的空間沧卢，防止板塊內(nèi)出現(xiàn)不必要的背景；這些還好醉者，最痛苦的是在寬屏但狭，高分辨率的屏幕下的自適應(yīng)頁(yè)面，你的圖片如果不夠?qū)捛思矗苋菀壮霈F(xiàn)背景斷裂立磁；
- 在開發(fā)的時(shí)候比較麻煩，你要通過(guò)photoshop或其他工具測(cè)量計(jì)算每一個(gè)背景單元的精確位置剥槐，這是針線活唱歧，沒什么難度，但是很繁瑣粒竖；
- 在維護(hù)的時(shí)候比較麻煩颅崩，如果頁(yè)面背景有少許改動(dòng)，一般就要改這張合并的圖片蕊苗，無(wú)需改的地方最好不要?jiǎng)友睾螅@樣避免改動(dòng)更多的css，如果在原來(lái)的地方放不下朽砰，又只能（最好）往下加圖片尖滚，這樣圖片的字節(jié)就增加了，還要改動(dòng)css瞧柔。
- 精靈圖不能隨意改變大小和顏色漆弄。精靈圖改變大小會(huì)失真模糊，降低用戶體驗(yàn)造锅，css3新屬性可以改變精靈圖顏色撼唾，但是比較麻煩，并且新屬性有兼容問(wèn)題”刚溃現(xiàn)在一般都是用web字體(圖標(biāo)字體)來(lái)代替精靈圖券坞。
二、JavaScript基礎(chǔ)模塊
基礎(chǔ)部分
-
JS中有哪些數(shù)據(jù)類型肺素？
答：
簡(jiǎn)單數(shù)據(jù)類型：Undefined恨锚、Null、Boolean倍靡、Number 和String猴伶。
復(fù)雜數(shù)據(jù)類型：Object -
"==" 和 "===" 的區(qū)別？
答：
前者會(huì)自動(dòng)轉(zhuǎn)換類型,而后者不會(huì)塌西。
前者比較的是值他挎，后者比較的是值和類型。
-
JS中的常用內(nèi)置對(duì)象有哪些捡需？并列舉該對(duì)象的常用方法办桨？
答：
-
Arguments 函數(shù)參數(shù)集合
arguments[ ] 函數(shù)參數(shù)的數(shù)組
Arguments 一個(gè)函數(shù)的參數(shù)和其他屬性
Arguments.callee 當(dāng)前正在運(yùn)行的函數(shù)
Arguments.length 傳遞給函數(shù)的參數(shù)的個(gè)數(shù)
-
Array 數(shù)組
length屬性 動(dòng)態(tài)獲取數(shù)組長(zhǎng)度
join() 將一個(gè)數(shù)組轉(zhuǎn)成字符串。返回一個(gè)字符串站辉。
reverse() 將數(shù)組中各元素顛倒順序
delete運(yùn)算符 只能刪除數(shù)組元素的值呢撞，而所占空間還在，總長(zhǎng)度沒變(arr.length)饰剥。
shift() 刪除數(shù)組中第一個(gè)元素殊霞，返回刪除的那個(gè)值，并將長(zhǎng)度減 1汰蓉。
pop() 刪除數(shù)組中最后一個(gè)元素绷蹲，返回刪除的那個(gè)值，并將長(zhǎng)度減1顾孽。
unshift() 往數(shù)組前面添加一個(gè)或多個(gè)數(shù)組元素祝钢，長(zhǎng)度要改變劳坑。
push() 往數(shù)組結(jié)尾添加一個(gè)或多個(gè)數(shù)組元素仅仆，長(zhǎng)度要改變。
concat( ) 連接數(shù)組
slice( ) 返回?cái)?shù)組的一部分
sort( ) 對(duì)數(shù)組元素進(jìn)行排序
splice( ) 插入癣诱、刪除或替換數(shù)組的元素
toLocaleString( ) 把數(shù)組轉(zhuǎn)換成局部字符串
toString( ) 將數(shù)組轉(zhuǎn)換成一個(gè)字符串
-
Boolean 布爾對(duì)象
Boolean.toString( ) 將布爾值轉(zhuǎn)換成字符串
Boolean.valueOf( ) Boolean對(duì)象的布爾值
-
Error 異常對(duì)象
Error.message 可以讀取的錯(cuò)誤消息
Error.name 錯(cuò)誤的類型
Error.toString( ) 把Error 對(duì)象轉(zhuǎn)換成字符串
EvalError 在不正確使用 eval()時(shí)拋出
SyntaxError 拋出該錯(cuò)誤用來(lái)通知語(yǔ)法錯(cuò)誤
RangeError 在數(shù)字超出合法范圍時(shí)拋出
ReferenceError 在讀取不存在的變量時(shí)拋出
TypeError 當(dāng)一個(gè)值的類型錯(cuò)誤時(shí)盹沈，拋出該異常
URIError 由URl的編碼和解碼方法拋出
-
Function 函數(shù)構(gòu)造器
Function 函數(shù)構(gòu)造器
Function.apply( ) 將函數(shù)作為一個(gè)對(duì)象的方法調(diào)用
Function.arguments[] 傳遞給函數(shù)的參數(shù)
Function.call( ) 將函數(shù)作為對(duì)象的方法調(diào)用
Function.caller 調(diào)用當(dāng)前函數(shù)的函數(shù)
Function.length 已聲明的參數(shù)的個(gè)數(shù)
Function.prototype 對(duì)象類的原型
Function.toString( ) 把函數(shù)轉(zhuǎn)換成字符串
-
Math 數(shù)學(xué)對(duì)象
Math對(duì)象是一個(gè)靜態(tài)對(duì)象
Math.PI 圓周率龄章。
Math.abs() 絕對(duì)值。
Math.ceil() 向上取整(整數(shù)加 1乞封，小數(shù)去掉)做裙。
Math.floor() 向下取整(直接去掉小數(shù))。
Math.round() 四舍五入肃晚。
Math.pow(x锚贱，y) 求 x的y次方。
Math.sqrt() 求平方根关串。
-
Number 數(shù)值對(duì)象
Number.MAX_VALUE 最大數(shù)值
Number.MIN_VALUE 最小數(shù)值
Number.NaN 特殊的非數(shù)字值
Number.NEGATIVE_INFINITY 負(fù)無(wú)窮大
Number.POSITIVE_INFINITY 正無(wú)窮大
Number.toExponential( ) 用指數(shù)計(jì)數(shù)法格式化數(shù)字
Number.toFixed( ) 采用定點(diǎn)計(jì)數(shù)法格式化數(shù)字
Number.toLocaleString( ) 把數(shù)字轉(zhuǎn)換成本地格式的字符串
Number.toPrecision( ) 格式化數(shù)字的有效位
Number.toString( ) 將—個(gè)數(shù)字轉(zhuǎn)換成字符串
Number.valueOf( ) 返回原始數(shù)值
-
Object 基礎(chǔ)對(duì)象
Object 含有所有 JavaScript 對(duì)象的特性的超類
Object.constructor 對(duì)象的構(gòu)造函數(shù)
Object.hasOwnProperty( ) 檢查屬性是否被繼承
Object.isPrototypeOf( ) 一個(gè)對(duì)象是否是另一個(gè)對(duì)象的原型
Object.propertyIsEnumerable( ) 是否可以通過(guò) for/in循環(huán)看到屬性
Object.toLocaleString( ) 返回對(duì)象的本地字符串表示
Object.toString( ) 定義一個(gè)對(duì)象的字符串表示
Object.valueOf( ) 指定對(duì)象的原始值
-
RegExp 正則表達(dá)式對(duì)象
RegExp.exec( ) 通用的匹配模式
RegExp.global 正則表達(dá)式是否全局匹配
RegExp.ignoreCase 正則表達(dá)式是否區(qū)分大小寫
RegExp.lastIndex 下次匹配的起始位置
RegExp.source 正則表達(dá)式的文本
RegExp.test( ) 檢測(cè)一個(gè)字符串是否匹配某個(gè)模式
RegExp.toString( ) 把正則表達(dá)式轉(zhuǎn)換成字符串
String 字符串對(duì)象
Length 獲取字符串的長(zhǎng)度拧廊。
toLowerCase() 將字符串中的字母轉(zhuǎn)成全小寫监徘。
toUpperCase() 將字符串中的字母轉(zhuǎn)成全大寫。
charAt(index) 返回指定下標(biāo)位置的一個(gè)字符吧碾。如果沒有找到凰盔，則返回空字符串。
substr() 在原始字符串倦春，返回一個(gè)子字符串
substring() 在原始字符串户敬，返回一個(gè)子字符串。
split() 將一個(gè)字符串轉(zhuǎn)成數(shù)組睁本。
charCodeAt( ) 返回字符串中的第 n個(gè)字符的代碼
concat( ) 連接字符串
fromCharCode( ) 從字符編碼創(chuàng)建—個(gè)字符串
indexOf( ) 返回一個(gè)子字符串在原始字符串中的索引值(查找順序從左往右查找)尿庐。如果沒 有找到，則返回-1呢堰。
lastIndexOf( ) 從后向前檢索一個(gè)字符串
localeCompare( ) 用本地特定的順序來(lái)比較兩個(gè)字符串
match( ) 找到一個(gè)或多個(gè)正則表達(dá)式的匹配
replace( ) 替換一個(gè)與正則表達(dá)式匹配的子串
search( ) 檢索與正則表達(dá)式相匹配的子串
slice( ) 抽取一個(gè)子串
toLocaleLowerCase( ) 把字符串轉(zhuǎn)換小寫
toLocaleUpperCase( ) 將字符串轉(zhuǎn)換成大寫
toLowerCase( ) 將字符串轉(zhuǎn)換成小寫
toString( ) 返回字符串
toUpperCase( ) 將字符串轉(zhuǎn)換成大寫
valueOf( ) 返回字符串
-
-
什么是閉包抄瑟？
答：
簡(jiǎn)單的說(shuō)，作用域是針對(duì)變量的枉疼，比如我們創(chuàng)建一個(gè)函數(shù)a1锐借，函數(shù)里面又包了一 個(gè)子函數(shù) a2。此時(shí)就存在三個(gè)作用域： 全局作用域往衷、a1作用域钞翔、a2 作用域；即全局作用域包含了a1的作用域席舍，a2 的作用 域包含了 a1的作用域布轿。 當(dāng)a1 在查找變量的時(shí)候會(huì)先從自身的作用域區(qū)查找，找不到再到上一級(jí)a2 的作用域 查找来颤，如果還沒找到就到全局作用域區(qū)查找汰扭，這樣就形成了一個(gè)作用域鏈。 理解閉包首先要理解福铅，js 垃圾回收機(jī)制萝毛，也就是當(dāng)一個(gè)函數(shù)被執(zhí)行完后，其作用域會(huì)被 收回滑黔，如果形成了閉包笆包，執(zhí)行完后其作用域就不會(huì)被收回。 如果某個(gè)函數(shù)被他的父函數(shù)之外的一個(gè)變量引用略荡，就會(huì)形成閉包庵佣。 閉包的作用，就是保存自己私有的變量汛兜，通過(guò)提供的接口（方法）給外部使用巴粪，但外部 不能直接訪問(wèn)該變量。
-
什么是原型鏈？
答：
Javascript 是面向?qū)ο蟮母馗總€(gè)實(shí)例對(duì)象都有一個(gè)_proto屬性辫塌，該屬性指向它原 型對(duì)象，這個(gè)實(shí)例對(duì)象的構(gòu)造函數(shù)有一個(gè)原型屬性 prototype派哲，與實(shí)例的proto屬性指 向同一個(gè)對(duì)象臼氨。當(dāng)一個(gè)對(duì)象在查找一個(gè)屬性的時(shí)，自身沒有就會(huì)根據(jù)proto 向它的原型 進(jìn)行查找狮辽，如果都沒有，則向它的原型的原型繼續(xù)查找巢寡，直到查到 Object.prototype.proto為null喉脖，這樣也就形成了原型鏈。
-
有哪些方式繼承抑月？
答：
- 借用構(gòu)造函數(shù)树叽。也叫偽造對(duì)象或經(jīng)典繼承。 思路：在子類構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型構(gòu)造函數(shù)谦絮√馑校可以通過(guò)使用 apply()和call()方法 在新創(chuàng)建的對(duì)象上執(zhí)行構(gòu)造函數(shù)。 缺點(diǎn)：方法都在構(gòu)造函數(shù)中定義层皱，函數(shù)的復(fù)用就無(wú)從談起性锭。在超類型的原型中定義的方 法，對(duì)子類而言也是不可見的叫胖，結(jié)果所有的類型都只能使用構(gòu)造函數(shù)模式草冈。
- 組合繼承。也叫偽經(jīng)典繼承瓮增。指的是將原型鏈和借用構(gòu)造函數(shù)的技術(shù)組合到一起怎棱， 從而發(fā)揮二者之長(zhǎng)。 思路：使用原型鏈實(shí)現(xiàn)對(duì)原型屬性屬性和方法的繼承绷跑，通過(guò)借用構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)實(shí)例屬 性的繼承拳恋。 優(yōu)點(diǎn)：既通過(guò)在原型上定義方法實(shí)現(xiàn)了函數(shù)復(fù)用，又能保證每一個(gè)實(shí)例都有它自己的數(shù) 組砸捏。 組合繼承避免了原型鏈和借用構(gòu)造函數(shù)的缺陷谬运，融合了他們的優(yōu)點(diǎn)，成為 JavaScript 中常用的繼承模式垦藏。
- 原型鏈繼承吩谦。 思路：借助原型可以基于已有的對(duì)象創(chuàng)建對(duì)象，同時(shí)還不必因此創(chuàng)建自定義類型膝藕。 在object()函數(shù)內(nèi)部式廷，先創(chuàng)建一個(gè)臨時(shí)的構(gòu)造函數(shù)，然后將傳入的對(duì)象作為這個(gè)構(gòu)造函 數(shù)的原型芭挽，最后返回了這個(gè)臨時(shí)類型的一個(gè)新實(shí)例滑废。
- 寄生式繼承蝗肪。 思路：創(chuàng)建一個(gè)僅用于封裝繼承過(guò)程的函數(shù)，該函數(shù)在內(nèi)部以某種方式來(lái)增強(qiáng)對(duì)象蠕趁，最 后再像真的是它做了所有的工作一樣返回對(duì)象薛闪。缺點(diǎn)：使用寄生式繼承來(lái)為對(duì)象添加函數(shù)，會(huì)由于不能做到函數(shù)復(fù)用二降低效率俺陋，這一 點(diǎn)和構(gòu)造函數(shù)模式類似豁延。
- ）寄生組合式繼承。是JavaScript 最常用的繼承模式腊状。 思路：通過(guò)借用構(gòu)造函數(shù)來(lái)繼承屬性诱咏，通過(guò)原型鏈的混成形式來(lái)繼承方法。 本質(zhì)上缴挖，就是使用寄生式繼承來(lái)繼承超類型的原型袋狞，然后再將結(jié)果指定給子類型的原型。 開發(fā)人員普遍認(rèn)為寄生組合式繼承時(shí)引用類型最理想的繼承范式映屋。 extend（）方法才用了這樣的方式苟鸯。
-
字符創(chuàng)的常用方法有哪些？
答：
charCodeAt 方法返回一個(gè)整數(shù)棚点，代表指定位置字符的 Unicode 編碼早处；
charAt方法返回指定索引位置處的字符。如果超出有效范圍的索引值返回空字符串瘫析；
slice方法返回字符串的片段陕赃；
substring方法返回位于String 對(duì)象中指定位置的子字符串。
substr方法返回一個(gè)從指定位置開始的指定長(zhǎng)度的子字符串颁股。
indexOf方法返回 String 對(duì)象內(nèi)第一次出現(xiàn)子字符串位置么库。如果沒有找到子字符串， 則返回-1甘有；
lastIndexOf方法返回 String對(duì)象中字符串最后出現(xiàn)的位置诉儒。如果沒有匹配到子字符 串，則返回-1亏掀；
search方法返回與正則表達(dá)式查找內(nèi)容匹配的第一個(gè)字符串的位置忱反。
concat 方法返回字符串值，該值包含了兩個(gè)或多個(gè)提供的字符串的連接滤愕；
split 將一個(gè)字符串分割為子字符串温算，然后將結(jié)果作為字符串?dāng)?shù)組返回；
-
DOM節(jié)點(diǎn)的增刪改查间影？
答：
-
創(chuàng)建節(jié)點(diǎn)注竿、追加節(jié)點(diǎn)
createElement（標(biāo)簽名）創(chuàng)建一個(gè)元素節(jié)點(diǎn)（具體的一個(gè)元素）。
createTextNode（節(jié)點(diǎn)文本內(nèi)容）創(chuàng)建一個(gè)文本節(jié)點(diǎn)。
createDocumentFragment() //創(chuàng)建一個(gè) DOM 片段巩割。
appendChild（節(jié)點(diǎn)）追加一個(gè)節(jié)點(diǎn)裙顽。
-
插入節(jié)點(diǎn)
appendChild（節(jié)點(diǎn)）也是一種插入節(jié)點(diǎn)的方式，還可以添加已經(jīng)存在的元素宣谈，會(huì)將其
元素從原來(lái)的位置移到新的位置愈犹。insertBefore（a,b）是參照節(jié)點(diǎn)，意思是 a節(jié)點(diǎn)會(huì)插入 b節(jié)點(diǎn)的前面闻丑。
-
刪除漩怎、移除節(jié)點(diǎn)
removeChild(節(jié)點(diǎn)) 刪除一個(gè)節(jié)點(diǎn)，用于移除刪除一個(gè)參數(shù)（節(jié)點(diǎn)）嗦嗡。其返回的被移除
的節(jié)點(diǎn)勋锤，被移除的節(jié)點(diǎn)仍在文檔中，只是文檔中已沒有其位置了酸钦。 -
復(fù)制節(jié)點(diǎn)
cloneNode() 方法怪得，用于復(fù)制節(jié)點(diǎn)咱枉， 接受一個(gè)布爾值參數(shù)卑硫， true 表示深復(fù)制（復(fù)制節(jié)點(diǎn)
及其所有子節(jié)點(diǎn)）， false 表示淺復(fù)制（復(fù)制節(jié)點(diǎn)本身蚕断，不復(fù)制子節(jié)點(diǎn)）欢伏。 -
替換節(jié)點(diǎn)
replaceChild(插入的節(jié)點(diǎn)，被替換的節(jié)點(diǎn)) 亿乳，用于替換節(jié)點(diǎn)硝拧，接受兩個(gè)參數(shù)，第一參數(shù)
是要插入的節(jié)點(diǎn)葛假，第二個(gè)是要被替換的節(jié)點(diǎn)障陶。返回的是被替換的節(jié)點(diǎn)。 -
查找節(jié)點(diǎn)
getElementsByTagName() //通過(guò)標(biāo)簽名稱
getElementsByName() //通過(guò)元素的Name 屬性的值(IE容錯(cuò)能力較強(qiáng)聊训，會(huì)得到一
個(gè)數(shù)組抱究，其中包括 id等于 name值的)
getElementById() //通過(guò)元素 Id，唯一性
-
-
什么是預(yù)解析带斑？
答：
在代碼整體執(zhí)行之前鼓寺，先解析一部分。
預(yù)解析之后勋磕，代碼才會(huì)從上往下依次整體執(zhí)行妈候，但是預(yù)解析執(zhí)行過(guò)的代碼不會(huì) 重復(fù)執(zhí)行。
js預(yù)解析干了什么事：js 中預(yù)解析會(huì)把聲明部分的代碼預(yù)先執(zhí)行挂滓。
聲明相關(guān)的代碼可以分為兩部分：
1苦银、 變量聲明 通過(guò) var關(guān)鍵字定義的變量。
2、函數(shù)聲明 通過(guò) function關(guān)鍵字聲明的函數(shù)
預(yù)解析時(shí)如果遇到重復(fù)的變量聲明墓毒，那么忽略吓揪。
預(yù)解析時(shí)如果遇到重復(fù)的函數(shù)聲明，保留后面的函數(shù)所计。
預(yù)解析時(shí)如果遇到變量與函數(shù)重名的情況柠辞，保留函數(shù)。
什么是變量名提升主胧？
答：
使用 var關(guān)鍵字定義的變量叭首，被稱為變量聲明；
函數(shù)聲明提升的特點(diǎn)是踪栋，在函數(shù)聲明的前面焙格，可以調(diào)用這個(gè)函數(shù)。
-
JS中的typeof關(guān)鍵字能返回哪些數(shù)據(jù)類型夷都？
答：
typeof一般判斷基本數(shù)據(jù)類型眷唉。是一個(gè)操作符而不是函數(shù)，圓括號(hào)可有可無(wú)囤官。
typeof 返回值有：string冬阳，number，boolean党饮，undefined肝陪，object ，function刑顺，
基本數(shù)據(jù)類型：Boolean氯窍、Number、String蹲堂、Undefined狼讨、Null
基本數(shù)據(jù)類型中數(shù)字，字符串柒竞，布爾類型返回其對(duì)類型 undefined返回 undefined
九大內(nèi)置構(gòu)造函數(shù)及其他所有函數(shù)返回function政供；
其他所有復(fù)雜類型對(duì)象和null返回 object
-
簡(jiǎn)述創(chuàng)建函數(shù)的幾種方式？
答：
-
函數(shù)聲明
function sum1(num1,num2){
? return num1+num2;
}
-
函數(shù)表達(dá)式
var sum2 = function(num1,num2){
? return num1+num2;
}
-
函數(shù)對(duì)象方式
var sum3 = new Function("num1","num2","return num1+num2");
-
-
代碼實(shí)現(xiàn)數(shù)組排序并去重
答：
function fn(arr){ for(var i = 0; i < arr.length-1; i++){ for(var j = 0; j < arr.length-1-i; j++){ if(arr[j]<arr[j+1]){ var temp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = temp; } } } for(var k = 0; k < arr.length; k++){ var c = arr[k]; for(var l = k+1; l < arr.length; l++){ if(arr[l] == c){ arr.splice(l, 1); l--; } } } return arr } var arr = [1, 2, 5, 6, 8, 9, 10, 6, 5, 7, 4, 3, 5] console.log(fn(arr))
14.寫出下面代碼輸出的結(jié)果
A. console.log( undefined || 1 ); --> 1
? B. console.log( null || NaN ); --> NaN
? C. console.log( 0 && 1 ); --> 0
D. console.log( 0 && 1 || 0 ); --> 0
-
下列代碼將會(huì)輸出什么能犯？
var foo = 1; function fn() { console.log( foo ); --> undefined var foo = 2; console.log( foo ); --> 2 } fn();
實(shí)際工作部分
-
什么是短路表達(dá)式鲫骗？
答：
短路表達(dá)式只是一種簡(jiǎn)寫形式，也就是用 && 和 || 來(lái)賦值或者執(zhí)行函數(shù)的形式
例如：
var foo = foo1 || foo2;
意思是如果foo1是真的踩晶，那么就把foo1的值賦給foo执泰，否則把foo2的值賦給foo。
foo && foo()
當(dāng)foo存在的時(shí)候渡蜻，我們就執(zhí)行foo函數(shù)术吝，如果這個(gè)時(shí)候foo不是一個(gè)函數(shù)计济，就會(huì)報(bào)錯(cuò)，所以這個(gè)只是一種簡(jiǎn)寫形式而已排苍。
-
控制臺(tái)中使用哪些部分調(diào)試沦寂？
答：
主要用console來(lái)進(jìn)行調(diào)試
- console.log 用于輸出普通信息
- console.info 用于輸出提示性信息
- console.error用于輸出錯(cuò)誤信息
- console.warn用于輸出警示信息
- console.debug用于輸出調(diào)試信息
?
三、Web API模塊
基礎(chǔ)部分
-
要你出一套適應(yīng)不同分辨率淘衙，不同終端的前端實(shí)現(xiàn)方案你有什么思路传藏？
答：
- 流式布局：
使用非固定像素來(lái)定義網(wǎng)頁(yè)內(nèi)容，也就是百分比布局彤守，通過(guò)盒子的寬度設(shè)置成百分比來(lái)
根據(jù)屏幕的寬度來(lái)進(jìn)行伸縮毯侦，不受固定像素的限制，內(nèi)容向兩側(cè)填充具垫。這樣的布局方式侈离，就
是移動(dòng)web 開發(fā)使用的常用布局方式。這樣的布局可以適配移動(dòng)端不同的分辨率設(shè)備筝蚕。- 響應(yīng)式開發(fā)：
那么 EthanMarcotte 在2010 年 5月份提出的一個(gè)概念卦碾，簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能
夠兼容多個(gè)終端起宽。越來(lái)越多的設(shè)計(jì)師也采用了這種設(shè)計(jì)洲胖。
CSS3中的 Media Query（媒介查詢），通過(guò)查詢 screen 的寬度來(lái)指定某個(gè)寬
度區(qū)間的網(wǎng)頁(yè)布局燎含。
超小屏幕（移動(dòng)設(shè)備） 768px以下
小屏設(shè)備 768px-992px
中等屏幕 992px-1200px
寬屏設(shè)備 1200px 以上
由于響應(yīng)式開發(fā)顯得繁瑣些宾濒，一般使用第三方響應(yīng)式框架來(lái)完成腿短，比如bootstrap 來(lái)
完成一部分工作屏箍，當(dāng)然也可以自己寫響應(yīng)式。 -
px em rem 取用選擇依據(jù)橘忱？
答：
- px 像素（Pixel）赴魁。絕對(duì)單位。像素px是相對(duì)于顯示器屏幕分辨率而言的钝诚，是一
個(gè)虛擬長(zhǎng)度單位颖御，是計(jì)算機(jī)系統(tǒng)的數(shù)字化圖像長(zhǎng)度單位，如果 px要換算成物理長(zhǎng)度凝颇，需要
指定精度 DPI潘拱。- em是相對(duì)長(zhǎng)度單位，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸拧略。如當(dāng)前對(duì)行內(nèi)文本的字
體尺寸未被人為設(shè)置芦岂，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。它會(huì)繼承父級(jí)元素的字體大小垫蛆，因
此并不是一個(gè)固定的值禽最。- rem是 CSS3新增的一個(gè)相對(duì)單位（root em腺怯，根em），使用 rem 為元素設(shè)定字
體大小時(shí)川无，仍然是相對(duì)大小呛占，但相對(duì)的只是HTML根元素。
- 區(qū)別：IE無(wú)法調(diào)整那些使用 px作為單位的字體大小懦趋，而em 和rem可以縮放晾虑，rem
相對(duì)的只是HTML根元素。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身仅叫，通過(guò)它既
可以做到只修改根元素就成比例地調(diào)整所有字體大小走贪，又可以避免字體大小逐層復(fù)合的連鎖
反應(yīng)。目前惑芭，除了 IE8及更早版本外坠狡，所有瀏覽器均已支持rem。 -
Zepto和jQuery的區(qū)別遂跟？
答：
Zepto相對(duì)jQuery更加輕量逃沿，主要用在移動(dòng)端，jQuery也有對(duì)應(yīng)的jQuerymobile移動(dòng)端框架。
實(shí)際工作部分
-
移動(dòng)端touch事件判斷滑屏手勢(shì)的方向？
答：
當(dāng)開始一個(gè)touchstart事件的時(shí)候罗捎，獲取此刻手指的橫坐標(biāo)startX和縱坐標(biāo)startY歼狼；
當(dāng)觸發(fā)touchmove事件時(shí)，在獲取此時(shí)手指的橫坐標(biāo)moveEndX和縱坐標(biāo)moveEndY;最后怠堪，通過(guò)這兩次獲取的坐標(biāo)差值來(lái)判斷手指在手機(jī)屏幕上的滑動(dòng)方向。
思路：用touchmove的最后坐標(biāo)減去touchstart的起始坐標(biāo)，X的結(jié)果如果正數(shù)富拗，則說(shuō)明手指是從左往右劃動(dòng)；X的結(jié)果如果負(fù)數(shù)鸣戴，則說(shuō)明手指是從右往左劃動(dòng)啃沪；Y的結(jié)果如果正數(shù)，則說(shuō)明手指是從上往下劃動(dòng)窄锅；Y的結(jié)果如果負(fù)數(shù)创千，則說(shuō)明手指是從下往上劃動(dòng)。具體代碼如下：
var mybody = document.getElementsByTagName('body')[0]; //滑動(dòng)處理 var startX, startY, moveEndX, moveEndY, X, Y; mybody.addEventListener('touchstart', function(e) { e.preventDefault(); startX = e.touches[0].pageX; startY = e.touches[0].pageY; }); mybody.addEventListener('touchmove', function(e) { e.preventDefault(); moveEndX = e.changedTouches[0].pageX; moveEndY = e.changedTouches[0].pageY; X = moveEndX - startX; Y = moveEndY - startY; if ( X > 0 ) {alert(‘向右’);} else if ( X < 0 ) {alert(‘向左’);} else if ( Y > 0) {alert(‘向下’);} else if ( Y < 0 ) { alert(‘向上’);} else{alert(‘沒滑動(dòng)’); } }); -
移動(dòng)端對(duì)圖片優(yōu)化有哪些方式入偷，怎么實(shí)現(xiàn)追驴？
答：
懶加載，使用CSS Sprites合并為一張大圖疏之，首先從圖片格式方面著手殿雪，webp(google官方網(wǎng)址)是谷歌推出的一種圖片格式，優(yōu)點(diǎn)在于同等畫面質(zhì)量下体捏，體積比jpg冠摄、png少了25%以上糯崎，去掉無(wú)意義的修飾，使用矢量圖替代位圖河泳。
按照HTTP協(xié)議設(shè)置合理的緩存沃呢。
詳見鏈接 http://web.jobbole.com/81766/ -
rem布局中的尺寸是怎樣計(jì)算的，實(shí)際舉例說(shuō)明一下拆挥？
答：
其實(shí)rem布局的本質(zhì)是等比縮放薄霜，一般是基于寬度，試想一下如果UE圖能夠等比縮放纸兔，假設(shè)我們將屏幕寬度平均分成100份惰瓜，每一份的寬度用x表示，x = 屏幕寬度 / 100汉矿，如果將x作為單位崎坊，x前面的數(shù)值就代表屏幕寬度的百分比。
?
四洲拇、JavaScript高級(jí)模塊
基礎(chǔ)部分
-
說(shuō)說(shuō)你對(duì)this關(guān)鍵字的理解奈揍？
答：
this 是一個(gè)關(guān)鍵字，它代表函數(shù)運(yùn)行時(shí)赋续，自動(dòng)生成的一個(gè)內(nèi)部對(duì)象男翰，只能在函數(shù)內(nèi) 部使用。
1.作為純粹的函數(shù)調(diào)用 this 指向全局對(duì)象
2.作為對(duì)象的方法調(diào)用 this 指向調(diào)用對(duì)象
3.作為構(gòu)造函數(shù)被調(diào)用 this 指向新的對(duì)象（new會(huì)改變 this 的指向）
4.apply 調(diào)用 this 指向 apply方法的第一個(gè)參數(shù)
-
表單驗(yàn)證傳輸?shù)氖裁磾?shù)據(jù)纽乱？明文還是暗文==加密蛾绎？如何加密？是每一次傳
輸數(shù)據(jù)鸦列，都是加密之后才傳輸嗎租冠？答：
概述： GET是從服務(wù)器上請(qǐng)求數(shù)據(jù)，POST 是發(fā)送數(shù)據(jù)到服務(wù)器敛熬。事實(shí)上肺稀，GET方法是把數(shù) 據(jù)參數(shù)隊(duì)列（query string）加到一個(gè)URL上第股，值和表單是一一對(duì)應(yīng)的应民。比如說(shuō)， name=John夕吻。在隊(duì)列里诲锹，值和表單用一個(gè)&符號(hào)分開，空格用+號(hào)替換涉馅，特殊的符號(hào)轉(zhuǎn)換 成十六進(jìn)制的代碼归园。因?yàn)檫@一隊(duì)列在 URL里邊，這樣隊(duì)列的參數(shù)就能看得到稚矿，可以被記錄 下來(lái)庸诱，或更改捻浦。通常GET 方法還限制字符的大小（大概是 256 字節(jié) ）桥爽。事實(shí)上POST 方法可以沒有時(shí)間限制的傳遞數(shù)據(jù)到服務(wù)器朱灿，用戶在瀏覽器端是看不到 這一過(guò)程的，所以 POST方法比較適合用于發(fā)送一個(gè)保密的（比如信用 卡號(hào)）或者比較大 量的數(shù)據(jù)到服務(wù)器钠四。
區(qū)別： Post 是允許傳輸大量數(shù)據(jù)的方法盗扒，而 Get 方法會(huì)將所要傳輸?shù)臄?shù)據(jù)附在網(wǎng)址后面，然 后一起送達(dá)服務(wù)器缀去，因此傳送的數(shù)據(jù)量就會(huì)受到限制侣灶，但是執(zhí)行效率卻比 Post 方法好。
-
總結(jié)：
1缕碎、get 方式的安全性較Post 方式要差些褥影，包含機(jī)密信息的話，建議用 Post 數(shù)據(jù)提交 方式咏雌；
2伪阶、在做數(shù)據(jù)查詢時(shí)，建議用 Get 方式处嫌；而在做數(shù)據(jù)添加栅贴、修改或刪除時(shí)，建議用Post 方式熏迹；
所以： 表達(dá)如果是向服務(wù)器傳輸數(shù)據(jù)(如帳號(hào)密碼等)都是加密數(shù)據(jù)(post)檐薯，如果只是單單想要 從服務(wù)器獲得數(shù)據(jù)或者傳輸?shù)臄?shù)據(jù)并不重要， 可以直接使用明文方式傳輸( get )
-
如何實(shí)現(xiàn)跨域注暗？
答：
JSONP(JSON with Padding 填充式JSON 或參數(shù)式 JSON)
在js 中坛缕，我們雖然不能直接用XMLHttpRequest 請(qǐng)求不同域上的數(shù)據(jù)，但是在頁(yè)面上引入不同域上的js 腳本文件卻是可以的捆昏，jsonp正是利用這個(gè)特性來(lái)實(shí)現(xiàn)的赚楚。
JSONP 由兩部分組成：回調(diào)函數(shù)和數(shù)據(jù)∑罚回調(diào)函數(shù)是當(dāng)響應(yīng)到來(lái)時(shí)應(yīng)該在頁(yè)面中調(diào)用的函數(shù)宠页，而數(shù)據(jù)就是傳入回調(diào)函數(shù)中的JSON 數(shù)據(jù)。
優(yōu)點(diǎn)： 它的兼容性更好寇仓，在更加古老的瀏覽器中都可以運(yùn)行举户，不需要XMLHttpRequest 或 ActiveX 的支持； 能夠直接訪問(wèn)響應(yīng)文本遍烦，支持在瀏覽器與服務(wù)器之間雙向通信
缺點(diǎn)： JSONP 是從其他域中加載代碼執(zhí)行俭嘁。如果其他域不安全，很可能會(huì)在響應(yīng)中夾帶一些 惡意代碼服猪，而此時(shí)除了完全放棄 JSONP 調(diào)用之外供填，沒有辦法追究拐云。因此在使用不是你自己 運(yùn)維的Web 服務(wù)時(shí)，一定得保證它安全可靠近她。 它只支持 GET請(qǐng)求而不支持 POST等其它類型的 HTTP 請(qǐng)求慨丐；它只支持跨域 HTTP 請(qǐng) 求這種情況，不能解決不同域的兩個(gè)頁(yè)面之間如何進(jìn)行 JavaScript調(diào)用的問(wèn)題
-
說(shuō)說(shuō)事件委托機(jī)制泄私？這樣做有什么好處房揭？
答：
事件委托，就是某個(gè)事件本來(lái)該自己干的晌端，但是自己不干捅暴，交給別人來(lái)干。就叫事件委 托咧纠。打個(gè)比方：一個(gè)button 對(duì)象蓬痒，本來(lái)自己需要監(jiān)控自身的點(diǎn)擊事件，但是自己不來(lái)監(jiān)控這個(gè)點(diǎn)擊事件漆羔，讓自己的父節(jié)點(diǎn)來(lái)監(jiān)控自己的點(diǎn)擊事件梧奢。
優(yōu)點(diǎn)：
提高性能：列如，當(dāng)有很多 li同時(shí)需要注冊(cè)事件的時(shí)候演痒，如果使用傳統(tǒng)方法來(lái)注冊(cè) 事件的話亲轨，需要給每一個(gè) li 注冊(cè)事件。然而如果使用委托事件的話鸟顺，就只需要將事件委托給 該一個(gè)元素即可惦蚊。這樣就能提高性能。
? 新添加的元素還會(huì)有之前的事件讯嫂；
-
call和apply的區(qū)別蹦锋？
答：
它們的共同之處：都“可以用來(lái)代替另一個(gè)對(duì)象調(diào)用一個(gè)方法，將一個(gè)函數(shù)的對(duì)象上 下文從初始的上下文改變?yōu)橛?thisObj 指定的新對(duì)象欧芽±虻啵”
它們的不同之處：
? Apply：最多只能有兩個(gè)參數(shù)——新this 對(duì)象和一個(gè)數(shù)組 argArray。如果給該方法傳遞多 個(gè)參數(shù)千扔，則把參數(shù)都寫進(jìn)這個(gè)數(shù)組里面憎妙，當(dāng)然，即使只有一個(gè)參數(shù)昏鹃，也要寫進(jìn)數(shù)組里面尚氛。如 果 argArray 不是一個(gè)有效的數(shù)組或者不是 arguments 對(duì)象，那么將導(dǎo)致一個(gè) TypeError洞渤。如果沒有提供 argArray 和 thisObj 任何一個(gè)參數(shù)，那么 Global 對(duì)象將被 用作 thisObj属瓣， 并且無(wú)法被傳遞任何參數(shù)
? Call：則是直接的參數(shù)列表载迄，主要用在js 對(duì)象各方法互相調(diào)用的時(shí)候讯柔，使當(dāng)前 this 實(shí)例指 針保持一致，或在特殊情況下需要改變this指針护昧。如果沒有提供 thisObj 參數(shù)魂迄，那么 Global 對(duì)象被用作 thisObj。
-
在JS的計(jì)時(shí)器運(yùn)行原理是怎樣的惋耙，為什么可以觸發(fā)計(jì)時(shí)效果? 計(jì)時(shí)器是多線程嗎?
答：
- javascript引擎只有一個(gè)線程捣炬，強(qiáng)迫異步事件排隊(duì)等待被執(zhí)行。
- setTimeout 和setInterval 本質(zhì)上不同的地方是他們?nèi)绾螆?zhí)行異步代碼的绽榛。
- 如果一個(gè)定時(shí)器正在執(zhí)行的時(shí)候被阻塞了湿酸，那么它將會(huì)被推遲到下一個(gè)可能的執(zhí)行點(diǎn)，這既是使得延遲時(shí)間有可能會(huì)超過(guò)聲明定時(shí)器時(shí)設(shè)置的值灭美。
- Interval 如果有足夠的時(shí)間來(lái)執(zhí)行（大于制定的延遲）推溃，那么它將會(huì)無(wú)延遲的一個(gè)緊 接著一個(gè)執(zhí)行。
- 原理： 計(jì)時(shí)器通過(guò)設(shè)定一定的時(shí)間段（毫秒）來(lái)異步的執(zhí)行一段代碼届腐。因?yàn)?Javascript 是一 個(gè)單線程語(yǔ)言铁坎，計(jì)時(shí)器提供了一種繞過(guò)這種語(yǔ)言限制來(lái)執(zhí)行代碼的能力。
- 總結(jié)： 計(jì)時(shí)器是單線程的犁苏， 需要等待上一個(gè)執(zhí)行完硬萍， 如果上一個(gè)沒有執(zhí)行完， 下一個(gè)需要 延遲執(zhí)行围详， 直到上一個(gè)執(zhí)行完襟铭。
-
什么是事件的冒泡和捕獲？
答：
事件冒泡：子元素事件的觸發(fā)會(huì)影響父元素事件短曾；
開關(guān)事件冒泡：
? A寒砖，開啟事件冒泡：element.addEventListener(eventName，handler嫉拐，false)哩都；
? B，關(guān)閉事件冒泡：假設(shè)傳統(tǒng)方式事件的返回值為 e婉徘，就可以通過(guò) e.stopPropagation()來(lái)關(guān)閉事件冒泡漠嵌；
事件捕獲：父元素的事件會(huì)影響子元素的事件；
開啟事件捕獲：element.addEventListener(eventName盖呼，handler儒鹿，true)
-
面向?qū)ο蠛皖惖膮^(qū)別？
答：
簡(jiǎn)單的說(shuō)類是對(duì)象的模版几晤。
? 在 js 中沒有類约炎， 所以在js 中所謂的 類 就是構(gòu)造函數(shù)， 對(duì)象就是由構(gòu)造函數(shù)創(chuàng)建
? 出來(lái)的實(shí)例對(duì)象。面向?qū)ο缶褪鞘褂妹嫦驅(qū)ο蟮姆绞教幚韱?wèn)題圾浅， 面向?qū)ο笫菍?duì)面向過(guò)程進(jìn)
? 行封裝掠手。
面向?qū)ο笥腥筇匦?br> ? 抽象性， 需要通過(guò)核心數(shù)據(jù)和特定環(huán)境才能描述對(duì)象的具體意義? 封裝性狸捕， 封裝就是將數(shù)據(jù)和功能組合到一起喷鸽， 在js 中對(duì)象就是鍵值對(duì)的集合， 對(duì)象
? 將屬性和方法封裝起來(lái)灸拍， 方法將過(guò)程封裝起來(lái)? 繼承性做祝，將別人的屬性和方法成為自己的，傳統(tǒng)繼承基于模板(類)鸡岗，js 中繼承基于 構(gòu)
? 造函數(shù)
實(shí)際工作部分
-
JavaScript 中的垃圾回收機(jī)制?
答：
在Javascript 中混槐，如果一個(gè)對(duì)象不再被引用，那么這個(gè)對(duì)象就會(huì)被GC 回收纤房。如 果兩個(gè)對(duì)象互相引用纵隔，而不再被第3者所引用，那么這兩個(gè)互相引用的對(duì)象也會(huì)被回收炮姨。 因?yàn)楹瘮?shù) a被b引用捌刮，b又被 a外的 c引用，這就是為什么 函數(shù) a 執(zhí)行后不會(huì)被回收的原 因舒岸。
-
列出3條以上 FF 和 IE 的腳本兼容問(wèn)題
答：
-
window.event：
表示當(dāng)前的事件對(duì)象绅作，IE有這個(gè)對(duì)象，F(xiàn)F沒有蛾派，F(xiàn)F通過(guò)給事件處理函數(shù)傳遞事件對(duì)象
-
獲取事件源
IE用srcElement獲取事件源俄认，而FF用target獲取事件源
-
添加，去除事件
IE：element.attachEvent(“onclick”,function) element.detachEvent(“onclick”, function)
FF：element.addEventListener(“click”,function, true) element.removeEventListener(“click”, function, true)
-
獲取標(biāo)簽的自定義屬性
IE：div1.value或div1[“value”]
FF：可用div1.getAttribute(“value”)
-
-
用正則表達(dá)式洪乍，寫出由字母開頭眯杏，其余由數(shù)字、字母壳澳、下劃線組成的6~30的字符串岂贩？
答：
/^[a-zA-Z]{1}[\w]{5,29}$/
-
下列JavaScript代碼執(zhí)行后，iNum的值是多少巷波？
var iNum = 0;
for(var i = 1; i < 10; i++){
? if(i% 5 == 0){
? continue;
? }
? iNum++;
}
答：8
-
程序中捕獲異常的方法萎津？
答：
window.error
try{}catch(error){}finally{}
-
正則匹配郵箱？
答：
/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
-
Javascript中callee和caller的作用抹镊？
答：
caller是返回一個(gè)對(duì)函數(shù)的引用锉屈，該函數(shù)調(diào)用了當(dāng)前函數(shù)；
callee是返回正在被執(zhí)行的function函數(shù)垮耳，也就是所指定的function對(duì)象的正文颈渊。
-
下列代碼的輸出結(jié)果？
function f1(){ var tmp = 1; this.x = 3; console.log( tmp ); console.log( this.x ); } var obj = new f1(); console.log( obj.x ); console.log( f1() );答：
首先看代碼（1），這里實(shí)例話化了f1這個(gè)類儡炼。相當(dāng)于執(zhí)行了 f1函數(shù)妓湘。所以這個(gè)時(shí)候 A 會(huì)輸出 1查蓉， 而 B 這個(gè)時(shí)候的 this 代表的是實(shí)例化的當(dāng)前對(duì)象 obj ,B 輸出 3乌询。
代碼（2）毋庸置疑會(huì)輸出 3，
重點(diǎn) 代碼（3）首先這里將不再是一個(gè)類豌研，它只是一個(gè)函數(shù)妹田。那么 A輸出 1， B呢鹃共？這里的this 代表的其實(shí)就是window對(duì)象鬼佣，那么this.x 就是一個(gè)全局變量 相當(dāng)于在外部 的一個(gè)全局變量。所以B 輸出 3霜浴。最后代碼由于f沒有返回值那么一個(gè)函數(shù)如果沒返回值的話晶衷，將會(huì)**返回 underfined **，所以答案就是 ： 1阴孟， 3晌纫， 3， 1永丝， 3锹漱， underfined 。
-
下面代碼輸出結(jié)果慕嚷？
function changeObjectProperty(o){ o.siteUrl = "http://www.csser.com/"; o = new Object(); o.siteUrl = "http://www.popcg.com/"; } var CSSer = new Object(); changeObjectProperty( CSSer ); console.log( CSSer.siteUrl );答：
"http://www.popcg.com/" ?
五哥牍、jQuery模塊
基礎(chǔ)部分
-
談?wù)勀銓?duì)jQuery的理解？
答：
JQuery 是繼 prototype 之后又一個(gè)優(yōu)秀的 Javascript 庫(kù)喝检。它是輕量級(jí)的js 庫(kù) 嗅辣，它
兼容 CSS3，還兼容各種瀏覽器（IE 6.0+挠说，F(xiàn)F1.5+澡谭，Safari 2.0+，Opera 9.0+）纺涤，jQuery2.0
及后續(xù)版本將不再支持 IE6/7/8 瀏覽器译暂。jQuery 使用戶能更方便地處理 HTML（標(biāo)準(zhǔn)通用
標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）、events撩炊、實(shí)現(xiàn)動(dòng)畫效果外永，并且方便地為網(wǎng)站提供 AJAX 交互。
jQuery還有一個(gè)比較大的優(yōu)勢(shì)是拧咳，它的文檔說(shuō)明很全伯顶，而且各種應(yīng)用也說(shuō)得很詳細(xì)，
同時(shí)還有許多成熟的插件可供選擇。jQuery 能夠使用戶的 html頁(yè)面保持代碼和 html 內(nèi)容
分離祭衩，也就是說(shuō)灶体，不用再在 html里面插入一堆 js 來(lái)調(diào)用命令了，只需要定義 id即可掐暮。
jQuery 是一個(gè)兼容多瀏覽器的 javascript 庫(kù)蝎抽，核心理念是write less，do more(寫
得更少路克，做得更多)樟结。 jQuery是免費(fèi)、開源的精算，使用 MIT 許可協(xié)議瓢宦。jQuery 的語(yǔ)法設(shè)
計(jì)可以使開發(fā)更加便捷，例如操作文檔對(duì)象灰羽、選擇 DOM 元素驮履、制作動(dòng)畫效果、事件處理廉嚼、
使用 Ajax 以及其他功能玫镐。除此以外，jQuery 提供 API讓開發(fā)者編寫插件前鹅。其模塊化的使
用方式使開發(fā)者可以很輕松的開發(fā)出功能強(qiáng)大的靜態(tài)或動(dòng)態(tài)網(wǎng)頁(yè)摘悴。 -
、原生JS的window.onload與Jquery的
(function () {})有什么不同蹂喻？
答：
1.執(zhí)行時(shí)間 window.onload必須等到頁(yè)面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。 $(document).ready()是 DOM 結(jié)構(gòu)繪制完畢后就執(zhí)行捂寿，不必等到加載完畢口四。
2.編寫個(gè)數(shù)不同 window.onload不能同時(shí)編寫多個(gè)，如果有多個(gè) window.onload 方法秦陋，只會(huì)執(zhí) 行一個(gè) $(document).ready()可以同時(shí)編寫多個(gè)飞袋，并且都可以得到執(zhí)行
3.簡(jiǎn)化寫法 window.onload沒有簡(jiǎn)化寫法
? $(document).ready(function (){})
? 可以簡(jiǎn)寫成$(function(){})妇垢；
-
jQuery一個(gè)對(duì)象可以同時(shí)綁定多個(gè)事件砌们，是如何實(shí)現(xiàn)的旅薄？
答：
jQuery可以給一個(gè)對(duì)象同時(shí)綁定多個(gè)事件，低層實(shí)現(xiàn)方式是使用addEventListner或attachEvent兼容不同的瀏覽器實(shí)現(xiàn)事件的綁定顺又，這樣可以給同一個(gè)對(duì)象注冊(cè)多個(gè)事件更卒。
-
jQuery.fn的init方法返回的this指的是什么對(duì)象？為什么要返回this稚照？
答：
this執(zhí)行init構(gòu)造函數(shù)自身蹂空，其實(shí)就是jQuery實(shí)例對(duì)象俯萌，返回this是為了實(shí)現(xiàn)jQuery的鏈?zhǔn)讲僮?/p>
-
jQuery.extend和jQuery.fn.extend有什么區(qū)別？
答：
Jquery.extend用來(lái)擴(kuò)展jQuery對(duì)象本身上枕；jquery.fn.extend用來(lái)擴(kuò)展jQuery實(shí)例
實(shí)際工作部分
-
jQuery框架中$.ajax()的常用參數(shù)有哪些咐熙？寫一個(gè)post請(qǐng)求并帶有發(fā)送數(shù)據(jù)和返回?cái)?shù)據(jù)的樣例？
答：
async是否異步
url請(qǐng)求地址
contentType發(fā)送信息至服務(wù)器時(shí)內(nèi)容編碼類型
data發(fā)送到服務(wù)器的數(shù)據(jù)
dataType預(yù)期服務(wù)器返回的數(shù)據(jù)類型
type請(qǐng)求類型
success請(qǐng)求成功回調(diào)函數(shù)
error請(qǐng)求失敗回調(diào)函數(shù)
$.ajax({
? url: "/jquery/test1.txt",
? type: 'post',
? data: { id: 1 },
? success: function ( data ) { alert(data); }
? })
-
舉一下jquery中的函數(shù)辨萍，這些函數(shù)實(shí)現(xiàn)鏈?zhǔn)骄幊痰脑恚?/p>
答：
toggle（fn, fn） $（“td”）.toggle（ function（）{ $（this）.addClass（“selected”）; }棋恼， function（）{ $（this）.removeClass（“selected”）; ） 實(shí)現(xiàn)函數(shù)鏈?zhǔn)骄幊痰脑恚悍祷刈陨恚渌^(guò)程在函數(shù)內(nèi)部實(shí)現(xiàn)分瘦，其好處是：節(jié)約js代碼蘸泻，返回的是同一個(gè)對(duì)象琉苇，提高代碼的效率嘲玫。 ?
六、PHP后臺(tái)開發(fā)模塊
基礎(chǔ)部分
-
php inset 和 empty 的區(qū)別并扇？
答：
1去团、empty函數(shù)
用途：檢測(cè)變量是否為空
判斷：如果 var 是非空或非零的值，則 empty() 返回 FALSE穷蛹。換句話說(shuō)土陪，""、0肴熏、"0"鬼雀、NULL、FALSE蛙吏、array()源哩、var $var; 以及沒有任何屬性的對(duì)象都將被認(rèn)為是空的，如果 var 為空鸦做，則返回 TRUE励烦。注意：empty() 只檢測(cè)變量，檢測(cè)任何非變量的東西都將導(dǎo)致解析錯(cuò)誤泼诱。換句話說(shuō)坛掠，后邊的語(yǔ)句將不會(huì)起作用;
2、isset函數(shù)
用途：檢測(cè)變量是否設(shè)置
判斷：檢測(cè)變量是否設(shè)置治筒，并且不是 NULL屉栓。如果已經(jīng)使用 unset() 釋放了一個(gè)變量之后，它將不再是 isset()耸袜。若使用 isset() 測(cè)試一個(gè)被設(shè)置成 NULL 的變量友多，將返回 FALSE。同時(shí)要注意的是一個(gè)NULL 字節(jié)（"\0"）并不等同于 PHP 的 NULL 常數(shù)句灌。
-
php 中$_SERVER變量中是如何得到當(dāng)前執(zhí)行腳本路徑的夷陋？
[圖片上傳失敗...(image-4b1d77-1536131017848)]
七欠拾、Ajax模塊
基礎(chǔ)部分
-
ajax是什么？
答：
Ajax并不算是一種新的技術(shù)骗绕，全稱是asychronous javascript and xml藐窄，可以說(shuō)是已有技術(shù)的組合，主要用來(lái)實(shí)現(xiàn)客戶端與服務(wù)器端的異步通信效果酬土，實(shí)現(xiàn)頁(yè)面的局部刷新荆忍，早期的瀏覽器并不能原生支持ajax，可以使用隱藏幀（iframe）方式變相實(shí)現(xiàn)異步效果撤缴，后來(lái)的瀏覽器提供了對(duì)ajax的原生支持
使用ajax原生方式發(fā)送請(qǐng)求主要通過(guò)XMLHttpRequest(標(biāo)準(zhǔn)瀏覽器)刹枉、ActiveXObject(IE瀏覽器)對(duì)象實(shí)現(xiàn)異步通信效果
-
同步和異步執(zhí)行代碼的區(qū)別？
答：
同步：阻塞的
=張三叫李四去吃飯屈呕，李四一直忙得不停微宝，張三一直等著，直到李四忙完兩個(gè)人一塊去吃飯
=瀏覽器向服務(wù)器請(qǐng)求數(shù)據(jù)虎眨，服務(wù)器比較忙蟋软，瀏覽器一直等著（頁(yè)面白屏），直到服務(wù)器返回?cái)?shù)據(jù)嗽桩，瀏覽器才能顯示頁(yè)面
異步：非阻塞的
=張三叫李四去吃飯岳守，李四在忙，張三說(shuō)了一聲然后自己就去吃飯了碌冶，李四忙完后自己去吃
=瀏覽器向服務(wù)器請(qǐng)求數(shù)據(jù)湿痢，服務(wù)器比較忙，瀏覽器可以自如的干原來(lái)的事情（顯示頁(yè)面）扑庞，服務(wù)器返回?cái)?shù)據(jù)的時(shí)候通知瀏覽器一聲譬重，瀏覽器把返回的數(shù)據(jù)再渲染到頁(yè)面，局部更新
-
頁(yè)面編碼和被請(qǐng)求的資源編碼不一樣如何處理嫩挤？
答：
對(duì)于ajax請(qǐng)求傳遞的參數(shù)害幅，如果是get請(qǐng)求方式，參數(shù)如果傳遞中文岂昭，在有些瀏覽器會(huì)亂碼以现，不同的瀏覽器對(duì)參數(shù)編碼的處理方式不同，所以對(duì)于get請(qǐng)求的參數(shù)需要使用 encodeURIComponent函數(shù)對(duì)參數(shù)進(jìn)行編碼處理约啊，后臺(tái)開發(fā)語(yǔ)言都有相應(yīng)的解碼api邑遏。對(duì)于post請(qǐng)求不需要進(jìn)行編碼
-
簡(jiǎn)述ajax的過(guò)程？
答：
- 創(chuàng)建XMLHttpRequest對(duì)象,也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象
- 創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法恰矩、URL及驗(yàn)證信息
- 設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù)
- 發(fā)送HTTP請(qǐng)求
- 獲取異步調(diào)用返回的數(shù)據(jù)
- 使用JavaScript和DOM實(shí)現(xiàn)局部刷新
-
請(qǐng)解釋一下JavaScript的同源策略记盒？
答：
同源策略在什么情況下會(huì)起作用呢？ 當(dāng)web 頁(yè)面使用多個(gè)<iframe>元素或者打開其他瀏覽器窗口的時(shí)候外傅，這一策略就 會(huì)起作用纪吮。
同源策略的含義： 腳本只能讀取和所屬文檔來(lái)源相同的窗口和文檔的屬性俩檬。 這里就涉及到了一個(gè)瀏覽器如何判斷兩者是否同源以及如何判斷腳本來(lái)源的問(wèn)題。
注意一點(diǎn)：腳本本身的來(lái)源并不作為判斷是否同源的依據(jù)碾盟，而是將腳本所屬文檔的來(lái)源 作為判斷依據(jù)棚辽。- 判斷腳本來(lái)源 例如：文檔 A中通過(guò) script 的 src引用了一個(gè)外部腳本，這個(gè)腳本是 google 提供的冰肴，也是從google 的主機(jī)上加載到文檔 A中的屈藐，那么這個(gè)腳本的所屬文檔是誰(shuí)呢， 答案是文檔A熙尉。
- 判斷是否同源 理解了腳本來(lái)源联逻，接著理解怎么判斷是否同源：如果兩個(gè)文檔在協(xié)議、主機(jī)以 及載入文檔的 URL端口這三點(diǎn)中有一點(diǎn)不同检痰，就認(rèn)為他們不同源包归。
-
get和post的區(qū)別？
答：
GET：一般用于信息獲取攀细，使用URL傳遞參數(shù)箫踩，對(duì)所發(fā)送信息的數(shù)量也有限制，一般在2000個(gè)字符谭贪，有的瀏覽器是8000個(gè)字符
POST：一般用于修改服務(wù)器上的資源，對(duì)所發(fā)送的信息沒有限制
在以下情況中锦担，請(qǐng)使用 POST 請(qǐng)求：
- 無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）
- 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
- 發(fā)送包含未知字符的用戶輸入時(shí)俭识，POST 比GET 更穩(wěn)定也更可靠
-
解釋jsonp的原理？
答：
Jsonp并不是一種數(shù)據(jù)格式洞渔，而json是一種數(shù)據(jù)格式套媚，jsonp是用來(lái)解決跨域獲取數(shù)據(jù)的一種解決方案，具體是通過(guò)動(dòng)態(tài)創(chuàng)建script標(biāo)簽磁椒，然后通過(guò)標(biāo)簽的src屬性獲取js文件中的js腳本堤瘤，該腳本的內(nèi)容是一個(gè)函數(shù)調(diào)用，參數(shù)就是服務(wù)器返回的數(shù)據(jù)浆熔，為了處理這些返回的數(shù)據(jù)本辐，需要事先在頁(yè)面定義好回調(diào)函數(shù)，本質(zhì)上使用的并不是ajax技術(shù)
-
ajax請(qǐng)求時(shí)如何解釋json數(shù)據(jù)医增？
答：
使用eval() 或者JSON.parse() 鑒于安全性考慮慎皱，推薦使用JSON.parse()更靠譜，對(duì)數(shù)據(jù)的安全性更好叶骨。
-
HTTP狀態(tài)碼都有哪些茫多？
答：
100 => 正在初始化（一般是看不到的）
101 => 正在切換協(xié)議（websocket瀏覽器提供的）
200或者以2開頭的兩位數(shù) => 都是代表響應(yīng)主體的內(nèi)容已經(jīng)成功返回了
202 => 表示接受
301 => 永久重定向/永久轉(zhuǎn)移
302 => 臨時(shí)重定向/臨時(shí)轉(zhuǎn)移（一般用來(lái)做服務(wù)器負(fù)載均衡）
304 => 本次獲取的內(nèi)容是讀取緩存中的數(shù)據(jù)，會(huì)每次去服務(wù)器校驗(yàn)
400 => 參數(shù)出現(xiàn)錯(cuò)誤（客戶端傳遞給服務(wù)器端的參數(shù)出現(xiàn)錯(cuò)誤）
401 => 未認(rèn)證忽刽，沒有登錄網(wǎng)站
403 => 禁止訪問(wèn)天揖，沒有權(quán)限
404 => 客戶端訪問(wèn)的地址不存在
500 => 未知的服務(wù)器錯(cuò)誤
503 => 服務(wù)器超負(fù)荷（假設(shè)一臺(tái)服務(wù)器只能承受10000人夺欲，當(dāng)?shù)?0001人訪問(wèn)的時(shí)候，如果服務(wù)器沒有做負(fù)載均衡今膊，那么這個(gè)人的網(wǎng)絡(luò)狀態(tài)碼就是503）
實(shí)際工作部分
-
瀏覽器渲染頁(yè)面的過(guò)程
答：
瀏覽器會(huì)把HTML洁闰、SVG、XHTML三種格式的文件會(huì)產(chǎn)生一個(gè)DOM樹万细；
Css扑眉，解析css會(huì)產(chǎn)生css規(guī)則樹JavaScript會(huì)通過(guò)DOM apI 來(lái)操作DOM樹 和 css規(guī)則樹
-
簡(jiǎn)單描述下同步和異步的區(qū)別，并舉例實(shí)際應(yīng)用中哪些是同步赖钞，哪些是異步腰素？
答：
同步是阻塞的，瀏覽器向服務(wù)器發(fā)送請(qǐng)求雪营，服務(wù)器比較忙弓千，瀏覽器一直等著（頁(yè)面白屏），直到服務(wù)器返回?cái)?shù)據(jù)献起，頁(yè)面才可以正常顯示洋访；
異步是非阻塞的，瀏覽器向服務(wù)器請(qǐng)求數(shù)據(jù)谴餐，服務(wù)器比較忙姻政，瀏覽器可以干自己原來(lái)的事情（顯示頁(yè)面），服務(wù)器返回?cái)?shù)據(jù)的時(shí)候通知瀏覽器一聲岂嗓，瀏覽器把返回的數(shù)據(jù)再渲染到頁(yè)面汁展，局部更新。
-
簡(jiǎn)述AJAX的工作原理
答：
Ajax的原理簡(jiǎn)單來(lái)說(shuō)通過(guò)XmlHttpRequest對(duì)象來(lái)向服務(wù)器發(fā)異步請(qǐng)求厌殉，從服務(wù)器獲得數(shù)據(jù)食绿，然后用javascript來(lái)操作DOM而更新頁(yè)面。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請(qǐng)求數(shù)據(jù)公罕。
XMLHttpRequest是ajax的核心機(jī)制器紧，它是在IE5中首先引入的，是一種支持異步請(qǐng)求的技術(shù)楼眷。簡(jiǎn)單的說(shuō)铲汪，也就是javascript可以及時(shí)向服務(wù)器提出請(qǐng)求和處理響應(yīng)，而不阻塞用戶摩桶。達(dá)到無(wú)刷新的效果桥状。
-
jsonp是如何實(shí)現(xiàn)前后數(shù)據(jù)交互？
答：
ajax請(qǐng)求受同源策略的影響硝清，不允許進(jìn)行跨域請(qǐng)求辅斟，而script標(biāo)簽的src屬性中的鏈接卻可以訪問(wèn)跨域的js腳本，利用這個(gè)特性芦拿，服務(wù)端不在返回json格式的數(shù)據(jù)士飒，而是返回調(diào)用某個(gè)函數(shù)的js代碼查邢，在src中進(jìn)行了調(diào)用，這樣就實(shí)現(xiàn)了跨域酵幕，其原理就是動(dòng)態(tài)創(chuàng)建script標(biāo)簽扰藕，通過(guò)script標(biāo)簽的src屬性進(jìn)行調(diào)用
-
你知道的HTTP 請(qǐng)求方式有幾種？
答：
HTTPRequestMethod共計(jì)17種
- GET 請(qǐng)求指定的頁(yè)面信息芳撒，并返回實(shí)體主體邓深。
- HEAD 類似于get請(qǐng)求，只不過(guò)返回的響應(yīng)中沒有具體的內(nèi)容笔刹，用于獲取報(bào)頭
- POST 向指定資源提交數(shù)據(jù)進(jìn)行處理請(qǐng)求（例如提交表單或者上傳文件）芥备。數(shù)據(jù)被包含在請(qǐng)求體中。POST請(qǐng)求可能會(huì)導(dǎo)致新的資源的建立和/或已有資源的修改舌菜。
- PUT 從客戶端向服務(wù)器傳送的數(shù)據(jù)取代指定的文檔的內(nèi)容萌壳。
- DELETE 請(qǐng)求服務(wù)器刪除指定的頁(yè)面。
- CONNECT HTTP/1.1協(xié)議中預(yù)留給能夠?qū)⑦B接改為管道方式的代理服務(wù)器日月。
- OPTIONS 允許客戶端查看服務(wù)器的性能袱瓮。
- TRACE 回顯服務(wù)器收到的請(qǐng)求，主要用于測(cè)試或診斷爱咬。
- PATCH 實(shí)體中包含一個(gè)表尺借，表中說(shuō)明與該URI所表示的原內(nèi)容的區(qū)別。
- MOVE 請(qǐng)求服務(wù)器將指定的頁(yè)面移至另一個(gè)網(wǎng)絡(luò)地址台颠。
- COPY 請(qǐng)求服務(wù)器將指定的頁(yè)面拷貝至另一個(gè)網(wǎng)絡(luò)地址褐望。
- LINK 請(qǐng)求服務(wù)器建立鏈接關(guān)系。
- UNLINK 斷開鏈接關(guān)系串前。
- WRAPPED 允許客戶端發(fā)送經(jīng)過(guò)封裝的請(qǐng)求。
- LOCK 允許用戶鎖定資源实蔽，比如可以再編輯某個(gè)資源時(shí)將其鎖定荡碾，以防別人同時(shí)對(duì)其進(jìn)行編輯。
- MKCOL 允許用戶創(chuàng)建資源
- Extension-mothed 在不改動(dòng)協(xié)議的前提下局装，可增加另外的方法坛吁。
?
八、H5C3模塊
基礎(chǔ)部分
-
CSS3有哪些新特性铐尚？
答：
- CSS3實(shí)現(xiàn)圓角（border-radius）拨脉，陰影（box-shadow），
- 對(duì)文字加特效（text-shadow宣增、）玫膀，線性漸變（gradient），旋轉(zhuǎn)（transform）
- transform:rotate(9deg)scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉(zhuǎn),縮 放,定位,傾斜
- 增加了更多的CSS選擇器 多背景rgba
- 在CSS3中唯一引入的偽元素是 ::selection.
- 媒體查詢爹脾，多欄布局
- border-image
-
Html5有哪些新特性帖旨、移除了那些元素箕昭？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分 HTML和HTML5解阅？
答：
新特性：
- 拖拽釋放(Drag and drop) API
- 語(yǔ)義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
- 音頻落竹、視頻API(audio,video)
- 畫布(Canvas) API
- 地理(Geolocation) API
- 本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失货抄；
- sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
- 表單控件述召，calendar、date蟹地、time积暖、email、url锈津、search
- 新的技術(shù)webworker, websocket,Geolocation
移除的元素：
- 純表現(xiàn)的元素：basefont呀酸，big，center琼梆，font, s性誉，strike，tt茎杂，u错览；
- 對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset煌往，noframes倾哺；
支持HTML5新標(biāo)簽：
-
IE8/IE7/IE6支持通過(guò) document.createElement 方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持 HTML5 新標(biāo)簽刽脖，瀏覽器支持新標(biāo)簽后羞海，還需要添加標(biāo)簽?zāi)J(rèn)的樣式（當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：
-
本地存儲(chǔ)（Local Storage）和cookies（儲(chǔ)存在用戶本地終端上的數(shù)據(jù)）之間的區(qū)別是什么曲管？
答：
Cookies:服務(wù)器和客戶端都可以訪問(wèn)却邓；大小只有4KB左右；有有效期院水，過(guò)期后將會(huì)刪除腊徙；
本地存儲(chǔ)：只有本地瀏覽器端可訪問(wèn)數(shù)據(jù)，服務(wù)器不能訪問(wèn)本地存儲(chǔ)直到故意通過(guò)POST或者GET的通道發(fā)送到服務(wù)器檬某；每個(gè)域5MB撬腾；沒有過(guò)期數(shù)據(jù)，它將保留知道用戶從瀏覽器清除或者使用Javascript代碼移除
-
如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?
答：
調(diào)用 localstorge恢恼、cookies 等本地存儲(chǔ)方式
-
你如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化民傻？
答：
文件合并
文件最小化/文件壓縮
使用CDN托管
緩存的使用
-
什么是響應(yīng)式設(shè)計(jì)？
答：
它是關(guān)于網(wǎng)頁(yè)制作的過(guò)程中讓不同的設(shè)備有不同的尺寸和不同的功能。響應(yīng)式設(shè)計(jì)是讓所有的人能在這些設(shè)備上讓網(wǎng)站運(yùn)行正常
-
新的 HTML5文檔類型和字符集是
答：
HTML5文檔類型：<!doctype html>
HTML5使用的編碼<meta charset=”UTF-8”>
-
HTML5 Canvas元素有什么用饰潜？
答：
Canvas 元素用于在網(wǎng)頁(yè)上繪制圖形初坠，該元素標(biāo)簽強(qiáng)大之處在于可以直接在HTML 上進(jìn)行圖形操作。
-
HTML5 存儲(chǔ)類型有什么區(qū)別彭雾？
答：
Media API碟刺、Text Track API、Application Cache API薯酝、User Interaction半沽、Data Transfer API、Command API吴菠、Constraint Validation API者填、History API
CSS3新增偽類有那些？
答：
? p:first-of-type 選擇屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素做葵。
? p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個(gè) <p> 元素占哟。
? p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個(gè) <p> 元素。
? p:only-child 選擇屬于其父元素的唯一子元素的每個(gè) <p> 元素酿矢。
? p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè) <p> 元素榨乎。
? :enabled、:disabled 控制表單控件的禁用狀態(tài)瘫筐。
? :checked蜜暑，單選框或復(fù)選框被選中。
-
你怎么來(lái)實(shí)現(xiàn)頁(yè)面設(shè)計(jì)圖策肝，你認(rèn)為前端應(yīng)該如何高質(zhì)量完成工作?一個(gè)滿屏品 字布局 如何設(shè)計(jì)?
答：
首先劃分成頭部肛捍、body、腳部之众；拙毫。。棺禾。恬偷。。
實(shí)現(xiàn)效果圖是最基本的工作帘睦，精確到2px；
與設(shè)計(jì)師坦康，產(chǎn)品經(jīng)理的溝通和項(xiàng)目的參與
做好的頁(yè)面結(jié)構(gòu)竣付，頁(yè)面重構(gòu)和用戶體驗(yàn)
處理hack，兼容滞欠、寫出優(yōu)美的代碼格式
針對(duì)服務(wù)器的優(yōu)化古胆、擁抱 HTML5。
-
為什么利用多個(gè)域名來(lái)存儲(chǔ)網(wǎng)站資源會(huì)更有效？
答：
CDN緩存更方便
突破瀏覽器并發(fā)限制
節(jié)約cookie帶寬
節(jié)約主域名的連接數(shù)逸绎，優(yōu)化頁(yè)面響應(yīng)速度
防止不必要的安全問(wèn)題
-
請(qǐng)談一下你對(duì)網(wǎng)頁(yè)標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解惹恃。
答：
（無(wú)標(biāo)準(zhǔn)答案）網(wǎng)頁(yè)標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)都是為了能讓web發(fā)展的更‘健康’，開發(fā)者遵循統(tǒng)一的標(biāo)準(zhǔn)棺牧，降低開發(fā)難度巫糙，開發(fā)成本，SEO也會(huì)更好做颊乘，也不會(huì)因?yàn)闉E用代碼導(dǎo)致各種BUG参淹、安全問(wèn)題，最終提高網(wǎng)站易用性乏悄。
?
實(shí)際工作部分
-
請(qǐng)描述一下cookies]()浙值，sessionStorage和localStorage的區(qū)別？
答：
sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)檩小，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀开呐。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)规求。而localStorage用于持久化的本地存儲(chǔ)筐付，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的颓哮。
Web Storage的概念和cookie相似家妆，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的。Cookie的大小是受限的冕茅，并且每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候Cookie都會(huì)被發(fā)送過(guò)去伤极，這樣無(wú)形中浪費(fèi)了帶寬，另外cookie還需要指定作用域姨伤，不可以跨域調(diào)用哨坪。
除此之外浊洞，Web Storage擁有setItem,getItem,removeItem,clear等方法琴锭，不像cookie需要前端開發(fā)者自己封裝setCookie筐眷，getCookie劲腿。但是Cookie也是不可以或缺的：Cookie的作用是與服務(wù)器進(jìn)行交互亚皂，作為HTTP規(guī)范的一部分而存在 就珠，而Web Storage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生蛉威。
-
如何在 HTML5頁(yè)面中嵌入視頻仿荆？
答：
HTML5 定義了嵌入視頻的標(biāo)準(zhǔn)方法臊泌，支持的格式包括：MP4鲤桥、WebM 和 Ogg;
<video><source src="jamshed.mp4" type="video/mp4">Your browser does'nt support video embedding feature.</video> -
HTML5引入什么新的表單屬性？
答：
Datalist datetime output keygen date month week time number range emailurl
?
九渠概、Node模塊
基礎(chǔ)部分
-
對(duì)Node的優(yōu)點(diǎn)和缺點(diǎn)提出了自己的看法
答：
（優(yōu)點(diǎn)）因?yàn)镹ode是基于事件驅(qū)動(dòng)和無(wú)阻塞的茶凳，所以非常適合處理并發(fā)請(qǐng)求嫂拴，
因此構(gòu)建在Node上的代理服務(wù)器相比其他技術(shù)實(shí)現(xiàn)（如Ruby）的服務(wù)器表現(xiàn)要好得多。
此外贮喧，與Node代理服務(wù)器交互的客戶端代碼是由javascript語(yǔ)言編寫的筒狠，
因此客戶端和服務(wù)器端都用同一種語(yǔ)言編寫，這是非常美妙的事情箱沦。
（缺點(diǎn)）Node是一個(gè)相對(duì)新的開源項(xiàng)目辩恼，所以不太穩(wěn)定，它總是一直在變饱普，
而且缺少足夠多的第三方庫(kù)支持运挫。看起來(lái)套耕，就像是Ruby/Rails當(dāng)年的樣子
-
node.js 的應(yīng)用場(chǎng)景
答：
- 實(shí)時(shí)應(yīng)用：如在線聊天谁帕，實(shí)時(shí)通知推送等等（如socket.io）
- 分布式應(yīng)用：通過(guò)高效的并行I/O使用已有的數(shù)據(jù)
- 工具類應(yīng)用：海量的工具，小到前端壓縮部署（如grunt）冯袍，大到桌面圖形界面應(yīng)用程序
- 游戲類應(yīng)用：游戲領(lǐng)域?qū)?shí)時(shí)和并發(fā)有很高的要求（如網(wǎng)易的pomelo框架）
- 利用穩(wěn)定接口提升Web渲染能力
- 前后端編程語(yǔ)言環(huán)境統(tǒng)一：前端開發(fā)人員可以非承偻冢快速地切入到服務(wù)器端的開發(fā)（如著名的純Javascript全棧式MEAN架構(gòu)）
-
NodeJS非阻塞I/O模型執(zhí)行流程
答：
主線程：
執(zhí)行 node 的代碼，把代碼放入隊(duì)列
事件循環(huán)程序（主線程）把隊(duì)列里面的同步代碼都先執(zhí)行了康愤，
同步代碼執(zhí)行完成儡循，執(zhí)行異步代碼
-
異步代碼分 2種狀況，
(1)征冷、異步非 io setTimeout() setInterval()
判斷是否可執(zhí)行择膝，如果可以執(zhí)行就執(zhí)行，不可以跳過(guò)检激。
(2)肴捉、異步io 文件操作
會(huì)從線程池當(dāng)中去取一條線程，幫助主線程去執(zhí)行叔收。
主線程會(huì)一直輪訓(xùn)齿穗，隊(duì)列中沒有代碼了，主線程就會(huì)退出饺律。
子線程：被放在線程池里面的線程窃页，用來(lái)執(zhí)行異步 io操作
在線程池里休息
異步 io 的操作來(lái)了，執(zhí)行異步 io操作复濒。
子線程會(huì)把異步 io操作的 callback 函數(shù)脖卖，扔回給隊(duì)列
-
子線程會(huì)回到線程池了去休息。
callback巧颈，在異步 io 代碼執(zhí)行完成的時(shí)候被扔回主線程胚嘲。
-
nodejs中流(stream)的理解
答：
- 什么是Stream?
答案:stream是基于事件EventEmitter的數(shù)據(jù)管理模式．由各種不同的抽象接口組成，
主要包括可寫洛二，可讀，可讀寫，可轉(zhuǎn)換等幾種類型． - Stream有什么好處?
答案: 非阻塞式數(shù)據(jù)處理提升效率晾嘶，片斷處理節(jié)省內(nèi)存妓雾，管道處理方便可擴(kuò)展等. - Stream有哪些典型應(yīng)用?
答案: 文件，網(wǎng)絡(luò)垒迂，數(shù)據(jù)轉(zhuǎn)換械姻，音頻視頻等.- 怎么捕獲 Stream的錯(cuò)誤事件?
答案: 監(jiān)聽 error 事件，方法同 EventEmitter. - 有哪些常用Stream,分別什么時(shí)候使用?
答案:Readable 為可被讀流机断，在作為輸入數(shù)據(jù)源時(shí)使用楷拳；Writable 為可被寫流,在作為
輸出源時(shí)使用；Duplex 為可讀寫流,它作為輸出源接受被寫入吏奸，同時(shí)又作為輸入源被后面的
流讀出．Transform 機(jī)制和Duplex一樣欢揖，都是雙向流，區(qū)別時(shí) Transfrom 只需要實(shí)現(xiàn)一
個(gè)函數(shù)_transfrom(chunk, encoding, callback);而 Duplex 需要分別實(shí)現(xiàn)_read(size)函數(shù)
和_write(chunk, encoding, callback)函數(shù). - 實(shí)現(xiàn)一個(gè) Writable Stream?
答案: 三步走:1)構(gòu)造函數(shù)call Writable 2) 繼承 Writable 3) 實(shí)現(xiàn)_write(chunk,
encoding, callback)函數(shù)
- 怎么捕獲 Stream的錯(cuò)誤事件?
- 什么是Stream?
-
ES6有哪些新特性?
答：
類的支持奋蔚，模塊化她混，箭頭操作符，let/const塊作用域泊碑，字符串模板坤按，解構(gòu)，參數(shù)默認(rèn)值/不定參數(shù)/拓展參數(shù), for-of遍歷, generator, Map/Set, Promise
-
你對(duì)ES6的個(gè)人看法
答：
從軟件工程角度來(lái)看馒过，以前真的很弱臭脓，不適合做大型應(yīng)用，很容易導(dǎo)致爛尾工程腹忽。ES6就相當(dāng)于當(dāng)年的Java5,是歷史性的發(fā)展来累，從此我們可以用js做大型項(xiàng)目了。事實(shí)上留凭，各大主流瀏覽器現(xiàn)在已經(jīng)支持大部分新特性了佃扼，后端的Node.js更是可以直接使用ES6的絕大多數(shù)語(yǔ)法。
-
node中的Buffer如何應(yīng)用?
答：
Buffer是用來(lái)處理二進(jìn)制數(shù)據(jù)的蔼夜，比如圖片兼耀，mp3,數(shù)據(jù)庫(kù)文件等.Buffer支持各種編碼解碼，二進(jìn)制字符串互轉(zhuǎn)．
-
什么是“前端路由”?什么時(shí)候適合使用“前端路由”? “前端路由”有哪些優(yōu)點(diǎn)和缺點(diǎn)?
答：
-
什么是前端路由
路由是根據(jù)不同的url地址展示不同的內(nèi)容或頁(yè)面求冷。前端路由就是把不同路由對(duì)應(yīng)不同的內(nèi)容或頁(yè)面的任務(wù)交給前端來(lái)做瘤运，之前通過(guò)服務(wù)端根據(jù)url的不同返回不同的頁(yè)面實(shí)現(xiàn)的
-
什么時(shí)候使用前端路由
在單頁(yè)面應(yīng)用，大部分頁(yè)面結(jié)構(gòu)不變匠题，只改變部分內(nèi)容的使用
-
前端路由有什么優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：
? 用戶體驗(yàn)好拯坟，不需要每次都從服務(wù)器全部獲取，快速展現(xiàn)給用戶
缺點(diǎn)：
? 使用瀏覽器的前進(jìn)韭山，后退鍵的時(shí)候會(huì)重新發(fā)送請(qǐng)求郁季，沒有合理利用緩存
? 單頁(yè)面無(wú)法記住之前滾動(dòng)的位置冷溃，無(wú)法再前進(jìn)，后退的時(shí)候記住滾動(dòng)的
-
-
如何判斷當(dāng)前腳本運(yùn)行在瀏覽器還是node環(huán)境中梦裂？
答：
exports = typeof window === 'undefined' ? global : window ;
獲取全局對(duì)象的方式
同理可得似枕，typeof window可以用來(lái)判斷是不是在瀏覽器環(huán)境中
實(shí)際工作部分
-
node中的異步和同步怎么理解?
答：
node是單線程的，異步是通過(guò)一次次的循環(huán)事件隊(duì)列來(lái)實(shí)現(xiàn)的．同步則是說(shuō)阻塞式的IO,這在高并發(fā)環(huán)境會(huì)是一個(gè)很大的性能問(wèn)題年柠，所以同步一般只在基礎(chǔ)框架的啟動(dòng)時(shí)使用凿歼，用來(lái)加載配置文件，初始化程序什么的．
-
有哪些方法可以進(jìn)行異步流程的控制?
答：
- 多層嵌套回調(diào)
- 為每一個(gè)回調(diào)寫單獨(dú)的函數(shù)冗恨，函數(shù)里邊再回調(diào)
- 用第三方框架比方async, q, promise等
-
npm有哪些常用的命令答憔，請(qǐng)列舉并說(shuō)明作用
答：
$npm init項(xiàng)目初始化$npminstall -g <name>安裝并更新package.json中的版本配置$npm run<name>執(zhí)行一段腳本$npm update -n <name>更新模塊 ?
十、VUE模塊
基礎(chǔ)部分
-
Vue組件間傳值
答：
-
父子之間的傳值
父組件向子組件傳值通過(guò)prop子組件在props中創(chuàng)建一個(gè)屬性掀抹，用以接收父組件傳過(guò)來(lái)的值
子組件向父組件傳值在響應(yīng)該點(diǎn)擊事件的函數(shù)中使用$emit來(lái)觸發(fā)一個(gè)自定義事件在父組件中注冊(cè)子組件并在子組件標(biāo)簽上綁定對(duì)自定義事件的監(jiān)聽
-
非父子之間的通訊
可以通過(guò)eventBus來(lái)實(shí)現(xiàn)通信.
所謂eventBus就是創(chuàng)建一個(gè)事件中心虐拓，相當(dāng)于中轉(zhuǎn)站，可以用它來(lái)傳遞事件和接收事件
eventBus = new Vue();
組件1觸發(fā)：
<div @click="eve"></div> methods: { eve() { eventBus.$emit('change','hehe'); //Hub觸發(fā)事件 } }123456組件2接收:
<div></div> created() { eventBus.$on('change', () => { //Hub接收事件 this.msg = 'hehe'; }); }123456這樣就實(shí)現(xiàn)了非父子組件之間的通信了.原理就是把eventBus當(dāng)作一個(gè)中轉(zhuǎn)站渴丸！
-
-
VUE是什么?
答：
vue.js（讀音 /vju?/侯嘀，類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架
與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)谱轨。Vue 的核心庫(kù)只關(guān)注視
圖層戒幔，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合土童。另一方面诗茎，當(dāng)與單文件組件
和 Vue 生態(tài)系統(tǒng)支持的庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用程序提供驅(qū)動(dòng)献汗。 -
React 和 Vue 的區(qū)別React 和 Vue 的相似之處：
答：
- 使用 Virtual DOM
- 提供了響應(yīng)式（Reactive）和組件化（Composable）的視圖組件敢订。
- 將注意力集中保持在核心庫(kù)，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫(kù)罢吃。
Vue與Angular楚午、React的對(duì)比：
- vue.js 更輕量，gzip后只有20K+尿招，angular:56K ,react:44K
- vue.js 更易上手矾柜，學(xué)習(xí)曲線平穩(wěn)
- 吸收兩家之長(zhǎng)，有angular 的指令和 react組件化思想
優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：體積小就谜。接口靈活怪蔑。侵入性好，可用于頁(yè)面的一部分丧荐，而不是整個(gè)頁(yè)面缆瓣。擴(kuò)展性好。源碼規(guī)范簡(jiǎn)潔虹统。代碼較為活躍弓坞，作者是中國(guó)人隧甚，可在官方論壇中文提問(wèn)。github9000+昼丑∩肽妫基于組件化的開發(fā)。它是一個(gè)輕量級(jí) mvvm框架菩帝、數(shù)據(jù)驅(qū)動(dòng)+組件化的前端開發(fā)、社區(qū)完善
缺點(diǎn)：社區(qū)不大茬腿，如果有問(wèn)題可以讀源碼呼奢。功能僅限于view 層，Ajax等功能需要額外的庫(kù)切平。對(duì)開發(fā)人員要求較高握础。開發(fā)的話，需要 webpack悴品，不然很難用禀综，最好配合es6。
-
v-show 和 v-if的選擇
答：
v-if 也是惰性的：如果在初始渲染時(shí)條件為假苔严，則什么也不做——在條件第一次變?yōu)檎鏁r(shí)才開始局部編譯（編譯會(huì)被緩存起來(lái)）定枷。
相比之下，v-show 簡(jiǎn)單得多——元素始終被編譯并保留届氢，只是簡(jiǎn)單地基于 CSS 切換欠窒。
-
Vue.js核心思想
答：
Vue.js是一個(gè)提供MVVM數(shù)據(jù)雙向綁定的庫(kù)，專注于UI層面退子，核心思想是：數(shù)據(jù)驅(qū)動(dòng)岖妄、組件系統(tǒng)。
數(shù)據(jù)驅(qū)動(dòng)：
Vue.js數(shù)據(jù)觀測(cè)原理在技術(shù)實(shí)現(xiàn)上寂祥，利用的是ES5Object.defineProperty和存儲(chǔ)器屬性: getter和setter（所以只兼容IE9及以上版本）荐虐，可稱為基于依賴收集的觀測(cè)機(jī)制。核心是VM丸凭，即ViewModel福扬，保證數(shù)據(jù)和視圖的一致性。
組件式編程
-
template參數(shù)選項(xiàng)的有無(wú)對(duì)生命周期的影響
答：
- 如果Vue實(shí)例對(duì)象中有template參數(shù)選項(xiàng)贮乳，則將其作為模板編譯成render函數(shù)
- 如果沒有template參數(shù)選項(xiàng)忧换，則將外部的HTML作為模板編譯（template），也就是說(shuō)向拆，template參數(shù)選項(xiàng)的優(yōu)先級(jí)要比外部的HTML高
- 如果1,2條件都不具備亚茬，則報(bào)錯(cuò)
實(shí)際工作部分
-
怎么定義vue-router的動(dòng)態(tài)路由？怎么獲取傳過(guò)來(lái)的動(dòng)態(tài)參數(shù)浓恳？
答：
對(duì)path屬性加上/:id刹缝。 使用router對(duì)象的params.id
-
vue-router有哪幾種導(dǎo)航鉤子
答：
-
vue-router 提供的導(dǎo)航鉤子主要用來(lái)攔截導(dǎo)航碗暗，讓它完成跳轉(zhuǎn)或取消
三種：
第一種是全局導(dǎo)航鉤子：router.beforeEach(to,from,next)，作用：跳轉(zhuǎn)前進(jìn)行判斷攔截梢夯。
第二種：組件內(nèi)的鉤子言疗；
第三種：?jiǎn)为?dú)路由獨(dú)享組件
-
-
說(shuō)出至少4種vue當(dāng)中的指令和它的用法？
答：
v-if：判斷是否隱藏颂砸；
v-for：數(shù)據(jù)循環(huán)出來(lái)噪奄；
v-bind:class：綁定一個(gè)屬性；
v-model：實(shí)現(xiàn)雙向綁定
-
8人乓、簡(jiǎn)述一些vue項(xiàng)目中文件構(gòu)成勤篮？
答：
build文件夾：主要就是webpack的配置；
Config文件夾：主要的就是index.js 這個(gè)文件進(jìn)行配置代理服務(wù)器
Src文件夾：
“assets”共用的樣式和圖片
“components”業(yè)務(wù)代碼存放
“router”路由
“APP.vue”vue 文件入口界面
“main.js”對(duì)應(yīng)App.vue創(chuàng)建的實(shí)例色罚，也是入口文件碰缔，對(duì)應(yīng) webpack.base.config.js里的入口配置
Static文件夾：靜態(tài)資源
Pack.json:scripts 里面設(shè)置命令，例如設(shè)置了dev用于調(diào)試則我們開發(fā)時(shí)輸入的是npm run dev 戳护；例如設(shè)置了build 則是輸入 npm run build 用于打包;另一部分是這里可以看到我們需要的依賴包,在dependencies和devDependencies中金抡，分別對(duì)應(yīng)全局下載和局部下載的依賴包
十一、Angular和React模塊
基礎(chǔ)部分
-
angularJS是什么?
答：
AngularJS 是一個(gè) JavaScript 框架腌且。它可通過(guò) <script> 標(biāo)簽添加到 HTML 頁(yè)面梗肝。
AngularJS 通過(guò) 指令 擴(kuò)展了 HTML，且通過(guò) 表達(dá)式 綁定數(shù)據(jù)到 HTML
-
angularJS中的MVVM模式
答：
采用這種方式為合理組織代碼提供了方便切蟋，降低了代碼間的耦合度统捶，功能結(jié)構(gòu)清晰可見。
Model：一般用來(lái)處理數(shù)據(jù)柄粹，包括讀取和設(shè)置數(shù)據(jù)喘鸟，一般指的是操作數(shù)據(jù)庫(kù)。
View：一般用來(lái)展示數(shù)據(jù)驻右，就是放數(shù)據(jù)什黑，比如通過(guò) HTML來(lái)展示。
Controller：因?yàn)橐粋€(gè)模塊里面可能有多個(gè)視圖和模型堪夭，控制器就起到了連接模型和視圖的
作用愕把。
VM--> ViewModel（視圖模型） 也就是$scope。
MVC 模式在AngularJS 中的體現(xiàn)：
一森爽、首先定義應(yīng)用恨豁，采用ng-app屬性指定一個(gè)應(yīng)用，表示此標(biāo)簽內(nèi)所包裹的內(nèi)容都屬于
APP的一部分爬迟。
<html ng-app="App" lang="en"> -
模塊化與依賴注入
答：
AngularJS 模塊：
AngularJS模塊是一種容器橘蜜，把代碼隔離并組織成簡(jiǎn)潔，整齊，可復(fù)用的塊计福。
模塊本身不提供直接的功能：包含其他提供功能的對(duì)象的實(shí)例：控制器跌捆，過(guò)濾器，服務(wù)象颖，動(dòng)
畫佩厚。可通過(guò)定義其提供的對(duì)象構(gòu)建模塊说订。通過(guò)依賴注入將模塊連接在一起抄瓦，構(gòu)建一個(gè)完整的
應(yīng)用程序。
AngularJS建立在模塊原理上陶冷。大部分 AngularJS 提供的功能都內(nèi)置到ng-*模塊中闺鲸。創(chuàng)建模塊：
你可以通過(guò) AngularJS 的 angular.module 函數(shù)來(lái)創(chuàng)建模塊：
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);</script>
依賴注入：（Dependency Injection，簡(jiǎn)稱 DI）是一種軟件設(shè)計(jì)模式埃叭，在這種模式下，一
個(gè)或更多的依賴（或服務(wù)）被注入（或者通過(guò)引用傳遞）到一個(gè)獨(dú)立的對(duì)象（或客戶端）中悉罕，
然后成為了該客戶端狀態(tài)的一部分。
該模式分離了客戶端依賴本身行為的創(chuàng)建壁袄，這使得程序設(shè)計(jì)變得松耦合类早，并遵循了依賴反轉(zhuǎn)
和單一職責(zé)原則。與服務(wù)定位器模式形成直接對(duì)比的是嗜逻，它允許客戶端了解客戶端如何使用
該系統(tǒng)找到依賴
一句話 涩僻，沒事你不要來(lái)找我，有事我會(huì)去找你栈顷。
AngularJS 提供很好的依賴注入機(jī)制逆日。以下 5個(gè)核心組件用來(lái)作為依賴注入：value、
factory萄凤、service室抽、provider、constant -
ReactJS的適用場(chǎng)景
答：
一些后臺(tái)界面靡努，或者是和后臺(tái)數(shù)據(jù)比較多坪圾，又或者和用戶交互比較多，dom 操作頻繁的
都可以用 react惑朦。因?yàn)?react 的大特點(diǎn)就是虛擬DOM 技術(shù)兽泄，這樣可以提高渲染的性能。個(gè)
人的體驗(yàn)就是漾月，用 react可以讓整個(gè)頁(yè)面的速度提高很多病梢。
另外這樣做的話，和后臺(tái)的數(shù)據(jù)通過(guò)接口來(lái)進(jìn)行前后端分離栅屏，也挺好挺方便的 -
ReactJS是什么
答：
React 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫(kù)飘千。
React主要用于構(gòu)建 UI堂鲜，很多人認(rèn)為 React 是 MVC 中的 V（視圖）。
React 起源于 Facebook 的內(nèi)部項(xiàng)目护奈，用來(lái)架設(shè) Instagram 的網(wǎng)站缔莲，并于 2013 年 5 月
開源。
React 擁有較高的性能霉旗，代碼邏輯非常簡(jiǎn)單痴奏，越來(lái)越多的人已開始關(guān)注和使用它。 -
ReactJs 的特點(diǎn)
答：
- 聲明式設(shè)計(jì) ?React 采用聲明范式厌秒，可以輕松描述應(yīng)用读拆。
- 高效 ?React通過(guò)對(duì) DOM 的模擬，最大限度地減少與 DOM 的交互鸵闪。
- 靈活 ?React可以與已知的庫(kù)或框架很好地配合檐晕。
- JSX ? JSX 是 JavaScript 語(yǔ)法的擴(kuò)展。React 開發(fā)不一定使用 JSX 蚌讼，但我們建議使用它辟灰。
- 組件 ? 通過(guò) React 構(gòu)建組件，使得代碼更加容易得到復(fù)用篡石，能夠很好的應(yīng)用在大項(xiàng)目的開發(fā)中芥喇。
- 單向響應(yīng)的數(shù)據(jù)流 ? React 實(shí)現(xiàn)了單向響應(yīng)的數(shù)據(jù)流，從而減少了重復(fù)代碼凰萨，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡(jiǎn)單继控。
-
react Native比起標(biāo)準(zhǔn)Web開發(fā)或原生開發(fā)能夠帶來(lái)的三大好處
答：
- 手勢(shì)識(shí)別：基于Web 技術(shù)（HTML5/JavaScript）構(gòu)建的移動(dòng)應(yīng)用經(jīng)常被抱怨缺乏及時(shí)響應(yīng)。而基于原生 UI的React Native能避免這些問(wèn)題從而實(shí)現(xiàn)實(shí)時(shí)響應(yīng)胖眷。
- 原生組件：使用 HTML5/JavaScript 實(shí)現(xiàn)的組件比起原生組件總是讓人感覺差一截武通，而React Native 由于采用了原生UI組件自然沒有此問(wèn)題。
- 樣式和布局：iOS瘦材、Android 和基于Web 的應(yīng)用各自有不同的樣式和布局機(jī)制厅须。React Native 通過(guò)一個(gè)基于 FlexBox的布局引擎在所有移動(dòng)平臺(tái)上實(shí)現(xiàn)了一致的跨平臺(tái)樣式和布局方案。
?
實(shí)際工作部分
-
看過(guò)Angular的源碼嗎食棕，它是怎么實(shí)現(xiàn)雙向數(shù)據(jù)綁定的?
答：
angular對(duì)常用的dom事件朗和， xhr事件等做了封裝，在里面觸發(fā)進(jìn)入angular的digest 流程簿晓。 在digest 流程里面眶拉， 會(huì)從 rootscope 開始遍歷， 檢查所有的watcher
-
為什么angular不推薦使用dom操作憔儿？
答：
Angular 倡導(dǎo)以測(cè)試驅(qū)動(dòng)開發(fā)忆植，在的 service 或者 controller 中出現(xiàn)了DOM 操作，那 么也就意味著的測(cè)試是無(wú)法通過(guò)的 使用 Angular 的其中一個(gè)好處是啥，那就是雙向數(shù)據(jù)綁定朝刊，這樣就能專注于處理業(yè)務(wù)邏輯耀里， 無(wú)需關(guān)系一堆堆的 DOM 操作。如果在 Angular 的代碼中還到處充斥著各種 DOM 操作拾氓， 那為什么不直接使用jquery 去開發(fā)呢冯挎。
-
MVC模式的意思是，軟件可以分成三個(gè)部分咙鞍？
答：
視圖（View）：用戶界面房官。
控制器（Controller）：業(yè)務(wù)邏輯
模型（Model）：數(shù)據(jù)保存 -
各部分之間的通信方式是什么？
答：
View 傳送指令到 Controller
Controller 完成業(yè)務(wù)邏輯后续滋，要求 Model 改變狀態(tài)
Model 將新的數(shù)據(jù)發(fā)送到 View翰守，用戶得到反饋 ?
十二、其他
基礎(chǔ)部分
- ?
實(shí)際工作部分
-
webpack是怎樣配置的疲酌，簡(jiǎn)要描述一下過(guò)程
答：
第一在項(xiàng)目文件創(chuàng)建一個(gè)webpack.config.js文件蜡峰，配置文件創(chuàng)建好了，第二開始正式配置webpack了朗恳，首先下載好node.js事示，因?yàn)閣ebpack基于node.js,裝好node.js后，通過(guò)命令行窗口找到項(xiàng)目文件僻肖，在項(xiàng)目文件webpack.config.js文件所在的目錄下輸入 npm install webpack -save dev 下載webpack依賴文件到本地項(xiàng)目中，下載好后會(huì)在webpack.config.js文件下自動(dòng)創(chuàng)建node_modules文件夾卢鹦，文件夾里就是所有項(xiàng)目中用到的依賴插件臀脏，現(xiàn)在只有一個(gè)webpack，項(xiàng)目中用到在下載冀自！
-
git的作用是什么揉稚，有哪些命令，這些命令的作用是什么熬粗？在pull時(shí)搀玖，如果只想要文件的一部分而不是工程文件的整個(gè)，使用什么命令驻呐？git的沖突如何解決灌诅？
答：
git是一個(gè)開源的分布式版本控制系統(tǒng)，用以有效含末、高速處理很小到非常大的項(xiàng)目版本管理猜拾。
常用的命令：
git init 初始化倉(cāng)庫(kù)git config --globaluser.name 配置用戶名
git config --globaluser.email 配置郵箱
git add 文件添加到暫存區(qū)
git commit 文件添加到倉(cāng)庫(kù)
git branch 列出所有的分支
git status 顯示有變更的文件
git log 查看當(dāng)前分支的版本歷史
git push 提交本地代碼到遠(yuǎn)程
git pull 從遠(yuǎn)程倉(cāng)庫(kù)下載到本地
git checkout 創(chuàng)建切換分支
解決git分支沖突： 將本地dev刪除,在重新checkout一個(gè)dev分支(保證了此時(shí)我們的本地dev分支是最新的),在進(jìn)行pull服務(wù)器分支,就這樣解決了.
-
怎么防止內(nèi)存泄露？
答：
- 減少不必要的全局變量佣盒，或者生命周期較長(zhǎng)的對(duì)象挎袜，及時(shí)對(duì)無(wú)用的數(shù)據(jù)進(jìn)行垃圾回收
- 注意程序邏輯，避免“死循環(huán)”之類的
- 避免創(chuàng)建過(guò)多的對(duì)象 。
-
網(wǎng)站優(yōu)化時(shí)怎么做數(shù)據(jù)分析盯仪？
答：
網(wǎng)站優(yōu)化時(shí)紊搪，我們需要每天在百度統(tǒng)計(jì)中查看我們網(wǎng)站的每日流量，還有在各大站長(zhǎng)平臺(tái)中查看網(wǎng)站的收錄量全景，網(wǎng)站關(guān)鍵詞流量耀石，還有就是每天要用站長(zhǎng)工具查看網(wǎng)站的基本情況。這些數(shù)據(jù)都是最基礎(chǔ)的蚪燕。
