熱門(mén)文章
- Bootstrap安裝教程 (發(fā)布時(shí)間：2021-06-25 17:03:51)
- bootstrap框架怎么用？10分鐘教你學(xué)會(huì)使用bootstrap開(kāi)發(fā)網(wǎng)頁(yè) (發(fā)布時(shí)間：2021-06-25 16:32:17)
- Bootstrap5 出來(lái)了，我應(yīng)該學(xué)習(xí)Bootstrap4還是Bootstrap5？ (發(fā)布時(shí)間：2021-05-02 13:21:53)
最新文章
- 我通過(guò)重新學(xué)習(xí) HTML 學(xué)到的東西 (發(fā)布時(shí)間：2021-06-30 17:37:25)
- 設(shè)計(jì)師：注意你的語(yǔ)言 (發(fā)布時(shí)間：2021-06-30 17:28:00)
- 設(shè)計(jì)全方位搜索 (發(fā)布時(shí)間：2021-06-30 17:12:41)
- CSS 垂直媒體查詢的用例 (發(fā)布時(shí)間：2021-06-30 17:05:47)
- 世界上最受歡迎的排版博客現(xiàn)在有一家商店 (發(fā)布時(shí)間：2021-06-30 17:05:31)
- 每天學(xué)習(xí)前端 Web 開(kāi)發(fā)的旅程 (發(fā)布時(shí)間：2021-06-30 16:31:02)
- Bootstrap安裝教程 (發(fā)布時(shí)間：2021-06-25 17:03:51)
- bootstrap框架怎么用？10分鐘教你學(xué)會(huì)使用bootstrap開(kāi)發(fā)網(wǎng)頁(yè) (發(fā)布時(shí)間：2021-06-25 16:32:17)
- 2021年世界上制造業(yè)網(wǎng)站設(shè)計(jì)的 5 個(gè)最佳范例 (發(fā)布時(shí)間：2021-06-22 15:29:54)
- CMS 的興起和“網(wǎng)站管理員”的衰落 (發(fā)布時(shí)間：2021-06-22 15:26:45)
前端項(xiàng)目從0到1的感悟
發(fā)布時(shí)間：2021-06-22 15:26:45
去年6月份左右，加入了一個(gè)創(chuàng)業(yè)公司，很幸運(yùn)做了一個(gè)從零開(kāi)始的項(xiàng)目，前端工程由我一手搭建起來(lái)，并不斷迭代功能到現(xiàn)在，有許多的感悟心得，在這里寫(xiě)點(diǎn)總結(jié)
確定框架、技術(shù)點(diǎn)
一個(gè)項(xiàng)目的開(kāi)始，特別是豐富多樣的前端工程，首先一定要確定好采用的框架和技術(shù)點(diǎn)。2016年vue.js如火如荼，webpack強(qiáng)勢(shì)崛起，但是是否就可直接拿到項(xiàng)目中搞起呢？答案是否定的，一個(gè)新的技術(shù)如果自己或團(tuán)隊(duì)中成員都還在學(xué)習(xí)摸索的過(guò)程，是肯定不能在生產(chǎn)環(huán)境中使用的，更何況這是個(gè)創(chuàng)業(yè)的團(tuán)隊(duì)，沒(méi)有成熟完整的前端團(tuán)隊(duì)。所以我當(dāng)時(shí)還是走老套路，jquery為核心，fastclick輔助，requireJs按需加載，arttemplate做模板渲染，核心UI類庫(kù)使用jqueryWeUI，加上sass預(yù)編譯樣式文件，gulp打包構(gòu)建，（后臺(tái)是微服務(wù)架構(gòu)，maven構(gòu)建，springMVC+mybatis，此工程為h5前置工程）這樣一來(lái)就基本上滿足條件，可以開(kāi)工了。
開(kāi)發(fā)工具
不同的開(kāi)發(fā)工具可能在展示格式上有一定的差別，所以一個(gè)團(tuán)隊(duì)最好還是能統(tǒng)一的開(kāi)發(fā)工具。后臺(tái)一般使用eclipse，前端我推薦使用sublime，以及相關(guān)的插件：
開(kāi)發(fā)規(guī)范，命名規(guī)則
既然是多個(gè)人同時(shí)開(kāi)發(fā)，肯定會(huì)有一些代碼風(fēng)格上的異同，然而為了方便后期維護(hù)，必需制定一些相關(guān)的規(guī)范。如：
開(kāi)發(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>通用模板頁(yè)面</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類庫(kù)，包括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)聽(tīng) watch: function(){ var self = this; } } dn.init(function(){ registMain.h5(); }) }) }</script></html>所有頁(yè)面編碼必須是
盡量使用語(yǔ)義話標(biāo)簽，如頭部使用header，內(nèi)容使用articl，頁(yè)腳使用footer，模塊使用section標(biāo)簽
所有頁(yè)面采用下面的通用模板
命名
id采用駝峰命名法則，如 formName
class中間用-隔開(kāi)，如 li-col-50
圖片命名也用-隔開(kāi)，如 zhongan-bananer
模板以Tpl結(jié)尾，如 registerMainTpl
函數(shù)也用駝峰命名，使用 get/set/put/delete等前綴
文件名也用駝峰，使用跟文件內(nèi)容相同的英文單詞或詞組
jquery選擇器能用id就不用class
目錄結(jié)構(gòu)
一個(gè)項(xiàng)目的目錄結(jié)構(gòu)就像人的骨架一樣重要，對(duì)于日漸迭代版本越來(lái)越多的前端項(xiàng)目，如果沒(méi)有一個(gè)好的目錄結(jié)構(gòu)會(huì)顯得非常臃腫，難以維護(hù)，以下這個(gè)截圖是我現(xiàn)在正使用的目錄，也還有需要改進(jìn)的地方，做一個(gè)參考：
定義readme.md
將規(guī)范規(guī)則，文檔目錄、wiki鏈接等說(shuō)明放在readme必讀文檔里
定義config.js
如果你是使用requirejs的項(xiàng)目，肯定有個(gè)config.js文件，這個(gè)文件每個(gè)頁(yè)面都會(huì)引用，并且是在頁(yè)面加載js的開(kāi)始同步引用。官方說(shuō)法是這個(gè)頁(yè)面放js文件的key-value形式配置呢，而我習(xí)慣再js配置之前再定一個(gè)window對(duì)象的項(xiàng)目唯一子對(duì)象，再將項(xiàng)目一些常用的常量也定義好，以及請(qǐng)求狀態(tài)碼、url匯總，這樣極有利于后續(xù)維護(hù)，如：
//項(xiàng)目的全局唯一對(duì)象window.li = { version: 20170301,//當(dāng)前版本號(hào)，打包時(shí)用gulp自動(dòng)變更
errorTips: '哎喲，網(wǎng)絡(luò)好像有點(diǎn)問(wèn)題了..',//無(wú)網(wǎng)絡(luò)提示
timeout: 1000*60*60*24*20,//登錄失效暫時(shí)為20天
_MOBILE: 'http://h5.liliangel.cn/base/mobile',//跳轉(zhuǎn)手機(jī)頁(yè)面
_ROOT: 'http://www.liliangel.cn',//測(cè)試域名地址
_XHR: '/rest/',//ajax請(qǐng)求前綴
_CORS: '/cors/',//跨域請(qǐng)求前綴
_STATIC: 'http://static.liliangel.cn',//靜態(tài)資源域名
_WX: 'http://h5.liliangel.cn/'//微信h5服務(wù)器地址}//所有請(qǐng)求狀態(tài)碼li.code = { SUCCESS: 600, //成功
PHONE_EXIST: 603 //手機(jī)號(hào)碼已經(jīng)存在}//所有請(qǐ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
用來(lái)放置所有公共方法，同樣也是每個(gè)頁(yè)面都引用，正如上面定義好的一些常量一樣，一個(gè)項(xiàng)目的開(kāi)始，還需要一些方法上的準(zhǔn)備工作，如：
所有js方法li.init()主入口，相當(dāng)于jquery的ready()方法，這樣一來(lái)就可以控制所有js加載前做的事情了，如前置判斷在微信瀏覽器執(zhí)行fun1，在原生app中執(zhí)行fun2，這也是混合式開(kāi)發(fā)中常見(jiàn)的需求。
ajax的li.GET()、li.POST()方法，如果你覺(jué)得ajax的封裝可能不能滿足的特定需求，比如通用的加載中、比如通用的異常、通用的請(qǐng)求超時(shí)時(shí)間和回調(diào)、通用的請(qǐng)求完成回調(diào)、是否需要驗(yàn)證token等等，總之你可以根據(jù)自己風(fēng)格重寫(xiě)一下ajax未必不可...
通用的獲取token方法li.getToken()，很多時(shí)候請(qǐng)求需要驗(yàn)證token，前端需要把這個(gè)證書(shū)獲取到傳給后臺(tái)，那么這個(gè)獲取證書(shū)的邏輯后續(xù)可能會(huì)存在一些變動(dòng)，如加密算法修改、原生端通過(guò)交互方法調(diào)用app內(nèi)的然后微信端從緩存或session中獲取等等，所以獲取token方法也必須封裝好
通用的登錄過(guò)期提示、回調(diào)。當(dāng)調(diào)用后臺(tái)接口返回登錄過(guò)期或者非法請(qǐng)求后，需要做些通用的處理，如去登錄頁(yè)、三秒提示后去登錄頁(yè)、去錯(cuò)誤頁(yè)等，總之存在需求變故的可能的地方，能封裝的方法盡量封裝，免得到時(shí)候需求一變化全部都得去改
通用的去登錄、注冊(cè)頁(yè)方法。通常一個(gè)項(xiàng)目中，去登錄頁(yè)面的會(huì)有很多地方調(diào)用，同時(shí)可能在方法里判斷一下手機(jī)號(hào)是否已經(jīng)注冊(cè)、沒(méi)有注冊(cè)就去注冊(cè)頁(yè)面這樣的簡(jiǎn)單邏輯，提高用戶體驗(yàn)..
跳轉(zhuǎn)頁(yè)面方法，可能你會(huì)覺(jué)得用window.location.href足夠了，但是實(shí)際的開(kāi)發(fā)中，緩存的現(xiàn)象真的很頭疼，盡管你各種設(shè)置各種加版本號(hào)了，但是你通常會(huì)忽略在加載頁(yè)面的時(shí)候在url后面也添加一個(gè)版本號(hào)
后退
通常情況下，你可能會(huì)覺(jué)得window.history.go(-1)就可以了，但是如果你的頁(yè)面同時(shí)也要用在混合app里時(shí)，就需要考慮一些和原生端交互的問(wèn)題，跳轉(zhuǎn)頁(yè)面也是一樣，通常情況下需要保留當(dāng)前webview重新打開(kāi)一個(gè)webview，所以盡量將后退和跳轉(zhuǎn)頁(yè)面封裝一個(gè)通用的方法，方便后期添加修改。判斷當(dāng)前瀏覽器廠家
h5最多的可能就是判斷是否是微信瀏覽器了var ua = navigator.userAgent.toLowerCase(), isWechat = ua.indexOf('micromessenger') != -1;if(isWechat){ ... }獲取url參數(shù)
獲取當(dāng)前頁(yè)面url地址中的參數(shù)是很常用的方法，通常我也會(huì)將其封裝在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 全局錯(cuò)誤監(jiān)聽(tīng)
通常情況下，后臺(tái)會(huì)在web.xml會(huì)配置一個(gè)error-page指向一個(gè)錯(cuò)誤頁(yè)面，但是那樣都是跳轉(zhuǎn)頁(yè)面404錯(cuò)誤還好，其他錯(cuò)誤也跳頁(yè)面其實(shí)并不友好，而其他的錯(cuò)誤通常是請(qǐng)求中錯(cuò)誤，我們只要設(shè)置一個(gè)ajax全局監(jiān)聽(tīng)即可，下面是代碼片段，當(dāng)然還可以做很多你暫時(shí)沒(méi)有想到的事情
$(document).on('ajaxError', function(e, xhr, options){ if (404 == xhr.status) {
common.404()
}else if(500 == xhr.status){
common.500()
}
})定義common.css
所有公共樣式，同樣的每個(gè)頁(yè)面都要引用，其中在整個(gè)項(xiàng)目樣式通用控制起決定性作用，如：
全局字體樣式
* { font-family: 'Microsoft YaHei'; }標(biāo)簽樣式
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; }/** 標(biāo)簽樣式 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; } }
這是所有頁(yè)面的基礎(chǔ)樣式控制，主要是在字體方面，用rem來(lái)解決移動(dòng)開(kāi)發(fā)中多屏適配，如果有UI框架引入的時(shí)候就要根據(jù)實(shí)際情況考慮是覆蓋基礎(chǔ)樣式還是被覆蓋來(lái)決定引入的先后順序了
打包（gulp）
壓縮css、圖片，壓縮、加密js
去掉console.log()等調(diào)試信息
給css自動(dòng)添加兼容性前綴
給js、css、img、font、json等靜態(tài)資源引用處添加版本號(hào)（當(dāng)前時(shí)間戳）
E:cd \h5\weixin\targetgulp buildcd \h5\weixin\target\weixin\ del \h5\weixin\target\weixin\weixin.warcd \h5\weixin\target\weixin\ jar cvf weixin.war ./del \last\code\2017\dnzd\weixin.warmove weixin.war \last\code\2017\dnzd\
實(shí)際開(kāi)發(fā)中可能有實(shí)時(shí)刷新和實(shí)時(shí)編譯sass這些任務(wù)。上面是生產(chǎn)構(gòu)建的腳本，build這個(gè)任務(wù)里面包含了上面4點(diǎn)，當(dāng)然還可以添加requireJs優(yōu)化等等這些...
意識(shí)和協(xié)作
團(tuán)隊(duì)協(xié)作開(kāi)發(fā)中，成員寫(xiě)代碼的意識(shí)很重要，一個(gè)再完善的開(kāi)發(fā)規(guī)范不如有個(gè)良好的代碼意識(shí)的程序員，一個(gè)技術(shù)再好團(tuán)隊(duì)不如一個(gè)團(tuán)隊(duì)意識(shí)強(qiáng)的的團(tuán)隊(duì)，當(dāng)然，改變一個(gè)人的開(kāi)發(fā)習(xí)慣是比較痛苦的，但是如果你發(fā)現(xiàn)這是一個(gè)好的規(guī)范，那么你需要刮骨療傷去成長(zhǎng)，如果你不能忍受一些條條框框，那么團(tuán)隊(duì)也需要更好的程序員。在項(xiàng)目開(kāi)發(fā)協(xié)作中，特別是團(tuán)隊(duì)組建初期，特別是前后臺(tái)交互、UI跟前端對(duì)接、產(chǎn)品經(jīng)理跟開(kāi)發(fā)溝通中，可能會(huì)存在很大的意見(jiàn)分歧，可可能有人會(huì)說(shuō)你代碼哪里哪里不好、沒(méi)有注釋、不可維護(hù).. 求同存異，盡可能的少去指責(zé)他人，因?yàn)槟憧瓷先y遭遭的代碼，永遠(yuǎn)相信也是寫(xiě)的人當(dāng)時(shí)深思熟慮后的作品。同時(shí)面對(duì)別人的說(shuō)法，你需要更成熟的選擇一笑而過(guò)，你也應(yīng)該去采納別人的建議，沉默中把自己的弱項(xiàng)提高，那就是成長(zhǎng)。
多說(shuō)幾句
做前端的這幾年，我從一個(gè)css、js都不懂的小白也算是歷練成了一個(gè)老司機(jī)，其中的辛酸苦辣只有自己明白。學(xué)習(xí)的過(guò)程的確是痛苦的，但卻也是有樂(lè)趣在其中的，深有體會(huì)，一件事情堅(jiān)持一直做下去，總會(huì)有許多的收獲，時(shí)間長(zhǎng)了，慢慢的你會(huì)發(fā)現(xiàn)，在很多人心中你已經(jīng)很厲害了。就像寫(xiě)博客的這一年多，除了我自己收獲許多積累許多之外，我還意外收獲了35個(gè)粉絲！最后想說(shuō)的是，前端是豐富多彩的，你可以融入其中，但不能只停留在這一塊領(lǐng)域，你想要更好的發(fā)展，你必須多元化發(fā)展，比如做一個(gè)會(huì)JAVA后臺(tái)的前端，做一個(gè)偏UI的前端，做一個(gè)很懂技術(shù)的產(chǎn)品經(jīng)理，這些都將是你的優(yōu)勢(shì)，很多企業(yè)其實(shí)并不需要你會(huì)很高深的技術(shù)，很多項(xiàng)目其實(shí)也用不上多少高深的技術(shù)，很多時(shí)候，你能實(shí)現(xiàn)需求，能做出用戶體驗(yàn)好的產(chǎn)品，能再特殊的階段兼任某個(gè)崗位，能做一些別人做不了的事情，你的存在就更有價(jià)值！總之在技術(shù)上要抓住一個(gè)重點(diǎn)，也要發(fā)散自己的技術(shù)點(diǎn)，走更寬的路，同時(shí)技術(shù)人也要注重情商的提高..
共勉
程序員最重要的是完美實(shí)現(xiàn)需求，技術(shù)有時(shí)候只是工具。