本文转载自：https://blog.csdn.net/qq_33401924/article/details/53815922
移动端单页应用基本上是做移动端最流行的的方式了，但是对于很多前端来说，可能仅仅只会一个jquery,而利用jquery实现单页应用会让人痛不欲生。也有人选择使用原生js实现单页应用，但是这样做的方法也是非常笨拙。当下最流行的单页应用无疑是用路由完成，比如angular,react,vue等，都带有其路由组件，方便好用。但是这些技术，很多前端是没有接触过，也没时间学。所以，我就给大家带来了超级简单实用的require.js实现单页应用的方法。
至于require.js是什么，可能也有人不太清楚，可以去百度查一查，在这里我就不多介绍了。因为，你甚至不需要知道他是什么，就能完成这个项目！就是这么简单。
先看项目效果图：
首先，我们先搭好项目框架：
然后，在index里写上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>九宫格</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="style/mui.min.css"> <!--<link rel="stylesheet" href="style/font-awesome.min.css">--> <link rel="stylesheet" href="style/icons-extra.css"> <link rel="stylesheet" href="style/index.css"> </head> <body> <!--<header>--> <!--<i class="fa fa-angle-left fa-7x"></i>--> <!--<span>首页</span>--> <!--</header>--> <div class="page"> </div> <script data-main="js/main" src="js/require.js"></script> </body> </html>
注意：我们使用require,需要使用require的写法，既
<script data-main="js/main" src="js/require.js"></script>
其中，main.js就是我们的入口js，也就是我们写页面逻辑的地方，require.js在百度上下载引入即可。
下一步，我们需要进入main.js中配置require.js
/** * Created by king on 2016/12/15. */ require.config({ paths:{ "jquery":"lib/jquery.min", "text":"lib/text", "page1":"../template/index.html", "page2":"../template/base.html", "page3":"../template/time.html", "page4":"../template/address.html", "page5":"../template/detail.html", "page6":"../template/join.html", "page7":"../template/organize.html", "page8":"../template/picture.html", "page9":"../template/guest.html", "page10":"../template/interact.html", "page12":"../template/gongzhonghao.html", "page13":"../template/contact.html", "page14":"../template/people.html", "page15":"../template/contact.html" } }); require(['jquery','text!page1','text!page2','text!page3','text!page4','text!page5','text!page6','text!page7','text!page8','text!page9','text!page10','text!page12','text!page13','text!page14','text!page15'],function ($,page1,page2,page3,page4,page5,page6,page7,page8,page9,page10,page12,page13,page14,page15) { //加载首页 $(".page").html(page1); //返回按钮 $('.page').on('click','.back',function () { go(page1); }); // 页面跳转 $('.page').on('click','.base',function () { go(page2); }); $('.page').on('click','.time',function () { go(page3); }); }); function go(page) { $(".page").html(page); $('body').scrollTop(0); }
tips:中括号里的名字一定要和function的参数对应，比如，jquery—-$,按顺序来。
配置方法，配置项目路径，这里，我们需要的所有文件，都在这里定义一下，取名字，写好路径
require.config({ paths:{ "jquery":"lib/jquery.min", "text":"lib/text", "page1":"../template/index.html", "page2":"../template/base.html", "page3":"../template/time.html" } });
结合，我上面发的项目目录配置，千万别配错了哟。
配置完路径后，我们拿过来用就行了。但是一定要按照require的写法使用
require(['jquery','text!page1','text!page2','text!page3','text!page4','text!page5','text!page6','text!page7','text!page8','text!page9','text!page10','text!page12','text!page13','text!page14','text!page15'],function ($,page1,page2,page3,page4,page5,page6,page7,page8,page9,page10,page12,page13,page14,page15) { //加载首页 $(".page").html(page1); //返回按钮 $('.page').on('click','.back',function () { go(page1); }); // 页面跳转 $('.page').on('click','.base',function () { go(page2); }); $('.page').on('click','.time',function () { go(page3); }); });
这里要说一下，为什么要写出 text!page2 ，因为我们实现单页的原理其实是按需加载，替换首页里page的内容，所以，我们必须使用require自带的text.js将写的模板页的代码转换成字符串才可以使用。一定要这样去写！
text.js的下载地址：
每个模板页，直接写一个代码段就行，比如page2的页面内容是
<div class="page2"> <header class="mui-bar mui-bar-nav"> <a class="mui-icon mui-icon-left-nav mui-pull-left back"></a> <h1 class="mui-title">基本信息</h1> </header> <div class="banner"> </div> <div class="base-content"> <span class="tip">【培训会】</span> <span class="title">XO网在线</span> <div class="details"> 会议规模：<span>1200</span>人 <span class="mark">火热报名中</span> </div> </div> </div>
至于css部分就不用我多说了吧，所有的页面用一个css文件即可，注意千万写规范，防止样式冲突哟！