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 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
JavaScript中this详解
Sep 01 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
javascript实现移动端红包雨页面
Jun 23 Javascript
Vue组件跨层级获取组件操作
Jul 27 Javascript
原生JS运动实现轮播图
Jan 02 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
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
解析PHP可变函数的经典用法
2013/06/20 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
说一说Python logging
2016/04/15 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
python中if及if-else如何使用
2020/06/02 Python
Python代码需要缩进吗
2020/07/01 Python
html5使用canvas画三角形
2014/12/15 HTML / CSS
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
实习生自我鉴定范文
2013/12/05 职场文书
网吧收银员岗位职责
2013/12/14 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
优秀班组长事迹
2014/05/31 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
党员转正介绍人意见
2015/06/03 职场文书
余世维讲座观后感
2015/06/11 职场文书
校园新闻稿范文
2015/07/18 职场文书