前端系统设计

前端系统设计

前端三大件：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,
        });
    }