require简单实现单页应用程序(SPA)

写了一个测试代码,用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)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • require简单实现单页应用程序(SPA)

    require简单实现单页应用程序(SPA)

    写了一个测试代码,用require.js配合它的一个插件text.js实现了最简单的单页应用程序,简单的记录一下,方便以后复习, git地址:https://github.com/lily1010/requireSPA 下面来看一下目录 从上面项目可以看出,我将css单独抽离出去,实现了按需加载,即加载test1.html时会加载test1.css,加载test2.html时会加载test2.css. 一 先来看入口index.html代码 <!DOCTYPE html> <html&g

  • require.js配合插件text.js实现最简单的单页应用程序

    require.js配合插件text.js实现最简单的单页应用程序

    写了一个测试代码,用require.js配合它的一个插件text.js实现了最简单的单页应用程序,简单的记录一下,方便以后复习, git地址:https://github.com/lily1010/requireSPA 下面来看一下目录 从上面项目可以看出,我将css单独抽离出去,实现了按需加载,即加载test1.html时会加载test1.css,加载test2.html时会加载test2.css. 一.先来看入口index.html代码 <!DOCTYPE html> <html&g

  • 详解vue 单页应用（spa）前端路由实现原理

    写在前面:通常 SPA 中前端路由有2种实现方式: window.history location.hash 下面就来介绍下这两种方式具体怎么实现的 一.history 1.history基本介绍 window.history 对象包含浏览器的历史,window.history 对象在编写时可不使用 window 这个前缀.history是实现SPA前端路由是一种主流方法,它有几个原始方法: history.back() - 与在浏览器点击后退按钮相同 history.forward() - 与

  • Vue 2.0+Vue-router构建一个简单的单页应用（附源码）

    Vue 2.0+Vue-router构建一个简单的单页应用（附源码）

    一.介绍 vue.js 是 目前 最火的前端框架,vue.js 兼具 angular.js 和 react.js 的优点,并剔除它们的缺点,并且提供了很多的周边配套工具 如vue-router .vue-resource .vuex等等 ,通过他们我们可以很轻松的构建一个大型单页应用. 目前Vue版本为:Vue2.0 官网地址:http://vuejs.org.cn/ 查看API文档:https://vuefe.cn/v2/api/ 对比其他框架:http://vuejs.org.cn/guid

  • 第1个Android应用程序 Android制作简单单页导航

    第1个Android应用程序 Android制作简单单页导航

    本例子演示如何添加一个简单的单页导航,在此基础上,再演示如何在第2个页面中显示第1个页面中拨打过的所有电话号码. (1)通过该例子理解Android App的基本架构. (2)通过该例子理解实现Android多屏幕导航的基本技术. 本例子只是为了让我们对Android App开发有一个较全面的感性认识,读者不必一开始就纠结于代码中的细节问题,涉及到的相关概念在后面还会分别介绍. 运行截图 运行截图(Api19.Api21.Api23的实现代码都相同): 界面操作 单击"将文本转换为数字"

  • 使用Vue.js创建一个时间跟踪的单页应用

    Vue.js很简单.正因为如此简单,人们常常认为其适合于小项目.虽然真正的Vue.js核心知识只是一个视图层库,实际上有一组工具,将使您能够使用Vue.js构建完整的大规模SPA(单页应用程序). SPA应用可以在不完全重新加载网页,产生一个更流畅的用户体验到的用户交互响应.还有好的副作用,SPA还鼓励后端专注于展示数据端点,这使得整体架构更加分离,并且对于其他类型的客户端可能是可重用的. 从开发人员的角度来看,SPA和传统的后端呈现应用程序之间的主要区别是,我们必须将客户端视为具有自己架构的应

  • 利用JS hash制作单页Web应用的方法详解

    前言 本文主要给大家介绍了关于利用JS hash制作单页Web应用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.何为hash 这里要讲的hash(也叫哈希),指的是JS中location对象的hash属性,它返回的是URL中#后所跟的零个或多个字符.通常,我们可以通过location.hash的方式获取哈希值或设置哈希值.当然,我们也可以通过设置a标签的href属性来设置哈希值,当用户点击该a标签时即可改变页面的哈希值. 例如: /** JS方式 **/ lo

  • 使用Vue.js和Flask来构建一个单页的App的示例

    在这个教程中,我们将讲解如何将vue.js单页应用与Flask后端进行连接. 一般来说,如果你只是想通过Flask模板使用vue.js库也是没有问题的.但是,实际上是一个很明显的问题那就是,Jinja(模板引擎)也和Vue.js一样采用双大括号用于渲染,但只是一个还算过的去的解决方案. 我想要一个不同的例子.如果我需要建立一个单页应用程序(应用程序使用单页组成, vue-router 在HTML5的History-mode以及其他更多好用的功能)用vue.js,由Flask提供Web服务?简单地

  • 使用AngularJS创建单页应用的编程指引

    概述 单页应用现在越来越受欢迎.模拟单页应用程序行为的网站都能提供手机/平板电脑应用程序的感觉.Angular可以帮助我们轻松创建此类应用 简单应用 我们打算创建一个简单的应用,涉及主页,关于和联系我们页面.虽然Angular是为创建比这更复杂的应用而生的,但是本教程展示了许多我们在大型项目中需要的概念. 目标 单页应用 无刷新式页面变化 每个页面包含不同数据 虽然使用Javascript和Ajax可以实现上述功能,但是在我们的应用中,Angular可以使我们处理更容易. 文档结构 - scri

  • 实现React单页应用的方法详解

    实现React单页应用的方法详解

    首先在学习这门框架前,你需要对以下知识有所了解: 1.原生JS基础 2.CSS基础 3.npm包管理基础 4.webpack构建项目基础      5.ES6规范 以上五个知识点也是目前学习其他前端框架所必须了解的前置任务. JS和CSS就不多说了,npm是目前最提倡也是占据主导地位的包管理工具,还在用bower或者其他工具的童鞋可以考虑下了.而webpack作为新一代打包工具,已经在前端打包工具中独占鳌头,和Browserify相比也有很大优势.至于ES6规范虽然现在主流浏览器还不兼容,但可以

随机推荐