flex布局

一、骰子的布局

骰子的一面,最多可以放置9个点。

codepen下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到查看Demo。

如果不加说明,本节的HTML模板一律如下。

1
2
3
<div class="box">
<span class="item"></span>
</div>

上面代码中,div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目。如果有多个项目,就要添加多个span元素,以此类推。

1.1 单项目

首先,只有左上角1个点的情况。Flex布局默认就是首行左对齐,所以一行代码就够了。

1
.box {display: flex;}

设置项目的对齐方式,就能实现居中对齐和右对齐。

1
2
3
4
.box {
display: flex;

}


1
2
3
4
.box {
display: flex;
justify-content: flex-end;
}

设置交叉轴对齐方式,可以垂直移动主轴。

1
2
3
4
.box {
display: flex;
align-items: center;
}

1
2
3
4
5
.box {
display: flex;
justify-content: center;
align-items: center;
}

1
2
3
4
5
.box {
display: flex;
justify-content: center;
align-items: flex-end;
}

1
2
3
4
5
.box {
display: flex;
justify-content: flex-end;
align-items: flex-end;
}

1.2 双项目


1
2
3
4
.box {
display: flex;
justify-content: space-between;
}


1
2
3
4
5
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
}

1
2
3
4
5
6
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}


1
2
3
4
5
6
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}


1
2
3
4
5
6
7
.box {
display: flex;
}

.item:nth-child(2) {
align-self: center;
}


1
2
3
4
5
6
7
8
.box {
display: flex;
justify-content: space-between;
}

.item:nth-child(2) {
align-self: flex-end;
}

1.3 三项目

1
2
3
4
5
6
7
8
9
10
11
.box {
display: flex;
}

.item:nth-child(2) {
align-self: center;
}

.item:nth-child(3) {
align-self: flex-end;
}

1.4 四项目

1
2
3
4
5
6
.box {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-content: space-between;
}

HTML代码如下。

1
2
3
4
5
6
7
8
9
10
<div class="box">
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
</div>

CSS代码如下。

1
2
3
4
5
6
7
8
9
10
11
.box {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}

.column {
flex-basis: 100%;
display: flex;
justify-content: space-between;
}

1.5 六项目


1
2
3
4
5
6

.box {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}

1
2
3
4
5
6
.box {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: space-between;
}

HTML代码如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="box">
<div class="row">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="row">
<span class="item"></span>
</div>
<div class="row">
<span class="item"></span>
<span class="item"></span>
</div>
</div>

CSS代码如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.box {
display: flex;
flex-wrap: wrap;
}

.row{
flex-basis: 100%;
display:flex;
}

.row:nth-child(2){
justify-content: center;
}

.row:nth-child(3){
justify-content: space-between;
}

1.6 九项目

1
2
3
4
.box {
display: flex;
flex-wrap: wrap;
}

二、网格布局

2.1 基本网格布局

最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟上面的骰子布局很像,但是需要设置项目的自动缩放。

HTML代码如下。

1
2
3
4
5
<div class="Grid">
<div class="Grid-cell">...</div>
<div class="Grid-cell">...</div>
<div class="Grid-cell">...</div>
</div>

CSS代码如下。

1
2
3
4
5
6
7
.Grid {
display: flex;
}

.Grid-cell {
flex: 1;
}

2.2 百分比布局

某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。

HTML代码如下。

1
2
3
4
5
<div class="Grid">
<div class="Grid-cell u-1of4">...</div>
<div class="Grid-cell">...</div>
<div class="Grid-cell u-1of3">...</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.Grid {
display: flex;
}

.Grid-cell {
flex: 1;
}

.Grid-cell.u-full {
flex: 0 0 100%;
}

.Grid-cell.u-1of2 {
flex: 0 0 50%;
}

.Grid-cell.u-1of3 {
flex: 0 0 33.3333%;
}

.Grid-cell.u-1of4 {
flex: 0 0 25%;
}

三、圣杯布局

圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。

HTML代码如下。

1
2
3
4
5
6
7
8
9
<body class="HolyGrail">
<header>...</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">...</main>
<nav class="HolyGrail-nav">...</nav>
<aside class="HolyGrail-ads">...</aside>
</div>
<footer>...</footer>
</body>

CSS代码如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
}

header,
footer {
flex: 1;
}

.HolyGrail-body {
display: flex;
flex: 1;
}

.HolyGrail-content {
flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
/* 两个边栏的宽度设为12em */
flex: 0 0 12em;
}

.HolyGrail-nav {
/* 导航放到最左边 */
order: -1;
}

如果是小屏幕,躯干的三栏自动变为垂直叠加。

1
2
3
4
5
6
7
8
9
10
11
@media (max-width: 768px) {
.HolyGrail-body {
flex-direction: column;
flex: 1;
}
.HolyGrail-nav,
.HolyGrail-ads,
.HolyGrail-content {
flex: auto;
}
}

四、输入框的布局
我们常常需要在输入框的前方添加提示,后方添加按钮。

HTML代码如下。

1
2
3
4
5
<div class="InputAddOn">
<span class="InputAddOn-item">...</span>
<input class="InputAddOn-field">
<button class="InputAddOn-item">...</button>
</div>

CSS代码如下。

1
2
3
4
5
6
7
.InputAddOn {
display: flex;
}

.InputAddOn-field {
flex: 1;
}

五、悬挂式布局

有时,主栏的左侧或右侧,需要添加一个图片栏。

HTML代码如下。

1
2
3
4
<div class="Media">
<img class="Media-figure" src="" alt="">
<p class="Media-body">...</p>
</div>

CSS代码如下。

1
2
3
4
5
6
7
8
9
10
11
12
.Media {
display: flex;
align-items: flex-start;
}

.Media-figure {
margin-right: 1em;
}

.Media-body {
flex: 1;
}

六、固定的底栏

有时,页面内容太少,无法占满一屏的高度,底栏就会抬高到页面的中间。这时可以采用Flex布局,让底栏总是出现在页面的底部。

HTML代码如下。

1
2
3
4
5
<body class="Site">
<header>...</header>
<main class="Site-content">...</main>
<footer>...</footer>
</body>

CSS代码如下。

1
2
3
4
5
6
7
8
9
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}

.Site-content {
flex: 1;
}

七,流式布局

每行的项目数固定,会自动分行。

CSS的写法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.parent {
width: 200px;
height: 150px;
background-color: black;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}

.child {
box-sizing: border-box;
background-color: white;
flex: 0 0 25%;
height: 50px;
border: 1px solid red;
}

分享到

高德地图web js版使用

高德地图web版使用

1
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=5774e5d7879ad6affd51e5f8dffde51d"></script>

Marker点标记、
Polyline折线、
Polygon多边形、
Circle圆等。

1
2
3
4
5
6
var marker = new AMap.Marker({
position: [116.480983, 39.989628],//marker所在的位置
map:map//创建时直接赋予map属性
});
//也可以在创建完成后通过setMap方法执行地图对象
marker.setMap(map);

服务插件以及
工具插件,
比如工具条、
比例尺、
路线规划、
高级信息窗体等等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
AMap.plugin(['AMap.ToolBar','AMap.AdvancedInfoWindow'],function(){
//创建并添加工具条控件
var toolBar = new AMap.ToolBar();
map.addControl(toolBar);
//创建高级信息窗体并在指定位置打开
var infowindow = new AMap.AdvancedInfoWindow({
content: '<div class="info-title">高德地图</div><div class="info-content">'+
'<img src="http://webapi.amap.com/images/amap.jpg">'+
'高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。<br>'+
'<a target="_blank" href="http://mobile.amap.com/">点击下载高德地图</a></div>',
offset: new AMap.Pixel(0, -30)
});
infowindow.open(map,[116.480983, 39.989628]);
})

类名 类功能说明
AMap.ToolBar 工具条,控制地图的缩放、平移等
AMap.Scale 比例尺,显示当前地图中心的比例尺
AMap.OverView 鹰眼,显示缩略图
AMap.MapType 图层切换,用于几个常用图层切换显示
AMap.Geolocation 定位,提供了获取用户当前准确位置、所在城市的方法
AMap.AdvancedInfoWindow 高级信息窗体,整合了周边搜索、路线规划功能
AMap.Autocomplete 输入提示,提供了根据关键字获得提示信息的功能
AMap.PlaceSearch 地点搜索服务,提供了关键字搜索、周边搜索、范围内搜索等功能
AMap.PlaceSearchLayer 搜索结果图层类,将搜索结果作为图层展示
AMap.DistrictSearch 行政区查询服务,提供了根据名称关键字、citycode、adcode来查询行政区信息的功能
AMap.LineSearch 公交路线服务,提供公交路线相关信息查询服务
AMap.StationSearch 公交站点查询服务,提供途经公交线路、站点位置等信息
AMap.Driving 驾车路线规划服务,提供按照起、终点进行驾车路线的功能
AMap.Transfer 公交路线规划服务,提供按照起、终点进行公交路线的功能
AMap.Walking 步行路线规划服务,提供按照起、终点进行步行路线的功能
AMap.Riding 骑行路线规划服务,提供按照起、终点进行骑行路线的功能
AMap.DragRoute 拖拽导航插件,可拖拽起终点、途经点重新进行路线规划
AMap.ArrivalRange 公交到达圈,根据起点坐标,时长计算公交出行是否可达及可达范围
AMap.Geocoder 地理编码与逆地理编码服务,提供地址与坐标间的相互转换
AMap.CitySearch 城市获取服务,获取用户所在城市信息或根据给定IP参数查询城市信息
AMap.IndoorMap 室内地图,用于在地图中显示室内地图
AMap.MouseTool 鼠标工具插件
AMap.CircleEditor 圆编辑插件
AMap.PolyEditor 折线、多边形编辑插件
AMap.MarkerClusterer 点聚合插件
AMap.RangingTool 测距插件,可以用距离或面积测量
AMap.CloudDataLayer 云图图层,用于展示云图信息
AMap.CloudDataSearch 云图搜索服务,根据关键字搜索云图点信息
AMap.Weather 天气预报插件,用于获取未来的天气信息
AMap.RoadInfoSearch 道路信息查询,已停止数据更新,反馈信息仅供参考
AMap.Hotspot 热点插件,地图热点已默认开启,不用手动添加,由Map的isHotspot属性替代
AMap.Heatmap 热力图插件

地图基础控件

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var map = new AMap.Map('container',{
zoom: 10,
center: [116.39,39.9]
});

AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView'],
function(){
map.addControl(new AMap.ToolBar());

map.addControl(new AMap.Scale());

map.addControl(new AMap.OverView({isOpen:true}));
});
名称 类名 简介
工具条 ToolBar 集成了缩放、平移、定位等功能按钮在内的组合控件
比例尺 Scale 展示地图在当前层级和纬度下的比例尺
定位 Geolocation 用来获取和展示用户主机所在的经纬度位置
鹰眼 OverView 在地图右下角显示地图的缩略图
类别切换 MapType 实现默认图层与卫星图、实施交通图层之间切换的控

定位

AMap.Geolocation 定位插件,整合了浏览器定位、精确IP定位、sdk辅助定位多种手段
Map.CitySearch 城市查询,IP定位获取当前城市信息

AMap.Geolocation 插件

官网demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
mapObj = new AMap.Map('iCenter');
mapObj.plugin('AMap.Geolocation', function () {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:无穷大
maximumAge: 0, //定位结果缓存0毫秒,默认:0
convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
showButton: true, //显示定位按钮,默认:true
buttonPosition: 'LB', //定位按钮停靠位置,默认:'LB',左下角
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true
showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true
zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
});
mapObj.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});

自己demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
mapObj = new AMap.Map('iCenter');
mapObj.plugin('AMap.Geolocation', function () {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:无穷大
maximumAge: 0, //定位结果缓存0毫秒,默认:0
convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
showButton: true, //显示定位按钮,默认:true
buttonPosition: 'LB', //定位按钮停靠位置,默认:'LB',左下角
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true
showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true
zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
});
mapObj.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});
function onComplete(result){
console.log(result.formattedAddress); //定位成功获取地址信息
console.log(result.position); //定位成功获取定位结果
console.log(result.location_type); //定位结果的来源,可能的值有:'html5'、'ip'、'sdk'
}
function onError(error){

console.log(error.info);

console.log(error.message);
if('NOT_SUPPORTED'==error.info){
console.log('当前浏览器不支持定位功能 ');
}
if('FAILED'==error.info){
console.log('定位失败,失败原因可在message字段中获得。定位失败的原因');
}
}

GeolocationResult 对象

属性 类型 说明
position LngLat 定位结果
accuracy Number 精度范围,单位:米
location_type String 定位结果的来源,可能的值有:’html5’、’ip’、’sdk’
message String 形成当前定位结果的一些信息
isConverted Boolean 是否经过坐标纠偏
info String 状态信息 “SUCCESS”
addressComponent AddressComponent 地址信息,详情参考Geocoder
formattedAddress String 地址
pois Array 定位点附近的POI信息,extensions等于’base’的时候为空
roads Array 定位点附近的道路信息,extensions等于’base’的时候为空
crosses Array 定位点附近的道路交叉口信息,extensions等于’base’的时候为空

Geolocation的方法

isSupported( ) Boolean 是否支持浏览器定位,当不支持是getCurrentPosition也会使用尝试进行精确IP定位
getCurrentPosition(callback:function(status,result){}) 获取用户当前的精确位置信息
当回调函数中的status为complete的时候表示定位成功,result为GeolocationResult对象;
当回调函数中的status为error的时候表示定位失败,result为GeolocationError对象; callback的方式和事件监听的方式二者选择一种即可。
watchPosition( ) Number 使用浏览器定位接口监控当前位置,移动端有效。在监控过程中,每隔一段时间会自动调用定位成功或失败的回调函数。
注:由于时间间隔受浏览器限制,如您想自定义时间间隔,建议您使用定时器,每隔一段时间调用一次getCurrentPosition获取当前位置。
clearWatch(watchId:Number) Number 取消对当前位置的监控
getCityInfo(callback:function(status,result){}) 进行IP城市查询
status为complete的时候表示查询成功,result包含省、市、adcode、citycode、城市中心点center等信息;
status为error的时候表示查询失败

分享到

前端apicloud知识大纲笔记

app前端布局

  1. window
  2. frame
  3. fremegroup

布局方式

  1. 头部+内容
  2. 头部
  3. 侧拉导航

布局元素

  1. html
  2. css
  3. api模块

数据的交换

  1. file
  2. db <==sqlite
  3. localStorage
  4. perference :setPrets ,getPrets,removePrets
  5. 云端一体 数据存储
  6. api.ajax 服务器数据上传

    cookie session 无法在app中使用

网易新闻代码实现方法

使用的函数

  1. api.openWin();
  2. api.openFrame();
  3. api.setRefreshHeaderInfo() api.refreshHeaderLoadDone()

云端数据库使用

平台事件类型

  1. 设备
    电池电量:batterylow、batterystatus
    物理按键:keyback、keymenu
    音量按键:volumeup、volumedown
  2. 网络
    网络状态:online、offline
    云服务状态:smartupdatefinish
  3. 交互
    手势:swipeup、swipedown、swipeleft、swiperight
    滚动:scrolltobottom
    点击:tap
    长按:longpress
    状态栏:noticeclicked
    启动页:launchviewclicked
  4. 窗口
    窗口显示:viewappear
    窗口隐藏:viewdisappear
  5. 应用
    回到前台:resume
    进入后台:pause
    被其他应用调用:appindent
  6. 事件监听机制
    添加监听:api.addEventListener()
    删除监听:api.removeEventListener()
    发送事件:api.sentEvent()

    APP与数据云API通信

  7. 接口签名验证
    appId appKey 算法
  8. 3种调用方式
    1. 标准 ajax 或 api.ajax
    2. APICloud mcm 模块:user,file,model,query等
    3. APICloud mcm JS框架:
      开源分支
      APICloud-rest.js
      SHA1.js
      

      常用对话框窗口使用

  9. 提示对话框
    api.alert()
    api.confirm()
    api.prompt()
    api.toast()
  10. 状态对话框
    api.showProgress()
    api.hideProgress()
  11. 选择对话框
    api.actionSheet()
    api.datePicker()
分享到

web前端编码规范

前段编码规范

一般规范

1.减号(-)是用来分隔文件名
2.不指定协议使得 URL 从绝对的获取路径转变为相对的
3.文本缩进 一次缩进两个空格。
4.注释 每个方法 重要变量都应该有注释 使用yuidoc.js
5.代码检查

html规范

1.推荐使用 HTML5 的文档类型申明: <!DOCTYPE html>
2.HTML 验证 使用能通过标准规范验证的 HTML 代码
3.脚本加载 js 防止dom阻塞 并且适当加上async 属性
4.用语义化的标签 方便阅读
5.多媒体回溯 使用alt元素方便解释
6.关注点分离 严格地保证结构、表现、行为三者分离,并尽量使三者之间没有太多的交互和联系。
不使用超过一到两张样式表(i.e. main.css, vendor.css)
不使用超过一到两个脚本(学会用合并脚本)
不使用行内样式(
不在元素上使用 style 属性(



不使用行内脚本(
不使用表象元素(i.e. , ,
, ,
不使用表象 class 名(i.e. red, left, center)
7.Tab Index 在可用性上的运用

#javascript规范
1.全局命名空间污染与 IIFE
2.IIFE(立即执行的函数表达式)
3.使用严格模式
4.变量声明 var
5.理解 JavaScript 的定义域和定义域提升
6.总是使用带类型判断的比较判断 总是使用 === 精确的比较操作符
7.明智地使用真假判断
8.变量赋值时的逻辑操作
9.一定要加分号
10.嵌套函数
11.语句块内的函数声明
12.异常
13.简易的原型继承
14.使用闭包
15.切勿在循环中创建函数
16.eval 函数(魔鬼)
17.this 关键字 使用场景:在构造函数中 在对象的方法中(包括由此创建出的闭包内)
18.首选函数式风格
19.数组和对象的属性迭代
20.不要使用 switch
21.数组和对象字面量
22修改内建对象的原型链,应当也要避免。
23.自定义 toString() 方法
24.字符串 统一使用单引号(‘),不使用双引号(“)。
25.三元条件判断(if 的快捷方法)

#CSS and Sass (SCSS) style rules
1.ID and class naming
2.合理的避免使用ID ID不应该被应用于样式 你应该始终考虑使用class
3.CSS选择器中避免标签名 构建选择器时应该使用清晰, 准确和有语义的class(类)名
4.尽可能的精确
5.尽量使用缩写属性
6.省略“0”值后面的单位。不要在0值后面使用单位,除非有值。
7.十六进制表示法 3个字符的十六进制表示法更简短。 始终使用小写的十六进制数字。
8.ID 和 Class(类) 名的分隔符 使用连字符(中划线)分隔ID和Class(类)名中的单词。为了增强课理解性,在选择器中不要使用除了连字符(中划线)以为的任何字符(包括没有)来连接单词和缩写。
9.声明顺序
结构性属性:
1.display
2.position, left, top, right etc.
3.overflow, float, clear etc.
4.margin, padding
表现性属性:
1.background, border etc.
2.font, text
10.声明结束 为了保证一致性和可扩展性,每个声明应该用分号结束,每个声明换行。
11.属性名结束 属性名的冒号后使用一个空格。出于一致性的原因, 属性和值(但属性和冒号之间没有空格)的之间始终使用一个空格。
12.选择器和声明分离 每个选择器和属性声明总是使用新的一行。
13.规则分隔 规则之间始终有一个空行(双换行符)分隔。
14.CSS引号 属性选择器或属性值用双引号(””),而不是单引号(”)括起来。 URI值(url())不要使用引号。
15.选择器嵌套 (SCSS) 嵌套所有的选择器,但尽量避免嵌套没有任何内容的选择器。
16.嵌套中引入 空行 (SCSS) 嵌套选择器和CSS属性之间空一行。
17.上下文媒体查询(SCSS)
在Sass中,当你嵌套你的选择器时也可以使用上下文媒体查询。
在Sass中,你可以在任何给定的嵌套层次中使用媒体查询。
由此生成的CSS将被转换,这样的媒体查询将包裹选择器的形式呈现。
18.嵌套顺序和父级选择器(SCSS)
当前选择器的样式属性
父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
伪类元素 (:before and :after)
父级选择器的声明样式 (.selected, .active, .enlarged etc.)
用Sass的上下文媒体查询
子选择器作为最后的部分

分享到

项目发布部署 可能问题 主要是内存问题

note@tomcat#项目发布部署!可能问题 主要是内存问题

一般的首先如果是war包 必须考虑到jdk和tomcat环境不一样的问题

如果多个tomcat同时运行 我们可以给tomcat去别名来区分
在tomcat文件夹下:
tomcat_home\bin\catalina.bat
搜索到:set _EXECJAVA=start “Tomcat” %_RUNJAVA%
将”Tomcat”修改成想替换的名称即可

还有在conf文件夹下service.xml中
添加

docBase 项目路径 也可以相对路径 直接写项目名 如:servlet
path 访问路径 可以不写

配置环境:安装jdk、tomcat以及它们的环境配置,这个比较简单,就不多说了。

第二步:
将需要部署的项目打成war包,将war包放在tomcat的webapps目录下,并且将项目中需要用到的包放在tomcat的lib目录下。

第三步:
启动tomcat,然后tomcat就会自动解压war包。

以上三步就是tomcat部署项目的流程。
但是在第三步的时候,tomcat会启动失败,会报OutOfMemoryError: PermGen space(内存的永久保存区域)的异常–属于内存溢出,及,解决这个问题就可以正常部署了。
我是win2008service系统下部署的项目。
解决问题的步骤是:
1、在tomcat–bin目录下找到catalina.bat文件,打开,有两个地方需要修改。第一个:文件最开始的地方加上set JAVA_OPTS=%JAVA_OPTS% -server -XX:PermSize=128M -XX:MaxPermSize=512m ;第二个:在echo Using CATALINA_BASE: “%CATALINA_BASE%”的上面加上set JAVA_OPTS=%JAVA_OPTS% -server -XX:PermSize=128M -XX:MaxPermSize=512m,然后保存,重启tomcat即可。
这就是我遇到的问题及解决办法。
内存溢出分为三种情况,上面说的是其中的一种,以下是三种问题及对应的解决办法,可以看看。

Tomcat内存溢出的三种情况及解决办法分析
Tomcat内存溢出的原因
  在生产环境中tomcat内存设置不好很容易出现内存溢出。造成内存溢出是不一样的,当然处理方式也不一样。
  这里根据平时遇到的情况和相关资料进行一个总结。常见的一般会有下面三种情况:
  1.OutOfMemoryError: Java heap space
  2.OutOfMemoryError: PermGen space
  3.OutOfMemoryError: unable to create new native thread.
  Tomcat内存溢出解决方案
  对于前两种情况,在应用本身没有内存泄露的情况下可以用设置tomcat jvm参数来解决。(-Xms -Xmx -XX:PermSize -XX:MaxPermSize)
  最后一种可能需要调整操作系统和tomcat jvm参数同时调整才能达到目的。
  第一种:是堆溢出。
  原因分析:
JVM堆的设置是指java程序运行过程中JVM可以调配使用的内存空间的设置.JVM在启动的时候会自动设置Heap size的值,其初始空间(即-Xms)是物理内存的1/64,最大空间(-Xmx)是物理内存的1/4。可以利用JVM提供的-Xmn -Xms -Xmx等选项可进行设置。Heap size 的大小是Young Generation 和Tenured Generaion 之和。
在JVM中如果98%的时间是用于GC且可用的Heap size 不足2%的时候将抛出此异常信息。
Heap Size 最大不要超过可用物理内存的80%,一般的要将-Xms和-Xmx选项设置为相同,而-Xmn为1/4的-Xmx值。
  没有内存泄露的情况下,调整-Xms -Xmx参数可以解决。
  -Xms:初始堆大小
  -Xmx:最大堆大小
  但堆的大小受下面三方面影响:
  1.相关操作系统的数据模型(32-bt还是64-bit)限制;(32位系统下,一般限制在1.5G~2G;我在2003 server 系统下(物理内存:4G和6G,jdk:1.6)测试 1612M,64位操作系统对内存无限制。)
  2.系统的可用虚拟内存限制;
  3.系统的可用物理内存限制。
  堆的大小可以使用 java -Xmx***M version 命令来测试。支持的话会出现jdk的版本号,不支持会报错。
  -Xms -Xmx一般配置成一样比较好比如set JAVA_OPTS= -Xms1024m -Xmx1024m
其初始空间(即-Xms)是物理内存的1/64,最大空间(-Xmx)是物理内存的1/4。可以利用JVM提供的-Xmn -Xms -Xmx等选项可
进行设置
实例,以下给出1G内存环境下java jvm 的参数设置参考:
JAVA_OPTS=”-server -Xms800m -Xmx800m -XX:PermSize=64M -XX:MaxNewSize=256m -XX:MaxPermSize=128m -Djava.awt.headless=true “
JAVA_OPTS=”-server -Xms768m -Xmx768m -XX:PermSize=128m -XX:MaxPermSize=256m -XX:
NewSize=192m -XX:MaxNewSize=384m”
CATALINA_OPTS=”-server -Xms768m -Xmx768m -XX:PermSize=128m -XX:MaxPermSize=256m
-XX:NewSize=192m -XX:MaxNewSize=384m”
服务器为1G内存:JAVA_OPTS=”-server -Xms800m -Xmx800m -XX:PermSize=64M -XX:MaxNewSize=256m -XX:MaxPermSize=128m -Djava.awt.headless=true “
服务器为64位、2G内存: JAVA_OPTS=’-server -Xms1024m -Xmx1536m -XX:PermSize=128M -XX:MaxNewSize=256m -XX:MaxPermSize=256m’
——————-解决方案1:—————————–
前提:是执行startup.bat启动tomcat的方式
Linux服务器:
在/usr/local/apache-tomcat-5.5.23/bin 目录下的catalina.sh
添加:JAVA_OPTS=’-Xms512m -Xmx1024m’
或者 JAVA_OPTS=”-server -Xms800m -Xmx800m -XX:MaxNewSize=256m”
或者 CATALINA_OPTS=”-server -Xms256m -Xmx300m”
Windows服务器:
在catalina.bat最前面加入
set JAVA_OPTS=-Xms128m -Xmx350m
或者set CATALINA_OPTS=-Xmx300M -Xms256M
(区别是一个直接设置jvm内存,另一个设置tomcat内存,CATALINA_OPTS似乎可以与JAVA_OPTS不加区别的使用)
基本参数说明
-client,-server
这两个参数用于设置虚拟机使用何种运行模式,一定要作为第一个参数,client模式启动比较快,但运行时性能和内存管理效率不如server模式,通常用于客户端应用程序。相反,server模式启动比client慢,但可获得更高的运行性能。
在windows上,缺省的虚拟机类型为client模式,如果要使用server模式,就需要在启动虚拟机时加-server参数,以获得更高性能,对服务器端应用,推荐采用server模式,尤其是多个CPU的系统。在Linux,Solaris上缺省采用server模式。
此外,在多cup下,建议用server模式
-Xms
设置虚拟机可用内存堆的初始大小,缺省单位为字节,该大小为1024的整数倍并且要大于1MB,可用k(K)或m(M)为单位来设置较大的内存数。初始堆大小为2MB。加“m”说明是MB,否则就是KB了。
例如:-Xms6400K,-Xms256M
-Xmx
设置虚拟机的最大可用大小,缺省单位为字节。该值必须为1024整数倍,并且要大于2MB。可用k(K)或m(M)为单位来设置较大的内存数。缺省堆最大值为64MB。
例如:-Xmx81920K,-Xmx80M
当应用程序申请了大内存运行时虚拟机抛出java.lang.OutOfMemoryError: Java heap space错误,就需要使用-Xmx设置较大的可用内存堆。
PermSize/MaxPermSize:定义Perm段的尺寸,即永久保存区域的大小,PermSize为JVM启动时初始化Perm的内存大小;MaxPermSize为最大可占用的Perm内存大小。在用户生产环境上一般将这两个值设为相同,以减少运行期间系统在内存申请上所花的开销。
如果用startup.bat启动tomcat,OK设置生效.够成功的分配200M内存.
——————-解决方案2:————————
前提:是执行startup.bat启动tomcat的方式
手动设置Heap size
Windows服务器:
修改TOMCAT_HOME/bin/catalina.bat,在“echo “Using CATALINA_BASE: $CATALINA_BASE””上面加入以下行:
Java代码
set JAVA_OPTS=%JAVA_OPTS% -server -Xms800m -Xmx800m -XX:MaxNewSize=256m

注:JAVA_OPTS是保留先前设置。

Linux服务器:
修改TOMCAT_HOME/bin/catalina.sh
在“echo “Using CATALINA_BASE: $CATALINA_BASE””上面加入以下行:
JAVA_OPTS=”$JAVA_OPTS -server -Xms800m -Xmx800m -XX:MaxNewSize=256m”
注:$JAVA_OPTS是保留先前设置。
——————-解决方案3:—————————–
前提:是执行windows的系统服务启动tomcat的方式
但是如果不是执行startup.bat启动tomcat而是利用windows的系统服务启动tomcat服务,上面的设置就不生效了,
就是说set JAVA_OPTS=-Xms128m -Xmx350m 没起作用.上面分配200M内存就OOM了..
windows服务执行的是bin\tomcat.exe.他读取注册表中的值,而不是catalina.bat的设置.
解决办法:
修改注册表HKEY_LOCAL_MACHINE\SOFTWARE\Apache Software Foundation\Tomcat Service Manager\Tomcat5\Parameters\JavaOptions
原值为
-Dcatalina.home=”C:\ApacheGroup\Tomcat 5.0”
-Djava.endorsed.dirs=”C:\ApacheGroup\Tomcat 5.0\common\endorsed”
-Xrs
加入 -Xms300m -Xmx350m
重起tomcat服务,设置生效
——————-解决方案4:—————————–
前提:是执行windows的系统服务启动tomcat的方式
在安装tomcat时若有勾选”NT Service(NT/2000/XP only)”
则安装完成后在安装目录的”bin”目录里会有一个tomcat.exe的档案
先把tomcat的服务停掉
在命令列模式下(运行里输入CMD)
将目录切换到tomcat的bin目录
用下面的命令把服务移除

tomcat -uninstall “Apache Tomcat 4.1”

接下来,写个批处理。
内容如下
set SERVICENAME=Apache Tomcat 4.1
set CATALINA_HOME=E:\Tomcat 4.1.24
set CLASSPATH=D:\j2sdk1.4.1_01\lib
set JAVACLASSPATH=%CLASSPATH%
set JAVACLASSPATH=%JAVACLASSPATH%;�TALINA_HOME%\bin\bootstrap.jar
set JAVACLASSPATH=%JAVACLASSPATH%;�TALINA_HOME%\common\lib\servlet.jar
set JAVACLASSPATH=%JAVACLASSPATH%;%JAVA_HOME%\lib\tools.jar
tomcat.exe -install “%SERVICENAME%” “%JAVA_HOME%\jre\bin\server\jvm.dll” -Djava.class.path=”%JAVACLASSPATH%” -Dcatalina.home=”�TALINA_HOME%” -Xms512m -Xmx768m -start org.apache.catalina.startup.Bootstrap -params start -stop org.apache.catalina.startup.Bootstrap -params stop -out “�TALINA_HOME%\logs\stdout.log” -err “�TALINA_HOME%\logs\stderr.log”

注意,从 tomcat.exe -install开始的是最后一行!不要手工回车换行把这一行分成了好几段。保存后在命令行下执行这个bat文件,注意执行的时候将“服务”窗口关闭。
第二种:永久保存区域溢出
 原因分析:
PermGen space的全称是Permanent Generation space,是指内存的永久保存区域,这块内存主要是被JVM存放Class和Meta信息的,Class在被Loader时就会被放到PermGen space中,它和存放类实例(Instance)的Heap区域不同,GC(Garbage Collection)不会在主程序运行期对PermGen space进行清理,所以如果你的应用中有很CLASS的话,就很可能出现PermGen space错误,这种错误常见在web服务器对JSP进行pre compile的时候。如果你的WEB APP下都用了大量的第三方jar, 其大小超过了jvm默认的大小(4M)那么就会产生此错误信息了。但目前的hibernate和spring项目中也很容易出现这样的问题。可能是由于这些框架会动态class,而且jvm的gc是不会清理PemGen space的,超过了jvm默认的大小(4M),导致内存溢出。
  建议:将相同的第三方jar文件移置到tomcat/shared/lib目录下,这样可以达到减少jar 文档重复占用内存的目的。
这一个一般是加大-XX:PermSize -XX:MaxPermSize 来解决问题。
  -XX:PermSize 永久保存区域初始大小
  -XX:PermSize 永久保存区域初始最大值
  这一般结合第一条使用,比如 set JAVA_OPTS= -Xms1024m -Xmx1024m -XX:PermSize=128M -XX:PermSize=256M
  有一点需要注意:java -Xmx***M version 命令来测试的最大堆内存是 -Xmx与 -XX:PermSize的和比如系统支持最大的jvm堆大小事1.5G,那 -Xmx1024m -XX:PermSize=768M 是无法运行的。
—————–解决方案1:————————-
Linux服务器:
在catalina.sh的第一行增加:
JAVA_OPTS=
-Xms64m
-Xmx256m
-XX:PermSize=128M
-XX:MaxNewSize=256m
-XX:MaxPermSize=256m
或者
在“echo “Using CATALINA_BASE: $CATALINA_BASE””上面加入以下行:
JAVA_OPTS=”-server -XX:PermSize=64M -XX:MaxPermSize=128m
Windows服务器:
在catalina.bat的第一行增加:
set JAVA_OPTS=-Xms64m -Xmx256m -XX:PermSize=128M -XX:MaxNewSize=256m -XX:MaxPermSize=256m
—————–解决方案2:————————
修改TOMCAT_HOME/bin/catalina.bat(Linux下为catalina.sh),在Java代码
“echo “Using CATALINA_BASE: $CATALINA_BASE””上面加入以下行:
set JAVA_OPTS=%JAVA_OPTS% -server -XX:PermSize=128M -XX:MaxPermSize=512m
“echo “Using CATALINA_BASE: $CATALINA_BASE””上面加入以下行:
set JAVA_OPTS=%JAVA_OPTS% -server -XX:PermSize=128M -XX:MaxPermSize=512m
catalina.sh下为:
Java代码
JAVA_OPTS=”$JAVA_OPTS -server -XX:PermSize=128M -XX:MaxPermSize=512m”
JAVA_OPTS=”$JAVA_OPTS -server -XX:PermSize=128M -XX:MaxPermSize=512m”
  第三种:无法创建新的线程。
  这种现象比较少见,也比较奇怪,主要是和jvm与系统内存的比例有关。
  这种怪事是因为JVM已经被系统分配了大量的内存(比如1.5G),并且它至少要占用可用内存的一半。有人发现,在线程个数很多的情况下,你分配给JVM的内存越多,那么,上述错误发生的可能性就越大。
  原因分析
(从这个blog中了解到原因:http://hi.baidu.com/hexiong/blog/item/16dc9e518fb10c2542a75b3c.html):
  每一个32位的进程最多可以使用2G的可用内存,因为另外2G被操作系统保留。这里假设使用1.5G给JVM,那么还余下500M可用内存。这500M内存中的一部分必须用于系统dll的加载,那么真正剩下的也许只有400M,现在关键的地方出现了:当你使用Java创建一个线程,在JVM的内存里也会创建一个Thread对象,但是同时也会在操作系统里创建一个真正的物理线程(参考JVM规范),操作系统会在余下的 400兆内存里创建这个物理线程,而不是在JVM的1500M的内存堆里创建。在jdk1.4里头,默认的栈大小是256KB,但是在jdk1.5里头,默认的栈大小为1M每线程,因此,在余下400M的可用内存里边我们最多也只能创建400个可用线程。
  这样结论就出来了,要想创建更多的线程,你必须减少分配给JVM的最大内存。还有一种做法是让JVM宿主在你的JNI代码里边。
  给出一个有关能够创建线程的最大个数的估算公式:
  (MaxProcessMemory - JVMMemory - ReservedOsMemory) / (ThreadStackSize) = Number of threads
  对于jdk1.5而言,假设操作系统保留120M内存:
  1.5GB JVM: (2GB-1.5Gb-120MB)/(1MB) = ~380 threads
  1.0GB JVM: (2GB-1.0Gb-120MB)/(1MB) = ~880 threads
  在2000/XP/2003的boot.ini里头有一个启动选项,好像是:/PAE /3G ,可以让用户进程最大内存扩充至3G,这时操作系统只能占用最多1G的虚存。那样应该可以让JVM创建更多的线程。
  因此这种情况需要结合操作系统进行相关调整。
  因此:我们需要结合不同情况对tomcat内存分配进行不同的诊断才能从根本上解决问题。

检测当前JVM内存使用情况:
System.out.println(“JVM MAX MEMORY: “ + Runtime.getRuntime().maxMemory()/1024/1024+”M”);
System.out.println(“JVM IS USING MEMORY:” + Runtime.getRuntime().totalMemory()/1024/1024+”M”);
System.out.println(“JVM IS FREE MEMORY:” + Runtime.getRuntime().freeMemory()/1024/1024+”M”);
这三个方法都是说JVM的内存使用情况而不是操作系统的内存;
  maxMemory()这个方法返回的是java虚拟机(这个进程)能构从操作系统那里挖到的最大的内存,以字节为单位,如果在运行java程序的时候,没有添加-Xmx参数,那么就是64兆,也就是说maxMemory()返回的大约是6410241024字节,这是java虚拟机默认情况下能从操作系统那里挖到的最大的内存。如果添加了-Xmx参数,将以这个参数后面的值为准,例如java -cp ClassPath -Xmx512m ClassName,那么最大内存就是51210240124字节。

  totalMemory()这个方法返回的是java虚拟机现在已经从操作系统那里挖过来的内存大小,也就是java虚拟机这个进程当时所占用的所有内存。如果在运行java的时候没有添加-Xms参数,那么,在java程序运行的过程的,内存总是慢慢的从操作系统那里挖的,基本上是用多少挖多少,直挖到maxMemory()为止,所以totalMemory()是慢慢增大的。如果用了-Xms参数,程序在启动的时候就会无条件的从操作系统中挖-Xms后面定义的内存数,然后在这些内存用的差不多的时候,再去挖。

  freeMemory()是什么呢,刚才讲到如果在运行java的时候没有添加-Xms参数,那么,在java程序运行的过程的,内存总是慢慢的从操作系统那里挖的,基本上是用多少挖多少,但是java虚拟机100%的情况下是会稍微多挖一点的,这些挖过来而又没有用上的内存,实际上就是freeMemory(),所以freeMemory()的值一般情况下都是很小的,但是如果你在运行java程序的时候使用了-Xms,这个时候因为程序在启动的时候就会无条件的从操作系统中挖-Xms后面定义的内存数,这个时候,挖过来的内存可能大部分没用上,所以这个时候freeMemory()可能会有些
——————–解决方案————————–
JVM堆大小的调整
  Sun HotSpot 1.4.1使用分代收集器,它把堆分为三个主要的域:新域、旧域以及永久域。Jvm生成的所有新对象放在新域中。一旦对象经历了一定数量的垃圾收集循环后,便获得使用期并进入旧域。在永久域中jvm则存储class和method对象。就配置而言,永久域是一个独立域并且不认为是堆的一部分。
  下面介绍如何控制这些域的大小。可使用-Xms和-Xmx 控制整个堆的原始大小或最大值。
  下面的命令是把初始大小设置为128M:
  java –Xms128m
  –Xmx256m为控制新域的大小,可使用-XX:NewRatio设置新域在堆中所占的比例。
  下面的命令把整个堆设置成128m,新域比率设置成3,即新域与旧域比例为1:3,新域为堆的1/4或32M:
java –Xms128m –Xmx128m
–XX:NewRatio =3可使用-XX:NewSize和-XX:MaxNewsize设置新域的初始值和最大值。
  下面的命令把新域的初始值和最大值设置成64m:
java –Xms256m –Xmx256m –Xmn64m
  永久域默认大小为4m。运行程序时,jvm会调整永久域的大小以满足需要。每次调整时,jvm会对堆进行一次完全的垃圾收集。
  使用-XX:MaxPerSize标志来增加永久域搭大小。在WebLogic Server应用程序加载较多类时,经常需要增加永久域的最大值。当jvm加载类时,永久域中的对象急剧增加,从而使jvm不断调整永久域大小。为了避免调整,可使用-XX:PerSize标志设置初始值。
  下面把永久域初始值设置成32m,最大值设置成64m。
java -Xms512m -Xmx512m -Xmn128m -XX:PermSize=32m -XX:MaxPermSize=64m
  默认状态下,HotSpot在新域中使用复制收集器。该域一般分为三个部分。第一部分为Eden,用于生成新的对象。另两部分称为救助空间,当Eden充满时,收集器停止应用程序,把所有可到达对象复制到当前的from救助空间,一旦当前的from救助空间充满,收集器则把可到达对象复制到当前的to救助空间。From和to救助空间互换角色。维持活动的对象将在救助空间不断复制,直到它们获得使用期并转入旧域。使用-XX:SurvivorRatio可控制新域子空间的大小。
  同NewRation一样,SurvivorRation规定某救助域与Eden空间的比值。比如,以下命令把新域设置成64m,Eden占32m,每个救助域各占16m:
java -Xms256m -Xmx256m -Xmn64m -XX:SurvivorRation =2
  如前所述,默认状态下HotSpot对新域使用复制收集器,对旧域使用标记-清除-压缩收集器。在新域中使用复制收集器有很多意义,因为应用程序生成的大部分对象是短寿命的。理想状态下,所有过渡对象在移出Eden空间时将被收集。如果能够这样的话,并且移出Eden空间的对象是长寿命的,那么理论上可以立即把它们移进旧域,避免在救助空间反复复制。但是,应用程序不能适合这种理想状态,因为它们有一小部分中长寿命的对象。最好是保持这些中长寿命的对象并放在新域中,因为复制小部分的对象总比压缩旧域廉价。为控制新域中对象的复制,可用-XX:TargetSurvivorRatio控制救助空间的比例(该值是设置救助空间的使用比例。如救助空间位1M,该值50表示可用500K)。该值是一个百分比,默认值是50。当较大的堆栈使用较低的sruvivorratio时,应增加该值到80至90,以更好利用救助空间。用-XX:maxtenuring threshold可控制上限。
  为放置所有的复制全部发生以及希望对象从eden扩展到旧域,可以把MaxTenuring Threshold设置成0。设置完成后,实际上就不再使用救助空间了,因此应把SurvivorRatio设成最大值以最大化Eden空间,设置如下:
java … -XX:MaxTenuringThreshold=0 –XX:SurvivorRatio=50000 …
垃圾回收描述:
垃圾回收分多级,0级为全部(Full)的垃圾回收,会回收OLD段中的垃圾;1级或以上为部分垃圾回收,只会回收Young中的垃圾,内存溢出通常发生于OLD段或Perm段垃圾回收后,仍然无内存空间容纳新的Java对象的情况。
当一个URL被访问时,内存申请过程如下:
A. JVM会试图为相关Java对象在Eden中初始化一块内存区域
B. 当Eden空间足够时,内存申请结束。否则到下一步
C. JVM试图释放在Eden中所有不活跃的对象(这属于1或更高级的垃圾回收);释放后若Eden空间仍然不足以放入新对象,则试图将部分Eden中活跃对象放入Survivor区/OLD区
D. Survivor区被用来作为Eden及OLD的中间交换区域,当OLD区空间足够时,Survivor区的对象会被移到Old区,否则会被保留在Survivor区
E. 当OLD区空间不够时,JVM会在OLD区进行完全的垃圾收集(0级)
F. 完全垃圾收集后,若Survivor及OLD区仍然无法存放从Eden复制过来的部分对象,导致JVM无法在Eden区为新对象创建内存区域,则出现”out of memory错误”
Java堆相关参数:
ms/mx:定义YOUNG+OLD段的总尺寸,ms为JVM启动时YOUNG+OLD的内存大小;mx为最大可占用的YOUNG+OLD内存大小。在用户生产环境上一般将这两个值设为相同,以减少运行期间系统在内存申请上所花的开销。
NewSize/MaxNewSize:定义YOUNG段的尺寸,NewSize为JVM启动时YOUNG的内存大小;MaxNewSize为最大可占用的YOUNG内存大小。在用户生产环境上一般将这两个值设为相同,以减少运行期间系统在内存申请上所花的开销。
PermSize/MaxPermSize:定义Perm段的尺寸,PermSize为JVM启动时Perm的内存大小;MaxPermSize为最大可占用的Perm内存大小。在用户生产环境上一般将这两个值设为相同,以减少运行期间系统在内存申请上所花的开销。
SurvivorRatio:设置Survivor空间和Eden空间的比例
例:
MEM_ARGS=”-Xms512m -Xmx512m -XX:NewSize=256m -XX:MaxNewSize=256m -XX:PermSize=128m -XX:MaxPermSize=128m -XX:SurvivorRatio=6”
在上面的例子中:
YOUNG+OLD: 512M
YOUNG: 256M
Perm: 128M
Eden: YOUNG*6/(6+1+1)=192M
Survivor: YOUNG/(6+1+1)=32M
Java堆的总尺寸=YOUNG+OLD+Perm=640M

分享到

windows更改右击菜单

sublime text 添加到鼠标右键功能:

把以下内容复制并保存到文件,重命名为:sublime_addright.reg,然后双击就可以了。

(注意:需要把下面代码中的Sublime的安装目录(标粗部分),替换成自已实际的Sublime安装目录)
Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOT*\shell\SublimeText3]

1
2
3
4
5
6
7
8
9
@="用 SublimeText3 打开"
"Icon"="C:\\Program Files\\Sublime Text 3\\sublime_text.exe,0"
[HKEY_CLASSES_ROOT\*\shell\SublimeText3\command]
@="C:\\Program Files\\Sublime Text 3\\sublime_text.exe %1"
[HKEY_CLASSES_ROOT\Directory\shell\SublimeText3]
@="用 SublimeText3 打开"
"Icon"="C:\\Program Files\\Sublime Text 3\\sublime_text.exe,0"
[HKEY_CLASSES_ROOT\Directory\shell\SublimeText3\command]
@="C:\\Program Files\\Sublime Text 3\\sublime_text.exe %1"

其中,@=”用 SublimeText3 打开” 引号中的内容为出现在鼠标右键菜单中的文字内容。

双击文件sublime_addright.reg 完成后,鼠标选中要编辑的文件
点击鼠标右键,弹出菜单,其中就会出现刚才添加的“用 SublimeText3 打开”选项,如下图所示。

分享到

h5学习笔记

##web视频
1.Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
2.MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
3.WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

###添加视频标签

1
2
3
4
5
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

###视频属性
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。
如果使用 “autoplay”,则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

###video方法属性
方法 属性 事件
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
duration timeupdate
ended ended
error abort
paused empty
muted emptied
seeking waiting
volume loadedmetadata
height
width

##web音频

###实例
1
2
3
4
5
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

##audio 标签属性
属性 值 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload
如果出现该属性,则音频在页面加载时进行加载,并预备播放。
如果使用 “autoplay”,则忽略该属性。
src url 要播放的音频的 URL。

###实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault(); //来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
}

function drag(ev) //
{
ev.dataTransfer.setData("Text",ev.target.id); //设置拖拽的数据
}

function drop(ev) //当放置被拖数据时,会发生 drop 事件。
{
调用 preventDefault() {
ev.preventDefault(); // //来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
var data=ev.dataTransfer.getData("Text"); //方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
ev.target.appendChild(document.getElementById(data)); //把被拖元素追加到放置元素(目标元素)中
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" <!-- 进行放置 - ondrop 当放置被拖数据时,会发生 drop 事件。-->
ondragover="allowDrop(event)"></div> <!-- 目标div块 放到何处 - ondragover-->
<img id="drag1" src="img_logo.gif" draggable="true" <!-- 设置元素为可拖放-->
ondragstart="drag(event)" width="336" height="69" /><!-- 拖动什么 - ondragstart 和 setData()-->
</body>
</html>

##canvas 画布

##实例 --渐变
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
	
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
//画线
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10); //第一个点
cxt.lineTo(150,50); //第二个点
cxt.lineTo(10,50); //第三个点
cxt.stroke(); //结束
//画圆
/*
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000"; //颜色
cxt.beginPath(); //开始
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath(); //结束
cxt.fill(); //画
*/
//画渐变
/*
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
*/
//将图片放到画布上
/*
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
//img.src="flower.png"
cxt.drawImage(img,0,0);
*/

</script>

##内联svg

###概况
    SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
### 实例
    
1
2
3
4
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
详细请看svg教程

##使用地理位置

###实例
<p id="demo">点击这个按钮,获得您的坐标:</p>
        <div id="mapholder"></div>
        <button onclick="getLocation()">试一下</button>
        <script>
            var x=document.getElementById("demo");
            function getLocation()
              {
              if (navigator.geolocation)
                {
                /* 如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象*/
                navigator.geolocation.getCurrentPosition(showPosition);  //返回数据 
                //navigator.geolocation.watchPosition(showPosition);  // 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)。
                //....clearWatch() - 停止 watchPosition() 方法
                }
              else{x.innerHTML="Geolocation is not supported by this browser.";}
              }
            function showPosition(position)
              {
              x.innerHTML="Latitude: " + position.coords.latitude +
              "<br />Longitude: " + position.coords.longitude;

              //在google地图上显示位置
              var latlon=position.coords.latitude+","+position.coords.longitude;
              var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
              +latlon+"&zoom=14&size=400x300&sensor=false";  //google地图变成图片api 需要翻墙才能使用
              console.log(img_url);
              document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
              }
            function showError(error)
              {
              switch(error.code) 
                {
                case error.PERMISSION_DENIED:  //Permission denied - 用户不允许地理定位
                  x.innerHTML="User denied the request for Geolocation."
                  break;
                case error.POSITION_UNAVAILABLE:  //Position unavailable - 无法获取当前位置
                  x.innerHTML="Location information is unavailable."
                  break;
                case error.TIMEOUT:  //Timeout - 操作超时
                  x.innerHTML="The request to get user location timed out."
                  break;
                case error.UNKNOWN_ERROR:
                  x.innerHTML="An unknown error occurred."
                  break;
                }
              }
        </script>

### getCurrentPosition() 方法 - 返回数据

属性                描述
coords.latitude    十进制数的纬度
coords.longitude    十进制数的经度
coords.accuracy     位置精度
coords.altitude     海拔,海平面以上以米计
coords.altitudeAccuracy    位置的海拔精度
coords.heading    方向,从正北开始以度计
coords.speed    速度,以米/每秒计
timestamp    响应的日期/时间

##web存储

###类别
    localStorage - 没有时间限制的数据存储
    sessionStorage - 针对一个 session 的数据
####实例
        //localStorage的使用
        
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript"> 	
if (localStorage.pagecount) //存储访问网站的次数
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
//sessionStorage的使用 在当前 session 中访问页面的次数进行计数
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>

##Application Cache 应用缓存

##要点
1.html文件中标签  必须包含manifest属性
    
1
2
3
4
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
2.还需要像demo.appcache的 manifest 文件 并且文件分三部分 CACHE MANIFEST NETWORK FALLBAK 如下:
1
2
3
4
5
6
7
8
9
10
11
CACHE MANIFEST   //这个是必须的  并且一下三个文件会被离线下载
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK: //永远不会被缓存
login.asp

FALLBACK: //无法建立因特网连接 用404.html 代替/html5/目录下的所有文件
/html5/ /404.html

##Web Worker 即后台运行的javascript

###实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />
<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined") //判断浏览器是否支持web worker
{
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js"); //创建 Web Worker 对象 运行demo_workers.js文件
}
w.onmessage = function (event) { //向 web worker 添加一个 "onmessage" 事件监听器
document.getElementById("result").innerHTML=event.data; //当 web worker 传递消息时,会执行事件监听器中的代码。
}; //event.data 中存有来自 event.data 的数据。
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate(); //终止 web worker,并释放浏览器/计算机资源,使用 terminate() 方法
}
</script>
</body>
</html>
###由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:window 对象 document 对象 parent 对象

##Server-Sent 向服务器发送事件 —单向消息传递

###接收 Server-Sent 事件通知
1
2
3
4
5
var source=new EventSource("demo_sse.php");   //EventSource用于接收服务器发来的通知
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br />";
};
###服务器端 代码实例 ###PHP 代码 (demo_sse.php):
1
2
3
4
5
6
7
8
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
###注解:"Content-Type" 报头设置为 "text/event-stream" 这个是最主要的向客户端发送事件流

##表单

##输入类型
    email  
    url
    number
    range            //range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
    Date pickers (date, month, week, time, datetime, datetime-local)
    search   类型用于搜索域,比如站点搜索或 Google 搜索。search 域显示为常规的文本域。
    color 
##表单元素
    datalist        //元素规定输入域的选项列表。 列表是通过 datalist 内的 option 元素创建的
    keygen            //提供一种验证用户的可靠方法
    output            //元素用于不同类型的输出
    ####datalist
        
1
2
3
4
5
6
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
####keygen
1
2
3
4
5
<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
##表单属性 #####from属性 autocomplete novalidate #####input属性 autocomplete autofocus //自动获取焦点 form form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) height 和 width list min, max 和 step multiple //属性规定输入域中可选择多个值。 pattern (regexp) //模式(pattern) 是正则表达式 placeholder //属性提供一种提示(hint),描述输入域所期待的值 required ###实例
1
2
3
4
5
6
7
<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" autofocus="autofocus" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" /><!--formaction - 重写表单的 action 属性-->
<input type="submit" />
</form>
formaction - 重写表单的 action 属性 formenctype - 重写表单的 enctype 属性 formmethod - 重写表单的 method 属性 formnovalidate - 重写表单的 novalidate 属性 formtarget - 重写表单的 target 属性 #####pattern实例
1
Country code: <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" />
分享到

web前端 ajax加载其他页面方法

html异步加载静态页面

  1. jquery方法

#load方法:
定义一个函数 等待调用

1
2
3
4
5
<script>
function jump() {
var s=$("#mainBody").load("tempDemo.html", function(data) { $("#mainBody").show(100); $("#mainBody").html(data);});
}
</script>

其中参数tempDemo.html是需要加载的文件
#mainBody是接收的div显示的层
show方法可要可不要

#ajax方法

1
2
3
4
5
6
7
8
9
10
11
12
function jump() {
$.ajax({
url: 'tempDemo.html',
type: 'get',
dataType: 'html',
data: parames,
error: function() { alert('error'); },
success: function(data) {
$("#mainBody").html(data);
}
});
}

分享到