前端系统设计

最新推荐文章于 2024-08-11 17:46:40 发布

点了个汤

最新推荐文章于 2024-08-11 17:46:40 发布

阅读量3k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/luo_qianyu/article/details/103760874

版权

笔记专栏收录该内容

8 篇文章 1 订阅

订阅专栏

前端系统设计

前端三大件：html、css、js，万变不离其中，不管我们使用的是vue、react、angular还是其他什么，都是要提高我们代码的复用性、可读性、可维护性以及可拓展性。

html

语义化的标签，在不借助任何前端框架的情况下，

<header>
    <section>
      <nav>
        <ul>
          <li>
            <a href="#">
              菜单1
            </a>
          </li>
          <li>
            <a href="#">
              菜单2
            </a>
          </li>
        </ul>
      </nav>
    </section>
  </header>

这种方式能有一定的可读性，但在更为复杂的页面的结构之下是不是缺失了可读性和可维护性。

组件化控制html结构，运用组件化架构的方式将一个页面划分为多个组件，包括项目级组件（在整个范围都会使用到的）和页面级组件

在这里插入图片描述

组件化的优势点：

提高复用性

举例：按钮组件，整个系统的按钮风格应该大致差不错，拥有的行为也差不多。我们将按钮单独抽离出来作为一个单独的组件，它拥有自己独立的结构、样式、行为，遵从单一职责、开闭原则，当我们在构建下一个页面的时候，直接引入既可以使用，达到了提高复用性的效果。
提高可读性

举例：我们一个页面有很多的内容，以上图来看，我们这个页面的结构大致是，头部，导航栏，搜索框，按钮组，而每一个部分又涵盖更细小的点位，在到这个页面的时候，我们的html结构就清晰明了，是由哪几部分组成的，这样同时避免了我们的页面行数过多的问题，内容简小精炼。
提高可维护性

举例：每一个组件之间的关联关系很弱，基本一个独立的，那我们对一个组件的修改只会对这个组件起效果，不会太多的影响到其他组件。再者，当我们接收到新的需求改动的时候，产品说我们的input、select不好看，换一种风格，由于我们的所有表单元素都是引用的我们自己的组件，那么我们只需要对我们当前的input和选择框组件进行修改，在进行一些细微的调整，就可以快速的响应。

css

分离结构和外观

一个样式在确定这一块内容的结构，什么样的布局，一个样子控制它的外观。达到外观的复用性

<div class="toggle toggle-simple">
    <div class="toggle-control toggle-control-active">
    <h2 class="toggle-title">标题3</h2>
    </div>
    
    <div class="toggle-details toggle-details-active">
        ...
    </div>
    ...
</div>

例子的toggle就是控制结构的，toggle-simple就是控制外观的，

分离容器和内容

用一个样式类来控制这个容器的样式，不管你用div还是h1她的外观都不变。

上例的toggle-title样式类就是控制容器样式的，内容不变。在需要同样样式的地方加入toggle-title可以达到样式的复用。

js

分层思想

借鉴于后端mvc分层结构，将请求接口拿到数据这个流程分解为三个步骤，一个是service（对应C）作为服务。也就是专门处理服务调用的js，一个是models（对应M），对拿到的数据做处理，最后一个是pages（对应V），根据数据渲染出我们想要的页面。
抽取共用函数

  searchASNItems(condition = {}) {
        const {
            form: { validateFields }, route: { categoryCode }, dispatch, pagingCondition,
        } = this.props;
        validateFields((err, values) => {
            const payload = {
                ...pagingCondition,
                categoryCode,
                status: 'APPROVED',
                ...values,
                ...condition,
            };
            dispatch({
                type: 'sourceASNSimple/searchASNForINRequirement',
                payload,
            });
        });
    }

    // 分页查询项次列表
    currentPageChange = pageIndex => {
        const { pagingCondition } = this.props;
        this.searchASNItems({
            ...pagingCondition,
            pageIndex,
        });
    };

    // 分页查询项次列表
    onShowSizeChange = (pageIndex, pageSize) => {
        const { pagingCondition } = this.props;
        this.searchASNItems({
            ...pagingCondition,
            pageIndex,
            pageSize,
        });
    };

    // 分页查询项次列表
    onSubmit = (e) => {
        e.preventDefault();
        const { pagingCondition } = this.props;
        this.searchASNItems({
            ...pagingCondition,
            pageIndex: 1,
        });
    };

    // 点击一行弹出该asn的项次对话框
    showLine=(record, index) => {
        return {
            onClick: (e) => {
                this.setState({
                    ASNLineVisible: true,
                    asnDetail: record,
                });
            },
        };
    }

    // 点击asn单号显示asn详情
    showDetailModal=(record, e) => {
        e.stopPropagation();
        this.setState({
            ASNDetailVisible: true,
            asnDetail: record,
        });
    }