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

2020-06-02 01:46:12

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

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还提供了一个集合,其中包含一些基本模型供您入门。