Рубрика: WEB

Здесь собраны статьи, наработки, исправление ошибок и решение проблем связанных с разработкой для WEB

Загрузка js и css «по требованию»

WEB

Задача: по какому то условию (ну в моем случае это загрузка скрипта «Тура по сайту» если вдруг пользователь его не проходил), необходимо до грузить дополнительные JS и CSS файлы, а по завершению их загрузки — запустить.

Решение:

function TourStart(){
    if ((localStorage.getItem(document.location.pathname+"_tour")==null)||(localStorage.getItem(document.location.pathname+"_tour")==false)){
        element = document.createElement("script");
        element.src = "https://shepherdjs.dev/dist/js/shepherd.js";
        element.addEventListener('load', () => {
            console.log("--загружаем тур!");
            element = document.createElement("script");
            element.src = "/js/tour.min.js";
            document.body.appendChild(element);
        });
        document.body.appendChild(element);
        element = document.createElement("link");
        element.href = "https://shepherdjs.dev/dist/css/shepherd.css";
        element.rel="stylesheet"
        document.body.appendChild(element);        
        
    };
};

console.log("-- main.js загружен");
$(document).ready(function() {
   TourStart(); // стартовать тур по странице если нужно..
});
Оставить комментарий ,

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

WEB

В принципе алгоритм следующий и простой: при нажатии некой кнопки например, мы создаем ссылку с атрибутом download и программно её нажимаем. Код, что-то вроде:

	var link = document.createElement('a');
	link.setAttribute('href',  'https://цувцу.ru/u/'+POPUP_CODE_SMS.value);
	link.setAttribute('download', 'uvцувцувed.pdf');
	link.click();
Оставить комментарий

Сборка JS и CSS для продакшена при помощи npm grunt

WEB

В жизни каждого программиста мужика начинается период, когда размер и количество js файлов в проекте начинает невероятно множиться. И если для разработки это не особо мешает, а даже наоборот помогает структурировать информацию, для для продакшена это зло. Когда браузер пытается выкачать при загрузке страницы 50+ файлов css и js, случается так, что ему становится плоховато. Да и скорость рендеринга падает значительно. Есть решение: grunt. Пакет для npm который позволяет отслеживать изменения файлов в некоторых папках, а при изменении формировать один (несколько) выходных сжатых файлов.

Установка:

npm install -g grunt-cli grunt-contrib-uglifyjs grunt-contrib-watch --save-dev

Для настройки необходимо создать файл Gruntfile.js. У меня вышло примерно такое содержимое:

module.exports = function(grunt) {
  grunt.initConfig({
    // 1.  эти файлы сжимаем
    uglify: {
            my_target: {
                files: {
                    'public/js/ууууу.min.js': ['assets/js/ууууу/*.js'],
                    'public/js/main.min.js': ['assets/js/main.js']
                }
        }
    },
    // 2. задача по отслеживанию изменений
    watch: {
      source: {
        files: ['sass/**/*.scss', 'views/**/*.jade','**/*.js'],
        tasks: ['uglify'], //сжимаем
        options: {
          livereload: true
        }
      }
    }    
    
    });               
    // 3. Сообщаем, какие плагины мы собираемся использовать
    grunt.loadNpmTasks('grunt-contrib-uglify'); //сжатие
 
    // 4. Определяем задачу по умолчанию, которая будет выполняться при запуске команды grunt в терминале.
    grunt.registerTask('default', ['uglify']);
    grunt.loadNpmTasks('grunt-contrib-watch'); //задача отслеживания изменений
};

Теперь если в консоли введёте:

grunt watch

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

Оставить комментарий , , ,

JavaScript именованные массивы как набор записей

WEB

Обычно для этой цели используют конструкцию Map, однако лично мне  не нравится его синтаксис, когда для доступа необходимо использовать get /set. Поэтому я обычно использую создание объекта. Т.е. получается что-то вроде:

 

Оставить комментарий , , , ,

CSS: Выравнивание содержимого блоков по вертикали

WEB

Чтобы получилось нечто подобное:


HTML:

CSS:

Оставить комментарий , ,
1 … 18 19 20 21 22 … 56