Немного нужного кода javascript для новичков

в 8:32, , рубрики: javascript, jquery, метки: ,

За последние 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

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js