实践MarkoJS
一个简单、灵活、快速的全栈框架，拥有迄今为止最直观的组件系统，Marko值得我们仔细研究。
全栈、服务器端渲染的JavaScript框架的创新仍在继续。Marko是在eBay的支持下开发的，eBay在其电子商务网站中使用了它。Marko旨在成为一个易于学习和高性能的框架。
SolidJS的创建者Ryan Carniato参与了Marko的开发。他将其描述为 "专门为处理eBay平台的高性能需求而构建"。考虑到eBay每月有3.07亿用户，Marko几乎肯定可以处理你的用例。
Marko组件
让我们从Marko的组件系统开始探索。Marko拥有迄今为止最简单的组件定义和发现系统之一。你可以在这里看到一个简单的组件定义，一个颜色选择器。注意，在主index.marko文件中，有一个名为<color-picker> 的HTML元素，以及一个包含十六进制颜色阵列的属性。Marko是如何找到color-picker 这个组件的呢？
答案是，Marko从发现组件用法的目录开始，然后从同级目录开始，向上寻找包含所需组件定义的/component目录。如果在该应用代码中没有发现这样的组件，Marko将转向已安装的依赖关系，并对其进行扫描。
请注意，Marko是向上搜索的，所以不同分支中的目录是不知道对方的。这为组件提供了一种范围。
在我们的例子中，Marko不需要找很远，因为有一个/components/color-picker/index.marko文件。(Marko也会从组件目录中带有组件名称的文件中加载组件，或者从组件目录中带有组件名称的文件夹和文件中加载。)
如果你看一下/components/color-picker/index.marko文件，你会看到清单1中所示的color-picker组件定义。
清单1.color-picker.marko
import getDefaultColors from '../../util/getDefaultColors.js'
清单1包含了一个组件的主要元素。它首先用导入语句导入了另一个JS文件（如果没有传入颜色，它将使用一个简单的JavaScript函数）。接下来，它定义了它所需要的JavaScript结构；在这种情况下，是一个类和一个函数。最后是实际的模板标记，它主要是拉入另外两个组件，即页眉和页脚。
让我们仔细看看这个类的定义。它定义了两个方法。
属性输入
第一个方法是onInput() 。这是一个生命周期方法，接收一个输入参数，并允许修改组件的状态（下面有更多关于状态的内容）。
注意输入变量。那是Marko中的一个保留标识符，它可以解析为从上面的父类传入的属性。记得主组件在元素colors 上包含一个属性，指向一个硬编码的十六进制颜色列表。现在子组件可以通过input.colors 属性访问这些颜色。属性是完全反应式的，这意味着系统将确保所有依赖于道具的东西都会被更新。
事件处理
该类的第二个方法是handleColorSelected ，它是一个自定义的事件处理程序。你可以在清单1中看到该处理程序的使用，在那里放置了页脚。
<color-picker-footer colors=state.colors on-color-selected("handleColorSelected")/>
翻译。当on-color-selected 事件被触发时，调用handleColorSelected 方法，传递任何参数。
马尔科的状态
Marko中的状态与React类似，它被期望是不可改变的，这意味着必须分配一个新的状态来更新一个属性。Marko确实提供了一种强制触发状态更新的方法。
this.setStateDirty(property);
像其他反应式框架一样，Marko的状态是组件的内部状态。反应式系统负责执行UI和其他依赖于该状态的值的更新。
在Marko中进行迭代和引发事件
现在让我们来看看页脚组件如何做两件事：迭代颜色道具和触发它的on-color-selected 事件。
color-picker-footer/index.marko的代码显示在清单2中。
清单2.color-picker-footer
<div.color-picker-footer>
你可以看到迭代工作是通过<for> 标签完成的。 <for> 标签可以用| 符号内的名称指定其迭代器变量。在这种情况下，迭代器被命名为color 。要迭代的集合是用of 属性来确定的，在这种情况下，指的是从父类传入的input.colors 。
input.colors 变量的每个成员将被输出为一个div，并可以访问color 变量。这与React等其他框架的语法相似。
在Marko中发射事件
通过点击挑选颜色的大部分工作是由color-picker-selection 组件处理的，它在for 迭代器内输出，同时还有color 属性和on-color-selected 的处理程序。
清单3显示了 color-picker-selection组件。
清单3.color-picker-selection组件
class {
color-picker-selection 的大部分内容都是用来定义布局的（即允许点击颜色的小的彩色方块）。在这里，你可以看到CSS是组件结构的一部分，在样式块中，它定义了圆形的小方块。注意，你也可以在一个单独的.css文件中定义CSS，文件名为style.css。你可以在/color-picker-selection目录下看到这后一种方法。
在模板标记中，注意到用于将背景颜色设置为input.color 上的十六进制颜色的内联样式。
还可以观察到on-click 和on-touchstart 事件是如何被用来捕捉用户与颜色方块的互动。该事件被传递给handleColorSelected ，它被定义在文件的头部。它使用this.emit("color-selected") 来触发一个custom color-selected 事件。
回顾一下，color-picker-footer 通过on-color-selected("handleColorSelected", color) 观察自定义事件。注意处理程序正在调用handleColorSelected ，并传递给color 这个变量。但是这个函数是在哪里定义的呢？
组件定义的灵活性
答案是它被定义在同一目录下单独的component.js文件中，类似于你之前看到的单独的style.css文件。把组件的离散部分放到一个文件中或单独的文件中（或两者的结合）的能力，使你在定义组件时有很好的灵活性，因为它们从简单发展到复杂。
Marko中的Awaiting标签
Marko还包括一个用于处理异步渲染的<await> 标签。<await> 标签允许你传入一个承诺，框架将处理对其结果的等待，并只在其可用时显示。(这类似于Svelte中的类似命名的组件）。
<await> 标签简化了对异步输出的处理。
一个简单且无惊喜的框架
Marko没有辜负其简单易学的承诺。首先，它只有少量的基本核心标签需要学习。另外，这些标签是相当直接的，并且与最小惊喜的原则相协调。而且Marko是一个全栈框架，所以你也得到了开箱即用的服务器端渲染，并与Express等服务器集成。
结合直观的组件定义系统、Webpack和Rollup的捆绑器以及一流的性能，Marko有足够的理由成为你的下一个JavaScript框架。
