V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
dagger8224
V2EX  ›  前端开发

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

  •  
  •   dagger8224 · 2022-06-26 09:31:09 +08:00 · 2451 次点击
    这是一个创建于 880 天前的主题,其中的信息可能已经有所发展或是发生改变。

    向大家推荐一个轻量完备的描述式开源前端框架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 ,提出宝贵意见和建议。您的支持和帮助是对我莫大的鼓励!!

    14 条回复    2022-07-14 22:42:39 +08:00
    wzw
        1
    wzw  
       2022-06-26 14:26:11 +08:00 via iPhone   ❤️ 1
    是不是适合后端做点小活
    dagger8224
        2
    dagger8224  
    OP
       2022-06-26 15:15:09 +08:00
    @wzw 您好,dagger.js 对初接触者非常友好,有模板语法和 js 基础的话短时间内就能上手开发了。欢迎加入 QQ 讨论群:753706931 ,附言 dagger 即可:)。
    liushuigs
        3
    liushuigs  
       2022-06-26 17:28:47 +08:00
    看到了区别,没看到优势呀。适用于什么应用场景呢?
    dagger8224
        4
    dagger8224  
    OP
       2022-06-26 17:51:45 +08:00
    @liushuigs 开发者心智负担更小,上手容易,项目没有打包构建过程,线上代码量低,轻量级项目可以快速开发完成
    liushuigs
        5
    liushuigs  
       2022-06-26 18:16:43 +08:00
    无需编译,在一起轻量级的场景下,确实是有用处的。可以考虑再丰富一下示例。我看你是在用 Codepen ,也欢迎试用一下我的产品:RunJS ( https://runjs.qingting.work ),和你这个无需编译、开箱即用的理念非常相似。
    dagger8224
        6
    dagger8224  
    OP
       2022-06-26 18:30:47 +08:00
    @liushuigs 赞,刚刚在 RunJS 上试用了一下,使用起来很便捷: https://runjs.qingting.work/#/projects/c01586e50b604891
    有个问题,codepen 可以通过 url 单独访问 js/css 文件,所以比较适合演示 dagger 的模块配置声明,请问在 RunJS 中也有类似的用法吗?
    liushuigs
        7
    liushuigs  
       2022-06-26 18:41:10 +08:00
    @dagger8224 还没有呢,正在开发静态资源托管服务,不知道是不是你说的功能。
    dagger8224
        8
    dagger8224  
    OP
       2022-06-26 18:46:05 +08:00
    @liushuigs 我说的不是静态资源托管。比如说我创建了一个 id=xxx 的 demo ,那么可以单独通过 codepen/xxx.js 访问这个 demo 的 js 部分内容,也可以通过相同方式单独访问 html 和 css 。看 RunJS 的 url 是基于 hash 的,试了下貌似没有类似的功能哈
    liushuigs
        9
    liushuigs  
       2022-06-26 18:48:03 +08:00
    哦,明白了。我考虑下。谢谢
    ClarkAbe
        10
    ClarkAbe  
       2022-06-26 21:59:41 +08:00 via Android
    感觉方法好多好乱啊......不如 alpine.js 那样简单明了
    dagger8224
        11
    dagger8224  
    OP
       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 ,提出更多意见和建议。感谢!
    hoshea
        12
    hoshea  
       2022-07-10 23:00:25 +08:00
    vue 和 react 创造的语法太多了,都是方言。。。前端越来越卷了
    Lenic
        13
    Lenic  
       2022-07-14 15:16:47 +08:00
    看语法和 angular 很像啊
    dagger8224
        14
    dagger8224  
    OP
       2022-07-14 22:42:39 +08:00
    @Lenic 指令定义和 angular/vue 确实有很多类似的地方。不同之处在于,dagger 是一个基于 html 的纯描述式框架,也就是说只有指令声明而无需进行 api 调用,从开发者的角度来说心智负担会低很多。可以在 https://codepen.io/dagger8224/pens 中查看更多示例。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5319 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 07:44 · PVG 15:44 · LAX 23:44 · JFK 02:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.