日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

分享

各大互聯(lián)網(wǎng)公司2014前端筆試面試題–JavaScript篇 – 碼農(nóng)網(wǎng)

 Gtwo 2015-04-16

很多面試題是我自己面試BAT親身經(jīng)歷碰到的。整理分享出來希望更多的前端er共同進步吧,不僅適用于求職者,對于鞏固復習js更是大有裨益。

而更多的題目是我一路以來收集的,也有往年的,答案不確保一定正確,如有錯誤或有更好的解法,還請斧正。

前面幾題是會很基礎(chǔ),越下越有深度。

初級Javascript:

1.JavaScript是一門什么樣的語言,它有哪些特點?

沒有標準答案。

2.JavaScript的數(shù)據(jù)類型都有什么?

基本數(shù)據(jù)類型:String,boolean,Number,Undefined, Null

引用數(shù)據(jù)類型:Object(Array,Date,RegExp,Function)

那么問題來了,如何判斷某變量是否為數(shù)組數(shù)據(jù)類型?

  • 方法一.判斷其是否具有“數(shù)組性質(zhì)”,如slice()方法??勺约航o該變量定義slice方法,故有時會失效
  • 方法二.obj instanceof Array 在某些IE版本中不正確
  • 方法三.方法一二皆有漏洞,在ECMA Script5中定義了新方法Array.isArray(), 保證其兼容性,最好的方法如下:
1 if(typeof Array.isArray==="undefined")
2 {
3   Array.isArray = function(arg){
4         return Object.prototype.toString.call(arg)==="[object Array]"
5     };  
6 }

3.已知ID的Input輸入框,希望獲取這個輸入框的輸入值,怎么做?(不使用第三方框架)

1 document.getElementById(“ID”).value

4.希望獲取到頁面中所有的checkbox怎么做?(不使用第三方框架)

1 var domList = document.getElementsByTagName(‘input’)
2 var checkBoxList = [];
3 var len = domList.length;  //緩存到局部變量
4 while (len--) {  //使用while的效率會比for循環(huán)更高
5   if (domList[len].type == ‘checkbox’) {
6       checkBoxList.push(domList[len]);
7   }
8 }

5.設置一個已知ID的DIV的html內(nèi)容為xxxx,字體顏色設置為黑色(不使用第三方框架)

1 var dom = document.getElementById(“ID”);
2 dom.innerHTML = “xxxx”
3 dom.style.color = “#000”

6.當一個DOM節(jié)點被點擊時候,我們希望能夠執(zhí)行一個函數(shù),應該怎么做?

  •  直接在DOM里綁定事件:<div onclick=”test()”></div>
  •  在JS里通過onclick綁定:xxx.onclick = test
  •  通過事件添加進行綁定:addEventListener(xxx, ‘click’, test)

那么問題來了,Javascript的事件流模型都有什么?

  • “事件冒泡”:事件開始由最具體的元素接受,然后逐級向上傳播
  • “事件捕捉”:事件由最不具體的節(jié)點先接收,然后逐級向下,一直到最具體的
  • “DOM事件流”:三個階段:事件捕捉,目標階段,事件冒泡

7.什么是Ajax和JSON,它們的優(yōu)缺點。

Ajax是異步JavaScript和XML,用于在Web頁面中實現(xiàn)異步數(shù)據(jù)交互。

優(yōu)點:

  •  可以使得頁面不重載全部內(nèi)容的情況下加載局部內(nèi)容,降低數(shù)據(jù)傳輸量
  •  避免用戶不斷刷新或者跳轉(zhuǎn)頁面,提高用戶體驗

缺點:

  •  對搜索引擎不友好(
  •  要實現(xiàn)ajax下的前后退功能成本較大
  •  可能造成請求數(shù)的增加
  •  跨域問題限制

JSON是一種輕量級的數(shù)據(jù)交換格式,ECMA的一個子集

優(yōu)點:輕量級、易于人的閱讀和編寫,便于機器(JavaScript)解析,支持復合數(shù)據(jù)類型(數(shù)組、對象、字符串、數(shù)字)

8.看下列代碼輸出為何?解釋原因。

1 var a;
2 alert(typeof a); // undefined
3 alert(b); // 報錯

解釋:Undefined是一個只有一個值的數(shù)據(jù)類型,這個值就是“undefined”,在使用var聲明變量但并未對其賦值進行初始化時,這個變量的值就是undefined。而b由于未聲明將報錯。注意未申明的變量和聲明了未賦值的是不一樣的。

9.看下列代碼,輸出什么?解釋原因。

1 var a = null;
2 alert(typeof a); //object

解釋:null是一個只有一個值的數(shù)據(jù)類型,這個值就是null。表示一個空指針對象,所以用typeof檢測會返回”object”。

10.看下列代碼,輸出什么?解釋原因。

1 var undefined;
2 undefined == null; // true
3 1 == true;   // true
4 2 == true;   // false
5 0 == false;  // true
6 0 == '';     // true
7 NaN == NaN;  // false
8 [] == false; // true
9 [] == ![];   // true
  • undefined與null相等,但不恒等(===)
  • 一個是number一個是string時,會嘗試將string轉(zhuǎn)換為number
  • 嘗試將boolean轉(zhuǎn)換為number,0或1
  • 嘗試將Object轉(zhuǎn)換成number或string,取決于另外一個對比量的類型
  • 所以,對于0、空字符串的判斷,建議使用 “===” 。“===”會先判斷兩邊的值類型,類型不匹配時為false。

那么問題來了,看下面的代碼,輸出什么,foo的類型為什么?

1 var foo = "11"+2-"1";
2 console.log(foo);
3 console.log(typeof foo);

執(zhí)行完后foo的值為111,foo的類型為Number。

1 var foo = "11"+2+"1";    //體會加一個字符串'1' 和 減去一個字符串'1'的不同
2 console.log(foo);
3 console.log(typeof foo);

執(zhí)行完后foo的值為113,foo的類型為String。

11.看代碼給答案。

1 var a = new Object();
2 a.value = 1;
3 b = a;
4 b.value = 2;
5 alert(a.value);

答案:2(考察引用數(shù)據(jù)類型細節(jié))

12.已知數(shù)組var stringArray = [“This”, “is”, “Baidu”, “Campus”],Alert出”This is Baidu Campus”。

答案:alert(stringArray.join(“”))

已知有字符串foo=”get-element-by-id”,寫一個function將其轉(zhuǎn)化成駝峰表示法”getElementById”。

1 function combo(msg){
2     var arr=msg.split("-");
3     for(var i=1;i<arr.length;i++){
4         arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
5     }
6     msg=arr.join("");
7     return msg;
8 }

(考察基礎(chǔ)API)

13.var numberArray = [3,6,2,4,1,5]; (考察基礎(chǔ)API)

1) 實現(xiàn)對該數(shù)組的倒排,輸出[5,1,4,2,6,3]

2) 實現(xiàn)對該數(shù)組的降序排列,輸出[6,5,4,3,2,1]

1 var numberArray = [3,6,2,4,1,5];
2 
3 numberArray.reverse(); // 5,1,4,2,6,3
4 
5 numberArray.sort(function(a,b){  //6,5,4,3,2,1
6    return b-a; 
7 })

14.輸出今天的日期,以YYYY-MM-DD的方式,比如今天是2014年9月26日,則輸出2014-09-26

 1 var d = new Date();
 2 // 獲取年,getFullYear()返回4位的數(shù)字
 3 var year = d.getFullYear();
 4 // 獲取月,月份比較特殊,0是1月,11是12月
 5 var month = d.getMonth() + 1;
 6 // 變成兩位
 7 month = month < 10 ? '0' + month : month;
 8 // 獲取日
 9 var day = d.getDate();
10 day = day < 10 ? '0' + day : day;
11 alert(year + '-' + month + '-' + day);

15.將字符串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替換成10,{$name}替換成Tony (使用正則表達式)

答案:”<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>”.replace(/{\$id}/g, ’10′).replace(/{\$name}/g, ‘Tony’);

16.為了保證頁面輸出安全,我們經(jīng)常需要對一些特殊的字符進行轉(zhuǎn)義,請寫一個函數(shù)escapeHtml,將<, >, &, “進行轉(zhuǎn)義

 1 function escapeHtml(str) {
 2 return str.replace(/[<>”&]/g, function(match) {
 3     switch (match) {
 4                    case “<”:
 5                       return “<”;
 6                    case “>”:
 7                       return “>”;
 8                    case “&”:
 9                       return “&”;
10                    case “\””:
11                       return “"”;
12       }
13   });
14 }

17.foo = foo||bar ,這行代碼是什么意思?為什么要這樣寫?

答案:if(!foo) foo = bar; //如果foo存在,值不變,否則把bar的值賦給foo。

短路表達式:作為”&&”和”||”操作符的操作數(shù)表達式,這些表達式在進行求值時,只要最終的結(jié)果已經(jīng)可以確定是真或假,求值過程便告終止,這稱之為短路求值。

18.看下列代碼,將會輸出什么?(變量聲明提升)

1 var foo = 1;
2 function(){
3     console.log(foo);
4     var foo = 2;
5     console.log(foo);
6 }

答案:輸出undefined 和 2。上面代碼相當于:

1 var foo = 1;
2 function(){
3     var foo;
4     console.log(foo); //undefined
5     foo = 2;
6     console.log(foo); // 2;   
7 }

函數(shù)聲明與變量聲明會被JavaScript引擎隱式地提升到當前作用域的頂部,但是只提升名稱不會提升賦值部分。

19.用js實現(xiàn)隨機選取10–100之間的10個數(shù)字,存入一個數(shù)組,并排序。

1 var iArray = []; 
2 funtion getRandom(istart, iend){
3         var iChoice = istart - iend +1;
4         return Math.floor(Math.random() * iChoice + istart;
5 }
6 for(var i=0; i<10; i++){
7         iArray.push(getRandom(10,100));
8 }
9 iArray.sort();

20.把兩個數(shù)組合并,并刪除第二個元素。

1 var array1 = ['a','b','c'];
2 var bArray = ['d','e','f'];
3 var cArray = array1.concat(bArray);
4 cArray.splice(1,1);

21.怎樣添加、移除、移動、復制、創(chuàng)建和查找節(jié)點(原生JS,實在基礎(chǔ),沒細寫每一步)

1)創(chuàng)建新節(jié)點

createDocumentFragment()    //創(chuàng)建一個DOM片段
createElement()   //創(chuàng)建一個具體的元素
createTextNode()   //創(chuàng)建一個文本節(jié)點
2)添加、移除、替換、插入
appendChild()      //添加
removeChild()      //移除
replaceChild()      //替換
insertBefore()      //插入
3)查找
getElementsByTagName()    //通過標簽名稱
getElementsByName()     //通過元素的Name屬性的值
getElementById()        //通過元素Id,唯一性

22.有這樣一個URL:http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e,請寫一段JS程序提取URL中的各個GET參數(shù)(參數(shù)名和參數(shù)個數(shù)不確定),將其按key-value形式返回到一個json結(jié)構(gòu)中,如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。

答案:

1 function serilizeUrl(url) {
2     var result = {};
3     url = url.split("?")[1];
4     var map = url.split("&");
5     for(var i = 0, len = map.length; i < len; i++) {
6         result[map[i].split("=")[0]] = map[i].split("=")[1];
7     }
8     return result;
9 }

23.正則表達式構(gòu)造函數(shù)var reg=new RegExp(“xxx”)與正則表達字面量var reg=//有什么不同?匹配郵箱的正則表達式?

答案:當使用RegExp()構(gòu)造函數(shù)的時候,不僅需要轉(zhuǎn)義引號(即\”表示”),并且還需要雙反斜杠(即\\表示一個\)。使用正則表達字面量的效率更高。 

郵箱的正則匹配:

1 var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

24.看下面代碼,給出輸出結(jié)果。

1 for(var i=1;i<=3;i++){
2   setTimeout(function(){
3       console.log(i);    
4   },0);  
5 };

答案:4 4 4。

原因:Javascript事件處理器在線程空閑之前不會運行。那么問題來了,如何讓上述代碼輸出1 2 3?

1 for(var i=1;i<=3;i++){
2    setTimeout((function(a){  //改成立即執(zhí)行函數(shù)
3        console.log(a);    
4    })(i),0);  
5 };
6 
7 1           //輸出
8 2
9 3

25.寫一個function,清除字符串前后的空格。(兼容所有瀏覽器)

使用自帶接口trim(),考慮兼容性:

1 if (!String.prototype.trim) { 
2  String.prototype.trim = function() { 
3  return this.replace(/^\s+/, "").replace(/\s+$/,"");
4  } 
5 } 
6 
7 // test the function 
8 var str = " \t\n test string ".trim(); 
9 alert(str == "test string"); // alerts "true"

26.Javascript中callee和caller的作用?

答案:

caller是返回一個對函數(shù)的引用,該函數(shù)調(diào)用了當前函數(shù);

callee是返回正在被執(zhí)行的function函數(shù),也就是所指定的function對象的正文。

那么問題來了?如果一對兔子每月生一對兔子;一對新生兔,從第二個月起就開始生兔子;假定每對兔子都是一雌一雄,試問一對兔子,第n個月能繁殖成多少對兔子?(使用callee完成)

 1 var result=[];
 2 function fn(n){  //典型的斐波那契數(shù)列
 3    if(n==1){
 4         return 1;
 5    }else if(n==2){
 6            return 1;
 7    }else{
 8         if(result[n]){
 9                 return result[n];
10         }else{
11                 //argument.callee()表示fn()
12                 result[n]=arguments.callee(n-1)+arguments.callee(n-2);
13                 return result[n];
14         }
15    }
16 }

中級Javascript:

1.實現(xiàn)一個函數(shù)clone,可以對JavaScript中的5種主要的數(shù)據(jù)類型(包括Number、String、Object、Array、Boolean)進行值復制

  • 考察點1:對于基本數(shù)據(jù)類型和引用數(shù)據(jù)類型在內(nèi)存中存放的是值還是指針這一區(qū)別是否清楚
  • 考察點2:是否知道如何判斷一個變量是什么類型的
  • 考察點3:遞歸算法的設計
 1 // 方法一:
 2 Object.prototype.clone = function(){
 3         var o = this.constructor === Array ? [] : {};
 4         for(var e in this){
 5                 o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
 6         }
 7         return o;
 8 }
 9 
10 //方法二:
11   /**
12      * 克隆一個對象
13      * @param Obj
14      * @returns
15      */ 
16     function clone(Obj) {   
17         var buf;   
18         if (Obj instanceof Array) {   
19             buf = [];                    //創(chuàng)建一個空的數(shù)組 
20             var i = Obj.length;   
21             while (i--) {   
22                 buf[i] = clone(Obj[i]);   
23             }   
24             return buf;    
25         }else if (Obj instanceof Object){   
26             buf = {};                   //創(chuàng)建一個空對象 
27             for (var k in Obj) {           //為這個對象添加新的屬性 
28                 buf[k] = clone(Obj[k]);   
29             }   
30             return buf;   
31         }else{                         //普通變量直接賦值
32             return Obj;   
33         }   
34     }

2.如何消除一個數(shù)組里面重復的元素?

 1 var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];
 2         function deRepeat(){
 3             var newArr=[];
 4             var obj={};
 5             var index=0;
 6             var l=arr.length;
 7             for(var i=0;i<l;i++){
 8                 if(obj[arr[i]]==undefined)
 9                   {
10                     obj[arr[i]]=1;
11                     newArr[index++]=arr[i];
12                   }
13                 else if(obj[arr[i]]==1)
14                   continue;
15             }
16             return newArr;
17 
18         }
19         var newArr2=deRepeat(arr);
20         alert(newArr2); //輸出1,2,3,4,5,6,9,25

3.小賢是一條可愛的小狗(Dog),它的叫聲很好聽(wow),每次看到主人的時候就會乖乖叫一聲(yelp)。從這段描述可以得到以下對象:

1 function Dog() {
2        this.wow = function() {
3                alert(’Wow’);
4       }
5        this.yelp = function() {
6               this.wow();
7       }
8 }

小芒和小賢一樣,原來也是一條可愛的小狗,可是突然有一天瘋了(MadDog),一看到人就會每隔半秒叫一聲(wow)地不停叫喚(yelp)。請根據(jù)描述,按示例的形式用代碼來實。(繼承,原型,setInterval)

答案:

 1 function MadDog() {
 2     this.yelp = function() {
 3           var self = this;          
 4           setInterval(function() {
 5                 self.wow();      
 6           }, 500);
 7       }
 8 }
 9 MadDog.prototype = new Dog();         
10 
11 //for test
12 var dog = new Dog();
13 dog.yelp();
14 var madDog = new MadDog();
15 madDog.yelp();

4.下面這個ul,如何點擊每一列的時候alert其index?(閉包)

1 <ul id=”test”>
2 <li>這是第一條</li>
3 <li>這是第二條</li>
4 <li>這是第三條</li>
5 </ul>

答案:

 1 // 方法一:
 2 var lis=document.getElementById('2223').getElementsByTagName('li');
 3 for(var i=0;i<3;i++)
 4 {
 5     lis[i].index=i;
 6     lis[i].onclick=function(){
 7         alert(this.index);
 8     };
 9 }
10 
11 //方法二:
12 var lis=document.getElementById('2223').getElementsByTagName('li');
13 for(var i=0;i<3;i++)
14 {
15     lis[i].index=i;
16     lis[i].onclick=(function(a){
17         return function() {
18             alert(a);
19         }
20     })(i);
21 }

5.編寫一個JavaScript函數(shù),輸入指定類型的選擇器(僅需支持id,class,tagName三種簡單CSS選擇器,無需兼容組合選擇器)可以返回匹配的DOM節(jié)點,需考慮瀏覽器兼容性和性能。

/*** @param selector {String} 傳入的CSS選擇器。* @return {Array}*/

答案:(過長,點擊打開)

6.請評價以下代碼并給出改進意見。

 1 if(window.addEventListener){
 2     var addListener = function(el,type,listener,useCapture){
 3         el.addEventListener(type,listener,useCapture);
 4   };
 5 }
 6 else if(document.all){
 7     addListener = function(el,type,listener){
 8         el.attachEvent("on"+type,function(){
 9           listener.apply(el);
10       });
11    }  
12 }

評價:

  • 不應該在if和else語句中聲明addListener函數(shù),應該先聲明;
  • 不需要使用window.addEventListener或document.all來進行檢測瀏覽器,應該使用能力檢測;
  • 由于attachEvent在IE中有this指向問題,所以調(diào)用它時需要處理一下

改進如下:

 1 function addEvent(elem, type, handler){
 2   if(elem.addEventListener){
 3     elem.addEventListener(type, handler, false);
 4   }else if(elem.attachEvent){
 5     elem['temp' + type + handler] = handler;
 6     elem[type + handler] = function(){
 7     elem['temp' + type + handler].apply(elem);
 8   };
 9   elem.attachEvent('on' + type, elem[type + handler]); 
10   }else{
11   elem['on' + type] = handler;
12   }
13 }

7.給String對象添加一個方法,傳入一個string類型的參數(shù),然后將string的每個字符間價格空格返回,例如:

addSpace(“hello world”) // -> ‘h e l l o  w o r l d’

1  String.prototype.spacify = function(){
2       return this.split('').join(' ');
3     };

接著上述答題,那么問題來了

1)直接在對象的原型上添加方法是否安全?尤其是在Object對象上。(這個我沒能答出?希望知道的說一下。)

2)函數(shù)聲明與函數(shù)表達式的區(qū)別?

答案:在Javscript中,解析器在向執(zhí)行環(huán)境中加載數(shù)據(jù)時,對函數(shù)聲明和函數(shù)表達式并非是一視同仁的,解析器會率先讀取函數(shù)聲明,并使其在執(zhí)行任何代碼之前可用(可以訪問),至于函數(shù)表達式,則必須等到解析器執(zhí)行到它所在的代碼行,才會真正被解析執(zhí)行。(函數(shù)聲明提升)

8.定義一個log方法,讓它可以代理console.log的方法。

可行的方法一:

1 function log(msg) {
2     console.log(msg);
3 }
4 
5 log("hello world!") // hello world!
6

如果要傳入多個參數(shù)呢?顯然上面的方法不能滿足要求,所以更好的方法是:

1 function log(){
2     console.log.apply(console, arguments);
3 };

那么問題來了,apply和call方法的異同

答案:

對于apply和call兩者在作用上是相同的,即是調(diào)用一個對象的一個方法,以另一個對象替換當前對象。將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象。

但兩者在參數(shù)上有區(qū)別的。對于第一個參數(shù)意義都一樣,但對第二個參數(shù): apply傳入的是一個參數(shù)數(shù)組,也就是將多個參數(shù)組合成為一個數(shù)組傳入,而call則作為call的參數(shù)傳入(從第二個參數(shù)開始)。 如 func.call(func1,var1,var2,var3)對應的apply寫法為:func.apply(func1,[var1,var2,var3]) 。

9.在Javascript中什么是偽數(shù)組?如何將偽數(shù)組轉(zhuǎn)化為標準數(shù)組?

答案:

偽數(shù)組(類數(shù)組):無法直接調(diào)用數(shù)組方法或期望length屬性有什么特殊的行為,但仍可以對真正數(shù)組遍歷方法來遍歷它們。典型的是函數(shù)的argument參數(shù),還有像調(diào)用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬于偽數(shù)組??梢允褂肁rray.prototype.slice.call(fakeArray)將數(shù)組轉(zhuǎn)化為真正的Array對象。

假設接第八題題干,我們要給每個log方法添加一個”(app)”前綴,比如’hello world!’ ->’(app)hello world!’。方法如下:

1  function log(){
2       var args = Array.prototype.slice.call(arguments);  //為了使用unshift數(shù)組方法,將argument轉(zhuǎn)化為真正的數(shù)組
3       args.unshift('(app)');
4 
5       console.log.apply(console, args);
6     };

10.對作用域上下文和this的理解,看下列代碼:

 1 var User = {
 2   count: 1,
 3 
 4   getCount: function() {
 5     return this.count;
 6   }
 7 };
 8 
 9 console.log(User.getCount());  // what?
10 
11 var func = User.getCount;
12 console.log(func());  // what?

問兩處console輸出什么?為什么?

答案是1和undefined。

func是在winodw的上下文中被執(zhí)行的,所以會訪問不到count屬性。

那么問題來了,如何確保Uesr總是能訪問到func的上下文,即正確返回1。

答案:正確的方法是使用Function.prototype.bind。兼容各個瀏覽器完整代碼如下:

 1 Function.prototype.bind = Function.prototype.bind || function(context){
 2    var self = this;
 3 
 4    return function(){
 5       return self.apply(context, arguments);
 6    };
 7 }
 8 
 9 var func = User.getCount.bind(User);
10 console.log(func());

11.原生JS的window.onload與Jquery的$(document).ready(function(){})有什么不同?如何用原生JS實現(xiàn)Jq的ready方法?

window.onload()方法是必須等到頁面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。

$(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行,不必等到加載完畢。

 1 /*
 2  * 傳遞函數(shù)給whenReady()
 3  * 當文檔解析完畢且為操作準備就緒時,函數(shù)作為document的方法調(diào)用
 4  */
 5 var whenReady = (function() {               //這個函數(shù)返回whenReady()函數(shù)
 6     var funcs = [];             //當獲得事件時,要運行的函數(shù)
 7     var ready = false;          //當觸發(fā)事件處理程序時,切換為true
 8     
 9     //當文檔就緒時,調(diào)用事件處理程序
10     function handler(e) {
11         if(ready) return;       //確保事件處理程序只完整運行一次
12         
13         //如果發(fā)生onreadystatechange事件,但其狀態(tài)不是complete的話,那么文檔尚未準備好
14         if(e.type === 'onreadystatechange' && document.readyState !== 'complete') {
15             return;
16         }
17         
18         //運行所有注冊函數(shù)
19         //注意每次都要計算funcs.length
20         //以防這些函數(shù)的調(diào)用可能會導致注冊更多的函數(shù)
21         for(var i=0; i<funcs.length; i++) {
22             funcs[i].call(document);
23         }
24         //事件處理函數(shù)完整執(zhí)行,切換ready狀態(tài), 并移除所有函數(shù)
25         ready = true;
26         funcs = null;
27     }
28     //為接收到的任何事件注冊處理程序
29     if(document.addEventListener) {
30         document.addEventListener('DOMContentLoaded', handler, false);
31         document.addEventListener('readystatechange', handler, false);            //IE9+
32         window.addEventListener('load', handler, false);
33     }else if(document.attachEvent) {
34         document.attachEvent('onreadystatechange', handler);
35         window.attachEvent('onload', handler);
36     }
37     //返回whenReady()函數(shù)
38     return function whenReady(fn) {
39         if(ready) { fn.call(document); }
40         else { funcs.push(fn); }
41     }
42 })();

如果上述代碼十分難懂,下面這個簡化版:

 1 function ready(fn){
 2     if(document.addEventListener) {        //標準瀏覽器
 3         document.addEventListener('DOMContentLoaded', function() {
 4             //注銷事件, 避免反復觸發(fā)
 5             document.removeEventListener('DOMContentLoaded',arguments.callee, false);
 6             fn();            //執(zhí)行函數(shù)
 7         }, false);
 8     }else if(document.attachEvent) {        //IE
 9         document.attachEvent('onreadystatechange', function() {
10             if(document.readyState == 'complete') {
11                 document.detachEvent('onreadystatechange', arguments.callee);
12                 fn();        //函數(shù)執(zhí)行
13             }
14         });
15     }
16 };

12.(設計題)想實現(xiàn)一個對頁面某個節(jié)點的拖曳?如何做?(使用原生JS)

回答出概念即可,下面是幾個要點

  1. 給需要拖拽的節(jié)點綁定mousedown, mousemove, mouseup事件
  2. mousedown事件觸發(fā)后,開始拖拽
  3. mousemove時,需要通過event.clientX和clientY獲取拖拽位置,并實時更新位置
  4. mouseup時,拖拽結(jié)束
  5. 需要注意瀏覽器邊界的情況

13.

 1 function setcookie(name,value,days){  //給cookie增加一個時間變量
 2   var exp = new Date(); 
 3   exp.setTime(exp.getTime() + days*24*60*60*1000); //設置過期時間為days天
 4   document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
 5 } 
 6 function getCookie(name){
 7   var result = "";
 8   var myCookie = ""+document.cookie+";"; 
 9   var searchName = "+name+"=";
10   var startOfCookie = myCookie.indexOf(searchName);
11   var endOfCookie;
12   if(satrtOfCookie != -1){
13     startOfcookie += searchName.length;
14     endOfCookie = myCookie.indexOf(";",startOfCookie);
15     result = (myCookie.substring(startOfCookie,endOfCookie));
16   }
17   return result;
18 }
19 (function(){
20   var oTips = document.getElementById('tips');//假設tips的id為tips
21   var page = {
22   check: function(){//檢查tips的cookie是否存在并且允許顯示
23     var tips = getCookie('tips');
24     if(!tips || tips == 'show') return true;//tips的cookie不存在
25     if(tips == "never_show_again") return false;
26   },
27   hideTip: function(bNever){
28     if(bNever) setcookie('tips', 'never_show_again', 365);
29     oTips.style.display = "none";//隱藏
30   },
31   showTip: function(){
32   oTips.style.display = "inline";//顯示,假設tips為行級元素
33   },
34   init: function(){
35     var _this = this;
36     if(this.check()){
37     _this.showTip();
38     setcookie('tips', 'show', 1);
39   }
40   oTips.onclick = function(){
41     _this.hideTip(true);
42   };
43   }
44   };
45   page.init();
46 })();

14.說出以下函數(shù)的作用是?空白區(qū)域應該填寫什么?

 1 //define 
 2 (function(window){
 3     function fn(str){
 4         this.str=str;
 5     }
 6 
 7     fn.prototype.format = function(){
 8         var arg = ______;
 9         return this.str.replace(_____,function(a,b){
10              return arg[b]||"";
11       });
12     }
13     window.fn = fn;
14 })(window);
15 
16 //use
17 (function(){
18     var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
19     console.log(t.format('http://www.alibaba.com','Alibaba','Welcome'));
20 })();

答案:訪函數(shù)的作用是使用format函數(shù)將函數(shù)的參數(shù)替換掉{0}這樣的內(nèi)容,返回一個格式化后的結(jié)果:

第一個空是:arguments
第二個空是:/\{(\d+)\}/ig

15.用面向?qū)ο蟮腏avascript來介紹一下自己。(沒答案哦親,自己試試吧)

答案: 對象或者Json都是不錯的選擇哦

附上第二篇:各大互聯(lián)網(wǎng)公司2014前端筆試面試題–Html,Css篇

    本站是提供個人知識管理的網(wǎng)絡存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導購買等信息,謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多