npm 包 mithril-map-router 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

mithril-map-router 是一款为 mithril.js 打造的路由插件，借助于该插件，开发者可以快速编写单页面应用程序。本篇文章将详细介绍 mithril-map-router 的使用方法，以及展示一个简单而完整的项目 Demo。

安装

使用 npm 安装 mithril-map-router：

--- ------- ------- ------------------ ------

基本使用方法

在使用 mithril-map-router 之前，需要先简单了解一下 mithril.js 的框架结构。基本的框架结构如下：

--- --- - -
    ----- ---------- -
        ------ -------- -
            ------- ------ ---------
            ------ ------ -------- --------- -------------- --------
            ------ ------ --------- --------- -------------- ---------
            ------ ------ ----------- --------- -------------- -----------
            -------- ----------------------
        --
    -
-

---------------------- ---- -
    ---- ----
    -------- -----
    --------- ------
    ----------- -------
--

在上述代码中，我们定义了一个简单的页面，其中包含一个标题以及三个链接，分别用来跳转到不同的子页面。在路由部分，我们使用了 mithril.js 自带的路由机制，并定义了四个不同的路由规则，分别对应了 App、Home、About、Contact 四个页面的渲染逻辑。

在 mithril-map-router 中，我们可以直接使用 JavaScript 对象来定义路由：

------ --- ---- ----------
------ - -- ------ ---- ---------------------

----- --- - -
    ----- -- -- -
        ------ -------- -
            ------- ------ ---------
            ------ ------ ---------------------- --------
            ------ ------ ----------------------- ---------
            ------ ------ ------------------------- -----------
            -------- ---------------------
        --
    -
-

----- ---- - -
    ----- -- -- -
        ------ -------- -
            ------- --------
            ------ ------ --------------------- ------- -- -----
        --
    -
-

----- ----- - -
    ----- -- -- -
        ------ -------- -
            ------- ---------
            ------ ------ --------------------- ------- -- -----
        --
    -
-

----- ------- - -
    ----- -- -- -
        ------ -------- -
            ------- -----------
            ------ ------ --------------------- ------- -- -----
        --
    -
-

------------------- - -
    ----- -----
    ------ ------
    -------- --------
    --- ---
--

---------------------- --- ---------------------

在 mithril-map-router 中，我们首先需要导入路由模块并定义一个名为 routingTable 的 JavaScript 对象，该对象中包含了所有的路由规则。每个路由规则都是一个 JavaScript 对象，包含了页面的名字和页面的渲染逻辑（也就是 view 函数）。在路由规则对象中，主要包含以下属性：

  • name: 路由规则的名字，将会被用来生成路由 URL。
  • controller: 路由规则对应的 controller。
  • component: 路由规则对应的组件。
  • parent: 路由规则的父级路由规则，可以用来构建嵌套路由。

在 App 组件中，我们使用了 router.toUrl() 方法来根据路由规则的名字生成相应的 URL。同时，在链接中我们也没有再使用 mithril.js 自带的路由机制，而是直接使用了普通的 href 属性，并将指向对应的路由规则。

最后，在启动 mithril.js 的路由机制之前，我们需要将 routingTable 对象传递给 mappingTable，并调用 m.route() 方法来启用路由。

嵌套路由和参数传递

在 mithril-map-router 中，我们还可以实现类似嵌套路由和参数传递的复杂路由场景。举个例子，我们可以使用以下的代码来实现类似这样的嵌套路由：

------ --- ---- ----------
------ - -- ------ ---- ---------------------

----- --- - -
    ----- -- -- -
        ------ -------- -
            ------- ------ ---------
            ------ ------ ---------------------- --------
            ------ ------ ----------------------- ---------
            ------ ------ ------------------------- -----------
            -------- ----------------------
            -------- ----------------------
        --
    -
-

----- ----- - -
    ----- -- -- -
        ------ -------- -
            ------- ---------
            ------ ------ --------------------- ------- -- -----
        --
    -
-

----- ---- - -
    ----- -- -- -
        ------ -------- -
            ------- --------
            ------ ------ --------------------- ------- -- ------
            ------ ------ -------------------------- ------ ------- ------ ------------ ------ ----
            ------ ------ -------------------------- ------ ------- ------ ------------ ------ ---
        --
    -
-

----- ----- - -
    ----- -- -- -
        ------ -------- -
            ------- ---------
            ------ ------ --------------------- ------- -- ------
            ------ ------ -------------------------- ------ -------- ------ ------------ ------ ----
            ------ ------ -------------------------- ------ -------- ------ ------------ ------ ---
        --
    -
-

----- ------- - -
    ----- -- -- -
        ------ -------- -
            ------- -----------
            ------ ------ --------------------- ------- -- ------
            ------ ------ -------------------------- ------ ---------- ------ ------------ ------ ----
            ------ ------ -------------------------- ------ ---------- ------ ------------ ------ ---
        --
    -
-

------------------- - -
    ---- -
        --------- ---
        ---------- ----
        --------- -
            ----- -
                --------- ------
                ---------- ----
            --
            ------ -
                --------- ------
                ---------- -----
            --
            -------- -
                --------- ------
                ---------- -------
            --
            ------- -
                --------- ------
                --------- -
                    ----- -
                        --------- ---------
                        --------- -
                            ------ -
                                --------- -------
                                ---------- -----
                            -
                        -
                    -
                -
            -
        -
    -
--

---------------------- --- ---------------------

在这个例子中，我们需要使用到嵌套路由和路由参数传递两个功能。首先，我们在 Home、About、Contact 三个组件中分别添加了两个链接，分别跳转到相应的主题页面，传递了 page 和 topic 两个参数。我们可以通过路由参数的获取方法 router.param() 来获取到当前页面 URL 中的参数值。

同时，在路由规则的定义中我们还定义了一个嵌套路由规则 app.topics.page.topic，它代表了在应用程序页面之下嵌套了两个参数：page 和 topic，用来控制页面渲染逻辑。在上述代码中，我们使用了 parental 属性来定义了这些路由规则的嵌套层次关系。

示例项目

为了更好地演示 mithril-map-router 的使用，我们可以使用以下的代码来实现一个具有嵌套路由和参数传递的简单 Demo：

------ --- ---- ----------
------ - -- ------ ---- ---------------------

----- ----- - -
    ----- -- -- -
        ------ -------- -
            ------- -------- -- -- --------
            ------- -
                ------- ------ ------ ---------------------- ---------
                ------- ------ ------ ----------------------- ----------
                ------- ------ ------ ---------------------- ---------
                ------- ------ ------ ----------------------------------------- ------- -------
            ---
            -------- ---------------------
        --
    -
-

----- ---- - -
    ----- -- -- -
        ------ -------- -
            ------- --------
            ------ ------ --------------------- ------- -- ------
            ------ ------ -------------------------- ------ ------- ------ ------------ ------ ----
            ------ ------ -------------------------- ------ ------- ------ ------------ ------ ---
        --
    -
-

----- ----- - -
    ----- -- -- -
        ------ -------- -
            ------- ---------
            ------ ------ --------------------- ------- -- ------
            ------ ------ -------------------------- ------ -------- ------ ------------ ------ ----
            ------ ------ -------------------------- ------ -------- ------ ------------ ------ ---
        --
    -
-

----- ------- - -
    ------- ------- -- -
        ------------------- - -----
        ------------------------------------------------------------ -- -
            ------------------- - ---------
            ------------------- - ------
        --
    --
    ----- ------- -- -
        -- --------------------- -
            ------ -------- ------- ----------
        -

        ------ -------- -
            ------- ---------------------------
            ------ -----------------------------
            ------ ------ ---------------------- ------- -- ------
        --
    -
-

----- ---- - -
    ------- ------- -- -
        ------------------- - -----
        -------------------- - ---

        ----------------------------------------------- -- -
            -------------------- - ---------
            ------------------- - ------
        ---
    --
    ----- ------- -- -
        -- --------------------- -
            ------ -------- ------- ----------
        -

        ------ -------- -
            ------- --------
            ------- ---------------------------------- -- -
                ------ ------- -
                    ------ ------ ---------------------------- ------ -------------- --------------
                --
            ----
            ------ ------ --------------------- ------- -- -----
        --
    -
-

------------------- - -
    ---- -
        --------- ---
        ---------- ------
        --------- -
            ----- -
                --------- ------
                ---------- ----
            --
            ------ -
                --------- ------
                ---------- -----
            --
            ----- -
                --------- ------
                ---------- -----
                --------- -
                    -------- -
                        --------- -------
                        ---------- -------
                    -
                -
            -
        -
    -
--

----- ----- -
    ------------------- -
        ----------- - -------
    -

    ------------- -
        ------ ------------------ ------ ---- ----------------------------
    -

    -------------- -
        ------ ------------------ ------ ---- ----------------------------------
    -
-

----- ----- - --- ----------------------------------------------
------------------- - ---------------------------

--------------------------------------- --- ---------------------

在这个 Demo 中，我们实现了一个具有简单的 Blog 功能的应用程序。在应用程序中，我们使用了从 jsonplaceholder.typicode.com 上获取的假数据来呈现一个具有有嵌套路由和参数传递的 Blog。

通过本篇文章，我相信你已经详细了解了 mithril.js 以及 mithril-map-router 的使用方法和规范，并且有一定的指导意义。希望它能够帮助你更好地开发 Web 应用程序。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066f4a1d8e776d080412b1

阅读全文

猜你喜欢

  • npm 包 object-templator 使用教程

    前言 在前端开发中，我们经常会遇到需要生成一些复杂对象的情况。如果每个对象都手写，既费时间又易错，更何况在修改数据结构时，还需要对每一个对象进行修改。 为了解决这个问题，npm 包 object-te...

    4 年前
  • npm 包 object-throttle-skip 使用教程

    前言 在 Web 开发中，有时候需要对一些频繁的事件进行限制，比如滚动事件、窗口大小变化事件等等。如果没有进行限制，这些事件可能会被频繁触发，导致性能下降。 为了解决这个问题，可以使用节流（throt...

    4 年前
  • npm 包 object-tie 使用教程

    当我们在进行前端开发的时候，我们会用到许多各式各样的 npm 包，这些包能够减少我们编写的代码量，提高我们的效率，让我们能够更加专注于业务逻辑的实现。其中，object-tie 就是一款非常实用的 n...

    4 年前
  • npm 包 observ-change 使用教程

    前言 前端开发中，经常需要对数据进行监听和响应。而 npm 包 observ-change 就是一款帮助前端开发者监听 JavaScript 对象变化的工具，使用简单，效果卓越。

    4 年前
  • npm包observ-clamp使用教程

    简介 observ-clamp是一个npm包，它提供了一种对于Observable对象进行限制的方式，能够在进行赋值操作时对值进行限制。 该包的主要作用是为一些复杂的数据操作提供方便的限制功能，例如：...

    4 年前
  • npm 包 observ-conference 使用教程

    前言 随着 Web 技术的日新月异，前端开发的工具也越来越多。在这些工具中，npm 包是不可或缺的一环。npm 包提供了许多实用工具，使得前端开发变得更加高效、便利。

    4 年前
  • Doctrine 中 fetch="EAGER" 和 fetch="LAZY" 的区别是什么？

    在 Doctrine 中，fetch 属性用于指定关系的加载方式。具体而言，fetch 属性可以设置为 "EAGER" 或 "LAZY"。 EAGER 加载 当 fetch 属性设置为 "EAGER"...

    4 年前
  • npm 包 observ-confined 使用教程

    简介 在前端开发中，只要是在浏览器中执行的代码，都会面临安全问题。而严格限制了代码的权限通常又会对一些开发场景造成问题。因此，我们需要一种方便的方式来实现安全且充分利用资源的代码执行方式。

    4 年前
  • npm 包 observ-default 使用教程

    简介 observ-default 是一个 npm 包，它提供了一种简单的方式来创建具有默认值的 observ 对象，同时还提供了与 React 的无缝集成。observ-default 支持使用 J...

    4 年前
  • npm 包 observ-delegate 使用教程

    observ-delegate 是一个 Node.js 监听工具，它支持在观察到对象属性值的变化时，自动执行回调。如果你正在开发 Node.js 项目，并且需要监听对象的变化，那么 observ-de...

    4 年前
  • npm 包 observ-emitter 使用教程

    什么是 npm 包 observ-emitter？ observ-emitter 是一个 npm 包，它是基于 EventEmitter 的一个增强版本。它将 EventEmitter 的基本事件监听...

    4 年前
  • npm 包 observ-enum 使用教程

    observ-enum 是一个基于 observ 数据流的枚举类型库，它可以让我们更加轻松地定义和处理枚举类型。本文将详细介绍 observ-enum 的使用方法和示例。

    4 年前
  • npm 包 observ-every 使用教程

    observ-every 是一个便于前端开发中数据监视的 npm 包，可以用于监视各种 JavaScript 数据，包括字符串、数字、对象和函数等。本文将详细介绍 observ-every 的使用方法...

    4 年前
  • npm 包 o3 的使用教程

    前言 在前端开发中，我们常常需要处理三维模型或者对三维场景进行操作。o3 是一个基于 Three.js 的轻量级三维引擎，可以帮助我们更加轻松地完成这些操作，具有一定的指导意义。

    4 年前
  • npm 包 o3-panther-web 使用教程

    o3-panther-web 是一个基于 Three.js 编写的 3D 模型展示工具，可用于展示各种 3D 模型。这个 npm 包非常易于使用，而且功能强大。在这篇文章中，我们将提供详细的 o3-p...

    4 年前
  • npm 包 o3-panther-cli 使用教程

    前言 随着前端技术的不断更新和发展，npm 包已经成为了前端开发者必不可少的一部分，通过 npm 包，我们可以方便地引用他人所开发的组件、插件、框架等等，大大节省了我们的开发时间。

    4 年前
  • npm 包 obj-trans 使用教程

    在前端开发中，我们经常需要进行对象的转换和处理。obj-trans 是一个 NPM 包，可以帮助我们快速完成不同类型的对象转换，该包支持多种规则和扩展。 在本篇教程中，我们将介绍 obj-trans ...

    4 年前
  • npm 包 obj-transform 使用教程

    前言 在前端开发中，使用 JavaScript 对对象进行操作是非常常见的。但是，在处理较为复杂的对象时，手动进行操作会非常费时间，甚至会出现疏漏，因此需要一些工具来帮助处理这些对象。

    4 年前
  • npm 包 obj-transmute 使用教程

    什么是 obj-transmute？ obj-transmute 是一个用于在 JavaScript 对象之间进行转换的 npm 包，它可以帮助前端开发者更容易地进行数据格式转换，尤其是在处理 api...

    4 年前
  • npm 包 obj-type 使用教程

    随着前端技术的发展，npm（Node Package Manager）成为了前端开发中不可或缺的工具。在这篇文章中，我们将会介绍一个 npm 包 obj-type，以及它的使用教程。

    4 年前

相关推荐

    暂无文章