Как и почему я построил плагин поиска видеоконтроля

Обо мне

Меня зовут Джон Капантзакис, и я веб-разработчик из Греции. Я работаю полный рабочий день за последние 4 года в прекрасном городе Салоники Используя такие технологии, как ASP.NET/C#, JavaScript/Teadercript и HTML/CSS.

Проблема, которую я хотел решить

Работа над продуктом, который обрабатывает данные HR, часто необходимо отобразить сложную структуру данных в форме, которую пользователь должен иметь возможность фильтровать и выбирать определенные элементы из коллекции. Такая структура может быть отношения между отделами и сотрудниками компании. Каждый сотрудник принадлежит кафедру, и каждый отдел принадлежит другому департаменту, за исключением от одного, верхнего узла. Этот вид структуры можно описать как дерево Отказ

Есть некоторые доступные элементы управления, которые можно использовать для отображения структуры дерева данных, таких как Teleerik’s Raddropdowntree Контроль, который предлагает функциональность поиска, многоизведочные, выбора дочерних узлов, проверьте все и чистый выбор и многие другие.

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

Показать структуру дерева в более широком виде
Вернуть функциональность выбора
Поиск по регулярному выражению
Возможность добавления пользовательских функций

Что такое поисковой панельюре?

SearchareaControl это плагин jQuery, который позволяет вам Дисплей , Поиск и Выберите один или несколько предметов из Статью данных деревьев Отказ Плагин был разработан для инициализации на элементах кнопок. Как только плагин инициализирован на кнопке, он ограничивает событие Click с появлением всплывающего окна, которое содержит данные, который пользователь, определенный в параметрах в процессе инициализации. Следующая картина иллюстрирует типичный корпус использования плагина.

Создание плагина

Давайте начнем с простого плагина jQuery, который, когда инициализируется на коллекции jQuery, применяет некоторые правила CSS к выбору.

; (function ($, window, document, undefined) {
    var pluginName = 'searchAreaControl';
    function Plugin(element, options) {        
        this.$el = $(element);
        this.opt = options;
        this.init();
    }
  
    Plugin.prototype = {
      init: function() {
          this.$el.css('color',this.opt.color);
      }
    }
  
    $.fn[pluginName] = function (options) {
        return this.each(function() {
            new Plugin(this, options);
        });
    }

})(jQuery, window, document);

Инициализация плагина на элементе HTML, как это

$('#myElem').searchAreaControl({ color: 'green' });

приведет к применению правила CSS Цвет: зеленый (Как пропущено через объект параметров плагина) к этому элементу. Вы можете увидеть рабочую демонстрацию здесь Отказ

Теперь давайте объясним вышеуказанный код шаг за шагом. Во-первых, посмотрите на следующий кусок кода.

$.fn[pluginName] = function (options) {
    return this.each(function() {
        new Plugin(this, options);
    });
}

Согласно jQuery Учебный центр Это способ написать базовое расширение jQuery или плагин. Просто добавьте функцию с нужным именем плагина к $ .fn (эквивалентно $ .Prototype ) И вы готовы пойти! Обратите внимание, что внутри тела функции мы возвращаем Это. Одним (...) Метод поддерживать jQuery’s цепность Отказ

Следующий шаг – обернуть вышеуказанный код внутри IIFE Чтобы создать лексику для нашего плагина и предотвратить глобальное загрязнение пространства имен. Как видите, мы проходим jquery , окно и Документ Как аргументы в самостоятельно выполняемую функцию, присвоение их значений $ , окно , Документ и undefined , соответственно.

; (function ($, window, document, undefined) {
    var pluginName = 'searchAreaControl';
    $.fn[pluginName] = function (options) {
        return this.each(function() {
            new Plugin(this, options);
        });
    }
})(jQuery, window, document);

Но, подождите минуту, мы прошли 3 аргумента, но мы назначаем значения до 4 переменных, оставив undefined переменная без значения. Точно! Это то, что мы пытаемся здесь достичь, мы пытаемся защитить undefined Собственность от потенциальной модифицированной стоимости undefined от глобальной массы (кто-то просто объявил, что undefined ), не имело ничего для undefined недвижимость, так что это вульб по-настоящему undefined Отказ Ведущий ; Защищает не правильно закрытые сценарии, которые могут присутствовать перед нашим сценарием.

Наконец, мы можем добавить Плагин Декларация функции и добавить метод init, используя Объект. Прототип имущество. Это кодовая база, которую мы собираемся расширять, чтобы в конечном итоге с окончательным плагином.

Объявление параметров по умолчанию

В текущем состоянии, если мы попытаемся инициализировать наш плагин, не предоставив объект параметров, мы получим Необработанный типError: не может прочитать свойство «Цвет» undefined ошибка. Нам нужно предоставить отступление в случае, если наш плагин инициализируется без объекта параметров.

; (function ($, window, document, undefined) {
    var pluginName = 'searchAreaControl';
    function Plugin(element, options) {        
        this.$el = $(element);
        this.opt = $.extend(true, {}, $.fn[pluginName].defaults, options);        
        this.init();
    }
  
    Plugin.prototype = {
      init: function() {
          this.$el.css('color',this.opt.color);
      }
    }
  
    $.fn[pluginName] = function (options) {
        return this.each(function() {
            new Plugin(this, options);
        });
    }
    
    $.fn[pluginName].defaults = {
        color: 'green'
    }

})(jQuery, window, document);

Теперь мы можем инициализировать плагин без объекта параметров и все еще получаю зеленый текст. Мы можем достичь этого в два этапа. Во-первых, мы добавляем по умолчанию Имущество для $ .fn.searchareaControl Объявив его значение, чтобы быть нашим объектом параметров по умолчанию:

$.fn[pluginName].defaults = {
    color: 'green'
}

Затем мы должны объединить объект полученных опций с параметрами по умолчанию, объявленные внутри плагина. Мы можем достичь этого с jQuery продлить () Метод такой:

this.opt = $.extend(true, {}, $.fn[pluginName].defaults, options);

Объявление публичных методов

Как только плагин был успешно инициализирован, мы можем захотеть получить выбранные значения или очистить выбранные элементы и т. Д. Это может быть достигнуто с помощью некоторых Общественные методы (API) выставлен на плагине, как это:

let selectedNodes = $('#myElem').searchAreaControl('getSelectedNodes');

В этом случае GetSelecednodes является публичным методом, выставленным плагином. Но как мы скажем плагин, чтобы прочитать имя метода, передаваемое как аргумент в конструкторе плагина? Мы должны изменить код, чтобы выполнить следующую проверку, каждый раз, когда мы называем конструктор плагинов:

Если плагин называется без аргументов ( Варианты ) Или, если мы передаем объект ( Veryof Options ), верните новый экземпляр плагина
Если плагин называется аргументами типа строка ( Варианты типа ), позвоните соответствующим методом

$.fn[pluginName] = function (options) {
  var args = arguments;
  if (options === undefined || typeof options === 'object') {
    // New plugin instance with chainability
    return this.each(function () {
      if (!$.data(this, 'plugin_' + pluginName)) {
        $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
      }
    });
  } else if (typeof options === 'string') {
    // Return method result (no chainability)
    var instance = $.data(this[0], 'plugin_' + pluginName);
    return instance[options].apply(instance, Array.prototype.slice.call(args, 1));
  }
}

Мы также должны объявить getselecednodes () метод пульса с использованием Объект. Прототип Недвижимость, как это:

Plugin.prototype = {
  ...
  // Private method
  _getData_SelectedNodes: function() {
  		// Return selected nodes
  },
  // Public method
  getSelectedNodes: function() {
    return this._getData_SelectedNodes();
  }
}

Это главная идея того, как мы объявляем частные и публичные методы внутри плагина. Для получения дополнительной информации вас рекомендуются проверить последнюю версию, доступную в REPO плагинов:

Репо

Что происходит, когда плагин называется

Как только мы позвоним конструктору плагина, проводится следующие шаги, чтобы построить окончательный контроль пользователя:

'searchareaControl.beforeinit' Событие срабатывает, чтобы уведомить, что плагин собирается начать его строительство
Плагин устанавливает определенный текст на целевой элемент ^[1]
Плагин устанавливает предоставленную DataSource
'searchareaControl.beforebuildpopup' Событие срабатывает, чтобы уведомить, что плагин собирается начать строить всплывающее окно HTML Markup
Всплывающее окно, которое будет отображаться на главной кнопке, нажмите и удерживает структуру данных дерева (DataSource)
'searchareaControl.beforeInitsearcharea' Событие срабатывает, чтобы уведомить, что всплывающее окно успешно построен, и плагин готов к инициализации
Это шаг, когда плагин создает конечные элементы (всплывающее окно, корпус и нижний колонтитул с различными кнопками)
Плагин добавляет новый слушатель событий, чтобы прослушать в Нажмите событие на целевом элементе, чтобы показать всплывающее окно

Процесс инициализации теперь будет завершен, и мы готовы вызывать любой общедоступный метод на определенном экземпляре плагина.

Советы и советы

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

Распределите и изолируйте свой код на небольшие (как можно более) функции, которые выполняют одну задачу на функцию и всегда возвращают один и тот же результат, учитывая одинаковые параметры ( Pure Functions ). Небольшие кусочки кода, которые создают предсказуемые результаты, легко поддерживать и быть проверены. Рассылав свой код в небольшие изолированные функциональные детали, помогают вам оставить вашу кодовую базу более организованной и читабельными, поскольку проект растет.

Тестирование вашего кода, включая Агрегаты тесты всегда очень хорошая идея. Представьте, что вы создали метод, который выполняет определенную задачу и через некоторое время вы внесите некоторые изменения в другое место, влияющее на функциональность этого метода. Настройка некоторых модульных тестов, проверка функциональности метода, которые могли бы загнать ошибку и уведомить вас, чтобы исправить код перед отправкой новой версии с скрытой ошибкой. (Я определенно добавлю модульные тесты в проекте в одном из предстоящих версий! ).

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

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

Резюме

В этом посте мы пытались Illustarte процесс создания плагина jQuery и описал, как SearchareaControl Плагин инициализируется и работает на целевых элементах. У нас есть, также указали несколько советов и советов, которые мы думаем, что они способствуют простудению качества и ремонструации.

Спасибо за прочтение этого поста! Пожалуйста, не стесняйтесь публиковать комментарий, если вы прочитали ничего не вторгаете или если вы просто хотите сказать Hello!