为类创建模板

Question

我有 10+ 类（MobX 存储，但不相关）它们有 90% 的代码是共同的：

PriceStore.js

// Store to get the latest price of something
class PriceStore {
  @observable price;
  @observable error;

  constructor() {
    someSocket.on('price', this.setPrice);
    someSocket.on('price_error', this.setError)
  }

  static instance = null; // To enforce a singleton

  static get() {
    if (!PriceStore.instance) {
      PriceStore.instance = new PriceStore();
    }
    return PriceStore.instance;
  }

  @action setPrice = price => this.price = price;

  @action setError = error => this.error = error;
}

LatestUserStore.js

// Store to get the latest signed up user
class LatestUserStore {
  @observable latestUser;
  @observable error;

  constructor() {
    someSocket.on('latestUser', this.setLatestUser);
    someSocket.on('latestUser_error', this.setError)
  }

  static instance = null; // To enforce a singleton

  static get() {
    if (!LatestUserStore.instance) {
      LatestUserStore.instance = new LatestUserStore();
    }
    return LatestUserStore.instance;
  }

  @action setLatestUser = latestUser => this.latestUser = latestUser;

  @action setError = error => this.error = error;

  @computed get fullname() { ... }; // This store has an additional method.
}

我的问题是：如何分解这 90% 的代码？

理想情况下，我想自己编写一个 createMobxStore 函数，以便我可以按以下方式使用它：

const PriceStore = createMobxStore('price');
// Now I'll be able to use PriceStore as if it was defined like above.

const BaseLatestUserStore = createMobxStore('latestUser');
class LatestUserStore extends BaseLatestUserStore {
  @computed get fullname() { ... };
}
// Now I'll be able to use LatestUserStore as if it was defined like above.

如果可能的话，我想要一些帮助来编写这个 createMobxStore 函数。

Answer 1

如果我没理解错的话，你是在尝试动态创建 class。

我创建了一个包装函数，它应该（未测试）创建该商店 class，使用动态可观察和 setter 函数使用 storeName 参数。

function createStore(storeName) {

    return class Dynamic {
        @observable error;

        constructor() {
            // this[storeName];
            extendObservable(this, {
                [storeName]: null,
                ['set' + storeName]: action((value) => this[storeName] = value)
            })

            someSocket.on(storeName, this['set' + storeName]);
            someSocket.on('price_error', this.setError)
        }

        static instance = null; // To enforce a singleton

        static get() {
            if (!Dynamic.instance) {
                Dynamic.instance = new PriceStore();
            }
            return Dynamic.instance;
        }

        @action setError = error => this.error = error;
    }
}

并像这样使用它：

const UserStore = createStore('user');

class SomeStore extends UserStore {

    moreActions() { ... }
}

希望对您有所帮助。

为类创建模板

Create a template for classes

factory

class

mobx

为 类 创建模板

Create a template for classes

factory

class

mobx

为类创建模板