【WEB前端開發最佳實踐系列】JavaScript篇

1、養成良好的編碼習慣，提升可維護性

一、避免定義全局變量和函數，解決全局變量而致使的代碼「污染」最簡單的額方法就是把變量和方法封裝在一個變量對象上，使其變成對象的屬性：

1 var  myCurrentAction = {
2     length : 0 ,
3     init : function(){},
4     action : function(){}
5 }

還能夠將全局的變量包含在一個局部做用域中，而後在這個做用域中完成這些變量的定義以及變量使用的邏輯：

1 (function(){
2    var length = 0;
3    function init(){}
4    function action (){}
5 })();

模塊之間交互使用return語句(即作到了代碼邏輯的封裝，又公開了須要訪問的接口)：

1 var myCurrentAction = (function(){
2      var length = 0;
3      function init(){}
4      function action(){}
5      return {
6          init : init
7  }
8 })();

 在JavaScript中，對象的構造中有一個名爲prototype的對象，即爲原型對象，這個對象上的屬性或方法是共享給全部實例對象的。因此說實例對象上的屬性和方法來自於兩個地方：自身和對應的原型對象。由於原型自己也能夠是其餘函數的實例對象。因此原型對象中的屬性和方法也可能來自於做爲實例對象時對應的原型對象上。這就造成了一個由各原型對象組成的鏈條，稱爲原型鏈。原型鏈的最頂端是構造函數Object中名爲prototype的對象，查找對象上的屬性或方法時，首先會查找自身是否存在此屬性或方法，若是未找到，則會繼續在原型鏈上查找，直到找到或者未找到返回undefined值爲止。

DOM操做對性能影響最大其實仍是由於它致使了瀏覽器的重繪和重排。

--重繪指的是頁面的某些部分要從新繪製，好比顏色或背景色的修改，元素的位置和尺寸並無改變。

--重排則是元素耳朵位置或尺寸發生了改變，瀏覽器須要從新計算渲染樹，致使渲染樹的一部分或所有發生變化

--致使緣由

• 增長、刪除和修改可見DOM元素
• 頁面初始化的渲染
• 移動DOM元素
• 修改CSS樣式，改變DOM元素的尺寸
• DOM元素內容改變，是的尺寸被撐大
• 瀏覽器窗口尺寸改變
• 瀏覽器窗口滾動

 2、常見的Web前端攻擊方式

一、XSS

XSS是Cross Site Scripting的縮寫，即跨站點腳本攻擊。XSS發生在用戶的瀏覽器端，即當用戶在加載HTML文檔時執行了非預期的惡意腳本，

二、CSRF

CSRF是Cross Site Request Forgery的縮寫，譯爲跨站請求僞造。CSRF和XSS攻擊都是發起各類請求，但對CSRF來講請求是來源於其餘網站的，即爲跨站的請求，而且這個請求並非來自於用戶的意思，而是僞造的請求，誘導用戶發起的請求。

三、界面操做劫持

點擊劫持、拖放劫持。

JSONP技術提供的跨域數據訪問利用了同源策略不完善的地方，算是技巧性的方案，而CORS則是從規範上專門定義的一項跨域數據訪問的技術。JSONP只能用GET請求，而CORS比JSONP更先進和可靠。CORS主要的原理是在服務器端設置Access-Control-Allow-Origin頭，從而限定了服務請求的發起端。

防範方式：

一、更安全的使用Cookie :設置Cookie爲HttpOnly，即禁止了JavaScript操做Cookie.若是須要用到此方式來傳遞和保存數據的話，應該使用其餘安全的代替方案，好比HTML5的LocalStorage.

3、移動設備和桌面端設備，事件綁定的差別

移動設備上能夠作多點觸摸操做，但在PC上主要是鼠標的單一點操做。

觸摸事件分爲4類：touchstart、touchmove，touchend，touchcacel。

touchstart和touchend對應桌面端瀏覽器的mousedown mousemove和mouseup,每一個觸摸事件都包含3個列表：touchs targetTouches和changed-Touches,其中須要注意的是touchcancel事件，它比較獨特。在某些狀況下觸摸事件可能被打斷。例如：在IOS系統的Safari瀏覽器中，用戶按下了home按鍵，或者按了瀏覽器底部工具條上的按鍵等

4、如何讓桌面WEB頁面兼容移動設備

一、使用流式佈局

流式佈局和固定佈局是相對的，流式佈局的核心思想是使用百分比來設置頁面部分的寬度，而固定佈局是指頁面主要模塊使用固定的寬度。

使用流式佈局的優勢是不管窗口有多大，網頁中的各模塊均可以完整地顯示在窗口中，不會由於瀏覽器窗口變窄而致使頁面部分模塊隱藏。這一優勢在兼容各類尺寸的移動設備時尤其有用，保證了在移動設備中能完整地顯示網頁中的內容。

二、藉助於CSS Media queries(媒體查詢)技術

Media queries是在CSS3中新加入的特性，經過指定媒體類型的方式來限定所包含樣式的做用範圍。https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

1 @media (max-width: 12450px) { ... }

三、使用合適的圖片顯示兼容方案

四、保持頁面簡潔，不要使用移動設備不兼容的技術

五、設置viewport

六、增長連接和按鈕的可操做區域

七、使用響應式設計框架

八、使用工具檢查網頁的移動設備兼容性（MobiReady  、 W3C mobileOK Checker、iPadPeek、Howtogomo）