require.js實現單頁web應用（SPA）

時間 2019-11-18

標籤 require.js require 實現單頁 web 應用 spa 欄目 JavaScript 简体版

原文原文鏈接

本文轉載自：https://blog.csdn.net/qq_33401924/article/details/53815922css

移動端單頁應用基本上是作移動端最流行的的方式了，可是對於不少前端來講，可能僅僅只會一個jquery,而利用jquery實現單頁應用會讓人痛不欲生。也有人選擇使用原生js實現單頁應用，可是這樣作的方法也是很是笨拙。當下最流行的單頁應用無疑是用路由完成，好比angular,react,vue等，都帶有其路由組件，方便好用。可是這些技術，不少前端是沒有接觸過，也沒時間學。因此，我就給你們帶來了超級簡單實用的require.js實現單頁應用的方法。html

至於require.js是什麼，可能也有人不太清楚，能夠去百度查一查，在這裏我就很少介紹了。由於，你甚至不須要知道他是什麼，就能完成這個項目！就是這麼簡單。前端

先看項目效果圖：vue

首先，咱們先搭好項目框架：react

而後，在index裏寫上代碼jquery

<!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的寫法，既git

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

其中，main.js就是咱們的入口js，也就是咱們寫頁面邏輯的地方，require.js在百度上下載引入便可。github

下一步，咱們須要進入main.js中配置require.jsweb

/**
 * 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—-$,按順序來。app

配置方法，配置項目路徑，這裏，咱們須要的全部文件，都在這裏定義一下，取名字，寫好路徑

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文件便可，注意千萬寫規範，防止樣式衝突喲！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。