_前端面試.docx

什么是ajax：AJAX是“AsynchronousJavaScriptandXML”的縮寫。他是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。類似于DHTML或LAMP，AJAX不是指一種單一的技術(shù)，而是有機(jī)地利用了一系列相關(guān)的技術(shù)。事實(shí)上，一些基于AJAX的“派生/合成”式（derivative/composite）的技術(shù)正在出現(xiàn)，如“AFLAX”。AJAX的應(yīng)用使用支持以上技術(shù)的web瀏覽器作為運(yùn)行平臺(tái)。這些瀏覽器目前包括：Mozilla、Firefox、InternetExplorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式對(duì)象，也不支持XSLT。Ajax包含下列技術(shù)：基于web標(biāo)準(zhǔn)（standards-basedpresentation）XHTML+CSS的表示；使用DOM（DocumentObjectModel）進(jìn)行動(dòng)態(tài)顯示及交互；使用XML和XSLT進(jìn)行數(shù)據(jù)交換及相關(guān)操作；使用XMLHttpRequest進(jìn)行異步數(shù)據(jù)查詢、檢索；使用JavaScript將所有的東西綁定在一起。為什么要用ajax：Ajax應(yīng)用程序的優(yōu)勢(shì)在于：1.通過(guò)異步模式，提升了用戶體驗(yàn)2.優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用3.Ajax引擎在客戶端運(yùn)行，承擔(dān)了一部分本來(lái)由服務(wù)器承擔(dān)的工作，從而減少了大用戶量下的服務(wù)器負(fù)載。AJAX的最大的特點(diǎn)是什么。Ajax可以實(shí)現(xiàn)動(dòng)態(tài)不刷新（局部刷新）就是能在不更新整個(gè)頁(yè)面的前提下維護(hù)數(shù)據(jù)。這使得Web應(yīng)用程序更為迅捷地回應(yīng)用戶動(dòng)作，并避免了在網(wǎng)絡(luò)上發(fā)送那些沒(méi)有改變過(guò)的信息。XMLHTTPREQUEST對(duì)象Ajax的核心是JavaScript對(duì)象XmlHttpRequest。該對(duì)象在InternetExplorer5中首次引入，它是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)而言之，XmlHttpRequest使您可以使用JavaScript向服務(wù)器提出請(qǐng)求并處理響應(yīng)，而不阻塞用戶。通過(guò)XMLHttpRequest對(duì)象，Web開(kāi)發(fā)人員可以在頁(yè)面加載以后進(jìn)行頁(yè)面的局部更新。AJAX技術(shù)體系的組成部分有哪些？HTML，css，dom，xml，xmlHttpRequest，javascriptAJAX應(yīng)用和傳統(tǒng)WEB應(yīng)用有什么不同？在傳統(tǒng)的Javascript編程中，如果想得到服務(wù)器端數(shù)據(jù)庫(kù)或文件上的信息，或者發(fā)送客戶端信息到服務(wù)器，需要建立一個(gè)HTMLform然后GET或者POST數(shù)據(jù)到服務(wù)器端。用戶需要點(diǎn)擊”Submit”按鈕來(lái)發(fā)送或者接受數(shù)據(jù)信息，然后等待服務(wù)器響應(yīng)請(qǐng)求，頁(yè)面重新加載。因?yàn)榉?wù)器每次都會(huì)返回一個(gè)新的頁(yè)面，所以傳統(tǒng)的web應(yīng)用有可能很慢而且用戶交互不友好。使用AJAX技術(shù)，就可以使Javascript通過(guò)XMLHttpRequest對(duì)象直接與服務(wù)器進(jìn)行交互。通過(guò)HTTPRequest，一個(gè)web頁(yè)面可以發(fā)送一個(gè)請(qǐng)求到web服務(wù)器并且接受web服務(wù)器返回的信息(不用重新加載頁(yè)面)，展示給用戶的還是同一個(gè)頁(yè)面，用戶感覺(jué)不到頁(yè)面刷新，也看不到到Javascript后臺(tái)進(jìn)行的發(fā)送請(qǐng)求和接受響應(yīng)。AJAX請(qǐng)求總共有多少種CALLBACKAjax請(qǐng)求總共有八種CallbackonSuccessonFailureonUninitializedonLoadingonLoadedonInteractiveonCompleteonExceptionAJAX和JAVASCRIPT的區(qū)別？javascript是一種在瀏覽器端執(zhí)行的腳本語(yǔ)言，Ajax是一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的開(kāi)發(fā)技術(shù)，它是利用了一系列相關(guān)的技術(shù)其中就包括javascript。Javascript是由網(wǎng)景公司開(kāi)發(fā)的一種腳本語(yǔ)言，它和sun公司的java語(yǔ)言是沒(méi)有任何關(guān)系的，它們相似的名稱只是一種行銷策略。在一般的web開(kāi)發(fā)中，javascript是在瀏覽器端執(zhí)行的，我們可以用javascript控制瀏覽器的行為和內(nèi)容。在Ajax應(yīng)用中信息是如何在瀏覽器和服務(wù)器之間傳遞的:通過(guò)XML數(shù)據(jù)或者字符串在瀏覽器端如何得到服務(wù)器端響應(yīng)的XML數(shù)據(jù)?XMLHttpRequest對(duì)象的responseXMl屬性XmlHttpRequest對(duì)象在IE和FF中創(chuàng)建方式有沒(méi)有不同？IE中通過(guò)NewActiveObject()得到，F(xiàn)F中通過(guò)New XmlHttpRequest ()得到.介紹一下XmlHttpRequest對(duì)象的常用方法和屬性（回答的越多越好）open(“method”,”URL”)建立對(duì)服務(wù)器的調(diào)用，第一個(gè)參數(shù)是HTTP請(qǐng)求方式可以為GET，POST或任何服務(wù)器所支持的您想調(diào)用的方式。第二個(gè)參數(shù)是請(qǐng)求頁(yè)面的URL。send()方法，發(fā)送具體請(qǐng)求abort()方法，停止當(dāng)前請(qǐng)求readyState屬性請(qǐng)求的狀態(tài)有5個(gè)可取值0=未初始化，1=正在加載2=已加載，3=交互中，4=完成responseText屬性服務(wù)器的響應(yīng)，表示為一個(gè)串reponseXML屬性服務(wù)器的響應(yīng)，表示為XMLstatus服務(wù)器的HTTP狀態(tài)碼，200對(duì)應(yīng)ok400對(duì)應(yīng)notfound什么是XMLXML是擴(kuò)展標(biāo)記語(yǔ)言，能夠用一系列簡(jiǎn)單的標(biāo)記描述數(shù)據(jù)XML的解析方式常用的用dom解析和sax解析。dom解析是一次性讀取xml文件并將其構(gòu)造為DOM對(duì)象供程序使用，優(yōu)點(diǎn)是操作方便，但是比較耗內(nèi)存。Sax是按事件驅(qū)動(dòng)的方式解析的，占用內(nèi)存少，但是編程復(fù)雜。你采用的是什么框架（架包）？這題是必問(wèn)的，一般也是最開(kāi)始就會(huì)問(wèn)到。在java中比較流行的有dojo,Prototype,JQuery,Dwr,extjs等等如果熟悉某種AJAX框架，他可能會(huì)問(wèn)到怎樣在程序中使用這種框架DWR框架介紹nDWR(DirectWebRemoting)是一個(gè)WEB遠(yuǎn)程調(diào)用框架.利用這個(gè)框架可以讓AJAX開(kāi)發(fā)變得很簡(jiǎn)單.利用DWR可以在客戶端利用JavaScript直接調(diào)用服務(wù)端的Java方法并返回值給JavaScript就好像直接本地客戶端調(diào)用一樣(DWR根據(jù)Java類來(lái)動(dòng)態(tài)生成JavaScrip代碼).nDWR的實(shí)現(xiàn)原理是通過(guò)反射，將java翻譯成javascript，然后利用回調(diào)機(jī)制，從而實(shí)現(xiàn)了javascript調(diào)用Java代碼介紹一下PROTOTYPE的$()函數(shù)，$F()函數(shù)，$A()函數(shù)都是什么作用？$()方法是在DOM中使用過(guò)于頻繁的document.getElementById()方法的一個(gè)便利的簡(jiǎn)寫，就像這個(gè)DOM方法一樣，這個(gè)方法返回參數(shù)傳入的id的那個(gè)元素。$F()函數(shù)是另一個(gè)大受歡迎的“快捷鍵”，它能用于返回任何表單輸入控件的值，比如textbox,drop-downlist。這個(gè)方法也能用元素id或元素本身做為參數(shù)。$A()函數(shù)能把它接收到的單個(gè)的參數(shù)轉(zhuǎn)換成一個(gè)Array對(duì)象。Ajax優(yōu)點(diǎn)：1、頁(yè)面無(wú)刷新，用戶的體驗(yàn)非常好。2、使用異步方式與服務(wù)器通信，具有更加迅速的響應(yīng)能力。3、可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的能力來(lái)處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和寬帶租用成本。并且減輕服務(wù)器的負(fù)擔(dān)，ajax的原則是“按需取數(shù)據(jù)”，可以最大程度的減少冗余請(qǐng)求，和響應(yīng)對(duì)服務(wù)器造成的負(fù)擔(dān)。4、基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載插件或者小程序。ajax的缺點(diǎn)：1、ajax不支持瀏覽器back按鈕。2、安全問(wèn)題AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。3、對(duì)搜索引擎的支持比較弱。4、破壞了程序的異常機(jī)制。5、不容易調(diào)試。淺談CSS布局從網(wǎng)頁(yè)表現(xiàn)來(lái)看，HTML是實(shí)體本身，要實(shí)現(xiàn)各種優(yōu)雅的布局的需要依賴CSSHTML元素兩大類型為塊級(jí)元素與行內(nèi)元素，網(wǎng)頁(yè)的布局一般由塊級(jí)元素組織，元素不同便有不一樣的表現(xiàn)要實(shí)現(xiàn)布局就要用到與布局有關(guān)的CSS屬性為position，常用屬性為static、absoulute、fixed、relativeposition的作用是改變?cè)氐臓顟B(tài)，由文檔流轉(zhuǎn)為相對(duì)文檔流或者脫離文檔流元素（定位元素）當(dāng)然float也能引發(fā)塊級(jí)元素脫離文檔流，但是其表現(xiàn)與原理與上面不一致，而且要慎用float布局于是這里便已經(jīng)有三種“流”了，不同的布局元素會(huì)處于不同的“執(zhí)行環(huán)境”，在“執(zhí)行環(huán)境”中才能方便的對(duì)其進(jìn)行管理這個(gè)管理的依據(jù)便是BFC（塊級(jí)作用域上下文），根據(jù)我粗淺的理解是，BFC也就是瀏覽器提供的一塊渲染區(qū)文檔流的元素處于一個(gè)渲染區(qū)，而定位元素處于另一層渲染區(qū)，float元素又會(huì)與之不同各個(gè)渲染區(qū)中的元素具有其定位規(guī)則，最簡(jiǎn)單的便是文檔流中的元素，遵循其塊級(jí)元素獨(dú)占一行+盒模型的規(guī)則： 塊級(jí)元素獨(dú)占一行，并且具有框（經(jīng)典盒模型） 塊級(jí)元素間由margin屬性分割，并且垂直方向的margin會(huì)取其大者 塊級(jí)元素必定左靠著父級(jí)塊級(jí)元素左邊框（包含塊，布局上下文） float元素不能影響塊級(jí)元素的BFC區(qū)域，但是其高度會(huì)參與計(jì)算創(chuàng)建BFC的方式有： float overflow display（使行內(nèi)元素具有BFC） position基于此，我們便可以實(shí)現(xiàn)我們的布局了，這里以最簡(jiǎn)單的兩列布局為例（左邊導(dǎo)航，右邊內(nèi)容主體）由于先出現(xiàn)的DOM先展示，所以內(nèi)容優(yōu)先原則，我們會(huì)將主體dom先展示 * margin: 0; padding: 0; div border: 1px solid black; #sidebar position: absolute; left: 0; top: 0; width: 95px; #content margin-left: 100px; 主體 導(dǎo)航這里從理論上說(shuō)，便是觸發(fā)了siderbar元素的定位特性，其BFC與文檔流不相關(guān)了。當(dāng)然，這里siderbar可以使用float實(shí)現(xiàn)，但是float本身應(yīng)該用于處理文字與圖片包裹的需求，我們本著職責(zé)分離的想法就別那樣干了。而且使用float還會(huì)引起元素坍塌，這里還要費(fèi)勁去處理清除浮動(dòng)行內(nèi)元素行內(nèi)元素的處理比較復(fù)雜，首先行內(nèi)元素的高度由其line-height決定，所以不要妄想其設(shè)置一個(gè)行內(nèi)元素的高度，這會(huì)引起意想不到的問(wèn)題舉一個(gè)例子來(lái)說(shuō)，很多大型網(wǎng)站都會(huì)具有統(tǒng)計(jì)代碼，而此類統(tǒng)計(jì)代碼一般是以img做請(qǐng)求發(fā)出，這個(gè)時(shí)候可能會(huì)導(dǎo)致10px左右的白屏問(wèn)題這個(gè)就是妄想設(shè)置行內(nèi)元素高度的結(jié)果，獨(dú)立的inline元素出現(xiàn)時(shí)，會(huì)為其創(chuàng)建一個(gè)line boxes作為容器（文字框）一行文字一個(gè)line Boxes，一行高度由其中最高的行內(nèi)元素確定，上例中有一個(gè)height為0的img，卻為其生成了一個(gè)高度為10的行高下面的代碼中，div會(huì)被行內(nèi)元素?fù)伍_(kāi)，其高度會(huì)由span中l(wèi)ine-height高者決定主體 導(dǎo)航 移動(dòng)端的建議 移動(dòng)端的文檔流渲染效率最高，應(yīng)該避免大范圍使用定位元素，在小米，三星等低端下定位元素可能渲染不出來(lái)（解決方案是引起回流） img元素加載失敗時(shí)候會(huì)有邊框，需要搞掉 慎用fixed屬性，fixed對(duì)于移動(dòng)端來(lái)說(shuō)有點(diǎn)頭疼，首先會(huì)有文本聚焦fixed定位錯(cuò)亂問(wèn)題，其次在ios4的屏幕中，如果加上瀏覽器上下工具條，再用fixed可視區(qū)域會(huì)變得很小 ios是按塊渲染的，布局時(shí)候可以分塊，不會(huì)渲染可視區(qū)域外的內(nèi)容 動(dòng)畫或者border-radius、box-shadow等屬性皆會(huì)使手機(jī)耗電加?。ǖ沁@個(gè)好像與我們沒(méi)關(guān)系） fixed元素為其設(shè)置html可能不響應(yīng)或者說(shuō)渲染看不見(jiàn)，常見(jiàn)于ipod或者低端android 當(dāng)然能在布局上用上一些語(yǔ)義化標(biāo)簽自然是好事，這樣對(duì)SEO或者特殊人事有一定幫助，比如strong、article之類的一次請(qǐng)求的完整流程一次URl輸入后，其流程如下，首先是請(qǐng)求響應(yīng)的流程：1 解析URL，解析域名生成唯一IP地址，開(kāi)始搜索服務(wù)器2 找到服務(wù)器后，服務(wù)器接收請(qǐng)求被服務(wù)器進(jìn)程攔截；一般而言，.net的程序會(huì)被IIS處理，java會(huì)被jBoss或者tomcat處理3 服務(wù)器處理請(qǐng)求，如果靜態(tài)文件的話直接返回，若是.net或者java等動(dòng)態(tài)腳本會(huì)經(jīng)過(guò)服務(wù)器編譯，執(zhí)行其中的服務(wù)器端代碼4 若是服務(wù)器端具有數(shù)據(jù)庫(kù)操作的話，這里還需要與DB建立連接，操作數(shù)據(jù)庫(kù)5 服務(wù)器處理結(jié)束后，生成最終的靜態(tài)HTML字符串返回，開(kāi)始向請(qǐng)求者（客戶端）返回請(qǐng)求字符串，一次返回量過(guò)大就會(huì)分批次，這是一個(gè)優(yōu)化點(diǎn)6 服務(wù)器響應(yīng)到達(dá)瀏覽器，瀏覽器開(kāi)始處理請(qǐng)求，進(jìn)入瀏覽器解析流程請(qǐng)求返回后，便進(jìn)入了我們關(guān)注的前端模塊簡(jiǎn)單來(lái)說(shuō)，瀏覽器會(huì)解析HTML生成DOM Tree，其次會(huì)根據(jù)CSS生成CSS Rule Tree，而javascript又可以根據(jù)DOM API操作DOM上面的文字描述的很簡(jiǎn)單，事實(shí)上發(fā)生的事情，卻很復(fù)雜，這里與代碼實(shí)現(xiàn)也很有關(guān)聯(lián)，但是有幾個(gè)關(guān)鍵點(diǎn)：頁(yè)面一定會(huì)等所有的HTML結(jié)構(gòu)與CSS加載下來(lái)才渲染（webkit內(nèi)核）比如我們這里使用fiddler限制其外鏈加載，我們?yōu)槠湎匏贋?0s div border: 1px solid black; a color: Red; 主體 導(dǎo)航 我們看到事實(shí)上62ms后頁(yè)面整體dom結(jié)構(gòu)就加載好了，這個(gè)時(shí)候我們是可以使用js操作dom結(jié)構(gòu)的，但這里一個(gè)重點(diǎn)是：CSS外鏈加載會(huì)阻塞js的執(zhí)行，并且重置CSS會(huì)引起瀏覽器的回流或者重繪，也就是：css外鏈會(huì)阻塞整個(gè)頁(yè)面的渲染（顯示），但是其DOM結(jié)構(gòu)是可操作的，中間如果有阻塞性的操作，比如alert的話會(huì)強(qiáng)制瀏覽器繪制頁(yè)面上面的特性與css外鏈的順序無(wú)關(guān)，并且有幾個(gè)樣式相關(guān)的操作，便會(huì)執(zhí)行幾次，最終采用最近或者優(yōu)先級(jí)最高的樣式 div border: 1px solid black; a color: Red; 主體 導(dǎo)航 document.getElementById(span2).innerHTML = 測(cè)試; alert(1); alert(2) 一個(gè)需要注意的地方是，chrome與firefox或者IE表現(xiàn)不一致，firefox與IE都是先渲染頁(yè)面最后等待CSS下來(lái)后再次渲染所以我們很多同學(xué)面試時(shí)說(shuō)將css外鏈放到header中，而不是body中的理解都是一知半解，這里真實(shí)的處理辦法是異步插入css外鏈才行。至少對(duì)于chrome需要做這個(gè)處理，否則頁(yè)面就是出不來(lái)，因?yàn)槎鄶?shù)手機(jī)是webkit內(nèi)核，保不齊這里出多少事情。根據(jù)以上流程后，頁(yè)面也基本出來(lái)了，這里簡(jiǎn)述其流程 生成DOM樹(shù) 計(jì)算CSS樣式（生成CSS Rule Tree） 構(gòu)建render Tree reflow，定位元素位置與大小 繪制頁(yè)面上面過(guò)程如果js操作dom或者中間有一段style都會(huì)引起reflow，由于img會(huì)在文檔加載結(jié)束后加載，可能會(huì)撐開(kāi)頁(yè)面，導(dǎo)致回流，所以一般需要對(duì)img設(shè)置尺寸PS：事實(shí)上chrome獲得請(qǐng)求時(shí)本身也有幾個(gè)事件點(diǎn)，這里可以用其開(kāi)發(fā)性能插件，但對(duì)前端基本透明，我們這里不關(guān)注了MVC與組件化View分離很多程序的變革集中積累在VIEW一塊的處理，原因是這里的需求是最復(fù)雜的，就View分離來(lái)說(shuō)，最成功的我覺(jué)得是ASP到ASP.net的變革最初的ASP程序，會(huì)將C#代碼寫在asp代碼中，這樣的結(jié)果便是頁(yè)面里面既有html又有C#代碼，甚至一個(gè)js循環(huán)中會(huì)嵌套出C#的循環(huán)PS：你一定要相信，那個(gè)時(shí)候不會(huì)有js分成的概念，因?yàn)樾枨筮_(dá)不到所謂的View分離便是，程序員確實(shí)受不了維護(hù)顯示與邏輯同時(shí)處于一個(gè)頁(yè)面的程序了，于是他選擇了改變，改變的結(jié)果便是拆分View分離一大核心思維便是，分得開(kāi)，合得攏，他們這里引入一個(gè)codebehind方案將一個(gè)頁(yè)面文件分成兩個(gè)（事實(shí)上是三個(gè)） index.apsx index.aspx.cspublic partial class _00綜合_10doc_write_index : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) 最終這兩個(gè)文件會(huì)和到一起，兩個(gè)文件之間也可通信，而通信的橋梁是.net一個(gè)個(gè)被人詬病的組件，比如： button組件 datalist label組件 偉大的gridview各個(gè)組件在C#層面上會(huì)擁有一個(gè)ID進(jìn)行約束，.cs文件便可以根據(jù)該ID為其注冊(cè)各個(gè)事件，這個(gè)與javascript的模型便非常類似了View分離的第一個(gè)優(yōu)點(diǎn)便是，用戶的界面變得干凈了，不會(huì)有代碼混雜的現(xiàn)象，第二個(gè)優(yōu)點(diǎn)便是業(yè)務(wù)端代碼可以再分離，從而多了數(shù)據(jù)層、業(yè)務(wù)層等各個(gè)概念而組件的出現(xiàn)讓.net變成了世界上開(kāi)發(fā)最快的語(yǔ)言，這點(diǎn)誰(shuí)也不可否認(rèn)，而這些都是前端MVC出現(xiàn)或者組件出現(xiàn)的意義前端View分離與asp當(dāng)初的情況一致，js進(jìn)行dom操作或者字符串拼接的目的事實(shí)上就是想形成一個(gè)可供展示的View，前端jser已經(jīng)再也不能忍受這種代碼了：很多時(shí)候，我們想將對(duì)應(yīng)的模板單獨(dú)的放到一個(gè)地方，每次樣式若是有更改，只需要更改那個(gè)文件即可，只要與之呼應(yīng)的“ID”不丟失即可，比如這樣的結(jié)構(gòu)和代碼： % for(var i = 0, len = btns.length; i div class=cui-flexbd 這樣做的道理是，這個(gè)樣子做到了表現(xiàn)與行為分離，我們分得開(kāi)，然后會(huì)根據(jù)基類的一個(gè)機(jī)制，讓他們最終合到一塊，以完成功能這里我們依舊需要強(qiáng)調(diào)一個(gè)前提：“ID”關(guān)聯(lián)不可丟失，否則“行為”將不可表現(xiàn)，只要兩者間關(guān)聯(lián)不丟，這里便可輕松滿足以下邏輯： CSS名修改（非標(biāo)識(shí)性CSS名） 標(biāo)簽改變 描述性文字改變MVC在前端重復(fù)性或者類似重復(fù)性的代碼應(yīng)該抽象為一個(gè)方法，在重復(fù)使用需要提示框需求后便會(huì)學(xué)會(huì)形成alert組件組件的出現(xiàn)是代碼抽象，代碼重用的標(biāo)識(shí)，這個(gè)樣子既可以減少工作量也可以減少代碼容量，而組件的實(shí)現(xiàn)與MVC思維的很好詮釋比如以下代碼： 事實(shí)上，MVC的任意一塊都可以作為單獨(dú)的模塊實(shí)現(xiàn)，比如會(huì)有這樣的需求：一個(gè)model實(shí)例的變化會(huì)影響兩個(gè)View的顯示，但是僅僅對(duì)UI一塊來(lái)說(shuō)我們做了如下處理：核心點(diǎn)變成了幾個(gè)屬性： template，根據(jù)他生成UI datamodel，根據(jù)他生成viewModel提供給template使用 eventArr，業(yè)務(wù)事件注冊(cè)點(diǎn)這個(gè)代碼是Blade框架的UI基類，他是一個(gè)迷你MVC框架 propertys: function () /模板狀態(tài) this.template = ; this.datamodel = ; this.events = ; this.wrapper = $(body); this.id = _.uniqueId(ui-view-); /自定義事件，此處需要注意mask 綁定事件前后問(wèn)題，考慮scroll.radio插件類型的mask應(yīng)用，考慮組件通信 this.eventArr = ; /初始狀態(tài)為實(shí)例化 this.status = init; /this.availableFn = function () template作為View的實(shí)現(xiàn)，datamodel作為model實(shí)現(xiàn)，我們會(huì)根據(jù)datamodel與template生成基本的view實(shí)體這里datamodel與template之間會(huì)有一個(gè)viewModel的映射關(guān)系，是為了防止服務(wù)器端突然將title變成Title而導(dǎo)致模板解析錯(cuò)誤而整個(gè)文件便是一個(gè)控制器，view有的事件行為采用javascript委托技術(shù)全部注冊(cè)在根元素上，如此整個(gè)UI就活了，他的好處是： 具有繼承關(guān)系，可以擁有統(tǒng)一的資源釋放，或者View通信機(jī)制代碼量也會(huì)減少M(fèi)VC與組件化的意義MVC對(duì)前端的意義甚大，因?yàn)閖ser對(duì)MVC或者分模塊的思維的深入理解，我們才會(huì)將前端代碼做分離，這樣會(huì)有效的避免多人更改一個(gè)文件的難題。組件化是對(duì)重復(fù)工作，重復(fù)代碼的降低，當(dāng)然是好東西.資源加載前端優(yōu)化的瓶頸始終在資源加載，只要加載快，無(wú)論你代碼寫的多慢（不要糾結(jié)死循環(huán)），都一定快，所以前端優(yōu)化事實(shí)上一直都是一個(gè)主題：瘦身壓縮css sprite延遲加載（主要針對(duì)圖片）按需加載（主要針對(duì)首屏未用到的UI）緩存CDN托管預(yù)加載等詞語(yǔ)不斷的在前端出現(xiàn)，但是一個(gè)不可避免的事實(shí)是，需求越發(fā)復(fù)雜，體驗(yàn)要求越高，所以一個(gè)前端可能的事實(shí)是：前端資源體積越來(lái)越大，避免此事發(fā)生不是前端說(shuō)了算的，需要產(chǎn)品與交互一起努力，清晰、體驗(yàn)好、輕量級(jí)的設(shè)計(jì)誰(shuí)不喜歡，但是廣告營(yíng)銷也不能不考慮，總之此事路還長(zhǎng)！webapp的資源加載對(duì)于webapp來(lái)說(shuō)，首次加載的體積會(huì)更加大，因?yàn)槠湟蟮膸?kù)更多，并且網(wǎng)速更慢，這個(gè)時(shí)候可以采取fake頁(yè)的方案我們應(yīng)該避免頁(yè)面長(zhǎng)時(shí)間白頁(yè)，這個(gè)時(shí)候便提出了fake頁(yè)的概念。頁(yè)面渲染只需要完整的HTML以及CSS，這個(gè)便是第一個(gè)優(yōu)化點(diǎn)。從數(shù)據(jù)請(qǐng)求數(shù)以及請(qǐng)求量來(lái)說(shuō)，webapp首頁(yè)的響應(yīng)應(yīng)該比較慢，若是任由js加載完成再渲染頁(yè)面，用戶很有可能失去耐心。但是從DOMContentLoaded來(lái)看，首頁(yè)事實(shí)上頁(yè)面響應(yīng)比較迅速，所以這個(gè)加載結(jié)束后頁(yè)面第一屏便渲染結(jié)束，然后再異步加載js，當(dāng)js改變后再動(dòng)態(tài)改變dom結(jié)構(gòu)中的一些關(guān)鍵點(diǎn)，這個(gè)時(shí)候一個(gè)靜態(tài)HTML頁(yè)面，裝載首屏的基本內(nèi)容，讓首頁(yè)快速顯示，然后js加載結(jié)束后會(huì)馬上重新渲染整個(gè)頁(yè)面，這個(gè)樣子，用戶就可以很快的看到頁(yè)面響應(yīng)，給用戶一個(gè)快的錯(cuò)覺(jué)，給人感覺(jué)快得多。是否按需加載按需加載的話確實(shí)會(huì)對(duì)首屏加載有好處，但是是否按需加載卻不一定了,按需加載需要加載js和模板，這個(gè)過(guò)程自然卡，所以真正是不是要按需加載，或者多少資源按需加載有個(gè)臨界值，需要不斷的測(cè)試才行最后，要減少資源的話，代碼的質(zhì)量神馬的也需要考慮的，但對(duì)容量來(lái)說(shuō)效用可能不是太大IOS的體驗(yàn)IOS的體驗(yàn)好，主要好在兩點(diǎn)： 清晰、簡(jiǎn)潔、傻瓜化設(shè)計(jì)，連我媽都可以輕巧的操作蘋果手機(jī)其簡(jiǎn)易型可想而知 用戶行為模擬，IOS體驗(yàn)第二點(diǎn)便是其無(wú)敵的動(dòng)畫效果若是說(shuō)web應(yīng)用想趕上（寒冬老師這里趕上一詞用得十分貼切，他要說(shuō)超過(guò)估計(jì)沒(méi)人理他了）native開(kāi)發(fā)的話還是有可能但是如果說(shuō)web應(yīng)用要趕上IOS的設(shè)計(jì)的話，那么還有無(wú)數(shù)荊棘需要踩過(guò)！并且有兩大前提： 網(wǎng)速快，用戶不必關(guān)心資源大 手機(jī)性能好，不說(shuō)超越PC，至少能“趕上”PC吧以上兩點(diǎn)成立的話，web應(yīng)用趕上IOS體驗(yàn)才變得可能，簡(jiǎn)單來(lái)說(shuō)就動(dòng)畫而言，前端有哪些問(wèn)題呢？webapp中的動(dòng)畫，webapp的一大優(yōu)勢(shì)便是在view切換時(shí)候可以擁有媲美與native的動(dòng)畫效果，但是很多時(shí)候那只是一種想法，真正的情況卻不是這樣產(chǎn)生此問(wèn)題的原因有： 手機(jī)CPU爛！ 手機(jī)顯卡爛！就算四核其渲染也很有問(wèn)題 高端手機(jī)瀏覽器會(huì)有BUG 低端手機(jī)支持不好（國(guó)內(nèi)山寨機(jī)笑而不語(yǔ)）因?yàn)橐陨显颍聦?shí)上做webapp的都會(huì)不同程度的弱化動(dòng)畫，或者在局部區(qū)域使用動(dòng)畫難在何處？dom樹(shù)過(guò)多view的移動(dòng)與簡(jiǎn)單的圖片slider組件相差甚劇！原因便是其dom結(jié)構(gòu)可能很復(fù)雜，大dom樹(shù)的移動(dòng)在移動(dòng)端效果很差就簡(jiǎn)單列表頁(yè)來(lái)說(shuō)，當(dāng)項(xiàng)目超過(guò)100個(gè)時(shí)，使用IScroll類插件都應(yīng)該很慎重，這類移動(dòng)可能非?？ǎ《襠om樹(shù)復(fù)雜度與業(yè)務(wù)直接相關(guān)，我們沒(méi)有任何辦法去控制dom樹(shù)，因?yàn)闃I(yè)務(wù)代碼可能不會(huì)經(jīng)過(guò)我們的手，就算經(jīng)過(guò)，你又肯定自己做出來(lái)的dom樹(shù)有多??？不見(jiàn)得吧長(zhǎng)短頁(yè)問(wèn)題所謂長(zhǎng)短頁(yè)便是一個(gè)view很長(zhǎng)一個(gè)view很短，這里問(wèn)題處理十分討厭，首先我們每次做切換需要將view位置切換至頭部（window.scroll(0, 0)）如此的話ios中會(huì)引起頁(yè)面viewport的變化（系統(tǒng)自動(dòng)發(fā)生），或者會(huì)觸發(fā)低端工具欄的出現(xiàn)，這個(gè)時(shí)候頁(yè)面抖動(dòng)無(wú)可避免若是每次不執(zhí)行window.scroll(0, 0)，切換時(shí)候又會(huì)導(dǎo)致短的view不可見(jiàn)我現(xiàn)階段想到的解決方案是，移動(dòng)時(shí)候?qū)croll設(shè)得比較大，移動(dòng)時(shí)候?qū)view的top值與scrollTop相同最后仍然需要執(zhí)行window.scroll(0, 0)的操作，所以，這個(gè)問(wèn)題只能緩解，無(wú)法解決手機(jī)渲染問(wèn)題只要是做移動(dòng)端的朋友，一定會(huì)對(duì)三星機(jī)或者一些低端機(jī)的渲染嗤之以鼻！具體表現(xiàn)為多次操作style后，后面的操作瀏覽器不會(huì)搭理你解決方案是： 引起瀏覽器強(qiáng)烈重繪 臨時(shí)增刪一個(gè)dom結(jié)構(gòu)但是涉及view切換動(dòng)畫的話，很有可能會(huì)出現(xiàn)一些莫名其妙的問(wèn)題！所以單單由簡(jiǎn)單的webapp的切換都如此困難，web應(yīng)用想趕上IOS的話還要等幾年.Hybrid對(duì)前端的意義應(yīng)該說(shuō)Ajax帶動(dòng)了前端的首次革命，而移動(dòng)端帶來(lái)了二次革命，而Hybrid將前端推上了風(fēng)口浪尖！原來(lái)我廠app是使用native開(kāi)發(fā)的，會(huì)出現(xiàn)此等問(wèn)題：一個(gè)應(yīng)用需要養(yǎng)3個(gè)團(tuán)隊(duì)（ios、android、winphone），而且一旦業(yè)務(wù)改變會(huì)讓開(kāi)發(fā)抓狂！而Hybrid的出現(xiàn)解決了此問(wèn)題，一套前端代碼可以用于四個(gè)地方：瀏覽器、ios、android、winphone，而這個(gè)卻是互聯(lián)網(wǎng)公司最需要的最近兩年，移動(dòng)大潮襲來(lái)，各個(gè)公司皆在搶占移動(dòng)端的份額，誰(shuí)贏了這場(chǎng)戰(zhàn)斗誰(shuí)就是下一代王者，所以出現(xiàn)了一個(gè)事實(shí)：市場(chǎng)的占領(lǐng)、業(yè)務(wù)的擴(kuò)展是第一位！所以Hybrid的市場(chǎng)與需求比native大，但是這不是說(shuō)native沒(méi)用了，因?yàn)楦玫捏w驗(yàn)我們的追求，所以在Hybrid占領(lǐng)市場(chǎng)結(jié)束后，可能需要改版為native除非那時(shí)前端的體驗(yàn)?zāi)芸s小與native的距離Hybrid開(kāi)發(fā)的問(wèn)題Hybrid提高了前端開(kāi)發(fā)的門檻，因?yàn)镠ybrid的調(diào)試難，但是業(yè)內(nèi)也出現(xiàn)了一些調(diào)試的方案。Hybrid 兼容BUG多， H5站點(diǎn)上看著好好的程序，一旦到了webview上就出問(wèn)題了，這個(gè)調(diào)試也很痛苦。哎，其實(shí)Hybrid開(kāi)發(fā)也只是需要一點(diǎn)熟悉度罷了，沒(méi)有什么可說(shuō)，就此打住吧。中文名JSer含義類似于jQuery的開(kāi)源腳本框架特點(diǎn)極大的簡(jiǎn)化您的javascript開(kāi)發(fā)優(yōu)點(diǎn)可以便捷的使用DOM操作JSer是一款類似于jQuery的開(kāi)源腳本框架（為方便使用過(guò)jQuery的開(kāi)發(fā)人員快速入門，許多方法調(diào)用都與其類似）。使用JSer,將極大的簡(jiǎn)化您的javascript開(kāi)發(fā),使程序代碼更加簡(jiǎn)潔和高效！使用JSer，您幾乎無(wú)需再考慮各瀏覽器的兼容問(wèn)題，目前JSer兼容的瀏覽器核心:IE, Firefox, Opera, Chrome, safari。通過(guò)JSer，您可以便捷的使用DOM操作、CSS樣式訪問(wèn)、屬性讀寫、事件綁定、行為切換、動(dòng)態(tài)載入、數(shù)據(jù)緩存、URL與AJAX等眾多功能。Native App是一種基于智能手機(jī)本地操作系統(tǒng)如iOS、Android、WP（WinPhone）并使用原生程式編寫運(yùn)行的第三方應(yīng)用程序,也叫本地app。SEO由英文Search Engine Optimization縮寫而來(lái)， 中文意譯為“搜索引擎優(yōu)化”。SEO是指從自然搜索結(jié)果獲得網(wǎng)站流量的技術(shù)和過(guò)程。SEO是指在了解搜索引擎自然排名機(jī)制的基礎(chǔ)上，對(duì)網(wǎng)站進(jìn)行內(nèi)部及外部的調(diào)整優(yōu)化，改進(jìn)網(wǎng)站在搜索引擎中的關(guān)鍵詞自然排名，獲得更多流量，從而達(dá)成網(wǎng)站銷售及品牌建設(shè)的目標(biāo)KISSY 是由淘寶前端工程師們發(fā)起創(chuàng)建的一個(gè)開(kāi)源 JS 類庫(kù)。它遵循的原則是 小巧靈活、簡(jiǎn)潔實(shí)用、愉悅編碼、快樂(lè)開(kāi)發(fā)。Keep It，Simple & Stupid, Short & Sweet, Slim & Sexy.Yeah!流行的JavaScript庫(kù)有jQuery，MooTools，Prototype，Dojo和YUI等，這些 JavaScript庫(kù)功能豐富，加上它們眾多的插件，幾乎能實(shí)現(xiàn)任何你需要的功能，然而需要實(shí)現(xiàn)一些特定的功能，則可以選擇功能更專一的輕量庫(kù)，比如 kissy就是這樣一個(gè)輕量的庫(kù)。NodeJs特點(diǎn) 異步從文件讀取到網(wǎng)絡(luò)請(qǐng)求，NodeJs皆以異步完成，回調(diào)函數(shù)占據(jù)重要作用，在編程模型上Node是領(lǐng)先的 事件回調(diào)事件回調(diào)讓程序變得輕巧，但是具體怎么樣還是取決于程序員。但是回調(diào)函數(shù)在閱讀上其實(shí)還是有一定難度的 單線程N(yùn)ode是單線程的，如果多線程的話，進(jìn)程中的通信是很討厭的，單線程也沒(méi)有死鎖等問(wèn)題,但是性能相關(guān)就有問(wèn)題了，因?yàn)椴荒芾枚嗪?；【js】js中的|和& 邏輯與&和邏輯或|操作符可以應(yīng)用于任何類型的操作數(shù)，而不僅僅是布爾值。幾乎所有語(yǔ)言中|和&都遵循“短路”原理， 如&中第一個(gè)表達(dá)式為假就不會(huì)去處理第二個(gè)表達(dá)式，而|正好相反。js同樣也遵循上述原則：當(dāng)邏輯或|時(shí)，找到為true的分項(xiàng)就停止處理，并返回該分項(xiàng)的值，否則執(zhí)行完，并返回最后分項(xiàng)的值。當(dāng)邏輯與&時(shí)，找到為false的分項(xiàng)就停止處理，并返回該分項(xiàng)的值。 var a = | null | 3 | 4;/32 alert(a);3 var b = 4 & 5 & null & 0;/null4 alert(b);document.createElement()方法來(lái)創(chuàng)建tr、td !-var _row;var _cell;for(var i = 0; i 1000; i+) _row = document.createElement(tr);document.getElementById(_table).appendChild(_row);for(var j = 0; j 第一題，img title與alttitle是用于鼠標(biāo)劃上時(shí)候顯示的提示信息，而我們的圖片總會(huì)有原因不顯示，這個(gè)時(shí)候alt便會(huì)替代文字顯示，而且alt對(duì)于seo十分友好，所以我們所有的圖片必須加上alt，這樣瀏覽器就知道他是干什么的了。第二題，加粗，居中，下劃線標(biāo)簽這道題感覺(jué)意義不大，以為以上幾個(gè)標(biāo)簽除了strong，其它我沒(méi)有用過(guò)，他可能會(huì)到語(yǔ)義化相關(guān)然后問(wèn)CSS怎么用吧？3 寫出一個(gè)文本輸入框，屬性為只讀，最大輸入字符為20個(gè)CSS左邊固定，右邊可變的布局實(shí)現(xiàn)方法；要求在源碼順序中左邊必須在前。沒(méi)有理解到想要問(wèn)什么，按我的理解這個(gè)題考察以下知識(shí)： 內(nèi)容優(yōu)先 布局知識(shí)如何使一個(gè)DIV的背景圖像距這個(gè)DIV的頂部10像素，左邊15像素，且不重復(fù)background:url(yexiaochai.gif) no-repeat 15px 10px ;CSS基礎(chǔ)-引入方法，選擇器，繼承 一.CSS引入方法：行內(nèi)式、嵌入式、導(dǎo)入式、鏈接式。1、行內(nèi)式。 在標(biāo)簽的style屬性中設(shè)定CSS樣式。 行內(nèi)式2、嵌入式 將頁(yè)面各種元素的設(shè)置集中寫在標(biāo)簽里。 div background-color:blue; 3、導(dǎo)入式 將一個(gè)外部CSS文件引入CSS文件或HTML文件,注意此方法既能在CSS文件里使用也能夠在HTML的標(biāo)簽之間使用。 import main.css; 4、鏈接式 將一個(gè)外部CSS文件引入HTML文件 二、選擇器 1、ID選擇器 根據(jù)HTML元素的id屬性選擇元素。 #div1 background-color:red;/* 選中id為div1的HTML元素 */ 2、class選擇器 根據(jù)HTML的class屬性選擇元素。 .left background-color:red 我是class=left的div元素 3、標(biāo)簽選擇器 根據(jù)HTML標(biāo)簽選擇元素 CSS: div background-color:blue; HTML: 我是一個(gè)div元素4、復(fù)合選擇器4.1 交集選擇器 CSS: p.special color:red; /* 選中class=special的p元素 HTML: 我是一個(gè)p /* 不會(huì)被選中 */我是一個(gè)class=special的元素 /* 選中該行 */4.2 并集選擇器 CSS： .special,div,p background-color:red; HTML: 我是一個(gè)class屬性為span的元素 我是一個(gè)div元素 我是一個(gè)p元素 以上三行HTML代碼都會(huì)被選中。4.3 后代選擇器 后代選擇器：選中所有后代元素 CSS: .special p background-color:red; HTML: 我是.special里的p元素 /* 會(huì)被選中 */ 我是.special里的p元素 /* 會(huì)被選中 */ 我也是一個(gè)p /* 不會(huì)被選中 */4.4直接后代選擇器 即：選擇直接子后代 CSS: .specialp background-color:red; 我是.special里的p元素 /* 會(huì)被選中 */ 我是.special里的p元素 /* 不會(huì)被選中，因?yàn)椴皇侵苯幼釉?，是孫子元素了 */ 我也是一個(gè)p /* 不會(huì)被選中，非子元素 */五、屬性選擇器CSS：atitle font-size:30px; /選中含有title屬性的a元素我是第一個(gè)a標(biāo)簽 /會(huì)被選中，含有title屬性我是第二個(gè)a標(biāo)簽 /不會(huì)被選中，沒(méi)有title屬性atitle=a1 font-size:30px; /選中title屬性=a1的元素我 /會(huì)被選中，含有title，并且title=a1我是第二個(gè)a標(biāo)簽 /不會(huì)被選中，沒(méi)有title屬性我是第一個(gè)a標(biāo)簽/不會(huì)被選中，title!=a1其他屬性符號(hào)：atitle=a1 選中 選中title屬性中包含a1的元素，注意a與其他值要有空格atitle=a1 選中選中title屬性以a1開(kāi)頭的元素atitle$=a1 選中 選中title屬性以a1結(jié)束的元素atitle*=a1 選中 選中title屬性中包含a1的元素atitle|=a1 選中或選中title屬性中包含a1-開(kāi)頭或等于a1的元素，常用于選擇src=logo- 1,logo-2等性。六、相鄰兄弟選擇器+CSS: span + pHTML:我是一個(gè)span我是一個(gè)p 我也是一