摘要：概述前段時(shí)間剛剛完成公司觸屏版項(xiàng)目，我覺得很有必要寫一篇文章總結(jié)下自己的心得和踩過的坑。小結(jié)個(gè)人覺得整個(gè)開發(fā)流程就是一體的，沒有絕對(duì)的前后端分離。細(xì)數(shù)下開發(fā)過程中遇到的坑。最近在看模板，貌似很吊的樣子總結(jié)學(xué)習(xí)就是不斷踩坑的過程啊

前段時(shí)間剛剛完成公司觸屏版項(xiàng)目，我覺得很有必要寫一篇文章總結(jié)下自己的心得和踩過的坑。每次回頭看看自己寫的代碼，都有不一樣的體會(huì)，不過大致感覺都是驚人的相似：這TM寫的是啥？這TM寫的又是啥？

Java+Node。嘗試了前后端分離，Java端負(fù)責(zé)業(yè)務(wù)邏輯處理，提供接口。Node端負(fù)責(zé)頁(yè)面渲染、SEO等balabala一堆非業(yè)務(wù)邏輯，兩者通過HTTP接口交互。前后端分離確實(shí)帶來了好處：

分工明確，不會(huì)出現(xiàn)占著茅坑不拉粑粑的情況，一人一個(gè)坑蹲著

職能清晰，設(shè)計(jì)寫SASS，前端寫JavaScript，后端寫Java

提高了代碼的復(fù)用性，Java端的接口可供多個(gè)應(yīng)用調(diào)用

前后端分離只有好處? No! 多了Node，實(shí)際上多了層請(qǐng)求，這個(gè)過程是需要花費(fèi)時(shí)間的，不過這點(diǎn)性能的損耗同提高維護(hù)性來比是微不足道的，咋不糾結(jié)這個(gè)！真正來說，前后端的過度分離讓每個(gè)人只關(guān)注自己的任務(wù)，等到聯(lián)調(diào)的時(shí)候會(huì)發(fā)現(xiàn)出現(xiàn)很多問題，舉個(gè)幾個(gè)簡(jiǎn)單的例子：

一般都是設(shè)計(jì)跟據(jù)視覺稿先編碼，做好HTML頁(yè)面，然后丟給我們前端開發(fā)。我套頁(yè)面的時(shí)候，發(fā)現(xiàn)有個(gè)幻燈片效果，然后去找了個(gè)插件xxx.js，大部分的幻燈片插件對(duì)HTML結(jié)構(gòu)都是有要求的（你懂的），所以我只好找到設(shè)計(jì)，讓他重新寫下這部分結(jié)構(gòu)，設(shè)計(jì)欣然接收，改了！做著做著又發(fā)現(xiàn)某個(gè)div的需要fixed布局，又得找設(shè)計(jì)改SASS，某個(gè)div需要添加 overflow:hidden,還是得找設(shè)計(jì)改，如此反復(fù)，設(shè)計(jì)心里肯定會(huì)默念：我去年買了個(gè)表！說到這里我不得不說一點(diǎn)了，作為一個(gè)合格的設(shè)計(jì)，在編寫HTML時(shí)，要根據(jù)交互效果編寫CSS代碼，站在套頁(yè)面人的角度去編碼。也需要將CSS模塊化，便于維護(hù)??！當(dāng)然了，作為一個(gè)合格的JSer，也要善于同設(shè)計(jì)交流，提前溝通，避免出現(xiàn)上述的情況。不溝通的結(jié)果就是這樣的：

    



$("#btn").click(function(){
    $(".someDiv").css({overfolw : "hidden"}).show();
});

來來來，放學(xué)別走！

交互說，點(diǎn)擊這里，我需要duang的效果，點(diǎn)擊那里我需要duang duang的效果，點(diǎn)那那里，我需要duang duang duang的效果。我一看，希望用盡量少的代碼實(shí)現(xiàn)，同交互交流希望統(tǒng)一UI，保留一種效果就可以了，交互堅(jiān)持！交互堅(jiān)持，交涉無(wú)果，不得不多寫額外的代碼，然并卵！下次需求，又換交互效果！

不同的列表頁(yè)，有著相同的HTML結(jié)構(gòu)，本次相同代碼不寫兩遍的原則，抽出了結(jié)構(gòu)：

     {{comName}}
    //...

但是后端返回的數(shù)據(jù)結(jié)構(gòu)一處叫comName，一處叫companyName。問后端，他說數(shù)據(jù)庫(kù)就是這樣設(shè)計(jì)的。

個(gè)人覺得整個(gè)開發(fā)流程就是一體的，沒有絕對(duì)的前后端分離。產(chǎn)品、交互、設(shè)計(jì)、JSer、后端、庫(kù)表設(shè)計(jì)都會(huì)對(duì)我們的代碼產(chǎn)生影響。及時(shí)溝通是一方面。處了自己的本職外，也需要了解他人的工作，當(dāng)你對(duì)整個(gè)流程都特別熟悉，那就是所謂的架構(gòu)師了。還在前端摸爬滾打的我，還差得遠(yuǎn)啊。

Zepto是一個(gè)輕量級(jí)的針對(duì)現(xiàn)代高級(jí)瀏覽器的JavaScript庫(kù)， 它與jquery有著類似的api。選擇Zepto是因?yàn)樗p量高效，并且封裝好了移動(dòng)端的touch事件。細(xì)數(shù)下開發(fā)過程中遇到的坑。

直接從官網(wǎng)上下載了Zepto，馬上編碼

$("#btn").on("tap",function(){
    //todo
});

發(fā)現(xiàn)壓根不起作用，再到官網(wǎng)上看下，我就呵呵了

看黃色部分，默認(rèn)只添加了Effects、iOS3和Detect這三個(gè)模塊，最最重要的Touch模塊居然沒有！所以大家要下載Zepto還得自己定制模塊
Zepto Builder
附上模塊說明：

總所周知，默認(rèn)click事件，會(huì)有300ms的延時(shí)問題，Zepto的tap事件很好的解決了這個(gè)問題。但是也挖了一個(gè)大坑。

Zepto的點(diǎn)透應(yīng)該也是大家比較熟悉的了。當(dāng)兩個(gè)層疊加的時(shí)候，上層綁定的tap事件觸發(fā)后會(huì)穿透到底層，恰好底層有個(gè)a標(biāo)簽，頁(yè)面就跳轉(zhuǎn)了。為了解決這個(gè)問題，我不得不把tap事件換成click事件，由于click事件有延時(shí)，還得引入了第三方的類庫(kù)FastClick。

一個(gè)很簡(jiǎn)單的Tip提示，例如‘操作成功’、‘登錄失敗’等等簡(jiǎn)單的提示，Tip在show之前，我會(huì)計(jì)算讓Tip居中顯示：

var left = ($(window).width() - $pop.width()) / 2 + $(window).scrollLeft();

然而$pop.width()始終為0，對(duì)于不可見元素，獲取的寬高度始終為0，但是jQuery就能正常獲取到，我又不得不采取如下的處理方式：

var cssShow = {visibility: "hidden", display: "block"};
var cssHide = {visibility: "visible", display: "none"};

$pop.css(cssShow);
var left = ($(window).width() - $pop.width()) / 2 + $(window).scrollLeft();
$pop.css(cssHide);

 $pop.css({
     left: left > 0 ? left : 0
 });

Zepto相對(duì)于JQuery來說確實(shí)比較輕量，但是成熟度還差得遠(yuǎn)，當(dāng)出現(xiàn)點(diǎn)透和計(jì)算寬高失效的時(shí)候，我對(duì)Zepto有點(diǎn)灰心，希望Zepto后續(xù)能夠及時(shí)升級(jí)解決這些問題，不然就使用jQuery了，特別是jQuery升級(jí)到版本2，也是相當(dāng)不錯(cuò)的選擇。

當(dāng)頁(yè)面彈出一個(gè)選擇框?；瑒?dòng)屏幕，背后的頁(yè)面跟著滾動(dòng)，特別是在safari下，那效果太惡心，所以我選擇禁用body的滾動(dòng)。最暴力的解決方式是：

$(document).on("touchmove",function(e){
    e.preventDefault();
});

這樣會(huì)同時(shí)禁用掉彈出層的滾動(dòng)效果，明顯不可取，所以我才用下面的方式：

.alpha {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.alpha body {
    height: 100%;
    overflow: hidden;
}

當(dāng)遮蓋彈出的時(shí)候或者隱藏的時(shí)候讓html切換class alpha
$("html").toggleClass("alpha");

對(duì)于PC端，直接這樣寫，就會(huì)有一個(gè)向上平滑滾動(dòng)的效果，然而對(duì)于移動(dòng)端來說，并沒有什么卵用：

$("body,html").animate({scrollTop: 0});

還是使用了第三方的插件模式出這個(gè)效果的scrollToTop。

前后端分離后，Node端要干的事情太多了，URL重寫這個(gè)模塊是我一個(gè)前輩寫的，配置放在JSON文件里，就像這樣：

{
    "product.detail": {
        "in": {
            "from": "^/chanpin/(.+).html$",
            "to": "/product/$1",
            "last": true
        },
        "out": {
            "from": "^/product/(.+)$",
            "to": "/chanpin/$1.html",
            "last": true
        }
    },    
    "special": {
        "in": {
            "from": "^/special/(.+).html$",
            "to": "/special/$1",
            "last": true
        },
        "out": {
            "from": "^/special/(.+)$",
            "to": "/special/$1.html",
            "last": true
        }
    }
}

就是這貨：

我同樣采用JSON文件管理所有頁(yè)面的推廣代碼，就像這樣：

{  
  "catalog": {
    "title": "產(chǎn)品目錄–$1",
    "keywords": "產(chǎn)品目錄,$1",
    "description": "$1，產(chǎn)品目錄。"
  }, 
  "search.product": {
    "title": "產(chǎn)品搜索–$1",
    "keywords": "產(chǎn)品搜索,$1",
    "description": "$1，產(chǎn)品搜索。"
  }  
}

自己編寫了個(gè)模塊，可以指定某個(gè)文件下的js文件作為路由，路由代碼寫起來就像這樣的：

module.exports = {
    mapping: "/vo",
    get: {       
        /**
         * 登錄
         */
        "/login": function (req, res) {
            res.render("vo/login");
        },
        /**
         * 注冊(cè)
         */
        "/register": function (req, res) {
            res.render("vo/register");
        }            
    },
    post: {
        /**
         * 登錄
         */
        "/login": function (req, res) {
            //todo
        },
        /**
         * 注冊(cè)
         */
        "/register": function (req, res) {
           //todo
        }        
    }
};

詳細(xì)使用請(qǐng)看這里Express-Mapping

模板引擎使用的Handlebars。Handlebars的if判斷不支持type==="2"這種邏輯判斷的，然而我們的數(shù)據(jù)庫(kù)里有很多字段是使用數(shù)字1,2,3,4來標(biāo)識(shí)不同狀態(tài)的，碰到這種情況就得在Node端預(yù)先處理，這個(gè)是很坑爹的！碰到列表展示的嵌套循環(huán)更是坑爹了。有時(shí)候還得寫這種代碼：

{{#if a}}
    {{#if b}}
        {{#if c}}
            //todo
        {{/if}}
    {{/if}}
{{/if}}

真實(shí)的業(yè)務(wù)場(chǎng)景更是復(fù)雜，額外的處理代碼總是會(huì)帶來維護(hù)的負(fù)擔(dān)。最近在看nunjucks模板，貌似很吊的樣子！

學(xué)習(xí)就是不斷踩坑的過程??！