Как библиотека пользовательского интерфейса, я не планирую позволять всем изучать ядро моего комплекта и запоминать мой API. Этот вид последующего метода обучения вообще не имеет значения. Сегодня JQUERY популярен, все узнают JQ, а завтра Seajs станет популярным, и все будут петь Seajs. Таким образом, в KitJs я специально подготовил синтаксический сахар (suger.js) для пользователей JQ, который полностью имитирует JQ API. В дополнение к реализации, интерфейс одинаков, что также удобно для каждого для напрямую трансформировать компоненты комплекта. Конечно, как чисто технический поклонник, гораздо интереснее понять, как внедряется технология, чем использовать ее для идеологии. Конечно, если вы напрямую плагиат код компонента комплекта для соображений KPI или бонус проекта босса для завершения вашего KPI, я не возражаю против такого поведения. Пока вы пьете воду и не забудьте выкопать колодец, и можете продвигать KITJS при взрыве воды с коллегами, я очень благодарен вам. В то же время Кит также является очень молодой библиотекой. Из -за непрерывной разработки существуют некоторые ошибки и проблемы совместимости браузера, что неизбежно. Я один и имею ограниченную энергию. В эту эпоху войны в передней части, больше единомышленников могут сделать его больше и добиться успеха вместе.
В то же время сегодня был выпущен компонент диалога KitJS, а демо -адрес - http://xueduany.github.com/kitjs/kitjs/demo/dialog/demo.html
(I) Формат каталога комплектов
Вернуться к теме, в Kitjs, Kit.js - это существование основного файла. Он содержит некоторые из наиболее часто используемых DOM и объектов, унаследованные операции, а партия string.js, math.js и т. Д. Расширен в соответствии с разделением функций в том же каталоге уровня. Каждый независимый файл JS содержит конструктор класса и экземпляр глобального объекта.
В качестве примера принимая kit.js, он включает в себя класс $ Kit и комплект $ exaction $ (начиная с $, чтобы избежать конфликтов с часто используемыми переменными).
Все остальные типы подвешены на экземплярах $ Kit и экземпляров $ Kit в отношении Link Way, таких как Math.js, который включает в себя $ Kit.math Class и $ Kit.math Emestans, так что в глобальной области есть только два загрязняющих вещества. В то же время, в Kit.js, мы определяем пространство имен под названием $ kit.ui. В физическом каталоге мы используем каталог виджетов того же уровня, что и Kit.js, и каталог с несколькими начальными буквами расположен в ряду.
Все каталоги в каталоге виджетов являются каталогами компонентов KitJS. Каждый независимый файл JS содержит только конструктор класса только для независимых компонентов (не инстанции). Он также может быть совместим с модульным режимом CommonJS (может соответствовать модулям/1.1 Спецификация CommonJS и AMD преобразования. Специфический метод преобразования будет подробно упоминается позже)
(Ii) Шаблон кода по умолчанию компонента комплекта, аннотация соответствует спецификации JSDOC
Давайте возьмем компоненты диалога в качестве примера, каждый компонент похож на следующее
Прежде всего, комментарий JSDOC, какой класс является объявлением @Class, @Require xxx.js, какие компоненты объявляются в зависимости от
(Iii) метод конструктора и инициализации
Каждый класс определяет конструктор в стандартной функции (config) {}. Здесь следует отметить, что конструктор каждого компонента KitJS оставляет за умолчанием параметр конфигурации по умолчанию в качестве входного ввода для персонализированной конфигурации.
В то же время, в конструкторе класса есть статический элемент, объект DefaultConfig, используемый для хранения конфигурации по умолчанию компонента KitJS
При использовании компонентов KitJS первое, что вам нужно сделать, это инициализировать новый объект экземпляра через новый экземпляр. Это просто для инициализации объекта компонента JS. Там еще нет HTML. Вам необходимо выполнить метод инициирования, создать HTML и добавить его в DOC, что эквивалентно наличию плоти и кровь на душу ^_ ^.
Некоторые студенты могут спросить, почему бы не поместить метод init непосредственно в конструктор и не выпустить его отдельно?
1. Потому что родительский класс должен быть создан во время наследования. Когда класс дочернего класса наследует от родительского класса, объект прототипа дочернего класса будет установлен на новый экземпляр родительского класса. Если метод инициализации init помещается в конструктор, HTML будет выполняться непосредственно, а код мусора будет сгенерирован.
2 Из -за ленивой загрузки код HTML должен быть выполнен в нужное время, а не немедленно, когда инициализация инициализация
Таким образом, способ использования компонентов KITJS по умолчанию
После экземпляра выполнить метод инициирования (метод init вернет текущий объект компонента с кодом возврата 7)
Как показано на приведенном выше рисунке, все методы API в диалоговом окне подвешены на прототипе, и наследование и передача объекта экземпляра посредством расширения прототипа.
Наблюдать за кодом конструктора $ kit.ui.dialog.yesorno компонент,
(Iv) Наследование KitJs
Он объявил о отношениях наследования с объектом $ kit.ui.dialog через метод $ kit.inerit. Здесь будет одно одноклассник, который хочет спросить, почему он должен наследовать его в конструкторе вместо того, чтобы писать его прямо на улице?
Причина в:
1.KITJS-это прототипные отношения наследования
2. Чтобы использовать компоненты KitJS, вы должны создать создание компонентного объекта. Каждый компонент создается через конструктор через новый экземпляр.
Поэтому я поместил выполнение отношений наследования в конструкторе кода, так что при создании нового компонента я буду наследовать членов и методы его родительского класса шаг за шагом в соответствии с методом наследования конструктора текущего компонента.
Когда детский класс должен изменить метод родительского класса, вам необходимо только определить метод одного и того же имени в прототипе класса дочернего класса, чтобы переопределить метод наследования родительского класса.
С точки зрения именования, следуется KITJS, а подкласс продолжает имя родительского класса в качестве пространства имен и сохраняет цепь, как показано на приведенном выше рисунке $ kit.ui.dialog, $ kit.ui.dialog.yesorno
Реализация наследования KITJS также очень проста
Скажите объект родительского класса, скопируйте все члены экземпляра родительского класса на прототип подкласса, затем сбросьте конструктор прототипа подкласса в качестве конструктора подкласса, а затем повейте ссылку на конструктор подкласса и укажите на родительский класс. Через $ kit.inherit метод, в процессе экземпляра подкласса $ kit.ui.dialog.yesorno, вы можете унаследовать всех членов родительского класса $ kit.ui.dialog, которые не существуют, и осознавать наследство, аналогичное статическим языкам.
(V) Параметры конфигурации , разборка связи/удаление кожи HTML и CSS?
Конструктор компонента комплекта привык к прохождению параметра типа карт и всегда персонализирует компонент. Когда компонент комплекта будет инициализирован, он автоматически перезаписывает по умолчанию по умолчанию, с помощью пользователя, отправленного параметра конфигурации и начала инициализации.
Для любого компонента невозможно избавиться от изменений в структуре HTML и изменениях в стиле CSS
Комплект разлагает эту связь в конфигурацию параметра конфигурации.
Прежде всего, используйте технологию шаблонов HTML. Комплект выступает с использованием метода $ kit.newhtml для непосредственной корневой строки HTML, генерировать HTML DOM и вставить потоки документов,
Таким образом, мы извлекаем приблизительное HTML -содержание компонента, инкапсулируем его в шаблон строкового HTML и храним его в компоненте по умолчанию. Если пользователю необходимо изменить шаблон HTML, используйте пользовательскую конфигурацию при его инициализации, и переопределить поле шаблона в по умолчании по умолчанию.
В связи и разложении шаблонов HTML и CSS Кит использует трюк, чтобы разложить имя класса с использованием шаблонов JS.
Замените HTML в конфигурации в форме $ {xxx} на $ kit.tpl в методе init
В то же время все стили установлены в CSS.
Если есть несколько наборов скинов, которые необходимо переключить, вы можете изменить имя класса шаблона, указав фактическое имя класса, соответствующее $ {CLS} во время инициализации, чтобы достичь эффекта замены кожи.
(Vi) Резюме
По сути, благодаря анализу кодекса компонента $ kit.ui.dialog.yesorno мы имеем грубое понимание структуры реализации компонента KitJs. На самом деле, не сложно разрабатывать компонент страницы, но разработка компонента страницы, который может адаптироваться к различным требованиям и может быстро деформировать и адаптироваться к развитию в различных случаях. Кит разбивает шаблоны HTML и CSS, настраивает параметры конфигурации и по умолчанию, а подклассы получают свойства и методы родительского класса посредством наследования, и в то же время рефактор соответствующий код в соответствии с различными потребностями бизнеса, что может в основном гибко удовлетворить бизнес -компоненты пользовательского интерфейса различных уровней и среды.
KitJS включает в себя базовую библиотеку и библиотеку пользовательского интерфейса.
Основная библиотека: функция селектора, функция работы DOM, функция анимации, улучшение событий DOM, увеличение структуры данных Hashtree, функция IO, локальная функция хранения, многопоточное чтение, диапазон и т. Д.
Существует также suger.js, который имитирует формат операции jQuery
Библиотека пользовательского интерфейса включает в себя: улучшенные элементы формы, всплывающие слои, медиаплееры, структуры проверки, поток водопада, связь, слайд-шоу, календари, компоненты загрузки, шаблонные двигатели и т. Д.