Aurelia，ES6和类名大小写

aurelia, es6 and classname case

本文关键字：大小写 ES6 Aurelia      更新时间：2023-09-26

我正在研究Aurealia的自定义组件，并遇到了我不理解的奇怪行为。考虑一下：

元件：xxxaaa.html

<template>
    <div>xxxxxx</div>
</template>

xxxaaa.js：

export class Xxxaaa {}

应用.html：

<template>
    <import from='./xxxaaa'></import>
    <div>
        <xxxaaa/>
    </div>
</template>

这按预期工作，显示 xxxxxx。然后，骆驼组件：

xxxAaa.html： 内容未更改，仅文件名

xxxAaa.js：

export class XxxAaa {}

应用.html： 

<template>
    <import from='./xxxAaa'></import>
    <div>
        <xxxAaa/>
    </div>
</template>

未显示任何内容，但日志剂量不包含任何错误，仅：

信息 [奥蕾莉亚] 奥蕾莉亚开始索引.js：26 调试 [模板] 导入 dist/app.html 资源 ["dist/xxxAaa"]索引.js：26 调试 [模板] 导入资源 dist/xxxAaa.html []

因此，第一个问题，为什么会这样？

更新：在我看来，这要么是Aurelia中的错误（它无法正确报告错误的自定义elt），要么是我对它实际工作原理的理解存在重大差距。您能否确认这是一个错误，或者解释为什么Aurelia默默地忽略了我的元素。

然后，回滚到第一个工作状态，在更改 xxxaaa 后.js

export class xxxaaa {}

控制台日志错误：

Potentially unhandled rejection [1] TypeError: Cannot call a class as a function
    at execute._classCallCheck (http://localhost:9090/dist/xxxaaa.js:9:108)
    at xxxaaa (http://localhost:9090/dist/xxxaaa.js:12:9)
    at Container.invoke (http://localhost:9090/jspm_packages/github/aurelia/dependency-injection@0.4.5/container.js:362:27)
    at Array.<anonymous> (http://localhost:9090/jspm_packages/github/aurelia/dependency-injection@0.4.5/container.js:142:52)
    at Container.get [as superGet] (http://localhost:9090/jspm_packages/github/aurelia/dependency-injection@0.4.5/container.js:238:32)
    at Container.elementContainerGet [as get] (http://localhost:9090/jspm_packages/github/aurelia/templating@0.8.14/view-factory.js:27:17)
    at CustomElement.create (http://localhost:9090/jspm_packages/github/aurelia/templating@0.8.14/custom-element.js:136:80)
    at applyInstructions (http://localhost:9090/jspm_packages/github/aurelia/templating@0.8.14/view-factory.js:79:33)
    at ViewFactory.create (http://localhost:9090/jspm_packages/github/aurelia/templating@0.8.14/view-factory.js:172:17)
    at CustomElement.create (http://localhost:9090/jspm_packages/github/aurelia/templating@0.8.14/custom-element.js:141:58)

因此，第二个问题来了——是什么导致了这种情况的敏感性？是es6，巴别塔还是奥雷利亚？

更新：我希望这里 aurelia 抱怨它找不到类，但看起来它选择了错误命名的类并尝试使用它。异常本身非常模糊（https://github.com/babel/babel/issues/887，https://github.com/babel/babel/issues/700），但我是否正确理解它，这又是Aurelia错误报告不佳的情况？

>Aurelia永远不会看到驼峰标记，因为DOM将元素和属性名称小写。

查看此答案以获取更多信息。 以下为摘录：

但需要注意的另一件事是：在所有浏览器中，当浏览器加载HTML文档并解析它时，它会将其转换为DOM（文档对象模型）。如果您随后使用浏览器的内置开发人员工具来检查站点，则当您查看 DOM 时，DOM 中的所有元素都将显示为小写，无论它们在实际源代码中是如何编写的。

另一种方法：

如果你命名你的类XxxAaaCustomElement Aurelia约定就会启动，你将能够在你的标记中使用<xxx-aaa></xxx-aaa>。

相关文章：