写了一个测试代码,用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. ConcurrentHashMap如何保证线程安全

    以前看过HashMap的内部实现,知道HashMap是使用Node数组+链表+红黑树的数据结构来实现,如下图所示.但是HashMap是非线程安全,在多线程环境不能够使用. 不过JDK在其并发包中为我们 ...

  2. JRoll 2 使用文档（史上最强大的下拉刷新，滚动，无限加载插件）

    概述 说明 JRoll,一款能滚起上万条数据,具有滑动加速.回弹.缩放.滚动条.滑动事件等功能,兼容CommonJS/AMD/CMD模块规范,开源,免费的轻量级html5滚动插件. JRoll第二版是 ...

  3. java IOUtils下载图片

    import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.Inp ...

  4. django忘记超级用户密码的解决方法

    用Django shell: 1 python manage.py shell 然后获取你的用户名,并且重设密码: 1 2 3 4 from django.contrib.auth.models im ...

  5. OpenGL中FBO的概念及其应用 [转]

    http://www.cppblog.com/kongque/archive/2010/08/26/124754.html FBO一个最常见的应用就是:渲染到纹理(render to texture) ...

  6. php 的$_POST 和$_REQUEST的区别

    发现$_POST 没数据,而$_REQUEST 有数据 ----------------------------------------- https://stackoverflow.com/ques ...

  7. 写一个dup2功能同样的函数，不能调用 fcntl 函数，而且要有出错处理

    实现的时候用到系统原来的dup函数 // mydup2.c // 2015/08/17 Lucifer Zhang version1.0 // write my own dup2 function / ...

  8. python的私有化

    1.双下划线(__) 由双下划线開始的属性在执行时被混淆,所以直接訪问是不同意的.实际上以双下划线開始的属性 会在解释时在前面加上下划线和类名.如self.__num会被解析为self._classN ...

  9. ffmpeg 内存池

    ffmpeg 部分内存管理采用 了内存池技术.基本的接口在libavutil目录下的buffer.c文件中实现: 1. av_buffer_pool_init 初始化 内存池 2 av_buffer_ ...

  10. Android摄像头採集的视频数据流怎样通过Socket实时发送到目标服务端

    分两块: 1.取得摄像头採集的视频流 2.发送到server端 protected MediaRecorder mMediaRecorder; private LocalServerSocket mL ...