贊助者成為贊助者

Framework7 外掛程式 API

Framework7 隨附簡單的外掛程式/擴充功能 API，讓您可以建立自己的 Framework7 外掛程式和擴充功能。

它基於可擴充的類別。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() 之前)

示範外掛程式

讓我們建立一個簡單的 Debug 示範外掛程式。它什麼都不會做，只會記錄一些事件

/* 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();
*/
改善此文件