本文转载自：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();

}

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的下载地址：

https://github.com/requirejs/text

每个模板页，直接写一个代码段就行，比如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></span>人

         <span class="mark">火热报名中</span>

      </div>

   </div>

</div>


至于css部分就不用我多说了吧，所有的页面用一个css文件即可，注意千万写规范，防止样式冲突哟！

require.js实现单页web应用（SPA）的更多相关文章

  1. Javascript 与 SPA单页Web富应用

    书单推荐 # <单页Web应用:JavaScript从前端到后端> http://download.csdn.net/detail/epubitbook/8720475 # <MVC ...

  2. 单页web应用（SPA）的简单介绍

    单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML.J ...

  3. 通过Web Api 和 Angular.js 构建单页面的web 程序

    通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...

  4. 简陋的 ASP.NET CORE 单页Web应用程序“框架”

    我对ASP.NET CORE了解不多,不知道是不是重复造轮子,也或者什么也不是,这个Demo是这样的: 1.非常简单或者说原始:2.将单页Web应用增加了一个页(Page)概念(相当于MVC的 Vie ...

  5. 单页web应用是什么？它又会给传统网站带来哪些好处?

    文章来源:<单页Web应用:JavaScript从前端到后端> 什么是单页应用? 单页应用是指在浏览器中运行的应用,它们在使用期间不会重新加载页面.像所有的应用一样,它旨在帮助用户完成任务 ...

  6. 单页Web应用优缺点

    一.定义单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HT ...

  7. 单页Web应用：

    概念: Web应用程序: WEB应用程序一般是B(浏览器)/S(服务器)模式.Web应用程序首先是“应用程序”,和用标准的程序语言,如C.C++等编写出来的程序没有什么本质上的不同.然而Web应用程序 ...

  8. 构建单页Web应用

    摘自前端农民工的博客 让我们先来看几个网站: coding teambition cloud9 注意这几个网站的相同点,那就是在浏览器中,做了原先“应当”在客户端做的事情.它们的界面切换非常流畅,响应 ...

  9. 构建单页Web应用——简单概述

    一.开发框架 ExtJS可以称为第一代单页应用框架的典型,它封装了各种UI组件,用户主要使用JavaScript来完成整个前端部分,甚至包括布局.随着功能逐渐增加,ExtJS的体积也逐渐增大,即使用于 ...

随机推荐

  1. PAT 1051 Pop Sequence (25 分)

    返回 1051 Pop Sequence (25 分)   Given a stack which can keep M numbers at most. Push N numbers in the ...

  2. 简单gui

    import java.awt.Button; import java.awt.Frame; import java.awt.event.WindowAdapter; import java.awt. ...

  3. Jlink 接口定义

    JTAG有10pin的.14pin的和20pin的,尽管引脚数和引脚的排列顺序不同,但是其中有一些引脚是一样的,各个引脚的定义如下. 1. 引脚定义 Test Clock Input (TCK) -- ...

  4. MySQL的安装配置（无坑

    简单记录一下自己掉坑无数之后,终于找到的一个不坑的方法. 一.安装 #进入一个习惯的文件夹 cd /usr/local/src #下载资源包 wget -i -c http://dev.mysql.c ...

  5. Linux折腾

    安装了一圈发行版,最后发现还是Fedora最稳定 debian安装后无法启动 openSUSE源不完善 manjaro重启就进不去

  6. axios interceptors 拦截 , 页面跳转, token 验证 Vue+axios实现登陆拦截，axios封装(报错,鉴权,跳转,拦截,提示)

    Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示) :https://blog.csdn.net/H1069495874/article/details/80057107 ...

  7. 19-python基础-进制之间的转换

    二进制-八进制-十进制-十六进制相互转换 1.十进制转为其他进制 # (1)十进制转二进制 a = 8 bin(a) --->>'0b1000' # (2)十进制转八进制 oct(a) - ...

  8. Invoke-Obfuscation混淆ps文件绕过Windows_Defender

    前提 powershell只能针对win7之后的系统,之前的win操作系统默认没有安装powershell. 所在目录:C:\Windows\System32\WindowsPowerShell\v1 ...

  9. redis Sorted set 相关命令

  10. systemd-tmpfiles - Operation not permitted chown ; systemd-modules-load.service

    systemd-tmpfiles-setup.service  fail  一般为 /exports/rfs/var/lib/systemd/ 下的文件属性问题 , chown -R   root:r ...