Javascript 将公共库导入Vue SPA

很难理解我的想象，这应该是一项简单的任务，但我准备接受这样一个事实：也许我走错了路，我愿意把我的计划改成正确的方式

简而言之，我有一个.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

中，我必须更改代码（删除常量，使对象成为实际的对象定义，

formatPercent

则无法识别

如果我

导出{dynamicYearColumn，defaultPercentageColumn}

则该'kinda'可以工作，但我仍然无法定义formatPercent和numberWithCommas

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

我很感激有很多很好的例子，但是说实话，我真的想不出正确的术语来开始寻找工作例子

TLDR

---

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

听起来您就快到了

假设您想这样做：

import common from./scripts/common.js'

要实现这一点，我们需要

common.js

有一个

default

export。因此，一些东西开始

export default

此外，假设我们希望访问对象和函数，如

common.dynamicYearColumn

，

common.formatPercent

，等等。即使忽略

导入

/

导出

部分，这也意味着

common

需要是一个具有名为

dynamicYearColumn

，

formatPercent>属性的对象

，等等。其中一些属性将是函数，但这并没有多大区别

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

const common={}
common.dynamicYearColumn={/*此处的对象属性*/}
common.formatPercent=函数（数字）{/*此处实现*/}

当然，对象文字允许我们直接使用这些属性定义对象，而不是稍后添加它们：

const common={
DynamicEarColumn:{/*此处的对象属性*/}，
formatPercent:函数（编号）{/*此处实现*/}
}

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

const common={
DynamicEarColumn:{/*此处的对象属性*/}，
formatPercent（数字）{/*此处实现*/}
}

这是我们要在

common.js

中创建并导出的对象。将所有这些放在一起，我们得到：

导出默认值{
dynamicYearColumn：{
// ...  
},
DefaultPercentage列：{
// ...
},
百分比（数字）{
// ...
},
带逗号的数字（n）{
// ...
}
}

将它们添加到

Vue.prototype

，如您在示例中所示，将使它们在组件中可用，如下所示：

this.$common.formatPercent（25）

在您的模板中，它将是：

{{$common.formatPercent（25）}

这一切都很好，但请注意，您将无法将函数用作筛选器。因此您无法编写以下内容：

{{25 |$common.formatPercent}

如果这是您想要的，那么您必须在插件中将这些函数注册为过滤器