轉載自https://www.cnblogs.com/zhangshuda/p/8465892.html，感謝原博主javascript
一、javascript的typeof返回哪些數據類型php
Ｏbject number function boolean underfind;css
2.例舉3種強制類型轉換和2種隱式類型轉換?html
- 強制（parseInt,parseFloat,number）隱式（== – ===）；
3.數組方法pop() push() unshift() shift()前端
- Push()尾部添加 pop()尾部刪除
- Unshift()頭部添加 shift()頭部刪除
4.ajax請求的時候get 和post方式的區別?vue
- 一個在url後面 一個放在虛擬載體裏面
有大小限制- 安全問題
應用不一樣 一個是論壇等只須要請求的，一個是相似修改密碼的;
5.call和apply的區別java
- Object.call(this,obj1,obj2,obj3)
- Object.apply(this,arguments)
6.ajax請求時，如何解釋json數據node
- 使用eval parse,鑑於安全性考慮 使用parse更靠譜;
7.事件委託是什麼react
- 讓利用事件冒泡的原理，讓本身的所觸發的事件，讓他的父元素代替執行！
8.閉包是什麼，有什麼特性，對頁面有什麼影響?簡要介紹你理解的閉包jquery
- 閉包就是可以讀取其餘函數內部變量的函數。
9.添加 刪除 替換 插入到某個接點的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
10.說一下什麼是javascript的同源策略？
- 一段腳本只能讀取來自於同一來源的窗口和文檔的屬性，這裏的同一來源指的是主機名、協議和端口號的組合
十一、編寫一個b繼承a的方法;
|
1
2
3
4
5
6
7
8
9
10
11
|
function
A(name){
this
.name = name;
this
.sayHello =
function
(){alert(
this
.name+」 say Hello!」);};
}
function
B(name,id){
this
.temp = A;
this
.temp(name);
//至關於new A();
delete
this
.temp;
this
.id = id;
this
.checkId =
function
(ID){alert(
this
.id==ID)};
}
|
12.如何阻止事件冒泡和默認事件
|
1
2
3
4
5
6
7
|
function
stopBubble(e)
{
if
(e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=
true
}
|
1三、下面程序執行後彈出什麼樣的結果?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
function
fn() {
this
.a = 0;
this
.b =
function
() {
alert(
this
.a)
}
}
fn.prototype = {
b:
function
() {
this
.a = 20;
alert(
this
.a);
},
c:
function
() {
this
.a = 30;
alert(
this
.a);
}
}
var
myfn =
new
fn();
myfn.b();
myfn.c();
|
1四、.談談This對象的理解。
this是js的一個關鍵字，隨着函數使用場合不一樣，this的值會發生變化。
可是有一個總原則，那就是this指的是調用函數的那個對象。
this通常狀況下：是全局對象Global。 做爲方法調用，那麼this就是指這個對象
1五、下面運行的結果
|
1
2
3
4
5
6
7
8
9
10
11
|
function
fun(n,o) {
console.log(o)
return
{
fun:
function
(m){
return
fun(m,n);
}
};
}
var
a = fun(0); a.fun(1); a.fun(2); a.fun(3);
var
b = fun(0).fun(1).fun(2).fun(3);
var
c = fun(0).fun(1); c.fun(2); c.fun(3);<br><br>
//a: undefined,0,0,0<br>//b: undefined,0,1,2<br>//c: undefined,0,1,1
|
1六、下面程序的輸出結果
|
1
2
3
4
5
6
7
8
9
|
var
name =
'World!'
;
(
function
() {
if
(
typeof
name ===
'undefined'
) {
var
name =
'Jack'
;
console.log(
'Goodbye '
+ name);
}
else
{
console.log(
'Hello '
+ name);
}
})();
|
1七、HTTP協議
1八、事件委託機制
原理：使用事件委託技術能讓你避免對特定的每一個節點添加事件監聽器；相反，事件監聽器是被添加到它們的父元素上，利用冒泡的原理，把事件加到父級上，觸發執行效果。
優勢
經過上面的介紹，你們應該可以體會到使用事件委託對於web應用程序帶來的幾個優勢：
1.能夠大量節省內存佔用，減小事件註冊。
2.能夠方便地動態添加和修改元素，不須要由於元素的改動而修改事件綁定。
3.JavaScript和DOM節點之間的關聯變少了，這樣也就減小了因循環引用而帶來的內存泄漏發生的機率。
缺點：
不是全部的事件都能冒泡的。blur、focus、load和unload不能像其它事件同樣冒泡。事實上blur和focus能夠用事件捕獲而非事件冒泡的方法得到（在IE以外的其它瀏覽器中）。
在管理鼠標事件的時候有些須要注意的地方。若是你的代碼處理mousemove事件的話你趕上性能瓶頸的風險可就大了，由於mousemove事件觸發很是頻繁。而mouseout則由於其怪異的表現而變得很難用事件代理來管理。
1九、緩存
20、閉包
2一、垃圾回收
2二、異步機制
2三、算法
2四、addEventListener幾個參數幹嗎的，都有神馬類型，參數裏是否還有其餘類型
一、閉包
-
閉包就是可以讀取其餘函數內部變量的函數
-
閉包是指有權訪問另外一個函數做用域中變量的函數，建立閉包的最多見的方式就是在一個函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量,利用閉包能夠突破做用鏈域
-
閉包的特性：
- 函數內再嵌套函數
- 內部函數能夠引用外層的參數和變量
- 參數和變量不會被垃圾回收機制回收
說說你對閉包的理解
-
使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。在js中，函數即閉包，只有函數纔會產生做用域的概念
-
閉包 的最大用處有兩個，一個是能夠讀取函數內部的變量，另外一個就是讓這些變量始終保持在內存中
-
閉包的另外一個用處，是封裝對象的私有屬性和私有方法
-
好處：可以實現封裝和緩存等；
-
壞處：就是消耗內存、不正當使用會形成內存溢出的問題
使用閉包的注意點
- 因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露
- 解決方法是，在退出函數以前，將不使用的局部變量所有刪除
二、說說你對做用域鏈的理解
- 做用域鏈的做用是保證執行環境裏有權訪問的變量和函數是有序的，做用域鏈的變量只能向上訪問，變量訪問到
window對象即被終止，做用域鏈向下訪問變量是不被容許的 - 簡單的說，做用域就是變量與函數的可訪問範圍，即做用域控制着變量與函數的可見性和生命週期
三、JavaScript原型，原型鏈 ? 有什麼特色？
-
每一個對象都會在其內部初始化一個屬性，就是
prototype(原型)，當咱們訪問一個對象的屬性時 -
若是這個對象內部不存在這個屬性，那麼他就會去
prototype裏找這個屬性，這個prototype又會有本身的prototype，因而就這樣一直找下去，也就是咱們平時所說的原型鏈的概念 -
關係：
instance.constructor.prototype = instance.__proto__ -
特色：
JavaScript對象是經過引用來傳遞的，咱們建立的每一個新對象實體中並無一份屬於本身的原型副本。當咱們修改原型時，與之相關的對象也會繼承這一改變
-
當咱們須要一個屬性的時，
Javascript引擎會先看當前對象中是否有這個屬性， 若是沒有的 -
就會查找他的
Prototype對象是否有這個屬性，如此遞推下去，一直檢索到Object內建對象
四、請解釋什麼是事件代理
- 事件代理（
Event Delegation），又稱之爲事件委託。是JavaScript中經常使用綁定事件的經常使用技巧。顧名思義，「事件代理」便是把本來須要綁定的事件委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是能夠提升性能 - 能夠大量節省內存佔用，減小事件註冊，好比在
table上代理全部td的click事件就很是棒 - 能夠實現當新增子對象時無需再次對其綁定
五、Javascript如何實現繼承？
-
構造繼承
-
原型繼承
-
實例繼承
-
拷貝繼承
-
原型
prototype機制或apply和call方法去實現較簡單，建議使用構造函數與原型混合方式
function Parent(){ this.name = 'wang'; } function Child(){ this.age = 28; } Child.prototype = new Parent();//繼承了Parent，經過原型 var demo = new Child(); alert(demo.age); alert(demo.name);//獲得被繼承的屬性 }
六、談談This對象的理解
this老是指向函數的直接調用者（而非間接調用者）- 若是有
new關鍵字，this指向new出來的那個對象 - 在事件中，
this指向觸發這個事件的對象，特殊的是，IE中的attachEvent中的this老是指向全局對象Window
七、事件模型
W3C中定義事件的發生經歷三個階段：捕獲階段（capturing）、目標階段（targetin）、冒泡階段（bubbling）
- 冒泡型事件：當你使用事件冒泡時，子級元素先觸發，父級元素後觸發
- 捕獲型事件：當你使用事件捕獲時，父級元素先觸發，子級元素後觸發
DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件- 阻止冒泡：在
W3c中，使用stopPropagation（）方法；在IE下設置cancelBubble = true - 阻止捕獲：阻止事件的默認行爲，例如
click - <a>後的跳轉。在W3c中，使用preventDefault（）方法，在IE下設置window.event.returnValue = false
八、new操做符具體幹了什麼呢?
- 建立一個空對象，而且
this變量引用該對象，同時還繼承了該函數的原型 - 屬性和方法被加入到
this引用的對象中 - 新建立的對象由
this所引用，而且最後隱式的返回this
九、Ajax原理
Ajax的原理簡單來講是在用戶和服務器之間加了—箇中間層(AJAX引擎)，經過XmlHttpRequest對象來向服務器發異步請求，從服務器得到數據，而後用javascript來操做DOM而更新頁面。使用戶操做與服務器響應異步化。這其中最關鍵的一步就是從服務器得到請求數據Ajax的過程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心機制
// 1. 建立鏈接 var xhr = null; xhr = new XMLHttpRequest() // 2. 鏈接服務器 xhr.open('get', url, true) // 3. 發送請求 xhr.send(null); // 4. 接受請求 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ success(xhr.responseText); } else { // fail fail && fail(xhr.status); } } }
ajax 有那些優缺點?
- 優勢：
- 經過異步模式，提高了用戶體驗.
- 優化了瀏覽器和服務器之間的傳輸，減小沒必要要的數據往返，減小了帶寬佔用.
Ajax在客戶端運行，承擔了一部分原本由服務器承擔的工做，減小了大用戶量下的服務器負載。Ajax能夠實現動態不刷新（局部刷新）
- 缺點：
- 安全問題
AJAX暴露了與服務器交互的細節。 - 對搜索引擎的支持比較弱。
- 不容易調試。
- 安全問題
十、如何解決跨域問題?
jsonp、iframe、window.name、window.postMessage、服務器上設置代理頁面
十一、模塊化開發怎麼作？
- 當即執行函數,不暴露私有成員
var module1 = (function(){ var _count = 0; var m1 = function(){ //... }; var m2 = function(){ //... }; return { m1 : m1, m2 : m2 }; })();
十二、異步加載JS的方式有哪些？
- defer，只支持
IE async：- 建立
script，插入到DOM中，加載完畢後callBack
1三、那些操做會形成內存泄漏？
- 內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在
setTimeout的第一個參數使用字符串而非函數的話，會引起內存泄漏- 閉包使用不當
1四、XML和JSON的區別？
-
數據體積方面
JSON相對於XML來說，數據的體積小，傳遞的速度更快些。
-
數據交互方面
JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互
-
數據描述方面
JSON對數據的描述性比XML較差
-
傳輸速度方面
JSON的速度要遠遠快於XML
1五、談談你對webpack的見解
WebPack是一個模塊打包工具，你能夠使用WebPack管理你的模塊依賴，並編繹輸出模塊們所需的靜態文件。它可以很好地管理、打包Web開發中所用到的HTML、Javascript、CSS以及各類靜態文件（圖片、字體等），讓開發過程更加高效。對於不一樣類型的資源，webpack有對應的模塊加載器。webpack模塊打包器會分析模塊間的依賴關係，最後 生成了優化且合併後的靜態資源
1六、說說你對AMD和Commonjs的理解
CommonJS是服務器端模塊的規範，Node.js採用了這個規範。CommonJS規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。AMD規範則是非同步加載模塊，容許指定回調函數AMD推薦的風格經過返回一個對象作爲模塊對象，CommonJS的風格經過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的
1七、常見web安全及防禦原理
-
sql注入原理- 就是經過把
SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令
- 就是經過把
-
總的來講有如下幾點
- 永遠不要信任用戶的輸入，要對用戶的輸入進行校驗，能夠經過正則表達式，或限制長度，對單引號和雙
"-"進行轉換等 - 永遠不要使用動態拼裝SQL，能夠使用參數化的
SQL或者直接使用存儲過程進行數據查詢存取 - 永遠不要使用管理員權限的數據庫鏈接，爲每一個應用使用單獨的權限有限的數據庫鏈接
- 不要把機密信息明文存放，請加密或者
hash掉密碼和敏感的信息
- 永遠不要信任用戶的輸入，要對用戶的輸入進行校驗，能夠經過正則表達式，或限制長度，對單引號和雙
XSS原理及防範
Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面裏插入惡意html標籤或者javascript代碼。好比：攻擊者在論壇中放一個看似安全的連接，騙取用戶點擊後，竊取cookie中的用戶私密信息；或者攻擊者在論壇中加一個惡意表單，當用戶提交表單的時候，卻把信息傳送到攻擊者的服務器中，而不是用戶本來覺得的信任站點
XSS防範方法
- 首先代碼裏對用戶輸入的地方和變量都須要仔細檢查長度和對
」<」,」>」,」;」,」’」等字符作過濾；其次任何內容寫到頁面以前都必須加以encode，避免不當心把html tag弄出來。這一個層面作好，至少能夠堵住超過一半的XSS 攻擊
XSS與CSRF有什麼區別嗎？
-
XSS是獲取信息，不須要提早知道其餘用戶頁面的代碼和數據包。CSRF是代替用戶完成指定的動做，須要知道其餘用戶頁面的代碼和數據包。要完成一次CSRF攻擊，受害者必須依次完成兩個步驟 -
登陸受信任網站
A，並在本地生成Cookie -
在不登出
A的狀況下，訪問危險網站B
CSRF的防護
- 服務端的
CSRF方式方法不少樣，但總的思想都是一致的，就是在客戶端頁面增長僞隨機數 - 經過驗證碼的方法
1八、用過哪些設計模式？
-
工廠模式：
- 工廠模式解決了重複實例化的問題，但還有一個問題,那就是識別問題，由於根本沒法
- 主要好處就是能夠消除對象間的耦合，經過使用工程方法而不是
new關鍵字
-
構造函數模式
- 使用構造函數的方法，即解決了重複實例化的問題，又解決了對象識別的問題，該模式與工廠模式的不一樣之處在於
- 直接將屬性和方法賦值給
this對象;
1九、爲何要有同源限制？
- 同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議
- 舉例說明：好比一個黑客程序，他利用
Iframe把真正的銀行登陸頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登陸時，他的頁面就能夠經過Javascript讀取到你的表單中input中的內容，這樣用戶名，密碼就輕鬆到手了。
20、offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區別
offsetWidth/offsetHeight返回值包含content + padding + border，效果與e.getBoundingClientRect()相同clientWidth/clientHeight返回值只包含content + padding，若是有滾動條，也不包含滾動條scrollWidth/scrollHeight返回值包含content + padding + 溢出內容的尺寸
2一、javascript有哪些方法定義對象
- 對象字面量：
var obj = {}; - 構造函數：
var obj = new Object(); - Object.create():
var obj = Object.create(Object.prototype);
2二、常見兼容性問題？
png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8- 瀏覽器默認的
margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一,，可是全局效率很低，通常是以下這樣解決：
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屬性.
2二、說說你對promise的瞭解
-
依照
Promise/A+的定義，Promise有四種狀態：-
pending:初始狀態, 非fulfilled或rejected. -
fulfilled:成功的操做. -
rejected:失敗的操做. -
settled: Promise已被fulfilled或rejected，且不是pending
-
-
另外，
fulfilled與rejected一塊兒合稱settled -
Promise對象用來進行延遲(deferred) 和異步(asynchronous) 計算
Promise 的構造函數
- 構造一個
Promise，最基本的用法以下：
var promise = new Promise(function(resolve, reject) { if (...) { // succeed resolve(result); } else { // fails reject(Error(errMessage)); } });
Promise實例擁有then方法（具備then方法的對象，一般被稱爲thenable）。它的使用方法以下：
promise.then(onFulfilled, onRejected)
- 接收兩個函數做爲參數，一個在
fulfilled的時候被調用，一個在rejected的時候被調用，接收參數就是future，onFulfilled對應resolve,onRejected對應reject
2三、你以爲jQuery源碼有哪些寫的好的地方
jquery源碼封裝在一個匿名函數的自執行環境中，有助於防止變量的全局污染，而後經過傳入window對象參數，能夠使window對象做爲局部變量使用，好處是當jquery中訪問window對象的時候，就不用將做用域鏈退回到頂層做用域了，從而能夠更快的訪問window對象。一樣，傳入undefined參數，能夠縮短查找undefined時的做用域鏈jquery將一些原型屬性和方法封裝在了jquery.prototype中，爲了縮短名稱，又賦值給了jquery.fn，這是很形象的寫法- 有一些數組或對象的方法常常能使用到，
jQuery將其保存爲局部變量以提升訪問速度 jquery實現的鏈式調用能夠節約代碼，所返回的都是同一個對象，能夠提升代碼效率
2四、vue、react、angular
-
Vue.js
一個用於建立web交互界面的庫，是一個精簡的MVVM。它經過雙向數據綁定把View層和Model層鏈接了起來。實際的DOM封裝和輸出格式都被抽象爲了Directives和Filters -
AngularJS
是一個比較完善的前端MVVM框架，包含模板，數據雙向綁定，路由，模塊化，服務，依賴注入等全部功能，模板功能強大豐富，自帶了豐富的Angular指令 -
react
React僅僅是VIEW層是facebook公司。推出的一個用於構建UI的一個庫，可以實現服務器端的渲染。用了virtual dom，因此性能很好。
2五、Node的應用場景
-
特色：
- 一、它是一個
Javascript運行環境 - 二、依賴於
Chrome V8引擎進行代碼解釋 - 三、事件驅動
- 四、非阻塞
I/O - 五、單進程，單線程
- 一、它是一個
-
優勢：
- 高併發（最重要的優勢）
-
缺點：
- 一、只支持單
核CPU，不能充分利用CPU - 二、可靠性低，一旦代碼某個環節崩潰，整個系統都崩潰
- 一、只支持單
2六、談談你對AMD、CMD的理解
-
CommonJS是服務器端模塊的規範，Node.js採用了這個規範。CommonJS規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。AMD規範則是非同步加載模塊，容許指定回調函數 -
AMD推薦的風格經過返回一個對象作爲模塊對象，CommonJS的風格經過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的
2七、那些操做會形成內存泄漏？
- 內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在
-
setTimeout的第一個參數使用字符串而非函數的話，會引起內存泄漏 - 閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）
2八、web開發中會話跟蹤的方法有哪些
cookiesession-
url重寫 - 隱藏
input -
ip地址
2九、介紹js的基本數據類型
-
Undefined、Null、Boolean、Number、String
30、介紹js有哪些內置對象？
-
Object是JavaScript中全部對象的父對象 - 數據封裝類對象：
Object、Array、Boolean、Number和String - 其餘對象：
Function、Arguments、Math、Date、RegExp、Error
3一、說幾條寫JavaScript的基本規範？
- 不要在同一行聲明多個變量
- 請使用
===/!==來比較true/false或者數值 - 使用對象字面量替代
new Array這種形式 - 不要使用全局函數
-
Switch語句必須帶有default分支 -
If語句必須使用大括號 -
for-in循環中的變量 應該使用var關鍵字明確限定做用域，從而避免做用域污
3二、JavaScript有幾種類型的值？，你能畫一下他們的內存圖嗎？
- 棧：原始數據類型（
Undefined，Null，Boolean，Number、String） - 堆：引用數據類型（對象、數組和函數）
- 兩種類型的區別是：存儲位置不一樣；
- 原始數據類型直接存儲在棧(
stack)中的簡單數據段，佔據空間小、大小固定，屬於被頻繁使用數據，因此放入棧中存儲； - 引用數據類型存儲在堆(
heap)中的對象,佔據空間大、大小不固定,若是存儲在棧中，將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其 - 在棧中的地址，取得地址後從堆中得到實體
3三、javascript建立對象的幾種方式？
javascript建立對象簡單的說,無非就是使用內置對象或各類自定義對象，固然還能夠用JSON；但寫法有不少種，也能混合使用
- 對象字面量的方式
person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};
- 用
function來模擬無參的構造函數
function Person(){} var person=new Person();//定義一個function，若是使用new"實例化",該function能夠看做是一個Class person.name="Mark"; person.age="25"; person.work=function(){ alert(person.name+" hello..."); } person.work();
- 用
function來模擬參構造函數來實現（用this關鍵字定義構造的上下文屬性）
function Pet(name,age,hobby){ this.name=name;//this做用域：當前對象 this.age=age; this.hobby=hobby; this.eat=function(){ alert("我叫"+this.name+",我喜歡"+this.hobby+",是個程序員"); } } var maidou =new Pet("麥兜",25,"coding");//實例化、建立對象 maidou.eat();//調用eat方法
- 用工廠方式來建立（內置對象）
var wcDog =new Object(); wcDog.name="旺財"; wcDog.age=3; wcDog.work=function(){ alert("我是"+wcDog.name+",汪汪汪......"); } wcDog.work();
- 用原型方式來建立
function Dog(){ } Dog.prototype.name="旺財"; Dog.prototype.eat=function(){ alert(this.name+"是個吃貨"); } var wangcai =new Dog(); wangcai.eat();
- 用混合方式來建立
function Car(name,price){ this.name=name; this.price=price; } Car.prototype.sell=function(){ alert("我是"+this.name+"，我如今賣"+this.price+"萬元"); } var camry =new Car("凱美瑞",27); camry.sell();
3四、eval是作什麼的？
- 它的功能是把對應的字符串解析成
JS代碼並運行 - 應該避免使用
eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行） - 由
JSON字符串轉換爲JSON對象的時候能夠用eval，var obj =eval('('+ str +')')
3五、null，undefined 的區別？
-
undefined表示不存在這個值。 -
undefined:是一個表示"無"的原始值或者說表示"缺乏值"，就是此處應該有一個值，可是尚未定義。當嘗試讀取時會返回undefined -
例如變量被聲明瞭，但沒有賦值時，就等於
undefined -
null表示一個對象被定義了，值爲「空值」 -
null: 是一個對象(空對象, 沒有任何屬性和方法) -
例如做爲函數的參數，表示該函數的參數不是對象；
-
在驗證
null時，必定要使用===，由於==沒法分別null和undefined
3六、["1", "2", "3"].map(parseInt) 答案是多少？
[1, NaN, NaN]由於parseInt須要兩個參數(val, radix)，其中radix表示解析時用的基數。map傳了3個(element, index, array)，對應的radix不合法致使解析失敗。
3七、javascript 代碼中的"use strict";是什麼意思 ? 使用它區別是什麼？
use strict是一種ECMAscript 5添加的（嚴格）運行模式,這種模式使得 Javascript 在更嚴格的條件下運行,使JS編碼更加規範化的模式,消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲
3八、JSON 的瞭解？
-
JSON(JavaScript Object Notation)是一種輕量級的數據交換格式 -
它是基於
JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小 -
JSON字符串轉換爲JSON對象:
var obj =eval('('+ str +')'); var obj = str.parseJSON(); var obj = JSON.parse(str);
JSON對象轉換爲JSON字符串：
var last=obj.toJSONString(); var last=JSON.stringify(obj);
3九、js延遲加載的方式有哪些？
defer和async、動態建立DOM方式（用得最多）、按需異步載入js
40、同步和異步的區別?
- 同步：瀏覽器訪問服務器請求，用戶看獲得頁面刷新，從新發請求,等請求完，頁面刷新，新內容出現，用戶看到新內容,進行下一步操做
- 異步：瀏覽器訪問服務器請求，用戶正常操做，瀏覽器後端進行請求。等請求完，頁面不刷新，新內容也會出現，用戶看到新內容
4一、漸進加強和優雅降級
-
漸進加強 ：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
-
優雅降級 ：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容
4二、defer和async
defer並行加載js文件，會按照頁面上script標籤的順序執行async並行加載js文件，下載完成當即執行，不會按照頁面上script標籤的順序執行
4三、說說嚴格模式的限制
- 變量必須聲明後再使用
- 函數的參數不能有同名屬性，不然報錯
- 不能使用
with語句 - 禁止
this指向全局對象
4四、attribute和property的區別是什麼？
attribute是dom元素在文檔中做爲html標籤擁有的屬性；property就是dom元素在js中做爲對象擁有的屬性。- 對於
html的標準屬性來講，attribute和property是同步的，是會自動更新的 - 可是對於自定義的屬性來講，他們是不一樣步的
4五、談談你對ES6的理解
- 新增模板字符串（爲
JavaScript提供了簡單的字符串插值功能） - 箭頭函數
for-of（用來遍歷數據—例如數組中的值。）arguments對象可被不定參數和默認參數完美代替。ES6將promise對象歸入規範，提供了原生的Promise對象。- 增長了
let和const命令，用來聲明變量。 - 增長了塊級做用域。
let命令實際上就增長了塊級做用域。- 還有就是引入
module模塊的概念
4六、ECMAScript6 怎麼寫class麼，爲何會出現class這種東西?
- 這個語法糖可讓有
OOP基礎的人更快上手js，至少是一個官方的實現了 - 但對熟悉
js的人來講，這個東西沒啥大影響；一個Object.creat()搞定繼承，比class簡潔清晰的多
4七、什麼是面向對象編程及面向過程編程，它們的異同和優缺點
- 面向過程就是分析出解決問題所須要的步驟，而後用函數把這些步驟一步一步實現，使用的時候一個一個依次調用就能夠了
- 面向對象是把構成問題事務分解成各個對象，創建對象的目的不是爲了完成一個步驟，而是爲了描敘某個事物在整個解決問題的步驟中的行爲
- 面向對象是以功能來劃分問題，而不是步驟
4八、面向對象編程思想
- 基本思想是使用對象，類，繼承，封裝等基本概念來進行程序設計
- 優勢
- 易維護
- 採用面向對象思想設計的結構，可讀性高，因爲繼承的存在，即便改變需求，那麼維護也只是在局部模塊，因此維護起來是很是方便和較低成本的
- 易擴展
- 開發工做的重用性、繼承性高，下降重複工做量。
- 縮短了開發週期
- 易維護
4九、對web標準、可用性、可訪問性的理解
- 可用性（Usability）：產品是否容易上手，用戶可否完成任務，效率如何，以及這過程當中用戶的主觀感覺可好，是從用戶的角度來看產品的質量。可用性好意味着產品質量高，是企業的核心競爭力
- 可訪問性（Accessibility）：Web內容對於殘障用戶的可閱讀和可理解性
- 可維護性（Maintainability）：通常包含兩個層次，一是當系統出現問題時，快速定位並解決問題的成本，成本低則可維護性好。二是代碼是否容易被人理解，是否容易修改和加強功能。
50、如何經過JS判斷一個數組？
instanceof方法instanceof運算符是用來測試一個對象是否在其原型鏈原型構造函數的屬性
var arr = []; arr instanceof Array; // true
constructor方法constructor屬性返回對建立此對象的數組函數的引用，就是返回對象相對應的構造函數
var arr = []; arr.constructor == Array; //true
- 最簡單的方法
- 這種寫法，是
jQuery正在使用的
- 這種寫法，是
Object.prototype.toString.call(value) == '[object Array]' // 利用這個方法，能夠寫一個返回數據類型的方法 var isType = function (obj) { return Object.prototype.toString.call(obj).slice(8,-1); }
ES5新增方法isArray()
var a = new Array(123); var b = new Date(); console.log(Array.isArray(a)); //true console.log(Array.isArray(b)); //false
5一、談一談let與var的區別？
let命令不存在變量提高，若是在let前使用，會致使報錯- 若是塊區中存在
let和const命令，就會造成封閉做用域 - 不容許重複聲明，所以，不能在函數內部從新聲明參數
5二、map與forEach的區別？
- forEach方法，是最基本的方法，就是遍歷與循環，默認有3個傳參：分別是遍歷的數組內容item、數組索引index、和當前遍歷數組Array
- map方法，基本用法與forEach一致，可是不一樣的，它會返回一個新的數組，因此在callback須要有return值，若是沒有，會返回undefined
5三、談一談你理解的函數式編程？
- 簡單說，"函數式編程"是一種"編程範式"（programming paradigm），也就是如何編寫程序的方法論
- 它具備如下特性：閉包和高階函數、惰性計算、遞歸、函數是"第一等公民"、只用"表達式"
5四、談一談箭頭函數與普通函數的區別？
- 函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象
- 不能夠看成構造函數，也就是說，不能夠使用new命令，不然會拋出一個錯誤
- 不能夠使用arguments對象，該對象在函數體內不存在。若是要用，能夠用Rest參數代替
- 不能夠使用yield命令，所以箭頭函數不能用做Generator函數
5五、談一談函數中this的指向吧？
-
this的指向在函數定義的時候是肯定不了的，只有函數執行的時候才能肯定this到底指向誰，實際上this的最終指向的是那個調用它的對象
-
《javascript語言精髓》中大概歸納了4種調用方式：
-
方法調用模式
-
函數調用模式
-
構造器調用模式
graph LR A-->B
- apply/call調用模式
5六、異步編程的實現方式？
-
回調函數
- 優勢：簡單、容易理解
- 缺點：不利於維護，代碼耦合高
-
事件監聽(採用時間驅動模式，取決於某個事件是否發生)：
- 優勢：容易理解，能夠綁定多個事件，每一個事件能夠指定多個回調函數
- 缺點：事件驅動型，流程不夠清晰
-
發佈/訂閱(觀察者模式)
- 相似於事件監聽，可是能夠經過‘消息中心’，瞭解如今有多少發佈者，多少訂閱者
-
Promise對象
- 優勢：能夠利用then方法，進行鏈式寫法；能夠書寫錯誤時的回調函數；
- 缺點：編寫和理解，相對比較難
-
Generator函數
- 優勢：函數體內外的數據交換、錯誤處理機制
- 缺點：流程管理不方便
-
async函數
- 優勢：內置執行器、更好的語義、更廣的適用性、返回的是Promise、結構清晰。
- 缺點：錯誤處理機制
5七、對原生Javascript瞭解程度
- 數據類型、運算、對象、Function、繼承、閉包、做用域、原型鏈、事件、
RegExp、JSON、Ajax、DOM、BOM、內存泄漏、跨域、異步裝載、模板引擎、前端MVC、路由、模塊化、Canvas、ECMAScript
5八、Js動畫與CSS動畫區別及相應實現
CSS3的動畫的優勢- 在性能上會稍微好一些，瀏覽器會對
CSS3的動畫作一些優化 - 代碼相對簡單
- 在性能上會稍微好一些，瀏覽器會對
- 缺點
- 在動畫控制上不夠靈活
- 兼容性很差
JavaScript的動畫正好彌補了這兩個缺點，控制能力很強，能夠單幀的控制、變換，同時寫得好徹底能夠兼容IE6，而且功能強大。對於一些複雜控制的動畫，使用javascript會比較靠譜。而在實現一些小的交互動效的時候，就多考慮考慮CSS吧
5九、JS 數組和對象的遍歷方式，以及幾種方式的比較
一般咱們會用循環的方式來遍歷數組。可是循環是 致使js 性能問題的緣由之一。通常咱們會採用下幾種方式來進行數組的遍歷
-
for in循環 -
for循環 -
forEach- 這裏的
forEach回調中兩個參數分別爲value，index forEach沒法遍歷對象- IE不支持該方法；
Firefox和chrome支持 forEach沒法使用break，continue跳出循環，且使用return是跳過本次循環
- 這裏的
-
這兩種方法應該很是常見且使用很頻繁。但實際上，這兩種方法都存在性能問題
-
在方式一中，
for-in須要分析出array的每一個屬性，這個操做性能開銷很大。用在key已知的數組上是很是不划算的。因此儘可能不要用for-in，除非你不清楚要處理哪些屬性，例如JSON對象這樣的狀況 -
在方式2中，循環每進行一次，就要檢查一下數組長度。讀取屬性（數組長度）要比讀局部變量慢，尤爲是當
array裏存放的都是DOM元素，由於每次讀取都會掃描一遍頁面上的選擇器相關元素，速度會大大下降
60、gulp是什麼？
gulp是前端開發過程當中一種基於流的代碼構建工具，是自動化項目的構建利器；它不只能對網站資源進行優化，並且在開發過程當中不少重複的任務可以使用正確的工具自動完成- Gulp的核心概念：流
- 流，簡單來講就是創建在面向對象基礎上的一種抽象的處理數據的工具。在流中，定義了一些處理數據的基本操做，如讀取數據，寫入數據等，程序員是對流進行全部操做的，而不用關心流的另外一頭數據的真正流向
- gulp正是經過流和代碼優於配置的策略來儘可能簡化任務編寫的工做
- Gulp的特色：
- 易於使用：經過代碼優於配置的策略，gulp 讓簡單的任務簡單，複雜的任務可管理
- 構建快速 利用
Node.js流的威力，你能夠快速構建項目並減小頻繁的IO操做 - 易於學習 經過最少的
API，掌握gulp絕不費力，構建工做盡在掌握：如同一系列流管道
6一、說一下Vue的雙向綁定數據的原理
vue.js則是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調
$jQuery
一、你以爲jQuery或zepto源碼有哪些寫的好的地方
- jquery源碼封裝在一個匿名函數的自執行環境中，有助於防止變量的全局污染，而後經過傳入window對象參數，能夠使window對象做爲局部變量使用，好處是當jquery中訪問window對象的時候，就不用將做用域鏈退回到頂層做用域了，從而能夠更快的訪問window對象。一樣，傳入undefined參數，能夠縮短查找undefined時的做用域鏈
(function( window, undefined ) { //用一個函數域包起來，就是所謂的沙箱 //在這裏邊var定義的變量，屬於這個函數域內的局部變量，避免污染全局 //把當前沙箱須要的外部變量經過函數參數引入進來 //只要保證參數對內提供的接口的一致性，你還能夠隨意替換傳進來的這個參數 window.jQuery = window.$ = jQuery; })( window );
- jquery將一些原型屬性和方法封裝在了jquery.prototype中，爲了縮短名稱，又賦值給了jquery.fn，這是很形象的寫法
- 有一些數組或對象的方法常常能使用到，jQuery將其保存爲局部變量以提升訪問速度
- jquery實現的鏈式調用能夠節約代碼，所返回的都是同一個對象，能夠提升代碼效率
二、jQuery 的實現原理？
-
(function(window, undefined) {})(window); -
jQuery利用JS函數做用域的特性，採用當即調用表達式包裹了自身，解決命名空間和變量污染問題 -
window.jQuery = window.$ = jQuery; -
在閉包當中將 jQuery 和 $ 綁定到 window 上，從而將 jQuery 和 $ 暴露爲全局變量
三、jQuery.fn 的 init 方法返回的 this 指的是什麼對象？ 爲何要返回 this？
- jQuery.fn 的 init 方法 返回的 this 就是 jQuery 對象
- 用戶使用 jQuery() 或 $() 便可初始化 jQuery 對象，不須要動態的去調用 init 方法
四、jQuery.extend 與 jQuery.fn.extend 的區別？
$.fn.extend()和$.extend()是jQuery爲擴展插件提拱了兩個方法$.extend(object); // 爲jQuery添加「靜態方法」（工具方法）
$.extend({
min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); $.min(2,3); // 2 $.max(4,5); // 5
- $.extend([true,] targetObject, object1[, object2]); // 對targt對象進行擴展
var settings = {validate:false, limit:5}; var options = {validate:true, name:"bar"}; $.extend(settings, options); // 注意：不支持第一個參數傳 false // settings == {validate:true, limit:5, name:"bar"}
$.fn.extend(json); // 爲jQuery添加「成員函數」（實例方法）
$.fn.extend({
alertValue: function() { $(this).click(function(){ alert($(this).val()); }); } }); $("#email").alertValue();
五、jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？
-
淺拷貝（只複製一份原始對象的引用）
var newObject = $.extend({}, oldObject); -
深拷貝（對原始對象屬性所引用的對象進行進行遞歸拷貝）
var newObject = $.extend(true, {}, oldObject);
六、jQuery 的隊列是如何實現的？隊列能夠用在哪些地方？
- jQuery 核心中有一組隊列控制方法，由
queue()/dequeue()/clearQueue()三個方法組成。 - 主要應用於
animate()，ajax，其餘要按時間順序執行的事件中
var func1 = function(){alert('事件1');} var func2 = function(){alert('事件2');} var func3 = function(){alert('事件3');} var func4 = 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 // 獲取隊列事件（返回一個函數數組） $('#box').queue("queue1"); // [func3(), func4()] // 出棧隊列事件並執行 $('#box').dequeue("queue1"); // return func3 and do func3 $('#box').dequeue("queue1"); // return func4 and do func4 // 清空整個隊列 $('#box').clearQueue("queue1"); // delete queue1 with clearQueue
七、jQuery 中的 bind(), live(), delegate(), on()的區別？
bind直接綁定在目標元素上live經過冒泡傳播事件，默認document上，支持動態數據delegate更精確的小範圍使用事件代理，性能優於 liveon是最新的1.9版本整合了以前的三種方式的新事件綁定機制
八、是否知道自定義事件？ jQuery 裏的 fire 函數是什麼意思，何時用？
- 事件即「發佈/訂閱」模式，自定義事件即「消息發佈」，事件的監聽即「訂閱訂閱」
- JS 原生支持自定義事件，示例：
document.createEvent(type); // 建立事件 event.initEvent(eventType, canBubble, prevent); // 初始化事件 target.addEventListener('dataavailable', handler, false); // 監聽事件 target.dispatchEvent(e); // 觸發事件
- jQuery 裏的 fire 函數用於調用 jQuery 自定義事件列表中的事件
九、jQuery 經過哪一個方法和 Sizzle 選擇器結合的？
Sizzle選擇器採起Right To Left的匹配模式，先搜尋全部匹配標籤，再判斷它的父節點jQuery經過$(selecter).find(selecter);和Sizzle選擇器結合
十、jQuery 中如何將數組轉化爲 JSON 字符串，而後再轉化回來？
// 經過原生 JSON.stringify/JSON.parse 擴展 jQuery 實現 $.array2json = function(array) { return JSON.stringify(array); } $.json2array = function(array) { // $.parseJSON(array); // 3.0 開始，已過期 return JSON.parse(array); } // 調用 var json = $.array2json(['a', 'b', 'c']); var array = $.json2array(json);
十一、jQuery 一個對象能夠同時綁定多個事件，這是如何實現的？
$("#btn").on("mouseover mouseout", func); $("#btn").on({ mouseover: func1, mouseout: func2, click: func3 });
十二、針對 jQuery 的優化方法？
- 緩存頻繁操做
DOM對象 - 儘可能使用
id選擇器代替class選擇器 - 老是從
#id選擇器來繼承 - 儘可能使用鏈式操做
- 使用時間委託
on綁定事件 - 採用
jQuery的內部函數data()來存儲數據 - 使用最新版本的
jQuery
1三、jQuery 的 slideUp 動畫，當鼠標快速連續觸發, 動畫會滯後反覆執行，該如何處理呢?
- 在觸發元素上的事件設置爲延遲處理：使用
JS原生setTimeout方法 - 在觸發元素的事件時預先中止全部的動畫，再執行相應的動畫事件：
$('.tab').stop().slideUp();
1四、jQuery UI 如何自定義組件？
- 經過向
$.widget()傳遞組件名稱和一個原型對象來完成 $.widget("ns.widgetName", [baseWidget], widgetPrototype);
1五、jQuery 與 jQuery UI、jQuery Mobile 區別？
-
jQuery是JS庫，兼容各類PC瀏覽器，主要用做更方便地處理DOM、事件、動畫、AJAX -
jQuery UI是創建在jQuery庫上的一組用戶界面交互、特效、小部件及主題 -
jQuery Mobile以jQuery爲基礎，用於建立「移動Web應用」的框架
1六、jQuery 和 Zepto 的區別？ 各自的使用場景？
jQuery主要目標是PC的網頁中，兼容所有主流瀏覽器。在移動設備方面，單獨推出 `jQuery MobileZepto從一開始就定位移動設備，相對更輕量級。它的API基本兼容jQuery`，但對PC瀏覽器兼容不理想
1七、jQuery對象的特色
- 只有
JQuery對象才能使用JQuery方法 JQuery對象是一個數組對象
$編程題
一、寫一個通用的事件偵聽器函數
// event(事件)工具集，來源：github.com/markyun markyun.Event = { // 視能力分別使用dom0||dom2||IE方式 來綁定事件 // 參數： 操做的元素,事件名稱 ,事件處理程序 addEvent : function(element, type, handler) { if (element.addEventListener) { //事件類型、須要執行的函數、是否捕捉 element.addEventListener(type, handler, false); } else if (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); } else if (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) { return event.target || event.srcElement; }
二、如何判斷一個對象是否爲數組
function isArray(arg) { if (typeof arg === 'object') { return Object.prototype.toString.call(arg) === '[object Array]'; } return false; }
三、冒泡排序
- 每次比較相鄰的兩個數，若是後一個比前一個小，換位置
var arr = [3, 1, 4, 6, 5, 7, 2]; function bubbleSort(arr) { for (var i = 0; i < arr.length - 1; i++) { for(var j = 0; j < arr.length - 1; j++) { if(arr[j + 1] < arr[j]) { var temp; temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } return arr; } console.log(bubbleSort(arr));
四、快速排序
- 採用二分法，取出中間數，數組每次和中間數比較，小的放到左邊，大的放到右邊
var arr = [3, 1, 4, 6, 5, 7, 2]; function quickSort(arr) { if(arr.length == 0) { return []; // 返回空數組 } var cIndex = Math.floor(arr.length / 2); var c = arr.splice(cIndex, 1); var l = []; var r = []; for (var i = 0; i < arr.length; i++) { if(arr[i] < c) { l.push(arr[i]); } else { r.push(arr[i]); } } return quickSort(l).concat(c, quickSort(r)); } console.log(quickSort(arr));
五、編寫一個方法 求一個字符串的字節長度
- 假設：一個英文字符佔用一個字節，一箇中文字符佔用兩個字節
function GetBytes(str){ var len = str.length; var bytes = len; for(var i=0; i<len; i++){ if (str.charCodeAt(i) > 255) bytes++; } return bytes; } alert(GetBytes("你好,as"));
六、bind的用法，以及如何實現bind的函數和須要注意的點
-
bind的做用與call和apply相同，區別是call和apply是當即調用函數，而bind是返回了一個函數，須要調用的時候再執行。
一個簡單的bind函數實現以下
Function.prototype.bind = function(ctx) { var fn = this; return function() { fn.apply(ctx, arguments); }; };
$其餘
一、談談你對重構的理解
-
網站重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。也就是說是在不改變UI的狀況下，對網站進行優化， 在擴展的同時保持一致的UI
-
對於傳統的網站來講重構一般是：
-
表格(
table)佈局改成DIV+CSS -
使網站前端兼容於現代瀏覽器(針對於不合規範的
CSS、如對IE6有效的) -
對於移動平臺的優化
-
針對於
SEO進行優化
-
二、什麼樣的前端代碼是好的
- 高複用低耦合，這樣文件小，好維護，並且好擴展。
三、對前端工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？
-
前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近
- 實現界面交互
- 提高用戶體驗
- 有了Node.js，前端能夠實現服務端的一些事情
-
前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，
-
與團隊成員，
UI設計，產品經理的溝通； -
作好的頁面結構，頁面重構和用戶體驗；
四、你以爲前端工程的價值體如今哪
-
爲簡化用戶使用提供技術支持（交互部分）
-
爲多個瀏覽器兼容性提供支持
-
爲提升用戶瀏覽速度（瀏覽器性能）提供支持
-
爲跨平臺或者其餘基於webkit或其餘渲染引擎的應用提供支持
-
爲展現數據提供支持（數據接口）
五、平時如何管理你的項目？
-
先期團隊必須肯定好全局樣式（
globe.css），編碼模式(utf-8) 等； -
編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；
-
標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；
-
頁面進行標註（例如 頁面 模塊 開始和結束）；
-
CSS跟HTML分文件夾並行存放，命名都得統一（例如style.css）； -
JS分文件夾存放 命名以該JS功能爲準的英文翻譯。 -
圖片採用整合的
images.png png8格式文件使用 - 儘可能整合在一塊兒使用方便未來的管理
介紹一下JS的數據類型？
簡單類型：String、Number、Boolean、Null、Undefined
複雜類型：Object
ES6新增類型：Symbol（感謝TimeTraveler指出）
&
擴展：
- null與undefined有什麼區別
答：null表示一個對象被定義了，值爲「空值」，而undefined表示不存在這個值。
正由於這個緣由，因此使用typeof判斷是，null返回的是object，而undefined返回的是undefined。(判斷二者時須要使用===嚴格判斷) - Boolean類型在進行判斷的時候設置爲 0、-0、null、""、false、undefined 或 NaN，則該對象設置爲 false。不然設置爲 true（即便 value 參數是字符串 "false"）
如何經過JS判斷一個數組？
- instanceof方法
instanceof運算符是用來測試一個對象是否在其原型鏈原型構造函數的屬性。var arr = []; arr instanceof Array; // true - constructor方法
constructor屬性返回對建立此對象的數組函數的引用，就是返回對象相對應的構造函數。var arr = []; arr.constructor == Array; //true - 特性判斷法
利用判斷數組獨有的length和splice方法，可是這是不靠譜的，由於對象也能添加方法和屬性。那怎麼辦了，有一個辦法，能夠利用數組的length屬性無法枚舉來判斷。function isArray(object){ return object && typeof object==='object' && typeof object.length==='number' && typeof object.splice==='function' && //判斷length屬性是不是可枚舉的 對於數組 將獲得false !(object.propertyIsEnumerable('length')); } - 最簡單的方法
這種寫法，是 jQuery 正在使用的，淘寶的 kissy 也是使用這種方式。Object.prototype.toString.call(value) == '[object Array]' // 利用這個方法，能夠寫一個返回數據類型的方法 var isType = function (obj) { return Object.prototype.toString.call(obj).slice(8,-1); } - ES5新增方法isArray()
var a = new Array(123); var b = new Date(); console.log(Array.isArray(a)); //true console.log(Array.isArray(b)); //false&
擴展：- 使用
instaceof和construcor，被判斷的array必須是在當前頁面聲明的。好比，一個頁面（父頁面）有一個框架，框架中引用了一個頁面（子頁面），在子頁面中聲明瞭一個array，並將其賦值給父頁面的一個變量，這時判斷該變量，Array == object.constructor;會返回false。 - 最簡單的方法，在IE6下判斷
null和undefined，有一些bug，判斷undefined和null均爲Object，(並非bug，是在ES3的標準下返回的就爲Object)
- 使用
談一談你理解的函數式編程？
what？函數編程就是函數編程啊，還有什麼理解？？
如今查了一下，才知道，原來沒有那麼簡單！！！
簡單說，"函數式編程"是一種"編程範式"（programming paradigm），也就是如何編寫程序的方法論。
它具備如下特性：閉包和高階函數、惰性計算、遞歸、函數是"第一等公民"、只用"表達式"，不用"語句"(都會有返回值)、沒有"反作用"、不修改狀態、引用透明性。
具體的特性表明了什麼，我還要好好研究一下！！
如今查了一下，才知道，原來沒有那麼簡單！！！
簡單說，"函數式編程"是一種"編程範式"（programming paradigm），也就是如何編寫程序的方法論。
它具備如下特性：閉包和高階函數、惰性計算、遞歸、函數是"第一等公民"、只用"表達式"，不用"語句"(都會有返回值)、沒有"反作用"、不修改狀態、引用透明性。
具體的特性表明了什麼，我還要好好研究一下！！
談一談箭頭函數與普通函數的區別？
- 箭頭函數使得表達更加簡潔。(這個是廢話)
- 函數體內的
this對象，就是定義時所在的對象，而不是使用時所在的對象。 - 不能夠看成構造函數，也就是說，不能夠使用
new命令，不然會拋出一個錯誤。 - 不能夠使用
arguments對象，該對象在函數體內不存在。若是要用，能夠用Rest參數代替。 - 不能夠使用
yield命令，所以箭頭函數不能用做Generator函數。
談一談閉包吧？
「閉包」，是指那些可以訪問獨立(自由)變量的函數 (變量在本地使用，但定義在一個封閉的做用域中)。換句話說，這些函數能夠「記憶」它被建立時候的環境。特性：
- 函數嵌套函數
- 函數內部能夠引用外部的參數和變量
- 參數和變量不會被垃圾回收機制回收
異步編程的實現方式？
- 回調函數：
- 優勢：簡單、容易理解
- 缺點：不利於維護，代碼耦合高
- 事件監聽(採用時間驅動模式，取決於某個事件是否發生)：
- 優勢：容易理解，能夠綁定多個事件，每一個事件能夠指定多個回調函數
- 缺點：事件驅動型，流程不夠清晰
- 發佈/訂閱(觀察者模式)：
- 相似於事件監聽，可是能夠經過‘消息中心’，瞭解如今有多少發佈者，多少訂閱者。
- Promise對象
- 優勢：能夠利用then方法，進行鏈式寫法；能夠書寫錯誤時的回調函數；
- 缺點：編寫和理解，相對比較難
- Generator函數
- 優勢：函數體內外的數據交換、錯誤處理機制
- 缺點：流程管理不方便
- async函數
- 優勢：內置執行器、更好的語義、更廣的適用性、返回的是Promise、結構清晰。
- 缺點：錯誤處理機制
安全問題，如 XSS 和 CSRF
- XSS：跨站腳本攻擊，是一種網站應用程序的安全漏洞攻擊，是代碼注入的一種。常見方式是將惡意代碼注入合法代碼裏隱藏起來，再誘發惡意代碼，從而進行各類各樣的非法活動。
防範：記住一點 「全部用戶輸入都是不可信的」，因此得作輸入過濾和轉義
- CSRF：跨站請求僞造，也稱 XSRF，是一種挾制用戶在當前已登陸的Web應用程序上執行非本意的操做的攻擊方法。與 XSS 相比，XSS利用的是用戶對指定網站的信任，CSRF利用的是網站對用戶網頁瀏覽器的信任。
防範：用戶操做驗證（驗證碼），額外驗證機制（token使用）等
1.幾種基本數據類型?複雜數據類型?值類型和引用數據類型?堆棧數據結構?
基本數據類型：Undefined、Null、Boolean、Number、String
值類型：數值、布爾值、null、undefined。
引用類型：對象、數組、函數。
堆棧數據結構：是一種支持後進先出(LIFO)的集合,即後被插入的數據,先被取出!
js數組中提供瞭如下幾個方法可讓咱們很方便實現堆棧：
shift:從數組中把第一個元素刪除，並返回這個元素的值。
unshift: 在數組的開頭添加一個或更多元素，並返回新的長度
push:在數組的中末尾添加元素，並返回新的長度
pop:從數組中把最後一個元素刪除，並返回這個元素的值。
2.聲明函數做用提高?聲明變量和聲明函數的提高有什麼區別?
(1) 變量聲明提高：變量申明在進入執行上下文就完成了。
只要變量在代碼中進行了聲明，不管它在哪一個位置上進行聲明， js引擎都會將它的聲明放在範圍做用域的頂部；
(2) 函數聲明提高：執行代碼以前會先讀取函數聲明，意味着能夠把函數申明放在調用它的語句後面。
只要函數在代碼中進行了聲明，不管它在哪一個位置上進行聲明， js引擎都會將它的聲明放在範圍做用域的頂部；
(3) 變量or函數聲明：函數聲明會覆蓋變量聲明，但不會覆蓋變量賦值。
同一個名稱標識a，即有變量聲明var a，又有函數聲明function a() {}，無論兩者聲明的順序，函數聲明會覆蓋變量聲明，也就是說，此時a的值是聲明的函數function a() {}。注意：若是在變量聲明的同時初始化a，或是以後對a進行賦值，此時a的值變量的值。eg: var a; var c = 1; a = 1; function a() { return true; } console.log(a);
3.判斷數據類型?
typeof返回的類型都是字符串形式，能夠判斷function的類型；在判斷除Object類型的對象時比較方便。
判斷已知對象類型的方法： instanceof，後面必定要是對象類型，而且大小寫不能錯，該方法適合一些條件選擇或分支。
4.異步編程？
方法1：回調函數，優勢是簡單、容易理解和部署，缺點是不利於代碼的閱讀和維護，各個部分之間高度耦合（Coupling），流程會很混亂，並且每一個任務只能指定一個回調函數。
方法2：時間監聽，能夠綁定多個事件，每一個事件能夠指定多個回調函數，並且能夠「去耦合」（Decoupling），有利於實現模塊化。缺點是整個程序都要變成事件驅動型，運行流程會變得很不清晰。
方法3：發佈/訂閱，性質與「事件監聽」相似，可是明顯優於後者。
方法4：Promises對象，是CommonJS工做組提出的一種規範，目的是爲異步編程提供統一接口。
簡單說，它的思想是，每個異步任務返回一個Promise對象，該對象有一個then方法，容許指定回調函數。
5.事件流?事件捕獲？事件冒泡？
事件流：從頁面中接收事件的順序。也就是說當一個事件產生時，這個事件的傳播過程，就是事件流。
IE中的事件流叫事件冒泡；事件冒泡：事件開始時由最具體的元素接收，而後逐級向上傳播到較爲不具體的節點（文檔）。對於html來講，就是當一個元素產生了一個事件，它會把這個事件傳遞給它的父元素，父元素接收到了以後，還要繼續傳遞給它的上一級元素，就這樣一直傳播到document對象（親測如今的瀏覽器到window對象，只有IE8及下不這樣
事件捕獲是不太具體的元素應該更早接受到事件，而最具體的節點應該最後接收到事件。他們的用意是在事件到達目標以前就捕獲它；也就是跟冒泡的過程正好相反，以html的click事件爲例，document對象（DOM級規範要求從document開始傳播，可是如今的瀏覽器是從window對象開始的）最早接收到click事件的而後事件沿着DOM樹依次向下傳播，一直傳播到事件的實際目標；
6.如何清除一個定時器?
window.clearInterval();
window.clearTimeout();
7.如何添加一個dom對象到body中?innerHTML和innerText區別?
body.appendChild(dom元素)；
innerHTML:從對象的起始位置到終止位置的所有內容,包括Html標籤。
innerText:從起始位置到終止位置的內容, 但它去除Html標籤
分別簡述五個window對象、屬性
成員對象
window.event window.document window.history
window.screen window.navigator window.external
Window對象的屬性以下：
window //窗戶自身
window.self //引用本窗戶window=window.self
window.name //爲窗戶命名
window.defaultStatus //設定窗戶狀態欄信息
window.location //URL地址,配備佈置這個屬性能夠打開新的頁面
8.數據持久化技術(ajax)?簡述ajax流程
1)客戶端產生js的事件
2)建立XMLHttpRequest對象
3)對XMLHttpRequest進行配置
4)經過AJAX引擎發送異步請求
5)服務器端接收請求而且處理請求，返回html或者xml內容
6)XML調用一個callback()處理響應回來的內容
7)頁面局部刷新
9.回調函數?
回調函數就是一個經過函數指針調用的函數。若是你把函數的指針（地址）做爲參數傳遞給另外一個函數，當這個指針被用來調用其所指向的函數時，咱們就說這是回調函數。回調函數不是由該函數的實現方直接調用，而是在特定的事件或條件發生時由另外的一方調用的，用於對該事件或條件進行響應。
10.什麼是閉包?* 堆棧溢出有什麼區別？ 內存泄漏? 那些操做會形成內存泄漏？怎麼樣防止內存泄漏？
閉包：就是可以讀取其餘函數內部變量的函數。
堆棧溢出：就是不顧堆棧中分配的局部數據塊大小，向該數據塊寫入了過多的數據，致使數據越界，結果覆蓋了別的數據。常常會在遞歸中發生。
內存泄露是指：用動態存儲分配函數內存空間，在使用完畢後未釋放，致使一直佔據該內存單元。直到程序結束。指任何對象在您再也不擁有或須要它以後仍然存在。
形成內存泄漏：
setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。
閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）
防止內存泄露：
一、不要動態綁定事件；
二、不要在動態添加，或者會被動態移除的dom上綁事件，用事件冒泡在父容器監聽事件；
三、若是要違反上面的原則，必須提供destroy方法，保證移除dom後事件也被移除，這點能夠參考Backbone的源代碼，作的比較好；
四、單例化，少建立dom，少綁事件。
11.平時工做中怎麼樣進行數據交互?若是後臺沒有提供數據怎麼樣進行開發?mock數據與後臺返回的格式不一樣意怎麼辦?
由後臺編寫接口文檔、提供數據接口實、前臺經過ajax訪問實現數據交互；
在沒有數據的狀況下尋找後臺提供靜態數據或者本身定義mock數據；
返回數據不統一時編寫映射文件 對數據進行映射。
12 簡述ajax執行流程
基本步驟： var xhr =null;//建立對象 if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open(「方式」,」地址」,」標誌位」);//初始化請求 xhr.setRequestHeader(「」,」」);//設置http頭信息 xhr.onreadystatechange =function(){}//指定回調函數 xhr.send();//發送請求
13.自執行函數?用於什麼場景？好處?
自執行函數:一、聲明一個匿名函數二、立刻調用這個匿名函數。
做用：建立一個獨立的做用域。
好處：防止變量彌散到全局，以避免各類js庫衝突。隔離做用域避免污染，或者截斷做用域鏈，避免閉包形成引用變量沒法釋放。利用當即執行特性，返回須要的業務函數或對象，避免每次經過條件判斷來處理
場景：通常用於框架、插件等場景
14.html和xhtml有什麼區別?
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的標記語言。
1.XHTML 元素必須被正確地嵌套。
2.XHTML 元素必須被關閉。
3.標籤名必須用小寫字母。
4.空標籤也必須被關閉。
5.XHTML 文檔必須擁有根元素。
15. 什麼是構造函數？與普通函數有什麼區別?
構造函數：是一種特殊的方法、主要用來建立對象時初始化對象，總與new運算符一塊兒使用，建立對象的語句中構造函數的函數名必須與類名徹底相同。
與普通函數相比只能由new關鍵字調用，構造函數是類的標示
16. 經過new建立一個對象的時候，函數內部有哪些改變
function Person(){} Person.prototype.friend = []; Person.prototype.name = ''; // var a = new Person(); // a.friend[0] = '王琦'; // a.name = '程嬌'; // var b = new Person(); // b.friend？ // b.name?
一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。
二、屬性和方法被加入到 this 引用的對象中。
三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。
17.事件委託？有什麼好處?
（1）利用冒泡的原理，把事件加到父級上，觸發執行效果
（2）好處：新添加的元素還會有以前的事件；提升性能。
18.window.onload ==? DOMContentLoaded ?
通常狀況下，DOMContentLoaded事件要在window.onload以前執行，當DOM樹構建完成的時候就會執行DOMContentLoaded事件，而window.onload是在頁面載入完成的時候，才執行，這其中包括圖片等元素。大多數時候咱們只是想在DOM樹構建完成後，綁定事件到元素，咱們並不須要圖片元素，加上有時候加載外域圖片的速度很是緩慢。
19.節點類型?判斷當前節點類型?
1. 元素節點
2. 屬性節點
3. 文本節點
8. 註釋節點
9. 文檔節點
經過nodeObject.nodeType判斷節點類型：其中，nodeObject 爲DOM節點（節點對象）。該屬性返回以數字表示的節點類型，例如，元素節點返回 1，屬性節點返回 2 。
20.如何合併兩個數組？數組刪除一個元素?
//三種方法。 （1）var arr1=[1,2,3]; var arr2=[4,5,6]; arr1 = arr1.concat(arr2); console.log(arr1); （2）var arr1=[1,2,3]; var arr2=[4,5,6]; Array.prototype.push.apply(arr1,arr2); console.log(arr1); （3）var arr1=[1,2,3]; var arr2=[4,5,6]; for (var i=0; i < arr2.length; i++) { arr1.push( arr2[i] ); } console.log(arr1);
21.強制轉換 顯式轉換 隱式轉換?
//強制類型轉換： Boolean(0) // => false - 零 Boolean(new object()) // => true - 對象 Number(undefined) // => NaN Number(null) // => 0 String(null) // => "null" parseInt( ) parseFloat( ) JSON.parse( ) JSON.stringify ( )
隱式類型轉換：
在使用算術運算符時，運算符兩邊的數據類型能夠是任意的，好比，一個字符串能夠和數字相加。之因此不一樣的數據類型之間能夠作運算，是由於JavaScript引擎在運算以前會悄悄的把他們進行了隱式類型轉換的
（例如：x+"" //等價於String(x)
+x //等價於Number(x)
x-0 //同上
!!x //等價於Boolean(x),是雙歎號）
顯式轉換：
若是程序要求必定要將某一類型的數據轉換爲另外一種類型，則能夠利用強制類型轉換運算符進行轉換，這種強制轉換過程稱爲顯示轉換。
顯示轉換是你定義讓這個值類型轉換成你要用的值類型，是底到高的轉換。例 int 到float就能夠直接轉，int i=5,想把他轉換成char類型，就用顯式轉換（char）i
22. Jq中如何實現多庫並存?
Noconfict 多庫共存就是「$ 」符號的衝突。
方法一： 利用jQuery的實用函數$.noConflict();這個函數歸還$的名稱控制權給另外一個庫，所以能夠在頁面上使用其餘庫。這時，咱們能夠用"jQuery "這個名稱調用jQuery的功能。 $.noConflict();
jQuery('#id').hide();
.....
//或者給jQuery一個別名
var $j=jQuery
$j('#id').hide();
.....
方法二： (function($){})(jQuery)
方法三： jQuery(function($){})
經過傳遞一個函數做爲jQuery的參數，所以把這個函數聲明爲就緒函數。 咱們聲明$爲就緒函數的參數，由於jQuery老是吧jQuery對象的引用做爲第一個參數傳遞，因此就保證了函數的執行。
23.Jq中get和eq有什麼區別？
get() :取得其中一個匹配的元素。num表示取得第幾個匹配的元素，get多針對集合元素，返回的是DOM對象組成的數組 eq():獲取第N個元素，下標都是從0開始，返回的是一個JQuery對象
24.如何經過原生js 判斷一個元素當前是顯示仍是隱藏狀態?
if( document.getElementById("div").css("display")==='none') if( document.getElementById("div").css("display")==='block') $("#div").is(":hidden"); // 判斷是否隱藏 $("#div").is(":visible")
25.Jq如何判斷元素顯示隱藏？
//第一種：使用CSS屬性 var display =$('#id').css('display'); if(display == 'none'){ alert("我是隱藏的！"); } //第二種：使用jquery內置選擇器 <div id="test"> <p>僅僅是測試所用</p> </div> if($("#test").is(":hidden")){ $("#test").show(); //若是元素爲隱藏,則將它顯現 }else{ $("#test").hide(); //若是元素爲顯現,則將其隱藏 } //第三種：jQuery判斷元素是否顯示 是否隱藏 var node=$('#id'); if(node.is(':hidden')){ //若是node是隱藏的則顯示node元素，不然隱藏 node.show(); }else{ node.hide(); }
26.移動端上什麼是點擊穿透?
點擊穿透現象有3種：
點擊穿透問題：點擊蒙層（mask）上的關閉按鈕，蒙層消失後發現觸發了按鈕下面元素的click事件跨頁面點擊穿透問題：若是按鈕下面剛好是一個有href屬性的a標籤，那麼頁面就會發生跳轉另外一種跨頁面點擊穿透問題：此次沒有mask了，直接點擊頁內按鈕跳轉至新頁，而後發現新頁面中對應位置元素的click事件被觸發了
解決方案：
一、只用touch
最簡單的解決方案，完美解決點擊穿透問題
把頁面內全部click所有換成touch事件（ touchstart 、’touchend’、’tap’）
二、只用click
下下策，由於會帶來300ms延遲，頁面內任何一個自定義交互都將增長300毫秒延遲
三、tap後延遲350ms再隱藏mask
改動最小，缺點是隱藏mask變慢了，350ms仍是能感受到慢的
四、pointer-events
比較麻煩且有缺陷， 不建議使用mask隱藏後，給按鈕下面元素添上 pointer-events: none; 樣式，讓click穿過去，350ms後去掉這個樣式，恢復響應缺陷是mask消失後的的350ms內，用戶能夠看到按鈕下面的元素點着沒反應，若是用戶手速很快的話必定會發現
27.Jq綁定事件的幾種方式？on bind ?
jQuery中提供了四種事件監聽方式，分別是bind、live、delegate、on，對應的解除監聽的函數分別是unbind、die、undelegate、off
Bind( )是使用頻率較高的一種，做用就是在選擇到的元素上綁定特定事件類型的監聽函數;
Live( )能夠對後生成的元素也能夠綁定相應的事件,處理機制就是把事件綁定在DOM樹的根節點上，而不是直接綁定在某個元素上;
Delegate( )採用了事件委託的概念，不是直接爲子元素綁定事件，而是爲其父元素（或祖先元素也可）綁定事件，當在div內任意元素上點擊時，事件會一層層從event target向上冒泡，直至到達你爲其綁定事件的元素；
on( )方法能夠綁定動態添加到頁面元素的事件，on()方法綁定事件能夠提高效率；
28.Jq中如何將一個jq對象轉化爲dom對象？
方法一：
jQuery對象是一個數據對象，能夠經過[index]的方法，來獲得相應的DOM對象。
如：var $v =$("#v") ; //jQuery對象
var v=$v[0]; //DOM對象
alert(v.checked) //檢測這個checkbox是否被選中
方法二：
jQuery自己提供，經過.get(index)方法，獲得相應的DOM對象
如：var $v=$("#v"); //jQuery對象
var v=$v.get(0); //DOM對象
alert(v.checked) //檢測這個checkbox是否被選中
29.Jq中有幾種選擇器?分別是什麼?
層疊選擇器、基本過濾選擇器、內容過濾選擇器、可視化過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單元素選擇器、表單元素過濾選擇器
30.Jq中怎麼樣編寫插件?
//第一種是類級別的插件開發： //1.1 添加一個新的全局函數 添加一個全局函數，咱們只需以下定義： jQuery.foo = function() { alert('This is a test. This is only a test.'); }; //1.2 增長多個全局函數 添加多個全局函數，可採用以下定義： jQuery.foo = function() { alert('This is a test. This is only a test.'); }; jQuery.bar = function(param) { alert('This function takes a parameter, which is "' + param + '".'); }; 調用時和一個函數的同樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar'); //1.3 使用jQuery.extend(object); jQuery.extend({ foo: function() { alert('This is a test. This is only a test.'); }, bar: function(param) { alert('This function takes a parameter, which is "' + param +'".'); } }); //1.4 使用命名空間 // 雖然在jQuery命名空間中，咱們禁止使用了大量的javaScript函數名和變量名。 // 可是仍然不可避免某些函數或變量名將於其餘jQuery插件衝突，所以咱們習慣將一些方法 // 封裝到另外一個自定義的命名空間。 jQuery.myPlugin = { foo:function() { alert('This is a test. This is only a test.'); }, bar:function(param) { alert('This function takes a parameter, which is "' + param + '".'); } }; //採用命名空間的函數仍然是全局函數，調用時採用的方法： $.myPlugin.foo(); $.myPlugin.bar('baz'); //經過這個技巧（使用獨立的插件名），咱們能夠避免命名空間內函數的衝突。 //第二種是對象級別的插件開發 //形式1： (function($){ $.fn.extend({ pluginName:function(opt,callback){ // Our plugin implementation code goes here. } }) })(jQuery); //形式2： (function($) { $.fn.pluginName = function() { // Our plugin implementation code goes here. }; })(jQuery); //形參是$，函數定義完成以後,把jQuery這個實參傳遞進去.當即調用執行。 //這樣的好處是,咱們在寫jQuery插件時,也能夠使用$這個別名,而不會與prototype引發衝突
31.$('div+.ab')和$('.ab+div') 哪一個效率高？
$('div+.ab')效率高
32.$.map和$.each有什麼區別
map()方法主要用來遍歷操做數組和對象，會返回一個新的數組。$.map()方法適用於將數組或對象每一個項目新陣列映射到一個新數組的函數；
each()主要用於遍歷jquery對象，返回的是原來的數組，並不會新建立一個數組。
33.編寫一個 getElementsByClassName 封裝函數?
<body> <input type="submit" id = "sub" class="ss confirm btn" value="提交"/> <script> window.onload = function(){ //方法一 var Opt = document.getElementById('sub'); var getClass = function(className,tagName){ if(document.getElementsByTagName){ var Inp = document.getElementsByTagName(tagName); for(var i=0; i<Inp.length; i++){ if((new RegExp('(\\s|^)' +className +'(\\s|$)')).test(Inp[i].className)){ return Inp[i]; } } }else if(document.getElementsByClassName){ return document.getElementsByClassName(className); } } //方法二 var aa = getClass("confirm", "input"); function getClass(className, targetName){ var ele = []; var all = document.getElementsByTagName(targetName || "*"); for(var i=0; i<all.length; i++){ if(all[i].className.match(new RegExp('(\\s|^)'+confirm+'(\\s|$)'))){ ele[ele.length] = all[i]; } } return ele; } //方法三 function getObjsByClass(tagName, className){ if(document.getElementsByClassName){ alert("document.getElementsByClassName"); return document.getElementsByClassName(className); }else{ var el = []; var _el = document.getElementsByTagName(