dagger.js：从零开始

前情提要：dagger.js：可能是我见过的最简单易用的前端框架了

大家好，我是Tony。从本篇开始，我们逐步详细介绍如何使用dagger.js进行前端项目开发。

再次说明一下，dagger.js使用模块声明+描述式指令表达式进行工作，它直接运行在浏览器js运行时当中，无需编译过程。这意味着你无需预装任何构建工具或者包管理工具（包括但不限于node/npm/webpack/vite/babel...），当然也无需具备相关先验知识，就可以直接使用dagger.js上手开发web应用。

下面让我们打开代码编辑器，从零开始编写第一个dagger.js应用程序。

只需要创建一个空白的html页面，在head标签中引入dagger.js脚本：

<script type="module" crossorigin="anonymous" src="https://assets.codepen.io/5782383/dagger-1.0.0-RC.js" defer></script>

一个最基本的dagger.js应用就创建完成了。

接下来让我们添加几个基本指令，感受下dagger.js的工作方式。

在页面body标签中添加以下代码：

<div id="host" +load="{
  text: 'Hello dagger!',
  number: 1
}">
  <button id="btn" +click="alert($scope.number)">${ $scope.text }</button>
</div>

刷新浏览器，页面中将出现一个文本内容为“Hello dagger!”的按钮，点击按钮弹出alert弹窗，内容为数字1。

这个示例展示了dagger.js的生命周期指令+load和事件指令+click的基本用法：当div#host元素上声明的+load指令表达式返回值是一个有效对象时，相当于在以这个元素为根的作用域上创建了一个包含text字段的$scope对象，这个$scope对象可以在div#host元素和它子节点上的指令表达式中访问。当点击button#btn元素时触发事件指令+click指令表达式执行，弹出text的值。

你可以任意修改上面例子里+load或者+click指令表达式，验证结果是否符合预期。

与其他基于指令的框架（例如AngularJS和Vue.js）不同，在dagger.js应用程序中，并不存在组件（Component）实例的概念，指令的内容是一个上下文无关的普通js表达式，其执行结果由当前的作用域变量（$scope）所决定。

为便于理解，我们将上面的例子改写成如下等价的javaScript代码：

// 使用立即执行函数创建封闭作用域
(() => {
    const $scope = { // +load指令
        text: 'Hello dagger!',
        number: 1
    };
    const button = document.querySelector('#btn');
    button.innerText = $scope.text; // 原地表达式${ $scope.text }
    button.addEventListener('click', () => { // +click事件指令
        alert($scope.number);
    });
})();

一句话总结本文知识点：+load指令可以创建作用域变量$scope，$scope在宿主节点和其子节点上的任意指令表达式中都可以使用。

在后续的章节里，我们将看到更多dagger.js指令的用法。

如果对dagger.js感兴趣的话，请您点赞收藏、分享本系列文章，也欢迎评论或者私信作者提出问题和建议。您的关注是对我最大的支持和鼓励。感谢您的阅读，祝工作学习顺利！

本文示例地址

注：本教程中的示例代码使用即将release的dagger-1.0.0-RC分支版本语法编写，与官网文档略有不同。

 下集预告：dagger.js：近水楼台先得月（作用域嵌套）