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

Раздел:
Подраздел:
Языки:


samdark  Yii, PHP, JavaScript, Java, Android, SQL, OOP, OOD
  • Репутация: 313
  • Сниппеты: 55
  • Ревизии: 5

Для начала задаём сам шаблон прямо в 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?"
});

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

OKyJIucT  php, js, mysql, ajax, nodejs, yii, yii2, vuejs
  • Репутация: 11
  • Сниппеты: 8
  • Ревизии: 0
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

dfatt  PHP, C#, JS
  • Репутация: 241
  • Сниппеты: 48
  • Ревизии: 7

У меня была задача, сделать добавление видео в чат. Для этого пользователю достаточно указать ссылку на видео, затем из мы извлекаем 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;
}
OKyJIucT  php, js, mysql, ajax, nodejs, yii, yii2, vuejs
  • Репутация: 11
  • Сниппеты: 8
  • Ревизии: 0
function isInt(n){
    return Number(n) === n && n % 1 === 0;
}

function isFloat(n){
    return Number(n) === n && n % 1 !== 0;
}
Иван Бармашов  JS, HTML5, CSS3
  • Репутация: 70
  • Сниппеты: 7
  • Ревизии: 0

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

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

Продолжение »

Gravatar image
zular  JavaScript, CSS
  • Репутация: 33
  • Сниппеты: 7
  • Ревизии: 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],
    };
  }
dfatt  PHP, C#, JS
  • Репутация: 241
  • Сниппеты: 48
  • Ревизии: 7

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

Фичи

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

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

Продолжение »

dfatt  PHP, C#, JS
  • Репутация: 241
  • Сниппеты: 48
  • Ревизии: 7

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

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

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

Продолжение »

swimmwatch  javascript, html, css, nodejs, c, bash, sql
  • Репутация: 5
  • Сниппеты: 2
  • Ревизии: 0
function getIndexOfElem(elem) {
  if (elem instanceof Element) {
    return Array.prototype.indexOf.call(elem.parentElement.children, elem);
  }
}
Kosuha606  В основном веб языки, а вообще полиглот!
  • Репутация: 12
  • Сниппеты: 9
  • Ревизии: 0

Простая функция, которая переберет в цикле нужные вам для проверки свойства CSS и проверит поддерживает ли их браузер.

function checkCssSupport(containerSelector) {
    var supportValues = [
        {
            feature: "display",
            value  : "flex",
        }
    ], supportIndex, curFeature,
       curValue, notSupportedClass;
    for (supportIndex in supportValues) {
        curFeature = supportValues[supportIndex].feature;
        curValue   = supportValues[supportIndex].value;
        notSupportedClass = 'no-' + curValue + '-support';
        $(containerSelector).addClass(notSupportedClass);
        if (typeof(CSS) !== 'undefined') {
            if (CSS.supports(curFeature, curValue)) {
                $(containerSelector).removeClass(notSupportedClass);
            }
        }
    }
}

Продолжение »