Question

很难理解我的想象应该是一个简单的任务，但是我准备接受也许我正在以错误的方式来尝试并愿意将我的计划更改为正确的方式。

简而言之，我有一个.js文件，其中包含数百个应用程序中使用的对象和函数。我们正在使方法现代化，并重构一些功能。

作为一个非常基本的示例，我有：

**COMMON.JS**
const dynamicYearColumn= {
    resizable: false, suppressMovable: true, sortable: true, width: 100, menuTabs: [], type: 'numericColumn',
}


const defaultPercentageColumn= {

    resizable: false, suppressMovable: true, sortable: true, width: 150, menuTabs: [], type: 'numericColumn',
    //comparator: customPercentageCompare,
    valueFormatter: formatPercent,
    cellStyle: { 'text-align': 'right' },
    cellClass: function (params) { var className = numberToColorClass(params.value); return className }
}


function formatPercent(number) {

    if (isNaN(number.value) == true) { return '-' }
    return isFinite(numberWithCommas(parseFloat(number.value, 2).toFixed(this.defaultDecimalRounding))) ? numberWithCommas(parseFloat(number.value, 2).toFixed(this.defaultDecimalRounding)) + '%' : '?';
}

function numberWithCommas(n) {
    var parts = n.toString().split("."); return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");
}

在main.js中，我现在拥有：

import common from './scripts/common.js'
const commonLibrary = {
    install() {
        Vue.common = common
        Vue.prototype.$common = common
    }
}

Vue.use(commonLibrary)

这就是我失败的地方。

在我的common.js中，如果我将代码包含在export default中，则必须更改代码（删除const，使对象成为实际的对象定义，然后formatPercent无法识别。

如果我export {dynamicYearColumn,defaultPercentageColumn}可以使用'kinda'，但是在formatPercent和numberWithCommas上仍然不确定。

同样，如果我尝试创建一个Mixin，那么它也可以工作，但是Mixins方法中的任何函数都无法识别，而且我建议不要将如此大的库推入Mixins，因为这不是很好的做法。

我很感谢那里有大量的例子，但是，老实说，我什至不能真正地找到正确的术语，甚至无法开始寻找可行的例子。

TLDR;

我只想允许从单个JS文件访问大量对象和函数，并可以从我的Vue SPA的任何组件上调用它。

Answer 1

听起来你快到了。

让我们假设您要这样做：

import common from './scripts/common.js'

要实现此目的，我们需要common.js进行default导出。所以从export default开始。

此外，假设我们要访问对象和函数，例如common.dynamicYearColumn，common.formatPercent等。即使忽略import / export部分，这也意味着{ {1}}必须是具有common，dynamicYearColumn等属性的对象。其中一些属性将是函数，但实际上并没有太大区别。

因此，让我们简要考虑一下如何构建这样的对象。

formatPercent

当然，对象常量使我们可以直接使用这些属性来定义对象，而不是稍后添加它们：

const common = {}
common.dynamicYearColumn = { /* object properties here */ }
common.formatPercent = function (number) { /* implementation here */ }

ES6添加了一些语法糖来简化对象中函数的创建，因此可以简化为：

const common = {
  dynamicYearColumn: { /* object properties here */ },
  formatPercent: function (number) { /* implementation here */ }
}

这是我们要在const common = { dynamicYearColumn: { /* object properties here */ }, formatPercent (number) { /* implementation here */ } }中创建然后导出的对象。全部放在一起，我们得到：

common.js

像您在示例中一样，将它们添加到export default { dynamicYearColumn: { // ... }, defaultPercentageColumn: { // ... }, formatPercent (number) { // ... }, numberWithCommas (n) { // ... } }中将使它们在您的组件中可用，如下所示：

Vue.prototype

在您的模板中应该是：

this.$common.formatPercent(25)

这一切都很好，但是请注意，您将无法使用这些功能作为过滤器。所以你不能这样写：

{{ $common.formatPercent(25) }}

如果这是您想要的，则必须将这些功能注册为插件中的过滤器。

将公共库导入Vue SPA

1 个答案: