写了一个测试代码,用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. 通过XOML或者XAML的方式创建和启动工作流

    在Workflow Foundation中,提供了多种设计工作流的方式.例如 纯代码的方式(C#) 代码分离的方式(XOML+C#) 以上两种,可以从Visual Studio提供的项目模板中选择 他 ...

  2. kettle变量使用

    公司项目使用kettle重构之前的取数,先研究下日常的使用. 一.建立数据转换,表数据到表输出,其中表输入数据来自其他业务数据库,通过输入sql执行得到数据. 表输入: 表输出: 设置并行4个线程. ...

  3. Android 蓝牙 笔记

    安卓:短信复制机制 软件识别蓝牙 软件可以读取蓝牙的信息 给蓝牙弄上一个类似于短信的东西 并且存一个短信 然后发到客户端 客户端 可以分类  分成表格 形式 这样做的目的是为了 让你的设备可以写蓝牙给 ...

  4. 高通msm8994启动流程简单介绍

    处理器信息 8994包括例如以下子系统: 子系统 处理器 含义 APSS 4*Cortex-A53 应用子系统 APSS 4*Cortex-A57 应用子系统 LPASS QDSP6 v5.5A(He ...

  5. 漫谈深度学习时代点击率预估技术进展 &&深度学习在推荐系统上的发展

    转载:https://www.infoq.cn/article/XA055tpFrprUy*0UBdCb https://www.zhihu.com/question/20830906/answer/ ...

  6. POJ 1018 Communication System 题解

    本题一看似乎是递归回溯剪枝的方法.我一提交,结果超时. 然后又好像是使用DP,还可能我剪枝不够. 想了非常久,无奈忍不住偷看了下提示.发现方法真多.有贪心,DP,有高级剪枝的.还有三分法的.八仙过海各 ...

  7. C中的预编译编译链接

        http://ke.qq.com/webcourse/index.html#course_id=67888&term_id=100058920&taid=13934591901 ...

  8. flex 节点删除

    <mx:Script>        <![CDATA[            protected function btn1_clickHandler(evt:MouseEvent ...

  9. 每日一支TED——帕特里夏&#183;瑞安：不要固执于英语

         瑞安讲述了她在科威特教学英语30年最大的 关于语言的一个感受:英语在迅速的在全世界传播,而其它的语言在逐渐的消失.      瑞安想要说的是.拥有一种国际性的语言,大家都能够理解,让全部人的 ...

  10. maven的坑2

    导入工程后,pom.xml文件中以下插件报错: <plugin> <groupId>com.jayway.maven.plugins.android.generation2&l ...