Содержание
SPA (одностраничные приложения) выделяются среди других концепций своей способностью повторно визуализировать любую часть пользовательского интерфейса без необходимости внешнего запроса для получения некоторого HTML (AJAX). Такой подход сделан благодаря абстракции и отделению данных от слоя модели, поэтому вы можете работать независимо со слоем вида.
Как разработчик, мне нравится, чтобы код был настолько легким для чтения, насколько это возможно, поэтому всегда должен быть простой способ сделать это, и это постоянная борьба для каждого разработчика, потому что самое простое — это усложнить приложение, используя зависимости, чтобы решить глупые проблемы, но сложно уменьшить эту сложность. Вот почему сегодня я хочу поделиться с вами еще одним SPA Framework, который поможет вам решить всю эту борьбу, Matreshka.js.
Что такое Matreshka.js?
Matreshka.js — это очень простая структура JavaScript, которая позволяет быстро создавать одностраничные приложения. Он заполняет пробел между младшим и старшим разработчиком благодаря своему простому и очень интуитивно понятному API, основанному на классах JavaScript и методах доступа. Все, что вам нужно для начала, — это базовые знания JavaScript. Его Reactive API позволит вам легко решать сложные проблемы с помощью нескольких строк кода. Вы сможете создавать приложения с высокой надежностью, а также сможете реорганизовывать устаревшие приложения, не создавая ничего с нуля. Вам понадобится всего пара часов, чтобы понять структуру, потому что отсутствие сложных концепций программирования, просто сосредоточиться на важности, функциональности вашего приложения и скорости, с которой вы можете его создать.
Хотя в этой платформе упоминается, что она очень проста в использовании, она предназначена не только для начинающих программистов, но и для опытных разработчиков интерфейсов. Он имеет аккуратный репозиторий с примерами и учебниками, а также. Как и набор деревянных кукол, которые размещены в уменьшенном размере одна внутри другой, фреймворк позволит вам абстрагировать сложность вашего приложения с помощью пары строк кода.
Начиная
Официальный сайт Матрешки имеет очень интуитивно понятное и объясненное руководство, где вы можете начать изучать, как работает Matreshka, так что вы можете начать использовать его как можно скорее.
Основной пример
Как вы знаете, говорить дешево, поэтому следующий фрагмент кода покажет, как легко начать работу с Matreshka:
1. Документ
HTML-документ будет сохранять нормальную структуру и обычные теги, вам нужно всего лишь включить библиотеку matreshka и код вашего приложения:
My first Matreshka.js application
2. Приложение с Матрешкой (app.js)
Как и любой пример SPA, мы покажем, как легко связать некоторые значения в некоторый элемент. В этом случае 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. Новые ветки создаются с использованием Матрешка # Instantiate что обеспечивает целостность приложения и позволяет заменить состояние приложения обычным назначением. Важно знать, что все примеры Matreshka, которые вы можете найти, основаны на ES6, поэтому, если вы хотите, чтобы ваш код работал на устаревших браузерах, вам нужно будет использовать транспортер (галдеж).
Как внести свой вклад?
Матрешка — очень продуманный проект, разработка и поддержка которого (включая документацию на 3 разных языках) требуют сотен часов работы. Если у вас есть бизнес, и ваша команда использует Matrehka.js, это хорошая причина для его поддержки. Вы можете быть уверены, что проект будет поддерживаться, потому что разработчик получает реальную прибыль. Если вы являетесь индивидуальным разработчиком, вы можете купить что-то простое для главного сопровождающего, сделав пожертвование через покровитель, LiqPay.
Кроме того, проект лицензирован под лицензией MIT, так что вы также можете вносить свой вклад с помощью кода, сообщать о проблемах и т. Д., Поэтому не забывайте получать награду за официальный репозиторий на Github здесь.
