前端_单页面开发_web前端框架

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

web移动端单页面开发，可适用于web端直接开发。本例需要使用require.js帮助实现。

单页面开发个人理解：对一个项目里面的所有html文件都拥有同一个url，通过hash值的改变来促发页面的跳转（hash为url后面的内容，如下面的#red和#green就是hash），如两个页面的url分别为（http://localhost:8000/views/index.html#red，http://localhost:8000/views/index.html#green），使用当页面的好处在于对于小型的项目来说异步的促发可以加快页面的跳转速度，同时对于浏览器也可以减轻一定的负担，当你加载到某页面的时候，浏览器才会去加载对应的css文件和js文件。

单页面的基本实现方法

1、写好对应的html，css，js文件，注意匹配的html和css，js之间最好用相同的名称操作（如：red.html ,red.css ,red.js），在本例中主要用到自己写的index，red，green，blue四个html文件和对应的css，js文件，需要配置文件require.js文件。

（1）、在html文件中去掉body之外的全部内容，仅保留body直接自己写的模块（避免多次加载头部信息），如red.html中代码如下：

</div>

（2）、js代码需要放在被定义为指定的模块使用，使用return{}来加载和初始化自己的js内容，自己原先的js内容需要放在init的function(){}中，（注意对于自己定义的函数需要放在define的外部才会被找到），如red.js中代码如下：

require.config(requireConfig);
//定义个模块，其他的地方可以引入
define([‘red’],function(){

var red = {

init:function(){ //之间为自己写的js内容

alert(‘red’);

}

};

return {

init: red.init

}

})

（3）、css文件不变，但是注意在每一个css文件中最好不要有重名的class，可能会被覆盖自己原来的效果。这里：red.css代码如下：

.red{

background-color: red;
width: 600px;
height: 500px;

}

（4）、按照以上的过程，将red,green,blue的html，css ,js文件写好。

2、配置require.js文件，本例使用的require.js配置如下：

var CONTEXTPATH = “http://localhost:8000”;
var requireConfig = {
baseUrl: CONTEXTPATH + “/public/scripts/”,
paths: {

zepto:’zepto.min’, //将zepto.min.js引入到require中
green:’history/green’,   //将history中的red.js引入到require中
red:’history/red’,
blue:’history/blue’,
},
map:{

‘*’:{

‘css’:’css.min’, //配置可以引入css文件
‘text’:’text.min’   //配置可以引入文本文件
}
},
shim: {

‘green’:[‘css!../styles/green.css’], //加载green.js的是偶引入对应的green.css文件
‘red’:[‘css!../styles/red.css’],
‘blue’:[‘css!../styles/blue.css’]

}

3、编写主页面index的html,css,js文件

（1）、主页面html中，正常写，需要配置一个用于装在其他页面的容器，加载配置好的require.js文件。本例的index.html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0″ />
<link rel=”stylesheet” type=”text/css” href=”../public/styles/base.css”>
<link rel=”stylesheet” type=”text/css” href=”../public/font/iconfont.css”>
<link rel=”stylesheet” type=”text/css” href=”../public/styles/page.css”>
</head>
<body>
<div class=”bnt-all”>
<button id=”red”>我是红色</button>
<button id=”blue”>我是蓝色</button>
<button id=”green”>我是绿色</button>
</div>
<div id=”load”>
</div>
</body>
<script type=”text/javascript” src=”../public/scripts/require-2.1.11.js” data-main=”../public/scripts/page.js”></script>

</html>

（2）、css文件正常写

（3）、在js中

require.config(requireConfig);
require([‘zepto’], function(zepto) { //引入在require.js中配置的zepto对应文件
var history2 = {

getHtml: function(color) { //本函数通过传入的参数，引入对应的html，css和js文件
//加载html,css,js
var htmlUrl = ‘text!/views/’ + color + ‘.html’;
require([htmlUrl, color], function(html,script) {

$(‘#load’).html(html);
// $(‘#’ + color).addClass(‘active’).sblings().removeClass(‘active’);
script.init(); //调用对应js的初始化
});
},
init: function() {

//默认加载绿色
history.pushState({ color: ‘green’ }, null, ‘#green’); //设置初始化加载green.html,green.css和green.js文件
this.getHtml(‘green’);
$(‘button’).on(‘click’, function() {

// debugger;
var id = $(this).attr(‘id’);
history.pushState({ color: id }, null, ‘#’ + id);
history2.getHtml(id);
})
$(window).on(“popstate”,function(e){ //当hash值改变，或者前进后退时候促发
var id=window.location.hash.substring(1);
// history.replaceState({color:id},null,’#’+id);
history2.getHtml(id);
});
}
};
$(function() {

history2.init();
});