require.js实现单页web应用（SPA）
本文转载自：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的下载地址：
每个模板页，直接写一个代码段就行，比如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）的更多相关文章
- Javascript 与 SPA单页Web富应用
书单推荐 # <单页Web应用:JavaScript从前端到后端> http://download.csdn.net/detail/epubitbook/8720475 # <MVC ...
- 单页web应用（SPA）的简单介绍
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML.J ...
- 通过Web Api 和 Angular.js 构建单页面的web 程序
通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...
- 简陋的 ASP.NET CORE 单页Web应用程序“框架”
我对ASP.NET CORE了解不多,不知道是不是重复造轮子,也或者什么也不是,这个Demo是这样的: 1.非常简单或者说原始:2.将单页Web应用增加了一个页(Page)概念(相当于MVC的 Vie ...
- 单页web应用是什么？它又会给传统网站带来哪些好处?
文章来源:<单页Web应用:JavaScript从前端到后端> 什么是单页应用? 单页应用是指在浏览器中运行的应用,它们在使用期间不会重新加载页面.像所有的应用一样,它旨在帮助用户完成任务 ...
- 单页Web应用优缺点
一.定义单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HT ...
- 单页Web应用：
概念: Web应用程序: WEB应用程序一般是B(浏览器)/S(服务器)模式.Web应用程序首先是“应用程序”,和用标准的程序语言,如C.C++等编写出来的程序没有什么本质上的不同.然而Web应用程序 ...
- 构建单页Web应用
摘自前端农民工的博客 让我们先来看几个网站: coding teambition cloud9 注意这几个网站的相同点,那就是在浏览器中,做了原先“应当”在客户端做的事情.它们的界面切换非常流畅,响应 ...
- 构建单页Web应用——简单概述
一.开发框架 ExtJS可以称为第一代单页应用框架的典型,它封装了各种UI组件,用户主要使用JavaScript来完成整个前端部分,甚至包括布局.随着功能逐渐增加,ExtJS的体积也逐渐增大,即使用于 ...
随机推荐
- python基础-包和模块
Python基础-包与模块 写在前面 如非特别说明,下文均基于Python3 摘要 为重用以及更好的维护代码,Python使用了模块与包:一个Python文件就是一个模块,包是组织模块的特殊目录(包含 ...
- [c#源码分享]TCP通信中的大文件传送
NetworkComms网络通信框架序言 源码 (为节省空间,不包含通信框架源码,通信框架源码请另行下载) 文件传送在TCP通信中是经常用到的,本文针对文件传送进行探讨 经过测试,可以发送比较大的 ...
- gentoo/funtoo 环境配置使用 valgrind
设置需要的 use 与 FEATURES,重新编译 glibc 即可: # echo "sys-libs/glibc debug" > /etc/portage/packag ...
- 修改maven包本地默认位置
前言 这段时间上岸了,就有时间整理电脑的资料(强迫症重度患者),就向maven以及gradle的仓库位置动手了. 目的 改变maven的默认位置 步骤 修改maven的配置文件setting.xml( ...
- python_ 模块 json pickle shelve
一,什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编写的代码( ...
- Python之在字符串中处理html和xml
需求:替换文本字符串中的 ‘<’ 或者 ‘>’ ,使用 html.escape() 函数 import html s="<div>你好<div>" ...
- teb教程3
配置和运行机器人导航 简介:配置teb_local_planner作为navigation中local planner的插件 参考teb安装 由于局部代价地图的大小和分辨率对优化性能影响很大,因为占据 ...
- 【模板篇】NTT和三模数NTT
之前写过FFT的笔记. 我们知道FFT是在复数域上进行的变换. 而且经过数学家的证明, DFT是复数域上唯一满足循环卷积性质的变换. 而我们在OI中, 经常遇到对xxxx取模的题目, 这就启发我们可不 ...
- Jmeter-【If控制器】-__jexl3函数&__groovy函数
一.使用场景 根据请求返回结果中某一字段的取值判断往下走的流程.例如: 二.__jexl3函数实现 格式:${__jexl3(,)} 三.__groovy函数实现 格式:${__groovy(,)}
- magento 多域名多店
在magento1.4中请参考官网 :http://www.magentocommerce.com/knowledge-base/entry/tutorial-multi-site-multi-dom ...