One-page application SPA (Sigle page aolication)

One-page application SPA (Sigle page aolication)

Advantages:

1. It has the immediacy of desktop application, the portability and accessibility of the website.

2, the user experience is good, fast, content changes do not need to reload the entire page, Web applications more responsive and more fascinating.

3, based on the above point, the spa relative to the server pressure is small.

4, good front and rear end separation. Spa and restful architectures are used together, the backend is no longer responsible for template rendering, output page work, Web front end and various mobile terminal status parity, backend API generalization.

Disadvantages:

1, not conducive to SEO.

2, the initial loading time is relatively increased.

3, navigation is not available, if it is necessary to navigate the need to self-realization forward, backward.

First step: Complete the configuration on the main page

The second step: Create a new modules in public under the folder of each module, the JS of each module is as follows:

define(function(require,exports){//模块化标准写法 var $ = require("jquery"); var load=function(){ window.location.replace("index.html#login");//用于入口模块应用，使刷新不会转换页面 $("#content").load("/modules/login/login.html",function(){//使用了ajax的load方法 $(‘:button[value=注册]‘).click(function(){ var register= require("register"); register.load();//页面转换 }) }) } exports.load=load;//暴露方法})

Step three: Write the entry module

define(function(require){ var register=require("register"); var login=require("login"); var students=require("students") var hash=window.location.hash;//获取#后面的内容，例如#login var idx=hash.indexOf("?"); if(idx>=0){ hash=hash.substring(0,idx);//截取字符串，不含？以后的内容 } if(hash=="#register"){//判断是否转换模块 register.load(); }else if(hash=="#login"){ login.load(); }else if(hash=="#students"){ students.load(); }else{ register.load(); }})

One-page application SPA (Sigle page aolication)