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数组处理方法汇总
Jun 20 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
angular+webpack2实战例子
May 23 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
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
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
Javascript window对象详解
2014/11/12 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
Python查看多台服务器进程的脚本分享
2014/06/11 Python
python发送告警邮件脚本
2018/09/17 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
旅游网创业计划书
2014/01/31 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
关于python中模块和重载的问题
2021/11/02 Python