6
Svelte 开发速览
source link: https://blog.dteam.top/posts/2021-02/svelte-quickly.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Svelte 开发速览
Svelte 开发速览
胡键 Posted at — Feb 5, 2021
阅读 353
自定义，实现 subscribe 的对象
Derived，基于其他 store 计算得来
Readable
Writable
自动订阅，无需 unsubscribe
markup，页面元素 + 语法块
<style>，页面风格
<script>，代码逻辑
Vercel
Netlify
2. 类 S3 云服务 + CDN
1. GitLab / GitHub + CI
dotenv：在 jest.setup.js 中初始化，使用 window.xxx 形式
LocalStorage：jest-localstorage-mock
WebCrypto：@peculiar/webcrypto
tick，pending 状态被应用于 DOM 时
afterUpdate，DOM 更新后
beforeUpdate，DOM 更新前
onDestroy，页面结束前
onMount，页面初始化
不能持久化
$store_namereactive 状态共享
引用变量更新后，自动执行
基于 promise 不同状态显示不同 markup
方便的 input 绑定，支持不同类型
支持 DOM 事件
可被更高一级 svelte 组件使用
3.
node scripts/setupTypeScript.js
2. 进入目录
1. 使用工程模板创建工程
npx degit sveltejs/template-webpack svelte-app
dotenv + @rollup/plugin-replace
Cpress
TestCafe
测试涉及到的特性：
jest + svelte-testing-library + svelte-jester
routify
akita
store
slot 简化了组件组合store
action 给元素添加功能$: 语句await block
使用
store 跨组件层次共享数据使用
context 让子组件无障碍访问祖先组件使用
createEventDispatcher 发送事件bind 指令属性和处理函数
支持类：业务逻辑，普通 js/ts 文件
组件类：UI 逻辑，svelte 文件
4.
npm run dev
3.
npm install
2.
cd my-svelte-project
1.
npx degit sveltejs/template my-svelte-project
高度优化的最终代码
TypeScript 支持
使用 WebPack
env 支持
E2E 测试
Routing
值得注意的 Svelte 语法
（其余语法请自行查看文档）
（其余语法请自行查看文档）
组件间通信
优良的 Reactive 支持
相同功能，代码量更少
无 Virtual DOM，高性能
问题与对策
Svelte
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK