前端_单页面开发
2018-03-26 14:42
141 查看
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 class="red">
</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'); //设
9a90
置初始化加载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();
});
})
4、目录结构
在本例中,html中index和red,green,blue同目录,js放在history的文件夹下。
5、效果截图
单页面开发个人理解:对一个项目里面的所有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 class="red">
</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'); //设
9a90
置初始化加载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();
});
})
4、目录结构
在本例中,html中index和red,green,blue同目录,js放在history的文件夹下。
5、效果截图
相关文章推荐
- 【初探移动前端开发02】移动设备的页面
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载
- 我的前端页面开发js简易有效环境
- 从0开始html前端页面开发_CSS实现图像获取鼠标焦点逐渐变大动画效果
- [开发笔记]-页面切图、CSS前端设计、JS
- 前端移动端页面开发(布局篇)【转】
- 前端页面开发规范流程化(基于云端的前端)
- 浅谈前端移动端页面开发(布局篇)
- 构建初级前端页面以及重构开发环境(from 知乎)
- ssm(springmvc4+spring4+mybatis3)整合实战-个人博客系统-前端页面的开发
- 微信小程序前端开发框架,快速自动生成前端页面
- 自动生成导出前端页面的快速开发工具,让代码开发变得简单
- 网站前端开发-一个网站页面的组成部分
- 浅谈前端移动端页面开发(布局篇)
- WEB前端开发 » WAP页面制作需要注意的几点
- 移动web页面前端开发总结
- [JS前端开发] js/jquery控制页面动态载入数据 滑动滚动栏自己主动载入事件
- web前端开发与页面设计的协作、区别与发展
- 页面前端的水有多深?再议页面开发
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本