【開發思想·轉載】理想的前端開發模式探究

本文出處

http://blog.163.com/wr_asdf/blog/static/4293045120115105291592/

開發要點

1.文件目錄結構很重要（此處可能須要貼圖）

1. 依據功能切分模塊，讓website 模塊化。
   JS 模塊化
   Css 模塊化
   Html 模塊化
   3.合理的架構模型，通訊和加載機制。
   4.合理的測試模型（Jspec），儘可能使用自動化測試，減小手工測試步驟。

這種模式的好處

1. 有利於story的拆分
2. 有利於多組並行開發
3. 有利於迭代開發
4. 有更好的容錯、解耦合處理
5. 方便代碼的管理和維護
6. 利於添加測試 （此點有待考量）

// TODO 此處可能須要細化

Js ---> js類庫 (建議使用Jquery , 其插件不少，用起來很方便)
---> js組件庫 （能夠考慮JqueryUI + plugin + Require.js）
---> js 框架 (backbone.js 前端mvc 框架 + sandbox 框架)
Css --> reset.css
---> base.css
---> 960.css
---> page.css
---> 合理的命名規範 + namespace 管理
Html --> 一致的編碼風格
IDE --> Intellij 10 至關好用
JS + Css + html -- compress 工具 ---> 發佈上線使用，能夠集成到CI環境中去

前端代碼的性能和質量

1 Html 的 performance

1. Css 的 performance
2. Images 的 performance
3. Jquery 的 performance 可能須要總結
4. Js 的 performance （原生js 的performance）
5. Page 的performance (page performance 的13條原則)
6. Code Refactoring
7. Code Review

html 設計理念

分離內容和樣式
分離結構和樣式
分離結構和內容

css三級結構

1. 全站級css ： reset.css +960.css+ core.css
   2.產品級css : 產品統一的風格
   3.Page級css : 頁面專屬定製樣式

JS架構分層

前端代碼的安全性

經常使用攻擊模式：

1. XSS ( Cross Site Script) ， 跨站腳本攻擊
2. CSRF (Cross Site Request Forgery) ， 跨站點僞造請求
3. Cookie劫持

解決方案：

1. html上轉義一些特殊的字符 （ < > & ）
   
2. Js 代碼進行字符過濾
   
3. 後端增長黑白名單策略
4. 經過referer token 或者 驗證碼來檢測用戶提交
5. 用戶相關的填刪改差 都用post操做
6. 避免全站通用cookie （嚴格設置cookie的做用域）

===From taobao==========

1. 避免使用外部引用Js
   2.慎用eval、setTimeout、setInterval
2. 禁止發送頁面信息到第三方站點
3. 若是Json返回的信息含有用戶私密信息，須要token
   5.避免使用添加js標籤來達到跨域訪問的目的，應當使用flash實現跨域訪問。
   6.js 代碼須要通過jslint的測試。

Html5 + css3

1. 採用漸進支持的模式 （我的提倡，若是沒有特殊需求，拋棄IE6）
2. 多采用一些html5新技術

我的成長和培訓(固然和公司相關)：

1. 有本身的技術積累體系
2. 喜歡分享，幫助別人的同時，也提升本身。必定要有本身的blog，記錄一些東西，讓本身的知識沉澱下來。
3. 和不一樣領域技能的人pair，這樣能夠發現本身熟知領域外的東西。（最近對CI很感興趣）
4. 多參加Session，workshop（公司有能人自發組織，學習的氛圍很好）
5. 多多學習英語