Web

Web

#####1.簡述對web標準以及w3c的理解與認識。
W3C(world wide web consortium),萬維網聯盟, Web標準由萬維網聯盟(W3C)制定,W3C 建立和維護Web標準。
最重要W3C標準有:HTML、CSS、XML、XSL、DOM
對於瀏覽器開發商和web程序開發人員在開發新的應用程序時遵照指定的標準更有利於web更好地發展。
開發人員按照Web標準制做網頁,這樣對於開發者來講就更加簡單了,由於他們能夠很容易瞭解彼的編碼使用Web標準,將確保全部瀏覽器正確顯示您的網站而無需費時重寫。
遵照標準的Web頁面可使得搜索引擎更容易訪問並收入網頁,也能夠更容易轉換爲其餘格式,並更易於訪問程序代碼。
javascript

#####2.Xhtml和html的區別
XHTML 是更嚴格更純淨的 HTML 代碼。
XHTML 指可擴展超文本標籤語言(EXtensible HyperText Markup Language)。
XHTML 的目標是取代 HTML。
XHTML 與 HTML 4.01 幾乎是相同的。
XHTML 是更嚴格更純淨的 HTML 版本。
XHTML 是做爲一種 XML 應用被從新定義的 HTML。
XHTML 是一個 W3C 標準。
XHTML 與 HTML 4.01 標準沒有太多的不一樣。
最主要的不一樣:
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文檔必須擁有根元素。
實際上如今寫得標準基本是符合Xhtml標準的。
php

#####3.行內元素有哪些?塊級元素有哪些?Css的盒模型?
Block-Level:<h1><p><ul><table><div>
Inline Elements:<b><th><td><a><img><span><input>
CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式。
css

前端面試筆試題(整理+答案)

#####4.Css的引入方式有哪些?Link 和 @import的區別是
通常來講只有3種:
1.連接方式
最經常使用的,引入樣式表,在樣式表中編寫樣式,引入方式以下:
<link href="css/style.css" rel="stylesheet" type="text/css">
2.嵌入方式
在Html頭部用<style></style>包起來,在這裏面編寫樣式:
<style type="text/css">
*{
padding: 0;margin: 0
}
</style>
3.內聯方式
在標籤裏面直接編寫行內樣式。<div style="color: #333"><div>
4.導入方式
<style>@import url(style.css);</style>
二者都是外部引用CSS的方式,可是存在必定的區別:
  區別1:link是XHTML標籤,除了加載CSS外,還能夠定義RSS等其餘事務;@import屬於CSS範疇,只能加載CSS。
  區別2:link引用CSS時,在頁面載入時同時加載;@import須要頁面網頁徹底載入之後加載。
  區別3:link是XHTML標籤,無兼容問題;@import是在CSS2.1提出的,低版本的瀏覽器不支持。
  區別4:ink支持使用Javascript控制DOM去改變樣式;而@import不支持。
html

#####6.前端頁面結構由哪三層構成,分別是什麼,做用是什麼?
分紅:結構層、表示層、行爲層。
結構層(structural layer)
由 HTML 或 XHTML之類的標記語言負責建立。標籤,也就是那些出如今尖括號裏的單詞,對網頁內容的語義含義作出了描述,但這些標籤不包含任何關於如何顯示有關內容的信息。例如,P標籤表達了這樣一種語義:「這是一個文本段。」
表示層(presentation layer)
由 CSS 負責建立。 CSS對「如何顯示有關內容」的問題作出了回答。
行爲層(behaviorlayer)
負責回答「內容應該如何對事件作出反應」這一問題。這是 Javascript 語言和 DOM主宰的領域。
前端

#####7.Css的基本語句構成是?java

前端面試筆試題(整理+答案)

#####8.知道哪些主流瀏覽器,他們的內核分別是什麼?
按照瀏覽器市場份額排名:
Chrome瀏覽器(Webkit內核)、IE瀏覽器、fireFox瀏覽器(Gecko/Firefox內核)、Microsoft edge(Trident/IE內核)、Safari(Webkit內核)、Opera(Presto內核)
國內使用較多的有:搜狗(搜狗是雙核,Chromium+Trident內核、QQ(Trident/IE內核)、2345(Trident/IE內核)、獵豹(Trident/IE內核)、360(Trident/IE內核)、百度(WebKit )、UC(WebKit )
node

#####9.簡述title與alt的區別
alt是html標籤的屬性,而title既是html標籤,又是html屬性。title標籤這個不用多說,網頁的標題就是寫在<title></title>這對標籤以內的。
title做爲屬性時,用來爲元素提供額外說明信息。例如,給超連接標籤a添加了title屬性,把鼠標移動到該連接上面是,就會顯示title的內容,以達到補充說明或者提示的效果。
而alt屬性則是用來指定替換文字,只能用在img、area和input元素中(包括applet元素),用於網頁中圖片沒法正常顯示時給用戶提供文字說明使其瞭解圖像信息。
jquery

#####10.如何對網站的文件和資源進行優化?解決方案包括?
文件合併、文件壓縮、使用CDN(內容分發網絡)來託管資源、緩存的使用(而且多個域名來提供緩存、GZIP 壓縮你的 JS 和 CSS 文件
程序員

#####11.清除浮動的幾種方式?各自的優缺點?
1.父級div定義height
原理:父級div手動定義height,就解決了父級div沒法自動獲取到高度的問題
優勢:簡單,代碼少,容易掌握
缺點:只適合高度固定的佈局,要給出精確的高度,若是高度和父級div不同時,會產生問題
建議:不推薦使用,只建議高度固定的佈局時使用
2.結尾處加空div標籤clear:both
原理:添加一個空div,利用css提升的clear:both清除浮動,讓父級div能自動獲取到高度
優勢:簡單,代碼少,瀏覽器支持好,不容易出現怪問題
缺點:很多初學者不理解原理;若是頁面浮動佈局多,就要增長不少空div,讓人感受很不爽
建議:不推薦使用,但此方法是之前主要使用的一種清除浮動方法
3.父級div定義僞類:after和zoom
原理:IE8以上和非IE瀏覽器才支持:after,原理和方法2有點相似,zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優勢:瀏覽器支持好,不容易出現怪問題(目前:大型網站都有使用,如:騰迅,網易,新浪等等)
缺點:代碼多,很多初學者不理解原理,要兩句代碼結合使用,才能讓主流瀏覽器都支持
建議:推薦使用,建議定義公共類,以減小CSS代碼
4.父級div定義overflow:hidden
原理:必須定義width或zoom:1,同時不能定義height,使用overflow:hidden時,瀏覽器會自動檢查浮動區域的高度
優勢:簡單,代碼少,瀏覽器支持好
缺點:不能和position配合使用,由於超出的尺寸的會被隱藏
建議:只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用
5.父級div定義overflow:auto
原理:必須定義width或zoom:1,同時不能定義height,使用overflow:auto時,瀏覽器會自動檢查浮動區域的高度
優勢:簡單,代碼少,瀏覽器支持好
缺點:內部寬高超過父級div時,會出現滾動條。
建議:不推薦使用,若是你須要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。
6.父級div也一塊兒浮動
原理:全部代碼一塊兒浮動,就變成了一個總體
優勢:沒有優勢
缺點:會產生新的浮動問題。
建議:不推薦使用,只做瞭解。
7.父級div定義display:table
原理:將div屬性變成表格
優勢:沒有優勢
缺點:會產生新的未知問題
建議:不推薦使用,只做瞭解
8.結尾處加br標籤clear:both
原理:父級div定義zoom:1來解決IE浮動問題,結尾處加br標籤clear:both
建議:不推薦使用,只做瞭解
http://www.5icool.org/a/201211/a1661.html
web

Javascript

#####1.javascript的typeof返回有哪些數據類型?
Undefined,object,number,string,boolean,function

#####2.列舉3種強制轉換和兩種隱式類型轉換
隠式轉換
「+」運算符
var a = 11;
alert(typeof a); //-->number
a = a + '';
alert(typeof a); //-->string
「-」運算符
var a = 11, b = '5';
var c = a - b;
alert(typeof c); //--> number
If語句
var obj = {name:'jack'}
if(obj){
//do more
}
這裏會把obj隱式的轉換成Boolean類型
While語句
var obj = {name:'jack'}
while(obj){
//do more
}
for in時的類型轉換
強調其爲String類型,數組的索引其實也是字符串類型
var ary = [1,3,5,7];
for(var a in ary){
alert(a + ": " + typeof a);
}
所有都是string
alert時存在的隱式類型轉換
String.prototype.fn = function(){return this};
var a = 'hello';
alert(typeof a.fn()); //-->object
alert(a.fn()); //-->hello
給String原型上添加了個fn方法,該方法返回this,咱們知道this能夠理解成當前類的實例對象,既然是對象那麼typeof a.fn()天然返回是object了。
關鍵是最後的alert(a.fn()),a.fn()返回的明明是對象,但卻隱式的轉換成了字符串「hello」顯示。
http://www.jb51.net/article/44155.htm

#####3.Split() join()的區別
split() 方法用於把一個字符串分割成字符串數組。
"2:3:4:5".split(":") //將返回["2", "3", "4", "5"]
join() 方法用於把數組中的全部元素放入一個字符串。元素是經過指定的分隔符進行分隔的。
javascript 代碼

JavaScript
 
 
 
 
 
1
var arr = new Array(3)
2
arr[0] = "George"
3
arr[1] = "John"
4
arr[2] = "Thomas"
5
document.write(arr.join("."))//輸出George.John.Thomas
 
 

#####4.數組方法pop() push() unshift() shift()
pop() 刪除並返回數組的最後一個元素
Push()向數組的末尾添加一個或多個元素,並返回新的長度
Unshift()向數組的開個頭添加一個或更多元素,並返回新的長度。
Shift()刪除並返回數組的第一個元素

#####5.事件綁定和普通事件 有什麼區別?
普通事件只支持單個事件,而事件綁定能夠添加多個事件;

#####6.Ie和dom事件流的區別
(1)冒泡型事件:事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。
IE 5.5: div -> body -> document
IE 6.0: div -> body -> html -> document
Mozilla 1.0: div -> body -> html -> document -> window
(2)捕獲型事件(event capturing):事件從最不精確的對象(document 對象)開始觸發,而後到最精確(也能夠在窗口級別捕獲事件,不過必須由開發人員特別指定)。
(3)DOM事件流:同時支持兩種事件模型:捕獲型事件和冒泡型事件,可是,捕獲型事件先發生。兩種事件流會觸及DOM中的全部對象,從document對象開始,也在document對象結束。
DOM事件模型最獨特的性質是,文本節點也觸發事件(在IE中不會)。

#####8.Ajax請求的時候get和post方式的區別
一、GET請求,請求的數據會附加在URL以後,以?分割URL和傳輸數據,多個參數用&鏈接。URL的編碼格式採用的是ASCII編碼,而不是uniclde,便是說全部的非ASCII字符都要編碼以後再傳輸。
POST請求:POST請求會把請求的數據放置在HTTP請求包的包體中。上面的item=bandsaw就是實際的傳輸數據。
所以,GET請求的數據會暴露在地址欄中,而POST請求則不會。
二、傳輸數據的大小(get 2KB)
在HTTP規範中,沒有對URL的長度和傳輸的數據大小進行限制。可是在實際開發過程當中,對於GET,特定的瀏覽器和服務器對URL的長度有限制。所以,在使用GET請求時,傳輸數據會受到URL長度的限制。
對於POST,因爲不是URL傳值,理論上是不會受限制的,可是實際上各個服務器會規定對POST提交數據大小進行限制,Apache、IIS都有各自的配置。
三、安全性
POST的安全性比GET的高。這裏的安全是指真正的安全,而不一樣於上面GET提到的安全方法中的安全,上面提到的安全僅僅是不修改服務器的數據。好比,在進行登陸操做,經過GET請求,用戶名和密碼都會暴露再URL上,由於登陸頁面有可能被瀏覽器緩存以及其餘人查看瀏覽器的歷史記錄的緣由,此時的用戶名和密碼就很容易被他人拿到了。除此以外,GET請求提交的數據還可能會形成Cross-site request frogery攻擊
四、HTTP中的GET,POST,SOAP協議都是在HTTP上運行的
Call和apply的區別
更簡單地說,apply和call功能同樣,只是傳入的參數列表形式不一樣:如 func.call(func1,var1,var2,var3)對應的apply寫法爲:func.apply(func1,[var1,var2,var3])
https://my.oschina.net/warmcafe/blog/74973

#####9.Ajax請求時如何解析json數據
1.JSON提供了json.js包,下載http://www.json.org/json.js 後,將其引入而後就能夠簡單的使用object.toJSONString()轉換成JSON數據。
2.可使用eval來轉換JSON字符到Object
3.使用parseJSON()方法(JQ)
JSON.parse()之能夠解析json格式的數據,而且會對要解析的字符串進行格式檢查,若是格式不正確則不進行解析,而eval()則能夠解析任何字符串,eval是不安全的。
好比下面的字符串:
var str = 'alert(1000.toString())';
eval(str);
JSON.parse(str);
用eval能夠解析,而且會彈出對話框,而用JSON.parse()則解析不了。 其實alert並無什麼壞處,可怕的是若是用惡意用戶在json字符串中注入了向頁面插入木馬連接的腳本,用eval也是能夠操做的,而用JSON.parse()則沒必要擔憂這個問題。
使用 JSON 解析器將 JSON 轉換爲 JavaScript 對象是更安全的作法。JSON 解析器只能識別 JSON 文本,而不會編譯腳本。
在瀏覽器中,這提供了原生的 JSON 支持,並且 JSON 解析器的速度更快。

#####10.閉包是什麼?有什麼特性?爲何使用閉包
閉包是指有權訪問另外一個函數做用域中的變量的函數,建立閉包的常見方法是在一個函數內部建立另外一個函數。閉包會攜帶包含它的函數的做用域,所以會比其餘函數佔用更多的內存,過渡使用閉包可能會致使內存佔用過多。
一個是前面提到的能夠讀取函數內部的變量,另外一個就是讓這些變量的值始終保持在內存中。

#####11.如何阻止時間冒泡和默認事件?
javascript 代碼

JavaScript
 
 
 
 
 
 
1
//功能:中止事件冒泡  
2
function stopBubble(e) {
3
    // 若是提供了事件對象,則這是一個非IE瀏覽器
4
    if ( e && e.stopPropagation ) {
5
        // 所以它支持W3C的stopPropagation()方法 
6
        e.stopPropagation();
7
    } else { 
8
        // 不然,咱們須要使用IE的方式來取消事件冒泡
9
        window.event.cancelBubble = true;
10
    }
11
}
12
//功能:阻止事件默認行爲
13
function stopDefault( e ) {
14
     // 阻止默認瀏覽器動做(W3C)
15
     if ( e && e.preventDefault ) {
16
         e.preventDefault();
17
     } else {
18
        // IE中阻止函數器默認動做的方式
19
        window.event.returnValue = false;
20
    }
21
    return false;
22
}
 
 

#####12.DOM刪除插入替換到某個節點的方法
javascript 代碼

JavaScript
 
 
 
 
 
1
//建立DOM節點 
2
var oDiv = document.createElement('div');
3
//插入DOM節點
4
document.body.appendChild(oDiv);
5
document.body.insertBefore(oP,oDiv)
6
//刪除DOM節點
7
document.body.removeChild(oP);
8
//查找DOM節點
9
document.getElementById()
10
document.getElementsByTagName()
11
//替換DOM節點
12
document.body.replaceChild(oSpan,oBox)
 
 

#####13.解釋jsonp的原理,以及爲何不是真正的ajax
JSON是一種數據交換格式,而JSONP是一種依靠開發人員的聰明才智創造出的一種非官方跨域數據交互協議。JSON是地下黨們用來書寫和交換情報的「暗號」,而JSONP則是把用暗號書寫的情報傳遞給本身同志時使用的接頭方式
http://blog.csdn.net/superhosts/article/details/9057301
Ajax直接請求普通文件存在跨域無權限訪問的問題,Web頁面上調用js文件時則不受是否跨域的影響(不只如此,咱們還發現凡是擁有"src"這個屬性的標籤都擁有跨域的能力,好比<script>、<img>、<iframe>),當前階段若是想經過純web端(ActiveX控件、服務端代理、屬於將來的HTML5之Websocket等方式不算)跨域訪問數據就只有一種可能,那就是在遠程服務器上設法把數據裝進js格式的文件裏,供客戶端調用和進一步處理。一種叫作JSON的純字符數據格式能夠簡潔的描述複雜數據,更妙的是JSON還被js原生支持。web客戶端經過與調用腳本如出一轍的方式,來調用跨域服務器上動態生成的js格式文件(通常以JSON爲後綴),顯而易見,服務器之因此要動態生成JSON文件,目的就在於把客戶端須要的數據裝入進去。爲了便於客戶端使用數據,逐漸造成了一種非正式傳輸協議,人們把它稱做JSONP,該協議的一個要點就是容許用戶傳遞一個callback參數給服務端,而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據,這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了。
一、ajax和jsonp這兩種技術在調用方式上「看起來」很像,目的也同樣,都是請求一個url,而後把服務器返回的數據進行處理,所以jquery和ext等框架都把jsonp做爲ajax的一種形式進行了封裝;
二、但ajax和jsonp其實本質上是不一樣的東西。ajax的核心是經過XmlHttpRequest獲取非本頁內容,而jsonp的核心則是動態添加<script>標籤來調用服務器提供的js腳本。
三、因此說,其實ajax與jsonp的區別不在因而否跨域,ajax經過服務端代理同樣能夠實現跨域,jsonp自己也不排斥同域的數據的獲取。
四、還有就是,jsonp是一種方式或者說非強制性協議,如同ajax同樣,它也不必定非要用json格式來傳遞數據,若是你願意,字符串都行,只不過這樣不利於用jsonp提供公開服務。
總而言之,jsonp不是ajax的一個特例,哪怕jquery等巨頭把jsonp封裝進了ajax,也不能改變着一點!

#####14.Document load 和 document ready的區別
document.ready和onload的區別——JavaScript文檔加載完成事件
頁面加載完成有兩種事件,一是ready,表示文檔結構已經加載完成(不包含圖片等非文字媒體文件),二是onload,指示頁面包含圖片等文件在內的全部元素都加載完成。

#####15.‘==’和’===’的不一樣
雙等號會形成類型轉換(隱性類型轉換),推薦一概使用三等號
= 賦值運算符
== 等於
=== 嚴格等於
例:
var a = 3;
var b = "3";
a==b 返回 true
a===b 返回 false
由於a,b的類型不同
https://www.zhihu.com/question/31442029

#####16.Javascript的同源策略
瀏覽器的同源策略,限制了來自不一樣源的"document"或腳本,對當前"document"讀取或設置某些屬性。 (白帽子講web安全[1]) 從一個域上加載的腳本不容許訪問另一個域的文檔屬性。
http://www.jb51.net/article/75484.htm

#####17.編寫一個數組去重的方法
http://www.php230.com/1411947001.html
去重:
javascript 代碼

JavaScript
 
 
 
 
 
1
Array.prototype.removeDup3 = function(){
2
                var result = [];
3
                var obj = {};
4
                for(var i = 0; i < this.length; i++){
5
                    if(!obj[this[i]]){
6
                        result.push(this[i]);
7
                        obj[this[i]] = 1;
8
                    }
9
                }
10
                return result;
11
            }
12
var arr = [1,2,2,5,2,"測試","test","測試","test"];
13
console.log(arr.removeDup3());
 
 

升序排序:
javascript 代碼

JavaScript
 
 
 
 
 
1
var quickSort = function(arr) {
2
              if (arr.length <= 1) { return arr; }
3
              var pivotIndex = Math.floor(arr.length / 2);
4
              var pivot = arr.splice(pivotIndex, 1)[0];
5
              var left = [];
6
              var right = [];
7
              for (var i = 0; i < arr.length; i++){
8
                if (arr[i] < pivot) {
9
                  left.push(arr[i]);
10
                } else {
11
                  right.push(arr[i]);
12
                }
13
              }
14
              return quickSort(left).concat([pivot], quickSort(right));
15
            };
16
var arr1 = [1,4,65,21,2,222,111];
17
console.log(quickSort(arr1));
 
 

http://blog.csdn.net/u013558749/article/details/51004576
排序後插入數據:
javascript 代碼

JavaScript
 
 
 
 
 
1
var insert=function (arr,item){
2
    var mark;
3
    for (var i = 0; i < arr.length; i++){
4
        if(item>=arr[i]&&item<=arr[i+1]){
5
            mark=i;
6
            break; 
7
        }
8
    }
9
    arr.splice(mark+1, 0,item);
10
    return  arr;
11
}
12
var arr1 = [1,4,9,65];
13
console.log(insert(arr1,9));
 
 

題目:
請給Array本地對象增長一個原型方法,它用於刪除數組條目中重複的條目(可能有多個),返回值是一個包含被刪除的重複條目的新數組。
//本題的思路是,用每一個元素與其餘的元素比較,相同則把那個元素存入數組
javascript 代碼

JavaScript
 
 
 
 
 
1
Array.prototype.distinct = function(){
2
           var ret = [];
3
           for(var i=1; i<this.length;i++){
4
                   for(var j=i+1;j<this.length;j++){
5
                        if(this[j]==this[i]){
6
                                ret.push(this.splice(j,1)[0]);
7
                                 //這步驟是最重要的this.splice(j,1)刪除重複的元素,splice返回的是被刪除的數組,加[0]就是
8
                                //這個被刪除的元素,ret.push(這個元素),把這個重複的元素加入到數組ret中
9
                        }
10
                   }
11
           }           
12
}
 
 

題目:
document.write([1,2,3,1,2,2,2,3,5,6].distinct())請填充代碼,使mySort()能使傳入的參數按照從小到大的順序顯示出來。
javascript 代碼

JavaScript
 
 
 
 
 
1
function mySort() {
2
    var tags = new Array();//使用數組做爲參數存儲容器
3
    請補充你的代碼
4
    return tags;//返回已經排序的數組
5
}
6
var result = mySort(50,11,16,32,24,99,57,100);/傳入參數個數不肯定
7
console.info(result);//顯示結果
8
function mySort() {
9
    var tags = new Array();
10
    for(var i = 0;i < arguments.length;i++) {
11
        tags.push(arguments[i]);
12
    }
13
    tags.sort(function(compare1,compare2) {
14
        return compare1- compare2;
15
    });
16
    return tags;
17
}
18
19
var result = mySort(50,11,16,32,24,99,57,100);
20
console.info(result);
 
 

穩定排序有:插入排序、冒泡排序、歸併排序 不穩定排序:希爾排序、快速排序、選擇排序、堆排序

各類整理

#####一、cssHack如何書寫
四種寫法:
1.Css選擇器Hack:在Css選擇器前加上一些只有某些特定瀏覽器才能識別的前綴Hack(html 前綴只對IE6生效,+html +前綴只對IE6/7 )
優勢:全面,各類Hack都有,清理代碼易認
缺點:選擇器名稱不易記,代碼量大,重寫選擇器,帶來大量的重複屬性。
2.Css屬性Hack:如: 屬性前綴區別
-moz-transform:
-wekit-transform:
-o-transform:
-ms-transform:
transform:
優勢:易記,代碼少:
缺點:不全面,只有少數屬性有。
3.條件註釋法
用瀏覽器條件註釋法,對瀏覽器兼容問題比較多時用,兩種
一種是不一樣版本的瀏覽器載入不一樣的css樣式
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.cdd">
<![endif]-->
另外一種是對html或body掛載不一樣的Css
<!--[if lt IE 7 ]><html class="ie6" lang="zh-cn"><![endif]-->
<!--[if IE 7 ]><html class="ie7" lang="zh-cn"><![endif]-->
而後在樣式裏各類選擇器加瀏覽器前綴
.ie9 .test{color:yellow;}/IE9瀏覽器/
.ie8 .test{color:red;}/IE8瀏覽器/
優勢:安全;向後兼容;易維護
缺點:用很差會增長http請求;代碼多;
4.Js瀏覽器探測,用js判斷瀏覽器版本,給須要hack的部分添加對應的class
If($.browser.msie && $.browser.version = 6瀏覽器版本爲ie6){
$(‘div’).addClass(‘ie6’);
}
優勢:全面;易維護,可讀性高;
缺點:佔資源;代碼量大;
總結:本人使用最多的是選擇器屬性hack,但有代碼潔癖的我以爲條件註釋法
中的給body和html根據版本掛載對應的class;

#####二、經常使用的Block-Level Elements和Inline Elements有哪些?Inline Elements如何操做後能夠設置寬高
Block-Level:<h1><p><ul><table><div>
Inline Elements:<b><th><td><a><img><span>
給Inline Elements加上display:block;就會邊成塊狀元素,
同理給Block-level Elements加上display:inline就會變成行內元素;
Css2.1加上了display:inline-block;行內塊元素,該元素生成一個塊狀盒,該塊狀隨着周圍內容流動,如同它是一個單獨的行內盒子(能夠設置寬高)

#####三、常見的網頁圖像格式有ico、jpg、png、gif說說他們各自應用場景;
Ioc:windows圖標圖標文件,前端用到的是favicon.ico,收藏夾的圖標文件,網站的ico
Jpg:非透明圖片,有損壓縮,將圖片放大後有明顯的馬賽克,但壓縮率高,不須要透明度的圖片,可以使用。
Png:壓縮率沒有jpg/jpeg高,但清晰
Gif:動圖,支持動畫效果,支持透明度

#####四、如何觸發頁面reflow、repaint
Repaint(重繪),元素的外觀被改變,且在沒有改變佈局的狀況下發生的,如改變:outline,visibility,background-color,等不影響到dom結構測渲染
Reflow(渲染),於repaint區別他會影響到dom的結構渲染,同時也會觸發repaint,他會改變自己與全部父輩元素,這種開銷是很是昂貴的,致使性能降低是必然的,頁面元素越多越明顯。
什麼時候觸發
1.Dom元素的添加、修改(內容)、刪除(reflow+repaint)
2.僅修改Dom元素的字體顏色(repaint,不須要調整佈局)
3.應用新的樣式或者修改任何影響元素外觀元素的屬性
4.Resize瀏覽器窗口、滾動頁面

#####四、如何觸發頁面reflow、repaint
Repaint(重繪),元素的外觀被改變,且在沒有改變佈局的狀況下發生的,如改變:outline,visibility,background-color,等不影響到dom結構測渲染
Reflow(渲染),於repaint區別他會影響到dom的結構渲染,同時也會觸發repaint,他會改變自己與全部父輩元素,這種開銷是很是昂貴的,致使性能降低是必然的,頁面元素越多越明顯。
什麼時候觸發
1.Dom元素的添加、修改(內容)、刪除(reflow+repaint)
2.僅修改Dom元素的字體顏色(repaint,不須要調整佈局)
3.應用新的樣式或者修改任何影響元素外觀元素的屬性
4.Resize瀏覽器窗口、滾動頁面
5.讀取某些屬性(offsetLeft、offsetTop、offsetHeight、offsetWidthop/left/width/height、
clientTop/left/width/height、getComputedStyle()、currntStyle)
如何避免

  1. 先將元素從document中刪除,完成修改後再把元素放回原來的位置
  2. 將元素的display設置爲」none」,完成修改後再把display修改成原來的值
  3. 若是須要建立多個DOM節點,可使用DocumentFragment建立完後一次性的加入document
    var fragment = document.createDocumentFragment();
    fragment.appendChild(document.createTextNode('keenboy test 111'));
    fragment.appendChild(document.createElement('br'));
    fragment.appendChild(document.createTextNode('keenboy test 222'));
    document.body.appendChild(fragment);
  4. 集中修改樣式
      4.1儘量少的修改元素style上的屬性
      4.2儘可能經過修改className來修改樣式
      4.3經過cssText屬性來設置樣式值
        element.style.width=」80px」; //reflow
        element.style.height=」90px」; //reflow
        element.style.border=」solid 1px red」; //reflow
        以上就產生屢次reflow,調用的越多產生就越多
        element.style.cssText=」width:80px;height:80px;border:solid 1px red;」; //reflow 
      4.4緩存Layout屬性值
        var left=elem.offsetLeft; 屢次使用left也就產生一次reflow
      4.5設置元素的position爲absolute或fixed
        元素脫離標準流,也從DOM樹結構中脫離出來,在須要reflow時只須要reflow自身與下級元素
      4.6儘可能不要用table佈局
        table元素一旦觸發reflow就會致使table裏全部的其它元素 reflow。在適合用table的場合,能夠設置table-layout爲auto或fixed,這樣可讓table一行一行的渲染,這種作法也是爲了限制reflow的影響範圍
    4.7避免使用expression,他會每次調用都會從新計算一遍(包括加載頁面)

#####五、用3個div實現小圖顯示效果,左邊div寬高都爲50px,右邊div寬100px,高110px,寫出html+css
html 代碼

HTML
 
 
 
 
 
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8">
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
    <title></title>
7
    <link rel="stylesheet" href="">
8
    <style>
9
        div{
10
            background-color:#ccc; 
11
            position: relative;
12
        }
13
        .box1,.box2{
14
            width: 50px;
15
            height: 50px;
16
            float: left;
17
        }
18
        .box2{
19
            clear: both;
20
            margin-top:10px;
21
        }
22
        .box3{
23
            width: 100px;
24
            height: 110px;
25
            margin-left:60px;
26
        }
27
28
        .box4,.box5{
29
            width: 50px;
30
            height: 50px;
31
            position: absolute;
 
 

#####六、js中的數據類型有哪些數據類型
5種簡單的數據類型:undefined、null、boolean、number、string
1種複雜數據類型:object

#####七、寫出DOM中建立、插入、刪除節點的方法,可使用jquery方法實現
建立:var node=document.createElement(「p」);
插入:var TextNode=document.createTextNode(「這是一個文本節點」);
node.appendChild(TextNode);
刪除:var parentNode=document.getElementById(「parent」);
var childNode=document.getElementById(「child」);
parent.removeChild(childNode);
Jq:
建立:var $node=$(「<li>建立新的節點</li>」);
插入:$(「#parent」).append($node);//before/after/insertBefore/insertAfter
刪除:$(「#child」).remove();

#####八、請編寫一個JavaScript函數 parseQueryString,它的用途是把URL參數解析爲一個對象
javascript 代碼

JavaScript
 
 
 
 
 
 
1
//正則表達式
2
var parseQueryString = function (url) {
3
   var reg = /([^\?\=\&]+)\=([^\?\=\&]*)/g;
4
   var obj = {};
5
   while (reg.exec (url)) {
6
       obj[RegExp.$1] = RegExp.$2;
7
   }
8
   return obj;
9
}
10
//字符分割
11
function parseQueryString(url) {  
12
    var str = url.split("?")[1], items = str.split("&");  
13
    var result = {};  
14
    var arr;  
15
    for (var i = 0; i < items.length; i++) {  
16
        arr = items[i].split("=");  
17
        result[arr[0]] = arr[1];  
18
    }  
19
    return result;  
20
}
21
var url = "http://wiatcmdax.cn/index.php?key0=0&key1=1&key2=2";
22
var obj = parseQueryString (url);
 
 

優缺點:正則表達式的代碼更簡潔,可是須要記住複雜的正則表達式,字符分割雖然代碼稍微長一些,但更易於理解易於記住。若是是首次分析趨向於字符分割,若是是後面優化,我趨向於使代碼簡潔幹練,而後重複利用。

#####九、IE與FF的事件模型有哪些區別,並實現一個bindEvent方法
IE的作法:
在IE 中,每一個元素和window對象都有2個方法:attachEvent()和detachEvent(); attachEvent用來給一個事件附加事件處理函數. 而detachEvent用來將事件處理函數分離.每一個方法都有2個參數:要分配的事件處理函數的名字(例如:onclick)和一個函數引用.
例如:
javascript 代碼

JavaScript
 
 
 
 
 
1
var fnClick=function(){alert("ss")} 
2
var fnClick1=function(){alert("sss")} 
3
var obj=document.getElementById("id") 
4
obj.attachEvent("onclick",fnClick); 
5
obj.attachEvent("onclick",fnClick1); 
6
obj.detachEvent("onclick",fnClick); 
 
 

事件的執行順序是按照添加的順序執行的.
DOM方法
dom中對應的方法是addEventListener()和removeEventListener ,這兩個方法有3個參數,事件名稱,要分配的函數和處理函數是用於冒泡階段仍是捕獲階段.若是事件處理函數是用在捕獲階段,第三個參數爲true,冒泡階段爲false.用法和IE中的用法同樣,再也不多說了,就舉一個例子吧:
javascript 代碼

JavaScript
 
 
 
 
 
1
var fnClick=function(){alert("ss")} 
2
var fnClick1=function(){alert("sss")} 
3
var obj=document.getElementById("id") 
4
obj.addEventListener("click",fnClick,false); 
5
obj.addEventListener("click",fnClick1,false); 
6
obj.removeEventListener("click",fnClick,false); 
 
 

注意這裏的是事件名稱"click",不是要分配的事件處理函數的名字"onclick",本身體會一下吧.
添加事件
DOM事件模型 – addEventListener
addEventListener(eventType, handler, useCapture)
eventType不帶有on字符串;
handler參數是一個事件句柄,這個函數或方法帶有一個事件對象參數;
useCapture參數決定了事件句柄觸發在哪一種事件傳播階段,若是useCapture爲true則爲捕獲階段,反之則爲冒泡階段。
IE事件模型 – attachEvent
attachEvent(eventType, handler)
eventType 帶 on字符串;
handler參數是一個事件句柄,這個函數或方法帶有一個事件對象參數;
事件過程
l DOM事件模型包含捕獲階段和冒泡階段,IE事件模型只包含冒泡階段;
2 DOM事件模型可以使用e.stopPropagation()來阻止事件流。
自寫bindEvent
javascript 代碼

JavaScript
 
 
 
 
 
 
1
// ---------- 事件綁定與刪除綁定 ---------- //
2
function bindEvent(element, eventName, func) {
3
    var events = element['the'+eventName];    //用於保存某個事件序列
4
    if(!events) {  //若是不存在一個序列,則建立它,並加入HTML標記當中的onEvent = function(){}形式的綁定
5
        events = element['the'+eventName] = [];
6
        if (element['on'+eventName]) { events.push(element['on'+eventName]); }
7
    }
8
9
    //檢測是否爲重複綁定
10
    for(var i=0; i<events.length; i++) {
11
        if(events[i] === func) { flag = true; break; }
12
    }
13
14
    // 非重複綁定,則加入該函數事件
15
    if(i >= events.length) { events.push(func); }
16
17
    // 從新定義這個事件的執行方式
18
    element['on'+eventName] = function(event) {
19
        event = event || (function() { //修復IE的事件對象
20
            var e = window.event;
21
            e.preventDefault = function() { e.returnValue = false; }
22
            e.stopPropagation = function() { e.cancelBubble = true; }
23
            //根據須要繼續修復
24
            return e;
25
        })();
26
        //順序執行這些函數
27
        for(var i=0; i<events.length; i++) { events[i].call(element, event); }
28
    }
29
}
30
31
// 刪除事件綁定
 
 

#####十、請編寫一個javaScript函數isArray,用於判斷一個obj是否爲數組對象。
var isArray = function(obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
}
http://www.jb51.net/article/21109.htm

#####十一、小賢是一條可愛的小狗(Dog),它的叫聲很好聽(wow),每次看到主人的時候就會乖乖叫一聲(yelp)。從這段描述能夠獲得如下對象:
javascript 代碼

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

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

JavaScript
 
 
 
 
 
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();
 
 

#####十二、http狀態碼,200/304/404/500分別表明什麼
200 (OK/正常) (SC_OK)的意思是一切正常。通常用於相應GET和POST請求。這個狀態碼對servlet是缺省的;若是沒有調用setStatus方法的話,就會獲得200。
304 (Not Modified/爲修正)304 (SC_NOT_MODIFIED)是指緩衝的版本已經被更新而且客戶端應刷新文檔。
當客戶端有一個緩存的文檔,經過提供一個 If-Modified-Since 頭信息可指出客戶端只但願文檔在指定日期以後有所修改時纔會重載此文檔,用這種方式能夠進行有條件的請求。304 (SC_NOT_MODIFIED)是指緩衝的版本已經被更新而且客戶端應刷新文檔。另外,服務器將返回請求的文檔及狀態碼 200。servlet通常狀況下不會直接設置這個狀態碼。它們會實現getLastModified方法並根據修正日期讓默認服務方法處理有條件的請求。這個方法的例程已在2.8部分(An Example Using Servlet Initialization and Page Modification Dates/一個使用servlet初始化和頁面修正日期的例子)給出。
404 (Not Found/未找到)404 (SC_NOT_FOUND)狀態每一個網絡程序員可能都遇到過,他告訴客戶端它是表示「沒有所訪問頁面」的標準方式。這個狀態碼是經常使用的響應而且在HttpServletResponse類中有專門的方法實現它:sendError("message")。相對於setStatus使用sendError得好處是:服務器會自動生成一個錯誤頁來顯示錯誤信息。可是,Internet Explorer 5瀏覽器卻默認忽略你發揮的錯誤頁面並顯示其自定義的錯誤提示頁面,雖然微軟這麼作違反了 HTTP 規範。要關閉此功能,在工具菜單裏,選擇Internet選項,進入高級標籤頁,並確認「顯示友好的 HTTP 錯誤信息」選項(在個人瀏覽器中是倒數第8各選項)沒有被選。可是不多有用戶知道此選項,所以這個特性被IE5隱藏了起來使用戶沒法看到你所返回給用戶的信息。而其餘主流瀏覽器及IE4都徹底的顯示服務器生成的錯誤提示頁面。能夠參考圖6-3及6-4中的例子。 所給的地址沒法找到任何資源。
500 (Internal Server Error/內部服務器錯誤)
500 (SC_INTERNAL_SERVER_ERROR) 是經常使用的「服務器錯誤」狀態。該狀態常常由CGI程序引發也可能(希望不會如此!)由沒法正常運行的或返回頭信息格式不正確的servlet引發。
http://www.cnblogs.com/lxinxuan/archive/2009/10/22/1588053.html

#####1三、javascript異步編程的認識、異步編程的優點和難點,異步編程的主要解決方案
avascript語言的執行環境是「單線程」,就是一次只能完成一件任務,若是有多個任務,就必須排隊,前面一個任務完成,再執行湖面一個任務,以此類推。
這種模式的好處是實現起來比較簡單,執行環境相對單純,壞處是隻要有一個任務號是很長,後面的任 務都必須排隊等着,會拖延整個程序的執行,常見的瀏覽器無響應,每每就是由於某一段jvascript代碼長時間運行,致使整個頁面卡在這個地方。
"同步模式"就是上一段的模式,後一個任務等待前一個任務結束,而後再執行,程序的執行順序與任務的排列順序是一致的、同步的;"異步模式"則徹底不一樣,每個任務有一個或多個回調函數(callback),前一個任務結束後,不是執行後一個任務,而是執行回調函數,後一個任務則是不等前一個任務結束就執行,因此程序的執行順序與任務的排列順序是不一致的、異步的。

異步"異步模式"很是重要。在瀏覽器端,耗時很長的操做都應該異步執行,避免瀏覽器失去響應,最好的例子就是Ajax操做。在服務器端,"異步模式"甚至是惟一的模式,由於執行環境是單線程的,若是容許同步執行全部http請求,服務器性能會急劇降低,很快就會失去響應。

異步編程的4種方法
f1();
f2();
1.回調函數
javascript 代碼

JavaScript
 
 
 
 
 
1
function f1(callback){
2
  setTimeout(function () {
3
    // f1的任務代碼
4
    callback();
5
  }, 1000);
6
} 
7
f1(f2)
 
 

採用這種方式,咱們把同步操做變成了異步操做,f1不會堵塞程序運行,至關於先執行程序的主要邏輯,將耗時的操做推遲執行。
  回調函數的優勢是簡單、容易理解和部署,缺點是不利於代碼的閱讀和維護,程序的流程會很混亂,並且每一個任務只能指定一個回調函數。
2.事件監聽
 另外一種思路是採用事件驅動模式。任務的執行不取決於代碼的順序,而取決於某個事件是否發生。
javascript 代碼

JavaScript
 
 
 
 
 
1
f1.on('done',f2);
2
function f1(){
3
  setTimeout(function () {
4
    // f1的任務代碼
5
    f1.trigger('done');
6
  }, 1000);
7
} 
 
 

f1.trigger('done')表示,執行完成後,當即觸發done事件,從而開始執行f2。
  這種方法的優勢是比較容易理解,能夠綁定多個事件,每一個事件能夠指定多個回調函數。缺點是整個程序都要變成事件驅動型,運行流程會變得很不清晰。
3.發佈/訂閱
上一節的"事件",徹底能夠理解成"信號"。
  咱們假定,存在一個"信號中心",某個任務執行完成,就向信號中心"發佈"(publish)一個信號,其餘任務能夠向信號中心"訂閱"(subscribe)這個信號,從而知道何時本身能夠開始執行。這就叫作"發佈/訂閱模式"(publish-subscribe pattern),又稱"觀察者模式"(observer pattern)。
  這個模式有多種實現,下面採用的是Ben Alman的Tiny Pub/Sub,這是jQuery的一個插件。
  首先,f2向"信號中心"jQuery訂閱"done"信號。
jQuery.subscribe("done", f2);
  而後,f1進行以下改寫:
javascript 代碼

JavaScript
 
 
 
 
 
1
function f1(){
2
  setTimeout(function () {
3
    // f1的任務代碼
4
    jQuery.publish("done");
5
  }, 1000);
6
} 
 
 

  jQuery.publish("done")的意思是,f1執行完成後,向"信號中心"jQuery發佈"done"信號,從而引起f2的執行。
  此外,f2完成執行後,也能夠取消訂閱(unsubscribe)。
jQuery.unsubscribe("done", f2);
  這種方法的性質與"事件監聽"相似,可是明顯優於後者。由於咱們能夠經過查看"消息中心",瞭解存在多少信號、每一個信號有多少訂閱者,從而監控程序的運行。
4.Promises對象
Promises對象是CommonJS工做組提出的一種規範,目的是爲異步編程提供統一接口。
  簡單說,它的思想是,每個異步任務返回一個Promise對象,該對象有一個then方法,容許指定回調函數。好比,f1的回調函數f2,能夠寫成:
f1().then(f2);
  f1要進行以下改寫(這裏使用的是jQuery的實現):
javascript 代碼

JavaScript
 
 
 
 
 
1
function f1(){
2
  var dfd = $.Deferred();
3
  setTimeout(function () {
4
    // f1的任務代碼
5
    dfd.resolve();
6
  }, 500);
7
  return dfd.promise;
8
} 
 
 

樣寫的優勢在於,回調函數變成了鏈式寫法,程序的流程能夠看得很清楚,並且有一整套的配套方法,能夠實現許多強大的功能。
  好比,指定多個回調函數:
f1().then(f2).then(f3);
  再好比,指定發生錯誤時的回調函數:
f1().then(f2).fail(f3);
並且,它還有一個前面三種方法都沒有的好處:若是一個任務已經完成,再添加回調函數,該回調函數會當即執行。因此,你不用擔憂是否錯過了某個事件或信號。這種方法的缺點就是編寫和理解,都相對比較難。
http://kb.cnblogs.com/page/167474/

#####1四、提升網站的前端性能,你會關注那些方面?
1、頁面級優化
1.減小 HTTP請求數
(1). 從設計實現層面簡化頁面
(2). 合理設置 HTTP緩存
(3). 資源合併與壓縮
(4). CSS Sprites
(5). Inline Images
(6). Lazy Load Images
2.將外部腳本置底(將腳本內容在頁面信息內容加載後再加載)
3.異步執行 inline腳本(其實原理和上面是同樣,保證腳本在頁面內容後面加載。)
4.Lazy Load Javascript(只有在須要加載的時候加載,在通常狀況下並不加載信息內容。)
5.將 CSS放在 HEAD中
6.異步請求 Callback(就是將一些行爲樣式提取出來,慢慢的加載信息的內容)
7.減小沒必要要的 HTTP跳轉
8.避免重複的資源請求
2、代碼級優化
1.Javascript
2.CSS選擇符
但實際上瀏覽器對選擇符的解析是從右往左進行的
3.HTML
4.Image壓縮
https://www.zhihu.com/question/21658448

#####一、doctype的做用是什麼?
告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔
對瀏覽器的渲染模式產生影響,不一樣的渲染模式會影響到瀏覽器對於css代碼甚至javascript腳本的解析,因此IE系列瀏覽器中,doctype所決定的html頁面的渲染模式相當重要。
兩張渲染模式:
backCompat:怪異模式
CSS1Compat:嚴格模式
HTML5只須要寫 <!DOCTYPE HTML>,HTML5 不基於 SGML,所以不須要對DTD進行引用,可是須要doctype來規範瀏覽器的行爲。
瀏覽器按W3C標準解析執行代碼;怪異模式則是使用瀏覽器本身的方式解析執行代碼,由於不一樣瀏覽器解析執行的方式不同,因此咱們稱之爲怪異模式。

#####二、css中的Class和id的區別
class(類)在同一個html網頁頁面能夠無數次的調用相同的class類
ID是表示着標籤的身份,一樣ID在頁面裏也只能出現一次,而且是惟一性。
CSS樣式定義的時候 以「#」來開頭命名id名稱。
爲了給js預留id,因此在寫css樣式時我通常不多直接使用id,除非是確認一個大的總體模塊。

#####三、浮動和它的工做原理
浮動元素脫離文檔流,不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
浮動元素引發的問題:
父元素的高度沒法被撐開,影響與父元素同級的元素
與浮動元素同級的非浮動元素(內聯元素)會跟隨其後
若非第一個元素浮動,則該元素以前的元素也須要浮動,不然會影響頁面顯示的結構

#####四、position的值和left和top的定位依據
Absolute 生成絕對定位的元素,相對於static定位之外的第一個父元素。
Fixed生成絕對定位的元素,相對於瀏覽器窗口進行定位。
Ralative 生成相對定位,相隨與正常位置進行定位
Static默認值,沒有定位。忽略toplrft
Inherit從夫元素繼承position屬性

#####五、解釋事件代理
「事件代理」便是把本來須要綁定的事件委託給父元素,讓父元素擔當事件監聽的職務。
DOM操做是十分消耗性能的。因此重複的事件綁定簡直是性能殺手。而事件代理的核心思想,就是經過儘可能少的綁定,去監聽儘可能多的事件。
http://www.daxueit.com/article/3704.html
6.javaScript的this是如何工做的?
This對象是在運行時基於函數的執行環境綁定的,在全局函數中,this等於window,而當函數被用做某個對象的方法調用時,this等於那個對象。
https://www.zhihu.com/question/19624483
方法調用模式
當函數被保存爲對象的一個屬性時,成該函數爲該對象的方法。函數中this的值爲該對象。
javascript 代碼

JavaScript
 
 
 
 
 
1
var foo = {
2
    name: 'fooname',
3
    getName: function (){
4
        return this.name  
5
    }
6
}
7
foo.getName();  // this => foo
 
 

函數調用模式
當函數並非對象的屬性。函數中this的值爲全局對象
note:某個方法中的內部函數中的this的值也是全局對象,而非外部函數的this
javascript 代碼

JavaScript
 
 
 
 
 
1
function foo(){
2
    this.name = 'fooname';  
3
}
4
foo();  // this => window
 
 

構造器調用模式
即便用new調用的函數,則其中this將會被綁定到那個新構造的對象。
javascript 代碼

JavaScript
 
 
 
 
 
1
function Foo(){
2
    this.name = 'fooname';
3
}
4
var foo = new Foo();  // this => foo
 
 

使用apply或call調用模式
該模式調用時,函數中this被綁定到apply或call方法調用時接受的第一個參數。
javascript 代碼

JavaScript
 
 
 
 
 
1
function getName(name){
2
    this.name = name;
3
}
4
var foo = {};
5
getName.call(foo, name);  // this =>foo
 
 

#####七、原型繼承的原理
藉助原型能夠基於已有的對象建立新對象,同時還沒必要所以建立自定義類型。
建立一個原型,必須有一個對象能夠做爲另外一個對象的基礎,
[code=javascript,javascript 代碼false]Var person={
name:」Nicholas」,
friends:[「shelby」,」count」,」van」]
}
Var anotherPerson=object(person);//Object.create(person);
anotherPerson.name=」greg」;
anotherPerson.friend.push(「Rod」);
Var yetAnotherPerson==object(person);//Object.create(person);
yetAnotherPerson.name=」linda」;
yetAnotherPerson.friend.push(「silly」);
Console.log(person.friends);//「shelby,count,van,Rod,silly[/code]

#####8.什麼是「use strict」?使用它的好處。
"嚴格模式"(strict mode)。顧名思義,這種模式使得Javascript在更嚴格的條件下運行。
爲何用嚴格模式

  • 消除Javascript語法的一些不合理、不嚴謹之處,減小一些怪異行爲;
  • 消除代碼運行的一些不安全之處,保證代碼運行的安全;
  • 提升編譯器效率,增長運行速度;
  • 爲將來新版本的Javascript作好鋪墊。
    "嚴格模式"體現了Javascript更合理、更安全、更嚴謹的發展方向,包括IE 10在內的主流瀏覽器,都已經支持它,許多大項目已經開始全面擁抱它。另外一方面,一樣的代碼,在"嚴格模式"中,可能會有不同的運行結果;一些在"正常模式"下能夠運行的語句,在"嚴格模式"下將不能運行。掌握這些內容,有助於更細緻深刻地理解Javascript,讓你變成一個更好的程序員。

題目:
Fibonacci數列的數學表達式就是:
F(n) = F(n-1) + F(n-2)
F(1) = 1
F(2) = 1
javascript 代碼

JavaScript
 
 
 
 
 
1
functiongetNthFibonacci(count) {
2
  var ans=[1,1];
3
  var buf=2
4
  for(var i=buf;i<=count;i++){
5
     ans[i]=ans[i-2]+ans[i-1];
6
  }
7
  return ans[count];
8
}
 
 

請給Array本地對象增長一個原型方法,它用於刪除數組條目中重複的條目(可能有多個),返回值是一個包含被刪除的重複條目的新數組。
javascript 代碼

JavaScript
 
 
 
 
 
1
Array.prototype.distinct = function() {//原型函數。
2
    var ret = [];
3
    for (var i = 0; i < this.length; i++)
4
    {
5
        for (var j = i+1; j < this.length;) {   
6
            if (this[i] === this[j]) {
7
                ret.push(this.splice(j, 1)[0]);
8
                //splice中的j是刪除的位置,1是刪除的數目,第三個參數是要加入的對象,返回的是一個數組,因此取第一個數組的值push進ret裏;
9
            } else {
10
                j++;
11
            }
12
        }
13
     }
14
     return ret;
15
}
相關文章
相關標籤/搜索