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获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
Vue.js 事件修饰符的使用教程
Nov 01 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 Javascript
如何手写简易的 Vue Router
Oct 10 Javascript
JS Canvas接口和动画效果大全
Apr 29 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
一个比较简单的PHP 分页分组类
2009/12/10 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
JavaScript 格式字符串的应用
2010/03/29 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
jQuery操作css样式
2017/05/15 jQuery
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
十佳大学生村官事迹
2014/01/09 职场文书
绿化工程实施方案
2014/03/17 职场文书
小班下学期评语
2014/05/04 职场文书
党员志愿者活动方案
2014/08/28 职场文书
同意迁入证明模板
2014/10/26 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
Python移位密码、仿射变换解密实例代码
2021/06/27 Python