写了一个测试代码，用require.js配合它的一个插件text.js实现了最简单的单页应用程序，简单的记录一下，方便以后复习嘿嘿，git地址：https://github.com/lily1010/requireSPA下面来看一下目录

从上面项目可以看出，我将钢性铸铁单独抽离出去，实现了按需加载，即加载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，minimal-scale=1，maximum-scale=1，user-scalable=no '/style type=' text/CSS ' class=' CSS-attribute '/style/head body script data-main=' js/main ' src=' http 3360 js/require。js '/script div class=' page '/div/body/html上面很简单，先定义requirejs入口主数据，另外为了按需加载css，我定义了一个类钢性铸铁属性。

二、在main.js配置路径和做逻辑处理

要求。config({ path : { ' jquery ' : ' lib/jquery-1。11 .0 '，'文本' :'lib/text '，'文本1': './template/test1.html '，//这里千万注意路径文本2': './template/test2.html '，' css1': './style/test1.css '，' css2': './style/test2.css' }})要求(['jquery '，' text！text1 '，' text！text2 '，' text！css1 '，'文本！' css2']，函数($，template1，template2，css1，css2){//进入页面先设置为页面test1.html内容$('.属性').html(css1)；$('.第)页. html(模板1)；//点击跳跃按钮设置为页面test2.html内容$('.跳过')。单击(函数(){ $(').属性').html(css2)；$('.第)页. html(模板2)；})})上面都是最基础的需要配置，注意text.js用法就可以了，很简单的

三、来看看2个页面结构以及样式test1.html代码如下：

div class='test1 '按钮class='skip '点击我跳到矿泉第二页/button/test1.html分区的css，即test1.css代码如下：test 1 { position : absolutetop :0底部：0;左： 0；右： 0；背景-颜色：红色；}.跳过{位置：绝对值；前：50%；左侧： 50%;-web kit-transform : translate(-50%，-50%)；transform: translate(-50%，-50%)；}实现效果如下：

test2.html代码如下：

div class='test2 '按钮class='skip2 '我是第二页，点击我回第一页/button/test2.html分区的css，即test2.css代码如下：test 2 { position : absolutetop :0底部：0;左： 0；右： 0；背景-颜色：粉色；} . skip 2 { position : absolute top :50%；左侧： 50%;-web kit-transform : translate(-50%，-50%)；transform: translate(-50%，-50%)；}实现效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。