The simplest command-driven front-end framework DaggerJS first experience

I have been looking for an ultra-lightweight front-end framework, and today I discovered the DaggerJS framework.

As the DaggerJS official said: DaggerJs is a directive-driven development framework (DDD), and directives are the only entry point for user code execution. If the page is regarded as a car, then dagger.js is equivalent to the engine of the vehicle, and the instructions are the transmission gears all over the chassis of the car.

After looking at the official documents, I found that the introduction of the official website of component implementation is not very clear, so I have today’s notes, and realized the development of single-page components. The effect is as follows:
insert image description here

Experience entrance

Development steps:

Installation: Just reference the package, no need to compile.

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

Configuration:
Two components are configured here, a template component and a script component

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

script component

<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 component

<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>

page

  <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>

Overall, the framework is relatively lightweight and quick to learn, suitable for ultra-small application development.

The simplest command-driven front-end framework DaggerJS first experience

Guess you like