SPA + MVC
SPA
single page application
A single-page application (SPA) is a web application or website that interacts with the web browser by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages.
Browser history
window.history
window.history.back()window.history.forward()This acts exactly as if the user clicked on the Back button in their browser toolbar.
Similarly, you can move forward (as if the user clicked the Forward button), like this:
window.history.go()window.history.forward() === window.history.go(1)
window.history.back() === window.history.go(-1)You can use the go() method to load a specific page from session history, identified by its relative position to the current page.
(The current page's relative position is 0.)
window.onpopstate = function(event) {
console.warn(
"location: "
+ document.location
+ ", state: "
+ JSON.stringify(event.state)
);
};A popstate event is dispatched to the window each time the active history entry changes between two history entries for the same document.
history.pushState(state, title[, url])history.pushState()
method adds a state to the browser's session history stack.
history.replaceState()
method modifies the current history entry, replacing it with the stateObj, title, and URL passed in the method parameters. This method is particularly useful when you want to update the state object or URL of the current history entry in response to some user action.
history.replaceState(stateObj, title, [url])📝 NOTE:
Calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by performing a browser action, such as clicking on the back button (or calling history.back() in JavaScript), when navigating between two history entries for the same document.
window.onpopstate = function(event) {
console.log(
"location: "
+ document.location
+ ", state: "
+ JSON.stringify(event.state)
);
};
history.pushState({page: 1}, "title 1", "?page=1");
// history.pushState({page: 2}, "title 2", "?page=2");
// history.replaceState({page: 3}, "title 3", "?page=3");
// history.back();
// history.back();
// history.go(2); Design Principles
-
KISS
-
DRY
-
SOLID
KISS (KEEP IT SIMPLE STUPID)
GOOD 😌
WRONG 😑
DRY (Don’t repeat yourself )
SOLID
S - Single-responsibility principle
O - Open-closed principle
L - Liskov substitution principle
I - Interface segregation principle
D - Dependency inversion principle
SOLID. (S - Single-responsibility principle)
A class should have one and only one job.
SOLID. (O - Open-closed principle)
Objects or entities should be open for extension, but closed for modification.
SOLID. (L - Liskov substitution principle)
Let q(x) be a property provable about objects of x of type T. Then q(y) should be provable for objects y of type S where S is a subtype of T.
SOLID. (I - Interface segregation principle)
A client should never be forced to implement an interface that it doesn’t use or clients shouldn’t be forced to depend on methods they do not use.
the Single Responsibility Principle for Interfaces
SOLID. (D - Dependency inversion principle
Entities must depend on abstractions not on concretions. It states that the high level module must not depend on the low level module, but they should depend on abstractions.
MVC
model view controller
Observer pattern
spa+mvc
By Aleh Lipski
