Как совместить модуль Webix Jet, компоненту Webix и скриптовые функции

Здравствуйте.

Я разрабатываю приложение на Webix Jet. В нем, в частности, я использую собственные компоненты, описанные функцией webix.protoUI. Таким образом, в приложении есть 2 типа файлов:

  1. Модули Webix Jet, которые объявляются как:
define([...],function(){

	return {
		...
	};
	
});

  1. Компоненты, которые вынесены в отдельные файлы:
webix.protoUI({
 ...
 
}, webix.ui.form);

Вопрос в том, каким образом, я могу в компонентах использовать функции, вынесенные в отдельный скриптовый файл. Как я понимаю, на такой скриптовый файл надо будет сослаться из index.html (так же как на webix.js). Но тогда он будет загружаться сразу при загрузке программы. Можно ли как-то сделать, чтобы сослаться на этот скрипт именно из файла конкретной компоненты? Аналогичный вопрос про файл отдельный стилей (*.css), который будет использоваться только, если приложение “дошло” до отображения конкретной компоненты. Т.е. тоже хотелось бы не ссылаться на все файлы стилей из index.html.

насчет CSS: у вас такие большие файлы, чтобы о них заботиться?
если да, то можно css plugin использовать GitHub - guybedford/require-css: A RequireJS CSS loader plugin to allow CSS requires and optimization

кастомные компоненты тоже можно подгружать через require, без указания объекта возврата.

intregal, спасибо за ответ.

Насчет css вопрос был больше теоретический. Насчет кастомных компонент, я так и подгружаю их через require. Вопрос в том как подгружать скриптовые функции, которые используются в компонентах. Не хотелось бы все скриптовые функции, которые используются внутри кода компонент, сразу объявлять в index.html

не понял про скриптовые функции.
если это какие-то кастомные функции, то можно их поместить в отдельные файлы и подгружать по мере необходимости.

А как именно подгружать? Допустим я сделал файл api.js. В нем просто описаны функции:


function getContact() {
}

..

function getModels() {
}

Далее, у меня есть файл компоненты contactSearch.js:


webix.protoUI({

 .. Где-то здесь я хочу вызвать getContact() 

});

Как мне сделать так, чтобы getContact() была видна из contactSearch.js, не ссылаясь на api.js из index.html? Заранее прошу прощения, я не знаю requireJS. Подгрузку по мере необходимости можно сделать внутри кода компоненты, как-то средствами Webix Jet или RequireJS?

require(["api"], function() {
    webix.protoUI({
        ...
        var contacts = getContacts();
    }, webix.ui.form)
})

но в целом, конечно же, так лучше не делать.
лучше возвращать в апи файле объект с функциями и использовать их далее:

api.js
define({
    getContacts: function() {
      return ...
    }
})

component.js
require(["api"], function(api) {
    webix.protoUI({
        ...
        var contacts = api.getContacts();
    }, webix.ui.form)
})

Понял! Я не подумал, что webix.protoUI({}) тоже можно обернуть в require().