简介
enti是一个轻量级的 JavaScript 库，它提供了一种易于理解和维护的方式来管理应用程序的模型，视图和控制器。
安装
使用 npm 进行安装：
npm install enti --save-dev
使用
创建模板
-- -------------------- ---- ------- ------ - -------------- - ---- ------- ----- --- - ---------------- ---------- ------- --------- ------ ---- -- --- ----- - ---- ---- --------- ----- - - ---- ------------------- ---------- ---- ------------------------ ------------------------展开代码
首先我们需要使用 createTemplate() 函数创建一个模板。在此示例中，我们将使用 firstname，lastname 和 age 作为属性，并将其初始化为 "John"、"Doe" 和 30
我们用 get() 和 set() 方法读取和修改 age 属性。
onAny() 方法用于添加事件监听器，可以在任何属性更改时触发。
snapshot() 方法用于获取当前模板的状态。
在控制台中执行代码，我们将看到：
实例化模板
现在我们已经创建了一个模板，接下来我们需要实例化它：
-- -------------------- ---- ------- ------ - --------------- -------------- - ---- ------- ----- --- - ---------------- ---------- --- --------- --- ---- - --- ----- -------- - -------------------- ------------------ - ------- ----------------- - ------ ------------ - --- -------------------------- ------------ - --- --------------------------展开代码
首先，我们使用 createTemplate() 创建一个模板。然后，我们使用 createInstance() 来创建一个实例化对象。
我们可以使用点号语法来设置属性，例如 instance.firstname = "John"。
再次打印 age 属性，您将看到输出为 30。
接下来，我们将 age 属性更改为 25，结果将显示在控制台中。
视图
接下来，我们将引入另一个常见的概念：视图。
-- -------------------- ---- ------- ------ - --------------- --------------- ---------- - ---- ------- ----- --- - ---------------- ---------- --- --------- --- ---- - --- ----- -------- - -------------------- ----- ---- - --------------------- ------------------ - ------- ----------------- - ------ ------------ - --- -------------------------- ----------------------展开代码
我们在模板上创建了一个实例，然后用它来创建一个视图，并在此视图中查看实例更改的结果。
通过将实例传递给 createView()，我们实时更新了视图，以反映实例的更改。
在控制台输出，你可以看到 age 属性在实例对象中被打印成 30，但在视图对象中被打印成了 30。
控制器
最后一个概念是控制器。控制器是应用程序逻辑的中心，它响应用户操作并将逻辑应用于视图和模型。
-- -------------------- ---- ------- ------ - --------------- --------------- ----------- ---------------- - ---- ------- ----- --- - ---------------- ---------- --- --------- --- ---- - --- ----- -------- - -------------------- ----- ---- - --------------------- ---------------------- ----- -- - ------------ --- ------------------ - ------- ----------------- - ------ ------------ - --- -------------------------- ---------------------- ------------------------------- -------------------------- ----------------------展开代码
我们将 createController() 函数传递给 view 和一个回调函数，该回调函数将根据特定的操作执行逻辑。
在这之后，我们模拟一些实例更改并非常容易添加更改控制器的行为。在此示例中，点击“增加年龄”按钮将增加模型中 age 属性的值。
再次查看控制台输出时，您会看到 age 属性的值增加了。
结论
enti 使用非常直观，旨在易于使用和理解。使用 enti，您可以创建易于维护的应用程序，即使它们的代码庞大/复杂也是如此。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/204068
