提问人:The Sloth 提问时间:9/27/2022 更新时间:9/27/2022 访问量:73
扩展 ES5 函数(使用原生 JS 模仿 Vue 组合 API)
Extending ES5 functions (Imitating Vue Composition API with native JS)
问:
我一直在使用最新版本的 Vue.js,我真的很喜欢组合 API,但由于我不能将 vue 用于我的所有项目,我一直在尝试使用原生 JS 获得类似的语法。
我发现我可以使用以下代码模拟 es6 类,其语法更接近 Vue,无需为我的所有变量添加前缀。this
function Component (node) {
const test1 = "I am a private variable"
this.test2 = "I am a public variable"
getProps = () => {
return test1; // I am a private method with access to component variables
}
onTimeout = (callback) => {
setTimeout(callback, 1000);
}
};
function Media (node) {
Component.call(this, node); // copies public variables and methods
const sup = Object.assign({}, this); // acts like super in es6 classes
const props = getProps();
console.log(sup)
console.log(props)
onTimeout(() => {
console.log("I am executed on timeout")
})
}
new Media();
虽然这一切似乎都正常工作并且浏览器不会抛出任何错误,但打字稿不喜欢 or 方法并抛出错误,当在 codesandbox.io 上尝试此代码时,它也会抛出错误。getProps
extend
Cannot find name 'getProps'
getProps is not defined
如果你在stackoverflow上运行这个代码片段,它也应该可以工作。
虽然我可以预先介绍使它们公开而不再私有的方法。this.
所以我的问题是:
- 这是有效的代码吗?
- 这里到底发生了什么,如果它无效,为什么这在浏览器中工作?
- 在生产环境中使用它会有什么问题吗?
- 如果是这样,我还有其他方法可以完成同样的事情吗?
- 如果不是,我如何告诉打字稿不会为 2 种方法生成错误?
答: 暂无答案
评论
getProps
是一种隐含的全球性和可怕的做法。例如,您不能有两个不同的模块,那么由于所有模块都将共享相同的 .getProps
getProps
onTimeout
Component
Media
getProps
Component
class
function
class
new