JavaScript Plugin Design pattern

Summary
https://stackoverflow.com/questions/10763006/plugin-architecture-in-web-apps-examples-or-code-snippets


Command
http://www.dofactory.com/javascript/command-design-pattern

var calculator = new Calculator();
// issue commands
calculator.execute(new AddCommand(100));
calculator.execute(new SubCommand(24));
calculator.execute(new MulCommand(6));
calculator.execute(new DivCommand(2));


Callback
https://www.w3schools.com/jquery/jquery_callback.asp

slow之后callback函数：
$("button").click(function(){
    $("p").hide("slow", function(){
        alert("The paragraph is now hidden");
    });
});

Dependency Injection
https://github.com/nikku/didi

有点似Factory pattern，根据不同的输入(car)来决定load哪个object。

var Car = function(engine) {
  this.start = function() {
    engine.start();
  };
};

var createPetrolEngine = function(power) {
  return {
    start: function() {
      console.log('Starting engine with ' + power + 'hp');
    }
  };
};


// a module is just a plain JavaScript object
// it is a recipe for the injector, how to instantiate stuff
var module = {
  // if an object asks for 'car', the injector will call new Car(...) to produce it
  'car': ['type', Car],
  // if an object asks for 'engine', the injector will call createPetrolEngine(...) to produce it
  'engine': ['factory', createPetrolEngine],
  // if an object asks for 'power', the injector will give it number 1184
  'power': ['value', 1184] // probably Bugatti Veyron
};


var di = require('di');
var injector = new di.Injector([module]);

injector.invoke(function(car) {
  car.start();
});

Abstract Factory
http://www.dofactory.com/javascript/abstract-factory-design-pattern

var persons = [];
var employeeFactory = new EmployeeFactory();
var vendorFactory = new VendorFactory();

persons.push(employeeFactory.create("Joan DiSilva"));
persons.push(employeeFactory.create("Tim O'Neill"));

Builder
http://www.dofactory.com/javascript/builder-design-pattern

var shop = new Shop();
var carBuilder = new CarBuilder();
var truckBuilder = new TruckBuilder();
var car = shop.construct(carBuilder);
var truck = shop.construct(truckBuilder);

Others
https://seesparkbox.com/foundry/api_patterns_for_your_open_source_javascript_plugin

Ref
Youtube player APIs: https://developers.google.com/youtube/iframe_api_reference
Android lifecycle: https://developer.android.com/guide/components/activities/activity-lifecycle
Android MediaPlayer State Diagram: https://developer.android.com/reference/android/media/MediaPlayer

Alexa
AVS: 怎么用Alexa来做事，如audio player天气预报，交通情况。这是比较generic的，无skill
Smart Home API: 怎么创建一个SH的skill，比较有针对性，AVS不包括的。
Video API: 同上