JS
1.call()? 和 apply():
作用:擴(kuò)充函數(shù)賴以運(yùn)行的作用域;
這兩個(gè)函數(shù)都是在特定的作用域中調(diào)用函數(shù),實(shí)際上等于設(shè)置函數(shù)體內(nèi)this對(duì)象的值;
apply()接收兩個(gè)參數(shù):一個(gè)是在其中運(yùn)行函數(shù)的作用域,另一個(gè)是參數(shù)數(shù)組,第二個(gè)參數(shù)可以是Array實(shí)例,也可以是arguments對(duì)象;
function sum(num1,num2){
???????????? return num1 + num2;
}
function callSum1(num1,num2){
?????????? return sum.apply(this,arguments);? //傳入arguments對(duì)象
}
function callSum2(num1,num2){
???????? return sum.apply(this,[num1,num2]);?? //傳入數(shù)組
}
call()和apply()方法的作用相同,接收參數(shù)的方式不同,傳遞給函數(shù)的參數(shù)必須逐個(gè)列舉出來;
function sum(num1,num2){
???????? return num1 + num2;
}
function callsum(num1,num2){
??????? return sum.call(this,num1,num2);? //注意所有參數(shù)都是直接傳遞給函數(shù)
}
擴(kuò)充函數(shù)運(yùn)行的作用域:
window.color = "red";
var o = {color: "blue"}
function sayColor(){
???????? alert(this.color);
}
sayColor(); //red
sayColor.call(this); //red
sayColor.call(window); //red
sayColor.call(o); //blue
上述的例子中先將sayColor()放在了對(duì)象o中,然后通過o來調(diào)用sayColor()函數(shù);
其他的擴(kuò)展作用域的方法:
ES5中bind()方法,創(chuàng)建一個(gè)函數(shù)的實(shí)例,this值會(huì)被綁定到傳給bind()函數(shù)的值;
window.color = "red";
var o = {color: "blue"}
function sayColor(){
?????????? alert(this.color);
}
var objectSayColor = sayColor.bind(o);?? //sayColor()里的this表示對(duì)象o,
objectColor(); //blue
sayColor()函數(shù)調(diào)用bind()并傳入對(duì)象o,創(chuàng)建objectSayColor()函數(shù),此時(shí)this代表對(duì)象o,即使是在全局變量下,函數(shù)
2.$(document).ready的原理:不是使用輪詢法,使用window.onload
DOMContentLoaded,直接綁定在Document下,頁面文檔完全加載并解析完畢之后,會(huì)觸發(fā)DOMContentLoaded事件，HTML文檔不會(huì)等待樣式文件,圖片文件,子框架頁面的加載(load事件可以用來檢測HTML頁面是否完全加載完畢(fully-loaded))。
但是IE下不支持這個(gè)屬性,使用輪詢法;
兼容不支持該事件的瀏覽器
在IE8中,可以使用readystatechange事件來檢測DOM文檔是否加載完畢.在更早的IE版本中,可以通過每隔一段時(shí)間執(zhí)行一次document.documentElement.doScroll("left")來檢測這一狀態(tài)，因?yàn)檫@條代碼在DOM加載完畢之前執(zhí)行時(shí)會(huì)拋出錯(cuò)誤(throw an error)虐骑。
3.事件委托,事件冒泡,事件捕獲:
(1)事件委托:針對(duì)"事件處理程序過多"的問題的解決方案
??????????????????? 利用事件冒泡,只指定一個(gè)事件處理程序,可以管理某一類型的所有事件;
百度一面
1.<!Doctype html>
???? 告訴瀏覽器文檔渲染的類型;
2.[? ]==false;? //true?????? [? ] === false;? //true?? ({}) == false; //false
??? 0==[]; //ture??? 0 == "? "; //true
NaN == NaN; //false
undefined == null;? // true
undefined === null;? //false
3.IE下如何觸發(fā)標(biāo)準(zhǔn)盒子模型;
IE在怪異模式下顯示為IE盒子模型,標(biāo)準(zhǔn)模式下為W3C標(biāo)準(zhǔn)盒子模型;
其他瀏覽器都是標(biāo)準(zhǔn)盒子模型
例如，如下會(huì)觸發(fā)quirks模式：
文件類型描述缺失或不完整時(shí)网棍；
遇到一個(gè)HTML 3或者更早的文檔時(shí)椅棺；
使用HTML 4.0 Transitional或Frameset的文件類型描述且系統(tǒng)標(biāo)識(shí)符（URI）不存在時(shí)比原；
在DOCTYPE聲明之前出現(xiàn)SGML注釋或者其它無法識(shí)別的內(nèi)容時(shí)仲义；
文檔任何地方有錯(cuò)誤時(shí)婶熬；
注釋符相遇時(shí)出現(xiàn)末尾文字重復(fù)；
Internet Explorer 6也會(huì)在DOCTYPE聲明之前出現(xiàn)XML聲明時(shí)使用quirks模式埃撵。
各種解決方法已被制定以迫使Internet Explorer 5以及更早版本使用W3C盒模型顯示網(wǎng)頁赵颅。這些解決方法一般是利用Internet Explorer的CSS選擇器作用的無關(guān)的缺陷以從瀏覽器中隱藏某些規(guī)則。這些解決方法中暂刘，最為熟知的是由Tantek ?elik饺谬，一個(gè)工作于IE for Mac時(shí)發(fā)現(xiàn)這個(gè)主意的前微軟員工，開發(fā)的“盒模型hack”鸳惯。它涉及到為IE for Windows指定一個(gè)寬度聲明商蕴，隨后使用另一個(gè)為CSS-兼容的瀏覽器指定的寬度重寫它叠萍。第二條聲明通過利用IE for Windows解析CSS規(guī)則的其它缺陷而從該瀏覽器中隱藏芝发。
3.vertical-align設(shè)置元素的垂直對(duì)齊方式;
baseline 默認(rèn)。元素放置在父元素的基線上苛谷。
sub 垂直對(duì)齊文本的下標(biāo)辅鲸。
super 垂直對(duì)齊文本的上標(biāo)
top 把元素的頂端與行中最高元素的頂端對(duì)齊
text-top 把元素的頂端與父元素字體的頂端對(duì)齊
middle 把此元素放置在父元素的中部。
bottom 把元素的頂端與行中最低的元素的頂端對(duì)齊腹殿。
text-bottom 把元素的底端與父元素字體的底端對(duì)齊独悴。
length
4.實(shí)現(xiàn)水平垂直居中:
html:
<div class="one"></div>
css:
.one{
????? display: flex;
????? align-item: center;
????? content-justfiy: center;
}
常規(guī)的做法:
<div? class="main">
???????? <div? class="div">123</div>
</div>
.main{
?????? display: table;
}
.div{
???? display:table-cell;
???? vertical-align: middle;
???? text-align:center;
}
BFC布局:
5.svg和canvas的區(qū)別;
6.輸入一串英文句子,把每個(gè)單詞的首字母大寫并輸出;
正則匹配:
function replaceFirstUpper(str){
str.toLowerCase();
????????? str.replace(/\b(\w)|\s(\w)/g,function(m){
?????????????? return m.toUpperCase();
???????? });
}
攜程電面:
1.null 和 undefined 的區(qū)別;
2.NaN;
3.怎樣找出一個(gè)父元素是否包含子元素
nodeName和tagName;
4.jQuery中如何選擇類選擇器和ID選擇器
5.將多維數(shù)組轉(zhuǎn)化成一個(gè)一維數(shù)組;
var mult_arr = [1,23,[1,3],[1,3[1[2,4]]]];
function forEachArr(arr){
????????? var?? result = [ ];
????????? for(var i = 0,len = arr.length; i < len;i++){
?????????????????? if(arr[i]? instanceof?? Array){
?????????????????????????????? arguments.callee(forEachArr);
??????????????????? }else{
?????????????????????????????? result.push(arr[i]);
???????????????????? }
????????????????????? return?? result;
???????? }
}
console.log(forEachArr(arr));
7.什么是Ajax和JSON例书，它們的優(yōu)缺點(diǎn)。
Ajax是異步JavaScript和XML刻炒，用于在Web頁面中實(shí)現(xiàn)異步數(shù)據(jù)交互决采。
優(yōu)點(diǎn)：
可以使得頁面不重載全部內(nèi)容的情況下加載局部內(nèi)容，降低數(shù)據(jù)傳輸量
避免用戶不斷刷新或者跳轉(zhuǎn)頁面坟奥，提高用戶體驗(yàn)
缺點(diǎn)：
對(duì)搜索引擎不友好（
要實(shí)現(xiàn)ajax下的前后退功能成本較大
可能造成請(qǐng)求數(shù)的增加
跨域問題限制
JSON是一種輕量級(jí)的數(shù)據(jù)交換格式树瞭，ECMA的一個(gè)子集
優(yōu)點(diǎn)：輕量級(jí)、易于人的閱讀和編寫爱谁，便于機(jī)器（JavaScript）解析晒喷，支持復(fù)合數(shù)據(jù)類型（數(shù)組、對(duì)象访敌、字符串凉敲、數(shù)字）
8.vertical-align 屬性設(shè)置元素的垂直對(duì)齊方式,對(duì)應(yīng)的值
baseline 默認(rèn)。元素放置在父元素的基線上寺旺。
sub 垂直對(duì)齊文本的下標(biāo)爷抓。
super 垂直對(duì)齊文本的上標(biāo)
top 把元素的頂端與行中最高元素的頂端對(duì)齊
text-top 把元素的頂端與父元素字體的頂端對(duì)齊
middle 把此元素放置在父元素的中部。
bottom 把元素的頂端與行中最低的元素的頂端對(duì)齊迅涮。
text-bottom 把元素的底端與父元素字體的底端對(duì)齊废赞。
length
% 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負(fù)值叮姑。
inherit 規(guī)定應(yīng)該從父元素繼承 vertical-align 屬性的值唉地。
8.對(duì)CSS3的理解:
CSS3是層疊樣式表語言的最新發(fā)展，旨在擴(kuò)展CSS2.1传透。它帶來了很多期待已久的新事物耘沼，比如圓角，陰影朱盐，漸變群嗤，跳變或動(dòng)畫，以及新的布局兵琳，如多列狂秘，靈活的框或網(wǎng)格布局。
對(duì)HTML5的理解:
語義化的標(biāo)簽,新應(yīng)用程序接口(API):
實(shí)時(shí)二維繪圖
Canvas API：有關(guān)動(dòng)態(tài)產(chǎn)出與渲染圖形躯肌、圖表者春、圖像和動(dòng)畫的API[24]
定時(shí)媒體播放[25]
HTML5音頻與視頻：HTML5里新增的元素，它們?yōu)殚_發(fā)者提供了一套通用的清女、集成的钱烟、腳本式的處理音頻與視頻的API，而無需安裝任何插件
離線存儲(chǔ)數(shù)據(jù)庫（離線網(wǎng)絡(luò)應(yīng)用程序）[26]
編輯[27]
拖放[28]
跨文檔通信[29]
通訊／網(wǎng)絡(luò)
Communication APIs：構(gòu)建實(shí)時(shí)和跨源（cross-origin）通訊的兩大基礎(chǔ)： 跨文檔通訊（Cross Document Messaging）與XMLHttpRequest Level 2。
瀏覽歷史管理[30]
MIME和協(xié)議進(jìn)程時(shí)表頭登記[31][32]
微數(shù)據(jù)[33]
網(wǎng)頁存儲(chǔ)[34]
HTML5語義化的好處:
1.去掉或樣式丟失的時(shí)候能讓頁面呈現(xiàn)清晰的結(jié)構(gòu)：
2.屏幕閱讀器（如果訪客有視障）會(huì)完全根據(jù)你的標(biāo)記來“讀”你的網(wǎng)頁.
3.使用標(biāo)簽語義化可以使PDA拴袭、手機(jī)等設(shè)備可能無法像普通電腦的瀏覽器一樣來渲染網(wǎng)頁（通常是因?yàn)檫@些設(shè)備對(duì)CSS的支持較弱）.
4.搜索引擎的爬蟲也依賴于標(biāo)記.
HTTP狀態(tài)碼:
1XX:請(qǐng)求已被接受,需要繼續(xù)處理,臨時(shí)響應(yīng)
2XX:請(qǐng)求已被服務(wù)器成功接收,理解,接受;
3XX:客戶端采取進(jìn)一步操作才能完成請(qǐng)求;
4XX:客戶端的錯(cuò)誤
403forbidden:服務(wù)器已經(jīng)理解請(qǐng)求,但是拒絕執(zhí)行;
404not found請(qǐng)求失敗,希望請(qǐng)求的資源未在服務(wù)器上發(fā)現(xiàn)
5XX:服務(wù)器在處理請(qǐng)求時(shí)發(fā)生異常;
505服務(wù)器不支持或者拒絕支持在請(qǐng)求中使用的http版本;
5.跨域:由于同源策略的影響.a.com域名下的文件無法訪問b.com或者是c.a.com下的域名下的對(duì)象
解決跨域的方法:
(1)document.domain+iframe;必須是主域名相同的時(shí)候才可以
(2)動(dòng)態(tài)創(chuàng)建script標(biāo)簽
(3)利用iframe和location.hash
(4)window.name實(shí)現(xiàn)跨域數(shù)據(jù)傳輸
(5)HTML5中的postMessage
(6)利用flash
6.GET和POST請(qǐng)求的區(qū)別:
GET - 從指定的資源請(qǐng)求數(shù)據(jù)读第。
POST - 向指定的資源提交要被處理的數(shù)據(jù)
GET 方法
請(qǐng)注意，查詢字符串（名稱/值對(duì)）是在 GET 請(qǐng)求的 URL 中發(fā)送的：
/test/demo_form.asp?name1=value1&name2=value2
POST 方法
請(qǐng)注意拥刻，查詢字符串（名稱/值對(duì)）是在 POST 請(qǐng)求的 HTTP 消息主體中發(fā)送的：
POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2
有關(guān) GET 請(qǐng)求的其他一些注釋：? ? ? ? ? ? ? ? ? ? ? ? ? 有關(guān) POST 請(qǐng)求的其他一些注釋：
GET 請(qǐng)求可被緩存? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? POST 請(qǐng)求不會(huì)被緩存
GET 請(qǐng)求保留在瀏覽器歷史記錄中? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? POST 請(qǐng)求不會(huì)保留在瀏覽器歷史記錄中
GET 請(qǐng)求可被收藏為書簽? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? POST 不能被收藏為書簽
GET 請(qǐng)求不應(yīng)在處理敏感數(shù)據(jù)時(shí)使用????????????????????????????
GET 請(qǐng)求有長度限制? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? POST 請(qǐng)求對(duì)數(shù)據(jù)長度沒有要求
GET 請(qǐng)求只應(yīng)當(dāng)用于取回?cái)?shù)據(jù)
1.this的用法
來自阮一峰:
(1)作為單純的函數(shù)調(diào)用的時(shí)候,代表全局變量;
(2)作為方法調(diào)用的時(shí)候代表上級(jí)對(duì)象;
(3)作為構(gòu)造函數(shù)調(diào)用的時(shí)候,代表新對(duì)象;
(4)apply,call()調(diào)用,作用是改變函數(shù)的調(diào)用對(duì)象,第一個(gè)參數(shù)表示改變后的調(diào)用這個(gè)函數(shù)的對(duì)象,this指的就是這第一個(gè)參數(shù)
(1)Global context;
console.log(this.document === document); // true
// In web browsers, the window object is also the global object:
console.log(this === window); // true
this.a = 37;
console.log(window.a); // 37
(2)Function context;//取決于函數(shù)是如何被調(diào)用的
Inside a function, the value of this depends on how the function is called.
Simple call
function f1(){
return this;
}
f1() === window; // global object
(3)As an object method
When a function is called as a method of an object, its this is set to the object the method is called on.
3.CSS優(yōu)先級(jí)
優(yōu)先級(jí)順序
內(nèi)聯(lián)樣式 > ID 選擇器 > 偽類 > 屬性選擇器 > 類選擇器 > 元素(類型)選擇器 > 通用選擇器（*）
4.XML和JSON
3.XML和JSON的優(yōu)缺點(diǎn)對(duì)比
(1).可讀性方面怜瞒。
JSON和XML的數(shù)據(jù)可讀性基本相同，JSON和XML的可讀性可謂不相上下般哼，一邊是建議的語法盼砍，一邊是規(guī)范的標(biāo)簽形式，XML可讀性較好些逝她。
(2).可擴(kuò)展性方面浇坐。
XML天生有很好的擴(kuò)展性，JSON當(dāng)然也有黔宛，沒有什么是XML能擴(kuò)展近刘，JSON不能的。
(3).編碼難度方面臀晃。
XML有豐富的編碼工具觉渴，比如Dom4j、JDom等徽惋，JSON也有json.org提供的工具案淋，但是JSON的編碼明顯比XML容易許多，即使不借助工具也能寫出JSON的代碼险绘，可是要寫好XML就不太容易了踢京。
(4).解碼難度方面。
XML的解析得考慮子節(jié)點(diǎn)父節(jié)點(diǎn)宦棺，讓人頭昏眼花瓣距，而JSON的解析難度幾乎為0。這一點(diǎn)XML輸?shù)恼媸菦]話說代咸。
(5).流行度方面蹈丸。
XML已經(jīng)被業(yè)界廣泛的使用，而JSON才剛剛開始呐芥，但是在Ajax這個(gè)特定的領(lǐng)域逻杖，未來的發(fā)展一定是XML讓位于JSON。到時(shí)Ajax應(yīng)該變成Ajaj(Asynchronous Javascript and JSON)了思瘟。
(6).解析手段方面荸百。
JSON和XML同樣擁有豐富的解析手段潮太。
(7).數(shù)據(jù)體積方面管搪。
JSON相對(duì)于XML來講，數(shù)據(jù)的體積小铡买，傳遞的速度更快些更鲁。
(8).數(shù)據(jù)交互方面。
JSON與JavaScript的交互更加方便奇钞，更容易解析處理澡为，更好的數(shù)據(jù)交互。
(9).數(shù)據(jù)描述方面景埃。
JSON對(duì)數(shù)據(jù)的描述性比XML較差媒至。
(10).傳輸速度方面。
JSON的速度要遠(yuǎn)遠(yuǎn)快于XML谷徙。
4.閉包:
閉包就是嵌套在函數(shù)里面的內(nèi)部函數(shù)拒啰，并且該內(nèi)部函數(shù)可以訪問外部函數(shù)中聲明的所有局部變量、參數(shù)和其他內(nèi)部函數(shù)完慧。當(dāng)該內(nèi)部函數(shù)在外部函數(shù)外被調(diào)用谋旦，就生成了閉包。（實(shí)際上任何函數(shù)都是全局作用域的內(nèi)部函數(shù)屈尼，都能訪問全局變量册着，所以都是window的閉包）
;()();可以立即執(zhí)行,避免變量污染,但是要是閉包內(nèi)引用類型的數(shù)據(jù)在閉包外被使用的話,那么這個(gè)閉包就無法釋放,一直占用內(nèi)存,前面的語句加分號(hào)的理由:為什么在前面加一個(gè)分號(hào)，其原因就是防止前面的語句忘記加分號(hào);
6.SVG和canvas的區(qū)別:
手寫冒泡排序:
