Как стать автором
Обновить
8
0
Diogen Vagrant @IsOrtex

Full Stack Javascript Developer

Отправить сообщение
Да, по поводу биндинга функции в шаблоне вы правы. Я в своем время долго решал какой вариант оставить. Почему-то запомнилось как будто оставил вариант с учетом всех вызовов.

Сейчас прикинул все варианты и вернулся к тому же. Выполнять функцию снова все-таки лучше при изменении аргументов, а не содержимого тела.

Суть фреймворка-то не в том как скомпилировать какое-то конкретное приложение, можно хоть в head его подключить и все будет работать.
А в чем тут проблема? Компонент это по сути экземпляр класса, а scope это public property.
Выглядит как лишняя сущность, было бы красивее разместить данные в this он бы и был this в html.

Не совсем, в выражениях может быть что угодно, хоть ${ console.log('Hello') } хоть ${ window.location.href }
Область видимости по умолчанию весь window. Если нужно изменить это поведение, то достаточно дописать метод Component.parse как вам надо.
Даже не так — если меняется любая отслеживаемая переменная, то вы делаете полный dirty-checking — проверяете все отслеживаемые переменные. При этом если данные в scope меняются, которые выводятся через функцию ${this.fullName()} — то обновления не происходит, недоработка.

Данные которые будут в функции тоже начнут отслеживаются. Слежка происходит не на уровне парсинга этой строки. Тут все гораздо хитрее.

И еще момент, хоть отслеживается и каждое свойство скоупа отдельно, но синхронизация с шаблоном происходит группами. То есть если пройтись циклом и изменить 1000 значений в скоупе, то произойдет всего 1 операция изменения разметки, а не 1000.

Дело в том что компиляция идет сверху вниз по дереву, элемент за элементом, поэтому если нужно что-то сделать с дочерними элементами из родительского после его компиляции, то мы также используем resolved. В нем все дочерние компоненты будут гарантировано скомпилированы, в этом его смысл.

В целом, метод resolved используем когда нужен доступ к детям.

Такой лайфцикл позволяет работать с компонентами, почти так как это происходит в DOM:
В примерах ниже левая и правая части эквивалетны:

el.querySelector('input') => component.child('input')
el.querySelectorAll('input') => component.children('input')
el.parentNode => component.parent()

Разница только в том, что все методы справа возвращают не элемент, а компонент.
В компонентах Akili есть много разных методов для взаимодействия друг с другом

class ParentComponent extends Akili.Component {
  resolved() {
     let childComponent = this.child('child');

     console.log(childComponent.scope.example); //  'Hello World'

     childComponent.scope.example = 'Goodbye World'; // в разметке значение также поменяется
  }
}

class ChildComponent extends Akili.Component {
  compiled() {
    scope.example = 'Hello World';
  }
}

Akili.component('parent', ParentComponent); 
Akili.component('child', ChildComponent); 

<parent>
   <child>${ this.example }</child>
</parent>


перезапишет, но если содержимое нужно куда-то вставить, то можно использовать свойство скоупа .__content

class HelloComponent extends Akili.Component {
  static template = `<div>
    <h1>Hello, tester!<h1>
    <p>${ this.__content }</p>
  </div>`;
}


В приме выше выражение ${ this.__content } заменится на Текст внутри
Как отслеживается изменения?

Изменения отслеживаются с помощью механизма Proxy.

Работают и отслеживаются ли «js» выражения в шаблоне?

Да, отслеживаются все выражения где есть хоть какая-то переменная скоупа

Зачем нужен scope если есть this?

this в html это и есть scope. Поскольку скоуп был придуман как область видимости разметки, то в ней он является контекстом. В компоненте же есть ссылка на на него, в свойстве scope.

Можно ли сделать вложенный цикл и использовать данные родительского цикла во внутреннем?

Да, каждый скоуп имеет свойство .__parent — ссылку на родительский

Также, подробное описание всех возможностей, включая некоторые тонкости, можно найти в документации.
Regular =) Была идея так назвать… )
Неудачный пример получился наверное, согласен ) Стрелки просто часть html
Можно собрать как удобно, просто хотел предупредить о свойствах класса в описании.
Смысл все же есть. Бывают, например, группы компонентов, когда их несколько и они завязаны друг на друге. Например посмотрите реализацию табов.

Родительский компонент может захотеть что-то сделать с дочерними. Метод resolved гарантирует, что в нем все дочерние будут полностью скомпилированы и тогда к ним можно обратиться через систему коммуникации компонентов.
class HelloComponent extends Akili.Component {
 static templateUrl = './path/to/template';
}


или

class HelloComponent extends Akili.Component {
  static template = `<div>
    <h1>Hello, tester!<h1>
    <p>test user</p>
  </div>`;
}
сайт лежал — обнаружил memory leak в jsdom, буду искать решение.

аналог componentWillMount — created
аналог componentDidMount — compiled

То есть конструктор можно вообще и не писать.
Весь синтаксис это доллар и фигурные скобки в стиле es6, причем во всех кейсах )
1) Не совсем понял, что имеется ввиду под дополнительными зависимостями?
2) Тут согласен, но это скорее просто бонус, разные ситуации бывают. Про то как сделать компоненты модульными я в статье описал.

Информация

В рейтинге
Не участвует
Зарегистрирован
Активность