直接从课程中获取课程名称
先前的答案解释说,这种方法someClassInstance.constructor.name
很好用,但是如果您需要以编程方式将类名转换为字符串,并且不想为此创建实例,请记住:
typeof YourClass === "function"
而且,由于每个函数都有一个name
属性,因此使用类名获取字符串的另一种不错的方法是:
YourClass.name
接下来的例子很好地说明了为什么这样做很有用。
加载网页组件
正如MDN文档所教导的,这是您加载Web组件的方式:
customElements.define("your-component", YourComponent);
从那里YourComponent
延伸的班级在哪里HTMLElement
?由于在组件标签本身之后命名组件的类是一种好习惯,因此最好编写一个辅助函数,所有组件都可以使用该函数来注册自己。所以这是该函数:
function registerComponent(componentClass) {
const componentName = upperCamelCaseToSnakeCase(componentClass.name);
customElements.define(componentName, componentClass);
}
因此,您需要做的就是:
registerComponent(YourComponent);
这样做很好,因为它比自己编写component标签要容易出错。总结一下,这是upperCamelCaseToSnakeCase()
函数:
// converts `YourString` into `your-string`
function upperCamelCaseToSnakeCase(value) {
return value
// first char to lower case
.replace(/^([A-Z])/, $1 => $1.toLowerCase())
// following upper chars get preceded with a dash
.replace(/([A-Z])/g, $1 => "-" + $1.toLowerCase());
}
instance.constructor.name
并class.name
在正确的ES6中返回类名。