require简单实现单页应用程序(SPA)


Posted in Javascript onJuly 12, 2016

写了一个测试代码,用require.js配合它的一个插件text.js实现了最简单的单页应用程序,简单的记录一下,方便以后复习,

git地址:https://github.com/lily1010/requireSPA

下面来看一下目录

require简单实现单页应用程序(SPA)

从上面项目可以看出,我将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简单实现单页应用程序(SPA)

③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简单实现单页应用程序(SPA)

以上这篇require简单实现单页应用程序(SPA)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
javascript 另一种图片滚动切换效果思路
Apr 20 Javascript
跟我学习javascript的循环
Nov 18 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
three.js中3D视野的缩放实现代码
Nov 16 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 #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
You might like
一个简单实现多条件查询的例子
2006/10/09 PHP
php向js函数传参的几种方法
2014/08/10 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
Laravel find in set排序实例
2019/10/09 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
python Tornado框架的使用示例
2020/10/19 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
自我评价是什么
2014/01/04 职场文书
银行存款证明样本
2014/01/17 职场文书
《四季》教学反思
2014/04/08 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
详解MindSpore自定义模型损失函数
2021/06/30 Python