掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务

经验无线步骤页改版总结

号外号外:专注于移动端的fullPage.js来啦!!!快点我查看

最近对经验无线步骤页进行了改版,今天在组内做了改版总结的分享,本文是这次分享的文字版,大纲如下:

  • 简介
  • 架构
  • 新技术

我之前写过一个经验详情页的改版分享——《如何重构一个大型历史项目——百度经验改版总结》,很多和上次一样的东西这次就没做分享,有兴趣的同学可以看下(移动端或开模拟器)。

简介


经验步骤页是经验流量最多的页面,也是最重要的页面之一,点击这里查看效果,页面的截图如下:

页面大体可分文,最上面的bar,经验头部(听语音),主题内容等,其中主题内容部分可左右和上下滑动,左右滑动会切换到上一步,下一步,同时会更新经验头部,停止语音播放等。

本次改版总共有两个FE参加,我主要负责页面基础架构,主要逻辑的开发,另一个同学主要负责,最后一页的交互和点击查看大图的功能。这次做的点击查看大图是非常亮点的一个特色,大家有兴趣可以试一下,关于查看大图介绍我等另一位FE写完,再贴到这里。

架构


一个模块


这次改版需要小流量,新旧版页面需要在线上同时存在一段时间,以前的做法我们都是重新拉一个前端的模块,这次我们是在同一个模块完成的这个工作,新版的内容全部放到了v2路径下。

一个非常小的点是fis打包的配置,为了能够自动把v2和v1的打包文件区分开我们用到了正则的?!技巧,关于正则我也打算写一篇博文《详解JavaScript正则表达式》。

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

耦合


关于其中耦合的关系,我在之前一篇博文里面做过介绍了,点这里查看。

在我们项目中,还有一种独特的方式,我称其为消息中心,通过消息中心将模块之间的耦合变成了模块与消息中心的耦合。

这种模式的缺点就是可能会消息爆炸,并且消息的订阅是散落在各个模块的,将来只能对消息扩展,而不能删除消息中的信息。

下面举个栗子来说说消息中心和非直接耦合的区别,假设模块A B C D E F 如下图所示,线条代表模块之间的关系。

消息中心模式的结构图如下所示,A与B之间的关系解耦成了A与消息中心的关系,但A还是要知道B的消息名称,我称其为消息名耦合,也就是说A对B还是有感知的。

主模块模式的结构图如下所示,A与B之间的关系解耦合成A与主模块之间的关系,A完全不知道B的存在,消息中心模式中的消息名耦合被放到了主模块中。

新旧版架构对比


旧版的架构图如下所示,其使用了消息和主模块两种模式,不够纯粹,并且其slider模块太过冗余,揉进了很多其他模块的逻辑。

在新版的架构中,我们只是用了主模块模式,子模块之前完全没有直接关系。

我们使用es6的class,实现了继承,继承关系如下所示。

F.context


我们项目中有一个全局的数据中心,叫做F.context,全局数据中心对应上面耦合中的数据耦合,术语耦合比较紧的一种模块,我原来对其有偏见,重新认识一下F.context,明确一下F.context应该放一下全局性的数据,并且一次赋值,尽量不要对其值进行修改。

特别注意用F.context来代替传参,我们项目中有很多这种反模式。

新技术


这次改版中我们尝试了引入了三个新技术,包括ES6,postcss,flex,下面分别来介绍介绍这几个技术。

ES6


在之前我们都是在活动页面尝试使用ES6,在积累了经验后我们决定在这个页面尝试使用。

如果你对ES6不了解,可以查看我之前写的一系列文章:

关于ES6其实有一系列功能,但这次我们主要用到了三个:module, class, let。

我们的ES6最后都会使用bable编译成ES5来执行,所以我们代码的兼容性就是ES5的兼容,而ES5在wap端兼容性非常好。

后续我准备写一篇如何用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是最近出来的新东西,学名是css后处理器,也就是处理标准化的css,和sass等预处理器的区别需要区分开,sass生成css,postcss处理标准css。

目前已经有很多大公司在用,包括google,Facebook等。

打开postcss的官网,可以看到介绍了4个特色——添加前缀,css变量,命名空间,语法验证。

post是一套css的语法解析工具,可以通过插件来实现不同的功能,其插件可以分为下面这些分类。

我们主要使用的是添加前缀功能,在fis中实现这个功能主要有两个插件,fis-preprocessor-autoprefixer,fis-postprocessor-autoprefixer,其中推荐使用前一个,这是fis官方维护的插件,在fis中有两个节点可以插入后处理器的功能;fis的编程流程如下,分为单文件编译和打包两个过程。

autoprefixer有很多配置项

  • Browsers 浏览器列表 默认 > 1%, last 2 versions, Firefox ESR
  • Cascade 是否级联 默认 true
  • Add 是否添加前缀 默认true
  • Remove 是否移除无用的前缀 默认true
  • Supports 是否适配 @support 默认true
  • Flexbox 是否支持flex 默认true
  • Grid 是否支持grid 默认true
  • Stats 自定义地区浏览器

其中最主要的的配置项是第一个,其详细配置项在这里,这里有一个在线版,比较直观。

我们的配置数据如下:'Android >= 4', 'iOS >= 6', 'and_uc > 9',兼容的浏览器顾名思义。

postcss支持的css3属性列表在这里,我们整理出一个常用的子集如下所示:

注意:需要注意的就是postcss并不能解决浏览器不兼容css的问题,而是可以帮我们磨平前缀,所以使用心得css3属性前,还是要先看caniuse。在下面的例子中,如果要兼容安卓4.3以下,就不能使用calc。

flex


在这个项目中我们大规模使用了flex,其中也踩了不上坑,关于flex我打算在另一篇博文里详细介绍——《移动端flex布局实战经验》。

总结


最后感谢大家浏览本文,如果你有任何疑问可以在下面留言和我交流。


原文网址:经验无线步骤页改版总结

微信公众号

关注微信公众号:颜海镜,最新博文优先推送,不再错过精彩内容。

  微信公众号:颜海镜

知识共享许可协议
颜海镜的博客 由 颜海镜 创作,采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于http://yanhaijing.com上的作品创作。

原文网址:http://yanhaijing.com/program/2016/09/07/exp-wap-step/

感谢您的阅读,如果您对我的博客所讲述的内容感兴趣,请继续关注我的后续博客

开源项目

  • lodJS JavaScript模块加载器,基于AMD。
  • data.js 是带有消息通知的数据中心,我把她称为活的数据。
  • template.js 一款javascript模板引擎,简单,好用。
  • 变色方块 是一款休闲益智小游戏,适合所有人群。
  • 查看更多

打赏(我的收款主页

赠人玫瑰,手留余香❀❀❀

微信支付二维码 微信扫一扫转账支付宝帐号:yanhaijing@yeah.net 支付宝扫一扫转账

原文来自:颜海镜

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

  • 个人/企业涉诉查询

    通过企业关键词查询企业涉讼详情,如裁判文书、开庭公告、执行公告、失信公告、案件流程等等。

    通过企业关键词查询企业涉讼详情,如裁判文书、开庭公告、执行公告、失信公告、案件流程等等。

  • IP反查域名

    IP反查域名是通过IP查询相关联的域名信息的功能,它提供IP地址历史上绑定过的域名信息。

    IP反查域名是通过IP查询相关联的域名信息的功能,它提供IP地址历史上绑定过的域名信息。

  • 人脸卫士

    结合权威身份认证的精准人脸风险查询服务,提升人脸应用及身份认证生态的安全性。人脸风险情报库,覆盖范围广、准确性高,数据权威可靠。

    结合权威身份认证的精准人脸风险查询服务,提升人脸应用及身份认证生态的安全性。人脸风险情报库,覆盖范围广、准确性高,数据权威可靠。

  • 全国城市空气质量

    全国城市和站点空气质量查询,污染物浓度及空气质量分指数、空气质量指数、首要污染物及空气质量级别、健康指引及建议采取的措施等。

    全国城市和站点空气质量查询,污染物浓度及空气质量分指数、空气质量指数、首要污染物及空气质量级别、健康指引及建议采取的措施等。

  • 手机号防骚扰黑名单

    输入手机号和拦截等级,查看是否是风险号码

    输入手机号和拦截等级,查看是否是风险号码

0512-88869195
数 据 驱 动 未 来
Data Drives The Future