您当前的位置:首页 > 电脑百科 > 程序开发 > 框架

开箱即用的轻量级前端框架:dagger.js

时间:2022-09-26 10:45:51  来源:  作者:互联网资讯看板

大家好,我是Echa哥。


 

推荐一个轻量完备的开源前端框架:dagger.js:https://daggerjs.org


 

什么是 dagger.js

dagger.js 是一个基于 html 的描述式单页应用开发框架,通过在页面 DOM 元素上添加语义化的指令来驱动业务逻辑。从语法特性的角度来说,dagger.js 模板 + 指令的工作方式与 Angular/Vue 比较接近。

dagger.js 采用去组件去 api 设计,没有对第三方代码或工具的依赖,模型简单,易于理解。与当前的主流前端框架相比,使用者的整体学习和使用成本更低。

使用 dagger.js,开发者将无须依赖于:

项目构建过程

dagger.js 工作在浏览器运行时当中。只需要通过 script 标签引入框架源码(release 版本 gzip 压缩后约 20KB)即可轻松创建单页应用程序。dagger.js 对项目代码结构是非侵入式的,您可以以极小成本对历史项目(即使是非单页应用程序)进行渐进升级。

包管理工具

dagger.js 内部实现了一个运行时模块管理器,根据路由配置按需动态加载和解析各类模块,为您的应用程序进行极限瘦身。

第三方路由管理工具

dagger.js 内置了基于 hash 的路由管理器。开发者无需引入额外的路由管理类库。

数据状态管理工具

dagger.js 倡导数据即状态的技术理念。有别于 React/Vue 等框架单向数据流模型中对于 state/prop 对象的区分,dagger.js 的作用域数据由框架本身进行维护,并具有全域视图响应性,开发者不必为不同组件间的数据状态同步而劳心费神。

开发范式

不同于 React Hooks 和 Vue 的组合式 API 方案,dagger.js 提供了更加接近原生 JAVAScript 开发体验的心智模型。dagger.js 没有设计任何框架相关的 “语法糖”,开发者编写的脚本代码只是普通的原生 JavaScript 函数。函数定义本身是上下文无关的,其触发时机、调用参数以及副作用完全由调用者(指令)所决定。

dagger.js 中不存在组件(Component)实体的概念,指令是串接作用域数据(Model)和页面视图(View)的桥梁。换句话说,在 dagger.js 中,一切业务逻辑都以指令作为调用入口。某些特定指令可以在执行上下文创建作用域数据,而所有指令都可以作为作用域数据的消费者。指令读取或者修改作用域数据,进而触发依赖收集或者页面视图的响应式更新。

下文中我们将通过示例代码来体验 dagger.js 的工作模式。

创建作用域

在 dagger.js 中,我们可以通过生命周期指令 +loading 来创建作用域数据:

 

+loading 指令在宿主元素(div)初始化时由框架触发调用。它的副作用是,当表达式的执行结果是一个平凡对象时,框架将依据此对象在当前上下文创建出新的作用域数据。技术上说,这个作用域数据是指令返回平凡对象的代理对象。

作用域数据在宿主元素被销毁时由框架自动移除,无需开发者手动管理。

指令

在 dagger.js 中,除去生命周期指令之外,还有两种重要的指令类型:控制指令和事件处理指令。

两种指令都可以自由读写在其声明位置可见的作用域数据,但是行为有所不同。

控制指令

控制指令在执行过程中会收集参与计算的作用域变量字段,并在指令的依赖项发生变化时动态触发指令重新执行。我们来看一个例子:

resetnumber" $value#input="a">
span>${ c } = ${ a } + ${ b }
${ d } = 2 * (${ c })


 


示例链接:https://codepen.io/dagger8224/pen/JjpJxzq

上例中,我们在 div 元素上声明了控制指令 $watch 的两个实例。其中编号为#1” 的指令依赖于作用域变量下字段 a 和字段 b,编号为#2 的指令依赖于作用域变量下字段 c。当用户修改 a 或 b 的值时,将首先触发指令 $watch#1 重新计算,更新字段 c 的值。c 值发生变化后再触发指令 $watch#2 重新计算,进而更新字段 d 的值。

除去 $watch 指令之外,dagger.js 还提供了更多语义化的控制指令,我们简单列举下这些控制指令的使用方法:

$checked 指令用于绑定宿主元素的选中状态,适用于类型为 radio 和 checkbox 的 input 元素,以及 option 元素。

 

$class 指令用于将表达式的内容绑定到宿主元素的 class 属性上。

 

$each 指令用于循环渲染具有相同视图模板的数组,对象,或者其他可迭代变量。

 

$exist 指令用于切换宿主元素及其子级元素的存在状态。

 

$html 指令用于在宿主元素下动态创建子级元素。

$file 指令用于绑定用户选择的本地文件信息。

1

$selected 指令用于绑定宿主元素的选中值,适用于类型为 radio 和 checkbox 的 input 元素,以及 select 元素。

 

$style 指令用于绑定宿主元素的 style 属性。

${ text }

$text 指令用于在宿主元素下动态创建文本内容。大多数情况下,我们也可以使用原地模板字符串(上例第二种方式)来创建动态文本节点,这样更加简单灵活。

$value 指令用于将表达式的内容与 input 元素的 value 建立双向数据绑定。

事件处理指令

与控制指令相比,事件处理指令的用法更加简单。事件处理指令由用户操作或系统事件触发调用,在执行过程中不会对作用域数据进行依赖收集。我们来看一个例子:

alert(message)">click

上例中,button 元素上的 +click 指令声明了一个鼠标点击事件处理函数。类似地,您也可以声明其他的原生事件处理指令(+keyup,+mouseenter 等等),或者自定义事件处理指令(例如:+custom_event)。

接下来我们来看几个指令的综合示例:

指令综合示例 1

下面的示例代码演示了生命周期指令 +loading,+loaded,+unloading,+unloaded,控制指令 $exist 以及事件处理指令 + click` 的使用:

toggle existThe status of dynamic span: ${ status }Some content

点击按钮将切换作用域字段 exist 的值,进而触发声明了 $exist 指令的 span 元素加载或移除。


 


示例链接:https://codepen.io/dagger8224/pen/wvmgRyj

指令综合示例 2

下面的示例代码演示了控制指令 $each 和 $checked 的使用:

checkbox${ item }

切换复选框的勾选状态,作用域变量 checked 字段的内容将随之发生变化,这是双向数据绑定指令的典型用法。


 


示例链接:https://codepen.io/dagger8224/pen/PoRpROq

各种指令更详细的定义和使用方法参见官网文档 。

模块

接下来我们一起了解下 dagger.js 的模块设计。

在 dagger.js 中,我们把 html 模板,脚本,层叠样式表等可复用的代码片段统称为模块。

dagger.js 内部维护了一个运行时模块管理器,开发者通过 json 格式的配置项注册模块,框架将在应用程序首次加载或页面内路由发生切换时触发模块资源按需动态加载、解析和执行。

与作用域数据类似,模块仅在其注册层级及子层级生效,避免对全局作用域造成污染。

您可以根据业务需求灵活配置模块的组合方式(每一个组合方案构成一个名空间)来实现代码复用。我们来看一个模块配置项的示例:

上面的配置项中,我们注册了一个名为 script 的脚本模块,一个名为 style 的样式模块,和一个名为 template 的模板模块,并将样式模块的作用范围限定为模板模块内部。

示例链接:https://codepen.io/dagger8224/pen/rNJrzzj

路由

作为一个完备的单页应用开发框架,dagger.js 内置了基于浏览器 hash 的路由管理器。当页面路由发生切换时,根作用域下 $router 对象的内容将同步变化,进而驱动页面视图产生响应式更新(需要配合 $html 控制指令使用)。我们来看一个示例:


 


上例中,当路由从 root 切换至 parent1 之后,页面内容将发生切换。

示例链接:https://codepen.io/dagger8224/pen/zYRQrwP

路由对象的字段内容可以在下面的示例中查看:


 


示例链接:https://codepen.io/dagger8224/pen/PoQBovd

渲染性能

dagger.js 并未采用虚拟 DOM 方案,而是通过细粒度的指令执行来实现页面视图增量更新。在 js-framework-benchmark 测试场景中,其综合运行时性能与 React17 版本相当。

未来计划

dagger.js 目前已经在多家公司的 B 端管理系统当中得到应用。在未来,我们计划围绕框架持续建设周边生态,通过开源方式对框架进行推广运营,让更多的前端开发者有机会了解和使用 dagger.js。

总结

dagger.js 是一个轻量级无依赖的描述式前端开发框架,与主流框架相比,具有更低的学习和使用成本。用户仅需了解上文中介绍的指令,模块与路由的相关概念和用法,就可以快速上手使用 dagger.js 构建单页应用程序。

以上是对 dagger.js 主要功能特性的概要介绍。更多信息请查看官方文档:https://daggerjs.org

Github 地址:https://github.com/dagger8224/dagger.js

更多示例截图three.js


 


示例链接:https://codepen.io/dagger8224/pen/QWmwaLq

3D Carousel


 


示例链接:https://codepen.io/dagger8224/pen/JjLRbmz

Tesla


 


示例链接:https://codepen.io/dagger8224/pen/RwMGvPv?editors=1010

color picker


 


示例链接:https://codepen.io/dagger8224/pen/vYRmGJp?editors=1010

progress bar


 


示例链接:https://codepen.io/dagger8224/pen/dympJXz?editors=1010

text animation


 


示例链接:https://codepen.io/dagger8224/pen/JjLXppg

您可以在 https://codepen.io/dagger8224/pens 网站查看用 dagger.js 编写的更多有趣的 demo:

 

  • empty page: https://codepen.io/dagger8224/pen/ZErWBpB
  • to do list: https://codepen.io/dagger8224/pen/QWQVYGN
  • $scope animation: https://codepen.io/dagger8224/pen/YzeNmRz
  • anime.js: https://codepen.io/dagger8224/pen/eYMpzvB
  • clock: https://codepen.io/dagger8224/pen/RwMWRYd?editors=1000
  • digital clock: https://codepen.io/dagger8224/pen/LYdZEag
  • add tags: https://codepen.io/dagger8224/pen/ZErjzwm

 



Tags:dagger.js   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
开箱即用的轻量级前端框架:dagger.js
大家好,我是Echa哥。 推荐一个轻量完备的开源前端框架:dagger.js:https://daggerjs.org 什么是 dagger.jsdagger.js 是一个基于 html 的描述式单页应用开发框架,通过在页面 DO...【详细内容】
2022-09-26  Search: dagger.js  点击:(403)  评论:(0)  加入收藏
▌简易百科推荐
Qt与Flutter:在跨平台UI框架中哪个更受欢迎?
在跨平台UI框架领域,Qt和Flutter是两个备受瞩目的选择。它们各自具有独特的优势,也各自有着广泛的应用场景。本文将对Qt和Flutter进行详细的比较,以探讨在跨平台UI框架中哪个更...【详细内容】
2024-04-12  刘长伟    Tags:UI框架   点击:(1)  评论:(0)  加入收藏
Web Components实践:如何搭建一个框架无关的AI组件库
一、让人又爱又恨的Web ComponentsWeb Components是一种用于构建可重用的Web元素的技术。它允许开发者创建自定义的HTML元素,这些元素可以在不同的Web应用程序中重复使用,并且...【详细内容】
2024-04-03  京东云开发者    Tags:Web Components   点击:(8)  评论:(0)  加入收藏
Kubernetes 集群 CPU 使用率只有 13% :这下大家该知道如何省钱了
作者 | THE STACK译者 | 刘雅梦策划 | Tina根据 CAST AI 对 4000 个 Kubernetes 集群的分析,Kubernetes 集群通常只使用 13% 的 CPU 和平均 20% 的内存,这表明存在严重的过度...【详细内容】
2024-03-08  InfoQ    Tags:Kubernetes   点击:(18)  评论:(0)  加入收藏
Spring Security:保障应用安全的利器
SpringSecurity作为一个功能强大的安全框架,为Java应用程序提供了全面的安全保障,包括认证、授权、防护和集成等方面。本文将介绍SpringSecurity在这些方面的特性和优势,以及它...【详细内容】
2024-02-27  风舞凋零叶    Tags:Spring Security   点击:(54)  评论:(0)  加入收藏
五大跨平台桌面应用开发框架:Electron、Tauri、Flutter等
一、什么是跨平台桌面应用开发框架跨平台桌面应用开发框架是一种工具或框架,它允许开发者使用一种统一的代码库或语言来创建能够在多个操作系统上运行的桌面应用程序。传统上...【详细内容】
2024-02-26  贝格前端工场    Tags:框架   点击:(47)  评论:(0)  加入收藏
Spring Security权限控制框架使用指南
在常用的后台管理系统中,通常都会有访问权限控制的需求,用于限制不同人员对于接口的访问能力,如果用户不具备指定的权限,则不能访问某些接口。本文将用 waynboot-mall 项目举例...【详细内容】
2024-02-19  程序员wayn  微信公众号  Tags:Spring   点击:(39)  评论:(0)  加入收藏
开发者的Kubernetes懒人指南
你可以将本文作为开发者快速了解 Kubernetes 的指南。从基础知识到更高级的主题,如 Helm Chart,以及所有这些如何影响你作为开发者。译自Kubernetes for Lazy Developers。作...【详细内容】
2024-02-01  云云众生s  微信公众号  Tags:Kubernetes   点击:(51)  评论:(0)  加入收藏
链世界:一种简单而有效的人类行为Agent模型强化学习框架
强化学习是一种机器学习的方法,它通过让智能体(Agent)与环境交互,从而学习如何选择最优的行动来最大化累积的奖励。强化学习在许多领域都有广泛的应用,例如游戏、机器人、自动驾...【详细内容】
2024-01-30  大噬元兽  微信公众号  Tags:框架   点击:(68)  评论:(0)  加入收藏
Spring实现Kafka重试Topic,真的太香了
概述Kafka的强大功能之一是每个分区都有一个Consumer的偏移值。该偏移值是消费者将读取的下一条消息的值。可以自动或手动增加该值。如果我们由于错误而无法处理消息并想重...【详细内容】
2024-01-26  HELLO程序员  微信公众号  Tags:Spring   点击:(88)  评论:(0)  加入收藏
SpringBoot如何实现缓存预热?
缓存预热是指在 Spring Boot 项目启动时,预先将数据加载到缓存系统(如 Redis)中的一种机制。那么问题来了,在 Spring Boot 项目启动之后,在什么时候?在哪里可以将数据加载到缓存系...【详细内容】
2024-01-19   Java中文社群  微信公众号  Tags:SpringBoot   点击:(86)  评论:(0)  加入收藏
相关文章
    无相关信息
站内最新
站内热门
站内头条