PNG

有PNG8和truecolor PNG

PNG8類似GIF顏色上限為256宫蛆，文件小茸俭，支持alpha透明度，無動畫

適合圖標肤晓、背景爷贫、按鈕

18、行內元素float:left后是否變?yōu)閴K級元素补憾？

浮動后漫萄，行內元素不會成為塊狀元素，但是可以設置寬高盈匾。行內元素要想變成塊狀元素腾务，占一行，直接設置display:block;削饵。但如果元素設置了浮動后再設置display:block;那就不會占一行岩瘦。

19、在網頁中的應該使用奇數(shù)還是偶數(shù)的字體葵孤？為什么呢担钮？

偶數(shù)字號相對更容易和 web 設計的其他部分構成比例關系

20、::before 和 :after中雙冒號和單冒號 有什么區(qū)別尤仍？解釋一下這2個偽元素的作用

單冒號(:)用于CSS3偽類箫津，雙冒號(::)用于CSS3偽元素

用于區(qū)分偽類和偽元素

21、如果需要手動寫動畫，你認為最小時間間隔是多久苏遥，為什么饼拍？（阿里）

多數(shù)顯示器默認頻率是60Hz，即1秒刷新60次田炭，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms

22师抄、CSS合并方法

避免使用@import引入多個css文件，可以使用CSS工具將CSS合并為一個CSS文件教硫，例如使用Sass\Compass等

23叨吮、CSS不同選擇器的權重(CSS層疊的規(guī)則)

！important規(guī)則最重要瞬矩，大于其它規(guī)則

行內樣式規(guī)則茶鉴，加1000

對于選擇器中給定的各個ID屬性值，加100

對于選擇器中給定的各個類屬性景用、屬性選擇器或者偽類選擇器涵叮，加10

對于選擇其中給定的各個元素標簽選擇器，加1

如果權值一樣伞插，則按照樣式規(guī)則的先后順序來應用割粮，順序靠后的覆蓋靠前的規(guī)則

24、列出你所知道可以改變頁面布局的屬性

position媚污、display舀瓢、float、width杠步、height氢伟、margin、padding幽歼、top、left谬盐、right甸私、`

25、CSS在性能優(yōu)化方面的實踐

css壓縮與合并飞傀、Gzip壓縮

css文件放在head里皇型、不要用@import

盡量用縮寫、避免用濾鏡砸烦、合理使用選擇器

26弃鸦、CSS3動畫（簡單動畫的實現(xiàn)，如旋轉等）

依靠CSS3中提出的三個屬性：transition幢痘、transform唬格、animation

transition：定義了元素在變化過程中是怎么樣的，包含transition-property、transition-duration购岗、transition-timing-function汰聋、transition-delay。

transform：定義元素的變化結果喊积，包含rotate烹困、scale、skew乾吻、translate髓梅。

animation：動畫定義了動作的每一幀（@keyframes）有什么效果，包括animation-name绎签，animation-duration女淑、animation-timing-function、animation-delay辜御、animation-iteration-count鸭你、animation-direction

27、base64的原理及優(yōu)缺點

優(yōu)點可以加密擒权，減少了http請求

缺點是需要消耗CPU進行編解碼

28袱巨、幾種常見的CSS布局

流體布局

.left{float: left;width:100px;height:200px;background: red;? ? }.right{float: right;width:200px;height:200px;background: blue;? ? }.main{margin-left:120px;margin-right:220px;height:200px;background: green;? ? }

圣杯布局

.container{margin-left:120px;margin-right:220px;? ? ? ? }.main{float: left;width:100%;height:300px;background: green;? ? ? ? }.left{position: relative;left: -120px;float: left;height:300px;width:100px;margin-left: -100%;background: red;? ? ? ? }.right{position: relative;right: -220px;float: right;height:300px;width:200px;margin-left: -200px;background: blue;? ? ? ? }

雙飛翼布局

.content{float: left;width:100%;? ? ? ? }.main{height:200px;margin-left:110px;margin-right:220px;background: green;? ? ? ? }.main::after{content:'';display: block;font-size:0;height:0;zoom:1;clear: both;? ? ? ? }.left{float:left;height:200px;width:100px;margin-left: -100%;background: red;? ? ? ? }.right{float: right;height:200px;width:200px;margin-left: -200px;background: blue;? ? ? ? }

29、stylus/sass/less區(qū)別

均具有“變量”碳抄、“混合”愉老、“嵌套”、“繼承”剖效、“顏色混合”五大基本特性

Scss和LESS語法較為嚴謹嫉入，LESS要求一定要使用大括號“{}”，Scss和Stylus可以通過縮進表示層次與嵌套關系

Scss無全局變量的概念璧尸，LESS和Stylus有類似于其它語言的作用域概念

Sass是基于Ruby語言的咒林，而LESS和Stylus可以基于NodeJS?NPM下載相應庫后進行編譯；

30爷光、postcss的作用

可以直觀的理解為：它就是一個平臺垫竞。為什么說它是一個平臺呢？因為我們直接用它蛀序，感覺不能干什么事情欢瞪，但是如果讓一些插件在它上面跑，那么將會很強大

PostCSS?提供了一個解析器徐裸，它能夠將?CSS?解析成抽象語法樹

通過在?PostCSS?這個平臺上遣鼓，我們能夠開發(fā)一些插件，來處理我們的CSS重贺，比如熱門的：autoprefixer

postcss可以對sass處理過后的css再處理 最常見的就是autoprefixer

$JavaScript

1骑祟、閉包

閉包就是能夠讀取其他函數(shù)內部變量的函數(shù)

閉包是指有權訪問另一個函數(shù)作用域中變量的函數(shù)回懦，創(chuàng)建閉包的最常見的方式就是在一個函數(shù)內創(chuàng)建另一個函數(shù)，通過另一個函數(shù)訪問這個函數(shù)的局部變量,利用閉包可以突破作用鏈域

閉包的特性：

函數(shù)內再嵌套函數(shù)

內部函數(shù)可以引用外層的參數(shù)和變量

參數(shù)和變量不會被垃圾回收機制回收

說說你對閉包的理解

使用閉包主要是為了設計私有的方法和變量曾我。閉包的優(yōu)點是可以避免全局變量的污染粉怕，缺點是閉包會常駐內存，會增大內存使用量抒巢，使用不當很容易造成內存泄露贫贝。在js中，函數(shù)即閉包蛉谜，只有函數(shù)才會產生作用域的概念

閉包 的最大用處有兩個稚晚，一個是可以讀取函數(shù)內部的變量，另一個就是讓這些變量始終保持在內存中

閉包的另一個用處型诚，是封裝對象的私有屬性和私有方法

好處：能夠實現(xiàn)封裝和緩存等客燕；

壞處：就是消耗內存、不正當使用會造成內存溢出的問題

使用閉包的注意點

由于閉包會使得函數(shù)中的變量都被保存在內存中狰贯，內存消耗很大也搓，所以不能濫用閉包，否則會造成網頁的性能問題涵紊，在IE中可能導致內存泄露

解決方法是傍妒，在退出函數(shù)之前，將不使用的局部變量全部刪除

2摸柄、說說你對作用域鏈的理解

作用域鏈的作用是保證執(zhí)行環(huán)境里有權訪問的變量和函數(shù)是有序的颤练，作用域鏈的變量只能向上訪問，變量訪問到window對象即被終止驱负，作用域鏈向下訪問變量是不被允許的

簡單的說嗦玖，作用域就是變量與函數(shù)的可訪問范圍，即作用域控制著變量與函數(shù)的可見性和生命周期

3跃脊、JavaScript原型宇挫，原型鏈 ? 有什么特點？

每個對象都會在其內部初始化一個屬性匾乓，就是prototype(原型)捞稿，當我們訪問一個對象的屬性時

如果這個對象內部不存在這個屬性，那么他就會去prototype里找這個屬性拼缝，這個prototype又會有自己的prototype，于是就這樣一直找下去彰亥，也就是我們平時所說的原型鏈的概念

關系：instance.constructor.prototype = instance.__proto__

特點：

JavaScript對象是通過引用來傳遞的咧七，我們創(chuàng)建的每個新對象實體中并沒有一份屬于自己的原型副本。當我們修改原型時任斋，與之相關的對象也會繼承這一改變

當我們需要一個屬性的時继阻，Javascript引擎會先看當前對象中是否有這個屬性， 如果沒有的

就會查找他的Prototype對象是否有這個屬性，如此遞推下去瘟檩，一直檢索到?Object?內建對象

4抹缕、請解釋什么是事件代理

事件代理（Event Delegation），又稱之為事件委托墨辛。是?JavaScript?中常用綁定事件的常用技巧卓研。顧名思義，“事件代理”即是把原本需要綁定的事件委托給父元素睹簇，讓父元素擔當事件監(jiān)聽的職務奏赘。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是可以提高性能

可以大量節(jié)省內存占用太惠，減少事件注冊磨淌，比如在table上代理所有td的click事件就非常棒

可以實現(xiàn)當新增子對象時無需再次對其綁定

5、Javascript如何實現(xiàn)繼承凿渊？

構造繼承

原型繼承

實例繼承

拷貝繼承

原型prototype機制或apply和call方法去實現(xiàn)較簡單梁只，建議使用構造函數(shù)與原型混合方式

functionParent(){this.name ='wang';? ? }functionChild(){this.age =28;? ? }? ? Child.prototype =newParent();//繼承了Parent，通過原型vardemo =newChild();? ? alert(demo.age);? ? alert(demo.name);//得到被繼承的屬性}

6埃脏、談談This對象的理解

this總是指向函數(shù)的直接調用者（而非間接調用者）

如果有new關鍵字搪锣，this指向new出來的那個對象

在事件中，this指向觸發(fā)這個事件的對象剂癌，特殊的是淤翔，IE中的attachEvent中的this總是指向全局對象Window

7、事件模型

W3C中定義事件的發(fā)生經歷三個階段：捕獲階段（capturing）佩谷、目標階段（targetin）旁壮、冒泡階段（bubbling）

冒泡型事件：當你使用事件冒泡時，子級元素先觸發(fā)谐檀，父級元素后觸發(fā)

捕獲型事件：當你使用事件捕獲時抡谐，父級元素先觸發(fā)，子級元素后觸發(fā)

DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件

阻止冒泡：在W3c中桐猬，使用stopPropagation（）方法麦撵；在IE下設置cancelBubble = true

阻止捕獲：阻止事件的默認行為，例如click -?后的跳轉溃肪。在W3c中免胃，使用preventDefault（）方法，在IE下設置window.event.returnValue = false

8惫撰、new操作符具體干了什么呢?

創(chuàng)建一個空對象羔沙，并且?this?變量引用該對象，同時還繼承了該函數(shù)的原型

屬性和方法被加入到?this?引用的對象中

新創(chuàng)建的對象由?this?所引用厨钻，并且最后隱式的返回?this

9扼雏、Ajax原理

Ajax的原理簡單來說是在用戶和服務器之間加了—個中間層(AJAX引擎)坚嗜，通過XmlHttpRequest對象來向服務器發(fā)異步請求，從服務器獲得數(shù)據诗充，然后用javascript來操作DOM而更新頁面苍蔬。使用戶操作與服務器響應異步化。這其中最關鍵的一步就是從服務器獲得請求數(shù)據

Ajax的過程只涉及JavaScript蝴蜓、XMLHttpRequest和DOM碟绑。XMLHttpRequest是ajax的核心機制

// 1. 創(chuàng)建連接varxhr =null;? ? xhr =newXMLHttpRequest()// 2. 連接服務器xhr.open('get', url,true)// 3. 發(fā)送請求xhr.send(null);// 4. 接受請求xhr.onreadystatechange =function(){if(xhr.readyState ==4){if(xhr.status ==200){? ? ? ? ? ? ? ? success(xhr.responseText);? ? ? ? ? ? }else{// failfail && fail(xhr.status);? ? ? ? ? ? }? ? ? ? }? ? }

ajax 有那些優(yōu)缺點?

優(yōu)點：

通過異步模式，提升了用戶體驗.

優(yōu)化了瀏覽器和服務器之間的傳輸励翼，減少不必要的數(shù)據往返蜈敢，減少了帶寬占用.

Ajax在客戶端運行，承擔了一部分本來由服務器承擔的工作汽抚，減少了大用戶量下的服務器負載抓狭。

Ajax可以實現(xiàn)動態(tài)不刷新（局部刷新）

缺點：

安全問題?AJAX暴露了與服務器交互的細節(jié)。

對搜索引擎的支持比較弱造烁。

不容易調試否过。

10、如何解決跨域問題?

jsonp惭蟋、?iframe苗桂、window.name、window.postMessage告组、服務器上設置代理頁面

11煤伟、模塊化開發(fā)怎么做？

立即執(zhí)行函數(shù),不暴露私有成員

varmodule1 = (function(){var_count =0;varm1 =function(){//...};varm2 =function(){//...};return{m1: m1,m2: m2　　　　};　　})();

12木缝、異步加載JS的方式有哪些便锨？

defer，只支持IE

async：

創(chuàng)建script我碟，插入到DOM中放案，加載完畢后callBack

13、那些操作會造成內存泄漏矫俺？

內存泄漏指任何對象在您不再擁有或需要它之后仍然存在

setTimeout?的第一個參數(shù)使用字符串而非函數(shù)的話吱殉，會引發(fā)內存泄漏

閉包使用不當

14、XML和JSON的區(qū)別厘托？

數(shù)據體積方面

JSON相對于XML來講友雳，數(shù)據的體積小，傳遞的速度更快些铅匹。

數(shù)據交互方面

JSON與JavaScript的交互更加方便沥阱，更容易解析處理，更好的數(shù)據交互

數(shù)據描述方面

JSON對數(shù)據的描述性比XML較差

傳輸速度方面

JSON的速度要遠遠快于XML

15伊群、談談你對webpack的看法

WebPack?是一個模塊打包工具考杉，你可以使用WebPack管理你的模塊依賴，并編繹輸出模塊們所需的靜態(tài)文件舰始。它能夠很好地管理崇棠、打包Web開發(fā)中所用到的HTML、Javascript丸卷、CSS以及各種靜態(tài)文件（圖片枕稀、字體等），讓開發(fā)過程更加高效谜嫉。對于不同類型的資源萎坷，webpack有對應的模塊加載器。webpack模塊打包器會分析模塊間的依賴關系沐兰，最后 生成了優(yōu)化且合并后的靜態(tài)資源

16哆档、說說你對AMD和Commonjs的理解

CommonJS是服務器端模塊的規(guī)范，Node.js采用了這個規(guī)范住闯。CommonJS規(guī)范加載模塊是同步的瓜浸，也就是說，只有加載完成比原，才能執(zhí)行后面的操作插佛。AMD規(guī)范則是非同步加載模塊，允許指定回調函數(shù)

AMD推薦的風格通過返回一個對象做為模塊對象量窘，CommonJS的風格通過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的

17雇寇、常見web安全及防護原理

sql注入原理

就是通過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執(zhí)行惡意的SQL命令

總的來說有以下幾點

永遠不要信任用戶的輸入蚌铜，要對用戶的輸入進行校驗锨侯，可以通過正則表達式，或限制長度厘线，對單引號和雙"-"進行轉換等

永遠不要使用動態(tài)拼裝SQL识腿，可以使用參數(shù)化的SQL或者直接使用存儲過程進行數(shù)據查詢存取

永遠不要使用管理員權限的數(shù)據庫連接，為每個應用使用單獨的權限有限的數(shù)據庫連接

不要把機密信息明文存放造壮，請加密或者hash掉密碼和敏感的信息

XSS原理及防范

Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面里插入惡意html標簽或者javascript代碼渡讼。比如：攻擊者在論壇中放一個看似安全的鏈接，騙取用戶點擊后耳璧，竊取cookie中的用戶私密信息成箫；或者攻擊者在論壇中加一個惡意表單，當用戶提交表單的時候旨枯，卻把信息傳送到攻擊者的服務器中蹬昌，而不是用戶原本以為的信任站點

XSS防范方法

首先代碼里對用戶輸入的地方和變量都需要仔細檢查長度和對”<”,”>”,”;”,”’”等字符做過濾；其次任何內容寫到頁面之前都必須加以encode攀隔，避免不小心把html tag?弄出來皂贩。這一個層面做好栖榨，至少可以堵住超過一半的XSS 攻擊

XSS與CSRF有什么區(qū)別嗎？

XSS是獲取信息明刷，不需要提前知道其他用戶頁面的代碼和數(shù)據包婴栽。CSRF是代替用戶完成指定的動作，需要知道其他用戶頁面的代碼和數(shù)據包辈末。要完成一次CSRF攻擊愚争，受害者必須依次完成兩個步驟

登錄受信任網站A，并在本地生成Cookie

在不登出A的情況下挤聘，訪問危險網站B

CSRF的防御

服務端的CSRF方式方法很多樣轰枝，但總的思想都是一致的，就是在客戶端頁面增加偽隨機數(shù)

通過驗證碼的方法

18组去、用過哪些設計模式鞍陨？

工廠模式：

工廠模式解決了重復實例化的問題，但還有一個問題,那就是識別問題添怔，因為根本無法

主要好處就是可以消除對象間的耦合湾戳，通過使用工程方法而不是new關鍵字

構造函數(shù)模式

使用構造函數(shù)的方法，即解決了重復實例化的問題广料，又解決了對象識別的問題砾脑，該模式與工廠模式的不同之處在于

直接將屬性和方法賦值給?this對象;

19、為什么要有同源限制艾杏？

同源策略指的是：協(xié)議韧衣，域名，端口相同购桑，同源策略是一種安全協(xié)議

舉例說明：比如一個黑客程序畅铭，他利用Iframe把真正的銀行登錄頁面嵌到他的頁面上，當你使用真實的用戶名勃蜘，密碼登錄時硕噩，他的頁面就可以通過Javascript讀取到你的表單中input中的內容，這樣用戶名缭贡，密碼就輕松到手了炉擅。

20、offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區(qū)別

offsetWidth/offsetHeight返回值包含content + padding + border阳惹，效果與e.getBoundingClientRect()相同

clientWidth/clientHeight返回值只包含content + padding谍失，如果有滾動條，也不包含滾動條

scrollWidth/scrollHeight返回值包含content + padding + 溢出內容的尺寸

21莹汤、javascript有哪些方法定義對象

對象字面量：?var obj = {};

構造函數(shù)：?var obj = new Object();

Object.create():?var obj = Object.create(Object.prototype);

22快鱼、常見兼容性問題冠王？

png24位的圖片在iE6瀏覽器上出現(xiàn)背景在塔，解決方案是做成PNG8

瀏覽器默認的margin和padding不同虚倒。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一,琉挖，但是全局效率很低鸣奔，一般是如下這樣解決：

body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{margin:0;padding:0;}

IE下,event對象有x,y屬性,但是沒有pageX,pageY屬性

Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.

22沦零、說說你對promise的了解

依照?Promise/A+?的定義纲熏，Promise?有四種狀態(tài)：

pending:?初始狀態(tài), 非?fulfilled?或?rejected.

fulfilled:?成功的操作.

rejected:?失敗的操作.

settled: Promise已被fulfilled或rejected尘吗，且不是pending

另外，?fulfilled與?rejected一起合稱?settled

Promise?對象用來進行延遲(deferred) 和異步(asynchronous) 計算

Promise 的構造函數(shù)

構造一個?Promise兢孝，最基本的用法如下：

varpromise =newPromise(function(resolve, reject){if(...) {// succeedresolve(result);? ? ? ? }else{// failsreject(Error(errMessage));? ? ? ? }? ? });

Promise?實例擁有?then?方法（具有?then?方法的對象，通常被稱為thenable）仅偎。它的使用方法如下：

promise.then(onFulfilled, onRejected)

接收兩個函數(shù)作為參數(shù)跨蟹，一個在?fulfilled?的時候被調用，一個在rejected的時候被調用橘沥，接收參數(shù)就是?future窗轩，onFulfilled?對應resolve,?onRejected對應?reject

23、你覺得jQuery源碼有哪些寫的好的地方

jquery源碼封裝在一個匿名函數(shù)的自執(zhí)行環(huán)境中座咆，有助于防止變量的全局污染痢艺，然后通過傳入window對象參數(shù)，可以使window對象作為局部變量使用介陶，好處是當jquery中訪問window對象的時候堤舒，就不用將作用域鏈退回到頂層作用域了，從而可以更快的訪問window對象哺呜。同樣舌缤，傳入undefined參數(shù)，可以縮短查找undefined時的作用域鏈

jquery將一些原型屬性和方法封裝在了jquery.prototype中某残，為了縮短名稱国撵，又賦值給了jquery.fn，這是很形象的寫法

有一些數(shù)組或對象的方法經常能使用到玻墅，jQuery將其保存為局部變量以提高訪問速度

jquery實現(xiàn)的鏈式調用可以節(jié)約代碼介牙，所返回的都是同一個對象，可以提高代碼效率

24澳厢、vue环础、react、angular

Vue.js

一個用于創(chuàng)建?web?交互界面的庫赏酥，是一個精簡的?MVVM喳整。它通過雙向數(shù)據綁定把?View層和?Model?層連接了起來。實際的?DOM?封裝和輸出格式都被抽象為了Directives?和?Filters

AngularJS

是一個比較完善的前端MVVM框架裸扶，包含模板框都，數(shù)據雙向綁定，路由，模塊化魏保，服務熬尺，依賴注入等所有功能，模板功能強大豐富谓罗，自帶了豐富的?Angular指令

react

React?僅僅是?VIEW?層是facebook公司粱哼。推出的一個用于構建UI的一個庫，能夠實現(xiàn)服務器端的渲染檩咱。用了virtual dom揭措，所以性能很好。

25刻蚯、Node的應用場景

特點：

1绊含、它是一個Javascript運行環(huán)境

2、依賴于Chrome V8引擎進行代碼解釋

3炊汹、事件驅動

4躬充、非阻塞I/O

5、單進程讨便，單線程

優(yōu)點：

高并發(fā)（最重要的優(yōu)點）

缺點：

1充甚、只支持單核CPU，不能充分利用CPU

2霸褒、可靠性低伴找，一旦代碼某個環(huán)節(jié)崩潰，整個系統(tǒng)都崩潰

26傲霸、談談你對AMD疆瑰、CMD的理解

CommonJS是服務器端模塊的規(guī)范，Node.js采用了這個規(guī)范昙啄。CommonJS規(guī)范加載模塊是同步的穆役，也就是說，只有加載完成梳凛，才能執(zhí)行后面的操作耿币。AMD規(guī)范則是非同步加載模塊，允許指定回調函數(shù)

AMD推薦的風格通過返回一個對象做為模塊對象韧拒，CommonJS的風格通過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的

27淹接、那些操作會造成內存泄漏？

內存泄漏指任何對象在您不再擁有或需要它之后仍然存在

setTimeout?的第一個參數(shù)使用字符串而非函數(shù)的話叛溢，會引發(fā)內存泄漏

閉包塑悼、控制臺日志、循環(huán)（在兩個對象彼此引用且彼此保留時楷掉，就會產生一個循環(huán)）

28厢蒜、web開發(fā)中會話跟蹤的方法有哪些

cookie

session

url重寫

隱藏input

ip地址

29、介紹js的基本數(shù)據類型

Undefined、Null斑鸦、Boolean愕贡、Number、String

30巷屿、介紹js有哪些內置對象固以？

Object?是?JavaScript?中所有對象的父對象

數(shù)據封裝類對象：Object、Array嘱巾、Boolean憨琳、Number?和?String

其他對象：Function、Arguments浓冒、Math栽渴、Date、RegExp稳懒、Error

31、說幾條寫JavaScript的基本規(guī)范慢味？

不要在同一行聲明多個變量

請使用===/!==來比較true/false或者數(shù)值

使用對象字面量替代new Array這種形式

不要使用全局函數(shù)

Switch語句必須帶有default分支

If語句必須使用大括號

for-in循環(huán)中的變量 應該使用var關鍵字明確限定作用域场梆，從而避免作用域污

32、JavaScript有幾種類型的值纯路？或油，你能畫一下他們的內存圖嗎？

棧：原始數(shù)據類型（Undefined驰唬，Null顶岸，Boolean，Number叫编、String）

堆：引用數(shù)據類型（對象辖佣、數(shù)組和函數(shù)）

兩種類型的區(qū)別是：存儲位置不同；

原始數(shù)據類型直接存儲在棧(stack)中的簡單數(shù)據段搓逾，占據空間小卷谈、大小固定，屬于被頻繁使用數(shù)據霞篡，所以放入棧中存儲世蔗；

引用數(shù)據類型存儲在堆(heap)中的對象,占據空間大、大小不固定,如果存儲在棧中朗兵，將會影響程序運行的性能污淋；引用數(shù)據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址余掖。當解釋器尋找引用值時寸爆，會首先檢索其

在棧中的地址，取得地址后從堆中獲得實體

image

33、javascript創(chuàng)建對象的幾種方式而昨？

javascript創(chuàng)建對象簡單的說,無非就是使用內置對象或各種自定義對象救氯，當然還可以用JSON；但寫法有很多種歌憨，也能混合使用

對象字面量的方式

person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

用function來模擬無參的構造函數(shù)

functionPerson(){}varperson=newPerson();//定義一個function着憨，如果使用new"實例化",該function可以看作是一個Classperson.name="Mark";? ? ? ? person.age="25";? ? ? ? person.work=function(){? ? ? ? alert(person.name+" hello...");? ? }person.work();

用function來模擬參構造函數(shù)來實現(xiàn)（用this關鍵字定義構造的上下文屬性）

functionPet(name,age,hobby){this.name=name;//this作用域：當前對象this.age=age;this.hobby=hobby;this.eat=function(){? ? ? ? ? alert("我叫"+this.name+",我喜歡"+this.hobby+",是個程序員");? ? ? }? ? }varmaidou =newPet("麥兜",25,"coding");//實例化、創(chuàng)建對象maidou.eat();//調用eat方法

用工廠方式來創(chuàng)建（內置對象）

varwcDog =newObject();? ? wcDog.name="旺財";? ? wcDog.age=3;? ? wcDog.work=function(){? ? ? alert("我是"+wcDog.name+",汪汪汪......");? ? }? ? wcDog.work();

用原型方式來創(chuàng)建

functionDog(){? ? }? ? Dog.prototype.name="旺財";? ? Dog.prototype.eat=function(){? ? alert(this.name+"是個吃貨");? ? }varwangcai =newDog();? ? wangcai.eat();

用混合方式來創(chuàng)建

functionCar(name,price){this.name=name;this.price=price;? ? }? ? Car.prototype.sell=function(){? ? ? alert("我是"+this.name+"务嫡，我現(xiàn)在賣"+this.price+"萬元");? ? ? }varcamry =newCar("凱美瑞",27);? ? camry.sell();

34甲抖、eval是做什么的？

它的功能是把對應的字符串解析成JS代碼并運行

應該避免使用eval心铃，不安全准谚，非常耗性能（2次，一次解析成js語句去扣，一次執(zhí)行）

由JSON字符串轉換為JSON對象的時候可以用eval柱衔，var obj =eval('('+ str +')')

35、null愉棱，undefined 的區(qū)別唆铐？

undefined?表示不存在這個值。

undefined?:是一個表示"無"的原始值或者說表示"缺少值"奔滑，就是此處應該有一個值艾岂，但是還沒有定義。當嘗試讀取時會返回?undefined

例如變量被聲明了朋其，但沒有賦值時王浴，就等于undefined

null?表示一個對象被定義了，值為“空值”

null?: 是一個對象(空對象, 沒有任何屬性和方法)

例如作為函數(shù)的參數(shù)梅猿，表示該函數(shù)的參數(shù)不是對象氓辣；

在驗證null時，一定要使用===?粒没，因為?==無法分別null?和undefined

36筛婉、["1", "2", "3"].map(parseInt) 答案是多少？

[1, NaN, NaN]因為?parseInt?需要兩個參數(shù)?(val, radix)癞松，其中radix?表示解析時用的基數(shù)爽撒。

map傳了?3個(element, index, array)，對應的?radix?不合法導致解析失敗响蓉。

37硕勿、javascript 代碼中的"use strict";是什么意思 ? 使用它區(qū)別是什么？

use strict是一種ECMAscript 5?添加的（嚴格）運行模式,這種模式使得 Javascript 在更嚴格的條件下運行,使JS編碼更加規(guī)范化的模式,消除Javascript語法的一些不合理枫甲、不嚴謹之處源武，減少一些怪異行為

38扼褪、JSON 的了解？

JSON(JavaScript Object Notation)?是一種輕量級的數(shù)據交換格式

它是基于JavaScript的一個子集粱栖。數(shù)據格式簡單, 易于讀寫, 占用帶寬小

JSON字符串轉換為JSON對象:

varobj =eval('('+ str +')');varobj = str.parseJSON();varobj =JSON.parse(str);

JSON對象轉換為JSON字符串：

varlast=obj.toJSONString();varlast=JSON.stringify(obj);

39话浇、js延遲加載的方式有哪些？

defer和async闹究、動態(tài)創(chuàng)建DOM方式（用得最多）幔崖、按需異步載入js

40、同步和異步的區(qū)別?

同步：瀏覽器訪問服務器請求渣淤，用戶看得到頁面刷新赏寇，重新發(fā)請求,等請求完，頁面刷新价认，新內容出現(xiàn)嗅定，用戶看到新內容,進行下一步操作

異步：瀏覽器訪問服務器請求，用戶正常操作用踩，瀏覽器后端進行請求渠退。等請求完，頁面不刷新脐彩，新內容也會出現(xiàn)智什，用戶看到新內容

41、漸進增強和優(yōu)雅降級

漸進增強 ：針對低版本瀏覽器進行構建頁面丁屎，保證最基本的功能，然后再針對高級瀏覽器進行效果旱眯、交互等改進和追加功能達到更好的用戶體驗晨川。

優(yōu)雅降級 ：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容

42删豺、defer和async

defer并行加載js文件共虑，會按照頁面上script標簽的順序執(zhí)行

async并行加載js文件，下載完成立即執(zhí)行呀页，不會按照頁面上script標簽的順序執(zhí)行

43妈拌、說說嚴格模式的限制

變量必須聲明后再使用

函數(shù)的參數(shù)不能有同名屬性，否則報錯

不能使用with語句

禁止this指向全局對象

44蓬蝶、attribute和property的區(qū)別是什么尘分？

attribute是dom元素在文檔中作為html標簽擁有的屬性；

property就是dom元素在js中作為對象擁有的屬性丸氛。

對于html的標準屬性來說培愁，attribute和property是同步的，是會自動更新的

但是對于自定義的屬性來說缓窜，他們是不同步的

45定续、談談你對ES6的理解

新增模板字符串（為JavaScript提供了簡單的字符串插值功能）

箭頭函數(shù)

for-of（用來遍歷數(shù)據—例如數(shù)組中的值谍咆。）

arguments對象可被不定參數(shù)和默認參數(shù)完美代替。

ES6將promise對象納入規(guī)范私股，提供了原生的Promise對象摹察。

增加了let和const命令，用來聲明變量倡鲸。

增加了塊級作用域供嚎。

let命令實際上就增加了塊級作用域。

還有就是引入module模塊的概念

46旦签、ECMAScript6 怎么寫class么查坪，為什么會出現(xiàn)class這種東西?

這個語法糖可以讓有OOP基礎的人更快上手js，至少是一個官方的實現(xiàn)了

但對熟悉js的人來說宁炫，這個東西沒啥大影響偿曙；一個Object.creat()搞定繼承，比class簡潔清晰的多

47羔巢、什么是面向對象編程及面向過程編程望忆，它們的異同和優(yōu)缺點

面向過程就是分析出解決問題所需要的步驟，然后用函數(shù)把這些步驟一步一步實現(xiàn)竿秆，使用的時候一個一個依次調用就可以了

面向對象是把構成問題事務分解成各個對象启摄，建立對象的目的不是為了完成一個步驟，而是為了描敘某個事物在整個解決問題的步驟中的行為

面向對象是以功能來劃分問題幽钢，而不是步驟

48歉备、面向對象編程思想

基本思想是使用對象，類匪燕，繼承蕾羊，封裝等基本概念來進行程序設計

優(yōu)點

易維護

采用面向對象思想設計的結構，可讀性高帽驯，由于繼承的存在龟再，即使改變需求，那么維護也只是在局部模塊尼变，所以維護起來是非常方便和較低成本的

易擴展

開發(fā)工作的重用性利凑、繼承性高，降低重復工作量嫌术。

縮短了開發(fā)周期

49哀澈、對web標準、可用性蛉威、可訪問性的理解

可用性（Usability）：產品是否容易上手日丹，用戶能否完成任務，效率如何蚯嫌，以及這過程中用戶的主觀感受可好哲虾，是從用戶的角度來看產品的質量丙躏。可用性好意味著產品質量高束凑，是企業(yè)的核心競爭力

可訪問性（Accessibility）：Web內容對于殘障用戶的可閱讀和可理解性

可維護性（Maintainability）：一般包含兩個層次晒旅，一是當系統(tǒng)出現(xiàn)問題時，快速定位并解決問題的成本汪诉，成本低則可維護性好废恋。二是代碼是否容易被人理解，是否容易修改和增強功能扒寄。

50鱼鼓、如何通過JS判斷一個數(shù)組？

instanceof方法

instanceof?運算符是用來測試一個對象是否在其原型鏈原型構造函數(shù)的屬性

vararr = []; arrinstanceofArray;// true

constructor方法

constructor屬性返回對創(chuàng)建此對象的數(shù)組函數(shù)的引用该编，就是返回對象相對應的構造函數(shù)

vararr = []; arr.constructor ==Array;//true

最簡單的方法

這種寫法迄本，是?jQuery?正在使用的

Object.prototype.toString.call(value) =='[object Array]'// 利用這個方法，可以寫一個返回數(shù)據類型的方法varisType =function(obj){returnObject.prototype.toString.call(obj).slice(8,-1); }

ES5新增方法isArray()

vara =newArray(123);varb =newDate();console.log(Array.isArray(a));//trueconsole.log(Array.isArray(b));//false

51课竣、談一談let與var的區(qū)別嘉赎？

let命令不存在變量提升，如果在let前使用于樟，會導致報錯

如果塊區(qū)中存在let和const命令公条，就會形成封閉作用域

不允許重復聲明，因此迂曲，不能在函數(shù)內部重新聲明參數(shù)

52靶橱、map與forEach的區(qū)別？

forEach方法路捧，是最基本的方法抓韩，就是遍歷與循環(huán)，默認有3個傳參：分別是遍歷的數(shù)組內容item鬓长、數(shù)組索引index、和當前遍歷數(shù)組Array

map方法尝江，基本用法與forEach一致涉波，但是不同的，它會返回一個新的數(shù)組炭序，所以在callback需要有return值啤覆，如果沒有，會返回undefined

53惭聂、談一談你理解的函數(shù)式編程窗声？

簡單說，"函數(shù)式編程"是一種"編程范式"（programming paradigm）辜纲，也就是如何編寫程序的方法論

它具有以下特性：閉包和高階函數(shù)笨觅、惰性計算拦耐、遞歸、函數(shù)是"第一等公民"见剩、只用"表達式"

54杀糯、談一談箭頭函數(shù)與普通函數(shù)的區(qū)別？

函數(shù)體內的this對象苍苞，就是定義時所在的對象固翰，而不是使用時所在的對象

不可以當作構造函數(shù)，也就是說羹呵，不可以使用new命令骂际，否則會拋出一個錯誤

不可以使用arguments對象，該對象在函數(shù)體內不存在冈欢。如果要用歉铝，可以用Rest參數(shù)代替

不可以使用yield命令，因此箭頭函數(shù)不能用作Generator函數(shù)

55涛癌、談一談函數(shù)中this的指向吧犯戏？

this的指向在函數(shù)定義的時候是確定不了的，只有函數(shù)執(zhí)行的時候才能確定this到底指向誰拳话，實際上this的最終指向的是那個調用它的對象

《javascript語言精髓》中大概概括了4種調用方式：

方法調用模式

函數(shù)調用模式

構造器調用模式

graph LR

A-->B

apply/call調用模式

56先匪、異步編程的實現(xiàn)方式？

回調函數(shù)

優(yōu)點：簡單弃衍、容易理解

缺點：不利于維護呀非，代碼耦合高

事件監(jiān)聽(采用時間驅動模式，取決于某個事件是否發(fā)生)：

優(yōu)點：容易理解镜盯，可以綁定多個事件岸裙，每個事件可以指定多個回調函數(shù)

缺點：事件驅動型，流程不夠清晰

發(fā)布/訂閱(觀察者模式)

類似于事件監(jiān)聽速缆，但是可以通過‘消息中心’降允，了解現(xiàn)在有多少發(fā)布者，多少訂閱者

Promise對象

優(yōu)點：可以利用then方法艺糜，進行鏈式寫法剧董；可以書寫錯誤時的回調函數(shù)；

缺點：編寫和理解破停，相對比較難

Generator函數(shù)

優(yōu)點：函數(shù)體內外的數(shù)據交換翅楼、錯誤處理機制

缺點：流程管理不方便

async函數(shù)

優(yōu)點：內置執(zhí)行器、更好的語義真慢、更廣的適用性毅臊、返回的是Promise、結構清晰黑界。

缺點：錯誤處理機制

57管嬉、對原生Javascript了解程度

數(shù)據類型皂林、運算、對象宠蚂、Function式撼、繼承、閉包求厕、作用域著隆、原型鏈、事件呀癣、RegExp美浦、JSON、Ajax项栏、DOM浦辨、BOM、內存泄漏沼沈、跨域流酬、異步裝載、模板引擎列另、前端MVC芽腾、路由、模塊化页衙、Canvas摊滔、ECMAScript

58、Js動畫與CSS動畫區(qū)別及相應實現(xiàn)

CSS3的動畫的優(yōu)點

在性能上會稍微好一些店乐，瀏覽器會對CSS3的動畫做一些優(yōu)化

代碼相對簡單

缺點

在動畫控制上不夠靈活

兼容性不好

JavaScript的動畫正好彌補了這兩個缺點艰躺，控制能力很強，可以單幀的控制眨八、變換腺兴，同時寫得好完全可以兼容IE6，并且功能強大廉侧。對于一些復雜控制的動畫含长，使用javascript會比較靠譜。而在實現(xiàn)一些小的交互動效的時候伏穆，就多考慮考慮CSS吧

59、JS 數(shù)組和對象的遍歷方式纷纫，以及幾種方式的比較

通常我們會用循環(huán)的方式來遍歷數(shù)組枕扫。但是循環(huán)是 導致js 性能問題的原因之一。一般我們會采用下幾種方式來進行數(shù)組的遍歷

for in循環(huán)

for循環(huán)

forEach

這里的?forEach回調中兩個參數(shù)分別為?value辱魁，index

forEach?無法遍歷對象

IE不支持該方法烟瞧；Firefox?和?chrome?支持

forEach?無法使用?break诗鸭，continue?跳出循環(huán)，且使用?return?是跳過本次循環(huán)

這兩種方法應該非常常見且使用很頻繁参滴。但實際上强岸，這兩種方法都存在性能問題

在方式一中，for-in需要分析出array的每個屬性砾赔，這個操作性能開銷很大蝌箍。用在?key?已知的數(shù)組上是非常不劃算的。所以盡量不要用for-in暴心，除非你不清楚要處理哪些屬性妓盲，例如?JSON對象這樣的情況

在方式2中，循環(huán)每進行一次专普，就要檢查一下數(shù)組長度悯衬。讀取屬性（數(shù)組長度）要比讀局部變量慢，尤其是當?array?里存放的都是?DOM?元素檀夹，因為每次讀取都會掃描一遍頁面上的選擇器相關元素筋粗，速度會大大降低

60、gulp是什么炸渡？

gulp是前端開發(fā)過程中一種基于流的代碼構建工具桨昙，是自動化項目的構建利器；它不僅能對網站資源進行優(yōu)化孤澎，而且在開發(fā)過程中很多重復的任務能夠使用正確的工具自動完成

Gulp的核心概念：流

流纯露，簡單來說就是建立在面向對象基礎上的一種抽象的處理數(shù)據的工具。在流中辰斋，定義了一些處理數(shù)據的基本操作策州，如讀取數(shù)據，寫入數(shù)據等宫仗，程序員是對流進行所有操作的够挂，而不用關心流的另一頭數(shù)據的真正流向

gulp正是通過流和代碼優(yōu)于配置的策略來盡量簡化任務編寫的工作

Gulp的特點：

易于使用：通過代碼優(yōu)于配置的策略，gulp 讓簡單的任務簡單藕夫，復雜的任務可管理

構建快速利用?Node.js?流的威力孽糖，你可以快速構建項目并減少頻繁的?IO?操作

易于學習通過最少的?API，掌握?gulp?毫不費力毅贮，構建工作盡在掌握：如同一系列流管道

61办悟、說一下Vue的雙向綁定數(shù)據的原理

vue.js?則是采用數(shù)據劫持結合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter滩褥，getter病蛉，在數(shù)據變動時發(fā)布消息給訂閱者，觸發(fā)相應的監(jiān)聽回調

$jQuery

1、你覺得jQuery或zepto源碼有哪些寫的好的地方

jquery源碼封裝在一個匿名函數(shù)的自執(zhí)行環(huán)境中铺然，有助于防止變量的全局污染俗孝，然后通過傳入window對象參數(shù)，可以使window對象作為局部變量使用魄健，好處是當jquery中訪問window對象的時候赋铝，就不用將作用域鏈退回到頂層作用域了，從而可以更快的訪問window對象沽瘦。同樣革骨，傳入undefined參數(shù)，可以縮短查找undefined時的作用域鏈

(function( window, undefined ){//用一個函數(shù)域包起來其垄，就是所謂的沙箱//在這里邊var定義的變量苛蒲，屬于這個函數(shù)域內的局部變量，避免污染全局//把當前沙箱需要的外部變量通過函數(shù)參數(shù)引入進來//只要保證參數(shù)對內提供的接口的一致性绿满，你還可以隨意替換傳進來的這個參數(shù)window.jQuery =window.$ = jQuery;? ? })(window);

jquery將一些原型屬性和方法封裝在了jquery.prototype中臂外，為了縮短名稱，又賦值給了jquery.fn喇颁，這是很形象的寫法

有一些數(shù)組或對象的方法經常能使用到漏健，jQuery將其保存為局部變量以提高訪問速度

jquery實現(xiàn)的鏈式調用可以節(jié)約代碼，所返回的都是同一個對象橘霎，可以提高代碼效率

2蔫浆、jQuery 的實現(xiàn)原理？

(function(window, undefined) {})(window);

jQuery?利用?JS?函數(shù)作用域的特性姐叁，采用立即調用表達式包裹了自身瓦盛，解決命名空間和變量污染問題

window.jQuery = window.$ = jQuery;

在閉包當中將 jQuery 和?

?暴露為全局變量

3、jQuery.fn?的?init?方法返回的?this?指的是什么對象外潜？ 為什么要返回?this原环？

jQuery.fn 的 init 方法 返回的 this 就是 jQuery 對象

用戶使用 jQuery() 或 $() 即可初始化 jQuery 對象，不需要動態(tài)的去調用 init 方法

4处窥、jQuery.extend 與 jQuery.fn.extend 的區(qū)別嘱吗？

$.fn.extend()?和?$.extend()?是?jQuery?為擴展插件提拱了兩個方法

$.extend(object); // 為jQuery添加“靜態(tài)方法”（工具方法）

$.extend({min:function(a, b){returna < b ? a : b; },max:function(a, b){returna > b ? a : b; }});$.min(2,3);//? 2$.max(4,5);//? 5

$.extend([true,] targetObject, object1[, object2]); // 對targt對象進行擴展

varsettings = {validate:false,limit:5};varoptions = {validate:true,name:"bar"};$.extend(settings, options);// 注意：不支持第一個參數(shù)傳 false// settings == {validate:true, limit:5, name:"bar"}

$.fn.extend(json); // 為jQuery添加“成員函數(shù)”（實例方法）

$.fn.extend({alertValue:function(){? ? ? $(this).click(function(){? ? ? ? alert($(this).val());? ? ? });? }});$("#email").alertValue();

5、jQuery 的屬性拷貝(extend)的實現(xiàn)原理是什么滔驾，如何實現(xiàn)深拷貝谒麦？

淺拷貝（只復制一份原始對象的引用）

var newObject = $.extend({}, oldObject);

深拷貝（對原始對象屬性所引用的對象進行進行遞歸拷貝）

var newObject = $.extend(true, {}, oldObject);

6、jQuery 的隊列是如何實現(xiàn)的哆致？隊列可以用在哪些地方绕德？

jQuery 核心中有一組隊列控制方法，由?queue()/dequeue()/clearQueue()?三個方法組成摊阀。

主要應用于?animate()耻蛇，ajax剩瓶，其他要按時間順序執(zhí)行的事件中

varfunc1 =function(){alert('事件1');}varfunc2 =function(){alert('事件2');}varfunc3 =function(){alert('事件3');}varfunc4 =function(){alert('事件4');}// 入棧隊列事件$('#box').queue("queue1", func1);// push func1 to queue1$('#box').queue("queue1", func2);// push func2 to queue1// 替換隊列事件$('#box').queue("queue1", []);// delete queue1 with empty array$('#box').queue("queue1", [func3, func4]);// replace queue1// 獲取隊列事件（返回一個函數(shù)數(shù)組）$('#box').queue("queue1");// [func3(), func4()]// 出棧隊列事件并執(zhí)行$('#box').dequeue("queue1");// return func3 and do func3$('#box').dequeue("queue1");// return func4 and do func4// 清空整個隊列$('#box').clearQueue("queue1");// delete queue1 with clearQueue

7、jQuery 中的 bind(), live(), delegate(), on()的區(qū)別城丧？

bind?直接綁定在目標元素上

live?通過冒泡傳播事件，默認document上豌鹤，支持動態(tài)數(shù)據

delegate?更精確的小范圍使用事件代理亡哄，性能優(yōu)于 live

on?是最新的1.9版本整合了之前的三種方式的新事件綁定機制

8、是否知道自定義事件布疙？ jQuery 里的 fire 函數(shù)是什么意思蚊惯，什么時候用？

事件即“發(fā)布/訂閱”模式灵临，自定義事件即“消息發(fā)布”截型，事件的監(jiān)聽即“訂閱訂閱”

JS 原生支持自定義事件，示例：

document.createEvent(type);// 創(chuàng)建事件event.initEvent(eventType, canBubble, prevent);// 初始化事件target.addEventListener('dataavailable', handler,false);// 監(jiān)聽事件target.dispatchEvent(e);// 觸發(fā)事件

jQuery 里的 fire 函數(shù)用于調用 jQuery 自定義事件列表中的事件

9儒溉、jQuery 通過哪個方法和 Sizzle 選擇器結合的宦焦？

Sizzle?選擇器采取?Right To Left?的匹配模式，先搜尋所有匹配標簽顿涣，再判斷它的父節(jié)點

jQuery?通過?$(selecter).find(selecter);?和?Sizzle?選擇器結合

10波闹、jQuery 中如何將數(shù)組轉化為 JSON 字符串，然后再轉化回來涛碑？

// 通過原生 JSON.stringify/JSON.parse 擴展 jQuery 實現(xiàn)$.array2json =function(array){returnJSON.stringify(array); } $.json2array =function(array){// $.parseJSON(array); // 3.0 開始精堕，已過時returnJSON.parse(array); }// 調用varjson = $.array2json(['a','b','c']);vararray = $.json2array(json);

11、jQuery 一個對象可以同時綁定多個事件蒲障，這是如何實現(xiàn)的歹篓？

$("#btn").on("mouseover mouseout", func);? $("#btn").on({mouseover: func1,mouseout: func2,click: func3? });

12、針對 jQuery 的優(yōu)化方法揉阎？

緩存頻繁操作DOM對象

盡量使用id選擇器代替class選擇器

總是從#id選擇器來繼承

盡量使用鏈式操作

使用時間委托?on綁定事件

采用jQuery的內部函數(shù)data()來存儲數(shù)據

使用最新版本的?jQuery

13庄撮、jQuery 的 slideUp 動畫，當鼠標快速連續(xù)觸發(fā), 動畫會滯后反復執(zhí)行余黎，該如何處理呢?

在觸發(fā)元素上的事件設置為延遲處理：使用?JS?原生?setTimeout?方法

在觸發(fā)元素的事件時預先停止所有的動畫重窟，再執(zhí)行相應的動畫事件：$('.tab').stop().slideUp();

14、jQuery UI 如何自定義組件惧财？

通過向?$.widget()?傳遞組件名稱和一個原型對象來完成

$.widget("ns.widgetName", [baseWidget], widgetPrototype);

15巡扇、jQuery 與 jQuery UI、jQuery Mobile 區(qū)別垮衷？

jQuery?是?JS?庫厅翔，兼容各種PC瀏覽器，主要用作更方便地處理?DOM搀突、事件刀闷、動畫、AJAX

jQuery UI?是建立在?jQuery?庫上的一組用戶界面交互、特效甸昏、小部件及主題

jQuery Mobile?以?jQuery?為基礎顽分，用于創(chuàng)建“移動Web應用”的框架

16、jQuery 和 Zepto 的區(qū)別施蜜？ 各自的使用場景卒蘸？

jQuery?主要目標是PC的網頁中，兼容全部主流瀏覽器翻默。在移動設備方面缸沃，單獨推出 `jQuery Mobile

Zepto從一開始就定位移動設備，相對更輕量級修械。它的API?基本兼容jQuery`趾牧，但對PC瀏覽器兼容不理想

17、jQuery對象的特點

只有?JQuery對象才能使用?JQuery?方法

JQuery?對象是一個數(shù)組對象

$編程題

1肯污、寫一個通用的事件偵聽器函數(shù)

// event(事件)工具集翘单，來源：github.com/markyunmarkyun.Event = {// 視能力分別使用dom0||dom2||IE方式 來綁定事件// 參數(shù)： 操作的元素,事件名稱 ,事件處理程序addEvent :function(element, type, handler){if(element.addEventListener) {//事件類型、需要執(zhí)行的函數(shù)仇箱、是否捕捉element.addEventListener(type, handler,false);? ? ? ? ? ? }elseif(element.attachEvent) {? ? ? ? ? ? ? ? element.attachEvent('on'+ type,function(){? ? ? ? ? ? ? ? ? ? handler.call(element);? ? ? ? ? ? ? ? });? ? ? ? ? ? }else{? ? ? ? ? ? ? ? element['on'+ type] = handler;? ? ? ? ? ? }? ? ? ? },// 移除事件removeEvent :function(element, type, handler){if(element.removeEventListener) {? ? ? ? ? ? ? ? element.removeEventListener(type, handler,false);? ? ? ? ? ? }elseif(element.datachEvent) {? ? ? ? ? ? ? ? element.detachEvent('on'+ type, handler);? ? ? ? ? ? }else{? ? ? ? ? ? ? ? element['on'+ type] =null;? ? ? ? ? ? }? ? ? ? },// 阻止事件 (主要是事件冒泡县恕，因為IE不支持事件捕獲)stopPropagation :function(ev){if(ev.stopPropagation) {? ? ? ? ? ? ? ? ev.stopPropagation();? ? ? ? ? ? }else{? ? ? ? ? ? ? ? ev.cancelBubble =true;? ? ? ? ? ? }? ? ? ? },// 取消事件的默認行為preventDefault :function(event){if(event.preventDefault) {? ? ? ? ? ? ? ? event.preventDefault();? ? ? ? ? ? }else{? ? ? ? ? ? ? ? event.returnValue =false;? ? ? ? ? ? }? ? ? ? },// 獲取事件目標getTarget :function(event){returnevent.target || event.srcElement;? ? ? ? }

2、如何判斷一個對象是否為數(shù)組

functionisArray(arg){if(typeofarg ==='object') {returnObject.prototype.toString.call(arg) ==='[object Array]';? ? }returnfalse;}

3剂桥、冒泡排序

每次比較相鄰的兩個數(shù)忠烛，如果后一個比前一個小，換位置

vararr = [3,1,4,6,5,7,2];functionbubbleSort(arr){for(vari =0; i < arr.length -1; i++) {for(varj =0; j < arr.length -1; j++) {if(arr[j +1] < arr[j]) {vartemp;? ? ? ? ? ? temp = arr[j];? ? ? ? ? ? arr[j] = arr[j +1];? ? ? ? ? ? arr[j +1] = temp;? ? ? ? }? ? }}returnarr;}console.log(bubbleSort(arr));

4权逗、快速排序

采用二分法美尸，取出中間數(shù)，數(shù)組每次和中間數(shù)比較斟薇，小的放到左邊师坎，大的放到右邊

vararr = [3,1,4,6,5,7,2];functionquickSort(arr){if(arr.length ==0) {return[];// 返回空數(shù)組}varcIndex =Math.floor(arr.length /2);varc = arr.splice(cIndex,1);varl = [];varr = [];for(vari =0; i < arr.length; i++) {if(arr[i] < c) {? ? ? ? ? ? l.push(arr[i]);? ? ? ? }else{? ? ? ? ? ? r.push(arr[i]);? ? ? ? }? ? }returnquickSort(l).concat(c, quickSort(r));}console.log(quickSort(arr));

5、編寫一個方法 求一個字符串的字節(jié)長度

假設：一個英文字符占用一個字節(jié)堪滨，一個中文字符占用兩個字節(jié)

functionGetBytes(str){varlen = str.length;varbytes = len;for(vari=0; i255) bytes++;? ? ? ? }returnbytes;? ? }alert(GetBytes("你好,as"));

6胯陋、bind的用法，以及如何實現(xiàn)bind的函數(shù)和需要注意的點

bind的作用與call和apply相同袱箱，區(qū)別是call和apply是立即調用函數(shù)遏乔，而bind是返回了一個函數(shù)，需要調用的時候再執(zhí)行发笔。

一個簡單的bind函數(shù)實現(xiàn)如下

Function.prototype.bind =function(ctx){varfn =this;returnfunction(){? ? ? ? fn.apply(ctx,arguments);? ? };};

$其他

1盟萨、談談你對重構的理解

網站重構：在不改變外部行為的前提下，簡化結構了讨、添加可讀性捻激，而在網站前端保持一致的行為制轰。也就是說是在不改變UI的情況下，對網站進行優(yōu)化胞谭， 在擴展的同時保持一致的UI

對于傳統(tǒng)的網站來說重構通常是：

表格(table)布局改為DIV+CSS

使網站前端兼容于現(xiàn)代瀏覽器(針對于不合規(guī)范的CSS垃杖、如對IE6有效的)

對于移動平臺的優(yōu)化

針對于SEO進行優(yōu)化

2、什么樣的前端代碼是好的

高復用低耦合丈屹，這樣文件小缩滨，好維護，而且好擴展泉瞻。

3、對前端工程師這個職位是怎么樣理解的苞冯？它的前景會怎么樣袖牙？

前端是最貼近用戶的程序員，比后端舅锄、數(shù)據庫鞭达、產品經理、運營皇忿、安全都近

實現(xiàn)界面交互

提升用戶體驗

有了Node.js畴蹭，前端可以實現(xiàn)服務端的一些事情

前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分鳍烁，甚至更好叨襟，

與團隊成員，UI設計幔荒，產品經理的溝通糊闽；

做好的頁面結構，頁面重構和用戶體驗爹梁；

4右犹、你覺得前端工程的價值體現(xiàn)在哪

為簡化用戶使用提供技術支持（交互部分）

為多個瀏覽器兼容性提供支持

為提高用戶瀏覽速度（瀏覽器性能）提供支持

為跨平臺或者其他基于webkit或其他渲染引擎的應用提供支持

為展示數(shù)據提供支持（數(shù)據接口）

5、平時如何管理你的項目姚垃？

先期團隊必須確定好全局樣式（globe.css）念链，編碼模式(utf-8) 等；

編寫習慣必須一致（例如都是采用繼承式的寫法积糯，單樣式都寫成一行）掂墓；

標注樣式編寫人，各模塊都及時標注（標注關鍵樣式調用的地方）絮宁；

頁面進行標注（例如 頁面 模塊 開始和結束）梆暮；

CSS跟HTML?分文件夾并行存放，命名都得統(tǒng)一（例如style.css）绍昂；

JS?分文件夾存放 命名以該JS功能為準的英文翻譯啦粹。

圖片采用整合的?images.png png8?格式文件使用 - 盡量整合在一起使用方便將來的管理

人事面

面試完你還有什么問題要問的嗎

你有什么愛好?

你最大的優(yōu)點和缺點是什么?

你為什么會選擇這個行業(yè)偿荷，職位?

你覺得你適合從事這個崗位嗎?

你有什么職業(yè)規(guī)劃?

你對工資有什么要求?

如何看待前端開發(fā)？

未來三到五年的規(guī)劃是怎樣的唠椭？

常問

自我介紹

你的項目中技術難點是什么跳纳？遇到了什么問題？你是怎么解決的贪嫂？

你認為哪個項目做得最好寺庄？

最近在看哪些前端方面的書？

平時是如何學習前端開發(fā)的力崇？

你最有成就感的一件事

你是怎么學習前端的