Простые решения JavaScript - ссылки

Категория: Код

– Автор: Игорь (Администратор)

Достаточно часто приходится изобретать велосипеды или использовать тяжелые фреймворки для решения простых и давно известных задач. Как бы не развивались браузеры, язык JavaScript остается одним и тем же. И его нативный набор функций не меняется. Конечно, нельзя обвинять создателей языка. Ведь, именно благодаря этому языку вы сейчас можете наслаждаться богатыми интерфейсами сайтов. Загрузка данных по средствам Ajax. Динамические элементы. Красивые формы. Всплывающие окошки. И многое другое.

Примечание: Существуют и другие языки - можете сказать вы. Но, если быть честным, то сегодня JavaScript - это уже больше, чем норма.

Однако, как бы сегодня не были красивы и изящны интерфейсы, простые задачи остаются одними и теми же. Одной из таких задач является построение ссылки на JavaScript на основе анкора (текста ссылки), url и заданных параметров. Такая задача может возникать где угодно. Во время построения динамических меню. Преобразование существующих элементов. Формирование добавляемых элементов. 

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

Итак, сам код:

(function () {
    if ((window.html || {}).link)
        return; 
        
    (window.html = window.html || {}).link 
        =  function (text, url, options, outtype) {
            var result,
                _url = url, // выходной url
                _text, // выходной текст
                _outtype = (!!outtype ? 1 : 0);
 
            // Определяем выход
            // По умолчанию это текст
            if (!_outtype)
                result = '<a href="';
            else
                result = document.createElement('a');
            
            // Если определены параметры, то добавляем их
            if (options) {
                // По умолчанию любое число это ID
                if (typeof (options) == 'number') {
                    _url += '?ID=' + options;
                }
                // По умолчанию любая строка - это Name
                if (typeof (options) === 'string') {
                    _url += '?Name=' + options;
                }
                // Если мы передали массив параметров, то производим их обработку
                else if (typeof (options) === 'object' && options.constructor === Array) {
                    // Если есть элементы
                    if (options.length > 0)
                        // Берем первый параметр, если это не объект, 
                        // то значит формируем ссылку вида /../../..
                        if (typeof (options[0]) === 'number' || typeof (options[0]) === 'string') {
                            for (var counter = 0; counter < options.length; counter++) {
                                _url += '/' + options[counter];
                            }
                        }
                        // Берем первый параметр, если это объект, 
                        // то значит формируем ссылку вида ?name=value&name=value...
                        // из расчета, что каждый объект 
                        // { 
                        //   name: 'Имя параметра', 
                        //   value: 'Значение параметра' 
                        // }
                        else {
                            for (var counter = 0; counter < options.length; counter++) {
                                if (counter === 0)
                                    _url += '?' + options[counter].name + '=' + options[counter].value;
                                else
                                    _url += '&' + options[counter].name + '=' + options[counter].value;
                            }
                        }
                }
            }
 
            // Если текст представляет собой дату формата C#
            if (typeof (text) === 'string' && text.indexOf('/Date(') === 0) {
                _text = (new Date(parseInt(text.substring(6)))).toLocaleString();
            }
            // Если текст это объект Date 
            else if (typeof (text) === 'object' && text.constructor === Date)
                _text = text.toLocaleString();
            // Иначе добавляем как есть
            else
                _text = text;
 
            if (!_outtype) {
                return result + _url + '" >' + _text + '</a>'
            }
            else {
                result.href = _url;
                result.innerHTML = _text;
                return result;
            }
        };
})();

В рамках выполнения данного кода, создается функция window.html.link с параметрами:

• text - сам текст
• url - фиксированная часть адреса ссылки
• options - это может быть как число (имя параметра будет ID), строку (имя параметра будет Name), массив чисел/строк (создастся ссылка вида /../../..), массив объектов { name, value } (создастся ссылка вида ?парам1=знач1&парам2=знач2&...)
• outtype - определение возвращаемого результата (булевая переменная). Если false или не указана, то возвращается текстовое представление ссылки. Если true или любое значение, которое выдает true в выражении (!!outtype), то возвращается dom элемент

Как видите, ничего сложного нет. Основную часть скрипта занимает форматирование. Тем не менее, примерно такой велосипед достаточно часто приходится писать с нуля или вообще составлять вручную.

Чтобы не быть голословным, вот блок с возможностью запустить код с разными параметрами (Осторожно: используется функция eval). 

// Вывод результата var result = document.getElementById("resultOper"); result.innerHTML = ''; // Формируем простой линк с фиксированным значением result.innerHTML += html.link("Простая ссылка", "http://ida-freewares.ru"); result.innerHTML += '<br />'; // Формируем простой линк с параметром строки result.innerHTML += html.link("Простая ссылка c параметром", "http://ida-freewares.ru", 'str'); result.innerHTML += '<br />'; // Формируем линк ?знач1... result.innerHTML += html.link("Простая ссылка c параметрами ?val1..", "http://ida-freewares.ru", [{ name: 'key1', value: 'value1'}, { name: 'key2', value: 'value2'}]); result.innerHTML += '<br />'; // Формируем линк /../.. result.innerHTML += html.link("Простая ссылка c параметрами /../..", "http://ida-freewares.ru", ['value1', 'value2', 2]); result.innerHTML += '<br />'; // Формируем линк /../.. c текущей датой вместо текста result.innerHTML += html.link(new Date(), "http://ida-freewares.ru", ['value1', 'value2', 2]); result.innerHTML += '<br />'; // Формируем DOM элемент с линком /../.. result.appendChild( html.link("DOM элемент с ссылкой c параметрами /../..", "http://ida-freewares.ru", ['value1', 'value2', 2], true) ); result.innerHTML += '<br />';

Выполнить

Результат выполнения