如何写出简洁、优雅、可维护的组件。

功能分离

这个算是面向对象里的思想，在组件里，有很多功能是独立的，比如最常见的发送验证码，确认密码等。把这些逻辑封装成一个或几个函数写在组件里的话，这在组件很小的时候没有什么影响，但是当组件功能比较复杂的时候，就会有些问题：

1. 组件逻辑区域会变的很大，各种方法混杂很难一眼辨识
2. 因为定义功能需要的变量和方法不在一起，导致修改麻烦

功能分离就是把这些功能抽离出来，写出一个类，然后在组件里引入。
下面是一个简单的弹窗控制的功能的类和这个类的使用：

export class DialogCtrl {
  isVisible = false;

  open () {
    this.isVisible = true;
  }
  close () {
    this.isVisible = false;
  }
}

然后在需要的组件里引入并实例化：

DialogCtrl = new this.CommonService.DialogCtrl(); // 是否打开弹窗

在html里可以直接这样用：

<nz-modal
    [nzVisible]="DialogCtrl.isVisible" 
    [nzTitle]="'更新密码'" 
    [nzContent]="modalContent" 
    (nzOnCancel)="DialogCtrl.close()" 
    [nzConfirmLoading]="isSubmiting"
    nzOkText="保存"
    (nzOnOk)="savePassword()"></nz-modal>

这个nz-modal是一个弹窗，在组件里我们只有一个变量的声明，如此简洁！而在html里DialogCtrl.isVisible，DialogCtrl.close()的形式也很容易理解它的作用和出处。
这样做的另一个好处是利于实现复用。对于可以复用的功能，比如上面发送验证码的逻辑，可以建一个全局的服务来提供。在angular里，通过angular的服务和依赖注入可以很轻松的实现，这里是我集中功能的common.service.ts服务文件：

Paste_Image.png

common.servide.ts文件:

@Injectable()
export class CommonService {
  // 功能类集合
  public DialogCtrl = DialogCtrl;
  public MessageCodeCtrl = MessageCodeCtrl;
  public CheckPasswordCtrl = CheckPasswordCtrl;

  constructor(
    private http: HttpClient
  ) { }

  /* 获取短信验证码(这些功能需要用到的方法)
  -------------------------- */
  public getVerificationCode (phoneNum: string): Observable<any> {
    return this.http.get('/account/short_message?phoneNumber=' + phoneNum);
  }
}

需要的地方只要注入这个服务就可以获取想要的功能。相比较直接建立一个组件来实现，我觉得这样写有一些优势：
灵活性更高。写成组件会有样式的限制，而这样写没有。
更简洁。写成组件，与之沟通只能通过子父组件的传入变量，监听子组件事件的方法，你使用的组件不可避免的会多出这些变量和方法。

状态管理

不知道大伙儿有没有这样的感觉，自己写新项目的时候觉得逻辑清晰，代码简练，功能也都实现了，但是过一段时间去看或者要改自己的代码的时候...哇，这是什么玩意儿。至少我有过:flushed:
前端复杂的地方源于数不清的状态，于是我为那些有复杂状态的组件建立一个集中管理状态的对象(这里我取名为Impure)：

/* 变量定义 -- 状态
  -------------------------- */
  registerForm: FormGroup;  // 注册账号表单
  registerInfoForm: FormGroup; // 公司信息表单
  isSubmitting = false; // 表单是否正在提交
  nowForm = 'registerForm';  // 当前正在操作的表单
  MessageCodeCtrl = new this.CommonService.MessageCodeCtrl(this.Msg, this.CommonService); // 验证码控制

  /* 变量定义 -- 定值
  -------------------------- */
  registerFormSubmitAttr = ['login', 'password', 'shortMessageCode', 'roles', 'langKey'];
  registerInfoFormFormSubmitAttr = ['simName', 'contacter', 'officeTel', 'uid'];

  /* 改变状态事件
  -------------------------- */
  Impure = {

    // 表单初始化
    RegisterFormInit: () => this.registerForm = this.registerFormInit(),
    RegisterInfoFormInit: () => this.registerInfoForm = this.registerInfoFormInit(),

    // 验证码不合法
    MessageCodeInvalid: {
      notSend: () => this.Msg.error('您还未发送验证码'),
      notRight: () => this.Msg.error('验证码错误')
    },

    // 表单提交
    FormSubmit: {
      invalid: () => this.Msg.error('表单填写有误'),
      before: () => this.isSubmitting = true,
      registerOk: () => {
        this.Msg.success('账号注册成功');
        this.nowForm = 'registerInfoForm';
      },
      registerInfoOk: () => {
        this.Msg.success('保存信息成功!请耐心等待管理员审核');
        this.Router.navigate(['/login']);
      },
      fail: () => this.Msg.error('提交失败，请重试'),
      after: () => this.isSubmitting = false
    }
  };

这是一个简单的有两个表单的注册组件，因为两个表单html耦合度很高，所以写在了一起。
在组件内将变量分为状态和定值的两类，声明了一个Impure对象来集中管理这些状态，原则上这个组件里所有状态的改变都写在Impure里，而将事件触发的判断条件，数据处理写在Impure外面。
可以对比下这两个使用Impure和不使用Impure的表单提交方法：

/* 注册账号表单提交(Impure)
  -------------------------- */
  async register (form) {
    const _ = this.Fp._; // ramda库,用于数据处理
    const { MessageCodeInvalid, FormSubmit } = this.Impure;

    // 表单不合法
    if (form.invalid) { FormSubmit.invalid(); return; }

    // 验证码不合法
    if (!this.MessageCodeCtrl.code) { MessageCodeInvalid.notSend(); return; }
    if (this.MessageCodeCtrl.code !== form.controls.shortMessageCode.value) { MessageCodeInvalid.notRight(); return; }

    // 表单提交
    FormSubmit.before();
    const data = _.compose(_.pick(this.registerFormSubmitAttr), _.map(_.prop('value')))(form.controls); // 数据处理
    const res = await this.AccountService.producerRegisterFirst(data).toPromise();
    if (!res) { FormSubmit.registerOk(); } else { FormSubmit.fail(); }
    FormSubmit.after();
  }

  /* 公司信息表单提交(非Impure)
  -------------------------- */
  async registerInfo ({ simName, contacter, officeTel }) {
    // 表单不合法
    if (this.registerInfoForm.invalid) { this.Msg.error('表单填写有误'); return; }

    // 表单提交
    this.isSubmitting = true;
    const data = { // 数据处理
      simName: simName.value,
      contacter: contacter.value,
      officeTel: officeTel.value,
      uid: this.registerForm.controls.phone.value
    };
    const res = await this.AccountService.producerRegisterSecond(data).toPromise();
    if (!res) {
      this.Msg.success('保存信息成功!请耐心等待管理员审核');
      this.Router.navigate(['/login']);
    } else {
      this.Msg.error('提交失败，请重试');
    }
    this.isSubmitting = false;
  }

使用Impure管理状态后，逻辑清晰，在提交表单时你 只需要关注事件发生的条件 就可以了，而第二个条件和状态写在一起会很混乱(其实就是我以前写的)，不能一眼清楚这个状态改变发生在什么时候，特别是你一段时间再来看的时候。
其实这里的数据处理(这里面的data)应该单独拿出来写一个方法的，我只是来顶一下用纯函数来处理数据的优点，这里的_是用了ramda这个库。相比较第二个处理方式，第一种方式更加优雅，简洁，很容易看出数据的源头是什么(这里是form.controls),单独抽离成数据处理函数也有很高的复用性。
假如某一天你要改下这里两个表格的成功后的状态，不再需要到这两个长长的提交函数里找到它们然后一个一个改，只要在Impure里面改就可以了，你甚至不需要看那两个提交的方法。
这样子，一个组件可以大致分为状态，状态管理(impure)，改变状态的事件(状态改变的判断条件)，和数据处理(纯函数)四部分，各司其职，很好维护。

结语

这些适合我但不一定适合所有人，每个人都有自己的风格，各位看官感受下就好。以后我有其它方面的总结也会拿出来分享。

作者：WEB攻程狮
链接：http://www.jianshu.com/p/ff3095cedc9c
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。