Require simple implementation of one-page application (SPA) _javascript tips

Wrote a test code, with Require.js with a plug-in text.js to achieve the simplest single page application, a simple record, easy to review later,

Git address: Https://github.com/lily1010/requireSPA

Let's look at the table of contents

From the above items can be seen, I pull out the CSS alone, to achieve on-demand loading, that is, loading test1.html load test1.css, loading test2.html will load TEST2.CSS.

First look at the entry index.html code

<! DOCTYPE html>
 
 

The above is very simple, first define the Requirejs entrance Data-main, in addition to loading CSS on demand, I defined a class Css-attribute.

Two in Main.js configuration path and doing logical processing

Require.config ({
  paths:{
    "jquery": "lib/jquery-1.11.0",
    "text": "Lib/text",
    "Text1": ". /template/test1.html ",//here must pay attention to the path
    " Text2 ":". /template/test2.html ","
    css1 ":". /style/test1.css ","
    css2 ":". /style/test2.css "
  }
}"
require ([' jquery ', ' text!text1 ', ' text!text2 ', ' text!css1 ', ' text!css2 '], function ($,TEMPLATE1,TEMPLATE2,CSS1,CSS2) {
//  Entry page first set to page test1.html content
  $ (". Css-attribute"). HTML ( CSS1);
  $ (". Page"). html (template1);  Click the Skip button to set the page test2.html content
  $ (". Skip"). Click (function () {
    $ (". Css-attribute"). HTML (CSS2);
    $ (". Page"). html (TEMPLATE2);
  })

Above are the most basic require configuration, pay attention to text.js usage on it, very simple

Three look at 2 page structure and style

The ①test1.html code is as follows:

<div class= "Test1" >
  <button class= "Skip" > Click I jump to Spa page two </button>
</div>

②test1.html CSS, the TEST1.CSS code is as follows:

. test1{
  Position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  Background-color:red
}
. skip{
  Position:absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate ( -50%,-50%);
  Transform:translate ( -50%,-50%);
}

The implementation effect is as follows:

The ③test2.html code is as follows:

<div class= "Test2" >
  <button class= "SKIP2" > I am the second page, click Me back to the first page </button>
</div>

④test2.html CSS, the TEST2.CSS code is as follows:

. test2{
  Position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  Background-color:pink
}
. skip2{
  Position:absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate ( -50%,-50%);
  Transform:translate ( -50%,-50%);
}

The implementation effect is as follows:

The above require simple implementation of one-page application (SPA) is a small series to share all the content, I hope to give you a reference, but also hope that we support the cloud-dwelling community.