前端常見問題

時間 2019-11-17

標籤前端常見問題简体版

原文原文鏈接

1.null和undefined的區別

2.談談性能優化問題

3.常見web安全漏洞javascript

4.哪些操做會形成內存泄漏？php

5.瀏覽器兼容性問題以及列舉IE 與其餘瀏覽器不同的特性？css

6.談談你對重構的理解html

7.HTTP狀態碼前端

8.說說你對MVC和MVVM的理解以及vue和angular區別vue

9.說說你對語義化的理解？java

10.瀏覽器渲染頁面的過程jquery

11.頭部申明的做用css3

12.介紹一下你對瀏覽器內核的理解，常見的瀏覽器內核有哪些？程序員

13.HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？

14.iframe 有那些優勢和缺點？

15.如何實現瀏覽器內多個標籤頁之間的通訊?

16.如何在頁面上實現一個圓形的可點擊區域？

17.實現不使用 border 畫出1px高的線，在不一樣瀏覽器的標準模式與怪異模式下都能保持一致的效果

1.null和undefined的區別？

null用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象。

undefined表示"缺乏值"，就是此處應該有一個值，可是尚未定義。典型用法是：

（1）變量被聲明瞭，但沒有賦值時，就等於undefined。

（2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。

（3）對象沒有賦值的屬性，該屬性的值爲undefined。

（4）函數沒有返回值時，默認返回undefined。

null表示"沒有對象"，即該處不該該有值。典型用法是：

（1） 做爲函數的參數，表示該函數的參數不是對象。

（2） 做爲對象原型鏈的終點。

總之：null是不存在，undefined是沒有賦值

2.談談性能優化問題

代碼層面：避免使用css表達式，避免使用高級選擇器，通配選擇器。

緩存利用：使用CDN，使用外部js和css文件以便緩存，添加Expires頭，緩存Ajax，服務端配置Etag，減小DNS查找等

請求數量：合併樣式和腳本，使用css圖片精靈，初始首屏以外的圖片資源按需加載，靜態資源延遲加載。

請求帶寬：壓縮文件，開啓GZIP

代碼層面的優化

減小DOM操做次數

避免全局查詢

儘可能避免寫在HTML標籤中寫Style屬性

用hash-table來優化查找

少用全局變量

用innerHTML代替DOM操做

優化javascript性能

用setTimeout來避免頁面失去響應

緩存DOM節點查找的結果

避免使用CSS Expression

避免使用with(with會建立本身的做用域，會增長做用域鏈長度)

多個變量聲明合併

避免圖片和iFrame等的空Src。空Src會從新加載當前頁面，影響速度和效率

移動端性能優化

適當使用touch事件代替click事件

不濫用Float。Float在渲染時計算量比較大，儘可能減小使用

儘可能使用css3動畫，開啓硬件加速

避免使用css3漸變陰影效果

能夠用transform: translateZ(0)來開啓硬件加速

不濫用Web字體。Web字體須要下載，解析，重繪當前頁面，儘可能減小使用

合理使用requestAnimationFrame動畫代替setTimeout

CSS中的屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）會觸發GPU渲染，請合理使用。過渡使用會引起手機過耗電增長

PC端的在移動端一樣適用

3.常見web安全漏洞

1 XSS攻擊

1.1它容許惡意web用戶將代碼植入到提供給其它用戶使用的頁面中。其實在web前端方面，能夠簡單的理解爲一種javascript代碼注入

若是你的用戶名稱裏面含有script標籤的話，就能夠執行其中的代碼了。

還可使用ajax，將其餘用戶在當前域名下的cookie獲取併發送到本身的服務器上。這樣就能夠獲取他人信息了。再在各個QQ羣中，散播本身的空間，引誘別人來訪問。就能夠拿到用戶在這個域名下的cookie或者其餘隱私了。

如何防範？

最簡單的辦法防治辦法，仍是將前端輸出數據都進行轉義最爲穩妥。

1.2再好比圖片顯示不出來會執行onerror，能夠從這裏面注入從而中毒，解決辦法同樣的，也能夠轉義：

1.3保護好你的cookie

咱們的敏感信息都是存儲在cookie中的（不要把用戶機密信息放在網頁中），想要阻止黑客經過js訪問到cookie中的用戶敏感信息。那麼請使用cookie的HttpOnly屬性，加上了這個屬性的cookie字段，js是沒法進行讀寫的。php的設置方法以下：




<?php setcookie("userpass", "doctorhou-shuai", NULL, NULL, NULL, NULL, TRUE); ?>

2 CSRF攻擊

咱們平常的開發，仍是要遵循提交業務，嚴格按照post請求去作的。把一些應當提交的數據，作成get請求。卻不知，這不只僅是違反了http的標準而已，也一樣會被黑客所利用。更不要使用jsonp去作提交型的接口，這樣很是的危險。

3 網絡劫持攻擊

若是你的網站尚未進行https加密的化，則在表單提交部分，最好進行非對稱加密--即客戶端加密，只有服務端能解開。這樣中間的劫持者便沒法獲取加密內容的真實信息了。

4 控制檯注入代碼

不知道各位看官有沒有注意到天貓官網控制檯的警告信息，這是爲何呢？由於有的黑客會誘騙用戶去往控制檯裏面粘貼東西（欺負小白用戶不懂代碼），好比能夠在朋友圈貼個什麼文章，說:"只要訪問天貓，按下F12而且粘貼如下內容，則能夠得到xx元禮品"之類的，那麼有的用戶真的會去操做，而且本身隱私被暴露了也不知道。

咱們平時開發要注意些什麼？

開發時要提防用戶產生的內容，要對用戶輸入的信息進行層層檢測
要注意對用戶的輸出內容進行過濾(進行轉義等)
重要的內容記得要加密傳輸(不管是利用https也好，本身加密也好)
get請求與post請求，要嚴格遵照規範，不要混用，不要將一些危險的提交使用jsonp完成。
對於URL上攜帶的信息，要謹慎使用。
心中時刻記着，本身的網站哪裏可能有危險。

4.哪些操做會形成內存泄漏？

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。

垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。

setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。

閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

5.瀏覽器兼容性問題以及列舉IE 與其餘瀏覽器不同的特性？

在各個瀏覽器下img有空隙；解決方法:讓圖片浮動

png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.

瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一

使用css hack

  .header {_width:100px;}            /* IE6專用*/
    .header {*+width:100px;}        /* IE7專用*/
    .header {*width:100px;}            /* IE六、IE7共用*/
    .header {width:100px\0;}        /* IE八、IE9共用*/
    .header {width:100px\9;}        /* IE六、IE七、IE八、IE9共用*/
    .header {width:330px\9\0;}    /* IE9專用*/

flex（微信兼容性）：在外層加上：flex-direction: column;display: flex;

html頭部標籤：若頁面需默認用極速核，增長標籤：<meta name="renderer" content="webkit"> （兼容360瀏覽器（兼容模式）：） <meta http-equiv="X-UA-Compatible" content="chrome=1">（讓網頁優先採用Chrome渲染）

ie六、ie7兼容性問題,經常使用有兼容性問題的屬性(這些屬性不只在ie低版本兼容有問題，在火狐等瀏覽器也有，所以須要加前綴)邊框border-radius、box-shadow、border-image

ie六、ie7特殊狀況： 1.max-width、min-width、max-height、min-height等屬性無效 2.margin值雙倍邊距3.width等百分比值計算時有誤

談談你對重構的理解6.

網站重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。也就是說是在不改變UI的狀況下，對網站進行優化，在擴展的同時保持一致的UI。

對於傳統的網站來講重構一般是：

表格(table)佈局改成DIV+CSS

使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)

對於移動平臺的優化

針對於SEO進行優化

深層次的網站重構應該考慮的方面


減小代碼間的耦合

讓代碼保持彈性

嚴格按規範編寫代碼

設計可擴展的API

代替舊有的框架、語言(如VB)

加強用戶體驗

一般來講對於速度的優化也包含在重構中



壓縮JS、CSS、image等前端資源(一般是由服務器來解決)

程序的性能優化(如數據讀寫)

採用CDN來加速資源加載

對於JS DOM的優化

HTTP服務器的文件緩存

HTTP狀態碼7.

100  Continue  繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息

    200  OK   正常返回信息

    201  Created  請求成功而且服務器建立了新的資源

    202  Accepted  服務器已接受請求，但還沒有處理

    301  Moved Permanently  請求的網頁已永久移動到新位置。

    302 Found  臨時性重定向。

    303 See Other  臨時性重定向，且老是使用 GET 請求新的 URI。

    304  Not Modified  自從上次請求後，請求的網頁未修改過。


    400 Bad Request  服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。

    401 Unauthorized  請求未受權。

    403 Forbidden  禁止訪問。

    404 Not Found  找不到如何與 URI 相匹配的資源。

    500 Internal Server Error  最多見的服務器端錯誤。

    503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。


說說你對MVC和MVVM的理解

8.一：MVC

視圖（View）：用戶界面。
控制器（Controller）：業務邏輯
模型（Model）：數據保存

全部通訊都是單向的。

View 傳送指令到 Controller
Controller 完成業務邏輯後，要求 Model 改變狀態
Model 將新的數據發送到 View，用戶獲得反饋


二：MVVm

View 與 Model 不發生聯繫，都經過 viewmodel傳遞。

三：vue與angular區別

9.說說你對語義化的理解？

1，去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構

2，有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；

3，方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

4，便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

10.瀏覽器渲染頁面的過程

1，瀏覽器解析html源碼，而後建立一個 DOM樹(DOM樹的根節點就是 documentElement，對應的是html標籤)

2，瀏覽器解析CSS代碼，計算出最終的樣式數據(解析CSS的時候會按照以下順序來定義優先級：瀏覽器默認設置，用戶設置，外鏈樣式，內聯樣式，html中的style)

3.構建一個渲染樹(渲染樹中的每個節點都存儲有對應的css屬性)

4.一旦渲染樹建立好了，瀏覽器就能夠根據渲染樹直接把頁面繪製到屏幕上。

11.Doctype做用？標準模式與兼容模式各有什麼區別?

<!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於 <html> 標籤以前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現

標準模式的排版和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做

12.介紹一下你對瀏覽器內核的理解，常見的瀏覽器內核有哪些？

主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核

JS引擎則：解析和執行javascript來實現網頁的動態效果

最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎

常見的瀏覽器內核有哪些？

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]
Webkit內核：Safari,Chrome等。 [ Chrome的Blink（WebKit的分支）]

13.HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？

在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件
原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現
如何使用：
- 頁面頭部像下面同樣加入一個manifest的屬性；
- 在cache.manifest文件的編寫離線存儲的資源
- 在離線狀態時，操做window.applicationCache進行需求實現

CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html

14.iframe 有那些優勢和缺點？

優勢：
- 用來加載速度較慢的內容（如廣告）
- 可使腳本能夠並行下載
- 能夠實現跨子域通訊
缺點：
- iframe 會阻塞主頁面的 onload 事件
- 沒法被一些搜索引擎索識別
- 會產生不少頁面，不容易管理

15.如何實現瀏覽器內多個標籤頁之間的通訊?

WebSocket、SharedWorker
也能夠調用localstorge、cookies等本地存儲方式

16.如何在頁面上實現一個圓形的可點擊區域？

map+area或者svg
border-radius
純js實現須要求一個點在不在圓上簡單算法、獲取鼠標座標等等

17.實現不使用 border 畫出1px高的線，在不一樣瀏覽器的標準模式與怪異模式下都能保持一致的效果

<div style="height:1px;overflow:hidden;background:red"></div>

css：

1.CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？

2.display：none;和visibility:hidden區別

三、link與@import的區別

4.display:block;和display:inline;的區別

五、如何水平居中一個元素

6.css垂直居中方法

7.自適應佈局

8.移動端自適應

9.position的值， relative和absolute分別是相對於誰進行定位的？

10.上下margin重合問題

11.解釋下浮動和它的工做原理？清除浮動的技巧

12.浮動元素引發的問題和解決辦法

13.介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？

14.什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？

15.什麼是視差滾動效果，如何給每頁作不一樣的動畫？

16.display:inline-block 何時會顯示間隙？

17.overflow: scroll 時不能平滑滾動的問題怎麼處理？

18.一個高度自適應的div，裏面有兩個div，一個高度100px，但願另外一個填滿剩下的高度

1.CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？

CSS 選擇符有哪些

1.id選擇器（ # myid） 2.類選擇器（.myclassname） 3.標籤選擇器（div, h1, p） 4.相鄰選擇器（h1 + p） 5.子選擇器（ul > li） 6.後代選擇器（li a） 7.通配符選擇器（ * ） 8.屬性選擇器（a[rel = "external"]） 9.僞類選擇器（a: hover, li:nth-child）

優先級爲:

!important > id > class > tag

important 比內聯優先級高,但內聯比 id 要高

CSS3新增僞類舉例：

p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。 p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。 p:only-of-type 選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。 p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。 p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。 :enabled :disabled 控制表單控件的禁用狀態。 :checked 單選框或複選框被選中。

CSS3有哪些新特性？

CSS3實現圓角（border-radius），陰影（box-shadow），

對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜

增長了更多的CSS選擇器多背景 rgba

在CSS3中惟一引入的僞元素是::selection.

媒體查詢，多欄佈局

border-image

CSS3中新增了一種盒模型計算方式：

box-sizing。盒模型默認的值是content-box, 新增的值是padding-box和border-box，幾種盒模型計算元素寬高的區別以下：

`content-box（默認）`

佈局所佔寬度Width：

Width = width + padding-left + padding-right + border-left + border-right

佈局所佔高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom

`padding-box`

佈局所佔寬度Width：

Width = width(包含padding-left + padding-right) + border-top + border-bottom

佈局所佔高度Height:

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

`border-box`

佈局所佔寬度Width：

Width = width(包含padding-left + padding-right + border-left + border-right)

佈局所佔高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

2.display：none;和visibility:hidden區別

1）display:none;會讓元素徹底從渲染樹中消失，渲染的時候不佔據任何空間；visibility:hidden;不會讓元素從渲染樹消失，渲染樹元素繼續佔據空間，只是內容不可見。

2）display:none;是非繼承屬性，子孫節點消失因爲元素從渲染樹消失形成，經過修改子孫節點屬性沒法顯示；visibility:hidden;是繼承屬性，子孫節點消失因爲繼承了hidden，經過設置visibility:visible;可讓子孫節點顯示。

三、link與@import的區別

1）link是html方式，@import是css方式

2）link優於@import

4.display:block;和display:inline;的區別

display:block就是將元素顯示爲塊級元素,高度，行高以及頂和底邊距均可控制；

display:inline就是將元素顯示爲行內元素,高，行高及頂和底邊距不可改變；

應用此特性的元素呈現爲內聯對象，周圍元素保持在同一行，但能夠設置寬度和高度地塊元素的屬性

五、如何水平居中一個元素
1）若是須要居中的元素爲常規流中的inline元素，爲父元素設置text-align:center;便可實現
2）若是須要居中的元素爲常規流中的block元素：
i.爲元素設置寬度
ii.設置左右margin爲auto
iii.IE6下需在父元素上設置text-align:center;再給子元素恢復須要的值
3）若是須要居中的元素爲浮動元素：

//肯定容器的寬高 寬500 高 300 的層
//設置層的外邊距

 .div {
      width:500px ; height:300px;//高度能夠不設
      margin: -150px 0 0 -250px;
      position:relative;         //相對定位
      background-color:pink;     //方便看效果
      left:50%;
      top:50%;
 }

4）若是須要居中的元素爲絕對定位元素：

position: absolute;
  width: 1200px;
  background: none;
  margin: 0 auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

6.css垂直居中方法

這個問題又能夠細分爲，被垂直居中的元素是否認高，是文字仍是塊，文字是單行仍是多行文字等等

解決方案：

1.單行文字

元素定高的話，設置margin值或者和外層高度同樣的line-height

2.多行文字：

把多行文字當作總體span，而後當作圖片處理，而後外層div的設置，外部div不能使用浮動

span{display:inline-block; font-size:0.1em; vertical-align:middle;}

div{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}

3.大小不固定，圖片的水平垂直居中：

將要顯示的圖片與一張透明的高度100%，寬度1像素的透明圖片vertical-align:middle對齊

HTML部分（僅示例一張圖片，其餘重複，故略）：

</ul>

css部分：

.zxx_align_box_6 li{height:128px; width:150px; padding:13px 0; float:left; margin-right:10px; border:1px solid #beceeb; text-align:center; font-size:0;} .

zxx_align_box_6 li .alpha_img{height:100%; width:1px; vertical-align:middle;}

.zxx_align_box_6 li .show_img{vertical-align:middle;}

7.自適應佈局

這個問題能夠劃分爲，左固定右自適應寬度，上固定下固定中間自適應高度等等佈局要求。

關於左右自適應的，不低於10種解決方案，還要看dom結構要求是並列仍是嵌套，是否容許有父級元素，是否容許使用CSS3，是否有背景色，是否要兩列等高，等等

例如：先讓右側的寬度定義爲100%；裏面的right_in的左邊距等於左邊固定寬度的尺寸

而關於自適應高度的解決方案就略少一些，大體也是靠，CSS3的calc屬性，內padding，絕對定位後拉伸，動態js計算等等解決方案，一樣也是要看應用場景能用哪一個

8.移動端自適應

固定一個某些寬度，使用一個模式，加上少量的媒體查詢方案

使用flexbox解決方案

使用百分比加媒體查詢

使用rem

9.position的值， relative和absolute分別是相對於誰進行定位的？

absolute :生成絕對定位的元素，相對於最近一級的定位不是 static 的父元素來進行定位。
fixed （老IE不支持）生成絕對定位的元素，一般相對於瀏覽器窗口或 frame 進行定位。
relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。
static 默認值。沒有定位，元素出如今正常的流中
sticky 生成粘性定位的元素，容器的位置根據正常文檔流計算得出

10.上下margin重合問題

浮動元素引發的問題和解決辦法？ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，可是margin-top和margin-bottom卻會發生重合。

解決方法，養成良好的代碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。


11.解釋下浮動和它的工做原理？清除浮動的技巧
浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
 1.使用空標籤清除浮動。 
這種方法是在全部浮動標籤後面添加一個空標籤 定義css clear:both. 弊端就是增長了無心義標籤。
2.使用overflow。 
給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。 
3.使用after僞對象清除浮動。 
該方法只適用於非IE瀏覽器。具體寫法可參照如下示例。使用中需注意如下幾點。1、該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素；



12.

解決方法：浮動元素引發的問題：

（1）父元素的高度沒法被撐開，影響與父元素同級的元素

（2）與浮動元素同級的非浮動元素（內聯元素）會跟隨其後

（3）若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構

使用CSS中的clear:both;屬性來清除元素的浮動可解決二、3問題，對於問題1，添加以下樣式，給父元素添加clearfix樣式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} .clearfix{display: inline-block;} /* for IE/Mac */


13.介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？

有兩種， IE 盒子模型、W3C 盒子模型；
盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)；
區別： IE的content部分把 border 和 padding計算了進去;

14.什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？

響應式設計就是網站可以兼容多個終端，而不是爲每一個終端作一個特定的版本
基本原理是利用CSS3媒體查詢，爲不一樣尺寸的設備適配不一樣樣式
對於低版本的IE，可採用JS獲取屏幕寬度，而後經過resize方法來實現兼容：

$(window).resize(function () { screenRespond(); }); screenRespond(); function screenRespond(){ var screenWidth = $(window).width(); if(screenWidth <= 1800){ $("body").attr("class", "w1800"); } if(screenWidth <= 1400){ $("body").attr("class", "w1400"); } if(screenWidth > 1800){ $("body").attr("class", ""); } }

15.什麼是視差滾動效果，如何給每頁作不一樣的動畫？

視差滾動是指多層背景以不一樣的速度移動，造成立體的運動效果，具備很是出色的視覺體驗
通常把網頁解剖爲：背景層、內容層和懸浮層。當滾動鼠標滾輪時，各圖層以不一樣速度移動，造成視差的

實現原理
- 以「頁面滾動條」做爲「視差動畫進度條」
- 以「滾輪刻度」看成「動畫幀度」去播放動畫的
- 監聽 mousewheel 事件，事件被觸發即播放動畫，實現「翻頁」效果

16.display:inline-block 何時會顯示間隙？

相鄰的 inline-block 元素之間有換行或空格分隔的狀況下會產生間距
非 inline-block 水平元素設置爲 inline-block 也會有水平間距
能夠藉助 vertical-align:top; 消除垂直間隙
能夠在父級加 font-size：0; 在子元素裏設置須要的字體大小，消除垂直間隙
把 li 標籤寫到同一行能夠消除垂直間隙，但代碼可讀性差

17.overflow: scroll 時不能平滑滾動的問題怎麼處理？

監聽滾輪事件，而後滾動到必定距離時用 jquery 的 animate 實現平滑效果。

18.一個高度自適應的div，裏面有兩個div，一個高度100px，但願另外一個填滿剩下的高度

方案1： .sub { height: calc(100%-100px); }
方案2： .container { position:relative; } .sub { position: absolute; top: 100px; bottom: 0; }
方案3： .container { display:flex; flex-direction:column; } .sub { flex:1; }

js：

1.事件冒泡和事件捕獲

2.事件的三個階段

3.事件、IE與火狐的事件機制有什麼區別？如何阻止冒泡？

4.閉包原理及應用

5.說說你對閉包的理解

6.跨域與如何解決跨域問題

7.ajax的post和get如何實現以及區別

8.建立ajax過程

9.ajax的缺點以及如何解決跨域問題

10.cookie 和session 的區別

11.請你談談Cookie的弊端

12.如何刪除一個cookie

13.棧和隊列的區別?

14.棧和堆的區別？

15.構造函數模式

16.new操做符具體幹了什麼呢?

17.js性能優化

18.js組件開發

19.輪播圖實現原理

20.與後臺交互數據綁定實現循環出列表數據、表單驗證

1.事件冒泡和事件捕獲

事件捕獲當你使用事件捕獲時，

父級元素先觸發，子級元素後觸發，即div先觸發，p後觸發。

事件冒泡當你使用事件冒泡時，

子級元素先觸發，父級元素後觸發，即p先觸發，div後觸發。

W3C模型中：

W3C模型是將二者進行中和，在W3C模型中，任何事件發生時，先從頂層開始進行事件捕獲，直到事件觸發到達了事件源元素。而後，再從事件源往上進行事件冒泡，直到到達document。

程序員能夠本身選擇綁定事件時採用事件捕獲仍是事件冒泡，

方法就是綁定事件時經過addEventListener函數，它有三個參數，第三個參數如果true，則表示採用事件捕獲，如果false，則表示採用事件冒泡。

ele.addEventListener('click',doSomething2,true)

true=捕獲 false=冒泡

事件的傳播是能夠阻止的：

• 在W3c中，使用stopPropagation（）方法

• 在IE下設置cancelBubble = true；在捕獲的過程當中stopPropagation（）；後，後面的冒泡過程也不會發生了.阻止事件的默認行爲，例如click <a>後的跳轉~

• 在W3c中，使用preventDefault（）方法；

• 在IE下設置window.event.returnValue = false;

2.事件的三個階段

分別是捕獲，目標，冒泡階段

3.事件、IE與火狐的事件機制有什麼區別？如何阻止冒泡？



1. 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲。

 2. 事件處理機制：IE是事件冒泡、firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件。；

 3. `ev.stopPropagation()`;注意舊ie的方法 `ev.cancelBubble = true`;

4.閉包原理及應用

變量的做用域無非就是兩種：全局變量和局部變量

一：函數內部能夠直接讀取全局變量

var n=999;

　　function f1(){
　　　　alert(n);
　　}

　　f1(); // 999

二：在函數外部天然沒法讀取函數內的局部變量

function f1(){
　　　　var n=999;
　　}

　　alert(n); // error

出於種種緣由，咱們有時候須要獲得函數內的局部變量。可是，前面已經說過了，正常狀況下，這是辦不到的，只有經過變通方法才能實現。

那就是在函數的內部，再定義一個函數

function f1(){

　　　　var n=999;

　　　　function f2(){
　　　　　　alert(n);
　　　　}

　　　　return f2;

　　}

　　var result=f1();

　　result(); // 999

閉包就是可以讀取其餘函數內部變量的函數，閉包能夠用在許多地方。它的最大用處有兩個，一個是能夠讀取函數內部的變量，另外一個就是讓這些變量的值始終保持在內存中。

function f1(){

　　　　var n=999;

　　　　nAdd=function(){n+=1}

　　　　function f2(){
　　　　　　alert(n);
　　　　}

　　　　return f2;

　　}

　　var result=f1();

　　result(); // 999

　　nAdd();

　　result(); // 1000

在這段代碼中，result實際上就是閉包f2函數。它一共運行了兩次，第一次的值是999，第二次的值是1000。這證實了，函數f1中的局部變量n一直保存在內存中，並無在f1調用後被自動清除。

爲何會這樣呢？緣由就在於f1是f2的父函數，而f2被賦給了一個全局變量，這致使f2始終在內存中，而f2的存在依賴於f1，所以f1也始終在內存中，不會在調用結束後，被垃圾回收機制（garbage collection）回收。

5.說說你對閉包的理解

使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。在js中，函數即閉包，只有函數纔會產生做用域的概念

閉包有三個特性：

1.函數嵌套函數

2.函數內部能夠引用外部的參數和變量

3.參數和變量不會被垃圾回收機制回收

6.跨域與如何解決跨域問題

跨域：

關於跨域大概能夠分iframe的跨域，和純粹的跨全域請求。

A上的頁面獲取B上的資源，瀏覽器會檢查服務器B的HTTP頭(HEAD請求)，若是Access-Control-Allow-Origin中有A，或者是通配符*，瀏覽器就會容許跨域。

如何解決跨域問題

jsonp：

原理是：動態插入script標籤，經過script標籤引入一個js文件，這個js文件載入成功後會執行咱們在url參數中指定的函數，而且會把咱們須要的json數據做爲參數傳入。

因爲同源策略的限制，XmlHttpRequest只容許請求當前源（域名、協議、端口）的資源，爲了實現跨域請求，能夠經過script標籤實現跨域請求，而後在服務端輸出JSON數據並執行回調函數，從而解決了跨域的數據請求。

優勢是兼容性好，簡單易用，支持瀏覽器與服務器雙向通訊。缺點是隻支持GET請求。

7.ajax的post和get如何實現以及區別

最簡單的區別：

1.使用Get請求時,參數在URL中顯示,而使用Post方式,則不會顯示出來

2.使用Get請求發送數據量小,Post請求發送數據量大

3.get請求需注意緩存問題,post請求不需擔憂這個問題

AJAX亂碼問題:

編碼問題，一、若客戶端是gb2312編碼，則在服務器指定輸出流編碼二、服務器端和客戶端都使用utf-8編碼

什麼時候使用Get請求,什麼時候使用Post請求：

Get請求的目的是給予服務器一些參數,以便從服務器獲取列表.例如:list.aspx?page=1,表示獲取第一頁的數據

Post請求的目的是向服務器發送一些參數,例如form中的內容.

下面使用實例來表示Get請求和Post請求在發送同一段數據時的區別.

與 POST 相比，GET 更簡單也更快，而且在大部分狀況下都能用。

然而，在如下狀況中，請使用 POST 請求：

沒法使用緩存文件（更新服務器上的文件或數據庫）

向服務器發送大量數據（POST 沒有數據量限制）

發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

8.建立ajax過程，以及json數據如何解析

(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象.

(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.

(3)設置響應HTTP請求狀態變化的函數.

(4)發送HTTP請求.

(5)獲取異步調用返回的數據.

(6)使用JavaScript和DOM實現局部刷新.




json數據如何解析 var xmlHttp = new XMLHttpRequest(); xmlHttp.open('GET','demo.php','true'); xmlHttp.send() xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState === 4 & xmlHttp.status === 200){ } }
https://segmentfault.com/a/1190000000691919

咱們先初始化一個json格式的對象：兩種方式

　　var jsonDate = '{ "name":"ABC","age":23 }'

　　var jsonObj = eval( '(' + jsonDate + ')' ); // eval();方法

　　var jsonObj = JSON.parse( jsonDate ); // JSON.parse(); 方法

9.ajax的缺點以及如何解決跨域問題

一、ajax不支持瀏覽器back按鈕。

  二、安全問題 AJAX暴露了與服務器交互的細節。

  三、對搜索引擎的支持比較弱。

  四、破壞了程序的異常機制。

  五、不容易調試。

如何解決跨域問題

script和iframe

10.cookie 和session 的區別：

一、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。

二、cookie不是很安全，別人能夠分析存放在本地的COOKIE並進行COOKIE欺騙考慮到安全應當使用session。

三、session會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能考慮到減輕服務器性能方面，應當使用COOKIE。

四、單個cookie保存的數據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cookie。

五、因此我的建議：將登錄信息等重要信息存放爲SESSION 其餘信息若是須要保留，能夠放在COOKIE中

11.請你談談Cookie的弊端

cookie雖然在持久保存客戶端數據提供了方便，分擔了服務器存儲的負擔，但仍是有不少侷限性的。

第一：每一個特定的域名下最多生成20個cookie

1.IE6或更低版本最多20個cookie

2.IE7和以後的版本最後能夠有50個cookie。

3.Firefox最多50個cookie

4.chrome和Safari沒有作硬性限制

IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie。

cookie的最大大約爲4096字節，爲了兼容性，通常不能超過4095字節。

IE 提供了一種存儲能夠持久化用戶數據，叫作userdata，從IE5.0就開始支持。每一個數據最多128K，每一個域名下最多1M。這個持久化數據放在緩存中，若是緩存沒有清理，那麼會一直存在。

優勢：極高的擴展性和可用性

缺點：1.經過良好的編程，控制保存在cookie中的session對象的大小。

2.經過加密和安全傳輸技術（SSL），減小cookie被破解的可能性。

3.只在cookie中存放不敏感數據，即便被盜也不會有重大損失。

4.控制cookie的生命期，使之不會永遠有效。偷盜者極可能拿到一個過時的cookie。

1.`Cookie`數量和長度的限制。每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB，不然會被截掉.

2.安全性問題。若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。

3.有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端，那麼它起不到任何做用。

如何刪除一個cookie12.

1.將時間設爲當前時間往前一點。

var date = new Date(); date.setDate(date.getDate() - 1);//真正的刪除

setDate()方法用於設置一個月的某一天。

2.expires的設置

document.cookie = 'user='+ encodeURIComponent('name') + ';expires = ' + new Date(0)

13.棧和隊列的區別?

棧的插入和刪除操做都是在一端進行的，而隊列的操做倒是在兩端進行的。

隊列先進先出，棧先進後出。

棧只容許在表尾一端進行插入和刪除，而隊列只容許在表尾一端進行插入，在表頭一端進行刪除

14.棧和堆的區別？

棧區（stack）—   由編譯器自動分配釋放   ，存放函數的參數值，局部變量的值等。

堆區（heap）   —   通常由程序員分配釋放，   若程序員不釋放，程序結束時可能由OS回收。

堆（數據結構）：堆能夠被當作是一棵樹，如：堆排序；

棧（數據結構）：一種先進後出的數據結構。

15.構造函數模式

使用構造函數的方法，即解決了重複實例化的問題，又解決了對象識別的問題，該模式與工廠模式的不一樣之處在於：

1.構造函數方法沒有顯示的建立對象 (new Object());

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

3.沒有 renturn 語句。

16.new操做符具體幹了什麼呢?

一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。

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

   三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。



var obj  = {};

obj.__proto__ = Base.prototype;

Base.call(obj);

17.js性能優化

1.避免全局查找和當重複操做dom時候存儲局部變量

2.針對不斷運行的代碼應使用setlnterval代替settimeout

3.字符串鏈接使用s+=a 代替s=s+a

18.js組件開發

1.功能模塊化

2.用$extend擴展框架

19.輪播圖實現原理

例子：

 
        <! 
        DOCTYPE  
        html> 
       
        < 
        html 
        > 
       
        < 
        head 
        > 
       
        < 
        meta  
        charset="utf-8"> 
       
        < 
        title 
        >123</ 
        title 
        > 
       
        < 
        style  
        type="text/css"> 
       
        .Div0 {width: 200px;height: 100px;position: absolute;top: 30%;left: 300px;} 
       
        .Div1 {overflow: hidden;position: relative;width: 200px;height: 100px;} 
       
        .Div1 div{width: 200px;height: 100px;position: absolute;top: 0;left: 0;display: none;} 
       
        </ 
        style 
        > 
       
        </ 
        head 
        > 
       
        < 
        body 
        > 
       
        < 
        div  
        class="Div0"> 
       
        < 
        div  
        class="Div1"> 
       
        < 
        div  
        style="background: red;display: block;"></ 
        div 
        > 
       
        < 
        div  
        style="background: yellow;"></ 
        div 
        > 
       
        < 
        div  
        style="background: blue;"></ 
        div 
        > 
       
        < 
        div  
        style="background: green;"></ 
        div 
        > 
       
        </ 
        div 
        > 
       
        </ 
        div 
        > 
       
        </ 
        body 
        > 
       
        < 
        script  
        src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></ 
        script 
        > 
       
        < 
        script 
        > 
       
        $(function(){ 
       
        var i = 0; 
       
        var bimg = $(".Div1 div"); 
       
        var Wid = bimg.width(); 
       
        function WFB(){ 
       
        bimg.eq(i).show().animate({left:-Wid}); 
       
        i++; 
       
        if (i == bimg.length) i = 0; 
       
        bimg.eq(i).css("left",Wid).show().animate({left:'0px'}); 
       
        } 
       
        setInterval(WFB,1000); 
       
        }) 
       
        </ 
        script 
        > 
       
        </ 
        html 
        >

　　點擊切換圖片：

 
        var timer=setInterval(WFB,2000); 
       
        document.onclick=function(){ 
       
        clearTimeout(timer); 
       
        WFB(); 
       
        timer=setInterval(WFB,2000); 
       
        };

原生js：

 
        <! 
        DOCTYPE  
        html> 
       
        < 
        html 
        > 
       
        < 
        head 
        > 
       
        < 
        meta  
        charset="UTF-8"> 
       
        < 
        title 
        ></ 
        title 
        > 
       
        < 
        style  
        type="text/css"> 
       
        * { 
       
        margin: 0; 
       
        padding: 0; 
       
        text-decoration: none; 
       
        } 
       
        body { 
       
        padding: 20px; 
       
        } 
       
        #container { 
       
        position: relative; 
       
        width: 600px; 
       
        height: 400px; 
       
        border: 3px solid #333; 
       
        overflow: hidden; 
       
        } 
       
        #list { 
       
        position: absolute; 
       
        z-index: 1; 
       
        width: 4200px; 
       
        height: 400px; 
       
        } 
       
        #list img { 
       
        float: left; 
       
        width: 600px; 
       
        height: 400px; 
       
        } 
       
        #buttons { 
       
        position: absolute; 
       
        left: 250px; 
       
        bottom: 20px; 
       
        z-index: 2; 
       
        height: 10px; 
       
        width: 100px; 
       
        } 
       
        #buttons span { 
       
        float: left; 
       
        margin-right: 5px; 
       
        width: 10px; 
       
        height: 10px; 
       
        border: 1px solid #fff; 
       
        border-radius: 50%; 
       
        background: #333; 
       
        cursor: pointer; 
       
        } 
       
        #buttons .on { 
       
        background: orangered; 
       
        } 
       
        .arrow { 
       
        position: absolute; 
       
        top: 180px; 
       
        z-index: 2; 
       
        display: none; 
       
        width: 40px; 
       
        height: 40px; 
       
        font-size: 36px; 
       
        font-weight: bold; 
       
        line-height: 39px; 
       
        text-align: center; 
       
        color: #fff; 
       
        cursor: pointer; 
       
        } 
       
        .arrow:hover { 
       
        } 
       
        #container:hover .arrow { 
       
        display: block; 
       
        } 
       
        #prev { 
       
        left: 20px; 
       
        } 
       
        #next { 
       
        right: 20px; 
       
        } 
       
        </ 
        style 
        > 
       
        < 
        script  
        type="text/javascript"> 
       
        /* 知識點：        */ 
       
        /*       this用法 */ 
       
        /*       DOM事件 */ 
       
        /*       定時器 */ 
       
        window.onload = function() { 
       
        var container = document.getElementById('container'); 
       
        var list = document.getElementById('list'); 
       
        var buttons = document.getElementById('buttons').getElementsByTagName('span'); 
       
        var prev = document.getElementById('prev'); 
       
        var next = document.getElementById('next'); 
       
        var index = 1; 
       
        var timer; 
       
        function animate(offset) { 
       
        //獲取的是style.left，是相對左邊獲取距離，因此第一張圖後style.left都爲負值， 
       
        //且style.left獲取的是字符串，須要用parseInt()取整轉化爲數字。 
       
        var newLeft = parseInt(list.style.left) + offset; 
       
        list.style.left = newLeft + 'px'; 
       
        //無限滾動判斷 
       
        if (newLeft > -600) { 
       
        list.style.left = -3000 + 'px'; 
       
        } 
       
        if (newLeft < -3000) { 
       
        list.style.left = -600 + 'px'; 
       
        } 
       
        } 
       
        function play() { 
       
        //重複執行的定時器 
       
        timer = setInterval(function() { 
       
        next.onclick(); 
       
        }, 2000) 
       
        } 
       
        function stop() { 
       
        clearInterval(timer); 
       
        } 
       
        function buttonsShow() { 
       
        //將以前的小圓點的樣式清除 
       
        for (var i = 0; i <  
        buttons.length 
        ; i++) { 
       
        if (buttons[i].className == "on") { 
       
        buttons[i].className = ""; 
       
        } 
       
        } 
       
        //數組從0開始，故index須要-1 
       
        buttons[index - 1].className = "on"; 
       
        } 
       
        prev.onclick = function() { 
       
        index -= 1; 
       
        if (index < 1) { 
       
        index = 5 
       
        } 
       
        buttonsShow(); 
       
        animate(600); 
       
        }; 
       
        next.onclick = function() { 
       
        //因爲上邊定時器的做用，index會一直遞增下去，咱們只有5個小圓點，因此須要作出判斷 
       
        index += 1; 
       
        if (index > 5) { 
       
        index = 1 
       
        } 
       
        animate(-600); 
       
        buttonsShow(); 
       
        }; 
       
        for (var i = 0; i <  
        buttons.length 
        ; i++) { 
       
        (function(i) { 
       
        buttons[i].onclick = function() { 
       
        /*   這裏得到鼠標移動到小圓點的位置，用this把index綁定到對象buttons[i]上，去谷歌this的用法  */ 
       
        /*   因爲這裏的index是自定義屬性，須要用到getAttribute()這個DOM2級方法，去獲取自定義index的屬性*/ 
       
        var clickIndex = parseInt(this.getAttribute('index')); 
       
        var offset = 600 * (index - clickIndex); //這個index是當前圖片停留時的index 
       
        animate(offset); 
       
        index = clickIndex; //存放鼠標點擊後的位置，用於小圓點的正常顯示 
       
        buttonsShow(); 
       
        } 
       
        })(i) 
       
        } 
       
        container.onmouseover = stop; 
       
        container.onmouseout = play; 
       
        play(); 
       
        } 
       
        </script> 
       
        </ 
        head 
        > 
       
        < 
        body 
        > 
       
        < 
        div  
        id="container"> 
       
        < 
        div  
        id="list" style="left: -600px;"> 
       
        < 
        img  
        src="" alt="1" /> 
       
        < 
        img  
        src="" alt="1" /> 
       
        < 
        img  
        src="" alt="2" /> 
       
        < 
        img  
        src="" alt="3" /> 
       
        < 
        img  
        src="" alt="4" /> 
       
        < 
        img  
        src="" alt="5" /> 
       
        < 
        img  
        src="" alt="5" /> 
       
        </ 
        div 
        > 
       
        < 
        div  
        id="buttons"> 
       
        < 
        span  
        index="1" class="on"></ 
        span 
        > 
       
        < 
        span  
        index="2"></ 
        span 
        > 
       
        < 
        span  
        index="3"></ 
        span 
        > 
       
        < 
        span  
        index="4"></ 
        span 
        > 
       
        < 
        span  
        index="5"></ 
        span 
        > 
       
        </ 
        div 
        > 
       
        < 
        a  
        href="javascript:;" id="prev" class="arrow"><</ 
        a 
        > 
       
        < 
        a  
        href="javascript:;" id="next" class="arrow">></ 
        a 
        > 
       
        </ 
        div 
        > 
       
        </ 
        body 
        > 
       
        </ 
        html 
        >

　　html:list(圖片),btn(按鈕)，prev(上一張)，next(下一張)

　　animate（偏移的方法，偏移圖片的寬度）

　　prev（執行animate方法）animate（-圖片寬度）

　　next（animate（圖片寬度）

　　setInterval（自動切換圖片）play方法：設置定時器，1500執行一次prev.coclick（）事件

20.與後臺交互數據綁定實現循環出列表數據、表單驗證

js 發ajax 請求而後循環data

21.this用法

this所在的函數是當作哪一個對象的方法調用的

22.用面向對象的方式編寫

第一種像下面這樣：

 
        function click1(){ 
       
        alert("1"); 
       
        } 
       
        function click2(){ 
       
        alert("2"); 
       
        } 
       
        function click3(){ 
       
        alert("3"); 
       
        }

或者高級一點的就這麼寫：

 
        var MyClass; 
       
        MyClass.prototype.add = function () { 
       
        alert("this is add"); 
       
        }; 
       
        MyClass.prototype.reduce = function () { 
       
        alert("this is reduce"); 
       
        };

其實這種方法已經很不錯了，就是用面向對象的編程思想去寫的，可是感受仍是羅列，不夠完美，後期維護找起來也比較麻煩。

有一種更直觀更系統的寫法

 
        var MyClass = { 
       
        //定義屬性 
       
        //定義私有屬性 
       
        _flag : true, 
       
        _arr : [], 
       
        //定義公有屬性（在外部可調用） 
       
        tips : "hello world", 
       
        //定義私有方法 
       
        _init : function () { 
       
        this._flag = false; 
       
        }, 
       
        //定義公有方法（在外部可調用） 
       
        myAdd : function () { 
       
        this._init(); 
       
        if (!this._flag){ 
       
        alert(this.tips); 
       
        } 
       
        } 
       
        }; 
       
        $(function () { 
       
        MyClass.myAdd(); 
       
        });

以一個類封裝全部的屬性和方法，若是隻容許在類內部調用的屬性和方法用「_」來加以區分。

須要注意的問題是，必定要注意this的做用域

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。