单项数据流

它消除了在多个地方同时管理状态的情况，它只会在一个地方 (通常就是 store) 进行状态管理。要实现单向数据流的话，我们需要改造一下 Store 对象。我们需要允许我们订阅数据变化的逻辑：

var Store = {
  _handlers: [],
  _flag: '',
  subscribe: function(handler) {
    this._handlers.push(handler);
  },
  set: function(value) {
    this._flag = value;
    this._handlers.forEach(handler => handler(value))
  },
  get: function() {
    return this._flag;
  }
};

然后我们将其与 App 组件联系起来，每次 Store 中的值产生变化时，都将重新渲染组件:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = { value: Store.get() };
    Store.subscribe(value => this.setState({ value }));
  }
  render() {
    return (
      <div>
        <Switcher
          value={ this.state.value }
          onChange={ Store.set.bind(Store) } />
      </div>
    );
  }
};

做出改变后，Switcher 将变得相当简单。我们不需要内部状态，所以组件可以使用无状态函数。

function Switcher({ value, onChange }) {
  return (
    <button onClick={ e => onChange(!value) }>
      { value ? 'lights on' : 'lights off' }
    </button>
  );
};

<Switcher
  value={ Store.get() }
  onChange={ Store.set.bind(Store) } />

发布订阅模式

js模块依赖

依赖注入

很多时候需要把大量的业务代码堆积在页面或者组件中，使组件和页面变得特别的臃肿，一旦业务逻辑复杂的情况下，及时组件化做的很好，仍然避免不了难以维护。

在没有class之前为了前端能够有类的概念，一直都是使用构造函数模拟类的概念，通过原型完成继承。 原型链继承

使用依赖注入的事为了降低代码的耦合程度，提高代码的可拓展性

依赖注入的优点

依赖注入降低了依赖和被依赖类型间的耦合，在修改被依赖的类型实现时，不需要修改依赖类型的实现，同时，对于依赖类型的测试。依赖注入方式，可以将代码耦合性降到最低，而且各个模块拓展不会互相影响，

1. 实现数据访问层，也就是前端你的数据请求层
2. 模块与接口重构，依赖注入背后的一个核心思想是单一功能原则，这意味着这些对象在系统的任何地方都可以重用。
3. 随时增加单元测试，把功能封装到整个对象里面会导致自动测试困难或者不可能。将模块和接口与特定对象隔离，以这种方式重构可以执行更先进的单元测试。 如

<template>
  <div>
    <el-button @click="getList"
              :loadding="loadding">获取表格数据</el-button>
    <ul>
      <li v-for="(item,index) of list"
          :key="index">{{item}}</li>
    </ul>
  </div>
</template>
<script>
import operation from "@/business/index/Operation.js";
export default {
  data() {
    return {
      list: [],
      query:{},
      loadding:false
    }
  },
  methods:{
    async getList(){
      let {query} = this;
      this.loadding = true;
      try{
        this.list = await operation.getData.call(this,query);
      }catch(error){
        console.log(error)
      }
      this.loadding =false;
    }
  }
}
</script>
<style>
@import "@/style/index.vue";
</style>

operations.js

import request from "@/api/errorList/index.js";
class Operation {
    async getData(query){
        //  this 指向Vue实例
        try {
            let res = await request.getErrorList(query);
            let {list} = res;
            //  这里可以对数据进行二次处理
            //  写一些其他业务
            Promise.resolve(list);
        }catch(error){
            Promise.reject(error);
        }
    }
};
export default new Operation();