网站首页 > 技术文章 正文
hyperscript-rxjs是一个直接操作DOM的前端框架库。
hyperscript-rxjs具有如下特点:
- 相比操作DOM模型的命令式代码,hyperscript-rxjs更具声明性。
- hyperscript-rxjs修复或绕开了很多DOM的历史缺陷。
- 像knockout一样,hyperscript-rxjs使用MVVM分离视图与视图模型,不同的是hyperscript-rxjs采取通用的rxjs库来观察变化。
- 像react一样,hyperscript-rxjs操作DOM,与html无关。不同的是hyperscript-rxjs直接操作DOM本身,无虚拟DOM。
- hyperscript-rxjs采用更新的事件标准addEventListener,不采用属性事件onevent。采用rxjs观察DOM模型的变化,事件通知。
- 尽管rxjs是技术发展趋势,用户仍然可以基于hyperscript-rxjs实现代码,渐进实现不依赖任何框架的代码。
hyperscript-rxjs学习难度小于react,并且其知识兼容底层的DOM,实用性更强。教程见单独的文件。
依赖库
hyperscript-rxjs is based on rxjs。
入门
一个Hello World程序,就像写html一样简单。
import { p } from 'hyperscript-rxjs'
export function hello() { return p('hello world!'); }
本框架API的设计和DOM底层完全一致,即使你将来不使用本框架,也会有益于你的职业生涯。本教程的其余部分将更加详细地涵盖前端库的各种功能以及其它高级用法,所以请务必读完整个教程!
教程目录
在github上xp44mm的hyperscript-rxjs-test仓库上有教程及其源代码,本教程由浅入深,请从前到后依次阅读。
readme 创建运行框架
第1章 hyperscript
第2章 textNode
第3章 props
第4章 observable props
第5章 event
第6章 form控件
第7章 组件
第8章 simple list
第9章 表达类似记录的数据
第10章 MVVM
第11章 序列化和反序列化
parseHtml
相关库
structural-comparison
deep-rxjs
parse-html
猜你喜欢
- 2025-07-07 行业大佬对AI编程的看法:应该用, 但AI仍需大量监督和校对
- 2025-07-07 每个开发者都应该知道的20个Git命令
- 2025-07-07 一键转化github开源仓库为交互式教程神器-Code2Tutorial
- 2025-07-07 7种解决Next.js中累积布局偏移(CLS)的方法
- 2025-07-07 纯前端轻量级的神经网络库brain.js
- 2025-07-07 前端工程师都会喜欢的5个JavaScript库
- 2025-07-07 5个可学习可二次开发的nextjs开源仓库
- 2025-07-07 一个即使是高级前端程序员也不知道的惊人小技巧
- 2025-07-07 取代JavaScript库的10个现代Web API及详细实施代码
- 2025-07-07 我会在每个项目中复制这10个JS代码片段
你 发表评论:
欢迎- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (58)
- oracle面试 (55)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)