首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么Codesandbox.io上的Svelte应用程序会导致TypeError ...不是构造函数吗?

Codesandbox.io上的Svelte应用程序导致TypeError的原因是因为在代码中尝试将一个非构造函数作为构造函数来使用。Svelte是一个现代的JavaScript框架,用于构建用户界面。它使用了一种称为"组件"的概念,这些组件可以被实例化并在应用程序中使用。

当在Svelte应用程序中创建一个组件实例时,需要使用new关键字来调用构造函数。然而,如果尝试将一个非构造函数作为构造函数来使用,就会导致TypeError。

解决这个问题的方法是确保在创建组件实例时使用正确的构造函数。检查代码中的相关部分,确保正确地使用了new关键字来调用构造函数。

此外,Codesandbox.io是一个在线的开发环境,可以让开发者在浏览器中编写、测试和分享代码。它提供了一个方便的方式来创建和运行Svelte应用程序,同时还支持前端开发、后端开发、软件测试等多个领域的开发工作。

关于Svelte的更多信息和使用示例,可以参考腾讯云的Svelte产品介绍页面:Svelte产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

为啥同样逻辑在不同前端框架中效果不同

前端框架中经常有「将多个自变量变化触发更新合并为一次执行」批处理场景,框架类型不同,批处理时机也不同。 比如如下Svelte代码,点击H1后执行onClick回调函数,触发三次更新。...随着循环一直进行下去,新加入任务插入队列末尾,老任务会被取出执行。...介于processDelayTask执行时机在processTask之后,所以当任务执行时间比较长,可能导致延迟任务无法按期执行。...即流程图中右边部分: 事件循环流程图 在宏任务执行结束前遍历其微任务队列,将该宏任务执行过程中产生微任务批量执行。...file=/src/index.js [2] Vue3: https://codesandbox.io/s/crazy-rosalind-wqj0c?

1.5K30

为什么Svelte 写一个小程序如此快速?我用10分钟就搞定了!

在过去两年中,Svelte得到了很多赞扬,它远远不是“另一个前端框架”。它在2019年JS州调查中获得“年度突破”,随后在2020年满意度排名第一。...答案是: Svelte实际是一个编译器!在代码加载到浏览器之前,它就完成了大部分工作。Svelte解析代码并将其转换成常规JavaScript。...在解析过程中,它能够看到像newBook这样变量在模板中被使用,所以对它赋值将导致重新呈现。...这也是为什么Svelte应用程序包大小如此之小原因:所有不需要东西都不会出现在输出中,所以Svelte可以省去运行时中所有不需要部分。...准备好使用 svelte 了吗 那么,在你下一个项目中使用Svelte安全?你经理可能问,Svelte是否会在未来几年继续存在,或者像以前前端框架明星一样被淘汰。

2.6K10

尤大亲自评测 Vue3 和 Svelte(19个组件后Vue更好!)

在这种情况下,单个组件导致0.78kb大小差异。在 SSR 情况下,这一比例进一步上升到~2.1倍,其中单个组分导致 1.23kb 大小差异。...也就是说,在理论,如果一个应用程序包含超过15.04 / 0.78〜= 19个 Todomvc 大小组件,则 Svelte 应用程序将最终比Vue应用程序体积更大。...Svelte选择最小运行时,但具有较重生成代码成本。Svelte 可以进一步改进其代码生成来降低代码输出?Vue可以进一步改善tree-shaking,使基线(运行时框架)变小?...另外一点框架可以找到更好平衡点?...Svelte 确实有一个阈值会使得它在一定程度后让体积大小没有了优势,但是在一般情况下,只要不是特别复杂中后台管理应用,Svelte 应当会比其他框架体积小。

1.8K40

闭包

从下边这个例子中我们可以看到定义在函数内部name变量并没有被销毁,我们仍然可以在外部使用函数访问这个局部变量,使用闭包,可以把局部变量驻留在内存中,从而避免使用全局变量,因为全局变量污染导致应用程序不可预测性...,那么在何处存储这些变量呢,当然我们可以在global/window中构造一个全局对象来存储,但是之前也提到过了全局变量污染导致应用程序不可预测性,所以在这里我们更希望用闭包来进行存储。...那么我们这个陷阱是完全由闭包引起,那肯定不是,这只是Js语言特性而已,那么这个陷阱是完全由React引起,当然也不是,所以接下来我们就要来看看为什么需要闭包和React结合会引发这个陷阱。...不过这不是我们讨论重点,既然我们了解到了React渲染机制,而且在上边我们举了一个函数多次运行示例,那么在这里我们举一个组件多次执行示例, // https://codesandbox.io/s...那么问题来了,这样就能解决所有问题,显然是不能,副作用依赖可能造成非常长函数依赖,可能导致整个项目变得越来越难以维护,关于事件绑定探讨可以研究下前边 Hooks与事件绑定 这篇文章。

41420

手写 new 实现足够严谨

基本,上面代码实现没有什么问题,但是我突然产生了一个疑问:当第一个参数是 null 时候,Fn.prototype = proto 已经把构造函数原型对象设置为 null了,为什么后面还要在判断第一个参数为...这两个语句作用难道不是一样?毕竟 Fn.prototype 和 obj.__proto__ 都是指向同一个原型对象呀!...调用构造函数时候做了什么? 这时候,我们可能会想到,通过 new 调用构造函数时候,内部可能做了一些处理,导致最终返回实例对象 __proto__ 和我们预期不一致。...这两步检查构造函数原型对象类型,如果是一个对象,则会将其作为实例 __proto__;如果不是对象,则会将 Object.prototype 作为实例 __proto__。...这就能解释为什么用 null 重写构造函数原型后,实例 __proto__ 没有跟着改变了,因为在调用构造函数过程中,它链接上了 Object.prototype,可以说,这里实例原型链并没有断开

49210

Hooks中useState

反而是不相关代码被组合在了一起,这显然轻易导致bug和异常,在许多情况下,我们也不太可能将这些组件分解成更小组件,因为stateful logic到处都是,测试他们也很困难,这也是为什么很多人喜欢将...,甚至还要区分两种组件使用场景,另外,React已经发布五年了,我们希望它能在下一个五年也与时俱进,就像Svelte、Angular、Glimmer等其它库展示那样,组件预编译带来巨大潜力,尤其是在它不局限于模板时候...考虑到上边这个问题,我们可以简单实现一个useMyState函数,上边在Hooks为什么称为Hooks这个问题上提到了可以勾过来一个函数作用域问题,那么我们也完全可以实现一个Hooks去勾过来一个作用域...实际React中是通过类似单链表形式来代替数组,通过next按顺序串联所有的hook,使用数组也是一种类似的操作,因为两者都依赖于定义Hooks顺序,https://codesandbox.io...顺序,例如使用条件判断是否执行useState这样导致按顺序获取到值与预期值不同,这个问题也出现在了React.useState自己身上,因此React是不允许你使用条件判断去控制函数组件中useState

1K30

Vue 3是最佳选择? 耗时两周从Vue 2迁移到Svelte后:代码执行更快、体验更佳

关于 Vue 3 和 Svelte 哪个更好争论一直是前端圈热门话题,Vue 作者尤雨溪去年也在 GitHub 创建了一个仓库用来对比 Svelte 和 Vue 3 组件。...70%),在 SSR 模式下大 110%; 在理论,如果一个应用程序包含超过 15.04 / 0.78 约等于 19 个 todomvc 大小组件,则 Svelte 应用程序将最终比 Vue 应用程序体积更大...下图为不同框架在过去五年内留存率展示,留存率公式为:再次使用 /(再次使用 + 不会再次使用)。...Sophie 表示,作为一家初创企业,他们迁移工作不会特别复杂,需要重写文件也不是很多,所以推进速度很快。...必须承认,将项目从 Vue 迁移至目前仍处于活跃开发阶段 Svelte Kit 的确有些冒险,导致结果就是迁移完成后仅一个月就需要做出重大变更。

2.7K30

【React】730- 从 loading 9 种写法谈 React 业务开发

全文从业务开发中最常用见 loading 效果不同是实现讲起,说下现在前端开发在业务应该有的思考。...,为什么 Func 和 Class 都能实现一个组件,他们有什么差别?.../s/ywwmm3j46z 通用逻辑抽离 当你应用做到一定复杂度,不同页面都会有 loading 效果,你肯定不希望每个页面都重复书写一样逻辑,这样导致代码重复且混乱。.../s/8zx85nrzk2 Render Props Render Props 就是我们给一个函数传递一个回调函数做为参数,该回调函数就能利用外面函数执行结果做为参数,执行任何操作。.../s/0v1p4rp7xv 相同点: 两者都能很好帮助我们重用组件逻辑; 和回调函数类似,当嵌套层数很多时,造成回调地狱。

79741

Web 框架能解决什么问题?

Svelte 不使用虚拟 DOM diffing 之类技术,而是编写代码,当你应用程序状态发生变化时,外科手术式地更新 DOM。”...让我们深入了解它们含义。 声明性编程 声明性编程是一种范式,在这种范式中,逻辑被定义,而没有指定控制流。我们描述需要结果是什么,而不是我们采取什么步骤。...例如,Show 元素将跟踪内部变化,而不是虚拟 DOM。 在 Svelte 中,生成“active”代码。Svelte 知道哪些事件导致变化,它会生成直接代码,区分事件和 DOM 更改。...Svelte 约为 2KB,但生成代码大小不同。 现在看来,在保持包大小,现在框架要优于 React。虚拟 DOM 要求使用很多 JavaScript。...我同意,但是可能像 Svelte 和 SolidJS 这样“构建”以及像 Lit 这样自定义客户端模板引擎都只是单纯开销? 调试 在构建和转译过程中,需要付出成本也是不同

1.5K10

前端框架自欺欺人,TypeScript全无必要?

这就与 Svelte 一开始给我们变量自动带有响应式开发体验相悖,导致了语句歧义,从而提升了开发心智负担。我们在开发 Svelte 要时刻提醒自己,只有把变量定义在最外层,才具备响应式。...这也就是为什么现在编译型框架,虽然它并没有虚拟 DOM,照样也能跨平台。 有了这个机制,就可以实现一套代码同时跑在移动端 App、PC 应用程序、H5 页面等多端。...React 框架设计理念之一是极简主义 从语法角度上看, React 在传统前端技术栈,只引入了 jsx,用于表达虚拟 DOM 构造过程,其他一切都是原生 JavaScript。...Svelte 另一个设计理念是降低心智负担,具体体现在 Svelte 对数据响应式设计。...实际,日常开发业务,我们通常只会使用类型定义,顶多用到泛型函数,类型定义和简单类型推导,并不会使用到“Typescript 类型体操”这种模板元编程程度。

50820

告别 React,拥抱 Svelte:21天重写应用,开发速度翻倍代码量减半!

我们几乎把所有东西都迁移到了 Svelte 。当然,在迁移过程中我们也对一些功能进行了重新设计,但这只是因为这样做起来很容易。要说的话,我怀疑我们 Svelte 代码是写多了,不是写少了。...Svelte 与 React 鼓励组件模型和分隔样式保持了一致。然而,为了效率,它也为开发者提供了很多强大功能,但滥用这些功能可能导致维护困难。...我完全能想象到,大公司实习生可能觉得双向绑定更简单,但这实际可能会给未来维护带来噩梦。...它给人感觉就像是充分利用了标准技术,而不是像许多框架那样重新实现它们。 事实,学习起来如此轻松,以至于我经常觉得我是在“回忆”如何使用 Svelte,而不是重新学习。我会感叹:“噢!...虽然 Svelte 5 应与 Svelte 4 完全兼容,但它也预设你逐渐迁移到新范式

18210

10 种最常见 Javascript 错误

基本,如果第二个错误只是第一个错误重复,我们会把两个错误分到同一组。这会给用户一个很好概括,而不是像在日志文件中看到那样直接一大堆让人感觉到十分压迫 dump。...当异步获取数据时,不管它是在构造函数componentWillMount还是componentDidMount中获取,组件在数据加载之前至少呈现一次,当 Quiz 第一次呈现时,this.state.items...最简单方法:在构造函数中用合理默认值来初始化 state。...例如,如果您将您 JavaScript 代码托管在 CDN ,则任何未被捕获错误将被报告为“脚本错误” 而不是包含有用堆栈信息。...}, 0); }; 执行上面的代码导致以下错误:“Uncaught TypeError:undefined is not a function”。

6.8K80

我们可以脱离它们

传统框架如 React 会在浏览器中需要做大量工作,而 Svelte 将这些工作放到构建应用程序编译阶段来处理。”...例如,Show 元素将跟踪内部发生变化,而不是虚拟 DOM。 在 Svelte 中,会生成“响应式”代码。...Svelte 知道哪些事件导致更改,并生成简单代码,在事件和 DOM 更改之间划清界限。 在 Lit 中,响应式是使用元素属性完成,本质依赖于 HTML 自定义元素内置响应性。...在 Svelte 中,库本身包体积很小,但你需要发布和调试一大堆额外生成代码,这些代码是用来实现 Svelte 响应式,它们据应用需要进行定制。...有解决框架给我们解决问题?在实际开发里面,你怎么选呢?

7.9K30

2032 年了,面试官居然还在问三大框架响应式区别……

有一些专门讲授 Observables 课程。 显式subscribe()不是良好开发体验,因为它要求为每个绑定位置订阅(分配回调函数)。...开始时需要稍微更多规则(更多知识)⇒ 但之后无需优化。 在基于值系统中,性能问题是逐渐累积。没有一个特定改变导致应用程序出现问题,只是“有一天它变得太慢了”。...此外,“优化”API 引入了风险,可能导致你掉入响应式陷阱(更新停止传播)。 使用 Signal 系统时,需要稍微更深入地了解,可能会掉入响应式陷阱。然而,掉入陷阱是即时、明显且容易修复。...一旦开始优化基于值系统,你就进入了与 Signal 相同响应式世界,你可能遇到相同响应式问题。基于值“优化”API 本质是“带有较差开发体验 Signal”。...这就是为什么我说:“我不知道哪个框架变得流行(我有自己喜好),但我确信你下一个框架将是基于 Signal 。”

28830

从Lisp到Vue、React再到 Qwit:响应式编程发展历程

AngularJS AngularJS 最初目标是扩展 HTML 词汇,以便设计师(非开发人员)可以构建简单 Web 应用程序。这就是为什么 AngularJS 最终采用了 HTML 标记原因。...这意味着数据变化触发大量 JavaScript 执行。框架最终会将所有的更改合并到 UI 中。这意味着快速变化属性,如动画,可能导致性能问题。...AngularJS 和后来 React 这样框架取而代之原因之一,因为开发者可以简单地使用点符号来访问和设置状态,而不是一组复杂函数回调。...我们还能在此基础做出什么改进? 响应性和渲染 让我们想象一个产品页面,有一个购买按钮和一个购物车。 在上面的示例中,我们有一个树形结构中组件集合。...记得精细反应性要求所有组件至少执行一次以创建反应图?好吧,Qwik 利用了组件在 SSR/SSG 期间已经在服务器执行事实。Qwik 可以将这个图形序列化为 HTML。

1.6K20

1000个项目中前10名JavaScript错误介绍

如果我们只查看每个错误发生总次数,那么客户量大项目产生错误可能压倒其他错误,导致实际收集到是与大多数读者无关错误数据集。...当异步获取数据时,不管它是在构造函数componentWillMount还是componentDidMount中获取,组件在数据加载之前至少呈现一次,当 Quiz 第一次呈现时,this.state.items...最简单方法:在构造函数中用合理默认值来初始化 state。...例如,如果您将您 JavaScript 代码托管在 CDN ,则任何未被捕获错误将被报告为“脚本错误” 而不是包含有用堆栈信息。...}, 0); }; 执行上面的代码导致以下错误:“Uncaught TypeError:undefined is not a function”。

6.2K10

1000多个项目中十大JavaScript错误以及如何避免

二是当通过异步方式获取数据时,无论是在构造函数中 componentWillMount 中,还是在构造函数中提取 componentDidMount,组件在数据加载之前至少渲染一次。...解决方法很简单:在构造函数中使用合理默认值进行状态初始化。...TypeError: Null Is Not an Object (evaluating...) 这是在 Safari 中读取属性或调用空对象方法时发生错误。 ?...例如,如果将 JavaScript 代码托管在 CDN ,则任何未被捕获错误(通过 window.onerror 处理程序发出错误,而不是 try-catch 中捕获到错误)将仅报告为“脚本错误...}, 0); }; 执行上面的代码导致以下错误:“Uncaught TypeError: undefined is not a function。”

8.2K40
领券