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定时器设定时间执行动作
Apr 02 Javascript
js精度溢出解决方案
Dec 02 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
Vue生命周期示例详解
Apr 12 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 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和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
php session的应用详细介绍
2017/03/22 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
pyqt5简介及安装方法介绍
2018/01/31 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
python 如何在测试中使用 Mock
2021/03/01 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
MySQL面试题
2014/01/12 面试题
推荐信怎么写
2014/05/09 职场文书
初一军训感言
2015/08/01 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS