srcmini本文概述
SPA(单页应用程序)除了具有其他概念外, 还具有重新呈现用户界面任何部分的能力, 而无需外部请求即可获得一些HTML(AJAX)。由于将数据与模型层进行了抽象和分离, 因此可以采用这种方法, 因此你可以独立使用视图层。
作为开发人员, 我喜欢使代码尽可能易于阅读, 因此始终需要有一种简便的方法来进行编码, 这对每个开发人员来说都是不懈的努力, 因为最简单的方法是使用来增加应用程序的复杂性依赖项以解决愚蠢的问题, 但是降低这种复杂性很复杂。因此, 今天我想与你分享另一个SPA框架Matreshka.js, 它将帮助你解决所有难题。
什么是Matreshka.js？
Matreshka.js是一个非常简单的JavaScript框架, 可让你快速创建单页应用程序。由于其基于JavaScript类和访问器的简单而直观的API, 它填补了初级和高级开发人员之间的空白。你需要入门的所有知识都是非常基础的JavaScript知识。它的Reactive API允许你使用几行代码轻松解决难题。你将能够构建具有高鲁棒性的应用程序, 并且还具有重构遗留应用程序的能力, 而无需从头开始。你只需要几个小时就可以了解框架, 因为没有复杂的编程概念, 只需专注于应用程序的重要功能, 功能以及如何快速生产它即可。
尽管此框架提到它非常易于使用, 但它不仅适用于编程初学者, 也适用于经过试验的前端开发人员。它有一个整齐的存储库, 其中还包含示例和教程。就像一组以较小的尺寸放置在另一个内部的木制娃娃一样, 该框架将允许你使用几行代码来抽象化应用程序的复杂性。
入门
Matreshka的官方网站上有一个非常直观和说明性的教程, 你可以在其中开始学习Matreshka的工作原理, 因此可以尽快开始使用它。
基本例子
如你所知, 交谈很便宜, 因此以下代码段将向你展示入门Matreshka的难易程度：
1.文件
HTML文档将保留正常的结构和正常的标记, 你只需要包括matreshka库和你的应用代码：
<!DOCTYPE html>
<html>
<head>
<title>My first Matreshka.js application</title>
</head>
<body>
<div>
<input type="text" class="my-input">
<div class="output"></div>
</div>
<!-- Include the matreshka source code -->
<script src="https://matreshkajs.github.io/matreshka/matreshka.min.js"></script>
<!-- The code of your application -->
<script src="app.js"></script>
</body>
</html>2.使用Matreshka(app.js)进行应用
作为任何SPA的示例, 我们将展示将某些值绑定到某些元素的难易程度。在这种情况下, Matreshka的bindNode函数允许你执行以下操作：
// Store the HTML binder in a short variable
const htmlBinder = Matreshka.binders.html;
// Create the class which inherits Matreshka
class Application extends Matreshka {
constructor() {
super();
// Bind a property "x" and the text field
this.bindNode('x', '.my-input');
// bind the property "x" and the ".output" block
this.bindNode('x', '.output', htmlBinder());
// When the property "х" changes, do something
// in this case show some info on the console
this.on('change:x', () => {
console.log(`x is changed to "${this.x}"`);
});
}
}
// Create your application
const app = new Application();
// Triggers the console.log defined in on "change:x"
app.x = "Hello World";就是这样！用Matreshka.js编写的应用程序通常代表一个嵌套的JavaScript对象, 其中每个分支都是Matreshka实例。使用Matreshka＃instantiate创建新分支, 该分支可确保应用程序的完整性, 并允许使用普通分配替换应用程序的状态。重要的是要知道, 你可以找到所有Matreshka的示例都是基于ES6的, 因此, 如果你希望使代码在过时的浏览器上运行, 则需要使用转译器(Babel)。
如何贡献？
Matreshka是一个非常复杂的项目, 其开发和支持(包括3种不同语言的文档)需要数百小时的工作。如果你有业务并且你的团队使用Matrehka.js, 那就是支持它的充分理由。你可以确定将保留该项目, 因为开发人员可以获得实际利润。如果你是个人开发人员, 则可以通过赞助人LiqPay购买一些简单的东西供主要维护者进行捐赠。
此外, 该项目已获得麻省理工学院(MIT)许可, 因此你也可以通过代码进行贡献, 报告问题等, 因此不要忘记在此处访问Github的官方存储库。
评论前必须登录！
注册