写了一个测试代码,用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. [原创][SW]TortoiseSVN创建本地版本控制

    1. 简介 TortoiseSVN是一个Windows平台下的Subversion用户端软件,以Windows shell extension的方式写成.它是自由软件,以GNU通用公共许可证发布.(f ...

  3. Tyvj——P1952 Easy

    http://www.tyvj.cn/p/1952 描述 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:(我们来简化一下这个游戏的规则有n次点击要做,成功了就是o,失败了就是 ...

  4. java保留n位小数

    double x = 123456789.987654312; String.format("%.nf", x) n为保留的小数位,x必须为double类型. 例如保留3位小数 S ...

  5. IntelliJ IDEA版本：Ultimate、Community、EAP版本的区别

    Community: 社区版,免费,但是功能有限制,Android Studio就是基于这个版本定制的. http://idea-intellij.com/intellij-community/ Ul ...

  6. Jstl indexOf 参考

    <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> < ...

  7. react 调用 function 的写法 及 解决 react onClick 方法自动执行

    1.react 调用方法的写法 (1)方式一 onClick={this.getFetchData.bind(this,item.id)} (2)方式二 getFetchData(e){ this.s ...

  8. 无线热点登陆认证原理探究---captive portal

    什么是Captive Portal 大家肯定都连过公共场所的wifi热点,比如麦当劳等地方的.他们的wifi往往一连上去就会弹出一个要求登录或者微信关注之类的页面,只有在这个页面完成操作了才能正常访问 ...

  9. hdu5296(2015多校1)--Annoying problem(lca+一个公式)

    Annoying problem Time Limit: 16000/8000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...

  10. Logical Volume Manager (Linux)

    http://en.wikipedia.org/wiki/Logical_Volume_Manager_(Linux) Logical Volume Manager (Linux) From Wiki ...