04 мая 2018 25 августа 2022 JavaScript

Архитектура современного веб-приложения выглядит как показано на картинке

28 января 2018 25 августа 2022 JavaScript | решать тесты

• Какое расширение Angular можно использовать для создания "модных" виджетов checkbox?

• Как сохранять список установленных bower пакетов?

Для начала нужно установить этот модуль

bower install --save angular-switcher

затем подключаем в список зависимостей приложения вот так:

// app.js

angular.module('app', ['ngResource', 'ngRoute', 'ui.bootstrap', 'ui.date', 'ckeditor', 'ngSanitize', 'switcher']) 

используем вот так, заменяем

<input type="checkbox" ng-model="variant.correctly" />

на

<switcher ng-model="variant.correctly" true-label="верно" false-label="не верно"></switcher>

результат будет красив

01 сентября 2021 07 сентября 2021 JavaScript

Когда необходимо обработать query_string из урла с помощью JS то самый простой и экономный вариант использовать URLSearchParams и reduce следующим образом

// распасить урл
const searchParams = new URLSearchParams(window.location.search.substring(1)); 

// преобразовать в обычный Объект
const params = [...searchParams.entries()].reduce((acm, x) => {return {...acm, [x[0]]: x[1] }}, {}); 

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

Может статься так, что потребуется передать строку больше чем 2048 байт, в таком случае использовать  window.location.search не получится из-за ограничений GET запроса протокола HTTP.

Но можно воспользоваться дополнение window.location.hash это строка Хеш идущая после символа #

в таком случае чуть в код добавляет маленькая вставка

const searchParams1 = new URLSearchParams(
    window.location.search.substring(1) + '&' + window.location.hash.substring(1)
);

const args = [...searchParams1.entries()].reduce(
    (akm, x) => ({ ...akm, ...Object.fromEntries([x]) }), {},
);

17 января 2018 25 августа 2022 JavaScript Gulp

Итак, сжатиt вендорных css исходников необходимо для уменьшения размера общего файла и делается это просто:

var gulp = require("gulp"),
rename = require("gulp-rename"),
sourcemaps = require("gulp-sourcemaps"),
cleancss = require('gulp-clean-css'), // подключаем сжималку
ngAnnotate = require("gulp-ng-annotate"),
gulpif = require("gulp-if"),
concat = require("gulp-concat"),
bower = require('gulp-bower');

/*
....
*/

gulp.task("vendor_css", function () {
    return gulp.src(paths.vendor_css)
        .pipe(cleancss({compatibility: 'ie8'}))  // настраиваем сжималку
        .pipe(concat("vendor.min.css"))
        .pipe(gulp.dest("static/css/"))
});

Вот так всё просто

12 июля 2021 14 июля 2021 JavaScript reduce рекурсия children

Для конвертирования иерархии любой вложенности удобно применять рекурсию совместно с reduce

function object_list_2_flat_array (obj_list) {

    var conv = function(xxx, x) {
        return [x, ...x["children"].reduce(conv, xxx)];
    };
    return obj_list.reduce(conv, new Array());

};

Тут накапливающий метод reduce вызывает рекурсию для каждого узла иерархии и результаты складывает в аккумулятор.