MorJS 插件示例 插件源代碼示例

2024-01-28 09:16 更新
  • 如果插件需要有設(shè)置參數(shù),請(qǐng)務(wù)必將 optionsinterface export 出去,方便可能需要集成的使用方引用
  • 插件需要聲明為一個(gè) class,同時(shí)實(shí)現(xiàn) MorJSPlugin 這個(gè) interface
  • 插件必須要有 apply 函數(shù)
  • 插件調(diào)用方不能保證 apply 函數(shù)里面的 this 指向,因此建議都 class 下面的方法都用箭頭函數(shù),避免 this 指向問題
  • hook 里面的監(jiān)聽函數(shù)必須用普通函數(shù),因?yàn)樵?hook 調(diào)用的時(shí)候會(huì)動(dòng)態(tài)修改 this 指向,指向當(dāng)前的 apppage、component 實(shí)例
import type { MorJSPlugin, MorJSHooks } from '@morjs/api'

// export 出去,方便使用方集成
export interface IRuntimePluginExampleOptions {}

export default class RuntimePluginExample implements MorJSPlugin {
  // 必須要有插件名字
  pluginName = 'RuntimePluginExample'

  options: IRuntimePluginExampleOptions

  /**
   * 根據(jù)插件特性決定是否需要開放選項(xiàng)配置
   */
  constructor(public options: IRuntimePluginExampleOptions = {}) {}

  /**
   * 必須要有 apply 函數(shù)
   * class 下面的方法用 arrow function
   */
  apply = (hooks: MorJSHooks): void => {
    // 注意,這里是 arrow function

    // hooks 里面包含上面生命周期列表中的所有hook
    // 請(qǐng)用 tap 來做 hook 的事件監(jiān)聽注冊(cè)
    // 傳入的插件執(zhí)行函數(shù)必須是 function(){}, 因?yàn)闀?huì)動(dòng)態(tài)修改 this 指向
    hooks.appOnLaunch.tap(
      this.pluginName,
      function (
        this: tinyapp.IAppInstance<any>,
        options: tinyapp.IAppLaunchOptions
      ) {
        // 這里可以拿到對(duì)應(yīng)生命周期里面的參數(shù)
        console.log(options)
      }
    )
  }
}


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)