Framework7 プラグイン API

Framework7 には、独自の Framework7 プラグインと拡張機能を作成できるシンプルなプラグイン/拡張機能 API が付属しています。

これは拡張可能なクラスに基づいています。Framework7 で使用されるすべての JavaScript クラス（コンポーネント）は拡張可能です。

プラグインの構造

まず、基本的なプラグインの JS 構造を見てみましょう。基本的にはオブジェクトです

var myPlugin = {
  // Module Name
  name: 'demo-module',
  /* Install callback
  It will be executed right after component is installed
  Context of this callback points to Class where it was installed
  */
  install() {
    const Class = this;
    console.log(Class);
  },
  /* Create callback
  It will be executed in the very beginning of class initilization (when we create new instance of the class)
  */
  create(instance) {
    console.log('init', instance);
  },
  /*
  Object with default class/plugin parameters
  */
  params: {
    myPlugin: {
      a: 1,
      b: 2,
      c: 3,
    }
  },
  /* proto object extends Class prototype */
  proto: {
    demo() {
      return 'demo-module-proto-method';
    },
    demoStatic: 'demo-module-proto-static',
  },
  // Extend Class with static props and methods, e.g. Class.myMethod
  static: {
    demo() {
      return 'demo-module-class-method';
    },
    demoStatic: 'demo-module-class-static',
  },
  /* Initialized instance Props & Methods */
  instance: {
    demoProp: true,
    demoMethod() {
      return 'demo-method';
    },
  },
  /* Event handlers */
  on: {
    demoEvent(a, b) {
      console.log('demo-event', a, b);
    },
  },
  /* Handle clicks */
  clicks: {
    // prop name means CSS selector of element to add click handler
    'p': function ($clickedEl, data) {
      // $clickedEl: Dom7 instance of clicked element
      // data: element data set (data- attributes)
    },
  }
};

プラグインのインストール

プラグインを入手したら、必要なクラスにインストールする必要があります。プラグインをインストールするには、クラスで `use()` メソッドを呼び出す必要があります。たとえば、これが一般的な Framework7 プラグインである場合

Framework7.use(myPlugin);

プラグインは、クラスの初期化前（`new Framework7()` を呼び出す前）にインストールする必要があります。

デモプラグイン

簡単なデバッグデモプラグインを作成しましょう。何もせず、いくつかのイベントをログに記録するだけです

/* framework7.debug.js */

var debugEnabled = false;

window.debugPlugin = {
  name: 'debugger',
  // extend app params with debugger params
  params: {
    debugger: false,
  },
  create: function () {
    var app = this;
    // extend app methods with debugger methods when app instance just created
    app.debugger = {
      enable: function () {
        debugEnabled = true;
      },
      disable: function () {
        debugEnabled = false;
      },
    }
  },
  on: {
    init: function () {
      var app = this;
      if (app.params.debugger) debugEnabled = true;
      if(debugEnabled) console.log('app init');
    },
    pageBeforeIn: function (page) {
      if(debugEnabled) console.log('pageBeforeIn', page);
    },
    pageAfterIn: function (page) {
      if(debugEnabled) console.log('pageAfterIn', page);
    },
    pageBeforeOut: function (page) {
      if(debugEnabled) console.log('pageBeforeOut', page);
    },
    pageAfterOut: function (page) {
      if(debugEnabled) console.log('pageAfterOut', page);
    },
    pageInit: function (page) {
      if(debugEnabled) console.log('pageInit', page);
    },
    pageBeforeRemove: function (page) {
      if(debugEnabled) console.log('pageBeforeRemove', page);
    },
  }
}

これをアプリに含める必要があります

<body>
    ...
    <script src="path/to/framework7.js"></script>
    <script src="path/to/framework7.debug.js"></script>
    <script src="path/to/myapp.js"></script>
</body>

/* myapp.js */

// install plugin first
Framework7.use(debugPlugin);

// init app
var app = new Framework7({
  //enable debugger
  debugger: true,
});

/*
  we can later disable it by calling
  app.debugger.disable();
*/

このドキュメントを改善する