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 相关文章推荐
JQuery 入门实例1
Jun 25 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 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
php中cookie的使用方法
2014/03/29 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
php的扩展写法总结
2019/05/14 PHP
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
js正则相关知识点专题
2018/05/10 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
python生成器的使用方法
2013/11/21 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
安全施工标语
2014/06/07 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
教师个人教学反思
2016/02/23 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技