typescript 使用脑部的angular2的装饰器的示例实现

Posted 2021-05-21

/**
 *  Angular2 decorator for Cerebral
 *  @param paths the paths that will be retrieved from the state
 *  1. It holds its own state object based on the paths passed in the decorator
 *  2. When the controller triggers a "change" event, the decorator grabs the same state again from the controller and compares it with the existing state
 *  3. If the state has changed, the state property is updated
 *  4. If not, it is left alone
 */
let controller: Cerebral;
let callbacks: Function[] = [];
let listener: boolean = false;

export function register(controller) {
  controller = controller;
}

export function Cerebral(paths?: Paths) {
  return function<TFunction extends Function>(target: TFunction): TFunction {
    let component = target.prototype;

    component._update = () => {
      let paths: Paths = component._paths ? component._paths : {};
      Object.keys(paths).forEach((key) => {
        let val: any = controller.get(paths[key]);
        if (component.state[key] !== val) {
          component.state[key] = val;
        }
      });
    };

    component._setup = () => {
      component.state = {};
      component.signals = controller.getSignals();
      component._paths = paths ? paths : {};
      component._listener = false;

      if (Object.keys(component._paths).length) {
        callbacks.push(component._update);
      }

      if (!listener) {
        listener = true;
        controller.on('change', function () {
          callbacks.forEach(cb => {
            cb();
          });
        });
      }
      
      component._update();
    };

    component._detach = () => {
      if (Object.keys(component._paths).length) {
        callbacks.splice(callbacks.indexOf(component._update), 1);
      }
    };

    if ('ngOnInit' in component) {
      let originalOnInit = component.ngOnInit;
      let newOnInit = (old => {
        function extendsInit() {
          component._setup();
          old.apply(component);
        }

        return extendsInit;
      })(originalOnInit);
      component.ngOnInit = newOnInit;
    } else {
      component.ngOnInit = component._setup;
    }

    if ('ngOnDestroy' in component) {
      let originalOnDestroy = component.ngOnDestroy;
      let newOnDestroy = (old => {
        function extendsDestroy() {
          component._detach();
          old.apply(component);
        }

        return extendsDestroy;
      })(originalOnDestroy);
      component.ngOnDestroy = newOnDestroy;
    } else {
      component.ngOnDestroy = component._detach;
    }
    return target;
  }
}

/**
 * Bootstraping the angular2 app
 */ 
 import controller from 'cerebral-controller';
 import {register} from 'cerebral-view';
 
bootstrap(TodoComponent)
  .then(() => {
    register(controller);
  })

/**
 * Example of using the decorator on a component
 * The component will have the following properties:
 * @property signals - the signals from the controller
 * @property state - an object containing the state passed from the decorator
 */ 
 
 import {Cerebral} from 'cerebral-view';
 
@Component({
  selector: 'my-component'
})
@Cerebral({
  todos: ['todos'],
  someOtherState: ['some','other','state']
})
export class TodoComponent {
    /**
   * Button event to add a new todo.
   * @param event
   */
  onButtonClick(event): void {
    this.signals.addTodo();
  }
}

/** View **/
<button (click)="onButtonClick($event)">Add Todo</button>
<div *ngFor="#todo of state.todos">
  <div>{{ todo.text }}</div>
</div>