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文件即可，註意千萬寫規範，防止樣式沖突喲！require.js實現單頁web應用（SPA）