VUE basics (9): SPA (single page application) and MPA (multi-page application)

1. What is SPA

Definition: SPA (singgle-page application), single page application.

SPA is a network application or website model that interacts with users by dynamically rewriting the current page. This method avoids switching between pages to interrupt the user experience.

In a single-page application, all necessary codes (HTML, JavaScript, and CSS) are retrieved through the loading of a single page, or appropriate resources are dynamically loaded and added to the page as needed (usually in response to user operations).

The page will not be reloaded at any point in time, nor will control transfer to other pages.

Give a chestnut: SPA== thermos cup, and the above data picture and other content== wolfberry and tea, the thermos cup often changes tea and wolfberry, and the programmer's thermos cup is the same.

The well-known js frameworks such as react, vue, angular, ember belong to SPA.

2. What is MPA

Definition: MAP (Multi-page application), multi-page application.

In MPA, each page is a main page and is independent.

When we visit another page, we need to reload the html, css, js files, and the public files are loaded according to demand.

Take a chestnut: MPA==Multiple vacuum flasks, the corresponding data content is placed in the corresponding separate page, the wolfberry is placed separately in the "Goji berry-vacuum cup", and the tea is placed in the "tea- vacuum cup" separately, if you want to change You need to change a thermos when you grow something to drink.

Third, the difference between SPA and MPA

1. The advantages and disadvantages of SPA (Single Page Application)

① Advantages:

· With the immediacy of desktop applications, portability and accessibility of the website.

·The user experience is good and fast, and the content change does not need to reload the entire page.

· Good separation of front and back ends, more obvious division of labor.

·The maintenance cost is relatively low.

②Disadvantages:

· Not conducive to the capture of search engines.

· The first rendering speed is relatively slow.

·The development cost is relatively high.

2. Advantages and disadvantages of MPA (multi-page application)

① Advantages:

· Conducive to search engine capture, search engine optimization is easy to achieve.

·The first rendering speed is relatively fast.

·The development cost is relatively low.

②Disadvantages:

· Switching between pages is slow to load, not smooth, and poor user experience, especially on mobile.

· There are many duplicate codes on the page.

·The maintenance cost is relatively high.

Three, realize a SPA

1.hash mode

The core performs routing jumps by monitoring the hash in the url.

// 定义 Router
class Router {
    
    
    constructor () {
    
    
        this.routes = {
    
    }; // 存放路由path及callback
        this.currentUrl = '';
        
        // 监听路由change调用相对应的路由回调
        window.addEventListener('load', this.refresh, false);
        window.addEventListener('hashchange', this.refresh, false);
    }
    
    route(path, callback){
    
    
        this.routes[path] = callback;
    }
    
    push(path) {
    
    
        this.routes[path] && this.routes[path]()
    }
}

// 使用 router
window.miniRouter = new Router();
miniRouter.route('/', () => console.log('page1'))
miniRouter.route('/page2', () => console.log('page2'))

miniRouter.push('/') // page1
miniRouter.push('/page2') // page2

2.history mode

The core of history mode borrows HTML5 history api, which provides rich router-related attributes

First understand a few related APIs

· History.pushState browser history record to add records.

· History.replaceState modify the current record in the browser history.

· History.popState is triggered when history changes.

// 定义 Router
class Router {
    
    
    constructor () {
    
    
        this.routes = {
    
    };
        this.listerPopState()
    }
    
    init(path) {
    
    
        history.replaceState({
    
    path: path}, null, path);
        this.routes[path] && this.routes[path]();
    }
    
    route(path, callback){
    
    
        this.routes[path] = callback;
    }
    
    push(path) {
    
    
        history.pushState({
    
    path: path}, null, path);
        this.routes[path] && this.routes[path]();
    }
    
    listerPopState () {
    
    
        window.addEventListener('popstate' , e => {
    
    
            const path = e.state && e.state.path;
            this.routers[path] && this.routers[path]()
        })
    }
}

// 使用 Router

window.miniRouter = new Router();
miniRouter.route('/', ()=> console.log('page1'))
miniRouter.route('/page2', ()=> console.log('page2'))

// 跳转
miniRouter.push('/page2')  // page2

Reference: JS Daily Question (the author is gray)