<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Простой роутер на JavaScript

Простой роутер на JavaScript

В одностраничных приложениях (Single Page Application,SPA) центральным компонентом является роутер (Router). Его задачей является определить какой обработчик нужно вызвать для данного маршрута. И сейчас я покажу Вам базовый принцип реализации роутера на JavaScript.

Код html страницы:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS Router</title>
</head>
<body>

    <div id="links">
        <a href="/">Gallery</a>
        <a href="/article/234019/kiazim">Article #234019</a>
        <a href="/company/cartofan/post/2312">Cartofan Blog</a>
    </div>

    
    <script src="src/router.js"></script>
    <script>
    
        // инициализируем роутер
        Router.init();
        
        // запускаем главную страницу
        Router.dispatch('/');

        // обработчик нажатий на ссылки
        let handler = event =>  {
            
            // получаем запрошенный url
            let url = new URL(event.currentTarget.href);
            
            // запускаем роутер, предавая ему path
            Router.dispatch(url.pathname);
            
            // запрещаем дальнейший переход по ссылке
            event.preventDefault();
        }

        // получаем все ссылки на странице
        let anchors = document.querySelectorAll('a');
        
        // вешаем на событие onclick обработчик
        for( let anchor of anchors ) anchor.onclick = handler;
        
    </script>
</body>
</html>

Сам скрипт Router.js

// `класс` роутера
let Router = {

    // маршруты и соответствующие им обработчики
    routes: {
        "/": "index",
        "/article/:id/:author": "article",
        "/company/:name/post/:id": "company_blog",
    },


    // метод проходиться по массиву routes и создает
    // создает объект на каждый маршрут
    init: function() {
        
        // объявляем свойство _routes
        this._routes = [];
        for( let route in this.routes ) {
    
            // имя метода-обрботчика
            let method = this.routes[route];
            
            // добавляем в массив роутов объект
            this._routes.push({
                
                // регулярное выражение с которым будет сопоставляться ссылка
                // ее надо преобразовать из формата :tag в RegEx
                // модификатор g обязателен
                pattern: new RegExp('^' + route.replace(/:\w+/g,'(\\w+)') + '$'),
                
                // метод-обработчик
                // определяется в объекте Route
                // для удобства
                callback: this[method]
            });

        }

    },
    
    
    
    dispatch: function(path) {
        
        // количество маршрутов в массиве
        var i = this._routes.length;
        
        // цикл до конца
        while( i-- ) {
            
            // если запрошенный путь соответствует какому-либо 
            // маршруту, смотрим есть ли маршруты
            var args = path.match(this._routes[i].pattern);
            
            // если есть аргументы
            if( args ) {
                
                // вызываем обработчик из объекта, передавая ему аргументы
                // args.slice(1) отрезает всю найденную строку
                this._routes[i].callback.apply(this,args.slice(1))
            }
        }
    },


    // обработчик 
    // главной страницы
    index: function() {
        console.log("Main page");
    },


    // контроллер статей
    article: function(id,author) {
        console.log(`Article #${id} Author: ${author}`);
    },
    
    
    // контроллер блога компаний
    company_blog: function(name,id) {
        console.log(`Artwork #${name}, comment #${id}`)
    }

}

Вот так можно создать простой роутер на JavaScript.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.