前端如何開始一個新項目

情景1

1.瀏覽器兼容 IE8+，webkit, firefox，opera

2.柵格系統 bootstrap，用於快速佈局

3.準備一份本身積累的css文件，如base.css其中內容是以前工做積累的經常使用css如

• 定位
• 文本溢出
• 外邊距，內邊距
• z-index
• 基礎文字顏色規範
• 文字大小規範
• 內容溢出處理
• 光標樣式
• 文本換行處理

 

4.準備一份本身積累的js文件，如Utils.js其中內容是以前工做積累的經常使用的js方法如

• 獲取cookie，設置cookie，清除cookie
• 獲取sessionStorage,設置sessionStorage，清除sessioStorage
• 獲取localStorage，設置localStorage，清除localStorage
• 驗證碼倒計時
• 天-時-分-秒  倒計時
• 獲取url中的參數
• 多級聯動
• 通用對話框
• 圖標狀態切換時一概加active樣式類
• 簡易搜索
• 簡易日曆

 

 

5.便捷的插件

• clamp.js用於統一處理各類瀏覽器的文字溢出樣式
• jquery.mCustomScrollbar.min.js用於統一處理各類瀏覽器的滾動條樣式，注意，動態生成的dom渲染會有問題

6.應該注意的細節點

　　textarea標籤中的placeholder問題， textarea的開頭標籤和結尾標籤中間不要有空格，不然，placeholder的效果不會出現

　　eg:

       <textarea placeholder="請填寫內容~"></textarea> // 提示內容能夠顯示

　　<textarea placeholder="請填寫內容~">      </textarea> // 提示內容不能顯示

       標題點擊範圍問題，由於h1~h6等的標題標籤是塊級元素，不少地方是須要點擊的，此時，要把他們的display類型轉爲display:inline-block;由於點擊區域只限餘有文字的部分，而不是整個標題標籤部分，bug中常出現相似問題

 7.通用的交互必定要抽出來寫，被抽出來的內容的邏輯應該足夠簡單，這將對後面的交互修改有極大的幫助

 8. 移動端調試

 調試工具：chrome://inspect/#devices

 具體調試方法： http://blog.csdn.net/byc233518/article/details/52437498