.. figure:: qcobjects_01.png :alt: Логотип Логотип # QCObjects ----------- Добро пожаловать в основную справочную документацию проекта `QCObjects `__! Ознакомьтесь с официальной страницей `QCObjects `__ по адресу https://qcobjects.dev ## Кроссбраузерный JavaScript-фреймворк для шаблонов MVC ------------------------------------------------------ `QCObjects `__ — это JavaScript-фреймворк, созданный для упрощения реализации шаблонов MVC в чистом JavaScript. Вам не требуется использовать TypeScript или другие транспайлеры для запуска `QCObjects `__. Он работает непосредственно в браузере и использует чистый JavaScript без дополнительных зависимостей. Вы можете создавать свои компоненты, представленные в виде настоящих объектов JavaScript, или расширять встроенные объекты DOM для использования по своему усмотрению. Также вы можете использовать `QCObjects `__ вместе с CSS3-фреймворками, такими как [Foundation](https://foundation.zurb.com), [Bootstrap](http://getbootstrap.com) и мобильными JavaScript-фреймворками, такими как [PhoneGap](https://phonegap.com) и Onsen UI (https://onsen.io). .. figure:: doc/img/components.gif :alt: Скриншот Скриншот -------------- Содержание =========== .. raw:: html - `QCObjects `__ - `Кроссбраузерный JavaScript-фреймворк для шаблонов MVC `__ - `Содержание `__ - `ALPHA RISE Startup `__ - `ECMA-262 Specification `__ - `Авторское право `__ - `Пример работы `__ - `Пример работы с использованием Foundation `__ - `Пример работы с использованием MaterializeCSS `__ - `Пример работы с использованием чистого CSS `__ - `Еще один базовый пример работы: самый простой пример работы: `__ - `Разработка `__ - `Станьте спонсором `__ - `Просмотрите SDK QCObjects `__ - `Поддержите проект `__ - `Установка `__ - `Использование QCObjects с Atom: `__ - `Использование QCObjects в Visual Studio Code: `__ - `Установка с помощью NPM: `__ - `Установка Docker-игрового поля: `__ - `Прямое использование кода в HTML5: `__ - `Справочник `__ - `Основы `__ - `QC_Object `__ - `ComplexStorageCache `__ - `asyncLoad `__ - `Класс `__ - `QC_Append, метод append `__ - `Метод __super__ `__ - `Новый `__ - `Наследование класса `__ - `__Crypt `__ - `ГЛОБАЛЬНЫЙ `__ - `КОНФИГУРАЦИЯ `__ - `ожидание `__ - `Пакет `__ - `Импорт `__ - `Экспорт `__ - `Приведение типов `__ - `Тэг `__ - `Готово `__ - `Класс компонента `__ - `HTML-тэг компонента `__ - `Контроллер `__ - `Представление `__ - `VO `__ - `Сервис `__ - `Загрузка сервиса `__ - `JSONService `__ - `ConfigService `__ - `SourceJS `__ - `SourceCSS `__ - `ArrayList `__ - `ArrayCollection `__ - `Эффект `__ - `Таймер `__ - `SDK `__ - `Быстрое начало `__ - `Шаг 1: Начните создание основного импортированного файла и назовите его как: cl.quickcorp.js. Положите его в директорию /packages/js/ `__ - `Шаг 2: Затем создайте некоторые службы, наследуемые классы в файл js/packages/cl.quickcorp.services.js `__ - `Шаг 3: Теперь пришло время создания компонентов (cl.quickcorp.components.js) `__ - `Шаг 4: Как только вы завершили декларацию вышеуказанных компонентов, вам теперь следует написать контроллеры (cl.quickcorp.controller.js) `__ - `Шаг 5: Чтобы использовать в коде HTML5, вам потребуется выполнить некоторую настройку между тегами скрипта: `__.. raw:: html -------------- # ALPHA RISE Начало работы -------------------------- .. figure:: doc/img/ALPHA-RISE.png :alt: Alpha alpha `QCObjects `__ было приглашено выступить как АЛЬФА Начальный проект на конференции RISE Conf Hong Kong 2019. RISE привлекает самые динамичные начальные проекты со всего мира. Мы покажем, как `QCObjects `__ делает реальное глобальное влияние на жизнь разработчиков JavaScript, преобразуя способность программировать.Если вы хотите узнать больше о мероприятии RISE, проверьте их веб-сайт https://riseconf.com # Спецификация ECMA-262 ----------------------- См. `ECMAScript® Language Specification 2020 `__ для справки # Авторское право ----------------- Авторское право © Жана Макучака и `QuickCorp `__ info@quickcorp.cl # Демонстрация -------------- Демонстрация с использованием Foundation ---------------------------------------- Проверьте демонстрацию с использованием компонентов Foundation здесь: `Демонстрация с использованием Foundation `__ Демонстрация с использованием Materializecss -------------------------------------------- Проверьте демонстрацию с использованием MaterializeCSS здесь: `Демонстрация с использованием Materializecss `__ Демонстрация с использованием чистого CSS ------------------------------------------ Проверьте демонстрацию с использованием чистого CSS: `Демонстрация с использованием чистого CSS `__ Еще один пример базовой демонстрации: самый простой пример демонстрации: -------------------------------------------------------------------------- .. code:: html Демонстрация # Ветвление ------ Пожалуйста, создайте форк этого проекта или сделайте ссылку на этот проект в вашем README.md файле. Прочтите LICENSE.txt перед использованием данного кода. # Станьте спонсором ------------------ Если вы хотите стать спонсором этого замечательного проекта, вы можете сделать это `здесь `__ # Ознакомьтесь с QCObjects SDK ----------------------------- Вы можете ознакомиться с `QCObjects SDK `__ и следовать примерам для создания своих уникальных компонентов ```# Донат ------- Если вам понравился данный код, пожалуйста, `ДЕЛАЙТЕ ДОНАТ `__! |paypal| # Установка ----------- Использование QCObjects с Atom: -------------------------------- .. code:: shell > apm install qcobjects-syntax https://atom.io/packages/qcobjects-syntax Использование QCObjects в Visual Studio Code: --------------------------------------------- https://marketplace.visualstudio.com/items?itemName=Quickcorp.QCObjects-vscode Установка через NPM: -------------------- .. code:: shell > npm install qcobjects-cli -g && npm install qcobjects --save .. figure:: doc/img/QCObjects-Quick-Start.gif :alt: скриншот2 скриншот2 Установка контейнера Docker: ----------------------------- .. code:: shell docker pull -a quickcorp/qcobjects && docker run -it --name qcobjects-playground --rm -it quickcorp/qcobjects .. figure:: doc/img/QCObjects-Docker-Playground.gif :alt: скриншот3 скриншот3 Использование кода непосредственно в HTML5: ------------------------------------------- .. code:: html # Справочник ------------ Основные понятия ---------------- Вот основные символы и концепции справочника `QCObjects `__ QC_объект ~~~~~~~~~ Базовый тип всех элементов ComplexStorageCache ~~~~~~~~~~~~~~~~~~~ С помощью **ComplexStorageCache** вы можете управлять кэшем для любого объекта и сохранять его в локальном хранилище. Использование: ^^^^^^^^^^^^^ .. code:: javascript var cache = new ComplexStorageCache({ index: object.id, // Индекс объекта load: (cacheController) => {}, // Функция для выполнения при первом запуске alternate: (cacheController) => {} // Альтернативная функция для выполнения после второй загрузки исходного кода });Пример: ^^^^^^^ .. code:: javascript var dataObject = {id: 1, prop1: 1, prop2: 2}; var cache = new ComplexStorageCache({ index: dataObject.id, load: (cacheController) => { dataObject = { id: dataObject.id, prop1: dataObject.prop1 * 2, // Change the value of the property prop2: dataObject.prop2 }; return dataObject; }, alternate: (cacheController) => { dataObject = cacheController.cache.getCached(dataObject.id); // Set dataObject using cached value return; } }); // Next time you can get an object from the cache var dataObjectCopyFromCache = cache.getCached(dataObject.id); console.log(dataObjectCopyFromCache); // Will show the same object as dataObject asyncLoad ~~~~~~~~~ Функция **asyncLoad** загружает код один раз в асинхронном режиме. Это полезно для обеспечения того, чтобы начальный процесс не повторял свое выполнение и не загружался после чувствительного кода. Использование: ^^^^^^^^^^^^^ .. code:: javascript asyncLoad(() => { // my code here }, args); // Where args is an array of arguments, it may be a special "arguments" object Пример: ^^^^^^^^ .. code:: javascript let doSomething = (arg1, arg2) => { asyncLoad((arg1, arg2) => { console.log(arg1); console.log(arg2); }, arguments); }; doSomething(1, 2); // The doSomething code will run once after the queue of other functions and before the ready event. Класс ~~~~~Это НЕ определение класса ECMAScript 2015 (см. `класс ECMAScript 2015 `__ для справки). Класс — это специальная функция, которая помогает вам объявить класс более легко и совместимо. Она работает в различных браузерах, и я надеюсь, что ECMA когда-нибуд́ь примет что-то подобное. Чтобы избежать путаницы JavaScript с этим, `QCObjects `__ использует "Class" вместо "class" (учтите CamelCase).Использование: ^^^^^^^^^^^^^ .. code:: javascript Class('MyClassName', MyClassDefinition); Где **MyClassDefinition** — объект с прототипом QCObjects. Пример: ^^^^^^^ .. code:: javascript Class('MyClassName', InheritClass, { propertyName1: 0, // просто для декларации propertyName2: '', classMethod1: function() { // некоторый код здесь // обратите внимание, вы можете использовать объект "this" return this.propertyName1; }, classMethod2: function() { // некоторый код здесь return this.propertyName2; } }); var newObject = New(MyClassName, { propertyName1: 1, // это инициализирует значение в 1 propertyName2: 'some value' }); console.log(newObject.classMethod1()); // покажет число 1 console.log(newObject.classMethod2()); // покажет "some value" QC_Append, метод добавления ~~~~~~~~~~~~~~~~~~~~~~~~~~~ Этот специальный метод упрощает работу с динамическим манипулированием **DOM**. Вы можете вставить даже **компонент**, объект **QCObjects** или **элемент DOM** внутрь другого **элемента HTMLElement**. Использование: ''''''''''''' .. code:: javascript [element].append([object or element]); Пример: ^^^^^^^ .. code:: javascript // Это создаст класс QCObjects с названием "canvas", расширяющий HTMLCanvasElement с свойством customAttr со значением "custom" Class('canvas', HTMLCanvasElement, { customAttr: 'custom' }); // Это объявит экземпляр canvas1 от класса canvas let canvas1 = New(canvas, { width: 100, height: 100, }); // Это добавит объект canvas1 к телу документа document.body.append(canvas1); Метод _super_ ~~~~~~~~~~~~~ Когда вы расширяете класс QCObjects от другого, вы можете использовать метод _super_, чтобы получить экземпляр базового класса.Использование: ^^^^^^^^^^^^^ .. code:: javascript _super_('МойСуперКласс','МойСуперМетод').call(this,params) # где this — текущий экземпляр, а params — параметры метода Пример: ^^^^^^^^ .. code:: javascript Class('МойВысшийКласс', НаследственныйКласс, { свойство1: 0, # просто чтобы объявить цель свойство2: '', методКласса1: function() { # некоторый код здесь # обратите внимание, что можно использовать объект "this" return this.свойство1; }, }); Class('МоеИмяКласса', МойВысшийКласс, { свойство1: 0, # просто чтобы объявить цель свойство2: '', методКласса2: function() { # Следующая строка выполнит методКласса1 из МойВысшийКласс # но использует текущий экземпляр МоеИмяКласса return _super_('МойВысшийКласс', 'методКласса1').call(this); } }); var новыйОбъект = Новый(МоеИмяКласса, { свойство1: 1, # это инициализирует значение в 1 свойство2: 'некоторое значение' }); console.log(новыйОбъект.методКласса2()); # покажет число 1 Новый ~~~~~ Создает экземпляр объекта определенного класса QCObjects. Использование: ^^^^^^^^^^^^^ .. code:: javascript let объектЭкземпляр = Новый(ИмяQCObjectsКласса, свойства); # где свойства — это единственный объект с значениями свойств ЗАМЕЧАНИЕ: В объекте свойств вы можете использовать одиночные значения или геттеры, но они будут выполняться один раз. Пример: ^^^^^^^^.. code:: javascript Class('МойПользовательскийКласс', Объект); let объектЭкземпляр = Новый(МойПользовательскийКласс, { prop1: 1, get случайноеЧисло() { // Этот геттер будет выполнен один раз return Math.random(); } }); console.log(объектЭкземпляр.случайноеЧисло); // Показывает случайное число console.log(объектЭкземпляр.prop1); // Показывает число 1 НаследственныйКласс ~~~~~~~~~~~~~~~~~~~ Один общий часто используемый определённый класс QCObjects. \_\_Crypt ~~~~~~~~~ С помощью \_Crypt можно шифровать сериализуемые объекты паролем Пример (1): ^^^^^^^^^^^ .. code:: javascript var _строка = Новый(_Crypt, {string: 'привет мир', key: 'ключ шифрования md5'}); console.log(_строка._шифровать()); console.log(_строка._расшифровать()); // Расшифровывает зашифрованную строку до исходной #### Пример (2): ```javascript _Crypt.шифровать('привет мир', '12345678866'); _Crypt.расшифровать('nqCelFSiq6Wcpw==', '12345678866'); ``` ГЛОБАЛЬНЫЙ ~~~~~~~~~~~ **ГЛОБАЛЬНЫЙ** — это специальный класс QCObjects для доступа к глобальному контексту. У него есть методы установки и получения, чтобы помочь вам управлять внутренними свойствами ГЛОБАЛЬНОГО. Пример: ^^^^^^^^ .. code:: javascript GLOBAL.set('глобальноеСвойство1', 'некоторое значение в глобальном контексте'); var глобальноеСвойство1 = GLOBAL.get('глобальноеСвойство1'); КОНФИГ ~~~~~~~ Конфиг — это умный класс, который управляет глобальными настройками вашего приложения. Вы можете получать свойства как из файла config.json, так и из памяти, ранее сохраненной вызовом set().Использование из памяти: ^^^^^^^^^^^^^^^^^^^^^^^ 1. В вашем начальном коде установите начальные значения конфига: .. code:: javascript CONFIG.set('некотороеСвойствоНастроек', 'начальное значение'); 2. Затем вы можете получить доступ к нему откуда угодно в своём коде с помощью метода get: .. code:: javascript var некотороеСвойствоНастроек = CONFIG.get('некотороеСвойствоНастроек'); Использование из config.json: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 1. Вам нужно указать сначала, что вы используете файл config.json, установив значение "useConfigService" на true: .. code:: javascript CONFIG.set('useConfigService', true); // использование config.json для настроек конфигурации 2. После того, как вы установили указанное выше значение, QCObjects будет знать и будет искать следующие настройки конфига в файле config.json в папке basePath вашего приложения. Использование зашифрованного config.json: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Есть также способ использовать зашифрованный config.json, чтобы защитить ваши настройки от роботов, которые могут украсть незащищённые данные с вашего веб-приложения (например, ключи API). Чтобы зашифровать ваш json-файл, перейдите на https://config.qcobjects.dev, введите домен и содержимое файла config.json. Инструмент зашифрует ваш json, и вы сможете скопировать зашифрованное содержимое и вставить его в свой файл config.json. QCObjects узнает, что данные зашифрованы, и процесс расшифровки данных будет прозрачен для вас.waitUntil ~~~~~~~~~ `waitUntil` — это помощник, если вы столкнулись с проблемой выполнения кода до тех пор, пока условие не станет истинным. Код внутри `waitUntil` будет выполнен один раз. **ЗАМЕЧАНИЕ:** Это полезно в некоторых случаях, но чрезмерное использование не рекомендуется. Использование: ^^^^^^^^^^^^^^ .. code:: javascript waitUntil(() => { // код, который будет выполнен после истинности условия }, () => { return condition; }); // где condition — то, на что я хочу подождать Пример: ^^^^^^^^ .. code:: javascript let someVar = 0; waitUntil(() => { console.log('someVar существует'); }, () => { return typeof someVar !== 'undefined'; }); // где условие то, что я хочу ждать Пакет ~~~~~~ Определяет пакет `QCObjects` и возвращает его. Использование: ^^^^^^^^^^^^^ .. code:: javascript Package('packageName', [packageContent]); Где `packageContent` это массив классов `QCObjects`. Если вы передаете только имя пакета, вы получите содержимое ранее объявленного пакета. Пример (1): ^^^^^^^^^^^ .. code:: javascript 'use strict'; Package('org.quickcorp.main', [ Class('Main', InheritClass, { propertyName1: 'propertyValue1', }), Class('MyCustomClass', InheritClass, { propertyName2: 'propertyValue2', }), ]); Пример (2): ^^^^^^^^^^^ .. code:: javascript let mainPackage = Package('org.quickcorp.main'); // это вернет содержимое ранее объявленного пакета 'org.quickcorp.main' // mainPackage[0] будет определением класса Main. // Это полезно для внутреннего анализа кода Импорт ~~~~~~ Импортирует пакет из другого файла JavaScript. Использование: ^^^^^^^^^^^^^.. code:: javascript Import(packagename,[ready],[external]); Где `packagename` это имя пакета, `ready` это функция, которая будет выполнена после загрузки пакета, а `external` это булево значение, которое указывает, находится ли JS файл в том же домене или он является внешним ресурсом. Пример (1): ^^^^^^^^^^^ .. code:: javascript Import('org.quickcorp.main'); Вышеуказанный код попытается импортировать файл JavaScript с названием 'org.quickcorp.main.js' из пути, указанного значением настроек `relativeImportPath` в вашей `CONFIG`. Внутри этого JS файла вам следует определить пакет с помощью `Package('org.quickcorp.main',[Class1, Class2...])` Пример (2): ^^^^^^^^^^^ .. code:: javascript Import('org.quickcorp.main', function() { console.log('внешний импорт загружен'); }, true); Вышеуказанный код теперь пытается загрузить тот же пакет, используя внешний путь, определенный значением настроек `remoteImportsPath` в вашей `CONFIG`. **Замечание:** В обоих вышеуказанных примерах вы не использовали или не указывали расширение `.js`. Оно используется по умолчанию и не может быть изменено по причинам безопасности. Экспорт ~~~~~~~ Установите символ (переменную или функцию) в глобальном пространстве имён. Использование: ^^^^^^^^^^^^^ .. code:: javascript Export('имя_символа'); Пример: ^^^^^^^ .. code:: javascript (() => { // Это локальное пространство имён let someFunction = (someLocalParam) => { console.log(someLocalParam); }; Export(someFunction); // Теперь someFunction находится в глобальном пространстве имён. })(); // это глобальное пространство имён someFunction('это работает'); Конвертация ~~~~~~~~~~~~ Используйте метод Cast любого элемента DOM для получения свойств другого типа объекта. Это полезно для преобразования одного типа объекта в другой, что увеличивает гибкость вашего кода. Использование: ^^^^^^^^^^^^^^ .. code:: javascript let resultObject = [тип элемента или QCObjects].Cast(объектДляКонвертации); Где объектДляКонвертации — это объект, из которого будут взяты свойства и помещены в возвращаемый объект resultObject методом Cast. Пример: ^^^^^^^ .. code:: javascript Класс('МойСвойКласс', { свойство1: '1', свойство2: 2 }); let obj = document.createElement('div').Cast(МойСвойКласс); Вышеуказанный код создаёт объект DOM и конвертирует его в МойСвойКласс. Поскольку МойСвойКласс является типом класса QCObjects, obj будет иметь свойства свойство1 и свойство2, а также станет экземпляром объекта QCObjects с телом, представляющим собой элемент div. Тег ~~~ Функция Тег полезна для выбора любых элементов DOM с помощью селекторов. Тег всегда возвращает список элементов, который можно отображать, сортировать и фильтровать как любой другой список. Использование: ^^^^^^^^^^^^^^ .. code:: javascript var listOfElements = Tag(селектор); Где селектор — это селектор запроса DOM. Пример: ^^^^^^^ .. code:: html```html Демо ``` В данном случае нет необходимости в переводе JavaScript-кода, поскольку это имя функции `Готово` и название класса `.мойселектор`, которые должны остаться без изменений согласно правилам перевода.В вышестоящем коде был создан параграф внутри div с CSS-классом "мойселектор", затем этот элемент был модифицирован динамически с использованием функции Tag библиотеки QCObjects. Если вы знакомы с фреймворками для работы со селекторами, такими как jQuery, вам понравится эта версия. Готово ~~~~~~ Присвойте функцию для выполнения после завершения всех действий QCObjects и после события `window.onload`. Используйте её для предотвращения ошибок с неопределенными объектами DOM. Использование: ^^^^^^^^^^^^^ .. code:: javascript Ready(() => { // Код инициализации здесь! }); Обратите внимание, что если вы определяете динамические компоненты с помощью HTML-тэга "component", загрузка динамического содержимого не будет триггерить события Ready. Чтобы поймать код каждый раз при загрузке динамического компонента, используйте метод контроллера Done вместо этого. Вы будете использовать реализацию Ready в основном тогда, когда хотите внедрить QCObjects вместе с другим фреймворком, который требует это. Класс Компонента ~~~~~~~~~~~~~~~~ Тип класса QCObjects для компонентов. Свойства ^^^^^^^^ **[Component].domain** Возвращает строку с доменом вашего приложения. Это автоматически устанавливается QCObjects при загрузке. **[Component].basePath** Возвращает строку с базовым путем URL вашего приложения. Это автоматически устанавливается QCObjects при загрузке.ЗАМЕЧАНИЕ: Если вы хотите изменить базовый путь компонента, вам следует использовать *CONFIG.set('componentsBasePath', 'новый путь относительно домена')* в вашем коде инициализации. **[Component].templateURI** Представляет URI шаблона компонента относительно домена. Когда это свойство установлено, компонент загружает шаблон и добавляет внутренний контент как часть DOM. Для установки этого свойства рекомендуется использовать функцию помощника ComponentURI. **[Component].tplsource** Представляет строку, которая указывает источник загрузки шаблона. Может быть "default" или "none". Значение "default" говорит QCObjects загружать шаблон из содержимого templateURI. Значение "none" говорит QCObjects не загружать шаблон откуда бы то ни было. **[Component].url** Представляет полный URL компонента. Это автоматически устанавливается QCObjects при создании экземпляра компонента. **[Component].name** Представляет название компонента. Название компонента может быть любым алфавитно-числовым значением, которое идентифицирует тип компонента. Оно используется внутри системы ComponentURI для создания нормализованного URI шаблона компонента.**[Component].method** представляет собой строку, которая является HTTP или HTTPS методом. По умолчанию каждый компонент устанавливается для использования метода "GET". В большинстве случаев нет необходимости менять это свойство.**[Компонент].data** — это объект, представляющий данные компонента. При загрузке шаблона QCObjects получает каждое свойство объекта данных и связывает его с меткой шаблона, которая представляет то же свойство внутри содержимого шаблона между двойными фигурными скобками (например: {{prop1}} в содержимом шаблона будет представлять data.prop1 в экземпляре компонента). **Примечание:** Для обновления связей данных требуется перестроить компонент (см. использование метода [Component].rebuild() для получения более подробной информации).**[Component].reload** — это булево значение, которое указывает QCObjects, следует ли принудительно перезагружать содержимое компонента из шаблона или нет. Если значение равно true, содержимое шаблона заменяет текущие дочерние элементы DOM компонента. Если значение равно false, содержимое шаблона добавляется после последнего дочернего элемента компонента. **[Component].caching** — это булево значение, которое указывает QCObjects, нуждается ли компонент в кэшировании или нет. Когда компонент кэшируется, содержимое шаблона, загруженное из templateURI, загружается один раз. Вы можете установить это свойство как статическое свойство класса Component для установки значения по умолчанию для каждого следующего экземпляра компонента или установив отдельное значение этого свойства для каждого определения компонента. В мире, где производительность имеет первостепенное значение, необходимость предоставления большей гибкости поведению кэширования становится еще важнее. **[Component].routing_mode** — возвращает строку, представляющую способ маршрутизации. Его значение может быть "hash", "pathname" или "search". **Примечание:** Чтобы изменить способ маршрутизации для всех компонентов, рекомендуется использовать CONFIG.set('routingMode', 'допустимое значение способа маршрутизации') в вашем начальном коде.**[Component].allowed_routing_methods** — возвращает список, представляющий допустимые способы маршрутизации. QCObjects использует этот список для внутренней проверки правильности выбранного способа маршрутизации при построении маршрутов компонента. **[Component].routing_nodes** — возвращает объект NodeList, представляющий список узлов, загруженных построителем маршрутизации компонента. **[Component].routes** — возвращает список маршрутов компонента, созданных при создании экземпляра компонента. **[Component].routing_path** — возвращает строку, представляющую текущий маршрутный путь. **[Component].selected_route** — возвращает объект, представляющий текущий маршрут компонента. **[Component].subcomponents** — возвращает список компонентов, являющихся потомками экземпляра компонента. **[Component].body** — представляет собой DOM-элемент, представляющий тело компонента. **УЧЕТ:** Каждый раз, когда тело компонента устанавливается, это вызывает перестроение маршрута для этого компонента. Методы ^^^^^^^ **[Component].set('property', value)** — устанавливает значение для свойства компонента. **[Component].get('property')** — возвращает значение свойства компонента. **[Component].rebuild()** — перестраивает компонент. При необходимости вызывает функцию **componentLoader** с этим компонентом.**[Компонент].преобразовать(Имя\_класса\_или\_ComponentClassName)** Возвращает преобразование определения компонента в другое. Это полезно для динамического объединения определений компонентов. **[Компонент].маршрут()** Принудительно перезагружает сборщик маршрутов для компонента. Это приведёт к вызову перестройки при необходимости. **[Компонент].полноеСкрин()** Устанавливает компонент в полноэкранном режиме. **[Компонент].закрытьПолноеСкрин()** Отключает полноэкранный режим. **[Компонент].css(объект\_css)** Устанавливает CSS-свойства для компонента. **[Компонент].добавить(компонент\_или\_QCObjects\_объект)** Добавляет компонент как потомка текущего тела компонента. **[Компонент].прикрепитьToSelector(селектор)** Прикрепляет текущее тело компонента к любому элементу, указанному в селекторе. HTML-тег компонента ~~~~~~~~~~~~~~~~~~~ Это представление HTML-тега экземпляра компонента. Каждое объявление тега ```` создаёт связанный экземпляр компонента QCObjects. Хотя тег компонента сам по себе не является экземпляром, вы можете даже определять некоторые свойства экземпляров, установив соответствующие атрибуты тега при их доступности. Доступные атрибуты ^^^^^^^^^^^^^^^^^^^ Ниже представлен список доступных атрибутов для тега компонента Атрибут имени ''''''''''''' **````** Устанавливает имя связанного экземпляра компонента, созданного QCObjects.Пример использования: .. code:: html Пример: .. code:: html Демо Кэшированный атрибут '''''''''''''''''''' **````** Устанавливает свойство кэширования, если это связано с экземпляром компонента. ЗАМЕЧАНИЕ: Только значение "true" может быть установлено для того, чтобы сообщить QCObjects, что содержание шаблона компонента должно быть кэшировано. Любое другое значение будет истолковано как "false". Использование: .. code:: html Атрибут объявления свойства данных ''''''''''''''''''''''''''''''''''' **````** Устанавливает статическое значение свойства для объекта данных в экземпляре компонента.ЗАМЕЧАНИЕ: Объявление свойства данных было создано с целью предоставить простой способ имитации динамического компонента с привязками шаблонов. Не используйте его, полагая, что это двусторонняя привязка данных. Хотя вы можете получить двустороннее поведение доступом к объекту данных из экземпляра компонента, это не так для самого тега компонента. Объявление свойства данных в тегах компонентов является односторонней привязкой данных из-за архитектуры дерева компонентов.Атрибут класса контроллера '''''''''''''''''''''''''' **````** Определяет пользовательский класс контроллера для экземпляра компонента Использование: .. code:: html компонент> Атрибут класса представления '''''''''''''''''''''''''''' **````** Определяет пользовательский класс представления для экземпляра компонента Использование: .. code:: html компонент> Атрибут класса компонента ''''''''''''''''''''''''' **````** Определяет пользовательский класс компонента для экземпляра компонента Использование: .. code:: html компонент> Атрибут класса эффекта '''''''''''''''''''''' **````** Определяет пользовательский класс эффекта для экземпляра компонента Использование: .. code:: html компонент> Атрибут источника шаблона '''''''''''''''''''''''''' **````** Устанавливает свойство tplsource относительно связанных экземпляров компонента. Возможные значения - "none" или "default". Использование: .. code:: html компонент> Атрибут tplextension '''''''''''''''''''' **````** Устанавливает свойство tplextension связанного экземпляра компонента. Возможные значения — любое расширение файла. Значение по умолчанию — "html". Использование: .. code:: html компонент> ComponentURI ^^^^^^^^^^^^ Помощник для определения URI шаблона для компонента в нормализованном виде. Пример: ''''''' .. code:: javascript var templateURI = ComponentURI({ 'COMPONENTS_BASE_PATH':CONFIG.get('componentsBasePath'), 'COMPONENT_NAME':'main', 'TPLEXTENSION':"tpl.html", 'TPL_SOURCE':"по умолчанию" }); console.log(templateURI); // это выведет что-то вроде "templates/components/main.tpl.html", в зависимости от ваших настроек CONFIG componentLoader ^^^^^^^^^^^^^^^ Загружает экземпляр компонента на низком уровне и добавляет содержимое шаблона компонента в его тело. В большинстве случаев вам не потребуется вызывать componentLoader для загрузки компонента. Это происходит автоматически при необходимости, вызывается QCObjects. componentLoader возвращает промис, который выполняется после успешной загрузки компонента и отклоняется при неудачной загрузке. Использование: '''''' .. code:: javascript [Promise] componentLoader(componentInstance, load_async) Где componentInstance — это экземпляр компонента, созданный с помощью *``New(ComponentDefinitionClass)``* Пример: '''''''.. code:: javascript componentLoader(componentInstance, load_async).then( (successStandardResponse) => { // Загрузка компонента прошла успешно var request = successStandardResponse.request; var component = successStandardResponse.component; }, (failStandardResponse) => { // Загрузка компонента не удалась var component = failStandardResponse.component; } ); buildComponents ^^^^^^^^^^^^^^^ Перестраивает каждый компонент, являющийся дочерним элементом элемента DOM, владельцем метода. В большинстве случаев вам не потребуется вызывать `buildComponents` для сборки или пересборки каждого компонента в DOM. Это происходит автоматически при необходимости, вызывается QCObjects. Использование: ''''''''' .. code:: javascript [элемент].buildComponents() Пример: ''''''''' .. code:: javascript document.buildComponents() Контроллер ~~~~~~~~~~ Встроенный класс QCObjects для определения контроллера Представление ~~~~~~~~~~~~ Встроенный класс представления QCObjects для определения представления VO ~~ Встроенный класс QCObjects для определения объекта значения Сервис ~~~~~~ Тип класса QCObjects для сервисов. Свойства ^^^^^^^^ **`Service.domain`**: Возвращает строку с доменом вашего приложения. Это значение автоматически устанавливается QCObjects при загрузке. **`Service.basePath`**: Возвращает строку с базовым путём URL вашего приложения. Это значение автоматически устанавливается QCObjects при загрузке.**`Service `__.url** Представляет собой строку, которая представляет полный URL сервиса. Она может быть абсолютным или относительным к basePath, когда это применимо. Также она может быть внешним URL.ЗАМЕЧАНИЕ: Для загрузки сервиса внешнего ресурса вам нужно указать параметр `external` как `true`, используя `serviceLoader`. **`Service `__.name** Представляет собой строку, которая представляет имя компонента. Имя сервиса может быть любым алфавитно-цифровым значением, которое идентифицирует экземпляр сервиса. Это не уникальный идентификатор, а только описательное имя. **`Service `__.method** Представляет собой строку, которая представляет метод HTTP или HTTPS. Возможные значения включают: "GET", "POST", "PUT", ... и любой другой, который принимает вызовы REST сервисов. **`Service `__.data** Представляет собой объект данных сервиса. Когда QCObjects загружает сервис, он получает ответ и интерпретирует его как шаблон. Таким образом, после получения ответа от сервиса, каждое свойство объекта данных будет связано с меткой шаблона, представляющей то же свойство внутри содержимого шаблона между двойными фигурными скобками (например: {{prop1}} в содержимом шаблона будет представлять `data.prop1` в экземпляре сервиса). **`Service `__.cached** Представляет логическое значение, которое сообщает QCObjects, нуждается ли ответ сервиса в кэшировании или нет. Когда сервис кэшируется, содержимое шаблона, загруженное с URL сервиса, будет загружено только один раз. Вам следует установить это значение как `false` для каждого экземпляра сервиса, чтобы гарантировать, что сервис загружается из ресурса, а не из кэша хранения. Методы ^^^^^^**`Служба `__.set('свойство', значение)** Устанавливает значение для свойства службы. **`Служба `__.get('свойство')** Возвращает значение свойства службы. serviceLoader ~~~~~~~~~~~~~ Загружает экземпляр службы и возвращает промис, который выполняется при успешной загрузке ответа службы и отклоняется при неудачной загрузке ответа. Использование: ^^^^^^^^^^^^^ .. code:: javascript [Промис] serviceLoader(экземпляр_службы) Пример: ^^^^^^^ .. code:: javascript Класс('MyTestService', Служба, { имя: 'myservice', внешний: истинно, кэшированный: ложь, метод: 'GET', заголовки: {'Content-Type': 'application/json'}, url: 'https://api.github.com/orgs/QuickCorp/repos', с_кредентиалами: ложь, _new_: () => { // служба создана }, завершено: () => { // служба загружена } }); var служба = serviceLoader(Новый(MyTestService, { данные: {param1: 1} })).тогда( (успешныйОтвет) => { // Это покажет ответ службы как обычный текст консоль.лог(успешныйОтвет.служба.шаблон); }, (неудачныйОтвет) => { } ); JSONService ~~~~~~~~~~~ Это встроенное определение для класса JSON-службы. Свойства ^^^^^^^^ **`JSONService `__.домен** Возвращает строку с доменом вашего приложения. Он автоматически устанавливается QCObjects при загрузке. **`JSONService `__.основнойПуть** Возвращает строку с основным путём URL вашего приложения. Он автоматически устанавливается QCObjects при загрузке.**`JSONService `__.url** Представляет собой строку, представляющую полный URL службы. Она может быть абсолютным или относительным к основному пути, когда это применимо. Также может быть внешним URL. **ЗАМЕЧАНИЕ:** Для загрузки службы внешнего ресурса вам нужно указать параметр `external` как `true`, используя `serviceLoader`. **`JSONService `__.name** Представляет собой строку, представляющую имя компонента. Имя службы может быть любым алфавитно-цифровым значением, которое идентифицирует экземпляр службы. Это не уникальный идентификатор, а только описательное имя. **`JSONService `__.method** Представляет собой строку, представляющую HTTP или HTTPS метод. Возможные значения: `"GET"`, `"POST"`, `"PUT"`... любой другой, принимаемый вызовами REST-сервисов. **`JSONService `__.data** — это объект, представляющий данные сервиса. Когда QCObjects загружает сервис, он получает ответ и интерпретирует его как шаблон. Поэтому после получения ответа от сервиса каждое свойство объекта данных будет связано с меткой шаблона, которая представляет то же самое свойство внутри двойных фигурных скобок (например: `{{prop1}}` в контенте шаблона будет представлять `data.prop1` в экземпляре сервиса).**`JSONService `__.cached** — это булево значение, которое сообщает QCObjects, требуется ли кэширование ответа сервиса или нет. Когда сервис кэшируется, содержимое шаблона, загруженное с помощью URL сервиса, будет загружено только один раз. Вам следует установить это значение как `false` для каждого экземпляра сервиса, чтобы гарантировать, что сервис будет загружен из ресурса, а не из кэша.Методы ^^^^^^ **`JSONService `__.set('prop', value)** — Устанавливает значение для свойства сервиса. **`JSONService `__.get('prop')** — Возвращает значение свойства сервиса. Пример: ^^^^^^^^ .. code:: javascript Class('MyTestJSONService', JSONService, { name: 'myJSONservice', external: true, cached: false, method: 'GET', withCredentials: false, url: 'https://api.github.com/orgs/QuickCorp/repos', _new_: function() { // Сервис был создан delete this.headers.charset; // Не отправлять заголовок charset }, done: function(result) { _super_('JSONService', 'done').call(this, result); } }); var service = serviceLoader(New(MyTestJSONService, { data: { param1: 1 } })).then( (successfulResponse) => { // Это выведет ответ сервиса как JSON-объект console.log(successfulResponse.service.JSONresponse); }, (failedResponse) => { } ); ConfigService ~~~~~~~~~~~~~ Этот встроенный класс используется для загрузки конфигурационных настроек из файла config.json. Пример: ^^^^^^^^ .. code:: javascript // Для установки относительного URL файла config.json ConfigService.configFileName = 'config.json'; // Это делается по умолчанию CONFIG.set('useConfigService', true); // Использование config.json для настроек конфигурации SourceJS ~~~~~~~~ SourceCSS ~~~~~~~~~ ArrayList ~~~~~~~~~ ArrayCollection ~~~~~~~~~~~~~~~ Effect ~~~~~~ Timer ~~~~~ SDK --- Краткое руководство ==================== Шаг 1: Начните создание основного файла импорта и назовите его как: cl.quickcorp.js. Разместите его в директории packages/js/. ------------------------------------------------------------------------------------------------------------------------------.. code:: javascript "use strict"; /* * QuickCorp/QCObjects распространяется под лицензией * GNU Lesser General Public License v3.0 * [LICENSE] (https://github.com/QuickCorp/QCObjects/blob/master/LICENSE.txt) * * Условия данной копироводительской лицензии связаны с предоставлением полного исходного кода защищенных работ и модификаций под тем же лицензионным соглашением или GNU GPL v3. От авторских прав и условий лицензии нельзя отказываться. Вкладчики предоставляют явное согласие на передачу патентных прав. Однако более крупное приложение, использующее защищенное приложение через предоставленные этим защищенным приложением интерфейсы, может распространяться на других условиях и без доступа к исходному коду для этого большего приложения. * * Авторское право © 2015 Джейн Макучка, * * Каждому разрешено делать и распространять точные копии данного лицензионного соглашения, но изменять его запрещается. */ Import('external/libs'); Import('cl.quickcorp.model'); Import('cl.quickcorp.components'); Import('cl.quickcorp.controller'); Import('cl.quickcorp.view'); Package('cl.quickcorp', [ Class('FormValidator', Object, { }) ]); Шаг 2: Затем создайте некоторые сервисы, унаследовавшие классы, в файле `js/packages/cl.quickcorp.services.js`: --- Файл `js/packages/cl.quickcorp.services.js`:.. code:: javascript "use strict"; /* * QuickCorp/QCObjects распространяется под лицензией * GNU Lesser General Public License v3. 0 * [LICENSE](https://github.com/QuickCorp/QCObjects/blob/master/LICENSE.txt) * * Условия этой копировочной лицензии зависят от предоставления полного исходного кода * лицензированных работ и модификаций под тем же лицензионным соглашением или GNU GPL v3. * Авторские права и условия лицензий должны быть сохранены. Вкладчики предоставляют явное * разрешение на патентные права. Однако более крупная работа, использующая лицензированную работу * через предоставленные ею интерфейсы, может распространяться на других условиях и без исходного кода * для более крупной работы. * * Copyright (C) 2bk 2015 Jean Machuca, * * Каждый имеет право копировать и распространять точные копии этого лицензионного документа, * но изменения в нем запрещены. */ Пакет('cl.quickcorp.service', [ Класс('JsonService', { метод: 'GET', закэширован: false, заголовки: { 'Content-Type': 'application/json', 'charset': 'utf-8' }, JSONresponse: null, завершено: function(результат) { консоль.лог("***** ПОЛУЧЕНО ОТВЕТ:"); консоль.лог(результат.сервис.шаблон); это.JSONresponse = JSON.парс(результат.сервис.шаблон); алерт(это.шаблон); } }), Класс('FormSubmitService', { метод: 'POST', закэширован: false, заголовки: { 'Content-Type': 'application/json' }, JSONresponse: null, завершено: function(результат) { console.log("***** ВЫЗОВ FormSubmitService"); this.JSONResponse = JSON.parse(результат.сервис.шаблон); //TODO случай успеха console.log("***** УСПЕХ!"); console.log(this.JSONResponse); }, провал: function(результат) { //TODO отрицательный случай console.log("***** ОШИБКА"); } }) ] Шаг 3: Теперь пора создать компоненты (`cl.quickcorp.components.js`) ----------------------------------------------------------------------.. code:: javascript "use strict"; /* * QuickCorp/QCObjects распространяется под лицензией * GNU Lesser General Public License v3.0 * * Условия этой копировочной лицензии зависят от предоставления полного исходного кода лицензированных работ и модификаций под такой же лицензию или GNU GPL v3. Авторские права и условия лицензий должны сохраняться. Вкладчики предоставляют явное разрешение на патентные права. Однако более крупная работа, использующая лицензированную работу через предоставленные ей интерфейсы, может распространяться на других условиях и без исходного кода для более крупной работы. * * Авторское право (C) 2015 Jean Machuca, * * Каждому разрешается делать и распространять точные копии этого документа лицензии, но изменять его запрещено. */ Package('cl.quickcorp.components', [ Class('FormField', Component, { cached: false, reload: true, createBindingEvents: function() { var _executeBinding = this.executeBinding; var thisobj = this; var _objList = this.body.querySelectorAll(this.fieldType); for (var _datak = 0; _datak < _objList.length; _datak++) { var _obj = _objList[_datak]; _obj.addEventListener('change', function(e) { logger.debug('Выполняется событие изменения'); thisobj.executeBindings(); }); _obj.addEventListener('keydown', function(e) { logger.debug('Выполняется событие нажатия клавиш'); thisobj.executeBindings(); }); } }, executeBinding: function(_obj) { var _datamodel = _obj.getAttribute('data-field'); logger.```rst debug('Привязка ' + _datamodel + ' для ' + this.name); this.data[_datamodel] = _obj.value; }, executeBindings: function () { var _objList = this.body.querySelectorAll(this.fieldType); for (var _datak = 0; _datak < _objList.length; _datak++) { var _obj = _objList[_datak]; var _datamodel = _obj.getAttribute('data-field'); logger.debug('Привязка ' + _datamodel + ' для ' + this.name); this.data[_datamodel] = _obj.value; } }, завершено: function() { var это_объект = this; это_объект.executeBindings(); это_объект.createBindingEvents(); logger.debug('Поле загружено: ' + это_объект.fieldType + '[name=' + это_объект.name + ']'); } }), Класс('КнопочноеПоле', ПолеФормы, { fieldType: 'button' }), Класс('ПолеВвода', ПолеФормы, { fieldType: 'input' }), Класс('ТекстовоеПоле', ПолеФормы, { fieldType: 'textarea' }), Класс('ПолеЭлектроннойПочты', ПолеФормы, { fieldType: 'input' }) ]); Шаг 4: После объявления компонентов вы теперь захотите написать контроллеры (cl.quickcorp.controller.js) ------------------------------------------------------------------------------------------------------------------ ``` Вот исправленный текст с учетом всех правил перевода: - Удалены лишние пробелы перед методами. - Переведены строки внутри `logger.debug`. - Устранены ошибки в названии метода `завершено` (переведено как "completed"). - Сохранена структура и разметка исходного текста... code:: javascript "use strict"; /* * QuickCorp/QCObjects распространяется под лицензией * GNU Lesser General Public License v3.0 * [LICENSE](https://github.com/QuickCorp/QCObjects/blob/master/LICENSE.txt) * * Условия этой копиродительской лицензии зависят от предоставления полного исходного кода лицензированных работ и модификаций под тем же лицензионным соглашением или GNU GPL v3. Авторские права и условия лицензий должны быть сохранены. Вкладчики предоставляют явное согласие на патентные права. Однако более крупное приложение, использующее лицензированное приложение через предоставленные им интерфейсы, может распространяться под другими условиями и без исходного кода для этого большего приложения. * * Copyright (C) 2bk 2015 Jean Machuca, * * Каждому разрешено делать и распространять точные копии этого документа лицензии, но изменять его запрещается. */ "use strict"; Package('cl.quickcorp.controller', [ Class('MainController', Object, { _new_: function () { //TODO: Реализовать logger.debug('MainController элемент инициализирован'); } }), Class('MyAccountController', Object, { component: null, done: function () { var controller = this; logger.debug('MyAccountController элемент инициализирован'); this.component.body.setAttribute('loaded', true); }, _new_: function (o) { //TODO: Реализовать this.component = o.component; } }) ]);Шаг 5: Для использования в HTML5 коде вам потребуется выполнить некоторые настройки между тегами ` Импортировать('cl.quickcorp'); # это импортирует ваш основной файл: cl.quickcorp.js в путь к файлу js/packages/ .. |paypal| image:: https://www.paypalobjects.com/webstatic/mktg/logo/AM_mc_vs_dc_ae.jpg :target: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=UUTDBUQHCS4PU&source=url