开箱即用的渐进式前端开发框架 dagger.js

向大家推荐一个轻量完备的描述式开源前端框架dagger.js

与 React/Vue 等主流框架相比，dagger.js 提供了更加简单易用的代码组织方式：指令是业务代码的唯一调用入口（指令中可以使用作用域和模块回调参数）。使用 dagger.js ，您将不再需要：

构建和包管理工具依赖

dagger.js 工作在浏览器运行时环境当中，无需编译构建过程。通过 script 标签引入框架脚本即可轻松完成应用程序创建。dagger.js 实现了一个运行时模块管理器，按需动态加载解析模块。为您的应用做极限瘦身。demo

运行时第三方核心代码依赖

dagger.js 内置了基于 hash 的路由管理逻辑。您无需为开发单页应用引入额外的路由管理类库。demo

状态管理

dagger.js 倡导数据即状态的技术理念。有别于 React/Vue 单向数据流模型 state(data)/prop 的区分定义，在 dagger.js 中，数据作用域独立于页面组件定义，并具有全域视图响应性。指令作为数据的消费者，可以自由读写其声明位置上可见的作用域字段，您无需再为组件间数据状态同步而劳心费神。demo

api 调用

dagger.js 是去组件化的（ componentless ），并非基于传统的 MVVM 设计模式实现。对于使用者来说，数据（ Model ）通过指令声明方式直接与上下文视图（ View ）建立动态关联。在大多数场景下您无需调用任何 api 即可完成业务开发工作。demo

更多介绍请参见官方文档。

Talk is cheap, let's see the code😄:

empty entry
Hello dagger
scope demo animation
communication between isolate $scope
lifeCycle directives
html directive
add tags
to do list
Tic Tac Toe
module
router
router view toggle each

欢迎大家体验试用 dagger.js ，提出宝贵意见和建议。您的支持和帮助是对我莫大的鼓励！！

dagger8224

2022-06-26 22:34:45 +08:00

@ClarkAbe 您好，感谢您的评论。dagger.js 中并没有设计需要常规调用的 api 方法，您说的是指令吗？ demo 中的指令表达式写成了内联的，如果将表达式方法都放在 module 下定义 html 会看起来精简很多，可以参考： https://codepen.io/dagger8224/pen/ZErjzwm

至于指令数量，看了下 alpine 当前版本的文档，提供了 15 个指令 attributes ，6 个 properties 和 2 个方法，这与 dagger.js 在预定义指令的数目上是相当的。根据我的实际开发经验来看，dagger.js 常用的控制指令只有 10 个左右（基本都可以在 vue/alpine 中找到对应的指令），文档中介绍的部分指令，比如$file ，$result 等等，是针对特殊场景（本地文件读取）设计的，普通业务场景下使用频度较低。欢迎您继续体验 dagger.js ，提出更多意见和建议。感谢！