👃🏿 🔟 🏈 Moon.js入门 🐼 😆 🥥

今天，我们将讨论下一个用于开发接口的JavaScript库。感觉这种库越来越频繁地出现。在本文中，我们将研究Moon.js库，并揭示您需要了解的功能才能开始使用它。特别是，我们将讨论如何创建新的Moon.js项目，如何创建界面元素，如何处理事件。通过本教程，您应该能够使用Moon.js开发自己的应用程序。

Moon.js库

Moon.js是用于开发快速功能界面的简约JavaScript库。它的大小相对较小，因此可以在其基础上创建相当紧凑的应用程序。该库具有很高的性能

。Moon.js使用基于组件的方法进行界面设计。模板用于创建组件。该库与Vue.js非常相似。

Moon.js的优势

Moon.js的大小紧凑（压缩后的大小约为2 KB）。这小于其他库和框架（如React和Angular）的大小。
该库以其高速渲染接口而著称。
Moon.js是基于功能开发技术的库。在使用它时，将基于所谓的“驱动程序”使用一种界面设计方法。

开始工作

Moon.js库可以通过两种方式包含在项目中。首先是从NPM安装它。第二个是将其直接连接到计划使用该页面的页面。

如果决定使用该库的NPM版本，则首先需要安装package moon-cli，命令行工具：

$ npm i moon-cli -g

在此示例中，此工具已全局安装，您可以从任何目录调用它。

要基于Moon.js创建一个项目，可以运行以下命令：

$ moon create moon-prj

此命令在文件夹中创建一个新项目moon-prj。项目创建完成后，您将可以使用将来的应用程序。

使用Moon.js的第二个选项涉及将其连接到您打算使用它的页面。该库具有一个模块moon-browser，可让您直接在其连接的页面上使用其功能。

因此，要将库连接到页面，我们需要在页面中包括以下两个标签：

<script src="https://unpkg.com/moon"></script>
<script src="https://unpkg.com/moon-browser"></script>

如您所见，相应的脚本是从unpkg CDN加载的。第一个标签导入主库。第二个是图书馆moon-browser。她负责编译Moon.js模板，使它们看起来适合浏览器显示。

现在，为了在页面上使用Moon.js语法，您需要将它们包括在标记中<script>，不要忘记将其属性设置type为text/moon。

<!--      -->
<script src="./main-script.js" type="text/moon"></script>
<!--    ,    -->
<script type="text/moon">
    ...
</script>

将Moon.js应用程序连接到页面

与用于创建单页应用程序的其他库和框架一样，Moon.js连接到特定的页面元素。通常，元素扮演Moon.js应用程序的容器的角色<div>：

<div id="root"></div>

类似的元素（即Moon.js应用程序的根元素）放置在index.html作为项目入口点的文件的代码中。

驱动程序用于将Moon.js应用程序连接到此元素view（下面我们将更详细地讨论驱动程序）：

Moon.use({
    view: Moon.view.driver("#root")
})

该结构告诉库它应将应用程序连接到具有标识符的元素root。如有必要，可以使用设计用于DOM的浏览器API指定与库相似的元素：

Moon.use({
    view: Moon.view.driver(document.getElementById("root"))
})

现在让我们讨论如何在Moon.js中组织数据操作以及如何使用该库创建界面元素。

描述界面元素的语法

为了描述Moon.js接口，使用了专门为解决此问题而开发的Moon View语言（MVL）编程语言。它类似于JSX。该语言用于描述元素并自定义它们之间的关系。这是一个例子：

<script type="text/moon">
    function aView(data) {
        return (
            <div>Hi from Moon</div>
        )
    }
</script>

显而易见，负责元素形成的Moon.js<div>使用类似于HTML的语法结构。但是这些结构在JavaScript代码中使用。浏览器将无法执行此类JavaScript代码，但这不是必需的，因为Moon.js将此类构造编译为普通JavaScript。

处理数据

Moon.js使用驱动程序的概念来控制元素的可视化表示并处理数据。在这里，我们将看一下允许我们处理数据的驱动程序，在下一节中，我们将讨论用于处理界面元素的驱动程序。

数据驱动程序负责存储应用程序数据，并允许在需要的地方使用数据。换句话说，此驱动程序存储应用程序的全局状态。

您可以使用API为Moon.js应用程序设置初始数据Moon.use：

Moon.use({
    data: Moon.data.driver
})

您可以通过从相应的函数返回状态来将新数据写入状态：

Moon.run(({ data }) => {
    console.log(data) // undefined
    return {
        data: "Nnamdi"
    }
})

APIMoon.run负责启动应用程序。传递给此API的回调将收到对全局数据的引用作为参数data。由于在调用此函数时尚data无任何内容，因此console.log将输出此示例中的命令undefined。

我们从回调中返回一个对象，该对象的属性data值为value Nnamdi。该对象将代表应用程序的新状态，其数据可以由调用的任何其他函数使用data。

我们已经研究了Moon.js中处理数据的机制。现在，让我们更详细地讨论使用界面元素。

使用界面元素

Moon.js具有view用于创建元素并将其安装在DOM中的驱动程序。

我们已经检查了下面重复的代码片段，其中<div>基本的Moon.js元素已连接到该元素：

Moon.use({
    view: Moon.view.driver("#root")
})

这是安装元件的地方。函数现在可以返回能够替换旧元素的元素。它们可以以对象的形式表示，该对象包含view在其中写入相应数据的属性。该库view从函数返回的对象中获取属性值，并将其写入具有标识符的元素所连接的元素root。

Moon.js使用虚拟DOM的概念和强大的算法来比较新旧接口版本。这将使库可以决定何时更新DOM以及DOM的哪些部分需要更新。

function handleClick() {
    return {};
}
Moon.run(() => ({
    view: <button @click=handleClick>Click Me!</button>
}));

这里传递的回调Moon.run将按钮输出到DOM。发生这种情况的原因是该函数返回带有属性的对象view。分配给该属性的值进入DOM。

该按钮具有事件处理程序click，由函数表示handleClick。此函数返回一个空对象，调用它不会更改DOM。

创建元素

Moon.js为开发人员提供了大量用于创建界面元素的辅助函数。结果，事实证明不是可以使用Moon.js接口描述语言而是使用相应的函数创建元素的：

const { div, text, node, p } = Moon.view.m

Moon.js导出名称与其创建的元素名称匹配的函数。因此，该功能div允许您创建项目<div>。该函数text创建文本节点。该功能node允许您创建自定义元素。该函数p创建元素<p>。如您所见，这些函数的名称清楚地表明了它们的用途。

让我们创建一个元素<div>：

const Div = div({});

您可以通过将具有属性的对象传递给相应的函数来为元素分配属性：

const Div = div({
    class: "DivClass"
});

在这里，我们描述了元素<div>，应该在属性中class写入值DivClass。

以下是创建文本元素的方法：

const Text = text({ data: "A text node" });

data传递给函数的对象的属性text包含元素的文本。

让我们创建一个自定义元素：

const CustomEl = node("custom-el");

为了将任何属性分配给此元素，您可以执行以下操作：

CustomEl({ "attr": "attr-value"})

事态发展

您可以使用使用符号的构造将事件处理程序附加到元素@：

function handleClick() {
    return {};
}
Moon.run(() => ({
    view: <button @click=handleClick>Click Me!</button>
}));

结果，带有文本的按钮将显示在页面上Click Me，通过单击该按钮将调用该函数handleClick。

组件

在Moon.js中，函数是组件。这意味着可以在接口元素的描述中提及功能。函数返回的内容将包含在元素中。

假设我们有一个像这样的函数：

function aView({ data }) {
    return <div>A View</div>
}

此函数aView返回可以呈现的元素：

Moon.run(() => {
    view: <div><aView /></div>
})

在此示例中，函数名称用作元素名称。执行该代码的结果是，该函数返回的内容将放置在tag中<div>。当所有这些都在DOM中时，将有如下标记：

<div>
    <div>A View</div>
</div>

基于Moon.js的应用程序开发

为了汇总我们刚才讨论的所有内容，让我们在Moon.js中创建一个简单的TODO应用程序。在这里，我们将使用由Moon.js开发人员准备的相应示例。

我想提醒您，建议您在掌握新库和框架的同时，借助它们的帮助来创建小型应用程序。这样可以加快学习速度，并帮助您了解所研究工具的功能。首先，我们在谈论它们的基础，但是随着时间的流逝，对更复杂机制的理解就来了。

这是此应用程序页面的外观。

应用程序

页面该页面具有标题，字段，按钮和待办事项，可以通过在字段中输入其描述并单击按钮来进行更新。

让我们从创建一个文件开始index.html。在这里，我们将Moon.js直接连接到页面：

<html>
<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/moon"></script>
<script src="https://unpkg.com/moon-browser"></script>
<!--  ,    -->
<script type="text/moon">
    function viewTodos({data, view}) {
        return (
            <div>
                <input type="text" value=data.todo @input=updateTodo/>
                <button @click=createTodo>Create</button>
                <ul children=(data.todos.map(todo =>
                    <li>{todo}</li>
                ))/>
            </div>
        )
    }
    function updateTodo({ data, view }) {
        const dataNew = { ...data, todo: view.target.value };
        return {
            data: dataNew,
            view: <viewTodos data=dataNew/>
        }
    }
    function createTodo({ data }) {
        const dataNew = {
            todo: "",
            todos: [...data.todos, data.todo]
        };
        return {
            data: dataNew,
            view: <viewTodos data=dataNew/>
        }
    }
    <!--   data  view -->
    Moon.use({
        data: Moon.data.driver,
        view: Moon.view.driver("#root")
    })
    <!--   -->
    Moon.run(() => {
        data: [],
        view: <viewTodos data=[]>
    })
</script>
</html>

该功能viewTodos显示输入有关新案件的信息并将其显示在列表中所需的项目。其参数为data和view。

该函数createTodo创建一个新的case，并在data它返回的对象的属性中返回它。

该函数updateTodo将新情况写入应用程序状态。

要注意的事件处理程序@click，并@input是在函数viewTodos。@input当您在适当的字段中输入描述案例的文本时，将调用该事件。处理此事件后，将调用一个函数updateTodo。论据view此函数中的代表发生的事件。使用它，我们访问DOM并获取在字段中输入的数据。然后，此数据作为属性进入状态todo。单击按钮后将调用

该事件@click。它记录了一个新的待办事项清单。该函数用于解决此问题createTodo。此函数访问state属性todo并将新数据写入该属性todos，然后，在view返回给它的对象的属性中，它返回<viewTodos>由相应函数表示的元素，并在该属性中data写入值dataNew。

这将重新渲染viewTodos并更新DOM。新案例将添加到页面上显示的待办事项列表中。

在浏览器中运行该应用并进行试验。

结果

我们已经介绍了Moon.js的基础知识。即，我们谈到了可以通过从NPM安装该库并将其直接连接到页面来使用该库的事实。接下来，我们讨论了库的内部机制：处理数据，处理事件，开发组件。

Moon.js似乎是一个不错的库。而且，即使不谈论它的其他优点，我也喜欢它，因为它的体积小巧。

您使用过Moon.js吗？

Moon.js入门