Как заставить мой SPA работать без фреймворка с использованием Ajax? - PullRequest
Новая
       5

Как заставить мой SPA работать без фреймворка с использованием Ajax?

0 голосов
/ 23 октября 2019

Я занимаюсь разработкой веб-приложения с использованием jQuery и использую ajax для создания SPA.

В основном у меня есть меню с левой стороны страницы, а содержимое - с правой стороны. ,Каждый раз, когда пользователь нажимает на опцию меню, я делаю ajax-вызов, встраивая html-содержимое соответствующей страницы в div «content».

На этих страницах также есть ссылки, которые также делают ajax-вызовы для загрузки других страниц, поэтому я добавил содержимое script.js, и все работало хорошо. Я разработал все приложение, используя это решение.

Проблема в том, что: когда я запускал интегрированные тесты, я заметил, что приложение замедляется, поскольку щелчки по ссылкам, вероятно, вызваны встроенным контентом.

Я не хочупереписать все приложение, используя фреймворк только из-за этого.

index.html 

<body>    
<div id="menu">    
   <a class="menu-option" href="templates/page1.html">
     Page 1
   </a>

   <a class="menu-option" href="templates/page2.html">
     Page 2
   </a>

   <a class="menu-option" href="templates/page3.html">
     Page 3
   </a>    
</div>      
<div id="content"></div>       
</body>

script.js 

$(document).ready(function () {      
   $('.menu-option').on('click', function(e){        
        e.preventDefault();

        var pageRef = $(this).attr('href');

        callPage(pageRef);    
    })    
});

function callPage(pageRefInput) {    
    $.ajax({    
        url: pageRefInput,
        type: "GET",
        dataType: 'text',    
        success: function( response ) {
            console.log('the page was loaded');

            console.log(response);

            $('#content').html(response);    
        },            
        error: function( error ) {
            console.log('the page was NOT loaded', error);
        },    
        complete: function( xhr, status ) {
            console.log("The request is completed!");

            var item = '<script class="script">var url = "js/script.js";$.getScript(url);</script>';                  
            $('#content').append(item);  
        },    
    });    
}
...