javascript - 在 ES6 中，如何让 js 文件中的类看起来像 html 文件中定义的那样？

Question

今天早上，我开始在我正在使用 ES6 的应用程序中重构我的 javascript，并了解所有现代浏览器版本都完全支持它。 “主”模块虽然位于 jQuery 文档就绪函数内 - 在 Chrome 调试器中，我收到一个错误，表明我的类未定义!简而言之，这是我的类(不是全部，只是一个骨架，可能还有一个函数或 2 个):

let UsherSchedule = (function()
{
    var  mssArrDays =
        [   "Sunday"
        ,   "Monday"
        ,   "Tuesday"
        ,   "Wednesday"
        ,   "Thursday"
        ,   "Friday"
        ,   "Saturday"
        ];

    var mssArrMonths =
        [   "January"
        ,   "February"
        ,   "March"
        ,   "April"
        ,   "May"
        ,   "June"
        ,   "July"
        ,   "August"
        ,   "September"
        ,   "October"
        ,   "November"
        ,   "December"
        ];

    var mObjChanges;
    var mLstObjConsistory;
    var msCurrentEditingId;
    var miCurrentMonth;
    var miCurrentYear;
    var mObjSchedule;

    //...
    class UsherSchedule
    {
         constructor()
         { }

        //...
    }

     return({   UsherSchedule   });
})();

我不知道 - 关闭完成后最后是否需要导出声明？ Eclipse 声称它是非法实体!在我的索引文件中，我有脚本标签和内联脚本标签:

<script src="resources/js/UsherSchedule.js" type="module"> </script>
<script>
    $(document)
        .ready(function()
        {
            new UsherSchedule().init();
        });
</script>

我尝试过“use strict”；和“从“/resources/js/UsherSchedule.js”导入 { UsherSchedule } ，虽然 Chrome 调试器适用于 use strict，但它在第二个 { 上出错:-O

知道我做错了什么吗？我一直使用 ES5 和闭包，直到今天使用 ES6 之前从未遇到过这样的问题。

Answer 1

您将返回一个 Object，其属性 UsherSchedule 的值为 UsherSchedule 类。

基本上，如果我们在闭包内调用 _UsherSchedule 类，就会得到如下所示的内容:

UsherSchedule = { 
    UsherSchedule: _UsherSchedule
}

这是因为deconstructing assignment .

它是如何工作的？

ES6+

let extFoo = (function() {
    const foo = 'bar'

    return { foo }
})();

ES5

var extFoo = (function() {
    var foo = 'bar'

    return { foo: foo }
})();

在这两种情况下extFoo都是

{ foo: 'bar' }

<小时/>

编辑

如果优先考虑拥有私有(private)元素，您可能需要查看 this ，它说明了一些“现代”(2016 年......)技术来完成您的要求。

如果您不太愿意更改实现，请替换

return({   UsherSchedule   });

与

return UsherSchedule;

应该可以解决问题。

<小时/>

进一步编辑

是的，jfriend00，是对的:D 所以，按照我之前所说的，你可以这样做:

1) 从脚本标签中删除type="module"；

2)保留并添加:

// resources/js/UsherSchedule.js
...
export default UsherSchedule

在 HTML 上

<script type="module">
    import UsherSchedule from './resources/js/UsherSchedule.js';
    ...
</script>

请注意模块路径中的前导./，因为仍然不支持绝对导入。