經(jīng)驗無線步驟頁改版總結(jié)

時間：2023-04-25 23:03:01 | 來源：網(wǎng)站運營

時間：2023-04-25 23:03:01 來源：網(wǎng)站運營

經(jīng)驗無線步驟頁改版總結(jié)：最近對經(jīng)驗無線步驟頁進行了改版，今天在組內(nèi)做了改版總結(jié)的分享，本文是這次分享的文字版，大綱如下：

• 簡介
• 架構(gòu)
• 新技術(shù)

我之前寫過一個經(jīng)驗詳情頁的改版分享——《如何重構(gòu)一個大型歷史項目——百度經(jīng)驗改版總結(jié)》，很多和上次一樣的東西這次就沒做分享，有興趣的同學(xué)可以看下（移動端或開模擬器）。

簡介

經(jīng)驗步驟頁是經(jīng)驗流量最多的頁面，也是最重要的頁面之一，點擊這里查看效果，頁面的截圖如下：


頁面大體可分文，最上面的bar，經(jīng)驗頭部（聽語音），主題內(nèi)容等，其中主題內(nèi)容部分可左右和上下滑動，左右滑動會切換到上一步，下一步，同時會更新經(jīng)驗頭部，停止語音播放等。

本次改版總共有兩個FE參加，我主要負責(zé)頁面基礎(chǔ)架構(gòu)，主要邏輯的開發(fā)，另一個同學(xué)主要負責(zé)，最后一頁的交互和點擊查看大圖的功能。這次做的點擊查看大圖是非常亮點的一個特色，大家有興趣可以試一下，關(guān)于查看大圖介紹我等另一位FE寫完，再貼到這里。

架構(gòu)

一個模塊

這次改版需要小流量，新舊版頁面需要在線上同時存在一段時間，以前的做法我們都是重新拉一個前端的模塊，這次我們是在同一個模塊完成的這個工作，新版的內(nèi)容全部放到了v2路徑下。


一個非常小的點是fis打包的配置，為了能夠自動把v2和v1的打包文件區(qū)分開我們用到了正則的?!技巧，關(guān)于正則我也打算寫一篇博文《詳解JavaScript正則表達式》。


pack: { '/static/pkg/step2.css': [ '/widget/v2/css/base.less', ///widget//v2//(?!css//).*/.less/ ], '/static/pkg/step.css': [ ///widget//(?!v2//).*/.less/, '/widget/**.css' ]}

耦合

關(guān)于其中耦合的關(guān)系，我在之前一篇博文里面做過介紹了，點這里查看。

在我們項目中，還有一種獨特的方式，我稱其為消息中心，通過消息中心將模塊之間的耦合變成了模塊與消息中心的耦合。


這種模式的缺點就是可能會消息爆炸，并且消息的訂閱是散落在各個模塊的，將來只能對消息擴展，而不能刪除消息中的信息。

下面舉個栗子來說說消息中心和非直接耦合的區(qū)別，假設(shè)模塊A B C D E F 如下圖所示，線條代表模塊之間的關(guān)系。


消息中心模式的結(jié)構(gòu)圖如下所示，A與B之間的關(guān)系解耦成了A與消息中心的關(guān)系，但A還是要知道B的消息名稱，我稱其為消息名耦合，也就是說A對B還是有感知的。


主模塊模式的結(jié)構(gòu)圖如下所示，A與B之間的關(guān)系解耦合成A與主模塊之間的關(guān)系，A完全不知道B的存在，消息中心模式中的消息名耦合被放到了主模塊中。

新舊版架構(gòu)對比

舊版的架構(gòu)圖如下所示，其使用了消息和主模塊兩種模式，不夠純粹，并且其slider模塊太過冗余，揉進了很多其他模塊的邏輯。


在新版的架構(gòu)中，我們只是用了主模塊模式，子模塊之前完全沒有直接關(guān)系。


我們使用es6的class，實現(xiàn)了繼承，繼承關(guān)系如下所示。

F.context

我們項目中有一個全局的數(shù)據(jù)中心，叫做F.context，全局數(shù)據(jù)中心對應(yīng)上面耦合中的數(shù)據(jù)耦合，術(shù)語耦合比較緊的一種模塊，我原來對其有偏見，重新認識一下F.context，明確一下F.context應(yīng)該放一下全局性的數(shù)據(jù)，并且一次賦值，盡量不要對其值進行修改。

特別注意用F.context來代替?zhèn)鲄?，我們項目中有很多這種反模式。

新技術(shù)

這次改版中我們嘗試了引入了三個新技術(shù)，包括ES6，postcss，flex，下面分別來介紹介紹這幾個技術(shù)。

ES6

在之前我們都是在活動頁面嘗試使用ES6，在積累了經(jīng)驗后我們決定在這個頁面嘗試使用。

如果你對ES6不了解，可以查看我之前寫的一系列文章：

• 快來使用ECMAScript 2015吧
• ECMAScript 2015 簡易教程
• 快來使用ES2015的Promise吧
• ES2015實戰(zhàn)——面向未來編程

關(guān)于ES6其實有一系列功能，但這次我們主要用到了三個：module, class, let。

我們的ES6最后都會使用bable編譯成ES5來執(zhí)行，所以我們代碼的兼容性就是ES5的兼容，而ES5在wap端兼容性非常好。


后續(xù)我準備寫一篇如何用ES5來代替ES6的博文《如何做到ES6 free》。

下面上一段步驟頁滑動模塊的js


import $ from 'common:widget/lib/gmu/zepto/zepto.js';import {UIBase} from 'common:widget/js/ui/base/base.es';var ec = require('common:widget/js/util/event/event.es').event;class Slider extends UIBase { constructor(index) { super(); this.bindEvent(); } bindEvent() {} move(x) {} update() {} moveTo(index, anim) {}}export {Slider};

postcss

postcss是最近出來的新東西，學(xué)名是css后處理器，也就是處理標準化的css，和sass等預(yù)處理器的區(qū)別需要區(qū)分開，sass生成css，postcss處理標準css。


目前已經(jīng)有很多大公司在用，包括google，F(xiàn)acebook等。

打開postcss的官網(wǎng)，可以看到介紹了4個特色——添加前綴，css變量，命名空間，語法驗證。

post是一套css的語法解析工具，可以通過插件來實現(xiàn)不同的功能，其插件可以分為下面這些分類。


我們主要使用的是添加前綴功能，在fis中實現(xiàn)這個功能主要有兩個插件，fis-preprocessor-autoprefixer，fis-postprocessor-autoprefixer，其中推薦使用前一個，這是fis官方維護的插件，在fis中有兩個節(jié)點可以插入后處理器的功能；fis的編程流程如下，分為單文件編譯和打包兩個過程。


autoprefixer有很多配置項

• Browsers 瀏覽器列表 默認 > 1%, last 2 versions, Firefox ESR
• Cascade 是否級聯(lián) 默認 true
• Add 是否添加前綴 默認true
• Remove 是否移除無用的前綴 默認true
• Supports 是否適配 @support 默認true
• Flexbox 是否支持flex 默認true
• Grid 是否支持grid 默認true
• Stats 自定義地區(qū)瀏覽器

其中最主要的的配置項是第一個，其詳細配置項在這里，這里有一個在線版，比較直觀。

我們的配置數(shù)據(jù)如下：'Android >= 4', 'iOS >= 6', 'and_uc > 9'，兼容的瀏覽器顧名思義。

postcss支持的css3屬性列表在這里，我們整理出一個常用的子集如下所示：


注意：需要注意的就是postcss并不能解決瀏覽器不兼容css的問題，而是可以幫我們磨平前綴，所以使用心得css3屬性前，還是要先看caniuse。在下面的例子中，如果要兼容安卓4.3以下，就不能使用calc。

flex

在這個項目中我們大規(guī)模使用了flex，其中也踩了不上坑，關(guān)于flex我打算在另一篇博文里詳細介紹——《移動端flex布局實戰(zhàn)經(jīng)驗》。

總結(jié)

最后感謝大家瀏覽本文，如果你有任何疑問可以在下面留言和我交流。

原文網(wǎng)址：經(jīng)驗無線步驟頁改版總結(jié)

微信公眾號

關(guān)注微信公眾號：顏海鏡，最新博文優(yōu)先推送，不再錯過精彩內(nèi)容。