Разбор Javascript-стайлгайда от Google (часть 2)

(ЧАСТЬ 2) В Google для стандартизации написания Javascript используют специальный стайлгайд (https://google.github.io/styleguide/j…), в котором четко прописаны правила оформления JS-кода. Это сильно упрощает поддержку таких сложных программных продуктов, как Gmail, Google Docs и другие. В этом ролике мы, простым языком, разберем самые актуальные моменты из этого документа.

0

Разбор Javascript-стайлгайда от Google (часть 1)

(ЧАСТЬ 1) В Google для стандартизации написания Javascript используют специальный стайлгайд (https://google.github.io/styleguide/j…), в котором четко прописаны правила оформления JS-кода. Это сильно упрощает поддержку таких сложных программных продуктов, как Gmail, Google Docs и другие. В этом ролике мы, простым языком, разберем самые актуальные моменты из этого документа.

0

10+ полезных jQuery сниппетов на каждый день

jquery

Спустя годы библиотека jQuery стала неотъемлемой частью в работе каждого web-разработчика. Ведь она простая в использовании, быстрая и имеет очень широкие возможности. В этой статье я собрал список из более чем десяти сниппетов, которые вы можете свободно брать для использования. Их очень легко адаптировать под нужды ваших собственных проектов.


Плавный скролл к верху страницы

Давайте начнем этот список с очень популярного и полезного сниппета: эти 4 строки кода позволят вашим посетителям плавно проскролить страницу к верху простым нажатием ссылки (с id #top) расположенной внизу страницы.

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Источник

Дублирование thead в самый низ html таблицы

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

var $tfoot = $('<tfoot></tfoot>');
$($('thead').clone(true, true).children().get().reverse()).each(function() {
  $tfoot.append($(this));
});
$tfoot.insertAfter('table thead');

Источник

Загрузка внешнего контента

Вам нужно добавить определенный внешний контент в div? Так вот это очень просто сделать с jQuery, как показано в нижеприведенном примере.

$("#content").load("somefile.html", function(response, status, xhr) {
  // error handling
  if(status == "error") {
    $("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);
  }
});

Источник

Колонки одинаковой высоты

В случае использования колонок для отображения контента вашего сайта, определенно будет смотреться лучше, если у колонок будет одинаковая высота. Код ниже возьмет все div элементы с классом .col и установит их высоту по самому высокому элементу. Супер полезно!

var maxheight = 0;
$("div.col").each(function() {
  if($(this).height() > maxheight) { maxheight = $(this).height(); }
});

$("div.col").height(maxheight);

Источник

Табличные полосы (зебра)

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

$(document).ready(function(){                             
     $("table tr:even").addClass('stripe');
});

Источник

Частичное обновление страницы

Если вам нужно обновить только часть страницы, то эти 3 строки кода точно помогут. В примере div с id #refresh автоматически обновляется каждые 10 секунд.

setInterval(function() {
  $("#refresh").load(location.href+" #refresh>*","");
}, 10000); // milliseconds to wait

Источник

Предзагрузка изображений

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

$.preloadImages = function() {
       for(var i = 0; i<arguments.length; i++) {
               $("<img />").attr("src", arguments[i]);
       }
}

$(document).ready(function() {
       $.preloadImages("hoverimage1.jpg","hoverimage2.jpg");
});

Источник

Открытие внешних ссылок в новом окне или новой вкладке

Аттрибут target=»_blank» позволяет вам открывать ссылки в новых окнах. Но это относится к открытию внешних ссылок, внутридоменные ссылки должны окрываться в том же окне.
Этот код находит внешнюю ссылку и добавляет в найденный элемент аттрибут target=»_blank».

$('a').each(function() {
   var a = new RegExp('/' + window.location.host + '/');
   if(!a.test(this.href)) {
       $(this).click(function(event) {
           event.preventDefault();
           event.stopPropagation();
           window.open(this.href, '_blank');
       });
   }
});

Источник

Div по ширине/высоте вьюпорта

Этот удобный фрагмент кода позволяет создавать растянутый по ширине/высоте вьюпорта div. Код также поддерживает изменение размеров окна. Прекрасное решение для модальных диалогов и popup-окон.

// global vars
var winWidth = $(window).width();
var winHeight = $(window).height();

// set initial div height / width
$('div').css({
    'width': winWidth,
'height': winHeight,
});

// make sure div stays full width/height on resize
$(window).resize(function(){
    $('div').css({
    'width': winWidth,
    'height': winHeight,
});
});

Источник

Проверка сложности пароля

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

Для начала создадим поля ввода:

<input type="password" name="pass" id="pass" />
<span id="passstrength"></span>

И далее немного jQuery кода. Введенный пароль будет проверен с помощью регулярных выражений и на основе этого пользователю будет выведено сообщение насколько сложен его пароль.

$('#pass').keyup(function(e) {
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
     var enoughRegex = new RegExp("(?=.{6,}).*", "g");
     if (false == enoughRegex.test($(this).val())) {
             $('#passstrength').html('More Characters');
     } else if (strongRegex.test($(this).val())) {
             $('#passstrength').className = 'ok';
             $('#passstrength').html('Strong!');
     } else if (mediumRegex.test($(this).val())) {
             $('#passstrength').className = 'alert';
             $('#passstrength').html('Medium!');
     } else {
             $('#passstrength').className = 'error';
             $('#passstrength').html('Weak!');
     }
     return true;
});

Источник

Изменение размеров изображения

Вы конечно можете изменять размеры ваших изображений на стороне сервера (например, используя PHP и GD-библиотеку), но иногда полезно делать это на клиентской стороне с помощью jQuery. Вот сниппет для этого.

$(window).bind("load", function() {
	// IMAGE RESIZE
	$('#product_cat_list img').each(function() {
		var maxWidth = 120;
		var maxHeight = 120;
		var ratio = 0;
		var width = $(this).width();
		var height = $(this).height();
	
		if(width > maxWidth){
			ratio = maxWidth / width;
			$(this).css("width", maxWidth);
			$(this).css("height", height * ratio);
			height = height * ratio;
		}
		var width = $(this).width();
		var height = $(this).height();
		if(height > maxHeight){
			ratio = maxHeight / height;
			$(this).css("height", maxHeight);
			$(this).css("width", width * ratio);
			width = width * ratio;
		}
	});
	//$("#contentpage img").show();
	// IMAGE RESIZE
});

Источник

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

Некоторые сайты, такие как Twitter загружают контент по скроллу. Это значит, что весь контент динамически подгружается на странице в процессе прокрутки вниз.
Вот пример того, как вы можете сделать этот эффект на вашем сайте.

var loading = false;
$(window).scroll(function(){
	if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
		if(loading == false){
			loading = true;
			$('#loadingbar').css("display","block");
			$.get("load.php?start="+$('#loaded_max').val(), function(loaded){
				$('body').append(loaded);
				$('#loaded_max').val(parseInt($('#loaded_max').val())+50);
				$('#loadingbar').css("display","none");
				loading = false;
			});
		}
	}
});

$(document).ready(function() {
	$('#loaded_max').val(50);
});

Источник

Проверить, загрузилось ли изображение

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

var imgsrc = 'img/image1.png';
$('<img/>').load(function () {
    alert('image loaded');
}).error(function () {
    alert('error loading image');
}).attr('src', imgsrc);

Источник

Сортировка списка в алфавитном порядке

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

$(function() {
    $.fn.sortList = function() {
    var mylist = $(this);
    var listitems = $('li', mylist).get();
    listitems.sort(function(a, b) {
        var compA = $(a).text().toUpperCase();
        var compB = $(b).text().toUpperCase();
        return (compA < compB) ? -1 : 1;
    });
    $.each(listitems, function(i, itm) {
        mylist.append(itm);
    });
   }

    $("ul#demoOne").sortList();

});

Источник

0

Как копировать текст в буфер обмена с помощью JavaScript

copy text clipboard javascript

Пользовательский функционал для копирования текста в буфер обмена повышает удобство использования веб-приложений. Особенно для мобильных пользователей. В этой короткой статье мы рассмотрим мою технику реализации копирования текста в буфер обмена с помощью JavaScript. Она написана на Angular. Но данный подход можно применить к любым проектам, на основе JavaScript или TypeScript. Полная версия проекта доступна в этом … Читать далее Как копировать текст в буфер обмена с помощью JavaScript

0

Mozilla усилила защиту пользователей Firefox от вредоносного кода

mozilla защитит от вредоносного кода

Фото: Doug Belshaw/Flickr Mozilla расширила защиту пользователей браузера Firefox от атак с попытками внедрения вредоносного кода. Разработчики сосредоточились на удалении «потенциально опасных артефактов» в исходном коде Firefox. Под артефактами подразумеваются встроенные скрипты и функции типа eval(). Mozilla рассчитывает улучшить защиту встроенных служебных страниц «about:» за счет удаления таких кусков кода. Всего насчитывается 45 страниц «about:», которые позволяют … Читать далее Mozilla усилила защиту пользователей Firefox от вредоносного кода

0

Что нового можно ожидать от Node.js в 2020 году?

что нового node js 2020

В 2019 году Node.js исполнилось 10 лет. Количество пакетов, доступных в реестре npm, пересекло отметку в 1 миллион. С каждым годом объём загрузок самой платформы Node.js увеличивается на 40%. Ещё одной важной вехой для Node.js стало то, что этот проект присоединился к OpenJS Foundation. Благодаря этому можно ожидать улучшения состояния и стабильности проекта, а также, … Читать далее Что нового можно ожидать от Node.js в 2020 году?

0

Кэширование кода для JavaScript-разработчиков на примере Chrome

кэширование-js

Кэширование кода (также называемое кэшированием байт-кода) является важным инструментом оптимизации. Оно уменьшает время запуска часто посещаемых сайтов за счёт кэширования результатов парсинга и компиляции. Большинство популярных браузеров реализует кэширование в некоторой форме, и Chrome не исключение. О том, как Chrome и V8 кэшируют скомпилированный код, уже много всего написано и сказано. В этой статье вы найдёте несколько советов JS-разработчикам, которые хотят с помощью … Читать далее Кэширование кода для JavaScript-разработчиков на примере Chrome

0
Авторизация
*
*



Регистрация
*
*
*
Генерация пароля