前端開發四

七、閉包問題

閉包：函數能被外部調用到，則該做用連上的全部變量都會被保存下來。

做用：①能夠讀取函數內部的變量；②至關於劃出了一塊私有做用域，避免數據污染；③讓變量始終保存在內存中

使用全局變量被認爲是很差的習慣，並且容易形成錯誤而且維護成本較高，因此js能夠採用閉包的方式讀取函數的內部變量。可是若是大量使用閉包就會形成過多的變量始終保存在內存中，會形成內存泄漏。

一個簡單的閉包例子：

function f1(){
  var n=999;
  function f2(){
    alert(n);
  }
  return f2;
}
var result=f1();
result(); // 999

九、模塊化編程

①AMD（異步模塊定義） requirejs

defined(id,deps,factory)
require([dependency],function(){})

異步加載，瀏覽器不會失去響應

它指定的回調函數，只有前面的模塊都加載完成後，纔會運行，解決了依賴性問題

②CMD（通用模塊定義） seajs

模塊定義方式和模塊加載時機處理不一樣

defined(id,deps,factory)
function(require,exports,module)
module.exports = ______;

③區別：AMD依賴前置，在定義模塊的時候就要聲明其依賴的模塊；CMD就近依賴，只有在用到哪一個模塊的時候再去require；

十一、少用float？

①使用float可能會形成兼容性問題，好比在ie6如下，float元素margin加倍問題；②使用float以後會影響左右元素，有可能形成錯位問題（float以後都要clear）

解決：可用display、position轉化

①無序連接（ul、li），設定li標籤屬性：display:inline

②div左右結構，好比在右側要放一個more（更多）來顯示更多信息的時候用到了float:right，能夠用定位來作。給包裹more的div設定position：relative，而後more這個標籤right：0便可。結構更爲清晰一點。

1八、什麼是MVVM框架？

MVVM是Model-View-ViewModel的簡寫。

MVVM 是 Web 前端一種很是流行的開發模式，利用 MVVM 可使咱們的代碼更專一於處理業務邏輯而不是去關心 DOM 操做。目前著名的 MVVM 框架有 vue, avalon, angular 等，這些框架各有千秋，可是實現的思想大體上是相同的：數據綁定 + 視圖刷新。跟MVC同樣，主要目的是分離視圖（View）和模型（Model）。View能夠獨立於Model變化和修改，一個ViewModel能夠綁定到不一樣的"View"上，當View變化的時候Model能夠不變，當Model變化的時候View也能夠不變。

在MVVM中，數據是核心，因爲VIewModel與View之間的雙向綁定，操做了ViewModel中的數據（固然只能是監控屬性），就會同步到DOM，咱們透過DOM事件監控用戶對DOM的改動，也會同步到ViewModel。

<div id="mobile-list"> 
  <h1 v-text="title"></h1> 
  <ul> 
    <li v-for="item in brands"> 
      <b v-text="item.name"></b> 
      <span v-show="showRank">Rank: {{item.rank}}</span> 
    </li> 
  </ul>
</div>

var element = document.querySelector('#mobile-list');
var vm = new MVVM(element, { 
  'title' : 'Mobile List',
   'showRank': true,
   'brands' : [ 
    {'name': 'Apple', 'rank': 1}, 
    {'name': 'Galaxy', 'rank': 2},
    {'name': 'OPPO', 'rank': 3} 
  ]
});
vm.set('title', 'Top 3 Mobile Rank List'); // => <h1>Top 3 Mobile Rank List</h1>

以上這段如此簡潔的代碼，就是MVVM框架的一個簡單的實現效果。在HTML代碼裏面，可能會嵌入不少自定義的屬性（標記），以此來實現數據的綁定，並且還能夠進行一些簡單的邏輯處理，好比if和循環等。

react應該也算是MVVM框架，可是與傳統的MVVN框架不一樣的是，react默認數據綁定方式是單向綁定，而vue及angular都是雙向綁定；react使用虛擬DOM配合JSX，而vue及angular直接將數據經過屬性綁定在真實DOM上的。

MVVM框架的優勢：

一、方便測試

在MVC下，Controller基本是沒法測試的，裏面混雜了個各類邏輯，並且分散在不一樣的地方。有了MVVM咱們就能夠測試裏面的viewModel，來驗證咱們的處理結果對不對。

二、便於代碼的移植

能夠把一些視圖邏輯放在一個ViewModel裏面，讓不少view重用這段視圖邏輯。好比iOS裏面有iPhone版本和iPad版本，除了交互展現不同外，業務邏輯的model是一致的。這樣，咱們就能夠以很小的代價去開發另外一個app。

三、獨立開發

開發人員能夠專一於業務邏輯和數據的開發（ViewModel），設計人員能夠專一於頁面設計，使用Expression Blend能夠很容易設計界面並生成xml代碼。

20、使用原生js實現ajax

建立一個 XMLHttpRequest 對象。若是不支持建立該對象的瀏覽器，則須要建立 ActiveXObject，具體方法以下：

var xmlHttpRequest;
function createXmlHttpRequest(){
  if(window.XMLHttpRequest)//非IE
    xmlHttpRequest = new XMLHttpRequest();
  else if(window.ActiveObject)//IE6+
    xmlHttpRequest = new ActiveObject("Msxml2.XMLHTTP");
  else//IE6-
    xmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");
}

提交請求的方法：

open(method,url);//分別爲提交的方法（GET或者POST）和提交的url
send(content);
onreadystatechange(){
  if(xmlHttpRequest.readyState == 4){
    if(xmlHttpRequest.state == 200){
      //請求成功
    }  
  }else{
    //請求失敗
  }
}

一、前端安全方面有沒有了解？XSS和CSRF如何攻防？

XSS(Cross Site Scripting)是跨站腳本攻擊，爲了區分CSS，因此縮寫爲XSS。惡意攻擊者往Web頁面裏插入惡意Script代碼，當用戶瀏覽該頁之時，嵌入其中Web裏面的Script代碼會被執行，從而達到惡意攻擊用戶的目的。

在網頁的一些公共區域（例如，建議提交表單或消息公共板的輸入表單）輸入一些文本，這些文本被其它用戶看到，但這些文本不只僅是他們要輸入的文本，同時還包括一些能夠在客戶端執行的腳本。如：

"/> <script>alert(document.cookie);</script><!--

在文本框中輸入以上代碼，而後點擊提交，就會把用戶的cookie彈出來。

XSS漏洞修復

1.將重要的cookies標記爲HTTP ONLY。

2.只容許用戶輸入咱們指望的數據。如年齡框只能輸入數字。

3.對數據進行HTTP Encode處理。

4.過濾或者移除特殊的HTML標籤。

5.過濾JS事件的標籤。

CSRF（Cross-site request forgery）是跨站請求僞造。XSS利用站點內的信任用戶，而CSRF則經過假裝來自受信任用戶的請求來利用受信任的網站。其實就是攻擊者盜用了你的身份，以你的名義發送惡意請求。

CSRF攻擊的思想

用戶瀏覽並登錄信任網站A；經過驗證，在用戶處產生X的cookie；用戶在沒有登出X的時候，瀏覽危險網站B；B要求訪問第三方網站A，發出一個請求；根據這個請求，瀏覽器使用剛纔產生的cookie直接訪問A。

一個簡單的實例

銀行網站A，它以GET請求來完成銀行轉帳的操做，如：http://www.mybank.com/Transfer.php?toBankId=11&money=1000

危險網站B，它裏面有一段HTML的代碼以下：

<img src=http://www.mybank.com/Transfer.php?toBankId=11&money=1000>

首先，你登陸了銀行網站A，而後訪問危險網站B，噢，這時你會發現你的銀行帳戶少了1000塊......

CSRF的防護

1.在表單裏增長Hash值，以認證這確實是用戶發送的請求，而後在服務器端進行Hash值驗證。

2.驗證碼：每次的用戶提交都須要用戶在表單中填寫一個圖片上的隨機字符串。

20、是否瞭解什麼前沿的技術、或者你本身有什麼技術特長、在哪方便有優點？