前端系统设计

前端三大件: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结构,运用组件化架构的方式将一个页面划分为多个组件,包括项目级组件(在整个范围都会使用到的)和页面级组件

在这里插入图片描述

组件化的优势点:

  1. 提高复用性

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

  2. 提高可读性

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

  3. 提高可维护性

    举例:每一个组件之间的关联关系很弱,基本一个独立的,那我们对一个组件的修改只会对这个组件起效果,不会太多的影响到其他组件。再者,当我们接收到新的需求改动的时候,产品说我们的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,
        });
    }
Logo

前往低代码交流专区

更多推荐