实践总结|前端架构设计的一点考究(上)

简介: 本文总结了作者在日常/大促业务的“敏捷”开发过程中产生的疑惑,并尝试做出思考得到一些解决思路和方案。在前端开发和实践过程中,梳理了一些简单设计方案可以缓解当时 “头疼” 的几个敏捷迭代问题,并实践在项目迭代中。




image.png

背景


1.1 为什么会有这一篇文章?


在日常/大促业务的“敏捷”开发过程中逐渐产生的几个疑惑,尝试地做出思考并想得到一些解决思路和方案。

总的来说,在前端开发和实践过程中,梳理了一些简单设计方案可以缓解当时让我 “头疼” 的几个敏捷迭代问题,并实践在项目迭代中。


1.2 因此个人对这篇文章有三个小目的:


  1. 梳理清楚个人真正疑惑开发迭代的问题在哪,解决的核心是什么,温故而知新。
  2. 提供前端架构设计的思考&方案,来缓解日常/大促敏捷迭代问题,希望可以得到一些拍砖~
  3. 能让项目协同的同学能初步理解个人对于前端结构设计,方便他人理解这样搞的原因背景,快速磨平协同上的一些理解和开发成本 💰。



image.png

疑惑

先抛出主要的几点问题,在业务迭代过程中你为什么会疑惑(WHY),疑惑什么问题(WHAT),会以什么方式解决(HOW)?

  1. 在业务需求的敏捷迭代中,单看逻辑和视觉的变更都不难,为何结合起来迭代如此花费成本?
  2. 敏捷业务迭代中,我们能找出什么是敏捷在变,什么是敏捷不变
  3. 面向视图开发,还是面向数据开发?
  4. React 定位“是一个用于渲染用户界面 (UI) 的 JavaScript 库”,那么 UI 和逻辑怎么更好地设计结合?

image.png

示例


为了更加有体感,以一个常规的业务例子,简单描述下个人开发的规范和经验的粗浅历程。

先假设一个业务需求:核心关于【账户信息】


3.1 需求一:金额账户

需求一:一开始需求很简单 —— 展示账户信息解决一:咔咔写一个组件和 CSS 样式,在组件中定义数值并获取接口数据更新。1.Account 组件

import { useEffect, useState } from 'react';
import styles from './index.module.less';

const Account = () => {
  // 账户金额
  const [account, setAccount] = useState(0);

  useEffect(() => {
    // 模拟接口数据
    setTimeout(() => {
      setAccount(12.34);
    }, 1000)
  }, [])

  return (
    <div className={styles.stickyAccountWrap}>
      <div className={styles.stickyAccount}>
        <div className={styles.stickyAccountGoldPocketPic} />
        <div className={styles.stickyAccountTitleContainer}>
          <div className={styles.stickyAccountTitle}>
            <div>{account}</div>
            <div className={styles.unit}>元</div>
          </div>
        </div>
        <div className={styles.withdraw} />
      </div>
    </div>
  );
};

export default Account;


2.相关样式

.stickyAccountWrap {
  width: 750rpx;
  height: 104rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;

  .stickyAccount {
    width: 308rpx;
    height: 70rpx;
    background: center / contain no-repeat
      url(https://gw.alicdn.com/imgextra/i4/O1CN01harLZI1kECtyvhAPh_!!6000000004651-2-tps-308-70.png);
    display: flex;
    align-items: center;
    justify-content: center;
    .stickyAccountGoldPocketPic {
      width: 37rpx;
      height: 46rpx;
      background: center / contain no-repeat url("https://gw.alicdn.com/imgextra/i4/O1CN01RQ3Gzj1ZJjv6MlKoD_!!6000000003174-2-tps-74-92.png");
    }

    .stickyAccountTitleContainer {
      margin-left: 10rpx;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      height: 100%;
      .stickyAccountTitle {
        margin-top: 6rpx;
        font-family: "Alibaba Sans 102";
        font-size: 42rpx;
        font-weight: bold;
        display: flex;
        align-items: baseline;
        color: #bc2b15;
        height: 60rpx;
        .unit {
          font-size: 22rpx;
          margin-left: 2rpx;
        }
      }
    }

    .withdraw {
      margin-left: 10rpx;
      background: center / contain no-repeat
        url("https://img.alicdn.com/imgextra/i4/O1CN01teiAeS1tZZvwjzqx9_!!6000000005916-2-tps-129-63.png");
      width: 86rpx;
      height: 42rpx;
    }
  }
}

实现一: 

总结:基操~ 业务仍在高速迭代中...  很快需求来了~ 🚄 ✈️ ✈️ ✈️ ✈️

3.2 需求二:互动效果


需求二:业务希望权益氛围感增强,在金额变化的同时,有金币飞入红包的氛围效果解决二:简单 😁 ~ 在组件内写一个金币组件 + 飞入状态控制即可1.金币飞入通用组件


import { CSSProperties, FC, useRef, useEffect, useCallback } from 'react';
import anime from 'animejs';
import styles from './index.module.less';

interface ICoinsFly {
  style?: CSSProperties;
  onEnd: () => void;
}

/**
 * 金币飞动画组件
 */
const CoinsFly: FC<ICoinsFly> = (props) => {
  const { style, onEnd } = props;
  const wrapRef = useRef<HTMLDivElement>(null);

  const rpx2px = useCallback((rpxNum: number) => (rpxNum / 750) * window.screen.width, []);

  useEffect(() => {
    // 金币动画
    anime({
      targets: wrapRef.current?.childNodes,
      delay: anime.stagger(90),
      translateY: [
        { value: 0 },
        {
          value: -rpx2px(334),
          easing: 'linear',
        },
      ],
      translateX: [
        { value: 0 },
        {
          value: -rpx2px(98),
          easing: 'cubicBezier(.05,.9,.8,1.5)',
        },
      ],
      scale: [
        { value: 1 },
        {
          value: 0.5,
          easing: 'linear',
        },
      ],
      opacity: [
        { value: 1 },
        {
          value: 0,
          easing: 'cubicBezier(1,0,1,0)',
        },
      ],
      duration: 900,
      complete: () => {
        onEnd();
      },
    });
  }, []);

  return (
    <div className={styles.container} style={style} ref={wrapRef}>
      {[1, 2, 3, 4, 5, 6, 7, 8].map((item) => (
        <div key={item} className={styles.coin} />
      ))}
    </div>
  );
};

export default CoinsFly;

.container {
  position: absolute;
  top: 100rpx;
  left: 100rpx;
  background-color: rgba(255, 255, 255, 0.6);
  .coin {
    width: 106rpx;
    height: 106rpx;
    background-image: url("https://gw.alicdn.com/imgextra/i4/O1CN01hVWasj25i4dZdV9sS_!!6000000007559-2-tps-160-160.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
  }
}


2.账户组件引入金币飞入组件 && 状态控制



import { useEffect, useState } from 'react';
import CoinsFly from '../../components/CoinsFly';
import styles from './demo1.module.less';

const Account = () => {
  // 账户金额
  const [account, setAccount] = useState(0);
  // 金币飞入动画
  const [showCoinsFly, setShowCoinsFly] = useState(false);


  useEffect(() => {
    // 模拟接口数据
    setTimeout(() => {
      setAccount(12.34);
      setShowCoinsFly(true);
    }, 1000)
  }, [])

  return (
    <div className={styles.stickyAccountWrap}>
      <div className={styles.stickyAccount}>
        <div className={styles.stickyAccountGoldPocketPic} />
        <div className={styles.stickyAccountTitleContainer}>
          <div className={styles.stickyAccountTitle}>
            <div>{account}</div>
            <div className={styles.unit}>元</div>
          </div>
        </div>
        <div className={styles.withdraw} />
      </div>
      {showCoinsFly && (
        <CoinsFly
          style={{
            top: '322rpx',
            left: '316rpx',
            zIndex: 1,
          }}
          onEnd={() => {
            setShowCoinsFly(false);
          }}
        />
      )}
    </div>
  );
};

export default Account;

实现二: 



总结:🎈🎈简简单单搞定~   代码写得清晰明了~  还沉淀了一个金币飞入的组件  当然很快需求又来了 ✈️


3.3 需求三:权益承接


需求三:业务方提出希望有一个弹窗承接,也就是点击提现按钮 => 提现成功弹窗收下 => 金币飞入再金额刷新解决三:1.写一个提现成功弹窗


import styles from './index.module.less';

export interface DialogData {
  a: string;
  /** 标题 */
  b: string;
  /** 金额 */
  c: string;
  d: string;
  e: string;
}

// 定义Props类型
interface IPopupProps {
  onClose?: () => void;
  /** 弹窗信息 */
  data: DialogData;
}

// 提现弹窗
const WithdrawDialog = (props: IPopupProps) => {
  const { onClose, data } = props;
  const {
    a,
    b,
    c,
    d
  } = data || {};

  // 关闭弹窗
  const handleClose = () => {
    typeof onClose === 'function' && onClose();
  };

  return (
    <div className={styles.popup}>
      <div className={styles.content}>
        {/* 头部提示 */}
        <div className={styles.header}>
          <div className={styles.icon} />
          <div className={styles.title}>{a}</div>
        </div>
        <div className={styles.body}>
          {/* 金额 */}
          <div className={styles.amountCon}>
            <div className={styles.amount}>{b || ''}</div>
            <div className={styles.unit}>元</div>
          </div>
          <div className={styles.dividing} />
          {/* 账户内容 */}
          <div className={styles.userContent}>
            <div className={styles.userItem}>
              <div className={styles.title}>提现账户</div>
              <div className={styles.userText}>{c || ''}</div>
            </div>
            <div className={styles.userItem}>
              <div className={styles.title}>打款方式</div>
              <div className={styles.userText}>{d || ''}</div>
            </div>
          </div>

          {/* 按钮 */}
          <div
            className={styles.btn}
            onClick={() => handleClose()}
          >开心收下</div>
        </div>
      </div>
    </div >
  );
};

export default WithdrawDialog;




.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .hidden {
    display: none;
  }

  .content {
    position: relative;
    background: center / contain no-repeat url("https://gw.alicdn.com/imgextra/i3/O1CN01vlcfgm1xFCpji3rv7_!!6000000006413-2-tps-596-786.png");
    border-radius: 54rpx;
    width: 590rpx;
    height: 780rpx;
    display: flex;
    flex-direction: column;

    .header {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 66rpx;
      .icon {
        width: 90rpx;
        height: 90rpx;
        background: center / contain no-repeat
          url("https://gw.alicdn.com/imgextra/i4/O1CN01KSkat11aHHShz5JqV_!!6000000003304-2-tps-90-90.png");
      }
      .title {
        font-weight: 700;
        margin-top: 30rpx;
        font-family: PingFangSC-Medium;
        font-size: 32rpx;
        color: #1677ff;
      }
    }

    .body {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40rpx;
      .amountCon {
        display: flex;
        align-items: baseline;
        color: #ff0746;
        
        .amount {
          font-family: AlibabaSans102-Bd;
          font-size: 120rpx;
        }
        .unit {
          position: relative;
          top: -4rpx;
          font-size: 60rpx;
        }
      }
      .dividing {
        margin-top: 40rpx;
        width: 506rpx;
        height: 2rpx;
        background-color: #ccc;
      }
      .userContent {
        margin-top: 22rpx;
        width: 506rpx;
        height: 100%;
        .userItem {
          margin-top: 20rpx;
          width: 100%;
          display: flex;
          justify-content: space-between;
          .title {
            font-family: PingFangSC-Regular;
            font-size: 26rpx;
            color: #666;
          }
          .userText {
            font-family: PingFangSC-Medium;
            font-size: 26rpx;
            color: #111;
          }
        }
      }
    }

    .errCon {
      margin-top: 38rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      .title {
        font-weight: 700;
        margin-bottom: 14rpx;
        font-family: PingFangSC-Semibold;
        font-size: 48rpx;
        color: #111;
      }
      .des {
        font-size: 32rpx;
        line-height: 44rpx;
        color: #363636;
        .redText {
          color: #ff0d40;
        }
      }
      .img {
        margin-top: 18rpx;
        width: 300rpx;
        height: 384rpx;
        background: center / contain no-repeat url("https://gw.alicdn.com/imgextra/i3/O1CN01uMPIk91nUBd1MjN9v_!!6000000005092-2-tps-300-384.png");
      }
    }
  }
}

.btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 42rpx;
  width: 518rpx;
  height: 96rpx;
  background-image: linear-gradient(100deg, #f54ea1 0%, #ff0040 100%);
  border-radius: 52rpx;
  text-align: center;
  line-height: 96rpx;
  color: #fff;
  font-family: PingFangSC-Medium;
  font-size: 38rpx;
}

Account 组件除了账户信息还添加了弹窗的信息内容,为了 Account 组件干净以及后续更好迭代,进行业务 Hook 逻辑抽象。

2.抽成账户刷新&金币的状态逻辑 Hooks


import { useCallback, useEffect, useState } from 'react';
import { DialogData } from '../../components/WithdrawDialog';

const useAccount = () => {
  // 账户金额
  const [account, setAccount] = useState(0);
  // 金币飞入动画
  const [showCoinsFly, setShowCoinsFly] = useState(false);
  // 弹窗展示
  const [showDialog, setShowDialog] = useState(false);
  const [dialogData, setDialogData] = useState<DialogData>();

  /** 模拟接口 => 刷新账户信息 */
  const refreshAccount = useCallback((account) => {
    setTimeout(() => {
      setAccount(account);
      setShowCoinsFly(true);
    }, 500)
  }, [])

  useEffect(() => {
    // 模拟初始化数据 => 接口数据
    refreshAccount(12.34)
  }, [])

  return {
    account,
    refreshAccount,
    showCoinsFly,
    setShowCoinsFly,
    showDialog,
    setShowDialog,
    dialogData,
    setDialogData
  }
}

export default useAccount;

3.抽象重构 Account 账户组件,引入提现成功弹窗


import CoinsFly from '../../components/CoinsFly';
import WithdrawDialog from '../../components/WithdrawDialog';
import useAccount from './useAccount';
import styles from './index.module.less';

const Account = () => {
  // 账户业务逻辑
  const {
    account,
    refreshAccount,
    showCoinsFly,
    setShowCoinsFly,
    showDialog,
    setShowDialog,
    dialogData,
    setDialogData
  } = useAccount()

  return (
    <div className={styles.stickyAccountWrap}>
      <div className={styles.stickyAccount}>
        <div className={styles.stickyAccountGoldPocketPic} />
        <div className={styles.stickyAccountTitleContainer}>
          <div className={styles.stickyAccountTitle}>
            <div>{account}</div>
            <div className={styles.unit}>元</div>
          </div>
        </div>
        <div
          className={styles.withdraw}
          onClick={() => {
            setDialogData({
              a: "3000",
              b: "123456789123456789",
              c: "xxxx打款",
              d: "提现成功,预计2小时到账",
              e: "0.3",
            })
            setShowDialog(true);
          }}
        />
      </div>

      {/* 金币飞入 */}
      {showCoinsFly && (
        <CoinsFly
          style={{
            top: '322rpx',
            left: '316rpx',
            zIndex: 1,
          }}
          onEnd={() => {
            setShowCoinsFly(false);
          }}
        />
      )}

      {/* 提现弹窗 */}
      {
        showDialog &&
        <WithdrawDialog
          data={dialogData}
          onClose={() => {
            refreshAccount(12.04);
            setShowDialog(false);
          }}
        />
      }
    </div>
  );
};

export default Account;

实现三:


总结:

  • 遵循着解耦以及内聚最小化的原则,将控制账户抽象为 hooks,后续可以在其他视图组件使用。
  • 这里其实稍微暴露了让我难受的一点,因为视图需要与状态和方法做逻辑交互,一来二去 hooks 要将近乎所有的状态方法都抛出...

实际上开发也可以将 Account 和 Dialog 单独做状态和逻辑的封装 hook

然而需求不会仅仅局限于 Account 账户组件中,那么需求来啦 ✈️ ✈️ ✈️ ✈️


实践总结|前端架构设计的一点考究(中)

目录
相关文章
|
4天前
|
前端开发 JavaScript 开发者
优化前端性能的关键技巧与实践
在当今互联网时代,前端性能优化是网站和应用开发中至关重要的一环。本文将介绍一些关键的前端性能优化技巧,并提供实际的实践案例,帮助开发者有效提升网站和应用的性能表现。
164 53
|
4天前
|
前端开发 数据可视化 JavaScript
探索前端可视化开发:低代码平台原理与实践
【4月更文挑战第7天】本文探讨了低代码平台在前端开发中的应用,介绍了其模型驱动、组件化和自动化部署的原理,强调了提升效率、降低技术门槛、灵活适应变更和保证一致性等优势。建议开发者明确适用场景,选择合适平台,并培养团队低代码技能,同时规划与现有技术栈的融合,实施持续优化治理。低代码平台正改变开发格局,为业务创新和数字化转型提供新途径。
64 0
|
2天前
|
前端开发 Java Go
从前端到后端:构建现代化Web应用的技术实践
本文将介绍如何通过前端和后端技术相结合,构建现代化Web应用的技术实践。我们将探讨前端开发、后端架构以及多种编程语言(如Java、Python、C、PHP、Go)在构建高效、可扩展的Web应用中的应用。
|
3天前
|
缓存 算法 前端开发
前端开发者必知的缓存淘汰策略:LRU算法解析与实践
前端开发者必知的缓存淘汰策略:LRU算法解析与实践
|
3天前
|
Web App开发 前端开发 JavaScript
构建跨浏览器兼容的前端应用:技术实践与挑战
【5月更文挑战第16天】构建跨浏览器兼容的前端应用是应对浏览器差异和多样性的挑战。使用现代框架(如React、Vue)能自动转换代码,编写可移植的Web标准代码,结合浏览器兼容性测试工具和Polyfill解决旧浏览器支持问题。关注浏览器更新,应对性能、API差异和样式问题,采用渐进增强、条件判断和CSS Reset策略确保应用在各种浏览器上运行良好。
|
4天前
|
缓存 监控 前端开发
使用Angular进行企业级前端开发:实践与探索
【5月更文挑战第14天】本文探讨了使用Angular进行企业级前端开发的实践与技术要点。Angular,Google的开源JavaScript框架,以其组件化设计、响应式开发和依赖注入等特点成为首选。文章涵盖项目初始化、组件化、状态管理、路由、性能优化和测试部署等方面,强调了在企业级应用中如何利用Angular构建高效、稳定和可维护的前端解决方案。
|
4天前
|
前端开发 JavaScript API
深入理解前端开发:从基础到实践
深入理解前端开发:从基础到实践
|
4天前
|
移动开发 前端开发 UED
【专栏:HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
【4月更文挑战第30天】前端开发中的渐进式增强和优雅降级是确保跨浏览器、跨设备良好用户体验的关键策略。渐进式增强是从基础功能开始,逐步增加高级特性,保证所有用户能访问基本内容;而优雅降级则是从完整版本出发,向下兼容,确保低版本浏览器仍能使用基本功能。实践中,遵循HTML5/CSS3规范,使用流式布局和响应式设计,检测浏览器特性,并提供备选方案,都是实现这两种策略的有效方法。选择合适策略优化网站,提升用户体验。
|
4天前
|
Dart 前端开发 测试技术
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
【4月更文挑战第30天】随着Flutter在跨平台开发的普及,保证代码质量成为开发者关注的重点。优质代码能确保应用性能与稳定性,提高开发效率。关键策略包括遵循最佳实践,编写可读性强的代码,实施代码审查和自动化测试。重构实践在项目扩展时尤为重要,适时重构能优化结构,降低维护成本。开发者应重视代码质量和重构,以促进项目成功。
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
|
4天前
|
Dart 前端开发 安全
【Flutter前端技术开发专栏】Flutter中的线程与并发编程实践
【4月更文挑战第30天】本文探讨了Flutter中线程管理和并发编程的关键性,强调其对应用性能和用户体验的影响。Dart语言提供了`async`、`await`、`Stream`和`Future`等原生异步支持。Flutter采用事件驱动的单线程模型,通过`Isolate`实现线程隔离。实践中,可利用`async/await`、`StreamBuilder`和`Isolate`处理异步任务,同时注意线程安全和性能调优。参考文献包括Dart异步编程、Flutter线程模型和DevTools文档。
【Flutter前端技术开发专栏】Flutter中的线程与并发编程实践