Userinterface.js-用于构建前端JavaScript应用程序的小型库

我制作并维护了几年的浏览器扩展，我记得我经常会编写大量的代码，这些代码以后会成为很好的功能。然而，这些并不容易维护，我有两件事要做：一是我将有一种方法来编写可以在整个应用程序中重用的代码，另一件是集中事件。

js是围绕这样一种理念构建的，即应该区分与视觉外观和视觉工作方式相关的逻辑。

同时，userinterface.js提供了编写和组织UI的新方法。

使用userinterface.js的另一个优点是通过关注点分离和UI机制抽象的原则实现代码可重用性。

要开始使用userinterface.js，您只需按照userinterface.js-skone存储库上的说明搭建一个新项目。

为了能够在浏览器中使用userinterface.js，您可以使用git子模块。

模型是节点的对象表示形式。根据方法的不同，它有三个必需的属性：名称、方法和属性或回调，

Name属性将是您的模型的标识符，它将在您需要运行模型时使用。Method属性将描述您的模型应该如何排列。属性和回调属性将包含您的元素的属性。

我们使用appendChild方法创建了一个名为Simple model的模型，它有两个Li元素子元素，分别具有className simplmodel和textContent我的第一个简单模型。是的，每个属性(除子元素之外)都将设置为该元素。

UserInterface。model({name："；simplmodel"；，方法：UserInterface。appendChild，properties：{tagName："；li"；，//必填className："；simplmodel"；，textContent："；我的第一个简单模型"；}})；UserInterface。runModel("；simplmodel"；，{parentNode：Document。querySelector("；ul"；)})；

在前面的示例中，我们创建了一个简单的模型，但是如果我们想要做更多的工作并向其中添加一些子元素，那该怎么办呢？这里有Child属性，它是一个数组，您可以在其中指定子元素。

UserInterface。模型({名称："；子代"；，方法：UserInterface.。appendChild，properties：{tagName："；div"；，className："；model"；，Children：[{tagName："；div"；，className："；Child"；，textContent："；My First Child"；//等]。}]}})；UserInterface。runModel("；子"；，{parentNode：Document。Body})；

模型需要有属性属性或回调属性，但是回调属性到底有什么作用呢？当您想要回显模型中的某些数据时，可以使用回调属性。

例如，在这里，我们有一个名为echomodel的模型，它具有回调属性。此属性与properties属性的工作方式相同，只是在模型运行之前添加了一个额外的步骤。回调将根据您通过runModel传递的数据返回一个properties对象。

UserInterface。模型(名称："；echomodel"；，方法：UserInterface。appendChild，callback：data=>；({tagName："；p"；，className："；echomodel"；，textContent："；my"；+data。text+"；型号"；}))；用户界面。runModel("；echomodel"；，{parentNode：Document.。正文，数据：{"；text"；："；echo"；}})；

绑定是一个回调函数，当绑定到模型时，每当模型运行时都会自动调用该函数。绑定将使您的模型更加活跃，例如向您的模型添加事件侦听器，这就是您要做的地方。

您还可以执行更多操作，例如使用事件侦听器将所有模型连接在一起！

绑定是赋予模型生命力的一种方式，使它们能够在执行各自的方法时执行操作。这意味着如果您想要向将在其中执行操作的元素添加侦听器。

UserInterface。模型({名称："；按钮"；，方法：UserInterface。appendChild，属性：{tagName："；button"；}})；UserInterface。绑定("；按钮"；，函数(元素){元素。textContent="；Bound"；；})；UserInterface。runModel("；按钮"；，{parentNode：Document。Body})；

对象是你的模型的主干，它们将为你的绑定存储和操作数据。这就是你想要隐藏复杂东西的地方。

在本例中，我们创建并运行一个名为myModel的模型，该模型本身将运行另一个模型，并将其传递给上下文myObj。

上下文代表模型之间相互通信的保留区域，它们通常表示为对象，但也可以是几乎任何形式。

第二个模型运行后，它将听到问候语通知。您注意到第一个模型中的事件侦听器了吗？是的，无论何时单击我们的第一个模型，它都会向上下文myObj通告问候，并将一个空对象作为数据传递给它。这个空对象也可以是您想要传递给其他模型的任何对象。

UserInterface。Model({name："；myModel"；，方法：UserInterface。appendChild，属性：{tagName："；div"；}})；UserInterface。模型({名称："；某模糊模型"；，方法：UserInterface.。appendChild，属性：{tagName："；div"；}})；UserInterface。绑定("；myModel"；，function(Element){const_myObj=new Obj()；元素。addEventListener("；单击"；，Function(){UserInterface。发布(_myObj，"；greeting"；，{})；})；UserInterface。runModel("；某模糊模型"；，{parentNode：Document。Body，bindingArgs：[_myObj]})；})；UserInterface。绑定("；ome obcuremodel"；，function(element，myObj){UserInterface。LISTEN(myObj，"；greeting"；，function(Data){//用数据做一些有用的事情或问候回})；})；UserInterface。runModel("；按钮"；，{parentNode：Document。Body})；

已处理的属性以及元素可以具有的任何属性或返回它们的回调。

js还提供了一个集合，其中包含一些基本模型供您入门。