扩展 ES5 函数(使用原生 JS 模仿 Vue 组合 API)

Extending ES5 functions (Imitating Vue Composition API with native JS)

提问人:The Sloth 提问时间:9/27/2022 更新时间:9/27/2022 访问量:73

问:

我一直在使用最新版本的 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 上尝试此代码时,它也会抛出错误。getPropsextendCannot find name 'getProps'getProps is not defined

如果你在stackoverflow上运行这个代码片段,它也应该可以工作。

虽然我可以预先介绍使它们公开而不再私有的方法。this.

所以我的问题是:

  • 这是有效的代码吗?
  • 这里到底发生了什么,如果它无效,为什么这在浏览器中工作?
  • 在生产环境中使用它会有什么问题吗?
  • 如果是这样,我还有其他方法可以完成同样的事情吗?
  • 如果不是,我如何告诉打字稿不会为 2 种方法生成错误?
JavaScript TypeScript 范围 闭包

评论

3赞 VLAZ 9/27/2022
getProps是一种隐含的全球性和可怕的做法。例如,您不能有两个不同的模块,那么由于所有模块都将共享相同的 .getProps
2赞 T.J. Crowder 9/27/2022
若要获得隐式全局变量等问题的警告,请始终使用严格模式(它们始终是应该出现的错误)。
1赞 T.J. Crowder 9/27/2022
“这是有效的代码吗?” 是的,因为它在语法上是正确的(在松散模式下)并且可以运行。,因为它不会做你认为它做的事情。“这里到底发生了什么,如果它无效,为什么它在浏览器中工作?”该代码利用私有数据的闭包(这部分很好),但随后创建称为 和 的全局变量,每次调用时都用更新版本覆盖它们。这几乎可以肯定不是你的本意。这也是为什么可以调用;它是一个全局的,任何代码都可以调用它。...getPropsonTimeoutComponentMediagetProps
1赞 T.J. Crowder 9/27/2022
...更多关于我以前贫血的博客:隐式全局的恐怖 “在生产环境中使用它会有什么问题吗?”是的,后续调用将覆盖先前调用创建的全局变量。Component
1赞 T.J. Crowder 9/27/2022
@TheSloth - 如果你不喜欢,你可以用它来做大部分。我在这里比较两者的答案应该有助于语法。如果你想做一些伪私有的东西,即使是类的层次结构,也要简洁的语法,我当时做了一个库。我不推荐它(我要么使用,要么根本不使用),但它似乎在你要做的事情的驾驶室中。classfunctionclassnew

答: 暂无答案