Некоторые полезные конструкции JavaScript/jQuery

Статья — сборник некоторых полезных конструкций на языке JavaScript/jQuery, чтобы долго не искать и чтобы заново не придумывать.

Удалить объект из массива по какому-то его свойству

Допустим, что есть у  нас массив объектов, среди свойство которого есть уникальные значение, к примеру, это может быть id или hash:

var orderArray = new Array();
var obj1 = {"id":"17282","row":"1", "seat":"5", "price": "455"};
var obj2 = {"id":"72858","row":"2", "seat":"6", "price": "144"};
var obj3 = {"id":"83525","row":"1", "seat":"7", "price": "1140"};
orderArray.push(obj1);
orderArray.push(obj2);
orderArray.push(obj3);

removeObjectInArray("72858", orderArray);//Удалили из массива второй объект obj2

//Определяем функцию
function removeObjectInArray(id, arr) {
	    var i;
	    for (i = 0; i < arr.length; i++) {
	        if (arr[i].id === id) {
	        	arr.splice(i, 1)
	        }
	    }
 }

 

Полностью очистить массив от всех элементов

Если нам нужно очистить массив от всех его элементов, то можно воспользоваться следующей конструкцией:

 function clearArray(array) {
	  while (array.length) {
	    array.pop();
	  }
	}

 

Перевод цвета из RGB в HEX — формат

Очень актуально, если нам нужно сравнить элементы по цветы, но у них разное представление одного и того же цвета и для того, чтобы RGB привести к HEX можно воспользоваться следующим методом:

var color = 'rgb(50,70,60)';
color = getHexFromRGBColor(color);
console.log(color);
function getHexFromRGBColor(color)
	 {
	   color = color.replace(/\s/g,"");
	   var aRGB = color.match(/^rgb\((\d{1,3}[%]?),(\d{1,3}[%]?),(\d{1,3}[%]?)\)$/i);

	   if(aRGB)
	   {
	     color = '';
	     for (var i=1;  i<=3; i++) color += Math.round((aRGB[i][aRGB[i].length-1]=="%"?2.55:1)*parseInt(aRGB[i])).toString(16).replace(/^(.)$/,'0$1');
	   }
	   else color = color.replace(/^#?([\da-f])([\da-f])([\da-f])$/i, '$1$1$2$2$3$3');
	   
	   return '#' + color;
	 }

 

Синхронное получение данных после AJAX — запроса в jQuery

Очень актуально, если мы часто работаем с данными, где время их получения играет важную роль и для этого можно воспользоваться следующими 2-мя приемами.

Первый прием заключается в том, что функция ajax() возвращает через поле responseText JSON — строку, идентичную той, которую мы получаем в функции success, но в отличии от нее возвращается синхронно и это то, что нужно:

function getPostJson(url, data){
   var jsonString = $.ajax({
       url: url,
       data: data,
       dataType:'JSON', 
       async: false,//это поле устарело и может не работать
       success: function(data){}
   }).responseText;
   return JSON.parse(jsonString);
};

Второй прием заключается в том, что мы выполняем всю операцию внутри success или complete посредством передаваемых callback — функций:

var url = "";
var data = {};

getPostJson(url, data, function(res){
    console.log(res);
});


function getPostJson(url, data, callback){
   $.ajax({
       url: url,
       data: data,
       dataType:'JSON', 
       success: callback,
   });
};

 

Конструкция создания отдельного глобального jQuery — плагина/объекта

К примеру, вы создаете WEB — приложение, которое в последующем требует масштабирования, увеличения кода и т.п. И, тут, вам как никак потребуется структурировать ваши кастомные js — конструкции, чтобы они загружались из одного файла и чтобы они писались один раз и не повторялись в разных местах, иначе наступитт кошмар в процессе тестирования. В таких случаях пишут отдельный глобальный объект в виде плагина из которого, далее, все свойства и методы подгружаются.

Для создания такой конструкции можно воспользоваться следующим кодом, который мы сохраним в отдельном файле app.js  который мы будем подключать, если нужны функции из содержащего в ней объекта:

;(function ($) {
    $.app = function () {}//Собственно, само название глобального обекта
    //Создадим новый узел coin, который будет содержать свои методы и свойства
    $.app.coin = function () { }
    $.app.coin.countCoins = 255;
    $.app.coin.viewSumCoins = function (coins) {
        console.log($.app.coin.coundCoins + coins);
    });
}(jQuery));

Для использования надо просто подключить в страницу файл app.js и использовать определенные поля и методы:

$app.coin.countCoins = 300;
$app.coin.viewCoins(300);//Выведет 600

 

Получение случайного набора символов указанной разрядности и видов символов

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

var razryad =6;
var hash = getRandomHash(razryad);
console.log(hash);//Получим что-то вроде fSd5d4


function getRandomHash(razryad) {
        var text = "";
        //Определяем набор символов
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        for (var i = 0; i < razryad; i++)
            text += possible.charAt(Math.floor(Math.random() * possible.length));

        return text;
    }

 

Воспроизведение аудио mp3

Допустим, есть задача воспроизводить аудио на странице с изменением звука и т.п. Для этого, сначала нужно будет внедрить в HTML наше аудио посредством кода с указанием исходного mp3 — файла:

<audio id="audio" controls="controls">
    <source src="sounds/heartbeat.mp3" type="audio/mp3">
</audio>

Далее уже пишем код воcпроизведения на JavaScript:

myAudio = document.getElementById("audio");//Получаем аудио по ID
myAudio.volume = 50;//Объем звука в %
myAudio.play();//Проигрываем
myAudio.currentTime = 0;//Ставим обратно на начало воспроизведения

 

Сохранение локальных данных в кеше браузера

Очень актуально, если во время исполнения нашего WEB — приложения нужно сохранять переменные данные, которые не исчезнут после закрытия приложения или браузера. Это не выступает полноценной БД, но очень кстати, если нужно сохранять небольшие параметрические данные:

window.localStorage.setItem("login","root");//Сохранили значение root в параметре login
var myLogin = window.localStorage.getItem("login");//Получил значение параметра login

 

Проверить вхождение подстроки в строку

Для решения данной задачи в JavaScript есть масса методов и один из них — это использование метода indexOf():

var index = "Hello World!".indexOf("Hell");//Вернет индекс вхождения

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

if(location.href.indexOf("live-fest-otkritie-366-367-detail") > -1)
{
    //Подстрока найдена в текущем URL
}else
{
    //Подстрока не найдена в текущем URL
}

 

Размещение строкового значения в несколько линий строки

Это очень удобно представить, к примеру, обычную html — сроку, написав несколько строк и при этом не дописывая символы конца строк для конкатенации между строками. При этом, строку надо окружать не в обычных скобках, а в обратных — backticks и выглядит так — `. Данный подход представления строки появился в стандарте JavaScript версии ECMAScript 6. К примеру, код ниже идентичен, но второй вариант более выразителен и прост:

//В версии языка ECMAScript 5 и ниже нам надо было пользоваться так
var html = '<div>\
                <span>Some "HTML" here</span>\
            </div>';
//Или так
var html = "<div>\
                <span>Some 'HTML' here</span>\
            </div>";

//Но теперь можно не заморачиваться, начиная с версии ECMAScript 6, если написать так
var html = `<div>\
                <span>Some 'HTML4' here</span>\
                <span>Some "HTML5" here</span>\
            </div>`;

 

Получение GET — параметра из текущего URL

Если в URL есть нужные данные, которые необходимо с использовать в JS, то очень удобно воспользоваться конструкцией:

function $_GET(param) {
    //Взвращает значение параметра
    //Возвращает null, если параметру ничего не заданно
    //Возвращает undefined, если нет такого параметра
    if(window.location.href.indexOf(param) > -1) {
        var vars = {};
        window.location.href.replace( location.hash, '' ).replace( 
                /[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
                function( m, key, value ) { // callback
                        vars[key] = value !== undefined ? value : '';
                }
        );
        if ( param ) {
                return vars[param] ? vars[param] : null;	
        }
        return vars;
    }else
    {
        return undefined;
    }
}

Экспорт массива объектов в один объект

К примеру, у нас есть массив объектов, у которых 2 поля: tag и name вида:

var arr = [{tag:"tag_1", name:"name_1"}, {tag:"tag_2", name:"name_2"}, ...];

Необходимо перевести данный массив объектов в один объект с названием свойства tag и значением name:

var obj = {tag_1:"name_1",tag_1:"name_2", ...}

Для этого пишем итерацию для массива и добавление каждого элемента в объект:

for (var index in arr) {
    var tag = tags[index].tag;
    var name = tags[index].name;
    obj[tag] = name;
}

 

Вам также может понравиться

Об авторе WebSofter

Web - технологии

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...