1

我正在努力将一些遗留代码移动到 Webpack 中（以帮助我控制我所拥有的一些依赖地狱。到目前为止一切顺利。问题来自现有代码对 Knockout 的使用。我需要一种访问视图的方法各种组件中的模型。所以我需要一些东西来保存这个视图模型。这个问题似乎为我提供了一个很好的解决方案：

将变量放入模块中。

Webpack 只评估模块一次，因此您的实例保持全局并在模块之间进行更改。因此，如果您创建类似 globals.js 的内容并导出所有全局变量的对象，那么您可以导入“./globals”并读取/写入这些全局变量。

不过，我真的不知道该怎么做。我对 webpack/ import/export语句很陌生，所以我不是最新的基础知识。我想要一个“模块”。webpack 对此有什么好说的：

什么是 webpack 模块

与 Node.js 模块相比，webpack 模块可以通过多种方式表达它们的依赖关系

什么？真的，就这？！所以我很难理解模块是什么以及我应该如何使用它？

到目前为止，我已经定义了导出的函数并导入了它们（这些是模块吗？？！）。所以我会做这样的事情：

export default function koModule(){
  var viewModel = {}

  function setViewModel(vm){
      viewModel = vm;
  }

  function getViewModel(){
     return viewModel;
  }

  return {
     setViewModel:setViewModel,
     getViewModel : getViewModel
  }
}

我想我可以在创建初始视图模型时使用它：

import koModule from './koModule.js'

...
//obviously wrong....
var myKoModule = koModule();
myKoModule.setViewModel(vm);
...

但这显然是错误的，因为myKoModule每次我调用函数时都会实例化...并且任何试图读取它的模块都只会得到一个空白对象：

import koModule from './koModule.js'

...
//obviously wrong....
var myKoModule = koModule();
var vm = myKoModule.getViewModel();
//vm is undefined...

在上一个问题中，它声明“Webpack 只评估模块一次”。所以我显然错过了模块是什么以及我应该如何使用它们。

因此，鉴于我的要求，有人可以提供一个工作 Webpack“模块”的示例，它在保持、读取和写入全局变量的同时仍然允许我使用import它吗？

我显然在这里遗漏了一些基本的东西，但我无法弄清楚它是什么。

4

1 回答 1

3

在不确切知道您想如何使用模型以及不知道如何使用模型的情况下，这几乎是我可以为您提供的最接近的结果。这通常是我在 webpack 中使用 viewModel 的方式，它们本质上只是带有内置方法的构造函数，我可以在需要时调用它们。

主.js

import ko from 'knockout'
import koModule from './koModule.js'

const model = new koModule('Budhead2004 was here', 'More Stuff here');
ko.applyBindings(model);

KoModule.js

import ko from 'knockout'

// This is your viewModel
class koModule {
  constructor(r,t) {
    this.Test1 = ko.observable(t);
    this.Something = ko.observable(r);
    this.Click1 = function() {
      alert('test')
    }
  }
}

export default koModule

HTML

<!-- language: html -->

<!doctype html>
  <html>
    <head>
      <meta charset="utf-8"/>
    </head>
    <body>
      <h1 data-bind="text: Something"></h1>
      <input type="text" data-bind="textInput: Test1" />
      <span data-bind="text: 'Results of Test1: ' + (Test1() ? Test1() : '')"></span>
      <br>
      <button data-bind="click: Click1">Click Me</button>

      <script src="main.js"></script>
    </body>
  </html>

这里的工作示例

于 2017-10-17T15:36:30.767 回答