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

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

下面来看一下目录

从上面项目可以看出,我将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%);

}

实现效果如下:

③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)的更多相关文章

  1. SPA解释：单页应用程序

    单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. 单页W ...

  2. SPA （单页应用程序）

    单页Web应用 编辑 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用.单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程 ...

  3. Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序（SPA）（谷歌翻译）

    在这篇文章中 概观 演习 概要 由网络营 下载网络营训练包 在传统的Web应用程序中,客户机(浏览器)通过请求页面启动与服务器的通信.然后,服务器处理请求,并将页面的HTML发送给客户端.在与页面的后 ...

  4. 【ASP.NET MVC 5】第27章 Web API与单页应用程序

    注:<精通ASP.NET MVC 3框架>受到了出版社和广大读者的充分肯定,这让本人深感欣慰.目前该书的第4版不日即将出版,现在又已开始第5版的翻译,这里先贴出该书的最后一章译稿,仅供大家 ...

  5. Senna.js – 速度极快的单页应用程序引擎

    Senna.js 是一个速度超快的单页应用程序引擎,提供了几个低级别的 API,可以帮助你打造现代化的基于 Web 的应用程序.更重要的是,搜索引擎蜘蛛应该能够索引相同的内容. 通过使用 HTML5 ...

  6. 从头开始学eShopOnContainers——设置WebSPA单页应用程序

    一.简介 Web SPA单页应用程序需要一些额外的步骤才能使其工作,因为它需要在生成Docker镜像之前构建JavaScript框架依赖项和JS代码. 二.安装基础环境 1.安装NPM 为了能够使用n ...

  7. 单页应用（SPA，Single-page-App）和多页应用（MPA，Multi-page App）的区别

    单页应用(SPA,Single-page-App)和多页应用(MPA,Multi-page App)的区别 参考博客:https://www.jianshu.com/p/4c9c29967dd6

  8. 使用 AngularJS 开发一个大规模的单页应用（SPA）

      本文的目标是基于单页面应用程序开发出拥有数百页的内容,包括认证,授权,会话状态等功能,可以支持上千个用户的企业级应用. 下载源代码 介绍 (SPA)这样一个名字里面蕴含着什么呢? 如果你是经典的S ...

  9. 单页面应用程序(SPA)

    一.概念 ①在一个页面上实现网站的大部分功能,就是单页面应用程序,是一种常见的网页开发模式. ②整个网站就只有一个Html文件,每次在切换页面时,不需要请求服务器,只要通过本地的js来切换即可.这样可 ...

随机推荐

  1. RichEditControl(富文本控件)

    可以发邮 件??? https://ww w.evget.com/article/2014/3/25/20723.html

  2. const T、const T*、T *const、const T&、const T*& 的区别

    原文地址: http://blog.csdn.net/luoweifu/article/details/45600415 这里的T指的是一种数据类型,可以是int.long.doule等基本数据类型, ...

  3. FMDB使用SQLite事务Save Point

    FMDB使用SQLite事务Save Point   在SQLite中,事务提供了批量处理,批量撤销的功能.当批量操作中有一步无法完成操作,就会把执行过的语句都撤销,恢复到撤销前的状态.但是由于SQL ...

  4. 【ZJOI2017】树状数组

    题目描述 漆黑的晚上,九条可怜躺在床上辗转反侧.难以入眠的她想起了若干年前她的一次悲惨的 OI 比赛经历.那是一道基础的树状数组题. 给出一个长度为 $n$ 的数组 $A$,初始值都为 $0$,接下来 ...

  5. 查询和设置mysql事务隔离级别

    1.查看当前会话隔离级别 select @@tx_isolation; 2.查看系统当前隔离级别 select @@global.tx_isolation; 3.设置当前会话隔离级别 set sess ...

  6. TF-IDF学习笔记

    计算文本的权重向量,有个很有效的权重方案:TF-IDF权重策略.TF-IDF含义是词频逆文档频率,指的是,如果某个词或短语在一篇文章中出现的频率高,并且在其他文章中很少出现,则认为此词或短语具有很好的 ...

  7. 为什么BT网络中迅雷的速度会这么快，比其它BT软件快

    先看迅雷加速通道的几个概论,参考:http://www.cnblogs.com/EasonJim/p/6608544.html 我个人理解,在传统BT软件中,基于P2P的网络是不具备以上条件去加速的, ...

  8. javascript --- 临时构造器F()

    这篇内容也是之前讲到过的,纯属无聊,莫要见怪.~(-￣▽￣)-~(-￣▽￣)-~(-￣▽￣)-~(-￣▽￣)-~(-￣▽￣)- 正如上文所说,如果所有的prototype属性都指向了一个相同的对象,父 ...

  9. 邁向IT專家成功之路的三十則鐵律 鐵律十六：IT人交友之道-單純

    元曲知名的作家 白樸,曾在沉醉東風﹒漁夫一文創作中,寫道:「雖無刎頸交,卻有忘機友」.IT人交朋友應首重在單純而非廣泛,因為實際上越複雜的朋友圈,只會為你的工作以及生活帶來許多不必要的麻煩.至於男女朋 ...

  10. java设计模式之-建造者模式

    建造者模式可以将复杂的构建与其表示相分离,是的相同的构建过程可以创建出不同的表示.     建造者模式与抽象工厂的差别是:在建造者模式里,有个指导者,这个指导者来管理建造者.用户与指导者相互联系,指导 ...