如何避免全局變量污染?
- 避免定義全局變量或全局函數
- 用一個變量進行封裝,并返回外部需要訪問的接口
如何寫出高維護的js代碼
- 配置數據和代碼邏輯分離
如:
改成:
--- - 用js模板
- mustache
- handlebarsjs
MVC的數據模式
model:數據層
view:用戶表現層
controller:用戶交互控制層模塊化開發
利用立即執行函數,可以在不暴露私有數據的情況下公開一些公共的接口
···
//全局變量jQuery和module2被傳入module1中
var module1=(function($,module2){})(jQuery,module2);
···- 盡量不適用全局變量,因為全局變量在整個生命周期中不會被釋放
- 確保解除不需要的事件監聽
不要在閉包中返回外部不需要的對象
使用事件托管方式綁定事件
//獲取父節點并添加一個click事件document.getElementById("list").addEventListener("click",function(e){//檢查事件源元素if(e.target&&e.target.nodeName.toUpperCase=="LI"){//針對子元素的處理}})
常見的web前端攻擊方式
- XSS (Cross Site Scripting)跨站點腳本攻擊,如:
上述例子在chrome瀏覽器中會被攔截
總結:XSS攻擊的特點就是:盡一切辦法在目標網站上執行非目標網上原有的代碼 - CSRF(Cross Site Request Forgery):跨站請求偽造
- 界面劫持
防范web前端攻擊的最重要一個常識是:永遠也不要輕易相信用戶輸入的數據。一定要針對用戶輸入做相關的格式過濾檢查,防止任何可能的前端注入
- 更安全的使用Cookie
移動web前端開發
- 使用流式布局
- 借助css Media queries(媒體查詢),如:
- 使用響應式設計框架
- 利用工具檢查移動設備兼容性 如:
MobiReady
howtogomo
開發移動web端的準備工作
- 確定支持的移動設備
- 處理和桌面端主網站的交互
一些移動設備的開發庫如下:
Mobile-Detect - 設置移動站點為單頁模式不,避免 頁面跳轉,改成更友好的彈出層顯示
- 選擇合適的移動前端框架,如:
jquerymobile
sencha touch
kendo
ionic
一些定義解釋
作用域鏈:多個函數嵌套定義時,就會形成作用域包含的關系,這個關系稱為作用域鏈,在內部函數內調用外部對象會降低性能
一些工具介紹
- picturefill 處理圖片在不同設備上的顯示問題 picturefill