require.js实现单页web应用(SPA)

本文转载自:https://blog.csdn.net/qq_33401924/article/details/53815922

 

移动端单页应用基本上是做移动端最流行的的方式了,但是对于很多前端来说,可能仅仅只会一个jquery,而利用jquery实现单页应用会让人痛不欲生。也有人选择使用原生js实现单页应用,但是这样做的方法也是非常笨拙。当下最流行的单页应用无疑是用路由完成,比如angular,react,vue等,都带有其路由组件,方便好用。但是这些技术,很多前端是没有接触过,也没时间学。所以,我就给大家带来了超级简单实用的require.js实现单页应用的方法。

至于require.js是什么,可能也有人不太清楚,可以去百度查一查,在这里我就不多介绍了。因为,你甚至不需要知道他是什么,就能完成这个项目!就是这么简单。

先看项目效果图:

这里写图片描述

这里写图片描述

首先,我们先搭好项目框架:

这里写图片描述

然后,在index里写上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九宫格</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="style/mui.min.css">
    <!--<link rel="stylesheet" href="style/font-awesome.min.css">-->
    <link rel="stylesheet" href="style/icons-extra.css">
    <link rel="stylesheet" href="style/index.css">
</head>
<body>
<!--<header>-->
    <!--<i class="fa fa-angle-left fa-7x"></i>-->
    <!--<span>首页</span>-->
<!--</header>-->
<div class="page">

</div>
<script data-main="js/main" src="js/require.js"></script>
</body>
</html>

 

注意:我们使用require,需要使用require的写法,既

<script data-main="js/main" src="js/require.js"></script>

其中,main.js就是我们的入口js,也就是我们写页面逻辑的地方,require.js在百度上下载引入即可。

下一步,我们需要进入main.js中配置require.js

/**
 * Created by king on 2016/12/15.
 */
require.config({
    paths:{
        "jquery":"lib/jquery.min",
        "text":"lib/text",
        "page1":"../template/index.html",
        "page2":"../template/base.html",
        "page3":"../template/time.html",
        "page4":"../template/address.html",
        "page5":"../template/detail.html",
        "page6":"../template/join.html",
        "page7":"../template/organize.html",
        "page8":"../template/picture.html",
        "page9":"../template/guest.html",
        "page10":"../template/interact.html",
        "page12":"../template/gongzhonghao.html",
        "page13":"../template/contact.html",
        "page14":"../template/people.html",
        "page15":"../template/contact.html"
    }
});

require(['jquery','text!page1','text!page2','text!page3','text!page4','text!page5','text!page6','text!page7','text!page8','text!page9','text!page10','text!page12','text!page13','text!page14','text!page15'],function ($,page1,page2,page3,page4,page5,page6,page7,page8,page9,page10,page12,page13,page14,page15) {
    //加载首页
    $(".page").html(page1);
    //返回按钮
    $('.page').on('click','.back',function () {
        go(page1);
    });

    // 页面跳转
    $('.page').on('click','.base',function () {
        go(page2);
    });

    $('.page').on('click','.time',function () {
        go(page3);
    });


});

function go(page) {
    $(".page").html(page);
    $('body').scrollTop(0);
}

 

tips:中括号里的名字一定要和function的参数对应,比如,jquery—-$,按顺序来。

配置方法,配置项目路径,这里,我们需要的所有文件,都在这里定义一下,取名字,写好路径

require.config({
    paths:{
        "jquery":"lib/jquery.min",
        "text":"lib/text",
        "page1":"../template/index.html",
        "page2":"../template/base.html",
        "page3":"../template/time.html"
    }
});

 

结合,我上面发的项目目录配置,千万别配错了哟。

配置完路径后,我们拿过来用就行了。但是一定要按照require的写法使用

require(['jquery','text!page1','text!page2','text!page3','text!page4','text!page5','text!page6','text!page7','text!page8','text!page9','text!page10','text!page12','text!page13','text!page14','text!page15'],function ($,page1,page2,page3,page4,page5,page6,page7,page8,page9,page10,page12,page13,page14,page15) {
    //加载首页
    $(".page").html(page1);
    //返回按钮
    $('.page').on('click','.back',function () {
        go(page1);
    });

    // 页面跳转
    $('.page').on('click','.base',function () {
        go(page2);
    });

    $('.page').on('click','.time',function () {
        go(page3);
    });


});

 

这里要说一下,为什么要写出 text!page2 ,因为我们实现单页的原理其实是按需加载,替换首页里page的内容,所以,我们必须使用require自带的text.js将写的模板页的代码转换成字符串才可以使用。一定要这样去写!

text.js的下载地址:

https://github.com/requirejs/text

每个模板页,直接写一个代码段就行,比如page2的页面内容是

<div class="page2">
   <header class="mui-bar mui-bar-nav">
      <a class="mui-icon mui-icon-left-nav mui-pull-left back"></a>
      <h1 class="mui-title">基本信息</h1>
   </header>
   <div class="banner">

   </div>

   <div class="base-content">
      <span class="tip">【培训会】</span>
      <span class="title">XO网在线</span>
      <div class="details">
         会议规模:<span>1200</span><span class="mark">火热报名中</span>
      </div>
   </div>
</div>

至于css部分就不用我多说了吧,所有的页面用一个css文件即可,注意千万写规范,防止样式冲突哟!
posted @ 2018-08-27 16:01  Sky_Ice  阅读(1192)  评论(0编辑  收藏  举报