Маршрутизатор SPA с ванилью JS, а не только с внутренней HTML страницы - PullRequest
1 голос
/ 03 марта 2020

Я нашел этот хороший учебник о том, как реализовать маршрутизатор, как в SPA, но с vanilla JS. Весь код здесь: https://github.com/SantiagoGdaR/vanilla-spa/blob/master/js/router.js

Единственная, но важная проблема, с которой я сталкиваюсь, заключается в том, что она загружает только внутреннюю HTML выбранной страницы, и не выполнить часть сценария. Часть скрипта важна в моем коде, поскольку она создает выделенный код между тегами pre / code.

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

Router.prototype = {
routes: undefined,
rootElem: undefined,
constructor: function (routes) {
    this.routes = routes;
    this.rootElem = document.getElementById('app');
},
init: function () {
    var r = this.routes;
    (function(scope, r) { 
        window.addEventListener('hashchange', function (e) {
            scope.hasChanged(scope, r);
        });
    })(this, r);
    this.hasChanged(this, r);
},
hasChanged: function(scope, r){
    if (window.location.hash.length > 0) {
        for (var i = 0, length = r.length; i < length; i++) {
            var route = r[i];
            if(route.isActiveRoute(window.location.hash.substr(1))) {
                scope.goToRoute(route.htmlName);
            }
        }
    } else {
        for (var i = 0, length = r.length; i < length; i++) {
            var route = r[i];
            if(route.default) {
                scope.goToRoute(route.htmlName);
            }
        }
    }
},
goToRoute: function (htmlName) {
    (function(scope) { 
        var url = 'views/' + htmlName,
            xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                scope.rootElem.innerHTML = this.responseText;
            }
        };
        xhttp.open('GET', url, true);
        xhttp.send();
    })(this);
}
};

Здесь строка, которая показывает, что загружен внутренний HTML:

scope.rootElem.innerHTML = this.responseText;

Результат console.log (this.responseText):

<div>Home</div>

Если вместо этого я поставлю external HTML (но он не работает с responseText:

<div data-brackets-id="104" id="app"><div>About</div></div>

Не имеет значения, что я поставил свой код, поскольку проблема заключается в том, чтобы узнать, возможно ли это, возможно, используя Получите метод или измените эту функцию, чтобы перехватить весь код HTML страницы, а не только ее внутреннее содержимое. Спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...