<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

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

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

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

Подписавшись по 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):

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