業務擴展，IOS和安卓都有成型的版本，所以要做一個對應的移動端H5版的機票訂，買票應用，入口是微信公眾號，當然少不了jssdk的使用，以及balabala的授權處理等。最初是考慮用React+Redux+Webpack，前后端完全分離，但考慮到人手不足，前后端暫時做不了完全分離，然后還有對React也不熟悉，項目時間等問題，然后就被Boss否了。
最終用了更熟悉的Vue+Vuex+Webpack。主要還是因為更輕，API更加友好，上手速度更快，加上團隊里有人熟悉，可以馬上開工。比較遺憾的是因為各種原因前后端分離還不是很徹底，前端用的是jsp模板加js渲染頁面。好處是首屏數據可以放到script標簽里面直出，在進度條讀完的時候頁面就能夠渲染出來了，提高首屏渲染時間。但是調試的時候十分麻煩，因為沒有Node做中間層，每次都要在本地完整地跑個服務器，不然拿不到數據。
Vue，Vuex，Vue-router，Webpack這些不了解的同學就去看看文檔。MV*框架用好了真的是極大地解放生產力，特別是頁面的交互十分復雜的時候。

項目過程中遇到的坑

1. 遇到的第一個的坑就是transition。首頁有一個滑動的banner，我是直接用css3的transition配合js定時改變transform實現的。
滑動在chrome中模擬沒問題，ios中沒問題，但是安卓中就沒有滑動，百思不得其解。起初還以為是兼容性問題，搞了好久才發現需要在css中先增加一個transform: translateX(0)
，像下面一樣，不然之后再通過js更改transform是沒法在安卓中觸發transition的。
123456

.slide-wp{ transform: translateX(0); -webkit-transform: translateX(0); transition: transform 1.5s ease; -webkit-transition: transform 1.5s ease;}

大家知道，transition的作用是令CSS的屬性值在一定的時間區間內平滑地過渡。
所以個人猜測，在安卓中，當沒有初始值時，translateX
的改動沒有被平滑地過渡，就是說transition并不知道translateX
是從什么地方開始過渡的，所以也就沒有平滑之說，也就沒有動畫了。

2. 第二個就是ES6。既然用了Webpack，當然就要配合Bebel用上ES6啦。寫的時候還是很爽的。let
，const
，模塊，箭頭函數，字符串模版，對象屬性簡寫，解構等等…但帥不過3秒，在chrome上模擬地跑一點問題都沒有，一到移動端就直接白屏，頁面都沒有渲染出來。
排查了好久，才發現是某些擴展運算符...
，某些解構和for...of...
循環的問題。因為這些ES6的特性（其實不指這些）在Bebel中轉換是要用到[Symbol.iterator]接口的。如下面這樣。轉碼前:
12

const [a, b, c, d, e] = 'hello';console.log(a, b, c, d, e);//'h','e','l','l','o'

轉碼后:
123456789101112131415

'use strict';var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arrSymbol.iterator, _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i'return'; } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();var _hello = 'hello';var _hello2 = _slicedToArray(_hello, 5);var a = _hello2[0];var b = _hello2[1];var c = _hello2[2];var d = _hello2[3];var e = _hello2[4];console.log(a, b, c, d, e);//'h','e','l','l','o'

第一行先聲明的_slicedToArray函數用到了[Symbol.iterator]接口，然而瀏覽器對這個接口的支持還很有限，特別是移動端，只有Firefox Mobile36版本以上才支持，其它清一色掛掉。
如下圖所示：

博客圖片

3. 第三個坑就是Vue使用的問題。如其說是坑，還是不如說是我自身還不夠熟悉Vue。先看一下官方說明：
受 ES5 的限制，Vue.js 不能檢測到對象屬性的添加或刪除。因為 Vue.js 在初始化實例時將屬性轉為 getter/setter，所以屬性必須在 data 對象上才能讓 Vue.js 轉換它，才能讓它是響應的。

當時需要在props傳來的某些對象數據中增加一個是否可視屬性，用來控制一個與其關聯的彈出框。增加后點擊視圖上一點反應都沒有，但是用console.log
打印出來發現值的確的有變化的。
也就是說，數據的變化不能觸發視圖更新。原因就是如上面所說，因為這個屬性是我后來添加的，不能被Vuejs檢測到。這時候需要使用$set(key, value)這個API。
話說里面的語法需要注意下，第一個參數key
是一個字符串，是一個keypath
，如果假如你的數據是這樣:
123456789101112

data(){ visitors : [{ "id": 1, ... }, { "id": 2, ... }, { "id": 3, ... }],}

你需要在某次操作后為visitiors
里面的每個對象增加一個show
屬性,則需要這樣寫：
12345

let str;for (let i = 0 , len = this.visitors.length ; i < len; i++) { str = "visitors[" + i + "].show"; this.$set(str,true);}

之前真的被這東西搞了很久，明明數據變化了，視圖卻不更新。個人感覺新手剛使用Vue時很難發現這個問題。也怪自己對Vue，對ES5的getter/setter
的理解還不夠吧。

4. 第四個是IOS上的滾動問題。在某些瀏覽器下，例如微信內嵌瀏覽器，手指在屏幕上滑動時，頁面會進入momentum scrolling(彈性滾動)。這時候會停止所有的事件響應及DOM操作引起的頁面渲染，onscroll事件不會觸發，CSS3動畫，gif這些也不會動，一直到滑動停止。
因為需要onscroll事件來執行懶加載等操作，但是在IOS中是要等到滑動停止后才能執行的，用戶體驗不好。當時google了很久，最終得出的結論是，并沒有什么很好的解決方案。所以暫時只能在IOS上首次加載更多資源了。
貼一個在segmentfault上的答案吧，很好地總結了這個問題。（戳這里）

5. 第五個還是IOS上CSS3動畫的問題，今天才遇到的。在對img或者設置了background-image的DOM元素設置CSS動畫時，動畫在剛進入頁面的時候有可能不被觸發，需要滑動一下屏幕動畫才動，安卓下則沒有問題。
剛開始還以為是沒有設置初始值的問題，但感覺不應該會是這樣的。后來在stackoverflow上找到了解決辦法(戳這里)。給動畫加個0.1s秒的延時
12

animation: slide 1.5s 0.1s linear infinite;webkit-animation: slide 1.5s 0.1s linear infinite;

原因大概是如果Safari和IOS的微信內置瀏覽器在加載資源，或者進行什么內部渲染操作時出現了短暫的停頓(英文是hiccups)，則不會觸發動畫，需要滑動一下頁面來重新觸發。所以給動畫加個0.1s延時確保資源加載完成后，問題得以解決。

關于Vue的組件化
先上個@xufei大大的博客，里面有多關于組件化的文章，都是滿滿的干貨。
其實組件化是一個很龐大的話題，我這等小白的認識還十分顯淺，不過既然在項目中用到了組件化，也就談談自己的看法吧。
Vue的組件化需要配合Webpack+vue-loader 或者 Browserify + vueify 來構建。一個.vue文件一個組件，上手了寫起來是十分快捷的，不過對于新手可能就要花點時間去熟悉工具了。
之前在看了@xufei的博客加上自己的工程實踐后，表示十分贊同他的說法：
很多人會把復用作為組件化的第一需求，但實際上，在UI層，復用的價值遠遠比不上分治。

特別是對于.vue這種形式的組件化來說，想做到復用往往需要做到內部實現高度抽象，并對外暴露很多接口，而復用的地方也并不是很多。很多時候，花那么多時間去實現一個組件復用，還不如新建一個組件，復制部分代碼，重新進行內部實現來得更快。
要知道一個.vue文件里面除了<template>
、<style>
，還有<script>
。前兩者用于實現組件的樣式呈現，對于很多地方來說，可能只是有著些許差別，但<script>
里面的東西則是代表著組件的內部邏輯實現，這些邏輯往往有著很大的不同。

圖1

圖2

關于Vuex
Vuex 之于 vue，就相當于 Redux 之于 React。它是一套數據管理架構實現，用于解決在大型前端應用時數據流動，數據管理等問題。
因為組件一旦多起來，不同組件之間的通信和數據流動會變得十分繁瑣及難以追蹤，特別是在子組件向同級子組件通信時，你可能需要先$dispatch到父組件，再$broadcast給子組件，整個事件流十分繁雜，也很難調試。
Vuex就是用來解決這些問題的。更具體的說明可以看文檔，我就不過多敘述了。我就說一下我對Vuex的一些理解。
Vuex里面的數據流是單向的,就像官方說的那樣：
用戶在組件中的輸入操作觸發 action 調用；
Actions 通過分發 mutations 來修改 store 實例的狀態；
Store 實例的狀態變化反過來又通過 getters 被組件獲知。

vuex

const mutations = { //設置常用乘機人列表 SET_PSGLIST(state, psgList){ state.psgList = psgList; }, //增加在訂單中的乘客 ADD_ORDERPSG(state, orderPsg){ for (let i = 0,len = state.orderPsgList.length; i < len; i++) { if (state.orderPsgList[i].id == orderPsg.id) { state.orderPsgList[i] = orderPsg; return; } } state.orderPsgList.push(orderPsg); }, //刪除在訂單中的乘客 REMOVE_ORDERPSG(state, orderPsg){ for (let i = 0,len = state.orderPsgList.length; i < len; i++) { if (state.orderPsgList[i].id == orderPsg.id) { state.orderPsgList.splice(i,1) return; } } }}

更復雜的邏輯則寫進actions中。例如我要在action中先異步獲取常用乘機人數據，并初始化：
12345678910111213141516171819202122232425262728293031

//actionexport const iniPsgList = ({ dispatch }, uid) =>{ let data = { uid: uid, } $.ajax({ url: "../passenger/list", data: data, success(data){ let jsonData = JSON.parse(data); let psgs = jsonData.data.passengers; dispatch('SET_PSGLIST', psgs); }, error(){ console.log('獲取常用乘機人列表信息錯誤')； } }) }//組件中調用import { iniPsgList } from './actions'const vm = new Vue({ created(){ this.iniPsgList(uid); }, vuex: { getters: { ... }, actions: iniPsgList, }})

或者，為了令actions實現得更為通用，你完全可以給每個mutation對應寫一個action，每個action就只是分發該mutation，不做其它額外的事情。然后再在組件中引入這些actions。這樣其實就相當于在組件中觸發mutations，從而減少action這個流程。
123456789

function makeAction(type , data){ return ({ dispath }, data) => { dispatch( type , data) }}export const setPsgList = makeAction('SET_PSGLIST', psgList)export const addOrderPsg = makeAction('ADD_ORDERPSG', orderPsg)export const removeOrderPsg = makeAction('REMOVE_ORDERPSG', orderPsg)

這時候初始化常用乘機人列表，則是這樣寫。
1234567891011121314151617181920212223242526

//組件中調用import { setPsgList } from './actions'const vm = new Vue({ created(){ let data = { uid: uid, } $.ajax({ url: "../passenger/list", data: data, success: (data) = > { let jsonData = JSON.parse(data); let psgs = jsonData.data.passengers; this.setPsgList(psgs); }, error(){ console.log('獲取常用乘機人列表信息錯誤')； } }) }, vuex: { getters: { ... }, actions: setPsgList, }})

兩者的區別就僅是把異步等一些更復雜的邏輯放在action中還是放在組件內部邏輯中。前者的action更有針對性，更具有唯一性；后者的action僅僅就是一個觸發mutation的作用，而組件則與更多的邏輯耦合。
誰優誰劣很難說清，和個人喜好、業務邏輯等有較大關系。我在項目中使用的是后一種用法，因為我個人更喜歡在組件實現更多的內部邏輯，方便以后針對改組件的調試和維護，免得還要在action中尋找一次。
莫名其妙地扯了這么多，其實都是一些總結與歸納。