写了一个测试代码,用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. Eventbus 使用方法和原理分析

    对于 Eventbus ,相信很多 Android 小伙伴都用到过. 1.创建事件实体类 所谓的事件实体类,就是传递的事件,一个组件向另一个组件发送的信息可以储存在一个类中,该类就是一个事件,会被 E ...

  2. Elasticsearch分词导致的查找错误

    这周在做视频搜索的过程中遇到一个问题,就是用下面的查询表达式去Elasticsearch检索,检索不到想要的结果.查询语句如下: 而查询的字段的值为: "mergeVideoName&quo ...

  3. Maven设置代理

    很多时候电信的网络对于出国不太稳定,针对一些库下载速度比较慢,所以在使用SSR出国时配置maven使用是一种不错的选择.当然,还有另一种选择,就是使用国内的镜像库. 操作步骤: 1.打开{M2_HOM ...

  4. asp.net Excel导入&导出

    1.Excel数据导入到数据库中: //该方法实现从Excel中导出数据到DataSet中,其中filepath为Excel文件的绝对路径,sheetname为表示那个Excel表:        p ...

  5. Android二维码工具zxing使用

    二维码在我们生活中随处可见.在我眼里简直能够用"泛滥"来形容啦.那怎样在我们Android项目中扫描识别二维码或生成二维码图片呢? 我们通常使用的开源框架是zxing.在githu ...

  6. PHP compact() 函数

    Compact ---- 创建一个包含变量名和它们的值的数组: <?php $firstname = "Bill"; $lastname = "Gates" ...

  7. HDU1532_Drainage Ditches(网络流/EK模板/Dinic模板(邻接矩阵/前向星))

    Drainage Ditches Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  8. C++11 并发指南三(std::mutex 详解)（转）

    转自:http://www.cnblogs.com/haippy/p/3237213.html 上一篇<C++11 并发指南二(std::thread 详解)>中主要讲到了 std::th ...

  9. python（13）- 文件处理应用Ⅱ：增删改查

    用户选择1,增加功能: 用户输入www.oldboy2.org和server 11111 weight 2222 maxconn 3333后, 在www.oldboy2.org下增加一条server信 ...

  10. python--面向对象组合

    面向对象的命名空间 类中的方法   类中的静态属性   对象的属性类的组合应用 面向对象的命名空间 class A: country='中国' a=A() a.name='alex' print(a. ...