這一個多月寡具，開發(fā)了一個微信公眾號的微信H5商城牲蜀。
地址：
技術(shù)棧
前端：jQuery + rem + flex
后臺： java
前言
公司一共兩個前端，我負(fù)責(zé)一個后臺管理系統(tǒng)項(xiàng)目或详，一人獨(dú)立前端開發(fā)佩研。另外一個同事A前端開發(fā)這個公眾號商城享完。由于公司開發(fā)策略有變荔茬，公眾號商城放在首位废膘，我被迫放在現(xiàn)有項(xiàng)目，加入商城開發(fā)兔院。
我是一個接盤俠
所謂接盤俠殖卑，就是接別人的爛攤子站削，繼續(xù)開發(fā)坊萝，所以我可以算是二次開發(fā)？
接手項(xiàng)目
加入項(xiàng)目许起，此時頁面大概有10多個十偶，已經(jīng)寫得差不多了，但只是靜態(tài)頁面园细，后臺接口還沒有惦积。我心里美滋滋的，心想還不錯猛频，不用我來寫頁面狮崩，直接等后臺接口渲染數(shù)據(jù)加載，優(yōu)化下就完事了鹿寻。
直到我真正看到代碼的時候
我所認(rèn)為的問題
- 文件目錄混亂
- class id 等命名不規(guī)范樣式
- 樣式大多使用標(biāo)簽選擇器
- 代碼混亂
溝通與處理
畢竟我來公司也兩個月了睦柴，但一直都是獨(dú)立一人開發(fā)項(xiàng)目，和同事A也沒有多大的接觸毡熏，只有時聊天坦敌，說說前端流行的東西，也略知其水平一二痢法。
由于這個項(xiàng)目已經(jīng)開發(fā)了一段時間了狱窘，目錄結(jié)構(gòu)再改要花更多時間，迫于時間不能改了财搁，只能順著A的路徑走了蘸炸，后來到了現(xiàn)在項(xiàng)目上線了，隨著文件的增多尖奔，目錄結(jié)構(gòu)越來越亂幻馁，找文件的時間也花得比較多洗鸵，也挺懊悔當(dāng)初沒有改回來，導(dǎo)致現(xiàn)在找文件速度有點(diǎn)慢仗嗦。
此時頁面也差不多寫完了膘滨，命名不規(guī)范，樣式混亂我能怎么辦稀拐，我也相當(dāng)無奈火邓，也不能一個個地找，一個個地改回來吧德撬，現(xiàn)有的就只能隨他去吧铲咨，我看了代碼之后也細(xì)心明確告訴A，他寫的代碼的不足之處蜓洪，后來到現(xiàn)在好一點(diǎn)了纤勒，也許還需要點(diǎn)沉淀與積累吧？
關(guān)于標(biāo)簽大量使用了標(biāo)簽選擇器和 :nth-child() 隆檀，而沒有正確使用class出現(xiàn)的問題摇天。一開始我也沒覺得是個問題，后臺等到需求不斷變的時候恐仑，功能不斷變化泉坐，有時候在這個div里加上一個內(nèi)容，之前使用標(biāo)簽選擇器和:nth-child()來控制樣式會變得非常致命裳仆。這就為什么大牛都推薦使用class來控制樣式的原因吧腕让。
共同開發(fā)
雖然A水平?jīng)]有自己好，但是還要一起開發(fā)的歧斟，我只能自己接手比較難的模塊纯丸，簡單點(diǎn)的模塊就交給A。
由于靜態(tài)頁面與渲染數(shù)據(jù)静袖、事件綁定有緊密聯(lián)系觉鼻，所以最好一個模塊當(dāng)中，html勾徽、css滑凉、js都要自己來寫會比較好，自己對頁面內(nèi)容喘帚，事件的把控都會比較熟悉畅姊。
開發(fā)中出現(xiàn)的問題
移動端適配
所謂移動端適配，就是要根據(jù)移動設(shè)備的屏幕大小來顯示適當(dāng)比例的內(nèi)容與圖像吹由。因?yàn)锳沒有做過移動端若未，沒有考慮到適配問題，這讓我相當(dāng)無奈倾鲫，因?yàn)楫?dāng)時我接手的時候頁面已經(jīng)差不多寫完了粗合。沒辦法萍嬉，只能一個一個地改，所以說隙疚，剛開始真的很重要很重要壤追，直接影響了之后的開發(fā)與迭代了。
使用rem.js
我是通過使用rem單位和一個rem.js來解決移動端適配問題供屉。
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
通過獲得屏幕的寬度大小行冰，來改變html的font-size
用戶錯誤操作提示
很多時候用戶都會有一些誤操作，比如填寫表單的時候手機(jī)號碼不正確或者漏填信息伶丐、后臺接口錯誤提示等等悼做，都應(yīng)該給予適當(dāng)?shù)恼`操作提示，一開始我是使用alert()直接完事哗魂，但用戶體驗(yàn)相當(dāng)不好肛走，尤其是移動端，相當(dāng)難看而又讓用戶再點(diǎn)一次录别，感到惡心朽色，后來模仿其他平臺做法自己寫了一個通用方法彈出層進(jìn)行錯誤提示。
//HTML
<div class="tips" style="display: none">
<div></div>
</div>
// CSS
.tips {
position: fixed;
top: 42%;
width: 100%;
left: 50%;
text-align: center;
z-index: 999;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tips>div {
display: inline-block;
margin: 0;
padding: 0.2rem 0.3rem;
text-align: center;
color: #fff;
font-size: 0.6rem;
text-shadow: 1px 1px 1px #000;
border-radius: 50px;
/*line-height: 1.5rem;*/
background: rgba(0,0,0,.8);
}
// JS
function showTips(text) {
$('.tips>div').text(text).parent().fadeIn().fadeOut(2000);
}
需求不明確
這個問題相當(dāng)重要庶灿，直接影響你的開發(fā)進(jìn)度和心情纵搁。由于需求不明確吃衅，往往在開發(fā)當(dāng)中往踢，等你寫完了這個頁面或者開發(fā)完這個功能之后，很有可能需求發(fā)生更改徘层，UI很可能會變峻呕，所以當(dāng)你寫完一個頁面之后，產(chǎn)品和UI告訴你趣效，"之前的那個頁面老板說不好看瘦癌，需要重做，這個是最新的頁面" 我想你會相當(dāng)崩潰的跷敬，直到我三番四次地改讯私，我才發(fā)現(xiàn)了這個問題的嚴(yán)重性∥骺可笑可笑
意見
- 先做你覺得不會改變的頁面和功能
- 一個頁面中斤寇，很可能只有一塊是不確定的或者改來改去的，這塊可以先放下拥褂，不要做
兼容性處理與多測試
往往在瀏覽器中調(diào)試是不會出現(xiàn)問題的娘锁，等到真的放上服務(wù)器，用真機(jī)測試時饺鹃，會出現(xiàn)各種各樣的問題莫秆。
首先间雀，在開發(fā)過程中，有條件和時間的話镊屎，可以開啟一個本地服務(wù)器惹挟，多在真機(jī)中測試。而一些微信支付缝驳、微信分享等功能需要放到服務(wù)器上測試的匪煌，就要多測試，基于微信公眾號開發(fā)党巾，調(diào)用微信JDK萎庭，這也沒什么辦法的。
安卓端齿拂、IOS端
IOS微信瀏覽器是自帶一個返回鍵的驳规，而安卓端有些是用home鍵來控制返回，有些是沒有返回的署海，例如在下單頁面中吗购，需要填寫用戶收獲信息，我會在同一個頁面來進(jìn)行砸狞，利用一個彈出層來控制捻勉，頁面來會有一個關(guān)閉按鈕，確保安卓端與ios都可以點(diǎn)擊關(guān)閉刀森，而不是按"返回"踱启，返回到上一個頁面，這個流程就是不對的研底，所以在開發(fā)中埠偿，要與產(chǎn)品溝通好，了解整個流程榜晦，確保安卓端以及IOS端的流程一致冠蒋，避免一些不必要的開發(fā)。由于使用了比較笨重的jquery乾胶，其他兼容性問題出現(xiàn)得比較少抖剿，如有出現(xiàn)，直接Google识窿，搜一下斩郎，相信就有解決方法了。
總結(jié)
這個項(xiàng)目中腕扶，整個團(tuán)隊(duì)都是從零出發(fā)孽拷，需求不明確，在開發(fā)中遇到的問題還是比較多半抱，與同事交流討論也比較多脓恕，大家一步一步討論膜宋、一步一步優(yōu)化以及提出自己的建議，每個人都盡力做好自己的事情炼幔，在開發(fā)過程中還是挺開心的秋茫，等到真的測試上線了，看到自己做的東西乃秀，心情又會很開心肛著。我知道自己代碼還是寫得不夠好，還是不太會利用面向?qū)ο蠓绞絹砭幊潭逖叮嘈畔麓螘絹碓胶谩?/p>
致自己枢贿，加油。
