【Svelte框架】Svelte在构建快速Web应用程序过程中对于嵌套组件和preventDefault【一个APP的实例】

简介: 【Svelte框架】Svelte在构建快速Web应用程序过程中对于嵌套组件和preventDefault【一个APP的实例】

Svelte

Svelte用于构建快速Web应用程序。
Svelte与React和Vue一样,致力于让轻松构建灵活、交互式的用户界面。
不同之处在于,Svelte在构建时将代码转换为更好的JavaScript,而不是在运行时解释和执行代码。
这意味着不必支付框架本身的性能成本,并且在首次加载时不会有额外的性能损失。
可以使用Svelte编写整个应用程序,也可以使用Svlte逐步重构现有代码;也可以只输出一个独立的组件(不强制附加框架本身),并在任何框架中使用它。

<script>
    let name = 'world'; 
</script> 
<h1>Hello world!</h1>
AI 代码解读

在大括号中,我们可以编写任意JavaScript。
然后可以尝试将名称更改为name。toUpperCase()以使问候更加强烈。
注意:看起来正在创建一个全局变量,但实际上,name仍然限于组件的局部变量,也就是说,无法访问全局对象(Window)中组件中声明的name变量。

<script>
  let src = 'tutorial/image.gif';
</script>

<img>
AI 代码解读

样式

对于特定的函数,Svelte仍然有相应的运行时代码,例如组件逻辑、if/else切换逻辑、循环逻辑等。但是在编译时,如果没有使用函数,则相应的代码根本不会编译成结果。就像Babel中未使用的函数的助手不会被引入一样,就像使用lodash或RxJS时,只有相应的函数被选择性地引入一样。

<img src={src} alt="A man dances.">
AI 代码解读

基于这两个特性,Svelte应用程序的最终代码量可能非常小。例如,它的TodoMVC min+gzip仅晚了3kb。
然而,Svelte并非没有潜在问题:
(1) 尽管简单演示中的代码量确实很小,但同一组件模板通过这种隐式操作生成的代码量将大于vdom渲染函数的代码量,并且多个组件中会有大量重复代码(尽管gzip可以缓解这个问题,但解析和求值是不可避免的)。
项目中的组件越多,代码量的差异就越小。
同时,它并不是广告中所说的“没有运行时”,而是根据代码按需导入。
使用的函数越多,Svelte需要包含的运行时代码就越多。很难说它在实际生产项目中会有多大的规模优势。
(2) Svelte在大型应用程序中的性能仍有待观察,尤其是在大量动态内容和嵌套组件的情况下。它的更新策略决定了它还需要一个类似于React的shouldComponentUpdate的机制来防止过度更新。

<style>
  p {
    color: purple;
    font-family: 'Comic Sans MS', cursive;
    font-size: 2em;
  }
</style>

<p>这是一段话。</p>
AI 代码解读

嵌套组件

将整个应用程序放在一个组件中是不切实际的。相反,我们可以从其他文件导入组件,并将其作为包含元素包含。
请注意,即使Nested Svelte具有<p>元素,App的Svelte风格也不受影响。
还要注意,组件名称Nested是大写的。此约定用于使我们能够区分用户定义的组件和常规HTML标记。

<script>
    import Nested from './Nested.svelte';
</script>
AI 代码解读

前端

通常,字符串以纯文本形式插入,这意味着<和>等字符没有特殊含义。
但有时需要将HTML直接呈现到组件中。例如,正在阅读的单词现在存在于markdown文件中,该文件以HTML的形式包含在本页中:

<script>
    let string = `this string contains some <strong>HTML!!!</strong>`;
</script>

<p>{string}</p>
AI 代码解读

Svelte在将{@html…}中的表达式插入DOM之前不会清理它们。换言之,如果使用此功能,则必须手动从不受信任的源中转义HTML,否则可能会使用户暴露于XSS攻击。

一个App实例

还需要配置文本编辑器。如果正在使用VS代码,请安装Svelte扩展。否则,请按照本指南中的说明配置文本编辑器,以便。svelte文件与相同。html来突出显示语法。
然后,一旦项目建立,就可以轻松地使用Svelte组件。编译器将每个组件转换为一个常规JavaScript类-只需导入并使用new来实例化:

import App from './App.svelte';

const app = new App({
  target: document.body,
  props: {
    answer: 42
  }
});
AI 代码解读

有时,检查流经应用程序的数据是有用的。
一种解决方案是使用控制台。标记内的log(…)。但是,如果要暂停执行,可以将{@debug…}标记与要检查的值的逗号分隔列表一起使用:

<script>
  let user = {
    firstname: 'Ada',
    lastname: 'Lovelace'
  };
</script>

{@debug user}

<h1>Hello {user.firstname}!</h1>
AI 代码解读

在这里插入图片描述

笔记

可以在组件中使用HTML注释。
以svelte ignore开头的内容将被注释掉,直到在注释结束标记处结束。一般来说,带注释的内容包含可访问性(a11y,一些有助于提高可访问性的信息)信息,因此请仅在有充分理由时使用。


<!-- 这是一句注释! -->
<h1>Hello world</h1>
AI 代码解读

如果键是一个表达式,它必须是唯一的,以标识列表中的每个列表项,以便Svelte可以更改列表中任何位置的数据,而不是在末尾添加或删除数据。密钥可以是任何对象,但建议使用字符串和数字,因为它们允许在对象本身更改时保留标识。

{#each items as { id, name, qty }, i (id)}
    <li>{i + 1}: {name} x {qty}</li>
{/each}

{#each objects as { id, ...rest }}
    <li><span>{id}</span><MyComponent {...rest}/></li>
{/each}

{#each items as [id, ...rest]}
    <li><span>{id}</span><MyComponent values={rest}/></li>
{/each}
AI 代码解读

它可以与{@debug…}一起使用以替换控制台。日志(…)。每当指定变量的值发生变化时,它都会记录这些变量的值。如果打开devtools,代码执行将在{@debug…}语句的位置暂停。
它接受单个变量名。
可以使用的修改器有:
PreventDefault:调用事件。preventDefault()在程序运行之前
StopPropagation:调用事件。stopPropagation()以防止事件到达下一个标记
被动:提高了触摸/滚轮事件的滚动性能(Svelte将在适当的情况下自动添加)
捕获:表示其程序是在捕获阶段触发的,而不是通过冒泡触发的
一次:程序运行一次后删除自身
可以连接修饰符,例如:单击|once|capture={…}。
如果未为使用的on:命令事件指定特定值,则意味着组件将负责转发事件,这意味着组件的用户可以监听事件。

<script>
    let counter = 0;
    function increment() {
        counter = counter + 1;
    }

    function track(event) {
        trackEvent(event)
    }
</script>

<button on:click={increment} on:click={track}>Click me!</button>
AI 代码解读
目录
打赏
0
0
0
0
154
分享
相关文章
|
1天前
|
AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
19 12
AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
使用 MERN 堆栈构建可扩展 Web 应用程序的最佳实践
使用 MERN 堆栈构建可扩展 Web 应用程序的最佳实践
59 6
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
66 2
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
158 62
Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架
本文概述了Go语言中几种流行的Web框架,如Beego、Gin和Echo,分析了它们的特点、性能及适用场景,并讨论了如何根据项目需求、性能要求、团队经验和社区支持等因素选择最合适的框架。
227 1
从框架到现代Web开发实践
从框架到现代Web开发实践
70 1
|
3月前
|
探索PHP的现代演进:从Web开发到框架创新
PHP是一种流行的服务器端脚本语言,自诞生以来在Web开发领域占据重要地位。从简单的网页脚本到支持面向对象编程的现代语言,PHP经历了多次重大更新。本文探讨PHP的现代演进历程,重点介绍其在Web开发中的应用及框架创新,如Laravel、Symfony等。这些框架不仅简化了开发流程,还提高了开发效率和安全性。
49 3
|
3月前
|
探索PHP的现代演进:从Web开发到框架创新
PHP 自发布以来一直在 Web 开发领域占据重要地位,历经多次重大更新,从简单的脚本语言进化为支持面向对象编程的现代语言。本文探讨 PHP 的演进历程,重点介绍其在 Web 开发中的应用及框架创新。自 PHP 5.3 引入命名空间后,PHP 迈向了面向对象编程时代;PHP 7 通过优化内核大幅提升性能;PHP 8 更是带来了属性、刚性类型等新特性。
49 3
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
269 45
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
112 2

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
    457
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    14
  • 3
    微信小程序 app.json 配置文件解析与应用
    16
  • 4
    【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
    4
  • 5
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
    36
  • 6
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    2
  • 7
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
    6
  • 8
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    43
  • 9
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
    5
  • 10
    阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作
    20
  • 1
    Burp Suite Professional 2025.2 (macOS, Linux, Windows) - Web 应用安全、测试和扫描
    23
  • 2
    AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
    19
  • 3
    【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
    54
  • 4
    部署使用 CHAT-NEXT-WEB 基于 Deepseek
    326
  • 5
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 6
    java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
    39
  • 7
    零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
    28
  • 8
    【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
    20
  • 9
    FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
    53
  • 10
    springSecurity学习之springSecurity过滤web请求
    60
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等