5-26安傑特警面試題javascript
行內元素有哪些？塊級元素有哪些？CSS的盒模型？ 行內元素：span,a,b,i,s,u,sub,sup, 塊級元素：h1~h6,div,p,prev(預格式化) CSS的盒模型:border,內容,margin,paddingphp
CSS引入的方式有哪些？link和@import的區別？ 引入方式：內聯內嵌、外部導入 樣式優先級:行內樣式>內部樣式>外部樣式(後二者是就近原則) 區別： ① link屬於HTML標籤，無兼容性；@import是CSS提供，只有在IE5以上才能識別； ② link支持javaScript改變樣式，@import不支持； ③ link方式樣式的權重高於@import的權重； ④ 頁面被加載時，link會被同時加載，而@import引用的CSS會等頁面加載完再加載.css
IE和DOM事件流的區別？ ① 事件流的區別:IE採用冒泡型事件,DOM使用先捕獲後冒泡型事件 ② 事件監聽函數的區別: IE使用: ANY.attachEvent(「事件名」,function(){ }) //綁定函數 ANY.detachEvent(「事件名」,function(){ }) //移除函數 DOM使用: ANY.addEventListener(「事件名」,function(){ }) //綁定函數 ANY.removeEventListener(「事件名」,function(){ }) //移除函數html
添加 追加 刪除 替換 插入到某個節點的方法 添加: var elem=document.createElement(「a」); //建立a標籤 var elem=document.createTextNode(「txt」); //建立文本標籤 追加: parent.appendChild(elem) 刪除: parenet.removeChild(elem) 替換: parent.replaceChild(elem,oldelem) 插入: parent.insertBefore(elem,oldelem)前端
document load 和document ready的區別 document load 和document ready都是javaScript文檔加載完成事件 document load整個頁面內容加載完成後才執行,也就是要等html,css,js,圖片所有加載完成才執行; document ready默認DOM內容加載後提早執行vue
+function(){}() (function(){})()java
編寫一個數組去重的方法 /* * 新建一新數組，遍歷傳入數組，值不在新數組就push進該新數組中 * IE8如下不支持數組的indexOf方法 * */ function uniq(array){ var temp = []; //一個新的臨時數組 for(var i = 0; i < array.length; i++){ if(temp.indexOf(array[i]) == -1){ //若是要檢索的數組值沒有出現，則該方法返回 -1。 temp.push(array[i]); } } return temp; } 或者 ES5寫法 function unique(arry) { const temp = [] arry.forEach(item => { if (temp.indexOf(item) == -1) {// 若是要檢索的數組值沒有出現，則該方法返回 -1 temp.push(item); } }) return temp } var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5]; console.log(uniq(aa));
ES6寫法 function unique (arr) { return Array.from(new Set(arr)) }node
BOM對象有哪些，列舉window對象？ BOM對象: history歷史記錄棧, location打開url對象, navigator瀏覽器的配置信息, screen顯示設備信息, even封裝事件對象 Window對象: window.alert() //簡寫:alert(); confirm(「顯示內容」), prompt()輸入對話框,open()打開瀏覽器,close()關閉瀏覽器react
Null和undefined的區別？ Null表示一個無的對象，轉爲數值時爲0，經常使用來表示函數返回一個不存在的對象；undefined表示一個無原始值，轉爲數值時爲NaN，當聲明的變量未初始化時，變量的默認值爲undefined. 6-6微聚美面試題jquery
請描述出兩點以上xhtml和html的最顯著區別 ① xhtml元素必須被正確嵌套; ② xhtml元素必須被關閉,標籤名必須用小寫字母; ③ xhtml文檔必須擁有根元素,也就是html元素.
get和post的區別 ① 語義上不一樣: get是客戶端想獲取數據;post是客戶端想傳遞數據給服務器 ② 提交表單時不一樣: get把請求數據時追加到地址欄url後面,以?開頭,長度有限度,通常在1024個字節；post請求數據放在請求主體中,能夠上傳文件,長度大小沒有限制. ③ 安全性不一樣: post安全性比get高
json格式數據有哪些特色 json是一種輕量級的數據交換格式. 特色: ①數據在鍵值(key和value)對中; ②數據由逗號分隔; ③花括號保存對象; ④ 方括號保存是數組.(值的類型多是字符串、數字、數組、對象) 例如：｛"fistName": "Lilei","lastName": "Meimei"｝是一個json數據,json數據是用鍵值對的形式有存儲,冒號前是鍵,冒號後是值,多個數據用逗號分隔。 Json數組[{"a": "A","b": "B","c": "C"},{"a": "A","b": "B","c": "C"}]
php緩存技術有哪些? ① 全頁面靜態化緩存; ② 頁面部分緩存(頁面中不常常變的部分進行靜態緩存,常常變化的塊不緩存); ③ 數據緩存; ④ 查詢緩存; ⑤ 按內容變動進行緩存; ⑥ 內存式緩存 ⑦ apache緩存 ⑧ php APC緩存擴展 ⑨ Opcode緩存
div和span,p標籤三者間的區別 div和span不一樣之處於div是塊級元素,會換行; p標籤是一個段落,是一個塊級元素;span是一個行內元素,沒有什麼意思,span標籤能夠放p標籤裏,p標籤不能夠放span標籤。
php中isset()配置、empty()與is_null的區別 isset()判斷變量是否存在;empty()判斷變量是否爲空;is_null判斷變量是否爲NULL;三者都是判斷函數. isset(),empty()輸入參數必須是一個變量,php變量是以$字符開頭;is_null()輸入參數只要有返回值就能夠.
用css、html編寫一個兩列布局的網頁，右側固定寬度200px，左側自適應
<div id=」right」>右邊欄</div>
<div id=」left」>左邊欄</div>
複製代碼
6-8深信服面試題
什麼是跨域,如何解決跨域? 跨域是不一樣域名之間的相互訪問 (跨域也就是協議,域名,端口其中有一個不一樣); 解決跨域: 簡單說法: ①jsonp ，容許 script 加載第三方資源 ②反向代理（nginx 服務內部配置 Access-Control-Allow-Origin ） ③cors 先後端協做設置請求頭部，Access-Control-Allow-Origin 等頭部信息 ④iframe 嵌套通信，postmessage ⑤ 後端處理跨域問題,是配置一個過濾器,設置請求頭信息: response.setHeader(「Access-Control-Allow-Origin」,」 」)
詳細說法: ① 用jsonp原理動態生成 b.html
b.html 正確理解:跨域實際上web不支持,並且會帶來安全隱患,因此咱們通常不會使用跨域,可使用nginix來解決跨域,這款軟件專門是用來解決跨域問題,程序員只需訪問進去就好。 2. ajax的原理,http狀態碼 ajax是經過XmlHttpRequest對象向服務器發異步請求,從服務器得到數據,而後用javaScript來操做DOM而更新頁面，也就是ajax實現無刷新無提交的狀況下局部更新,這也是它最大的做用。 Ajax過程: (1)建立XMLHttpRequest對象,也就是建立一個異步調用對象. (2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息. (3)設置響應HTTP請求狀態變化的函數. (4)發送HTTP請求. (5)獲取異步調用返回的數據. (6)使用JavaScript和DOM實現局部刷新. ①建立對象XMLHttpRequest對象,也就是xhr對象 ②爲xhr對象綁定事件,狀態改變事件onreadystatechange,若是當前狀態readyState爲4是接收完成,響應消息狀態碼status爲200爲請求成功,獲取返回成功數據,不然獲取返回失敗數據 ⑤ 打開服務器鏈接xhr.open(方法,url,同步true) ⑥ 發送數據xhr.send(null) 注:open()get要發送參數,post不用加參數；send（）get爲null，post要加參數 例: var xhr = new XMLHttpRequest(); //4:爲 xhr 綁定事件 onreadystatechange xhr.onreadystatechange = function(){ //4.1: xhr.readyState === 4(當前狀態爲4是接收完成) //4.2: xhr.status === 200(響應消息狀態200爲OK) //4.3: 獲取返回數據 success // alert("保存成功"); // 獲取返回數據 error // alert("保存失敗"); if(xhr.readyState === 4){ if(xhr.status === 200){ if(xhr.responseText === 'success'){ alert('保存成功'); }else{ alert('保存失敗'); } } } } //5:打開鏈接 open(); xhr.open('GET','score_add.php?name='+ name1.value+'&chinese='+chinese.value ,true); //6:發送數據 send(); xhr.send(null); } Post： //5:打開鏈接 open(); xhr.open('POST','score_add.php',true); //修改請求頭 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //6:發送數據 send(); xhr.send('name='+name1.value+ '&chinese='+chinese.value); } http狀態碼: 400和403區別: 400:請求無效 403:禁止訪問 404:沒法找到文件 200和304的區別: 200:請求成功 304:未修改 302:臨時性重定向 500:服務器端錯誤 例子: $.ajax({ url:」http://......」, dataType:」jsonp」, data:{code:0000,message:」成功」}, success:function(data){ if(data==true){ $.ajax() }else{} }, error:function(error){ popWin(「系統錯誤,請稍後重試!」); return; } }); 3. 什麼是繼承,繼承的好處？Js繼承有幾種方法 繼承是父對象的成員，子對象無需重複建立就能夠直接使用，js中的繼承都是繼承原型對象，原型對象是把子對象相同的屬性和方法集中保存在父對象中，全部子對象共用.每個構造函數都有一個原型對象。 好處：代碼的重用，節約內存，方便維護 例如： js繼承有6種方法: ① 原型鏈繼承②借用構造函數繼承③組合繼承(原型+借用構造)④原型式繼承⑤寄生式繼承⑥寄生組合式繼承 4. 什麼是原型? js原型鏈與做用域鏈的區別 peototype是原型，原型是Javascript中的繼承的繼承，JavaScript的繼承就是基於原型的繼承。 原型鏈是由多級父元素逐級繼承造成的鏈式結構.原型鏈保存着全部對象成員的屬性和方法,控制着對象成員的使用順序,優先使用本身的,沒有再延原型鏈向父級查找。 做用域鏈由多級做用域連續引用造成的鏈式結果。做用域鏈保存着全部的變量，控制着變量使用順序，優先使用局部變量，沒有延做用域鏈向父級做用域查找。 簡單歸納： 全部不須要「對象」訪問的變量都保存在做用域鏈中； 全部須要「對象」訪問的成員都保存在原型鏈中。 5. position有哪幾種定位方式和區別 static默認值，沒有定位，元素出如今正常的流中； relative相對定位，相對於正常位置進行定位； absolute絕對定位，相對於最近的已定位祖先元素進行定位； fixed固定定位，相對於瀏覽器窗口進行定位。 6. 清除浮動的工做原理,有幾種方法 工做原理：元素脫離文檔流，不佔據空間。 有3種方法： ① 在浮動標籤後面添加一對空標籤，定義CSS clear:both ② 使用overflow:auto ③ 使用after僞類清除浮動 7. Display：none和visibility：hidden的區別 Display：none和visibility：hidden都是把網頁上某一元素隱藏起來，但二者有區別： Display：none不佔據空間，該元素在頁面上完全消失，通俗來講看不見摸不着； Visibility：hidden元素在頁面上不可見,但所佔的空間沒有改變,通俗說看不見但摸獲得。 8. 給一個元素綁定單擊事件如何實現單擊右鍵 例如:用jquery
單擊右鍵
$(function(){ $("#target").contextmenu(function(){ alert("處理程序.contextmenu()被調用"); }); }); 例如:用原生js +function(){ target.oncontextmenu=function(){ alert("處理程序.contextmenu()被調用"); } } (); 9. 事件代理的工做原理(也就是delegate,利用冒泡) ① 將事件處理函數綁定在父元素上一次,全部子元素共用便可 ② 得到目標元素:$(e.target) ③ 僅響應符合條件的元素事件 優勢:減小事件監聽的個數,新生成的子元素自動共用父元素的事件 綁定/解綁:$(「parent」).delegate/undelegate(「selector」,」事件名」,fn) $(「parent」).on(「事件名」,「selector」,fn)//至關於delegate/undelegate Delegate與bind的區別: Delegate僅在父元素上綁定事件一次,全部子元素共用便可,新生成的子元素自動共用父元素的事件 bind每一個子元素都要綁定事件,新生成的子元素沒法自動得到事件處理函數 10. DOM事件監聽與jquery-delegate事件委託,給多個子元素綁定相同事件,在父元素集中綁定如何實現? DOM事件監聽:若是多個子元素要綁定相同的事件時,只需在父元素集中綁定一次,全部子元素共用便可，elem.addEventListener(「事件名」,fn)。但要得到目標元素用e.target 例如:
事件代理見9題 $(「body」).delegate(「div.block」, 「click」,function(e){ var $target=$(e.target); alert($target.html()); }) 11. call、apply、bind的區別 call和 apply是臨時借用一個函數,並替換this爲指定對象,馬上執行； call傳入參數是單個傳,apply傳入參數是以數組的形式總體傳(arguments)； bind基於現有的函數,建立一個新的函數,並永久綁定this爲指定對象,不馬上執行。 12. 同步與異步請求的區別 同步請求：提交請求，等待服務器處理，處理完畢返回，這時客戶端瀏覽器不能幹任何事情。 異步請求：請求是經過事件觸發，服務器處理，處理完畢，這時瀏覽器能夠幹其餘的事件。 13. 對面向對象（oop）的理解 面向對象的三大特色:封裝、繼承、多態 封裝：建立一個對象，集中保存一個事物的屬性和方法 繼承：父對象的成員，子對象無需重複建立就能夠直接使用 多態：同一事物，在不一樣的狀況下表現出不一樣的狀態（也就是多種狀態） 例如：動物是父類，有屬性年齡、體重、自我介紹的方法；子類有狗、貓類，它們都有年齡、體重，可是狗和貓的介紹信息都會重寫父類的。 Animal dog=new Dog(); dog.info(); Animal cat=new Cat();//父類變量指向子類對象,當調用父類變量的方法的時候,它會自動的識別到子類 聲明的時候是: 父類類型 變量名=new 子類類型(); 重寫：若是以爲父對象的成員很差用時，可在本地重寫override父對象的成員 定義構造函數的步驟：1.先定義統一結構2.用new調用構造函數，傳入具體對象的屬性值 14. 用正則去掉字符串先後的空格 var word=" good "; word=word.replace(/(^\s*)|(\s*$)/g,"");// console.log(word); 注意:找所有: /g(global所有), 忽略大小寫: /i (ignore忽略) 15. 減小頁面加載時間的方法(也就是性能優化方法) ① 減小HTTP請求次數（合併文件，合併圖片） ② 優化圖片(將一些背景小圖標整合到一張大圖片) ③ 優化css(壓縮合並CSS，如：margin-top，margin-left……) ④ 網址後面加斜槓(判斷這個是什麼文件類型) ⑤ 標明圖片寬度和高度(若是瀏覽器還沒找到這兩個參數,它會一邊下載圖片,一邊計算圖片的大小,若是圖片不少,瀏覽器須要不斷調整頁面。若是瀏覽器知道這兩個參數，即便圖片暫時沒法顯示，頁面也會騰出圖片的空位，而後繼續加載後面的內容，這樣加載的速度就會加快了) ⑥ 用innerHTML代替DOM操做,減小DOM操做次數 ⑦ 儘可能少的添加事件監聽(也就是減小綁定事件,用冒泡解決) ⑧ JS CSS源碼壓縮 ⑨ 圖片預加載,將樣式表放在頂部,腳本放在底部 ⑩ css、javascript改由外部調用(若是css、js內容比較龐大，儘可能不要寫到同1個頁面中去，改由外部載入比較穩當，由於瀏覽器自己會對css、js文件進行緩存) 16. 談談對ES6的理解 ES6是什麼, 實際上, 它是一種新的JavaScript規範。有十大特性 17. 工廠模式 18. 談談對閉包(Closure)的理解,閉包的形式,優缺點?如何解決內存泄露?哪些操做會形成內存泄露? 閉包是外層函數包裹着受保護的變量和操做變量的內層函數,外層函數將內層函數返回,使用者調用外層函數能夠得到內層函數的對象。 閉包的造成:外層函數的做用域對象沒法被釋放,被內層函數對象$scope引用着沒法釋放。 優勢:即重用變量,又保護變量不被污染。 缺點:比普通函數佔用內存要多,容易形成內存泄露。 解決內存泄露: 將引用內層函數對象的全局變量置爲null,致使內層函數對象被釋放,外層函數做用域對象也被釋放,最後釋放閉包。 形成內存泄露: ① 給DOM對象添加的屬性是一個對象的引用 ② DOM對象和JS對象相互引用 ③ 給DOM對象用attachEvent綁定事件 ④ 從內到外執行appendChild,這時即便調用removeChild也沒法釋放 ⑤ 反覆重寫一個屬性會形成內存大量佔用 例如: 19. 每一個單詞後追加數字如xiaoming,xiaohong變成xiaoming1,xiaohong2 20. 什麼是重載? 重載是相同函數名,不一樣參數列表的多個函數,在調用時,可自動根據傳入的參數不一樣,調用對應的函數執行。 例如：js不支持重載 21. DOM事件綁定和jquery事件綁定 DOM事件綁定： ① elem.addEventListener(「事件名」,fn) ② elem.onclick=function(){} jquery事件綁定5種： ① $().bind/unbind(「事件名」,function(){}) ② $( "parent").delegate/undelegate(「selector」,」事件名」,function(){})//至關於on ③ $().one(「事件名」,function(){}) ④ $("parent").on(「事件名」,function(){}) ⑤ $().事件名(function(){}) //簡化版 6-14通泰商號投資面試題 1.css3的新特性有哪些? 邊框:圓角border-radius、邊框顏色：border-color 背景屬性:指定背景大小background-size以像素或百分比顯示、背景圖像background-image、background-repeat、background-color、background-position 文字效果:文字陰影text-shadow、圖片陰影box-shadow、 顏色:透明度opacity用0到1之間的數來表示 轉換transform 過渡transition 動畫animation 僞類選擇器: :first-child、:last-child、:nth-child(n)、:only-child父元素中惟一的子元素、:empty 2.H5的新特性有哪些? 新增input type10種:Email、url、number、tel、range、search、color、date、month、week 新增的表單元素:progress、datalist、meter、output 新增的表單元素屬性11種:autocomplete、autofocus、placeholder、multiple(容許郵箱輸入多個值) 、form、required、minlength、maxlength、min、max、pattern(正剛表達式) 3. flex流式佈局 Flex是流體盒子,解決浮動問題 父元素屬性:display:flex flex-direction:row(橫向顯示)/row-reverse(橫向相反) column(縱向顯示)/column-reverse(縱向相反) align-items:center/left/right(盒子左中右顯示) justify-content:space-betwwen(兩端對齊) 注:父元素寫上以上屬性,子元素會繼承不用從新寫,父元素只要display:flex,子元素寬和高超出父元素時也不會溢出,會自動壓縮尺寸平均分配擺放. 4. ng原理、特性、傳參、哪些路由，指令 Angular JS (Angular.JS) 是一組用來開發Web頁面的框架、模板以及數據綁定和豐富UI組件。它支持整個開發進程，提供web應用的架構，無需進行手工DOM操做。 AngularJS很小，只有60K，兼容主流瀏覽器，與 jQuery 配合良好。雙向數據綁定多是AngularJS最酷最實用的特性,將MVC的原理展示地淋漓盡致. AngularJS的工做原理是:HTML模板將會被瀏覽器解析到DOM中, DOM結構成爲AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板, 來生成相應的NG指令,全部的指令都負責針對view(即HTML中的ng-model)來設置數據綁定。所以, NG框架是在DOM加載完成以後, 纔開始起做用的 Ng四大特性:1.mvc模式 2.雙向綁定MVVM 3.依賴注入 4.模塊化 A、 Mvc模式 Model(模型):表示應用程序核心(好比數據庫記錄列) 一般模型對象負責在數據庫中存取數據。 View(視圖):顯示數據(數據庫記錄) 一般視圖是依據模型數據建立的。 Controller(控制器):處理輸入(寫入數據庫記錄) 一般控制器負責從視圖讀取數據，控制用戶輸入，並向模型發送數據。 或者能夠這樣說：控制器從視圖層獲取數據，封裝成model，調用後端業務邏輯，渲染視圖 B、雙向綁定: 方向1:model數據綁定到view 方向2:view數據綁定到model 實現方法:只有ngmodel指令綁定以後不管哪一方數據修改,另外一方數據都會自動隨之修改 C、依賴注入：將須要用到的服務依賴注入到當前的控制器 D、模塊化:高內聚低耦合法則 1.官方提供的模塊 ng、ngRoute、ngAnimate、ngTouch 2.用戶自定義的模塊 anguar.module[‘模塊名’,[依賴注入]] Ng路由:ng-Route跳轉、ng-Animate、 ng指令：ngApp、ngInit、ngBind、ngrepeat、ngif、ngshow、nghide、ngsrc ng傳參： 一、 明確發送方和接收方 二、 針對接收方作路由設置 三、 設置接收參數 5. ng應用的步驟: ①引入angular.js腳本文件 ②建立模塊app,調用模塊ngapp ③建立控制器,模塊調用控制器app.controller ④視圖調用控制器ng-controller ⑤定義模型數據$scope.count=10 ⑥ 將內容在視圖顯示ng-view 6.Angular有哪些組件？ Model、controller、view 8.IE瀏覽器事件有哪些? Widow.location 跳轉 ANY.attachEvent(「事件名」,function(){ }) //綁定函數 ANY.detachEvent(「事件名」,function(){ }) //移除函數 9.什麼是混合開發? 優勢:實現"一次開發,多處運行"的機制,只須要編寫一次核心代碼就能夠部署到多個平臺； 兼容多平臺；開發週期快；成本低；代碼維護更新簡單 缺點：用戶體驗不如本地應用；性能稍慢（須要鏈接網絡）；技術還不是很成熟 10. 表單驗證登陸時的用戶名和密碼如何保存下來,能保存多久？ 簡單的說登陸成功後把用戶名和密碼寫session裏,判斷不爲空表示當前登陸成功狀態,爲空表示未登陸。另外也能夠把用戶名直接存cookie,密碼要加密後存且加時間戳,但用session相對會安全些。 11.一個頁面同時請求屢次ajax會出現阻塞，如何處理？ 解決方案： ① 多是ajax請求是同步(open方法的參數中,能夠設置) ② Ajax請求服務器端asp頁面可能使用了session,致使頁面被鎖死.關閉ajax所請求的頁面session(關閉ajax請求的頁面,不是ajax全部的頁面) ③ 不要用session,改成cookie,若是是敏感數據就加密下cooie值 6-16銀澎(好視通)與酷動數碼 1. Bootstrap的用法 Bootstrap 屬於前端 ui 庫，經過現成的ui組件可以迅速搭建前端頁面。主要有如下特色：支持全部主流瀏覽器、12列柵格佈局、響應式設計（響應式佈局，也是它的最大特色，根據窗口調整相應的佈局樣式）、樣式化的文檔以及經常使用的定製的 jQuery 插件等等。由Bootstrap是基於jQuery類庫，因此這裏要用到jQuery。引入順序 先bootstrapSwitch.css（插件樣式）、再jquery-1.8.2.js（jquery類庫）、最後bootstrapSwitch.js（插件所在的類庫）。 刪格佈局使用方法： (1)柵格佈局系統最外層必須是： .container 或者 .container-fluid (2)容器中放置div.row，每行等分爲12份 (3)行中放置div.col，每列須要指定寬度 1/十二、2/12... 響應式的使用： 屏幕的大小：小屏幕（手機，小於768px）、中屏幕（pid，大於768px，小於992px），大屏幕（pc，大於992px，小於1200px） 例：/*中等PC屏幕(Medium - md)：1200px>w>=992px*/ @media screen and (min-width: 992px) and (max-width: 1199px){ .container { width: 970px; } } 優勢：快速搭建前端頁面，方便，代碼都是寫好，直接套用，全程響應式 缺點： 一、對IE678的兼容性可能不太好，由於它使用了一些CSS3樣式和H5的元素，所以若是網站要兼容IE678，這個明顯是不使用的； 二、若是網站有大量多樣化的設計，那麼若是還想使用bootstrap就須要將框架做爲底層修改：須要複寫大量樣式，CSS層次編的混亂，難以維護。 四、 依賴給 HTML 添加 class 來表現，違背了內容和表現分離的原則。 2. bootstrap組件有哪些？ 下拉菜單、按鈕組、按鈕式下拉菜單、輸入框組、麪包屑導航、導航條、路徑導航、分頁、標籤、徽章、巨幕、頁頭、縮略圖、警告框、進度條、媒體對象、列表組、面板等。 3.單頁面的理解 單頁面是指只有一個主頁面的應用，瀏覽器一開始要加載全部必須的 html, js, css。全部的頁面內容都包含在這個所謂的主頁面中。但在寫的時候，仍是會分開寫（頁面片斷），而後在交互的時候由路由程序動態載入。例如angular框架也是一個單頁面 6-19佰仟金融租賃 1. 如何代碼壓縮(也是打包的意思)使用什麼工具?如何對網上js代碼反壓縮? 打包代碼工具：webpack,沒有用到,打包通常組件開發纔會用到,咱們是直接頁面寫JS。 反壓縮代碼:網上的js代碼進行了壓縮,對於開發者來講,讀起來很費勁,能夠經過F12裏的Sources點擊下方的大括號{}圖標來進行反壓縮,這樣就能夠原代碼。 2. git和svn版本控制工具管理代碼的使用? git的使用步驟: ① 開發工具上作好,add添加本地倉庫 ② 從本地倉庫commit提交到本身遠程庫 ③ push推送一份給老大leader ④ 要更新的話就pull拉一份到本身的本地倉庫 簡單:add添加—commit提交—push推送—pull更新 svn的使用步驟:commit提交—push推送—update更新;svn沒有添加,直接提交 3. bug管理用什麼工具(測試人員調試時發現有要bug,如何和前端人員對接)? 方法: ① 用禪道工具,可是不多用,不少測試人員都是把bug記錄在excel裏發過來 ② mercury quality center是一個基於Web的測試BUG管理工具，平臺是測試部那邊搭建在服務器上，在這個平臺上建立一個測試的項目，好比」思迅項目5月份測試」,測試人員會把bug問題點提交到這個平臺，而後開發人員都下載客戶端登陸進去查看，裏面有bug描述、開發人員、測試人員、檢測的時間、嚴重性（通常和較嚴重性）、優先級，修改完後會把狀態改待測試 4. 離線存儲方式有哪些?cookie和WebStorage區別 離線存儲方式:cookie、WebStorage、LocalStorage sessionStorage和localStorag區別: sessionStorage和localStorage是HTML5WebStorageAPI提供的 sessionStorage是會話存儲，瀏覽器關閉後，數據會所有刪除； localStorage是本地存儲，瀏覽器關閉後重啓數據不會被刪除，除非是手動刪除 session和cookie區別: ① cookie數據存放在客戶的瀏覽器上；session數據放在服務器 ② cookie不是很安全,考慮到安全應當使用session ③ session會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能。考慮到減輕服務器性能方面，應當使用cookie ④ cookie存儲大小有限制,數據不能超過4k；session雖然也有存儲大小限制,可是比cookie大得多,能夠達到5M或更大 ⑤ 因此我的建議像登陸等重要信息要存放在session,其它信息若是須要保留,能夠放在cookie中 5. js建立對象的幾種方法(一共4種)？ ① var obj={}; ② var obj=new object(); ③ 構造函數方式:this.sname=sname ④ 原型方法:利用對象prototype屬性 6. 聲明變量有幾種方法? ES5 只有兩種聲明變量的方法：var命令和function命令。 ES6 除了添加let和const命令，還有兩種聲明變量的方法：import命令和class命令 (1) var命令 var a ;//undefine var b = 1; (2)function命令 function add(a) { var sum = a + 1; return sum; } (3) cosnt命令 const a; //報錯，必須初始化 const b = 1; (4) let命令 let a; //undefined let b = 1; function add(b) { let sum = b + 1; return sum; } let c = add(b); (5) import命令 import globals from '@/utils/globals.js' //把模塊默認的導出值放入變量 globals（一個文件能夠理解爲一個模塊） (6) class命令 class student{ constructor(name , age) {//只要觸發new實例化操做即執行 this.name = name; this.age = age; } //注意在class類中，方法之間不須要添加逗號 showName(){ return `個人名字:${this.name}`; } showAge(){ return `個人年齡:${this.age}`; } } var lilei = new student ('lilei' , 20); console.log(lilei); 6-20友趣信息科技 實現div水平垂直居中方法? 1.position+transform絕對定位方法：不肯定當前div的寬度和高度(子元素)，採用 transform: translate(-50%,-50%); 當前div的父級添加相對定位（position: relative;） div{ background:red; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); } 2.position絕對定位方法：肯定了當前div的寬度(子元素)，margin值爲當前div寬度一半的負值 div{ width:600px; height: 600px; background:red; position: absolute; left:50%; top:50%; margin-left:-300px; // 這是重點 margin-top:-300px; // 這是重點 } 3. 絕對定位方法：肯定了當前div的寬度(子元素)，絕對定位下top left right bottom 都設置0
我是子級
/**css**/ div.child{ width: 600px; height: 600px; background: red; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; } 4.flex佈局方法：當前div的父級添加flex css樣式,不肯定寬高 .parent{ width: 400px; height: 400px; background: blue; display: flex; align-items: center; justify-content: center; } .child{ width: 100px; height: 100px; background: red; } 5.table-cell方法: 容器設爲display:table然他成爲一個塊級表格元素，子元素display:table-cell使子元素成爲表格單元格，而後就像在表格裏同樣，給子元素加個vertical-align: middle就好了
html, body { height: 100%; width: 100%; margin: 0; } .box { display: table; height: 100%; width: 100%; } .content { display: table-cell; vertical-align: middle; text-align: center; } .inner { background-color: #000; display: inline-block; width: 200px; height: 200px; } 12-12你我金融與寶瑞明科技 ⑦ 編寫一個函數,該函數一個字符串中找到可能最長的子字符串,且該字符串是由同一字符組成的。如：aaaabbccd中最長子字符串是aaaa。 思路： 字符串分割 循環斷定，暫存較大值 循環結束，返回最大值變量的長度 function findLongestWord(str) { var newArr = str.split(" "), maxStr = newArr[0]; for(var i=0;i maxStr.length) maxStr = newArr[i]; } return maxStr.length; } ⑧ 前端框架都有哪些？ Bootstrap、angular、react、ionic、vue、Amaze UI、MUI等6種 ⑨ 談談對http（超文本傳輸協議）的認識？ 1. http事物是指從客戶端（IE）向服務器端發送http請求，再由服務器將響應的內容返回給客戶端的一個過程。 2.http連接是經過tcp連接，首先客戶端會打開一條連向服務器端的連接，而後開始發送http請求，接着由服務器返發響應的內容，當客戶端接受後就斷開此連接，這樣一次客戶端與服務器端的通訊就結束了。 3.http中的方法分爲5種：增（PUT）、刪(DELETE)、改(POST)、查(GET)、HEAD 4.http報文：由客戶端向服務器端發送的http請求和從服務器端發送到客戶端響應的內容都是http報文，其格式爲：起始行、頭部（HEAD）、主體(BODY) 5.MIME（多用途網絡郵箱擴展）類型：對象類型/特定子類型，如:image/png，經過fiddler可在http請求的起始行中看到。 6.發送http請求的目的是爲了請求某一資源，而後由服務器返回客戶端須要的資源，客戶端（IE）經過解析將其顯示出來，這裏的資源是如何標識的呢？實際上是經過URI(Uniform Resource Identifier)統一資源標識符，其主要有2中形式：URL（統一資源定位符）和URN（統一資源名稱），目前最經常使用的是URL。 7.Node.js的有哪些特色？ Node.js是一個基於Chrome v8引擎創建的JavaScript運行平臺，用於搭建響應速度快、易於擴展的網絡應用。 Node.js如下特色： 1. 它是一個Javascript運行環境 2. 依賴於Chrome V8引擎進行代碼解釋 3. 事件驅動 4. 非阻塞I/O（Input/Output 輸入/輸出） 5. 輕量、可伸縮，適於實時數據交互應用 6. 單進程，單線程（最大的特色之一） 7. 跨平臺(node.js在mac系統上、Windows上面和Linux這些上面，均可以運行，它已經開發除了對應的運行環境了) Node.js很像摳門的餐廳老闆，只聘請1個服務員，服務不少人。結果，比不少服務員效率還高。（單線程的優勢） Node.js中全部的I/O都是異步的，回調函數，套回調函數。 單線程這一點是node.js比較大的一個特色。它能夠開發出高效的後臺應用（網絡應用）。 8.ES6有哪些特性？ ES6，正式名稱是ECMAScript2015，可是ES6這個名稱更加簡潔。ES6是JavaScript一種標準規範，可是它已經普遍用於編程實踐中，它包含了一些很棒的新特性，能夠更加方便的實現不少複雜的操做，提升開發人員的效率。 如下是ES6排名前十的最佳特性列表（排名不分前後）： 1. Default Parameters（函數參數默認值） in ES6 2. Template Literals （模板字符串）in ES6 3. Multi-line Strings （多行字符串）in ES6 4. Destructuring Assignment （解構賦值）in ES6 5. Enhanced Object Literals （對象屬性簡寫）in ES6 6. Arrow Functions （箭頭函數）in ES6 7. Promises in ES6（Promises模式） 8. Block-Scoped Constructs Let and Const（塊做用域構造Let and Const） 9. Classes（類） in ES6 10. Modules（模塊） in ES6 詳細解釋一下: https://www.cnblogs.com/Wayou/p/es6_new_features.html 12-18珍愛網面試題 1.304狀態碼是什麼？什麼狀況下出現 ？ 3開頭都是重定向。304是未修改，爲了提高性能，會把一些頁面，或者數據存入緩存。當未修改時，再次訪問該頁面，就會直接去緩存中取。這時候服務器就會返回304狀態碼。 2.頁面緩存問題怎麼解決？ 頁面緩存的問題你們都遇到過，不少功能作完沒起效果，解決方法對於一個html頁面，緩存分3部分，一個是頁面內容，一個是css樣式，一個是JS文件。 一、避免頁面html內容緩存 PS：清除瀏覽器中的緩存，它和其它幾句合起來用，就可使你再次進入曾經訪問過的頁面時，ie瀏覽器必須從服務端下載最新的內容，達到刷新的效果。 二、CSS和JS文件 改爲 當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。 href是Hypertext Reference的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，若是咱們在文檔中添加 那麼瀏覽器會識別該文檔爲css文件，就會並行下載資源而且不會中止對當前文檔的處理。這也是爲何建議使用link方式來加載css，而不是使用@import方式。 12. 變量和函數聲明提早的理解?(見有道筆記) 13. 經常使用的網絡協議有哪些? 分別有HTTP和WebSocket HTTP和WebSocket異同點： 相同點： 1. 創建在TCP之上，經過TCP協議來傳輸數據; 2. 都是可靠性傳輸協議(也就是三次握手，100%能傳到的，保證數據不會丟失)。 不一樣點: 1. WebSocket是HTML5中的協議(雙向通訊協議, 客戶端和服務器能夠向對方主動發送和接受數據，好比微信聊天，我發信息給好友，服務器接收到數據，而後主動把信息發給好友)，支持持久鏈接(除非本身關閉頁面或是點擊關閉按鈕)，Http不支持持久鏈接(一次請求一次響應，服務器不會主動發送信息, 只有客戶端發起請求，服務器纔會返回數據); 2. Http是單向協議，一次請求一次響應，服務器不會主動發送信息, 只有客戶端發起請求，服務器纔會返回數據。 14. Vue如何搭建項目? 1、安裝node環境 1.下載node； 2.檢查node是否安裝成功：若是能輸出版本號node-v，說明node安裝成功； 3.爲了提升效率，能夠安裝yarn； 4.檢查yarn是否安裝成功：若是能輸出版本號yarn-v，說明yarn安裝成功。 2、搭建vue項目環境 1.安裝vue npm install vue 2.全局安裝vue腳手架 yarn install --global vue-cli 3.建立一個基於 webpack 模板的新項目 $ vue init webpack test03 ? Project name (test03) test03 ? Project description this is test03 ? Author tingting ? Install vue-router? (Y/n) y ? Use ESLint to lint your code? (Y/n) n //用來規範代碼,好比空格之類，不按規範就報錯 ? Set up unit tests (Y/n) n //測試用的 ? Setup e2e tests with Nightwatch? (Y/n) n 4. 進入項目test03 cd test03 5. 進行安裝依賴(也就是node_modules文件夾) yarn install 6. 將項目運行起來 yarn start（至關於npm run dev） 7. 配置完打開會顯示vue的首頁 15. yarn優勢?與npm的區別？ 優勢： 1. 速度快。npm要等當前package安裝完成以後才能繼續後面的安裝;yarn是同步執行全部任務,提升了性能. 2. 更簡潔的輸出。npm輸出信息比較長，在執行install時，命令行會不斷打印出全部被安裝上的依賴；yarn只打印必要的信息. 3. 更好的語義化。yarn改變了一些npm的名稱，好比yarn add(安裝)/remove(移除),感受比npm install(安裝)/uninstall(移除)更清晰. 16. vue-router路由懶加載(解決vue項目首次加載慢)? 懶加載, 也叫延遲加載，即在須要的時候進行加載，隨用隨載。 爲何須要懶加載？ 像vue這種單頁面應用，若是沒有應用懶加載，運用webpack打包後的文件將會異常的大，形成進入首頁時，須要加載的內容過多，時間過長，會出啊先長時間的白屏，即便作了loading也是不利於用戶體驗，而運用懶加載則能夠將頁面進行劃分，須要的時候加載頁面，能夠有效的分擔首頁所承擔的加載壓力，減小首頁加載用時, 簡單的說就是：進入首頁不用一次加載過多資源形成用時過長！！！ 如何實現？懶加載寫法： 非懶加載的路由配置： 17. 移動端適配方法? 1. 百分比+彈性盒佈局display:flex 兼容性問題考慮一下，彈性盒的集中兼容寫法注意一下，手機端感受是各類通用的，瀏覽器兼容通常，要把瀏覽器內核寫上(好比:display:-webkit-box;display:flex;-webkit-box-align:center;)，主流OK的，可是IE10如下估計完蛋。 2.直接使用如下三句話標籤 3. 使用css3的媒體查詢(rem佈局) 首先rem是指相對於根元素的字體大小的單位，因此能夠經過設置html的字體大小來能夠控制rem的大小 18.對px/em/rem理解? px和em的區別：px 和em都是長度單位。px是固定的,容易計算；em是不固定的,是相對單位,相對於父元素的字體大小來調整。 rem： 1 rem等於html根元素設定的font-size的px值。rem不是固定的,是相對單位，相對於根元素字體大小來調整。經過js修改根元素的大小，達到整個頁面的縮放。rem可實現移動端自適應，適配各類移動設備。 好比：html{font-size:14px;} 那麼後面的CSS裏面的rem值則是以這個14來換算，例如設定一個div寬度爲3rem,高度爲2rem.則它換算成px爲width:42px.height:28px，同理，假如一個設計稿爲寬度42px,高度爲28px，則換成成rem，則是42/14=3rem，28/14=2rem。 19.瀏覽器兼容性問題,各瀏覽器之間的差別? 因爲不一樣瀏覽器顯示頁面效果不一樣, 能夠CSS hack解決瀏覽器問題,也就是針對不一樣的瀏覽器編寫不一樣的CSS;另外也能夠用margin和padding統一初始化css樣式解決. 實現方式: 1. css類內部Hack 在樣式屬性名或值的先後增長先後綴以便識別不一樣的瀏覽器 如:firfox:-moz-(瀏覽器前綴) Chrome&safari:-webkit- Opera:-o- IE:-ms- 2. 選擇器Hack 在選擇器前增長前綴以便識別不一樣的瀏覽器 如: *:IE6識別 *+:IE7識別 */*+div{background-color:green;} 3. HTML頭部引用Hack(使用IE 條件註釋,來解決兼容性問題) 能夠經過判斷版本、條件來實現，語法: 要執行的內容 版本： ① 能夠用版原本判斷 如:
只在IE6中執行內容 條件： ② 1.gt 2.lt 3.gte大於等於 4.lte小於等於 5.!除什麼版本之外,其它都能顯示
只在IE6以上執行內容 4. 好比說有些樣式，在安卓機有些bug,就要在頁面用js代碼判斷當前設備是安卓，就執行修復的代碼 各瀏覽器的之間的差別:主要是內核不一樣 Ie內核:Trident 兼容性好 Firefox內核:Gecko Chrome和safari內核:webkit 瀏覽速度快 Opera內核:presto Vue生命週期面試題 一、什麼是vue生命週期？ 答： Vue 實例從建立到銷燬的過程，就是生命週期。也就是從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，咱們稱這是 Vue 的生命週期。 二、vue生命週期的做用是什麼？ 答：它的生命週期中有多個事件鉤子，讓咱們在控制整個Vue實例的過程時更容易造成好的邏輯。 三、vue生命週期總共有幾個階段？ 答：它能夠總共分爲8個階段：建立前/後, 載入前/後,更新前/後,銷燬前/銷燬後 建立前/後： 在beforeCreated階段，vue實例的掛載元素$el和數據對象data都爲undefined，還未初始化。在created階段，vue實例的數據對象data有了，$el尚未。 載入前/後：在beforeMount階段，vue實例的$el和data都初始化了，但仍是掛載以前爲虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。 更新前/後：當data變化時，會觸發beforeUpdate和updated方法。 銷燬前/後：在執行beforeDestroy銷燬以前調用,vue實例仍然還可用。在執行destroy方法後，對data的改變不會再觸發周期函數，此時vue實例已經解除了事件監聽以及和dom的綁定，可是dom結構依然存在。 四、第一次頁面加載會觸發哪幾個鉤子？ 答：第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子。 五、DOM 渲染在 哪一個週期中就已經完成？ 答：DOM 渲染在 mounted 中就已經完成了。 六、簡單描述每一個週期具體適合哪些場景？ 答：生命週期鉤子的一些使用方法： Beforecreate建立前 : 能夠在這加個loading事件，在加載實例時觸發 Created建立後 : 初始化完成時的事件寫在這裏，如在這結束loading事件，異步請求也適宜在這裏調用 mounted 加載完成後: 掛載元素，獲取到DOM節點 updated更新完成後 : 若是對數據統一處理，在這裏寫上相應函數 beforeDestroy銷燬前 : 能夠作一個確認中止事件的確認框 nextTick : 更新數據後當即操做dom. 20.pop()、push()、shift()、unshift()的區別? pop()該方法能夠刪除數組的最後一個元素,並將被刪除的元素做爲返回值返回 shift()能夠刪除數組的第一個元素，並將被刪除的元素做爲返回值返回 push()該方法能夠向數組的末尾添加一個或多個元素，並返回新的數組長度 unshift()向數組開頭添加一個或多個元素，並返回新的數組長度,向前邊插入元素之後，其餘的元素索引會依次調整. 21.js和jq獲取屬性？js獲取元素先後節點？ js獲取屬性值: var value=elem.getAttribute("屬性名") 修改屬性值: elem.setAttribute("屬性名","值") jq獲取屬性:$("選擇器").attr("屬性名"); 修改屬性: $("選擇器").attr("屬性名","值"); 按節點關係查找: 節點樹：包含一切節點的樹結構(空格也包括在內) 父子關係: node.parentNode 得到node的父節點 node.childNodes 得到node的全部直接子節點 node.firstChild 得到node下第一個子節點 node.lastChild 得到node下最後一個子節點 兄弟關係: node.previousSibling 得到node前一個兄弟 node.nextSibling 得到node的下一個兄弟 22. git版本的回退? 回退到上一個版本：git reset --hard HEAD^ 回退到上上一個版本：git reset --hard HEAD^^ 回退到前100個版本：git reset --hard HEAD~100 23. 父子組件的通訊? ● props (父——>子) 父組件向子組件傳遞一個信息 ● $emit (子——>父) 子組件向父組件傳遞信息 ● slot (父——>子) 父組件向子組件傳遞多個信息，用插槽 ● $parent (子——>父) 子組件修改父組件數據 this.$parent.msg; // msg是data數據,子獲取父的數據 this.$parent.fun(); // fun()是父的方法,子獲取父的方法 ● $ref (父——>子) 父組件修改子組件數據 24. vue兄弟間的通訊(非父子)? ~ 建立事件中心 ~ bus.$emit 發送數據 ~ bus.$on 監聽並接受數據 例: 若是2個組件不是父子組件那麼如何通訊呢?能夠經過eventHub來實現通訊. 所謂eventHub就是建立一個事件中心,至關於中轉站,能夠用它來傳遞事件和接收事件. 1. let Hub = new Vue(); // 建立事件中心 2. 組件1觸發:
methods: { eve() { Hub.$emit('change','hehe'); //Hub觸發事件 } } 3. 組件2觸發:
created() { Hub.$on('change', () => { //Hub接收事件 this.msg = 'hehe'; }); } 25. 子組件要怎麼獲取元素下下的子元素的值? 能夠經過父組件用refs操做DOM節點來獲取. vue是數據驅動的，通常都不會直接操做dom. 例子: 26. vue如何將後臺的數據一次性分列渲染而不是一個個渲染? 27. 對象淺拷貝和深拷貝有什麼區別? 在 JS 中，除了基本數據類型，還存在對象、數組這種引用類型。基本數據類型，拷貝是直接拷貝變量的值，而引用類型拷貝的實際上是變量的地址。 let o1 = {a: 1} let o2 = o1; 在這種狀況下，若是改變 o1 或 o2 其中一個值的話，另外一個也會變，由於它們都指向同一個地址。 o2.a = 3 console.log(o1.a) // 3 而淺拷貝和深拷貝就是在這個基礎之上作的區分，若是在拷貝這個對象的時候，只對基本數據類型進行了拷貝，而對引用數據類型只是進行了引用的傳遞，而沒有從新建立一個新的對象，則認爲是淺拷貝。反之，在對引用數據類型進行拷貝的時候，建立了一個新的對象，而且複製其內的成員變量，則認爲是深拷貝。 區分深拷貝與淺拷貝簡單點來講，就是假設B複製了A，當修改A時，看B是否會發生變化，若是B也跟着變了，說明這是淺拷貝，拿人手短，若是B沒變，那就是深拷貝，自食其力。 Object.assign()方法： 特色：淺拷貝、對象屬性的合併 var nObj = Object.assign({},obj,obj1);//Object.assign方法的第一個參數是目標對象，後面的參數都是源對象，花括號叫目標對象，後面的obj、obj1是源對象。對象合併是指：將源對象裏面的屬性添加到目標對象中去，若二者的屬性名有衝突，後面的將會覆蓋前面的 Object.assign()方法用法： 1.合併多個對象 2.克隆對象(淺) 3.爲對象添加多個方法 地址：https://blog.csdn.net/qq_30100043/article/details/53422657 28. var、let、const的區別? const是常量,變量一旦被賦值,就不能再改變; var 和 let的區別： 1.var定義變量是函數做用域（全局），let定義是塊級做用域（局部）； 2.var定義之後能夠修改，未初始化會輸出undefined，不會報錯。let未定義就輸出則會報錯直接報錯：ReferenceError: 3. 若是在函數的for裏面定義，let只在這個for裏面有效。var是在整個函數裏面有效。 4. 重複聲明一個變量時。var會覆蓋上一個變量的賦值，而let則會報錯你已經定義過了。 28.v-if與v-show的區別? 二者都判斷元素顯示與隱藏 v-if 元素是否移除或者插入,不適合頻繁切換 v-show 元素是否顯示和隱藏（隱藏仍是有標籤） 29. 說出至少4種vue當中的指令和它的用法？ v-if：判斷是否隱藏；v-show : 判斷是否隱藏；v-for：數據循環出來；v-bind:/class：綁定一個屬性；v-model：實現雙向綁定; 30. vue如何理解v-model雙向綁定? v-model 指令在表單
、
