2

如果我用纯 JS 编写应用程序，我会像这样进行插件连接：

应用程序.js

var App = function(){ /* ... */ };
//...
App.prototype.regPlugin= function ( atr1, atr2, ... ) { /* ... */ };
//...
App.prototype.sendToEventBus = function ( atr1, ... ) { /* ... */ };
//...
var app = new App();
//...
var appModules = {};
//...
document.onreadystatechange = function () {
   if ( document.readyState === 'complete' ){
      for ( var module in AppModules ) {
        if ( AppModules[ module ] ) {
        try {
            AppModules[ module ].init( app );
        } catch(er) {
            //...
        }
      }
   }
}
//...

插件.js

var MyPlugin = function (){ /*...*/ };
//...
MyPlugin.prototype.init = function ( app ) {
    this.app = app;
    //...
    app.regPlugin( plugAtr0 );
    //...
};
//...
MyPlugin.prototype.handleAny = function(){
   this.app.sendToEventBus( /* my event */ );
};
//...
appModules.myPlugin = new MyPlugin();

如何在 svelte.js 上类似地为应用程序制作插件？
自定义元素不是很适合这个。

4

2 回答 2

2

好吧，如果你愿意的话，你可以做一些非常相似的事情。Svelte 只为您提供了一个 UI 组件，您可以在页面上的任何位置呈现。它不会接管你的整个 JS。

一件事是您的 Svelte 应用程序很可能会使用 ESimport语句捆绑（Rollup 或 Webpack）。这意味着您的代码将存在于 ES 模块中，并且局部变量不会自动附加到windowES 模块中的对象。所以你必须明确表示。所以你的代码会变成这样：

App.js （大概是您的应用程序入口点）

import App from './App.svelte'

const app = new App({
  target: document.body,
  props: {
    name: 'world',
  },
})

const appModules = {}

// expose appModules as a global variable
window.appModules = appModules

document.onreadystatechange = function() {
  if (document.readyState === 'complete') {
    debugger
    for (var module in appModules) {
      if (appModules[module]) {
        try {
          appModules[module].init(app)
        } catch (er) {
          //...
        }
      }
    }
  }
}

所以现在，app是你的根 Svelte 组件。它将存在于一个App.svelte文件中。Svelte 允许您通过导出const或function向组件添加实例方法。

App.svelte

您可以在 Svelte 组件上导出const或function拥有实例方法。

<script>

  export function regPlugin(...) { ... }

  // or
  export const sentToEventBus(...) { ... }

</script>
...

还有……瞧？您的代码中还有其他内容吗？

上述代码的一个问题可能是App组件将在您的插件有机会注册之前呈现。

您可以使用App组件中的道具来解决此问题。为了能够从您的“控制器代码”更改此道具的值，您可以使用$set组件的方法。您还可以accessors在组件上设置选项。您可以使用捆绑程序插件选项全局执行此操作，也可以使用<svelte:options>.

如果您需要一些仅在应用程序准备好后才运行的自定义逻辑，您可以在“反应式语句”中执行此操作。

App.svelte

<svelte:options accessors={true} />

<script>
  export function regPlugin() {}
  export function sentToEventBus() {}

  export let ready = false

  $: if (ready) {
    // code to run when ready
  }
</script>

{#if ready}
  <!-- content to show when ready (all plugins initialized) -->
  <!-- most likely, you'd put other Svelte components in there -->
{:else}
  <div>Loading...</div>
{/if}

然后，您可以在应用程序准备好启动时切换此道具：

应用程序.js

document.onreadystatechange = function() {
  if (document.readyState === 'complete') {
    for (var module in appModules) {
      ...
    }

    app.$set({ ready: true })
    // or
    app.ready = true
  }
}

或者，您可能更喜欢在您的 App 组件中移动插件初始化代码。由于您在这里有一个“静态”状态，因此在appModules变量中，您必须将其放入<script context="module">组件的静态部分：

App.svelte

<script context="module">
  // this block only runs once, when the module is loaded (same as 
  // if it was code in the root of a .js file)

  // this variable will be visible in all App instances
  const appModules = {}

  // make the appModules variable visible to the plugins
  window.appModules = appModules

  // you can also have static function here
  export function registerPlugin(name, plugin) {
    appModules[name] = plugin
  }
</script>

<script>
  // in contrast, this block will be run for each new instance of App

  ...

  let ready

  document.onreadystatechange = function() {
    if (document.readyState === 'complete') {
      // NOTE appModules bellow is the same as the one above
      for (var module in appModules) {
        // ...
      }
      ready = true
    }
  }
</script>

{#if ready}
  ...
{/if}

静态函数addPlugin可以作为其他模块的命名导出来访问：

import { addPlugin } from './App.svelte'

这可能更适合与模块捆绑的应用程序/应用程序的上下文，而不是附加东西window（因此在全局命名空间中遇到冲突风险）。取决于你在做什么...

于 2019-12-10T22:52:28.003 回答
1

这种类型的插件设置仍然有效，请查看客户端组件 API

您可以将component.$setprops 从您的插件更改为 svelte 组件。

当您从 svelte 内部向您的插件/应用程序添加侦听器时，您可能需要额外的分配data = myPlugin.data以使 svelte 能够对更改做出反应。

于 2019-12-10T22:19:46.507 回答