月亮js简介

最新推荐文章于 2024-09-07 08:42:21 发布

郝ren

最新推荐文章于 2024-09-07 08:42:21 发布

阅读量390

点赞数

文章标签： python java

原文链接：https://blog.bitsrc.io/introduction-to-moon-js-c1526fcb543e

版权

Yet another JavaScript framework on the block. It seems like these frameworks are being churned out at an ever-increasing rate.

是该模块上的另一个JavaScript框架。这些框架似乎正在以越来越高的速度被淘汰。

The newest JavaScript framework I’ll be introducing in this post is — Moon.js.

我将在本文中介绍的最新JavaScript框架是Moon.js。

What we will learn

我们将学到什么

We will learn how to scaffold a Moon.js project, set up a basic project, Views, Data, input, and output events in Moon.js basically everything you will need to start with the new framework.

我们将学习如何搭建Moon.js项目，如何在Moon.js中设置基本项目，视图，数据，输入和输出事件，基本上，您将从新框架开始所需的一切。

Moon.js (Moon.js)

Moon.js is a minimalistic JavaScript library for building fast, functional UI. It has a relatively small file size which gives apps a small footprint, and blazingly fast performance.

Moon.js是用于构建快速，功能性UI的简约JavaScript库。它具有相对较小的文件大小，可为应用程序提供较小的占用空间，并具有超快的性能。

Moon.js embodies the component-driven design approach and uses templates to create components. It is quite similar to Vue.

Moon.js体现了组件驱动的设计方法，并使用模板来创建组件。它与Vue非常相似。

The minimal & fast library for functional user interfaces

功能用户界面的最小和快速库

Advantages of using Moon.js

使用Moon.js的优点

Moon.js has a small file size (2kb minified + gzip) more than the big guys React, Angular, etc.
Moon.js的文件大小(最小2kb + gzip)比大个子React，Angular等更大。
Moon.js has a blazingly fast view rendering performance.
Moon.js具有极快的视图渲染性能。
Moon.js is purely functional and has a driver-based design.
Moon.js纯粹是功能性的，具有基于驱动程序的设计。

Tip: Share your reusable components between projects using Bit (Github). Bit makes it simple to share, document, and organize independent components from any project.

提示：使用Bit ( Github )在项目之间共享可重用组件 。 Bit使共享，记录和组织来自任何项目的独立组件变得简单。

Use it to maximize code reuse, collaborate on independent components, and build apps that scale.

使用它可以最大程度地重复使用代码，在独立组件上进行协作以及构建可扩展的应用程序。

Bit supports Node, TypeScript, React, Vue, Angular, and more.

Bit支持Node，TypeScript，React，Vue，Angular等。

Image for post — Bit.dev Bit.dev上共享的可重用React组件

安装 (Installation)

Moon can be used directly from the browser or through NPM.

可以直接从浏览器或通过NPM使用Moon。

NPM (NPM)

To use Moon via NPM, we will install its CLI tool: moon-cli.

要通过NPM使用Moon，我们将安装其CLI工具： moon-cli 。

$ npm i moon-cli -g

moon-cli is installed globally in our system and can be used from any directory.

moon-cli已全局安装在我们的系统中，可以从任何目录使用。

To create a Moon project, we run the command below:

要创建Moon项目，我们运行以下命令：

$ moon create moon-prj

This will create a Moon project in moon-prj folder.

这将在moon-prj文件夹中创建一个Moon项目。

With this, you are ready to build your next billion-user app with Moonjs.

这样，您就可以使用Moonjs构建下一个拥有十亿用户的应用程序。

浏览器 (Browser)

We can also embed Moon in our browser in the script tag. Moon has a module moon-browser this enables us to use the Moon view language from the browser.

我们还可以在脚本标签的浏览器中嵌入Moon。 Moon有一个模块moon-browser这使我们能够使用moon-browser的Moon视图语言。

To enable the Moon browser usage, we have to add two script tags in our HTML.

要启用Moon浏览器，我们必须在HTML中添加两个脚本标签。

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

The scripts are from unpkg’s CDN. The first script tag imports the Moon main library and the second script imports the library Moon Browser, it is Moon view syntax compiler for the browser, it is what enables us to write Moon views in the browser.

脚本来自unpkg的CDN。第一个脚本标记导入Moon主库，第二个脚本导入库Moon Browser，它是浏览器的Moon视图语法编译器，这使我们能够在浏览器中编写Moon视图。

Now, when writing Moon view language in the browser, we must use the script tag for sure and add script type as "text/moon".

现在，在浏览器中编写月球视图语言时，必须确定使用script标记，并将脚本type添加为“ text / moon”。

<!-- As an external script -->
<script src="./main-script.js" type="text/moon"></script><!-- As an inline script -->
<script type="text/moon">
    ...
</script>

安装 (Mounting)

Just like other SPAs, a Moon app is mounted on a single element. We usually use the div element.

与其他SPA一样，Moon应用程序也安装在单个元素上。我们通常使用div元素。

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

The whole Moon application will be placed/mounted in the div#root element. This div#element is placed in an index.html which will be the default/index HTML page of the application.

整个Moon应用程序将被放置/安装在div＃root元素中。该div＃element放置在index.html中，它将是应用程序的默认/索引HTML页面。

To mount a Moon app on the div#root we use the view driver(don’t worry we will learn about drivers further down)

要在div＃root上安装Moon应用程序，我们使用视图驱动程序(不用担心，我们将进一步了解驱动程序)

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

This tells Moon to mount our app on the div#root node. We can use DOM APIs to reference the root node.

这告诉Moon将我们的应用程序安装在div＃root节点上。我们可以使用DOM API来引用根节点。

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

In the below sections we will learn about handling data and how to mount views in Moon.js

在以下各节中，我们将学习有关处理数据以及如何在Moon.js中安装视图的信息。

月球视图语言 (Moon View Language)

This is a DSL language just like JSX, that is used to create/compose views in Moon.

与JSX一样，这是一种DSL语言，用于在Moon中创建/组合视图。

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

See? It has an HTML-like syntax structure. It is the Moon View Language similar to JavaScript. This is not run like that, the Moon compiler compiles it to JavaScript before execution.

看到？它具有类似HTML的语法结构。它是类似于JavaScript的Moon View语言。它不是那样运行的，Moon编译器在执行之前将其编译为JavaScript。

数据 (Data)

Moon makes use of drivers for managing its views and data. In this section, we will look into data in the next we will look into the view driver.

Moon利用驱动程序来管理其视图和数据。在本节中，我们将在下一步中查看数据。

The data driver handles persistent state provides the data as an input to wherever it is needed. In other words, the data driver holds the global state of the app.

数据驱动程序处理持久状态，将数据作为输入到任何需要的地方。换句话说，数据驱动程序拥有应用程序的全局状态。

To set the initial data in moon app, we use the Moon.use API:

要在moon应用程序中设置初始数据，我们使用Moon.use API：

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

The data can be updated from functions by what they return.

可以通过函数返回的值来更新数据。

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

The Moon.run API is responsible for bootstrapping a Moon app.

Moon.run API负责引导Moon应用程序。

The callback function receives the global data in a data property. Since we have no data set it prints undefined.

回调函数在data属性中接收全局数据。由于我们没有数据集，因此无法打印。

See callback return an object with property data with value "Nnamdi". This returned object will be the new state and will be reflected in all functions using the data data.

请参阅回调，返回具有值为“ Nnamdi”的属性data的对象。返回的对象将是新状态，并将使用数据data反映在所有函数中。

So now we see that data is updated from returns in functions.

所以现在我们看到数据是根据函数的返回值更新的。

视图 (View)

The view driver in Moonjs provides a means of creating and mounting elements on the DOM.

Moonjs中的视图驱动程序提供了一种在DOM上创建和安装元素的方法。

As we have learned, the initial view is set using:

据了解，初始视图是使用以下命令设置的：

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

This is where the mounting begins. Now, functions in Moon can return views to replace the old one. This can be returned in an object set in a view property. Moonjs selects the value in the view property from the returned object and updates the view mounted at div#root accordingly.

这是安装开始的地方。现在，Moon中的函数可以返回视图以替换旧视图。这可以在view属性中设置的对象中返回。 Moonjs从返回的对象中选择view属性中的值，并相应地更新div＃root上安装的视图。

Moonjs uses virtual DOM and a powerful DOM diffing algorithm to know when and wherein the DOM needs updating.

Moonjs使用虚拟DOM和强大的DOM区分算法来了解DOM的更新时间和位置。

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

On mount, the callback function in Moon.run renders a button element on the DOM. This is done because it returns an object with a view property, the value of the view property is rendered on the DOM.

挂载时， Moon.run中的回调函数将在DOM上呈现一个按钮元素。这样做是因为它返回一个对象view属性的值view属性是基于DOM渲染。

See, the button has a click event to call handleClick function. See the function returns an empty object with no view property, this will not update the DOM view.

看到，按钮有一个click事件来调用handleClick函数。看到函数返回没有view属性的空对象，这将不会更新DOM视图。

创建元素 (Creating elements)

Moonjs provides a large set of utility functions to create nodes. Instead of using MVL, we can use elements function from the Moon module to create elements.

Moonjs提供了大量用于创建节点的实用程序功能。除了使用MVL，我们还可以使用Moon模块中的elements函数来创建元素。

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

Moon exports functions with the name of the element it creates as its name. div function creates a div element. text function creates a text node. node function creates a custom element. p function creates a paragraph element. Just as their elements name.

Moon导出功能时将其创建的元素名称作为其名称。 div函数创建一个div元素。 text函数创建一个文本节点。节点函数创建一个自定义元素。 p函数创建一个段落元素。就像它们的元素名称一样。

We can create a div node:

我们可以创建一个div节点：

const Div = div({});

We can assign attributes by passing them as an object to the functions.

我们可以通过将属性作为对象传递给函数来分配属性。

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

Our div element will be created with a class attribute set to "DivClass".

我们的div元素将使用class属性设置为“ DivClass”来创建。

We can create a text node.

我们可以创建一个文本节点。

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

The data property holds the text of the node.

data属性保存节点的文本。

We can create a custom element.

我们可以创建一个自定义元素。

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

We can assign an atribute to a custom element by doing this:

通过执行以下操作，我们可以为自定义元素分配属性：

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

大事记 (Events)

We can set events in Moonjs by using the @ symbol.

我们可以使用@符号在Moonjs中设置事件。

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

This sets a click event to our button Click Me!, now when clicked the handleClick function will be run.

这会将点击事件设置为我们的按钮“ Click Me! ，现在单击后将运行handleClick函数。

组件 (Components)

Functions are components in Moonjs. This means that functions can be rendered in the MVL as an element.

函数是Moonjs中的组件。这意味着功能可以在MVL中作为元素呈现。

Example:

例：

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

This function aView returns a view. So it can be rendered as an element.

此函数aView返回一个视图。因此可以将其呈现为元素。

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

The name of the function is used as an element in the MVL. This will make Moon render the HTML from aView function in between the div tags. On the DOM, it will look like this:

函数的名称用作MVL中的元素。这将使Moon通过div标签之间的aView函数呈现HTML。在DOM上，它将如下所示：

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

使用Moon.js构建应用 (Building an app with Moon.js)

To bring together what we have learned so far let’s build a small to-do app with Moonjs.

总结到目前为止所学的知识，让我们使用Moonjs构建一个小型的待办应用程序。

Note: We will use the To-Do app example from the Moonjs team to demonstrate what we have learnt.

注意：我们将使用Moonjs团队的To-Do应用示例演示我们学到的东西。

Mind you, when learning a new framework building small apps with the framework accelerates your learning and helps you grasp fast its fundamentals and in subsequent time its advanced features.

请注意，在学习新框架时，使用该框架构建小型应用程序可以加快学习速度，并帮助您快速掌握其基础知识以及随后的高级功能。

So we start by creating an index.html file. We will use the moon-browser setup.

因此，我们首先创建一个index.html文件。我们将使用月球浏览器设置。

<html><body><div id="root"></div>
</body><script src="https://unpkg.com/moon"></script>
<script src="https://unpkg.com/moon-browser"></script><!-- As an inline 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/>
        }
    }    <!-- Sets view and data drivers -->
    Moon.use({
        data: Moon.data.driver,
        view: Moon.view.driver("#root")
    })    <!-- Runs the app -->
    Moon.run(() => {
        data: [],
        view: <viewTodos data=[]>
    })
</script></html>

The viewTodos function renders the view for adding new todo and also for displaying a todo list. Its arguments take the data and view of the app.

viewTodos函数呈现用于添加新待办事项以及显示待办事项列表的视图。它的参数获取应用程序的数据和视图。

The createTodo function creates a new todo and returns the new todo in the data property.

createTodo函数创建一个新的待办事项，并在data属性中返回新的待办事项。

The updateTodo function sets the new todo in the global data and returns the global data.

updateTodo函数在全局数据中设置新的待办事项并返回全局数据。

See, the event handlers @click and @input in the viewTodos function. The @input event is fired whenever a new todo is typed on the input element and the event fires the updateTodo function, the view arg in the updateTodo function is the event fired and there we access the target DOM and retrieves the value of the input, then set it in the global data in the todo property.

请参阅viewTodos函数中的事件处理程序@click和@input。每当在输入元素上键入新的待办事项时，就会触发@input事件，并且该事件会触发updateTodo函数，updateTodo函数中的view arg被触发，然后我们访问目标DOM并检索输入值，然后在todo属性的全局数据中进行设置。

The @click is fired when the button is clicked. This will commit the new todo to the list of todos. The createTodo is called for this. The createTodo accessed the todo property in the global data and sets it in the todos property in the global data and returns it with the view property set to viewTodos passing in the new todo list in its data attribute.

单击按钮时将触发@click。这会将新的待办事项提交到待办事项列表中。为此需要调用createTodo。 createTodo访问了全局数据中的todo属性，并在全局数据中的todos属性中对其进行了设置， viewTodos将其view属性设置为viewTodos并将其返回，并在其data属性中传递了新的todo列表。

This will make viewTodos re-render and update the DOM with the newest todo.

这将使viewTodos重新渲染并使用最新的待办事项更新DOM。

Run the app in your browser and see Moonjs in action!

在您的浏览器中运行该应用程序，然后查看运行中的Moonjs！

结论 (Conclusion)

We covered the very basics of Moonjs. We started from its setup either from NPM or direct in the browser. Next, we learned its mechanics, how it passes data around, how events are registered, and how to build components with MVL.

我们介绍了Moonjs的基础知识。我们从NPM或直接在浏览器中进行设置。接下来，我们了解了它的机制，如何传递数据，如何注册事件以及如何使用MVL构建组件。

Moonjs is fun to build with and I like it because of its small file size.

Moonjs的构建很有趣，我喜欢它，因为它的文件很小。

If you have any questions regarding this or anything I should add, correct or remove, feel free to comment, email, or DM me.

如果您对此有任何疑问或我应添加，更正或删除的任何内容，请随时发表评论，发送电子邮件或给我DM。

Thanks !!!

谢谢！！！