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

👁 57 просмотров

Статья — сборник некоторых полезных конструкций на языке 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;
}

 

Работа с SVG посредством jQuery

👁 42 просмотров

На данный момент есть достаточно немало библиотек для работы с SVG, которые в полной мере позволяют работать с этим форматом, хотя, это обычный структурированный под графику подвид семейства XML,  а значит есть вероятность работать с ним и обычным jQuery.

Получение элемента

Тут, как обычно, выборка посредством селекторов css работает в полном объеме:

$('.dlg-section #svg-inner>svg>g polygon'). ...

Работа с атрибутами

Аналогично, как и с HTML данные атрибутов можно легко заполучить посредством функции attr():

$("polygon").attr("fill", "#f8ff34");

Особенно следует отметить работу с атрибутами-классами, которые именуются через разделитель :, к примеру «kh\:number»«kh\:id», для их выборки надо принимать следующий прием:

var number = $(this).attr("kh\:number");
var id = $(this).attr("kh\:id");

Дополнительные данные элемента SVG  — аналогично, как и в HTML, работают превосходно посредством функции data():

$("polygon").data("original-title")

Можно добавлять и удалять классы, посредством функции addClass() и removeClass() или проверить, есть ли такой класс у элемента hasClass():

if($(this).hasClass("selected-order"))
{
	$(this).removeClass("selected-order");
}else
{
	$(this).addClass("selected-order");
}

Итерация однотипных элементов

Прекрасно работает функция each() , если нужно итерировать массив однотипных эелемнтов, а текущий элемент можно заполучить через $(this):

var orderArray = new Array();
$('.dlg-section #svg-inner>svg>g polygon').each(function() {
	var o_row = $(this).attr("kh\:rownumber");
	var o_number = $(this).attr("kh\:number");
	var o_id = $(this).attr("kh\:id");
	var o_price = $(this).data("original-title").split("Стоимость:")[1];//Стоимость
	//
	var obj = {"id":o_id,"row":o_row, "seat":o_number, "price": o_price};
	orderArray.push(obj);
});

 

Чтение данных из Excel в PHP и в JavaScript

👁 207 просмотров

Допустим, есть потребность для клиента работать с часто изменяемыми данными в понятном виде на понятных носителях. Носителем информации будем считать файл Excel, из которого посредством библиотеки PHP данные подгружаются в JavaScript.

Придумываем структуру файла Excel

Сначала нам необходимо подготовить структуру файла Excel. На данном этапе нужно продумать какие значения и в каких ячейках у нас будут и эти значения в дальнейшем будут фиксированы:

Скачать файл excel.

Подгружаем данные в PHP

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

Ниже представлен типичный код подгрузки Excel в PHP посредством PHPExcel:

<?php
require_once 'plugins/PHPExcel-1.8/Classes/PHPExcel.php';
$excel = PHPExcel_IOFactory::load('price.xlsx');

Foreach($excel ->getWorksheetIterator() as $worksheet) {
    $lists[] = $worksheet->toArray();
}

//$price = array();
foreach($lists as $list){
    //echo '<table border="1">';
    // Перебор строк
    foreach($list as $row)
    {
        //$rows = array();
        //echo '<tr>';
      // Перебор столбцов
        foreach($row as $col)
        {
            //echo '<td>'.$col.'</td>';
        }
        //echo '</tr>';
    }
    //echo '</table>';
}

echo json_encode($lists); //Выводим прочитанные данные в JSON

 

Подгружаем данные в JavaScrip/jQuery

Мы подгрузили данные из Excel в PHP, теперь осталось отправить на этот файл AJAX — запрос, чтобы вернуть строку с данными в формате JSON:

    $(document).ready(function(){
        function readPrices(){
           var jsonString = $.ajax({
               url: "read_price.php", 
               dataType:'JSON', 
               async: false,  
               success: function(data){}
           }).responseText;
           return JSON.parse(jsonString);
        };   
       
        var priceArray = readPrices()[0];
        console.log(priceArray);
   
   });

 

Базовые вещи в TestCafe

👁 149 просмотров

В данном посте рассмотрим некоторые шаблоны приема данного E2E ориентированного тестового фреймворка Node.js. Отличительной особенностью данной платформы в том, что она ограничивается установкой самой платформы и браузера, к тому же, в консоли можно использовать браузер в heandless режиме.

Установка

Тут проще всего. Потребуется предустановленный Node.js и выполнение команды установки через npm:

npm install -g testcafe

Желательно устанавливать данный модуль глобально, чтобы путь к ней прописывался в PATH и чтобы в консоли была доступна команда testcafe.

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

В процессе работы были использованы 2 браузера в консоли Linux в headless режиме — chromium-browser и firefox. Первый, почему -то не удалось запустить, возможно, что есть мои косяки и недопонимания, поэтому ниже приведена команда запуска через firefox в режиме headless.

Для установки firefox выполняем команду:

sudo apt-get update
sudo apt-get install firefox

Таким образом, система тестирования и браузер готовы, осталось написать тест и запустить. К примеру выполним тест, записав в файл test.js:

import { Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'John Smith')
        .click('#submit-button')

        // Use the assertion to check if the actual header text is equal to the expected one
        .expect(Selector('#article-header').innerText).eql('Thank you, John Smith!');
});

И выполним этот тест через команду:

testcafe "firefox:headless:marionettePort=9223" test.js

Дополнительно про начало работы с модулем тут, а информация по работе с headless режимом тут.

 

Частые шаблоны тестирования

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

import { Selector } from 'testcafe';
fixture `Load page...`
    .page `https://google.com`;

test('google.com', async t => {
    await t
    .resizeWindow(1200, 2000)
    .click('tr:nth-child(1) a.btn-primary')
    .wait(1000)
    .takeScreenshot('screen_1.png')
    .click('tr:nth-child(1) a.btn-primary')
    .wait(1000)
    .takeScreenshot('screen_1_1.png');
});

Есть примечание к этом, что запускать текст надо будет с ключом -s savepath, где savepath — папка хранения скриншотов. К примеру:

testcafe "firefox:headless:marionettePort=9223" test.js -s myscreenshots

 

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

import fs from 'fs';
import { Selector } from 'testcafe';
import { ClientFunction } from 'testcafe';
fixture `Load page...`
    .page `https://google.com`;

test('google.com', async t => {
    await t
    .resizeWindow(1200, 2000)
    .click('tr:nth-child(1) a.btn-primary')
    .wait(1000)
    .click('tr:nth-child(5) a.btn-primary')
    .wait(1000)
    const getPageHTML = ClientFunction(() => document.documentElement.outerHTML);
    await fs.writeFile('./pages/page.html',await getPageHTML());
    
});

 

Получение текущего url. Бывает очень полезно знать, где мы сейчас находимся после нажатия на кнопку. Заполучить url можно так:

import fs from 'fs';
import { Selector } from 'testcafe';
import { ClientFunction } from 'testcafe';
fixture `Load page...`
    .page `https://google.com`;

test('google.com', async t => {
    await t
    .resizeWindow(1200, 2000)
    .click('button.search');

    //Получение текущего URL
    const docURI = await t.eval(() => document.documentURI);
    console.log(docURI);
});

 

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

import fs from 'fs';
import { Selector } from 'testcafe';
import { ClientFunction } from 'testcafe';
var debug = ClientFunction(() => { debugger; });

fixture `Load page...`
    .page `https://google.com`;

test('google.com', async t => {
    await t
    .resizeWindow(800, 1000)
    .click('tr:nth-child(1) a.btn-primary')//Выбираем номер события
    .wait(1000)
    .click('tr:nth-child(2) a.btn-primary')//Выбираем сектор зала
    .wait(3000);
    await debug();//Завершаем работы. Не забываем включить модуль дебагинга
});

 

Заполучение содержимого тега. Очень бывает полезно заполучить содержимого какого-нибудь узла на тестируемой странице:

import { Selector } from 'testcafe';
import { ClientFunction } from 'testcafe';
fixture `Load page...`
    .page `https://google.com`;

test('google.com', async t => {
    await t
    .resizeWindow(1200, 2000)
    .click('tr:nth-child(1) a.btn-primary')
    .wait(1000)
    //.takeScreenshot('screen_1.png')
    .click('tr:nth-child(5) a.btn-primary')
    .wait(1000);
    
    //Получение хоть какого-то контента HTML
    const elementWithId = Selector(id => document.getElementById(id));
    const visibleElementWithId = elementWithId.with({
        visibilityCheck: true
    });
    const visibleButton = await visibleElementWithId('sector_window');
    console.log(visibleButton.innerText);//innerText//textContent
});

 

Базовый набор команд для работы в консоли Linux/Ubuntu

👁 108 просмотров

 

В данном посте приведен минимальный базовый список команд для уверенной работы в командной строке Linux/Ubuntu.

Порядок выполнения команд в Ubuntu

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

Безусловное последовательное выполнение — это когда одна за другой выполняются команды в той последовательности, в которой они записаны. Например, мы хотим выполнить сначала одну команду. Затем, когда она отработает (вернет управление в командную строку), нам нужно запустить вторую команду. Для этого служит символ точка с запятой ;. Таким образом, если вы выполните в терминале:

mycommand1; mycommand2; mycommand3

то сначала запустится первая команда mycommand1, а когда управление вернется в терминал, то запустится вторая и так далее.

Зависимое выполнение команд через оператор && — это означает, что команда mycommand2 будет выполнена только в том случае, если команда mycommand1 была выполнена успешно. Каждая следующая команда выполняется только при успешном выполнении предыдущей. К примеру:

mycommand1 && mycommand2 && mycommand3

Зависимое выполнение команд через оператор || — это означает, что команда mycommand2 будет выполнена только, если mycommand1 вернула ошибку. Каждая следующая команда запускается только если предыдущая вернула ошибку. К примеру:

mycommand1 || mycommand2 || mycommand3

то команда mycommand2 будет выполнена только, если mycommand1 вернула ошибку. Каждая следующая команда запускается только если предыдущая вернула ошибку.

reboot — перезагрузка операционной системы через консоль

Перезагружает систему через консоль. Форма записи обычная:

reboot

apt-get — управление приложениями через менеджер пакетов Ubuntu

apt-get позволяет устанавливать, обновлять, удалять приложения и пакетами ОС Ubuntu. Форма записи:

sudo apt-get install[uninstall, update] <package_name>

Очень полезно обновлять информации о доступных пакетов через команду:

sudo apt-get update

Зачастую, apt-get может и не установить какой-то пакет из репозитория, если мы не выполним обновление информации.

whoami — выводит логин текущего пользователя

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

whoami

aptitude — более совершенная версия команды apt-get

Это более совершенный менеджер пакетов. В частности, позволяет очень эффективно обновлять пакеты, сохраняя все зависимости:

sudo aptitude safe-upgrade

bash — команды оболочки командной строки Ubuntu

Это команды, который позволяют работать со средой окружения. К прими, на основе их можно написать целые скрипты с расширением *.sh и выполнять их:

bash myscript.sh

Есть переменные среды окружения Ubuntu, в которых система хранит те или иные данные. К примеру, командой echo можно вывести данные, хранящиеся в переменных $USER, $HOME, $PATH:

echo $USER[$HOME, $PATH]

Очень важно упомянуть в данном контексте 3 важных скрытых файла оболочки bash в корневой директории root:

  • .bashrc
  • .bash_profile
  • .profile

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

ls — вывод списка всех файлов и директорий в указанном пути

Выводит весь список файлов и папок в определенной директории, которую мы укажем. Форма записи:

ls /dir/name

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

Чтобы показать и скрытые файлы нужно вывести через набор команды и ключа -a:

ls -a

К примеру, для вывода полной информации с правами доступа, владельцами и со скрытыми папками и файлами можно набрать комбинацию этой команды с ключами в виде:

ls -la /dir/name

mkdir — создание папки или директории по указанному пути

Позволяет создавать папку через командную строку в Ubuntu. Если требуется создавать вложенные папки, то они разделяются через прямой слэш (/):

mkdir my/new/dir

pwd — показывает текущую директорию, где находится пользователь

Форма записи:

pwd

Тоже самое можно увидеть, если вывести это через системную переменную $PWD, в котором Ubuntu этот путь и хранит:

echo $PWD

cd — команда перехода по папкам и директориям

Позволяет пользователю перемещаться по разделам и директориям системы. К примеру, для перехода на один уровень выше нужно выполнить:

cd ../

Для перехода в какую-то директорию в пределах текущей директории нужно выполнить:

cd ./folder/name

или

cd folder/name

а если хотим из текущей директории перейти сразу в какой-нибудь параллельный раздел, то надо указать абсолютный путь с указанием / в начале пути:

cd /usr/bin

cp — команда копирования файлов и папок в Ubuntu

Позволяет копировать указанный файл, принимаемый первым параметром в виде файла, указанный вторым параметром:

cp filename.txt filename_copy.txt

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

cp -r foldername foldername_copy

mv — перемещение или переименование папки из одного в другое место(имя)

Суть переименования и перемещения в среде программирования  — идентичные операции, поэтому эта команда служит для двоякого использования:

mv dirname new_dirname

или мы можем переместить:

mv dirname folder/dirname

если хотим переместить файл, то надо первым параметром указать имя файла, а вторым — путь, по которому он будет перемещен:

mv filename.txt folder/path/

rm — удаление файлов и папок в Ubuntu

Данная команда позволяет удалять файлы и папки, передаваемые первым параметром:

rm filename.txt

а если хотим удалить папку и его содержимое, то надо указать ключ рекурсивности -rf:

rm -rf foldername

если хотим удалить только все содержимое папки, без самой папки, то надо после слэша написать выражение *:

rm foldername/*

nano/vi/…  — редактирование файлов в Ubuntu

На самом деле по умолчанию в Ubuntu нет встроенной команды редактирования и для этого надо будет установить любой из доступных редакторов через пакетный менеджер. Есть такие популярные редакторы, как nano/ vi/vim/ joe и т.д.

netstat — команда вывода на консоль информации о состоянии TCP соединения процессов

Одна из полезных комбинаций данной команды — это вывод информации о запущенных процессах, занимаемых ими портов и адресов сети:

netstat --tcp --listening --program

Еще одна полезна комбинация — это вывод всех занятых процессами портов:

netstat -ntlp | grep LISTEN

kill — убивает тот или иной процесс по ID или по PID

Чтобы убить процесс по PID:

kill PID

чтобы убить процесс принудительно по PID добавляем ключ -9:

kill -9 PID

lsof — команда для вывода информации о том, какие файлы или порты используются теми или иными процессами

Одна из полезных комбинаций данной команды — вывод процессов, которые занимают тот или иной порт:

lsof -Pni :3306

К примеру, какой-то процесс занял нужный нам порт и нам нужно узнать его PID и принудительно освободить этот порт и для этого можно набрать:

lsof -i tcp:3000
kill -9 PID

 

Работа через менеджер версий Node.js (NVM)

👁 111 просмотров

Что такое NVM?

NVM(Node Version Manager) — это простой bash — скрипт, который позволяет упралять(устанавливать, обновлять, активировать, удалять) разные версии Node.js на одной машине так, что они выполняются в изолированных друг от друга средах. Таким образом, можно работать с разными версиями одного программного обеспечения не задевая или разрушая их модульные зависимости.

Почему NVM?

В любой момент вы захотите работать с различными проектами, используя различные версии Node.js и NVM позволяет устанавливать разные версии для различных проектов. NVM позволяет работать  с разными версиями посредством сессий, при котором каждая сессия соответствует версии Node.js.

Установка NVM

Установка на Linux/Ubuntu очень легко делается, сначала надо будет скачать через ссылку, указав версию(на момент написания версия была v0.33.8 и это можно проверить по ссылке на официальном репозитории).

Скачка через curl:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

или через wget:

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

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

Скрипт клонирует репозиторий nvm в директорию  ~/.nvm и добавляет исходные строки в наш профиль в виде:   ~/.bash_profile~/.zshrc~/.profile или ~/.bashrc

Установка Node.js используя NVM

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

nvm ls-remote

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

nvm install 5.0

И потом можно менять оболочки(сессии) использования версии через команду:

nvm use 5.0

Использование NVM

Чтобы посмотреть список установленных версий Node.js можно набрать команду:

nvm ls

И если мы в большинстве используем определенную версию Node.js, то можем установить ее по умолчанию:

nvm alias default 5.0

И все это дело можно гибко настраивать, создавая файл .nvmrc в корневой директории проекта с указанием необходимых данных версии Node.js для запуска проекта.

 

Заключение

Управление версиями на одной машине — это ключевая задача, но утомительная. Задачи должны быть автоматизированы и для этого и создавался NVM, который помогает нам управлять различными версиями Node.js без труда. Дополнительно про возможности NVM можно почитать на официальной странице репозитория.

 

Понимание очереди команд выполнения тестов в Nightwatch.js

👁 49 просмотров

Общий принцип выполнения команд

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

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

Создание очереди команд

API — команды в Nightwatch передаются через объекты и их можно получить в тестах, которые, обычно, вызываются «клиентом» или «браузером», содержащий коллекцию методов, которые используют конструкцию очереди команд.

К примеру, когда вы вызываете команду Nightwatch, такую, как click(), вы не отправляете Selenium  — клиенту команду напрямую сразу же. Этот метод вместо добавления «click». Этот метод вместо этого добавляет команду «click» в очередь команд.

Продолжение следует…

 

 

 

Как поделиться в соцсетях в Cordova?

👁 76 просмотров

Описание

Допустим, естьу нас задача, чтобы при нажатии на кнопку можно было поделиться в социальных сетях через приложение Cordova. Для данной задачи есть специальные плагин и один из них — это cordova-plugin-share. Данный плагин позволяет приложению через JavaScript вызов открыть нативное попап диалоговое окно, в котором будут иконки социальных сетей, чтобы поделиться с друзьями и подписчиками.

Установка

Для установки достаточно набрать команду добавления нового модуля в нашем Phonegap/Cordova приложении:

cordova plugins add https://github.com/markmarijnissen/cordova-plugin-share.git

Использование

Для использования в нашем файле скрипта JavaScript необходимо вызвать функцию с указанием параметров:

navigator.share(text,title,mimetype);

Где text — это то, чем нужно поделиться, title — заголовок, а mimetype — это тип объекта, которым делятся.

mimetype может принимать image/jpeg, plain/text и т.д.

 

Настройка Raspberry Pi 3 и установка Node.js на Raspbian OS

👁 329 просмотров
  • Предисловие
  • Требования к аппаратному инструментарию
  • Загрузка операционной системы для Raspberry Pi
  • Запись Raspbian OS на карту памяти
  • Загрузка OS Raspbian в Raspberry Pi
  • Конфигурация Raspbian OS
  • Установка Node.js на Raspberry Pi
  • Заключение

 

Предисловие

Данный пост покажет, как установить Node.js на на Raspberry Pi с установленным на нем собственного дистрибутива Raspbian.

Raspbian — это родная операционная система для Raspberry Pi 3. Конечно, это не значит, что на него можно установить только эту операционку с поддержкой ARM Cortex A — архитектуры процессора, на него можно установить любую операционку, так как это, своего рода, полноценное железо, как у зрелого ПК.

 

Требования к аппаратному инструментарию

Давайте напишем весь список необходимостей, чтобы продолжить работу:

  • Raspberry Pi 3B
  • MicroSD карта от 8 до 16 Гб
  • MicroSD — адаптер, для записи с компьютера на карту
  • MicroUSB — питание для Raspberry Pi
  • Монитор со входом HDMI
  • USB — клавиатура и мышь
  • Laptop/Desktop ПК с Mac,Linux или Windows, чтобы скачать и записать образ операционки Raspbian OS на флешку

 

Загрузка Raspbian OS

Мы будем использовать Raspbian OS — официальную и поддерживаемую операционную систему Raspberry Pi. Посетите официальный сайт, нажав здесь и загрузите Raspbian stretch в zip-архиве и не загружайте версию Lite.

 

Запись скачанной Raspbian OS на MicroSD

Как только загрузка закончится нам необходимо записать скачанный образ *.img Raspbian OS на MicdoSD — карту памяти, чтобы дальше уже установить через нее на наш Raspberry Pi 3. Весь процесс установки должен пройти автоматически, когда мы подадим питание на плату.

Для записи образа на MicroSD не достаточно просто закинуть файлы из скачанного архива, надо создать установочный образ используя карту памяти и *.iso файл в архиве, для этого можно воспользоваться программой Etcher или Rufus.

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

1). Вставьте карту MicroSD через адаптер в гнездо устройства чтения карт на ПК

2). Откройте Etcher и выберите образ Raspbian, которое вы просто загрузите, затем выберите диск с SD-картой и нажмите кнопку Flash, чтобы записать файл образа на SD-карте

Это займет некоторое время и, в большинстве, пройдет удачно, если у вас MicroSD не повреждена.

 

Загрузка Raspbian OS в Raspberry Pi 3

Таким образом, у нас появилась ОС Raspbian на SD-карте, готовый к установке. Соединяем Raspberry Pi с клавиатурой, мышью и монитором.

Прежде всего, вставим нашу SD-карту в Raspberry Pi. Поверните Raspberry Pi и на задней части находится небольшое для карты MicroSD, вставьте SD-карту в слот, обратитесь к приведенному ниже описанию.

Итак, у нас есть SD-карта на месте, давайте подключим все наше оборудование. Клавиатура, мышь и монитор. Вот изображение для понимания:

 

Когда все подключено, подключите кабель к MicroUSB и к источнику питания. Raspberry Pi загрузится, и вы должны увидеть загрузку ОС на экране монитора.

После окончания установки Raspberry Pi  вы должны увидеть загрузку ОС на экране монитора:

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

Отлично, если видите красивую заставку, Raspbian установился. Идем дальше.

Конфигурация Raspbian OS

По умолчанию RaspberryPi использует настройку клавиатуры на английском языке. Чтобы изменить его в соответствии с вашей локальностью, откройте конфигурацию Raspberry Pi

Нажмите кнопку «Set Locale…» и выберите предпочтительный язык.

Измените настройку клавиатуры в соответствии с вашим местоположением:

Теперь нажмите на значок Wi-Fi в правом углу и подключитесь к Wi-Fi. Кроме того, вы также можете подключить кабель Ethernet в Raspberry Pi.

На этом конфигурация закончена, идем дальше.

Установка Node.js на Raspbian OS

Теперь давайте установим обновление системы Raspbian перед установкой Node.js. Откройте терминал (значок на главной панели) и выполните следующую команду:

sudo apt-get update

Как только обновление будет завершено, мы можем установить Node.js в наш Raspberry Pi.

Откройте терминал и выполните следующую команду:

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -

Теперь запустите следующую команду для установки Node.js:

sudo apt-get install -y nodejs

Давайте проверим, установлен ли Node.js:

Все удачно установлено и готово к использованию!

Заключение

Мы научились загружать и настраивать Raspberry Pi шаг за шагом детально. Мы также узнали об настройках Raspberry Pi и  обновили ее репозитории. Мы также установили Node.js в виде JavaScript — сервера.

Запрос и ответ POST данных к удаленному серверу Node.js из приложения

👁 76 просмотров

Допустим, что у нас есть мобильное приложение или приложение на ПК, с которым надо коммуницировать удаленный сервер Node.js. Кратко напишем код серверной и клиентской части.

Серверная часть

app.post('/login', function(req, res) {
    var isLoged = false;
    var info = null;
    console.log(JSON.stringify(req.body));
    //Выполняем какие-то операции
    //...
    //...
    //Отправляем ответ
    var data = {"isLoged":isLoged, "info":info};
    res.json(data);
});

 

Клиентская часть

 var data = { "userName": userName, "userPassword": userPassword };
 var url = "http://xx.xx.xx.xx:3000/login"; 
 $.ajax({
     type: "POST",
     url: url,
     data: data,
     success: function (info) {
         alert(info.info);
         console.log(info);
     },
     error: function (info) {
         alert("Connecting Error: " + info);
         console.log(info);
     }
 });