快速的用户界面--用VanillaJS和Web组件构建一个待办事项应用程序教程

·  阅读 456

快速用户界面--用VanillaJS和Web组件构建一个待办事项应用程序

来看看微软对Web组件的赌注是什么样子的吧

照片:Jo Coenen - Studio Dries 2.6onUnsplash

Fast是一个由微软设计和维护的组件库。事实上,虽然你肯定可以把Fast作为一个组件库来使用,但你可以用它做的事情远远不止这些。

按照它的设计方式,Fast允许你用它建立一个完整的设计系统,如果这是你想要的。但是,让我们先别着急,让我们更详细地了解一下Fast UI库,以及你如何使用它来建立你自己的应用程序。

什么是Fast UI?

FastUI是一个基于网络组件的库。意思是说,从现在开始我们要看的一切,都将是基于网络组件的。微软建立Fast的目的是希望给开发者提供所需的构件,以利用网络的新兴标准:网络组件标准

使用Fast,你有3个选择:

  • 你可以简单地采用所提供的组件集并使用它们来创建你的应用程序。这就是我们今天要做的事情,BTW。
  • 你可以创建你自己的组件,扩展库中提供的组件。如果所提供的组件还不够,那么你可以根据自己的需要对它们进行定制。
  • 如果你对前面两个选项不满意,你甚至可以用Fast和它提供的基础元素创建你的整个设计系统。

它的美妙之处在于,你并不真的需要一个框架来使用它,事实上,今天我将向你展示如何用vanilla JS和Fast创建To-Do应用程序,而不需要其他任何东西。

也就是说,他们确实为你提供了如何在几乎所有主要框架中使用Fast的说明(在这里查看他们的文档)。

请记住,Fast为你提供了一种抽象化组件的方法,其他方面,如业务逻辑,完全取决于你。这意味着Fast UI不是React或Vue甚至Next的替代品,它只是你可以用来在屏幕上呈现结果的另一个工具。

用VanillaJS构建一个待办事项应用程序

为了证明我的观点,我将向你展示你如何使用Fast,只用VanillaJS。你可以通过克隆这个 repo 来查看整个代码。

说完了这些,下面是我们要做的:Fast To-Do

这就是我们得到的东西:

  1. 一个输入字段,用于输入新任务
  2. 我们可以展开的手风琴元素,以完成每个任务
  3. 完成后,任务会显示我们关闭任务所花的时间。
  4. 而且,一旦关闭,我们还可以重新启动一个任务。

我想把重点放在这个应用程序的前端方面,所以待办事项列表的内容不会被保存,但我相信你可以找到一种方法,在你的用户界面准备好后用外部API来存储它。

这意味着我们将有3个主要组件需要处理:

  1. 输入栏
  2. 待办事项的风琴式列表。
  3. 计时器。这个元素只有在待办事项被关闭后才会显示。

创建你自己的组件

ToDo List组件将由其他基于快速的组件组成。要创建自己的组件,你需要做的第一件事是导出一个扩展了FastElement类的类。这个类将负责所有设置网络组件所需的模板。

而在这个类里面,我们将添加所需的业务逻辑方法。 请注意,这种语法是必须的,因为我使用的是VanillaJS,如果你使用的是TypeScript,你就可以利用符号的优势。

也就是说,下面的部分是最相关的:

  1. 静态定义属性包含一个描述该组件的配置对象。名称属性将定义你在HTML里面使用的标签。模板将告诉组件从哪里获得HTML内容,与样式属性相同。最后,属性数组将包含该元素的属性,你可以使用setAttribute和getAttribute方法来设置和获取它们。
  2. todos数组将包含ToDo对象的列表(稍后会详细介绍),_taskIds将包含相同的列表,但只包含对象的id。这并不理想,但正如我们将要看到的,为了保持模板的动态更新,元素数组需要有简单的元素。
  3. 在第38行,我们需要手动注册该组件,以便它能被浏览器解析和使用。如果你使用的是Fast的NPM包,你就不需要这样做,但由于我们使用的是VanillaJS,所以我们必须增加这个步骤。

正如你所看到的,我再次使用了基于Fast的组件(fast-card,fast-accordion,等等)。

我在第7行对任务ID的数组进行迭代。这里的重复函数无法注意到数组中的对象发生变化,这就是为什么我在迭代一个字符串数组。正如你在toggleTask方法中看到的,当任务被标记为 "完成 "时,我在字符串中添加了一个"@1"。这就触发了重复函数的更新,列表就会自动更新。我不需要担心手动重新渲染DOM或任何东西。

由于这个额外的步骤,每当我需要一个来自实际任务的信息,如它的描述,我必须访问父元素(见上述模板代码的第17行)。

每当我点击这个项目的按钮(它里面有一个动态的文本,取决于这个特定ToDo项目的状态),我就会调用endTask函数。 这很简单,我只是使用古老的document.getElementById方法获得元素,然后调用toggleTask方法。该方法将找到正确的待办事项元素,调用其toggle方法,同时,相应地更新_taskIds中的id(增加或删除@1字符串)。

在模板代码的第19行,我正在添加任务计时器,所以我们也来看看这个。

创建一个有条件渲染的组件

任务定时器组件只在任务关闭时显示,但是,它的定时器从元素被添加到DOM的那一刻起就开始工作了。

所以我们需要创建一个组件,让它保持一个间隔运行,并且只在其他事情发生时才显示出来。我们可以用when指令来做到这一点。

我们的计数器将保持一个对其ToDo对象的引用。一旦它的selected属性为真,那么fast-badge将被渲染,否则它将被从DOM中取出。

注意以下内容:

  1. 当我们使用该元素时,todoId属性是通过HTML设置的(请看上面todo-list的模板代码)。
  2. connectedCallback方法是网络组件的一个生命周期方法。你可以在这里阅读更多关于这些方法的信息。特别是,一旦元素被插入到DOM中,这个方法就会被调用。通过这段代码,当元素(计时器)被添加到DOM中时,我们使用todoId属性来获取实际的ToDo对象,并通过调用setTimer方法来设置ToDo中的计时器的引用。我们将在模板的when条件中使用这个引用。

这是一个非常简单的组件,我想说的是,最相关的部分是如何实现条件渲染的。

没有什么可做的了,如果你想测试这个应用,只需克隆这个 repo,然后用npx http-server运行它就可以了。

正如你所看到的,Fast UI有一些非常有趣的可扩展性属性,它的设置非常简单,模板也非常强大。虽然我没有深入研究,但你有可能创建你自己的这些基于快速的组件的版本,并根据你的需要对它们进行定制。他们只是为你提供了一个没有意见的版本作为基础。

如果你想了解更多关于Fast UI的信息,可以查看他们非常广泛的文档,或者加入他们的Discord服务器,你可以向其他Fast用户提问。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改