易语言ui线程_快速提示：易语言与uilang的UI交互

易语言ui线程

编码语言就是这样。 语言。 精通HTML，CSS，JavaScript或其他任何语言，对学习一种新的口头语言都充满了挑战。

就像口头语言一样，每种编码语言都有自己的“语法”。 严格的规则和特质通常很难学习，并且经过多年的实践才能完全被吸收。

uilang是Benjamin De Cock创建的一种新的，基于JavaScript的简单语言，它使Web设计人员可以使用直接来自英语的一组规则来创建UI单击交互。 对于希望简化JavaScript使用的初学者来说，这意味着更直观，更温和的学习曲线，以及适合旧手的UI单击交互部署的更快方法。

uilang做什么

uilang的核心是能够在任何给定元素上添加，删除或切换类名。 这可能只是三个动作，但与CSS结合后，它们可以执行各种操作，例如隐藏通知和模式框，设置动画效果，显示导航菜单下拉菜单以及驱动制表和手风琴系统。

例如，假设您有以下通知框：

整个框带有ID #notification ，按钮具有类.hide 。 页面的.hidden下的页面中还包含CSS，将其添加到框后会将其不透明度设置为零，从而隐藏或关闭该通知。

用于创建此框的代码是：

<style>
  /* Font styles, colors, etc. omitted for clarity */
  #notification {
    transition: .8s
  }
  #notification.hidden {
    opacity: 0
  }
</style>

<div id=notification>
  <p>You have 3 unread messages.</p>
  <button class=hide>Hide</button>
</div>

香草JavaScript方式

使用简单JavaScript，如果您想在单击按钮时将.hidden类添加到框中，则需要如下所示：

document.addEventListener('DOMContentLoaded', function() {
    [].forEach.call(document.querySelectorAll('.hide'), function(el) {
		el.addEventListener('click', function(e) {
			if (e.target.nodeName.toLowerCase() == 'a') {
				e.preventDefault();
			}
			document.getElementById('notification').classList.add('hidden');
		});
	});
});

如果您没有使用JavaScript的经验，那么大量的代码可能会让人不知所措。 即使您很熟悉，制作仍然会很耗时。

uilang方式

通过使用uilang而不是原始JavaScript，要达到相同的目的，您需要编写如下说明性语句：

<code>
  clicking on ".hide" adds class "hidden" on "#notification"
</code>

如您所见，无论您有什么经验，该代码都更具可读性。 其简单的语言方法使其易于理解且易于部署。

让我们看一下uilang的工作原理。

uilang如何工作

使用uilang的第一步是下载支持它的小型JS文件。 您可以通过uilang.com上的“ 下载”链接来获取它。

下载文件后，请使用以下命令将其加载到HTML页面中：

<script src=uilang.js></script>

现在，您可以立即开始将uilang与页面上的任何元素一起使用。

首先，选择您希望uilang观看并在人们单击时做出响应的目标元素，例如按钮。 然后设置一个动作，该动作将添加，删除或切换类名，并确定要将该动作应用于哪个元素。

1.确定要关注的点击目标：

确保将所有uilang命令包装在<code></code>标记中。 然后，总是的话开始clicking on如下所示：

<code>
    clicking on
</code>

接下来，添加要定位为观看点击的元素的类或ID，并用语音标记括起来：

<code>
    clicking on ".thisbutton"
</code>

在此阶段，您还可以选择添加一个逗号和第二个类别或ID，以跟踪多个点击的目标元素：

<code>
    clicking on ".thisbutton, #thatbutton"
</code>

2.选择一个动作

现在，您可以选择以下三个动作： adds class ， removes class或toggles class 。

插入执行所需操作的动作，然后添加要添加/删除/切换的类名：

<code>
    clicking on ".thisbutton, #thatbutton" adds class "popsup"
</code>

3.指定要修改的元素

最后，在on添加单词on后跟要修改的元素的类或ID（在语音标记内），即要向其添加/删除/切换类的元素：

<code>
    clicking on ".thisbutton, #thatbutton" adds class "popsup" on "#message"
</code>

额外技巧

多行

您还可以使用多行并一次定义多个单击动作：

<code>
    clicking on ".thisbutton, #thatbutton" adds class "popsup" on "#message"
    clicking on ".otherbutton" adds class "goesaway" on "#message"
</code>

关键字“目标”

如果您要跟踪点击的元素也是您要添加/删除/切换类的元素，则可以使用关键字target而不是第二次写出标识符，例如：

<code>
    clicking on ".animation" toggles class "play_anim" on "target"
</code>

结语

这就结束了我们对uilang的快速演示！ 了解全部内容的最佳方法是前往uilang.com并在那里进行现场演示。

还提供了一个Transpiler，您可以使用它插入一些uilang命令，并查看由此产生的直接JavaScript： transpiler.uilang.com 。

开发人员本杰明（Benjamin）还发表了一篇关于Medium的文章，其中详细介绍了uilang背后的哲学以及他的目标，即帮助他人轻松学习JavaScript。

如果您只是开始使用JavaScript并且正在寻找一种更直观的方式来克服这些最初的障碍，或者您只是在寻找一种简化的处理点击交互的方法，请在下一个项目中尝试uilang 。

翻译自: https://webdesign.tutsplus.com/tutorials/quick-tip-ui-interactions-in-plain-language-with-uilang--cms-22398

易语言ui线程