За последние 2 года я написал два средних расширения для Chrome, и решил вынести для новичков некоторое количество хороших велосипедов, которые очень часто могут пригодиться при использовании jQuery.
Думаю каждый может поделиться своим опытом и выложить запомнившиеся для него куски кода.
1. Добавить скрипт
В Хроме запрещены любые попытки вставки скриптов в страницу, а этот способ поможет добавить файл скрипта. Работает только с локальными скриптами, для удаленной загрузки скриптов требуется специально разрешить это в manifest и https, о чем уже ранее писали.
var load_script = function () {
var script= document.createElement('script');
script.async= 'async';
script.src= 'js/script_name.js';
document.head.appendChild(script);
}
2. Basic авторизация через ajax.
Это мне понадобилось при написании авторизации на популярном торрент клиенте uTorrent. Так как в последних версиях запретили использовать авторизацию через url в виде логин: пароль@урл, это обходится просто, за одно написал как прервать ajax запрос и обрабатывать ошибки:
//Прервать ajax запрос
if (xhr != null)
xhr.abort();
var xhr = $.ajax({
type: "GET",
url: "http://url/",
beforeSend: function(xhr) {
var header = "Basic " + window.btoa(username + ":" + userpassword);
xhr.setRequestHeader("Authorization", header);
},
success: function(data, textStatus, xhr){
//пришедший контент data
console.log(data)
},
statusCode: {
400: function() {
//какое то действие ..
},
401: function() {
//какое то действие ..
}
//любая другая ошибка
},
error:function (xhr, ajaxOptions, thrownError){
//код ошибки xhr.status
console.log(xhr.status);
//описание ошибки thrownError
console.log(thrownError);
}
});
3. Обработать переход по якорю.
Велосипед определяет что произошел переход по какому то якорю. Это очень нужно, например при написании приложения в хроме, когда все происходит на одной странице.
//Действие которое произойдет после полной загрузки страницы
$(window).load(function () {
//какое то действие c document.URL
});
//Отслеживает изменение в адресной строке и вызывает $(window).load();
var _location_hash = location.hash;
$(window).on('hashchange', function() {
if (location.hash != _location_hash)
{
_location_hash = location.hash;
$(window).trigger('load');
}
});
4. Обработка действий формы.
Что бы форма не отправляла запрос или ссылка не переходила по url, можно в конце функции написать return false. Но есть и более удобный метод.
$('form').submit(function (event) {
event.preventDefault();
//какое то действие
});
5. Округление до запятой
Для тех кто возможно не знает как округлять дробные числа.
var val = 123.3243389;
val = val.toFixed(3);
console.log(val); //123.324
6. Проверить на наличие фразы в строке
Простой пример простого действия, используя regexp.
var str = 'Мама мыла раму'
var r = (/Мама/).test(str); //true
console.log(r);
7. Найти все совпадающие слова в строке и выделить их
Хороший пример практичности regexp.
Не забывайте параметры
- g — глобальный поиск, без этого будет поиск до первого совадения.
- i — убирает чувствительность к регистру.
- m — многострочный поиск.
var text = 'Мама мыла раму';
var keywords = 'мама раму';
keywords = keywords.split(" ");
text = text.replace(new RegExp('('+keywords.join('|')+')',"ig"),"<b>$1</b>");
console.log(text);
8. Сортировка с использованием функции
Простой пример сортировки не обычного массива.
var arr = [
{
text : 'второй',
val : 1
},
{
text : 'первый',
val : 2
}
];
var order = function (a,b) {
if (a.val > b.val)
return 1;
if (a.val == b.val)
return 0;
return -1;
}
arr.sort(order);
console.log(arr);
Заключение
Вообще по мере написания больших jQuery приложений находишь много разных отличных решений.
Практикуйтесь, пишите качественный код и спасибо что уделили время статье.
Автор: Anton9121