Для получения полного доступа
зарегистрируйтесь


Эта библиотека проста в использовании, имеет удобный API, небольшой вес, множество локализаций. Далее мы разберём пример её использования.

Продолжение

Для начала задаём сам шаблон прямо в HTML страницы:

<script type="html/tpl" id="my-template">
<div class="item">
    <h1>{title}</h1>
    <p class="description">{description}</p>
</div>
</script>

Далее реализовываем сам метод получения строки с заменёнными плейсхолдерами:

function renderTemplate(name, data) {
    var template = document.getElementById(name).innerHTML;

    for (var property in data) {
        if (data.hasOwnProperty(property)) {
            var search = new RegExp('{' + property + '}', 'g');
            template = template.replace(search, data[property]);
        }
    }
    return template;
}

Использовать можно так:

var html = renderTemplate('my-template', {
    title: "My cool thing",
    description: "It is really cool, isn't it?"
});

Стоит отметить, что экранирование спецсимволов не делается, так что будьте осторожны.

function removeURLParameter(url, parameter) {
    //prefer to use l.search if you have a location/link object
    var urlparts= url.split('?');   
    if (urlparts.length>=2) {

        var prefix= encodeURIComponent(parameter)+'=';
        var pars= urlparts[1].split(/[&;]/g);

        //reverse iteration as may be destructive
        for (var i= pars.length; i-- > 0;) {    
            //idiom for string.startsWith
            if (pars[i].lastIndexOf(prefix, 0) !== -1) {  
                pars.splice(i, 1);
            }
        }
        
        if(pars.length > 0) {
            url= urlparts[0]+'?'+pars.join('&');
        } else {
            url= urlparts[0];
        }

        return url;
    } else {
        return url;
    }
}


var url = 'https://jsfiddle.net/?test=123123&qwe=er24';

alert(removeURLParameter(url, 'qwe')); // https://jsfiddle.net/?test=123123

У меня была задача, сделать добавление видео в чат. Для этого пользователю достаточно указать ссылку на видео, затем из мы извлекаем id, который можем передать в embed, и в чате уже вывести видео.

Проблема была в следующем, видов ссылок на видео с ютуба, может быть два (или больше).

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

UPD. Используется версия jestonedev

function youTubeGetId(url) {
    var expression = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be[.]?\/|youtube\.com[.]?\/(?:embed\/|v\/|watch\/?\?(?:\S+=\S*&)*v=))([\w-]{11})\S*$/;
    return url.match(expression) ? RegExp.$1 : undefined;
}
function isInt(n){
    return Number(n) === n && n % 1 === 0;
}

function isFloat(n){
    return Number(n) === n && n % 1 !== 0;
}

При не сложной структуре разметки, вы можете создавать одностраничные сайты — которые хорошо смотрятся для презентации продукта, услуги.

Чтобы понять о чём речь, смотри демо

Продолжение

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

parseUrl('https://gostash.it/ru/stashes/create?type=snippet')

В ответ получаем следующее:

{
    "protocol":"https:",
    "host":"gostash.it",
    "hostname":"gostash.it",
    "pathname":"/ru/stashes/create",
    "search":"?type=snippet",
    "hash":""
}

Сам скрипт:

  function parseUrl(href) {
    const match = href.match(/^(https?\:)\/\/(([^:\/?#]*)(?:\:([0-9]+))?)([\/]{0,1}[^?#]*)(\?[^#]*|)(#.*|)$/);

    return {
      protocol: match[1],
      host: match[2],
      hostname: match[3],
      port: match[4],
      pathname: match[5],
      search: match[6],
      hash: match[7],
    };
  }

Простая в использовании библиотека, позволяет строить красивые графики использую <canvas>.

Фичи

— Библиотека содержит 8 типов графиков
— Графики адаптивны — будут выглядеть везде хорошо, как на десктопах, так и на мобильных устройствах
— Можно совмещать разные типы графиков
— Отличная документация
— Простое API

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

Продолжение

На сайте Designmodo предоставлена большая подборка плагинов, без дополнительных библиотек типа jQuery.

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

Plyr (Github)
Красивый плеер для воспроизведения видео с таких сервисов как Youtube, Vimeo

Продолжение

function getIndexOfElem(elem) {
  if (elem instanceof Element) {
    return Array.prototype.indexOf.call(elem.parentElement.children, elem);
  }
}