文章分類

前端項目從0到1的感悟

發布時間：2021-06-22 15:26:45

去年6月份左右，加入了一個創業公司，很幸運做了一個從零開始的項目，前端工程由我一手搭建起來，并不斷迭代功能到現在，有許多的感悟心得，在這里寫點總結

確定框架、技術點

一個項目的開始，特別是豐富多樣的前端工程，首先一定要確定好采用的框架和技術點。2016年vue.js如火如荼，webpack強勢崛起，但是是否就可直接拿到項目中搞起呢？答案是否定的，一個新的技術如果自己或團隊中成員都還在學習摸索的過程，是肯定不能在生產環境中使用的，更何況這是個創業的團隊，沒有成熟完整的前端團隊。所以我當時還是走老套路，jquery為核心，fastclick輔助，requireJs按需加載，arttemplate做模板渲染，核心UI類庫使用jqueryWeUI，加上sass預編譯樣式文件，gulp打包構建，（后臺是微服務架構，maven構建，springMVC+mybatis，此工程為h5前置工程）這樣一來就基本上滿足條件，可以開工了。

開發工具

不同的開發工具可能在展示格式上有一定的差別，所以一個團隊最好還是能統一的開發工具。后臺一般使用eclipse，前端我推薦使用sublime，以及相關的插件：

開發規范，命名規則

既然是多個人同時開發，肯定會有一些代碼風格上的異同，然而為了方便后期維護，必需制定一些相關的規范。如：

開發規范

<!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: {
                
            },            
			//渲染模板的數據
            data: {
            	
            },            //渲染html
            renderHtml: function(){

            },            //渲染組件
            renderComponent: function(){

            },	
            //事件監聽
            watch: function(){            	var self = this;
            	
            }
		}

		dn.init(function(){
            registMain.h5();
        })
	})
}</script></html>

所有頁面編碼必須是
盡量使用語義話標簽，如頭部使用header，內容使用articl，頁腳使用footer，模塊使用section標簽
所有頁面采用下面的通用模板

命名

id采用駝峰命名法則，如 formName
class中間用-隔開，如 li-col-50
圖片命名也用-隔開，如 zhongan-bananer
模板以Tpl結尾，如 registerMainTpl
函數也用駝峰命名，使用 get/set/put/delete等前綴
文件名也用駝峰，使用跟文件內容相同的英文單詞或詞組
jquery選擇器能用id就不用class

目錄結構

一個項目的目錄結構就像人的骨架一樣重要，對于日漸迭代版本越來越多的前端項目，如果沒有一個好的目錄結構會顯得非常臃腫，難以維護，以下這個截圖是我現在正使用的目錄，也還有需要改進的地方，做一個參考：

定義readme.md

將規范規則，文檔目錄、wiki鏈接等說明放在readme必讀文檔里

定義config.js

如果你是使用requirejs的項目，肯定有個config.js文件，這個文件每個頁面都會引用，并且是在頁面加載js的開始同步引用。官方說法是這個頁面放js文件的key-value形式配置呢，而我習慣再js配置之前再定一個window對象的項目唯一子對象，再將項目一些常用的常量也定義好，以及請求狀態碼、url匯總，這樣極有利于后續維護，如：

//項目的全局唯一對象window.li = {	version: 20170301,//當前版本號，打包時用gulp自動變更
	errorTips: '哎喲，網絡好像有點問題了..',//無網絡提示
	timeout: 1000*60*60*24*20,//登錄失效暫時為20天
	_MOBILE: 'http://h5.liliangel.cn/base/mobile',//跳轉手機頁面
	_ROOT: 'http://www.liliangel.cn',//測試域名地址
	_XHR: '/rest/',//ajax請求前綴
	_CORS: '/cors/',//跨域請求前綴
	_STATIC: 'http://static.liliangel.cn',//靜態資源域名
	_WX: 'http://h5.liliangel.cn/'//微信h5服務器地址}//所有請求狀態碼li.code = {    SUCCESS: 600, //成功
    PHONE_EXIST: 603 //手機號碼已經存在}//所有請求urlli.api = {    sendMessage: 'wechat/sendMessage' //發送消息url}//靜態資源配置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加載前做的事情了，如前置判斷在微信瀏覽器執行fun1，在原生app中執行fun2，這也是混合式開發中常見的需求。
ajax的li.GET()、li.POST()方法，如果你覺得ajax的封裝可能不能滿足的特定需求，比如通用的加載中、比如通用的異常、通用的請求超時時間和回調、通用的請求完成回調、是否需要驗證token等等，總之你可以根據自己風格重寫一下ajax未必不可...
通用的獲取token方法li.getToken()，很多時候請求需要驗證token，前端需要把這個證書獲取到傳給后臺，那么這個獲取證書的邏輯后續可能會存在一些變動，如加密算法修改、原生端通過交互方法調用app內的然后微信端從緩存或session中獲取等等，所以獲取token方法也必須封裝好
通用的登錄過期提示、回調。當調用后臺接口返回登錄過期或者非法請求后，需要做些通用的處理，如去登錄頁、三秒提示后去登錄頁、去錯誤頁等，總之存在需求變故的可能的地方，能封裝的方法盡量封裝，免得到時候需求一變化全部都得去改
通用的去登錄、注冊頁方法。通常一個項目中，去登錄頁面的會有很多地方調用，同時可能在方法里判斷一下手機號是否已經注冊、沒有注冊就去注冊頁面這樣的簡單邏輯，提高用戶體驗..
跳轉頁面方法，可能你會覺得用window.location.href足夠了，但是實際的開發中，緩存的現象真的很頭疼，盡管你各種設置各種加版本號了，但是你通常會忽略在加載頁面的時候在url后面也添加一個版本號
后退
通常情況下，你可能會覺得window.history.go(-1)就可以了，但是如果你的頁面同時也要用在混合app里時，就需要考慮一些和原生端交互的問題，跳轉頁面也是一樣，通常情況下需要保留當前webview重新打開一個webview，所以盡量將后退和跳轉頁面封裝一個通用的方法，方便后期添加修改。

判斷當前瀏覽器廠家
h5最多的可能就是判斷是否是微信瀏覽器了

var ua = navigator.userAgent.toLowerCase(),
    isWechat = ua.indexOf('micromessenger') != -1;if(isWechat){
    ...
}

獲取url參數
獲取當前頁面url地址中的參數是很常用的方法，通常我也會將其封裝在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 全局錯誤監聽

通常情況下，后臺會在web.xml會配置一個error-page指向一個錯誤頁面，但是那樣都是跳轉頁面404錯誤還好，其他錯誤也跳頁面其實并不友好，而其他的錯誤通常是請求中錯誤，我們只要設置一個ajax全局監聽即可，下面是代碼片段，當然還可以做很多你暫時沒有想到的事情

$(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; } }

這是所有頁面的基礎樣式控制，主要是在字體方面，用rem來解決移動開發中多屏適配，如果有UI框架引入的時候就要根據實際情況考慮是覆蓋基礎樣式還是被覆蓋來決定引入的先后順序了

打包（gulp）

壓縮css、圖片，壓縮、加密js
去掉console.log()等調試信息
給css自動添加兼容性前綴

給js、css、img、font、json等靜態資源引用處添加版本號（當前時間戳）

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\

實際開發中可能有實時刷新和實時編譯sass這些任務。上面是生產構建的腳本，build這個任務里面包含了上面4點，當然還可以添加requireJs優化等等這些...

意識和協作

團隊協作開發中，成員寫代碼的意識很重要，一個再完善的開發規范不如有個良好的代碼意識的程序員，一個技術再好團隊不如一個團隊意識強的的團隊，當然，改變一個人的開發習慣是比較痛苦的，但是如果你發現這是一個好的規范，那么你需要刮骨療傷去成長，如果你不能忍受一些條條框框，那么團隊也需要更好的程序員。在項目開發協作中，特別是團隊組建初期，特別是前后臺交互、UI跟前端對接、產品經理跟開發溝通中，可能會存在很大的意見分歧，可可能有人會說你代碼哪里哪里不好、沒有注釋、不可維護.. 求同存異，盡可能的少去指責他人，因為你看上去亂遭遭的代碼，永遠相信也是寫的人當時深思熟慮后的作品。同時面對別人的說法，你需要更成熟的選擇一笑而過，你也應該去采納別人的建議，沉默中把自己的弱項提高，那就是成長。

多說幾句

做前端的這幾年，我從一個css、js都不懂的小白也算是歷練成了一個老司機，其中的辛酸苦辣只有自己明白。學習的過程的確是痛苦的，但卻也是有樂趣在其中的，深有體會，一件事情堅持一直做下去，總會有許多的收獲，時間長了，慢慢的你會發現，在很多人心中你已經很厲害了。就像寫博客的這一年多，除了我自己收獲許多積累許多之外，我還意外收獲了35個粉絲！最后想說的是，前端是豐富多彩的，你可以融入其中，但不能只停留在這一塊領域，你想要更好的發展，你必須多元化發展，比如做一個會JAVA后臺的前端，做一個偏UI的前端，做一個很懂技術的產品經理，這些都將是你的優勢，很多企業其實并不需要你會很高深的技術，很多項目其實也用不上多少高深的技術，很多時候，你能實現需求，能做出用戶體驗好的產品，能再特殊的階段兼任某個崗位，能做一些別人做不了的事情，你的存在就更有價值！總之在技術上要抓住一個重點，也要發散自己的技術點，走更寬的路，同時技術人也要注重情商的提高..

共勉

程序員最重要的是完美實現需求，技術有時候只是工具。

文章分類

熱門文章

最新文章

前端項目從0到1的感悟

發布時間：2021-06-22 15:26:45

確定框架、技術點

開發工具

開發規范，命名規則

目錄結構

定義readme.md

定義config.js

定義common.js

定義common.css

打包（gulp）

意識和協作

多說幾句

共勉

文章分類

熱門文章

最新文章

前端項目從0到1的感悟

發布時間：2021-06-22 15:26:45

確定框架、技術點

開發工具

開發規范，命名規則

目錄結構

定義readme.md

定義config.js

定義common.js

定義common.css

打包（gulp）

意識和協作

多說幾句

共勉

確定框架、技術點