經(jīng)驗(yàn)無(wú)線步驟頁(yè)改版總結(jié)
最近對(duì)經(jīng)驗(yàn)無(wú)線步驟頁(yè)進(jìn)行了改版，今天在組內(nèi)做了改版總結(jié)的分享，本文是這次分享的文字版，大綱如下：
- 簡(jiǎn)介
- 架構(gòu)
- 新技術(shù)
我之前寫過一個(gè)經(jīng)驗(yàn)詳情頁(yè)的改版分享——《如何重構(gòu)一個(gè)大型歷史項(xiàng)目——經(jīng)驗(yàn)詳情頁(yè)改版總結(jié)》，很多和上次一樣的東西這次就沒做分享，有興趣的同學(xué)可以看下（移動(dòng)端或開模擬器）。
簡(jiǎn)介
經(jīng)驗(yàn)步驟頁(yè)是經(jīng)驗(yàn)最重要的頁(yè)面之一，點(diǎn)擊這里查看效果，頁(yè)面的截圖如下：
頁(yè)面大體可分為: 最上面的bar、經(jīng)驗(yàn)頭部（聽語(yǔ)音）、主題內(nèi)容等，其中主題內(nèi)容部分可左右和上下滑動(dòng)，左右滑動(dòng)會(huì)切換到上一步，下一步，同時(shí)會(huì)更新經(jīng)驗(yàn)頭部。
本次改版總共有兩個(gè)FE參加，我主要負(fù)責(zé)頁(yè)面基礎(chǔ)架構(gòu)，主要邏輯的開發(fā)，另一個(gè)同學(xué)主要負(fù)責(zé)，最后一頁(yè)的交互和點(diǎn)擊查看大圖的功能。這次做的點(diǎn)擊查看大圖是非常亮點(diǎn)的一個(gè)特色，大家有興趣可以試一下，關(guān)于查看大圖介紹我等另一位FE寫完，再貼到這里。
架構(gòu)
一個(gè)模塊
這次改版需要小流量，新舊版頁(yè)面需要在線上同時(shí)存在一段時(shí)間，以前的做法我們都是重新拉一個(gè)前端的模塊，這次我們是在同一個(gè)模塊完成的這個(gè)工作，新版的內(nèi)容全部放到了v2路徑下。
一個(gè)非常小的點(diǎn)是fis打包的配置，為了能夠自動(dòng)把v2和v1的打包文件區(qū)分開我們用到了正則的?!技巧，關(guān)于正則我也打算寫一篇博文《詳解JavaScript正則表達(dá)式》。
pack: {
'xxx/step2.css': [
/\/widget\/v2\/(?!css\/).*\.less/
],
'xxx/step.css': [
/\/widget\/(?!v2\/).*\.less/,
'/widget/**.css'
]
}
耦合
關(guān)于其中耦合的關(guān)系，我在之前一篇博文里面做過介紹了，點(diǎn)這里查看。
在我們項(xiàng)目中，還有一種獨(dú)特的方式，我稱其為消息中心，通過消息中心將模塊之間的耦合變成了模塊與消息中心的耦合。
這種模式的缺點(diǎn)就是可能會(huì)消息爆炸，并且消息的訂閱是散落在各個(gè)模塊的，將來只能對(duì)消息擴(kuò)展，而不能刪除消息中的信息。
下面舉個(gè)栗子來說說消息中心和非直接耦合的區(qū)別，假設(shè)模塊A B C D E F 如下圖所示，線條代表模塊之間的關(guān)系。
消息中心模式的結(jié)構(gòu)圖如下所示，A與B之間的關(guān)系解耦成了A與消息中心的關(guān)系，但A還是要知道B的消息名稱，我稱其為消息名耦合，也就是說A對(duì)B還是有感知的。
主模塊模式的結(jié)構(gòu)圖如下所示，A與B之間的關(guān)系解耦合成A與主模塊之間的關(guān)系，A完全不知道B的存在，消息中心模式中的消息名耦合被放到了主模塊中。
F.context
我們項(xiàng)目中有一個(gè)全局的數(shù)據(jù)中心，叫做F.context，全局?jǐn)?shù)據(jù)中心對(duì)應(yīng)上面耦合中的數(shù)據(jù)耦合，屬于耦合比較緊的一種模塊，我原來對(duì)其有偏見，重新認(rèn)識(shí)一下F.context，明確一下F.context應(yīng)該放一下全局性的數(shù)據(jù)，并且一次賦值，盡量不要對(duì)其值進(jìn)行修改。
特別注意不要用F.context來代替?zhèn)鲄?，我們?xiàng)目中有很多這種反模式。
新技術(shù)
這次改版中我們嘗試了引入了三個(gè)新技術(shù)，包括ES6，postcss，flex，下面分別來介紹介紹這幾個(gè)技術(shù)。
ES6
在之前我們都是在活動(dòng)頁(yè)面嘗試使用ES6，在積累了經(jīng)驗(yàn)后我們決定在這個(gè)頁(yè)面嘗試使用。
如果你對(duì)ES6不了解，可以查看我之前寫的一系列文章：
關(guān)于ES6其實(shí)有一系列功能，但這次我們主要用到了三個(gè)：module, class, let。
我們的ES6最后都會(huì)使用bable編譯成ES5來執(zhí)行，所以我們代碼的兼容性就是ES5的兼容，而ES5在wap端兼容性非常好。
后續(xù)我準(zhǔn)備寫一篇如何用ES5來代替ES6的博文《如何做到ES6 free》。
下面上一段步驟頁(yè)滑動(dòng)模塊的js
import {UIBase} from 'base.es';
class Slider extends UIBase {
constructor(index) {
super();
this.bindEvent();
}
bindEvent() {}
move(x) {}
}
export {Slider};
postcss
postcss是最近出來的新東西，學(xué)名是css后處理器，也就是處理標(biāo)準(zhǔn)化的css，和sass等預(yù)處理器的區(qū)別需要區(qū)分開，sass生成css，postcss處理標(biāo)準(zhǔn)css。
目前已經(jīng)有很多大公司在用，包括google，F(xiàn)acebook等。
打開postcss的官網(wǎng)，可以看到介紹了4個(gè)特色——添加前綴，css變量，命名空間，語(yǔ)法驗(yàn)證。
post是一套css的語(yǔ)法解析工具，可以通過插件來實(shí)現(xiàn)不同的功能，其插件可以分為下面這些分類。
我們主要使用的是添加前綴功能，在fis中實(shí)現(xiàn)這個(gè)功能主要有兩個(gè)插件，fis-preprocessor-autoprefixer，fis-postprocessor-autoprefixer，其中推薦使用前一個(gè)，這是fis官方維護(hù)的插件，在fis中有兩個(gè)節(jié)點(diǎn)可以插入后處理器的功能；fis的編程流程如下，分為單文件編譯和打包兩個(gè)過程。
autoprefixer有很多配置項(xiàng)
- Browsers 瀏覽器列表 默認(rèn) > 1%, last 2 versions, Firefox ESR
- Cascade 是否級(jí)聯(lián) 默認(rèn) true
- Add 是否添加前綴 默認(rèn)true
- Remove 是否移除無(wú)用的前綴 默認(rèn)true
- Supports 是否適配 @support 默認(rèn)true
- Flexbox 是否支持flex 默認(rèn)true
- Grid 是否支持grid 默認(rèn)true
- Stats 自定義地區(qū)瀏覽器
其中最主要的的配置項(xiàng)是第一個(gè)，其詳細(xì)配置項(xiàng)在這里，這里有一個(gè)在線版，比較直觀。
我們的配置數(shù)據(jù)如下：'Android >= 4', 'iOS >= 6', 'and_uc > 9'，兼容的瀏覽器顧名思義。
postcss支持的css3屬性列表在這里，我們整理出一個(gè)常用的子集如下所示：
注意：需要注意的就是postcss并不能解決瀏覽器不兼容css的問題，而是可以幫我們磨平前綴，所以使用新的css3屬性前，還是要先看caniuse。在下面的例子中，如果要兼容安卓4.3以下，就不能使用calc。
flex
在這個(gè)項(xiàng)目中我們大規(guī)模使用了flex，其中也踩了不少坑，關(guān)于flex我打算在另一篇博文里詳細(xì)介紹——《移動(dòng)端flex布局實(shí)戰(zhàn)經(jīng)驗(yàn)》。
總結(jié)
最后感謝大家瀏覽本文，如果你有任何疑問可以在下面留言和我交流。
更多建議：