最简指令驱动前端框架 DaggerJS 初体验

一直想找一个超轻量级前端框架，今天发现了DaggerJS框架。

如DaggerJS官方, 所讲：DaggerJs是一个指令驱动开发框架（DDD），指令是用户代码执行的唯一入口。如果把页面看做是一辆汽车，那么dagger.js相当于车辆的发动机，指令则是遍布车身底盘的传动齿轮。

看了一下官方文档，发现组件实现官网介绍的不是太清楚，就有了今天的笔记，实现了一下单页面组件开发，效果如下：
在这里插入图片描述

开发步骤：

安装：引用包就好，不用编译。

  <script type="module" crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/@peakman/[email protected]/dagger.release.js" defer></script><!-- dagger.js script -->

配置：
这里配置了两个组件，一个模板组件，一个脚本组件

 <script type="dagger/configs">
    {
      "card": "#template1",
      "script2": {
        "uri": "#script1",
        "anonymous": false
      }
    }
  </script>

脚本组件

<script id="script1" type="dagger/script">
  export const loading = () => ({
    width: 0,
    height: 0,
    mouseX: 0,
    mouseY: 0,
    mousePX: 0,
    mousePY: 0,
    mouseLeaveDelay: null
  });
  
  export const loaded = ($scope, $node) => {
    return Promise.resolve().then(() => {
      $scope.width = $node.offsetWidth;
      $scope.height = $node.offsetHeight;
    });
  };
  
  export const styleUpdater = (mousePX, mousePY, $scope) => {
    return {
      transform: `translateX(${$scope.mousePX * -40}px) translateY(${
        $scope.mousePY * -40
      }px)`,
      "background-image": `url(${$scope.dataImage})`
    };
  };
  
  export const handleMouseMove = ($scope, $event, $node) => {
    $scope.mouseX = $event.pageX - $node.offsetLeft - $scope.width / 2;
    $scope.mouseY = $event.pageY - $node.offsetTop - $scope.height / 2;
  };
  
  export const handleMouseEnter = ($scope) => {
    clearTimeout($scope.mouseLeaveDelay);
  };
  
  export const handleMouseLeave = ($scope) => {
    $scope.mouseLeaveDelay = setTimeout(() => {
      $scope.mouseX = 0;
      $scope.mouseY = 0;
    }, 1000);
  };

</script>

模板组件

<template id="template1">
  <html>
    <div class="card-wrap" +loading="$module.script2.loading()" +loaded="$module.script2.loaded($scope, $node)" $watch="mousePX = mouseX / width, mousePY = mouseY / height" +mousemove="$module.script2.handleMouseMove($scope, $event, $node)" +mouseenter="$module.script2.handleMouseEnter($scope)" +mouseleave="$module.script2.handleMouseLeave($scope)">
        <div class="card" $style="`transform: rotateY(${ mousePX * 30 }deg) rotateX(${ mousePY * -30 }deg)`">
        <div class="card-bg" $style="$module.script2.styleUpdater(mousePX, mousePY, $scope)"></div>
        <div class="card-info">
            <h1>${ $scope.h1 }</h1>
            <p>${ $scope.p }</p>
        </div>
        </div>
    </div>
 </html>
</template>

页面

  <div id="app" class="container">
    <card +loading="{ dataImage: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F6%2F57047aed2a0ab.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666532463&t=7d555ad830675e70107946e9b2aa497b', h1: '春', p: '胜日寻芳泗水滨，无边光景一时新。' }"></card>
    <card +loading="{ dataImage: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp378200693.jpg&refer=http%3A%2F%2Fimg2.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666532511&t=4d3b41dd7e33260f6ec15ccc5d650519', h1: '夏', p: '七八个星天外，两三点雨山前。' }"></card>
    <card +loading="{ dataImage: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F5f98d3ce1a123042bd9de40b3a4405f01380540a243bd-lkN4OX_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666532563&t=dc806cd0f1af89ee9f0dcd459dd91f1e', h1: '秋', p: '照他几许人肠断，玉兔银蟾远不知。' }"></card>
    <card +loading="{ dataImage: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F201601%2F15%2F20160115091052_wRkMa.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666532588&t=d4d7ab4b67da78e29be0c874301427ea', h1: '冬', p: '人烟寒橘柚，秋色老梧桐。' }"></card>
  </div>

总体来看，框架比较轻量级，上手比较快，适合超小型应用开发。

最简指令驱动前端框架 DaggerJS 初体验

猜你喜欢