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 相关文章推荐
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 Javascript
微信小程序实现日历小功能
Nov 18 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
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
脚本收藏iframe
2006/07/21 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
浅谈python numpy中nonzero()的用法
2018/04/02 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
浙大毕业生自荐信
2014/01/26 职场文书
临床医师个人自我评价
2014/04/06 职场文书
青春演讲稿范文
2014/05/08 职场文书
小学班主任研修日志
2015/11/13 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android
使用Python获取字典键对应值的方法
2022/04/26 Python