去年6月份左右，加入了一個創(chuàng)業(yè)公司，很幸運做了一個從零開始的項目，前端工程由我一手搭建起來，并不斷迭代功能到現(xiàn)在，有許多的感悟心得，在這里寫點總結(jié)
確定框架、技術(shù)點
一個項目的開始，特別是豐富多樣的前端工程，首先一定要確定好采用的框架和技術(shù)點。2016年vue.js如火如荼，webpack強勢崛起，但是是否就可直接拿到項目中搞起呢？答案是否定的，一個新的技術(shù)如果自己或團隊中成員都還在學習摸索的過程，是肯定不能在生產(chǎn)環(huán)境中使用的，更何況這是個創(chuàng)業(yè)的團隊，沒有成熟完整的前端團隊。所以我當時還是走老套路，jquery為核心，fastclick輔助，requireJs按需加載，arttemplate做模板渲染，核心UI類庫使用jqueryWeUI，加上sass預(yù)編譯樣式文件，gulp打包構(gòu)建，（后臺是微服務(wù)架構(gòu)，maven構(gòu)建，springMVC+mybatis，此工程為h5前置工程）這樣一來就基本上滿足條件，可以開工了。
開發(fā)工具
不同的開發(fā)工具可能在展示格式上有一定的差別，所以一個團隊最好還是能統(tǒng)一的開發(fā)工具。后臺一般使用eclipse，前端我推薦使用sublime，以及相關(guān)的插件：
開發(fā)規(guī)范，命名規(guī)則
既然是多個人同時開發(fā)，肯定會有一些代碼風格上的異同，然而為了方便后期維護，必需制定一些相關(guān)的規(guī)范。如：
開發(fā)規(guī)范
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <meta name="format-detection" content="telephone=no" > <title>通用模板頁面</title> <link rel="stylesheet" type="text/css" href="/static/li/li-1.2.0.css"></head><body> <header></header> <article></article> <footer></footer></body><script type="text/html" id="registerMainTpl"></script><script src="../static/component/requirejs/require.min.js"></script><script type="text/javascript">var script = document.createElement("script"), head = document.head || document.getElementsByTagName('head')[0]; script.type = "text/javascript"; script.src = '/config.js?ver=' + (new Date()).getTime(); head.appendChild(script); script.onload = script.onreadystatechange = function(){require( [ 'jquery', 'fastclick', 'artTemplate', 'li',//自己封裝的js類庫，包括head里面引用的li-1.2.0.css 'common',//公共js，存放一些公用的方法 ], function($,FastClick,template){ FastClick.attach(document.body); var $body = $('body'), $header = $('header'), $article = $('article'); var registMain = { h5: function(){ this.renderHtml(); this.renderComponent(); this.watch(); }, //全局屬性 options: { }, //渲染模板的數(shù)據(jù) data: { }, //渲染html renderHtml: function(){ }, //渲染組件 renderComponent: function(){ }, //事件監(jiān)聽 watch: function(){ var self = this; } } dn.init(function(){ registMain.h5(); }) }) }</script></html>所有頁面編碼必須是
盡量使用語義話標簽，如頭部使用header，內(nèi)容使用articl，頁腳使用footer，模塊使用section標簽
所有頁面采用下面的通用模板
命名
id采用駝峰命名法則，如 formName
class中間用-隔開，如 li-col-50
圖片命名也用-隔開，如 zhongan-bananer
模板以Tpl結(jié)尾，如 registerMainTpl
函數(shù)也用駝峰命名，使用 get/set/put/delete等前綴
文件名也用駝峰，使用跟文件內(nèi)容相同的英文單詞或詞組
jquery選擇器能用id就不用class
目錄結(jié)構(gòu)
一個項目的目錄結(jié)構(gòu)就像人的骨架一樣重要，對于日漸迭代版本越來越多的前端項目，如果沒有一個好的目錄結(jié)構(gòu)會顯得非常臃腫，難以維護，以下這個截圖是我現(xiàn)在正使用的目錄，也還有需要改進的地方，做一個參考：
定義readme.md
將規(guī)范規(guī)則，文檔目錄、wiki鏈接等說明放在readme必讀文檔里
定義config.js
如果你是使用requirejs的項目，肯定有個config.js文件，這個文件每個頁面都會引用，并且是在頁面加載js的開始同步引用。官方說法是這個頁面放js文件的key-value形式配置呢，而我習慣再js配置之前再定一個window對象的項目唯一子對象，再將項目一些常用的常量也定義好，以及請求狀態(tài)碼、url匯總，這樣極有利于后續(xù)維護，如：
//項目的全局唯一對象window.li = {
version: 20170301,//當前版本號，打包時用gulp自動變更
errorTips: '哎喲，網(wǎng)絡(luò)好像有點問題了..',//無網(wǎng)絡(luò)提示
timeout: 1000*60*60*24*20,//登錄失效暫時為20天
_MOBILE: 'http://h5.liliangel.cn/base/mobile',//跳轉(zhuǎn)手機頁面
_ROOT: 'http://www.liliangel.cn',//測試域名地址
_XHR: '/rest/',//ajax請求前綴
_CORS: '/cors/',//跨域請求前綴
_STATIC: 'http://static.liliangel.cn',//靜態(tài)資源域名
_WX: 'http://h5.liliangel.cn/'//微信h5服務(wù)器地址}//所有請求狀態(tài)碼li.code = {
SUCCESS: 600, //成功
PHONE_EXIST: 603 //手機號碼已經(jīng)存在}//所有請求urlli.api = {
sendMessage: 'wechat/sendMessage' //發(fā)送消息url}//靜態(tài)資源配置require.config({
urlArgs: "v=" + li.version,
baseUrl : "/",
paths: {
jquery:'plugin/jquery/jquery-1.9.0.min',
artTemplate: 'plugin/template/artTemplate-3.0',
},
shim: {
bootstrap: {
deps: ['jquery'],
exports: '$'
}
},
waitSeconds: 15});定義common.js
用來放置所有公共方法，同樣也是每個頁面都引用，正如上面定義好的一些常量一樣，一個項目的開始，還需要一些方法上的準備工作，如：
所有js方法li.init()主入口，相當于jquery的ready()方法，這樣一來就可以控制所有js加載前做的事情了，如前置判斷在微信瀏覽器執(zhí)行fun1，在原生app中執(zhí)行fun2，這也是混合式開發(fā)中常見的需求。
ajax的li.GET()、li.POST()方法，如果你覺得ajax的封裝可能不能滿足的特定需求，比如通用的加載中、比如通用的異常、通用的請求超時時間和回調(diào)、通用的請求完成回調(diào)、是否需要驗證token等等，總之你可以根據(jù)自己風格重寫一下ajax未必不可...
通用的獲取token方法li.getToken()，很多時候請求需要驗證token，前端需要把這個證書獲取到傳給后臺，那么這個獲取證書的邏輯后續(xù)可能會存在一些變動，如加密算法修改、原生端通過交互方法調(diào)用app內(nèi)的然后微信端從緩存或session中獲取等等，所以獲取token方法也必須封裝好
通用的登錄過期提示、回調(diào)。當調(diào)用后臺接口返回登錄過期或者非法請求后，需要做些通用的處理，如去登錄頁、三秒提示后去登錄頁、去錯誤頁等，總之存在需求變故的可能的地方，能封裝的方法盡量封裝，免得到時候需求一變化全部都得去改
通用的去登錄、注冊頁方法。通常一個項目中，去登錄頁面的會有很多地方調(diào)用，同時可能在方法里判斷一下手機號是否已經(jīng)注冊、沒有注冊就去注冊頁面這樣的簡單邏輯，提高用戶體驗..
跳轉(zhuǎn)頁面方法，可能你會覺得用window.location.href足夠了，但是實際的開發(fā)中，緩存的現(xiàn)象真的很頭疼，盡管你各種設(shè)置各種加版本號了，但是你通常會忽略在加載頁面的時候在url后面也添加一個版本號
后退
通常情況下，你可能會覺得window.history.go(-1)就可以了，但是如果你的頁面同時也要用在混合app里時，就需要考慮一些和原生端交互的問題，跳轉(zhuǎn)頁面也是一樣，通常情況下需要保留當前webview重新打開一個webview，所以盡量將后退和跳轉(zhuǎn)頁面封裝一個通用的方法，方便后期添加修改。判斷當前瀏覽器廠家
h5最多的可能就是判斷是否是微信瀏覽器了var ua = navigator.userAgent.toLowerCase(), isWechat = ua.indexOf('micromessenger') != -1;if(isWechat){ ... }獲取url參數(shù)
獲取當前頁面url地址中的參數(shù)是很常用的方法，通常我也會將其封裝在common里面，如：getUrlPar: function(name){ var _reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"), _regNext = window.location.search.substr(1).match(_reg); if (_regNext != null) return decodeURI(_regNext[2]) || ''; else return ''; },ajax 全局錯誤監(jiān)聽
通常情況下，后臺會在web.xml會配置一個error-page指向一個錯誤頁面，但是那樣都是跳轉(zhuǎn)頁面404錯誤還好，其他錯誤也跳頁面其實并不友好，而其他的錯誤通常是請求中錯誤，我們只要設(shè)置一個ajax全局監(jiān)聽即可，下面是代碼片段，當然還可以做很多你暫時沒有想到的事情
$(document).on('ajaxError', function(e, xhr, options){ if (404 == xhr.status) { common.404()
}else if(500 == xhr.status){ common.500()
}
})定義common.css
所有公共樣式，同樣的每個頁面都要引用，其中在整個項目樣式通用控制起決定性作用，如：
全局字體樣式
* { font-family: 'Microsoft YaHei'; }標簽樣式
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; }/** 標簽樣式 start */html { font-size: 20px; }body { font-size: 16px; background-color: #e5e6e7; }h1 { font-size: 2.25rem; }h2 { font-size: 1.975rem; }h3 { font-size: 1.50rem; }h4 { font-size: 1.125rem; }h5 { font-size: 0.875rem; }h6 { font-size: 0.750rem; }a { text-decoration: none; -webkit-tap-highlight-color: transparent; }em { font-style: normal; }label > * { pointer-events: none; }ul { list-style: none; }button { -webkit-appearance: none; border: 0; background: 0 0; }媒體查詢控制字體大小
/** 媒體查詢 start */@media only screen and (min-width: 400px) { html { font-size: 21.33333333px !important; } } @media only screen and (min-width: 414px) { html { font-size: 22.08px !important; } } @media only screen and (min-width: 480px) { html { font-size: 25.6px !important; } }這是所有頁面的基礎(chǔ)樣式控制，主要是在字體方面，用rem來解決移動開發(fā)中多屏適配，如果有UI框架引入的時候就要根據(jù)實際情況考慮是覆蓋基礎(chǔ)樣式還是被覆蓋來決定引入的先后順序了
打包（gulp）
壓縮css、圖片，壓縮、加密js
去掉console.log()等調(diào)試信息
給css自動添加兼容性前綴
給js、css、img、font、json等靜態(tài)資源引用處添加版本號（當前時間戳）
E: cd \h5\weixin\targetgulp build cd \h5\weixin\target\weixin\ del \h5\weixin\target\weixin\weixin.war cd \h5\weixin\target\weixin\ jar cvf weixin.war ./ del \last\code\2017\dnzd\weixin.war move weixin.war \last\code\2017\dnzd\
實際開發(fā)中可能有實時刷新和實時編譯sass這些任務(wù)。上面是生產(chǎn)構(gòu)建的腳本，build這個任務(wù)里面包含了上面4點，當然還可以添加requireJs優(yōu)化等等這些...
意識和協(xié)作
團隊協(xié)作開發(fā)中，成員寫代碼的意識很重要，一個再完善的開發(fā)規(guī)范不如有個良好的代碼意識的程序員，一個技術(shù)再好團隊不如一個團隊意識強的的團隊，當然，改變一個人的開發(fā)習慣是比較痛苦的，但是如果你發(fā)現(xiàn)這是一個好的規(guī)范，那么你需要刮骨療傷去成長，如果你不能忍受一些條條框框，那么團隊也需要更好的程序員。在項目開發(fā)協(xié)作中，特別是團隊組建初期，特別是前后臺交互、UI跟前端對接、產(chǎn)品經(jīng)理跟開發(fā)溝通中，可能會存在很大的意見分歧，可可能有人會說你代碼哪里哪里不好、沒有注釋、不可維護.. 求同存異，盡可能的少去指責他人，因為你看上去亂遭遭的代碼，永遠相信也是寫的人當時深思熟慮后的作品。同時面對別人的說法，你需要更成熟的選擇一笑而過，你也應(yīng)該去采納別人的建議，沉默中把自己的弱項提高，那就是成長。
多說幾句
做前端的這幾年，我從一個css、js都不懂的小白也算是歷練成了一個老司機，其中的辛酸苦辣只有自己明白。學習的過程的確是痛苦的，但卻也是有樂趣在其中的，深有體會，一件事情堅持一直做下去，總會有許多的收獲，時間長了，慢慢的你會發(fā)現(xiàn)，在很多人心中你已經(jīng)很厲害了。就像寫博客的這一年多，除了我自己收獲許多積累許多之外，我還意外收獲了35個粉絲！最后想說的是，前端是豐富多彩的，你可以融入其中，但不能只停留在這一塊領(lǐng)域，你想要更好的發(fā)展，你必須多元化發(fā)展，比如做一個會JAVA后臺的前端，做一個偏UI的前端，做一個很懂技術(shù)的產(chǎn)品經(jīng)理，這些都將是你的優(yōu)勢，很多企業(yè)其實并不需要你會很高深的技術(shù)，很多項目其實也用不上多少高深的技術(shù)，很多時候，你能實現(xiàn)需求，能做出用戶體驗好的產(chǎn)品，能再特殊的階段兼任某個崗位，能做一些別人做不了的事情，你的存在就更有價值！總之在技術(shù)上要抓住一個重點，也要發(fā)散自己的技術(shù)點，走更寬的路，同時技術(shù)人也要注重情商的提高..
http://www.cnblogs.com/liliangel/p/6732507.html
延伸閱讀
- PreSkool第一階段項目總結(jié) 2023-04-15
- 人生感悟之項目篇 2023-04-15
- 高校足球聯(lián)賽項目 2023-04-15
- 云兿匯項目 2023-04-08
- WHTHY項目組——向上 2022-09-20
- 從0到0.5，堅持學習 2022-09-08
- 企業(yè)日程管理系統(tǒng)項目感想 2022-07-13
- 企業(yè)日程管理平臺項目感言 2022-07-13
- 未來很長，就從這里，“碼”上開始吧 2022-07-12
- Model傳媒項目答辯感想 2022-07-12
PreSkool第一階段項目總結(jié)