require.js配合插件text.js实现最简单的单页应用程序


Posted in Javascript onJuly 12, 2016

写了一个测试代码,用require.js配合它的一个插件text.js实现了最简单的单页应用程序,简单的记录一下,方便以后复习,
git地址:https://github.com/lily1010/requireSPA
下面来看一下目录

require.js配合插件text.js实现最简单的单页应用程序

从上面项目可以看出,我将css单独抽离出去,实现了按需加载,即加载test1.html时会加载test1.css,加载test2.html时会加载test2.css.

一、先来看入口index.html代码 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <style type="text/css" class="css-attribute">
   
  </style>
 </head>
 <body>
  <script data-main="js/main" src="js/require.js"></script>
  <div class="page">
   
  </div>
 </body>
</html>

上面很简单,先定义requirejs入口data-main,另外为了按需加载css,我定义了一个类css-attribute. 

二、在main.js配置路径和做逻辑处理 

require.config({
 paths:{
  "jquery":"lib/jquery-1.11.0",
  "text":"lib/text",
  "text1":"../template/test1.html", //这里千万注意路径
  "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){
// 进入页面先设置为页面test1.html内容
 $(".css-attribute").html(css1);
 $(".page").html(template1);
 
// 点击skip按钮设置为页面test2.html内容
 $(".skip").click(function(){
  $(".css-attribute").html(css2);
  $(".page").html(template2);
 })
})
 

上面都是最基础的require配置,注意text.js用法就可以了,很简单的

三、来看看2个页面结构以及样式
①test1.html代码如下:

<div class="test1">
<button class="skip">点击我跳到SPA第二页</button>
</div>

②test1.html的css,即test1.css代码如下:

.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%);
}

实现效果如下: 

require.js配合插件text.js实现最简单的单页应用程序

③test2.html代码如下:

<div class="test2">
 <button class="skip2">我是第二页,点击我回第一页</button>
</div>

④test2.html的css,即test2.css代码如下: 

.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%);
}
 

 实现效果如下:

require.js配合插件text.js实现最简单的单页应用程序

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.validate使用攻略 第三部
Jul 01 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
node.js中EJS 模板快速入门教程
May 08 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
Angular6项目打包优化的实现方法
Dec 15 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 #Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 #Javascript
浅谈angularJS中的事件
Jul 12 #Javascript
深入剖析JavaScript面向对象编程
Jul 12 #Javascript
JS及PHP代码编写八大排序算法
Jul 12 #Javascript
微信支付 JS API支付接口详解
Jul 11 #Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 #Javascript
You might like
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
php curl常用的5个经典例子
2017/01/20 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
用JavaScript隐藏控件的方法
2009/09/21 Javascript
js 多浏览器分别判断代码
2010/04/01 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
Django model select的多种用法详解
2019/07/16 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
什么是python的id函数
2020/06/11 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
服装厂厂长岗位职责
2013/12/27 职场文书
统计岗位职责
2014/02/21 职场文书
安全施工标语
2014/06/07 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
单位工资证明范本
2015/06/12 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
Python图像处理之图像拼接
2021/04/28 Python
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android