Home > Developer > Web Develop
A single-page Web application (single-page application is referred to as SPA) is a special Web application. It limits all activities to a single Web page, loading the appropriate HTML, JavaScript, and CSS only when the Web page is initialized. Once the page has been loaded, the spa will not reload or jump through the page because of user action. Instead, it uses JavaScript to dynamically transform the HTML inside (using div toggle display and hide) to enable UI interaction with the user. The SPA provides a smoother user experience due to the avoidance of page reloading. Thanks to Ajax, we can achieve no jump refresh, but also thanks to the browser's histroy mechanism, we use the hash of the changes to achieve the driving interface changes.
AngularJS, the most popular MVVM frame in the current, is perfect for spas, similar to Vuejs,backbone,extjs.
Hash ValueThat is, the part after the # Sign in the URL.
<ahref="target">go target</a>
......
<
div
id="target">i am target place</
div
> Click the A link and the document will scroll to the viewable area of the DIV with the ID target. Hash In addition to this feature has another meaning: to guide the browser's behavior but not upload to the server. As you know, changing any one of the characters in the URL will cause the browser to re-request the server, except for the character after the # number. So, in short, we can understand that changing the value behind the # does not trigger the page reload, but it will be recorded in the browser history.
Drive Div Show Hidden way There are many kinds, better choice for the following two kinds:
1. Listen to the change of the hash in the address bar to drive the interface
2. Record browser history with Pushsate, drive interface to send changes
How to build a basic spaFirst of all, we draw three Div, they are actually as the interface of three interface, body as the Interface box container, limit their size. In order to pair each interface with a hash address, we provide each div with an ID, the hash address and the corresponding selector (ID, Class) to establish a link relationship, so that the hash value can be manipulated from the interface.
<body><div id= "A" class= "a" >A</div><div id= "B" class= "B" style= "Display:none;" >B</div><div id= "C" class= "C" style= "Display:none;" >C</div></body> hash changes will not cause the interface to refresh, but will start Onhashchange event, we have to do is to listen to this event: at present, only the above code, we can complete a simple spa, through the change in the Address bar, the interface will change accordingly. Of course, in addition to manually change the hash in the address bar, we can also use the code to change its changes, so as to promote the interface changes,window.localtion.hash= "A"; ________________________________refer to the original link: http://www.cnblogs.com/constantince/p/5586851.html#3457324A simple Introduction to single page Web application (SPA)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
