发表于 | 分类于 |

$符号表示什么

  • $()函数是jQuery()函数的别称；
  • 例子：
1
2
3
4
5
6
7
8
$(document).ready(function(){
	alert("aaa");
});

$("#btn1").bind({
	mouseover:function(){$(this).attr("style","color:red")},
	mouseout:function(){$(this).attr("style","color:yellow")}
})

禁用$符号

  • 在引入多个库时，$符号有可能和别的库重复；
  • 此时需要禁用jQuery中的$符号，或是自定义jQuery的简写符号；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
	//不使用jQuery的$符号
	jQuery.noConflict();
	jQuery(document).ready(function(){
	    jQuery("#me").mouseover(function(){
		    jQuery("#me").css("background-color","blue");
	    })
	})

	//自定义jQuery简写符号
	var jq = jQuery.noConflict();
	jq(document).ready(function(){
		jq("#me").mouseover(function(){
			jq("#me").css("background-color","yellow");
		})
	})
</script>

几个函数的区别

  • 几个document相关的函数在jQuery中使用：
1
2
3
4
5
6
7
8
9
10
11
//jQuery中使用，等待DOM加载完毕后就执行
$(document).ready(fucntion(){...})

//jQuery中使用，等待页面全部加载完毕后才执行（图片音频视频等全部加载完毕后才执行）
$(window).load(function(){ ...})

//纯js中使用，等待DOM加载完毕后就执行
document.ready = function(){...}

//纯js中使用，等待页面全部加载完毕后才执行（图片音频视频等全部加载完毕后才执行）
window.onload = function(){...}
  • 下面的几个函数完全等价：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function(){
	alert("aaa");
});

jQuery(document).ready(function(){
	alert("bbb");
});

$(function(){
	alert("ccc");
})

jQuery(function(){
	alert("ddd");
})
  • 禁用浏览器的前进后退按钮：
1
2
3
4
5
6
7
<script>
	$(document).ready(function() {
		window.history.forward(1);
		//or
		window.history.forward(-1);
	});
</script>

发表于 | 分类于 |

引言

  • 在js中，字符串处理是很重要的；
  • 常用的字符串的截取函数有三个，分别是slice()、substring()、substr()；
  • 他们的区别在哪里呢？我做了一点小研究；

slice(start, end)函数

  • 截取值包含start不包含end；
  • start如果为负数，会从尾部算起，-1表示倒数第一个，-2表示倒数第2个，此时end必须为负数，并且是大于start的负数，否则返回空字符串；
  • slice的end如果为负数，同样从尾部算起，如果其绝对值超过原字符串长度或者为0，返回空字符串；
1
2
3
4
5
6
7
8
9
10
11
12
<script>
	    var s = "abcdefgh";
	    
	    console.log(s.slice(1,3));  //bc
	    console.log(s.slice(4,10));  //efgh  (end超过字符串长度)
	    console.log(s.slice(10,11)); //空字符串  (start超过字符串长度)

	    console.log(s.slice(-3, -1));  //fg
	    console.log(s.slice(-2,1)); //空字符串 (start若为负值，end必须也为负值)
	    console.log(s.slice(-10, -3));  //abcde  (start负值超过了字符串长度)
	    console.log(s.slice(-12,-10));  //空字符串 (end负值超过了字符串长度)
</script>

substring(start, end)函数

  • 截取值包含start不包含end；
  • 不允许操作数为负数；
  • 取start和end中较小的值为start,二者相等返回空字符串，任何一个参数为负数被替换为0(即该值会成为start参数)；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
	    var s = "abcdefgh";
	    
	    console.log(s.substring(1,3));  //bc
	    console.log(s.substring(4,10));  //efgh  (end超过字符串长度)
	    console.log(s.substring(10,11)); //空字符串  (start超过字符串长度)

	    console.log(s.substring(3,1));  //bc

	    console.log(s.substring(-3, -1));  //空字符串
	    console.log(s.substring(-2,1)); //a (-2被替换成0)
	    console.log(s.substring(-10, -3));  //空字符串 
	    console.log(s.substring(-12,-10));  //空字符串
</script>

substr(start, length)函数

  • 其第二个参数表示要截取的长度，而不是截取的终点，若该参数为负数或0，都将返回空字符串；
  • start参数可以为负值；
1
2
3
4
5
6
7
8
9
10
11
<script>
	    var s = "abcdefgh";
	    
	    console.log(s.substr(1,3));  //bcd
	    console.log(s.substr(3,1));  //d
	    console.log(s.substr(-2,1)); //g 
	    console.log(s.substr(4,10));  //efgh  (end超过字符串长度)
	    console.log(s.substr(10,5)); //空字符串  (start超过字符串长度)

	    console.log(s.substr(-3, -1));  //空字符串
</script>

发表于 | 分类于 |

引言

  • html5是html语言的第五次重大修改；
  • HTML5的第一份正式草案已于2008年1月22日公布，HTML5仍处于完善之中，然而，大部分现代浏览器已经具备了某些 HTML5支持；
  • 2012年12月17日，万维网联盟（W3C）正式宣布HTML5规范正式定稿；
  • HTML5具有诸多亮点和新特性，本文总结了html5常用的新特性，供大家参考；

文档声明方式的转变

  • HTML5声明
1
<!DOCTYPE html>
  • HTML4声明
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
  • XHTML声明
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • 对比可知，HTML5的声明非常简单，这是因为它不依赖于SGML。要知道详细的DOCTYPE声明方式，请看我的另一篇博客；

脚本无需加注type属性

  • HTML4
1
2
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>
  • HTML5
1
2
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

标签的变化

新增的标签

  • header和footer
    • 在html5中可以直接使用<header>和<footer>标签
1
2
3
4
5
6
<header>
   ...
</header>
<footer>
   ...
</footer>
  • 高亮标签：
1
<mark>this is marked words.</mark>
  • 图片和图片描述文字的语义化链接
1
2
3
4
5
6
<figure>
    <figcaption>
        <p>this is my picture:</p>
    </figcaption>
    <img src="img/11.png" alt="this is me">
</figure>

废弃的标签

  • frame
  • frameset
  • noframe
  • applet
  • big
  • center
  • basefront

HTML5表单新特性

  • 允许缩略属性，比如<input type="text" name="someInput" required>等价于<input type="text" name="someInput" required="required">，这在XHTML中是不允许的；
  • 新增autofocus属性，可实现自动聚焦某个表单控件
1
<input type="text" autofocus="autofocus" required>
  • 新增placeholder属性，向表单输入控件预制提示信息；
1
<input type="text" placeholder="please input your name" required>
  • 新增pattern属性，实现自动正则匹配用户的输入，如果不满足条件则不予提交表单；
1
<input type="text" pattern="[A-Za-z]{4,10}">
  • 新增datalist属性，实现在用户输入的同时，按照用户的输入给出相应的提示信息：
1
2
3
4
5
6
7
8
9
10
<form>
    <input list="Country">
    <datalist id="Country">
        <option value="China">
        <option value="America">
        <option value="Italy">
        <option value="India">
    </datalist>
    <input type="submit" class="btn">
</form>
  • 新增多种表单属性：
    • 自动弹出颜色选择器<input type="color" name="favcolor">；
    • 自动弹出日期选择器<input type="date" name="bday"> 或 <input type="datetime-local" name="bdaytime">；
    • 自动校验email格式正确<input type="email" name="email">；
    • 自动校验url格式正确<input type="url" name="sitename">；
    • 自动显示数字增减上下箭头<input type="number" name="quantity" min="1" max="5">；
    • 自动显示范围增减条<input type="range" min="0" max="10" step="2" value="6">；
    • 文本框作为搜索引擎<input type="search" name="googleengine">；
    • 只能输入时间<input type="time" name="usr_time">；
    • 输入电话号码<input type="tel" name="mytel">；

HTML5 多媒体支持

  • 支持的视频格式：Ogg、MPEG4、WebM；
1
2
3
4
<video width=”450″ height=”340″ controls>
     <source src=”jamshed.mp4″ type=”video/mp4″>
     <source src=”jamshed.ogg” type=”video/ogg”>
</video>
  • 支持的音频格式:Ogg Vorbis、MP3、Wav；
1
2
3
4
<audio controls>
    <source src=”jamshed.mp3″ type=”audio/mpeg”>
    Your browser does’nt support audio embedding feature.
</audio>

HTML5 图像支持

  • SVG线条图案：
1
2
3
4
<svg id="svgLineTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px"
     xmlns="http://www.w3.org/2000/svg">
    <line x1="10" y1="20" x2="100" y2="200" style="stroke:Green;stroke-width:2"/>
</svg>

svg1

  • SVG圆形图案：
1
2
3
<svg id="svgCircleTutorial" height="250" xmlns="http://www.w3.org/2000/svg">
    <circle id="myCircle" cx="55" cy="55" r="50" fill="#219E3E" stroke="#17301D" stroke-width="2" />
</svg>

svg2

  • SVG矩形图案：
1
2
3
<svg id="svgRectangleTutorial" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect id="myRectangle" width="300" height="100" stroke="#17301D" stroke-width="2"  fill="#0E4E75" fill-opacity="0.5" stroke-opacity="0.5"/>
</svg>

svg3

  • SVG椭圆图案：
1
2
3
<svg id="svgEllipseTutorial" height="150" xmlns="http://www.w3.org/2000/svg">
    <ellipse id="myEllipse" cx="120" cy="60" rx="100" ry="50" style="fill:#3F5208;stroke:black;stroke-width:3"/>
</svg>

svg4

  • SVG多边形图案：
1
2
3
<svg id="svgPolygonTutorial" height="200" xmlns="http://www.w3.org/2000/svg">
    <polygon id="myPolygon" points="10,10 75,150 150,60" style="fill:#63BCF7;stroke:black;stroke-width:3"/>
</svg>

svg5

  • <canvas>标签有一个基于JavaScript的绘图API，详见这里；

HTML5 存储模式

  • session storage和local storage是HTML5新增的两种存储模式；
  • cookie的缺陷：
    • cookie大小限制在4KB以内；
    • cookie随着http事务一起发送，浪费流量和带宽；
    • 使用cookie不方便；
    • cookie保存在本地硬盘中，不安全；
  • session storage：
    • 对应标签页，只要当前标签页不被关闭，则session storage不会消失；
    • 一但标签页关闭，session storage的值随即清空；
    • 可以用下面的方式加注session storage；
1
sessionStorage.setItem("message", str)
  • local storage：
    • 保存在硬盘中，只要不手动清除，无论标签页和浏览器是否关闭都一直保存；
    • 可以用下面的方式加注local storage;
1
localStorage.setItem("message",str);
  • cookie、session storage、local storage的区别和联系：
    • cookie是由服务器端生成并发送给客户端的，其中的内容由服务器端决定；
    • cookie只能保存少量数据（不超过4K）；
    • 同源的网站cookie只存一份且共享（chrome中打开百度和firefox中打开百度用的是同一个cookie文件）；
    • 不同源网站的cookie不能相互访问和读写（百度和谷歌两个网站的cookie不能相互访问）；
    • session storage保存在浏览器缓存中，面向一次性的会话；
    • local storage保存在本地磁盘中；
    • session storage同源窗口不共享（不同的浏览器打开相同的网站不共享session storage）；
    • local storage同源窗口共享（不同的浏览器打开相同的网站共享local storage）；
    • session storage和local storage保存数据不超过5M；
    • session storage和local storage只在本地保存，一定不会发送给服务器；

HTML5 离线存储机制

  • 离线存储（应用程序缓存）是 HTML5 的重要特性之一；
  • 离线存储的作用是让应用程序可以获取本地的网站内容，在离线时也能实现正常访问网页；
  • 离线存储的实现借助于 manifest 文件；
  • 与传统浏览器缓存相比，离线存储不强制用户访问的网站内容被缓存；
  • 如果您想详细了解离线存储机制，请看这篇文章；

HTML5 提供的多种多样的API

  • Media API
  • Text Track API
  • Application Cache API
  • User Interaction
  • Data Transfer API
  • Command API
  • Constraint Validation API
  • History API

发表于 | 分类于 |

引言

  • DOCTYPE标签存在于html文档头部，我以前没有注意他，因为大多数情况下，我编写的都是html5文档，区区一行<!DOCTYPE html>确实没有引起我的重视；
  • DOCTYPE标签规定了文档类型、文档模式等等，对于浏览器正确解析html文档具有重要作用；
  • 本文分析了DOCTYPE标签的作用和常见形式；

文档类型

  • XML、HTML、XHTML、HTML5的关系如下：
    • SGML（标准通用标记语言）是一个标准，告诉我们怎么去指定文档标记，他是只描述文档标记应该是怎么样的元语言；
    • HTML是被用SGML描述的标记语言；
    • HTML不够灵活，因此W3C开发了XML，XML用于对信息进行自我描述，XML支持自定义标签；
    • XHTML是在HTML和XML之间的一种语言，是为了适应XML而重新改造的HTML；
    • XHTML比HTML更加严格；
    • HTML5不是基于SGML的，所以不需要引用 DTD；
    • HTML5是最新的HTML标准，他的主要目标是提供所有内容而不需要任何的像flash，silverlight等的额外插件，这些内容来自动画，视频，富GUI等；
    • DHTML是指Dynamic HTML，动态的HTML，DHTML意味着HTML、CSS和 JavaScript的组合；
  • 为什么说XHTML比HTML更加严格：
    • 在HTML中标签可以不严格嵌套、有时可省略结束标签、标签的大小写不作区分、属性值有时可以不加引号，这些在XHTML中均不允许；
  • 几者的关系可用下图表示：

html-doctype

DOCTYPE标签的作用

  • 作用一：告诉浏览器这个文档是HTML、HTML5还是XHTML，即区分文档定义类型（DTD）；
  • 作用二：告诉浏览器这个文档是过渡的(Transitional,要求非常宽松的DTD)还是严格的(Strict,要求严格的DTD)还是框架的(Frameset,专门针对框架页面设计使用的DTD)；
  • 需要注意：
    • 如果浏览器不能识别一个形式错误的doctype，就会强制进入Quirks模式；
    • <!DOCTYPE>声明位于文档中的最前面的位置，处于标签之前；
    • <!DOCTYPE>没有结束标签；
    • <!DOCTYPE> 声明对大小写不敏感；

DOCTYPE基本语法

  • 语法如下：
1
HTML 顶级元素 可用性 "注册//组织//类型 标签//定义 语言""URL"；
  • 选项说明：
    • 顶级元素：指定DTD中声明的顶级元素类型，这与声明的SGML文档类型相对应。
    • 可用性：指定正式公开标识符(FPI)是可公开访问的对象还是系统资源。 PUBLIC为默认值，表示可公开访问的对象。 SYSTEM指系统资源，如本地文件或URL。
    • 注册：指定组织是否由国际标准化组织(ISO)注册。 + 为默认值，表示组织名称已注册。 - 表示组织名称未注册。
    • 组织：指定表明负责由 !DOCTYPE 声明引用的DTD的创建和维护的团体或组织的名称，即 OwnderID。
    • 类型：指定公开文本类，即所引用的对象类型。 DTD为默认值。
    • 标签：指定公开文本描述，即对所引用的公开文本的唯一描述性名称。后面可附带版本号。 HTML为默认值。
    • 定义：指定文档类型定义。 Frameset为框架集文档。，Strict排除所有W3C专家希望逐步淘汰的代表性属性和元素，因为样式表已经很完善了，Transitional包含除frameSet元素的全部内容。
    • 语言：指定公开文本语言，即用于创建所引用对象的自然语言编码系统。该语言定义已编写为 ISO 639 语言代码(大写两个字母)。 EN为默认值，表示英语。
    • URL：指定所引用对象的位置。

不同模式的例子

  • 过渡的(Transitional):要求非常宽松的DTD(一般推荐使用这种)
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • 严格的(Strict):要求严格的DTD
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • 框架的(Frameset):专门针对框架页面设计使用的DTD
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

常用的DOCTYPE声明

  • HTML5
1
<!DOCTYPE html>
  • HTML 4.01 Strict
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • HTML 4.01 Transitional
1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
  • HTML 4.01 Frameset
1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
  • XHTML 1.0 Strict 
1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • XHTML 1.0 Transitional 
1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • XHTML 1.0 Frameset 
1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  • XHTML 1.1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

发表于 |

引言

  • 2015年即将过去了，回首这一年，陪伴我的不仅仅是一行一行的代码，不仅仅是前端的知识和页面，更有书香伴我行；
  • 本文列出了我2015年的书单，虽然区区几本不算多，但是每本书我都认真阅读，深受启迪；
  • 书是最好的老师，为我的成长之路指明方向，给我知识、给我力量、给我正能量！希望自己在2016年能读更多的书；

2015-我的书单

  • 《自控力》
    • 作者： [美] 凯利·麦格尼格尔
    • 本书的作者是美国斯坦福大学备受赞誉的心理学家凯利·麦格尼格尔；
    • 本书帮助人们管理压力、控制情绪；
    • 本书促使人们思考自己、思考自己的生活，并且在生活中做出积极的改变；
    • 本书从科学的角度揭示了成功的必要要素，揭示了自控力的本质，引导人们不要为了训练自控力而训练自控力，而应当用”小步快走”式的积极的改变影响自己和自己身边的人；

book1

  • 《社会心理学》
    • 作者: [美] 戴维·迈尔斯
    • 强烈建议每个人，无论您从事什么行业、什么职业，都应该读一读此书，此书绝不仅仅是一本简单的心理学教材，它会告诉您为什么人的心理有这样或是那样的想法或情绪，该如何应对，这将极大地提升您的心理健康水平和生活质量，是难得一见的好书！
    • 本书从科学的角度揭示了常见的心理学效应的本质，压力的本质，情绪的本质，攻击行为和偏见的本质，群体心理和从众心理的本质，态度、自责、自尊的本质等；
    • 特别推荐本书关于群体心理的章节，它能够让您了解群体在作出决策时的心理反应、怎样避免群体决策的误区、怎样避免群体决策的失衡、怎样影响甚至改变群体决策的结果；
    • 本书关于自我认识的章节（发展心理学）也值得推荐，让您科学的认识自我、倾听内心的声音，让您不再为人际关系、自我认知不到位、偏弱的自我意识等常见的心理问题所困扰，并且为您在自我接纳、自我悦纳方面提出可行的建议；

book2

  • 《为何家会伤人》
    • 作者：[中] 武志红
    • 本书重点讲述了”家”在一个人成长、成熟、发展中的重要意义，指出了家有时候也会带来烦恼和困惑，阅读了这本书后，我更加清楚了家的重要意义，以及如何避免家人之间的冲突和误解，让家真正成为心灵的港湾；

book3

  • 《大学之路》-吴军著
    • 作者：吴军
    • 相信很多人都读过这本书，本书的上下册我大约花了一个月左右看完，书中讲述的美国大学的历史、人文、教学、学生活动、大学文化等给我留下深刻印象；
    • 吴军博士深入浅出的分析了美国大学教育为什么强，中国大学在教学、科研等方面存在的问题和差距；
    • 美国各个大学不同但是很有特色的学校文化特别吸引我，如果有机会能去亲自体验一下就是再好不过的了；

book4

  • 《少有人走的路-心智成熟的旅程》
    • 作者： [美] M·斯科特·派克
    • 读完本书，最大的收获是一个人不断成长的法宝就是不断积极、主动的促进自己心智的成熟；
    • 书中从正反两方面举例，让我明白了何为心智成熟、怎么是自己心智成熟、什么样的表现是心智不成熟的表现；
    • 书中列举了一些自居成熟、一贯瞧不起他人、自认为什么都懂的人的外在表现和内心想法，一针见血的指出这些人其实非常自卑，自我放弃心智成熟的进程，作者为这些人感到深深的惋惜；
    • 本书非常适合刚上大学的学生来阅读，我虽然上研了才读，但是也受益匪浅；

book5

  • 《感谢自己的不完美》
    • 作者：[中] 武志红
    • 本书特别适合那些和我一样，有完美主义倾向的人来阅读；
    • 本书将会告诉您如何接纳自己、悦纳自己的优点或是缺点，指出人人都有对完美的追求，但是过度的不切实际的追求完美是不现实的；
    • 本书深入浅出讲解了为什么要感谢自己的不完美，如何在不完美中实现突破和自我超越，从而在奋斗的同时体会到快乐、体会到幸福、并且真正明白人生的意义；
    • 本书语言很优美，是非常文艺的一本书；

book6

  • 《恰到好处的幸福》
    • 作者: [中] 毕淑敏
    • 本书不是鸡汤、胜似鸡汤，用温暖的语言让您体会到幸福的含义；
    • 幸福需要我们用心体会才能得到，如果一个人整天抱怨不停、犹犹豫豫、缺乏信心、自居高傲，那么他只会离内心中的幸福越来越远；
    • 互联网时代，人人的压力都很大，如果您编代码变累了，不妨拿起此书翻一翻，让您的书香中放松，体会生活中小小的幸福；

book7

  • 《从0到1》
    • 作者：[美] 彼得·蒂尔 / 布莱克·马斯特斯
    • 这是我读的第一本真正的”商业”书籍，因为它从头到尾都在讲怎么赚钱；
    • 网上对这本书褒贬不一，有人说这本书揭示了商业的秘密，指出了创新在企业发展中的重要价值，但也有人说本书只是停留在概念表面，并没有为创业者、特别是中小企业家指出成功之路；
    • 我认为本书虽然有局限性，它对”从0到1”的商业模式的阐述不是非常清晰，但是如果您对彼得·蒂尔规划的商业蓝图感兴趣，还是值得一读的；

book8

  • 《组织行为学》
    • 作者: [美] 斯蒂芬·P·罗宾斯
    • 说实话，我没读懂这本书，感觉中间写的有些高深莫测；
    • 本书的核心就是如何让组织运转更加高效，作为管理者如何让公司用有限的人力资源、产出尽可能高的业绩和成效；
    • 本书虽然挺高深，但是却是美国组织行为学权威、圣迭戈大学管理学教授斯蒂芬·P·罗宾斯撰写的经典管理教科书，如果您对组织管理、组织运转感兴趣、又期待深入研究的话，非常推荐您详细阅读此书；

book9

  • 《竞争战略》
    • 作者： [美] 迈克尔•波特
    • 本书是迈克尔•波特竞争三部曲之一，具有划时代的价值和意义；
    • 本书是我读过的最权威的、最全面的、最具有可操作性的企业级的竞争战略书籍，不过本书在概念层面上有一些抽象，并没有提出非常具体的竞争战略，但是，从战略层面考虑问题本来就不是具体的，总体来看，本书的作者具有非凡的战略眼光和魄力，在引领企业发展、促使企业创新、完善企业管理、加快产业融合等方面观点独具一格；
    • 本书详细剖析了零散型产业、新兴产业、成熟产业、衰退产业和全球性产业中的竞争战略，非常全面；
    • 本书的作者迈克尔•波特毕业于普林斯顿大学，后获哈佛大学商学院企业经济学博士学位，是当今世界上竞争战略和竞争力方面公认的第一权威；
    • 如果您对企业市场竞争感兴趣，强烈推荐您阅读此书；

book10

  • 《策略与博弈》
    • 作者： [美] 普拉伊特・K.杜塔
    • 说实话，本书的概念我感觉十分晦涩难懂，但是还是坚持看完了；
    • 本书介绍了博弈论的相关知识，最大特点就是：严谨、例子多；
    • 本书完整描述和展示了效用理论、动态博弈论、动态策略相互作用；
    • 阅读本书需要有一定的数学基础和逻辑推理能力；
    • 对博弈论和决策效用理论感兴趣的童鞋可以阅读此书，我还是很推荐哒；

book11

  • 《基辛格-美国的全球战略》
    • 作者：[美] 亨利·基辛格
    • 本书作者亨利·基辛格是美国著名外交家、国际问题专家，美国前国务卿，1971年7月，基辛格作为尼克松总统特使访华，为中美关系大门的开启作出了历史性贡献；
    • 本书是基辛格亲自所著，从多个角度全面分析了中美关系，本书中充满精准的判断，偶然显现的深刻洞悉力令读者阅后扼腕称赞；
    • 基辛格是美国前国务卿，他对于美国和中国无论是在战略还是战术层面都非常了解，虽然在某些地方我不同意他的看法，但是书中他对于中美关系发展的总体把握和判断对于当今世界、当今的中美关系都非常有借鉴意义；
    • 如果您期望了解美国人眼中的中国，特别是美国政客眼中的中国，推荐阅读本书；

book12

  • 《亚太战略变局与中美新型大国关系》
    • 作者： [中] 孙哲
    • 本书作者孙哲是清华大学国际问题研究所教授、博士生导师，主要从事政治学理论、国际关系及美国政治与外交方面的研究工作；
    • 何谓“新型大国关系”？按照中方的说法，它是以相互尊重、互利共赢的合作伙伴关系为核心特征的；按照美方的说法，它是对“崛起国与守成国必然冲突”这一历史魔咒的打破，是以“新答案”解决“老问题”；
    • 尽管双方并未使用相同的概念，两国学术界尚未对其进行系统的理论阐释，双方对其理解和期待也不尽相同，但双方业内已存在的基本共识在于：21世纪的中美关系必须避免大国对抗和零和博弈的历史覆辙，切实走出一条新路；
    • 本书基于”新型大国关系”这个全新理念，系统性的阐释了亚太战略变局对于新型大国关系的影响；
    • 亚太地区一直是中美双方都非常关注的热点地区，亚太的和平稳定符合中美双方共同利益和需求，如果您对于亚太地区和中美关系走向感兴趣，推荐阅读此书；

book13

发表于 | 分类于 |

元素浮动

  • clear属性
    • 语法：clear : none|left|right|both
    • none : 允许两边都可以有浮动对象
    • both : 不允许有浮动对象
    • left : 不允许左边有浮动对象
    • right : 不允许右边有浮动对象
  • float属性
    • 语法：float : none|left|right
    • none : 对象不浮动
    • left : 对象浮在左边
    • right : 对象浮在右边
  • 使用场景
    • float和clear属性一般配合使用；
    • 在需要文字环绕图片、段首大号文字环绕效果等情况下可使用float，请看下面的代码；
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
<html>
<head>
<style type="text/css">
span
{
	float:left;
	width:0.7em;
	font-size:400%;
	font-family:algerian,courier;
	line-height:80%;
}
</style>
</head>

<body>
<p>
<span>T</span>his is some text.
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

</body>
</html>

css-position1

  • float也可用于实现两栏布局（这种样式在bootstrap中很容易实现）
1
2
3
4
5
6
7
8
9
10
.main{
    float: left;
    width: 600px;
}

.sidebar{
    float: right;
    width: 300px;
    margin-top: 1.875em;
}

css-position2

元素定位（position属性）

  • position属性的值：
    • absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位；
    • fixed：生成绝对定位的元素，相对于浏览器窗口进行定位；
    • relative：生成相对定位的元素，相对于其正常位置进行定位；
    • static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）；
    • inherit：规定应该从父元素继承position属性的值；
  • position属性深入理解：
    • relative是相对于元素本来应该在的位置进行定位，元素本来的位置会留出空白（保留元素本来位置）；
    • absolute是相对于页面进行绝对位置定位，元素本来的位置不会留出空白（不保留元素本来的位置），直接让元素浮于整个页面，相对于整个页面进行定位，如果要设定元素之间的重叠关系可使用z-index属性；
    • z-index属性一般结合position:absolute一起使用；
    • z-index的默认值为0，z-index值越大，这个元素就越在顶层显示，通过设置各个元素的z-index值，控制他们的页面层叠关系；
    • 如两个绝对定位对象的此属性具有同样的值，那么将依据它们在HTML文档中声明的顺序层叠；

元素居中显示的几种方法

  • 使用margin属性（首选方法）：
    • 将元素的margin-left和margin-right属性设置为auto即可，必须为该容器指定宽度；
    • 本方法只适用于>=IE6.0浏览器；
  • 示例：
1
2
3
<div style="margin-left:auto; margin-right:auto; width:200px;">
    <button>按钮</button>
</div>
1
2
3
<div style="margin:0 auto; width:200px;">
    <button>按钮</button>
</div>

  • 使用text-align属性

    • 使用方法：style="text-align: left | center | right"
    • 这个属性一般用于文字，但也可以用于其他控件或元素；
    • 用于非文字的控件或元素时，这个控件以及他所有的孩子全部居中，这是不太好的一点；

  • 利用负外边距

    • 首先创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边边缘50%的位置；
    • 这样，该容器的左外边距将从页面50%宽度的位置开始算起；
    • 然后，将容器的左外边距值设置为负的容器宽度的一半，这样即可将该容器固定在页面水平方向的中点；
1
2
3
4
5
6
#container{
	position: absolute;
    left: 50%;
    width: 760px;
    margin-left: -380px;
}

元素显示

  • display属性：

css-position3

  • visibility属性：

css-position4

  • 区别：

    • display:none：元素不可见也不占用空间；
    • visibility:hidden：元素不可见，但是占用空间，仍然会对页面布局产生影响；

  • 使元素不可见还可以用opacity属性设置元素完全透明，即opacity: 0;，效果和visibility:hidden；完全相同；

发表于 | 分类于 |

需求描述

  • 实验室的资源表管理系统需要这样一种功能：当资源表更改时自动给管理员发邮件；
  • 由于后台是用java写的，所以需要用java实现自动发邮件的功能；
  • 本文参考这里

实现过程

  • 下载jar包并导入工程，在这里下载；
  • 如果您使用的是maven工程，请在这里搜索jar包，包名称为commons-email,选择最新版本的jar包，将其groupId、artifactId、version等信息填入maven工程的导入jar包界面，点击导入即可；
  • 不要忘记在pom.xml中加入jar包的配置信息(我使用的netbeans会自动添加)：
1
2
3
4
5
<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-email</artifactId>
    <version>1.4</version>
</dependency>
  • 下面的代码即可实现发邮件的功能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package resourcestore.applycontent;

import org.apache.commons.mail.DefaultAuthenticator;
import org.apache.commons.mail.Email;
import org.apache.commons.mail.EmailException;
import org.apache.commons.mail.SimpleEmail;

public class SendMail {

    public static void send() throws EmailException {
        Email email = new SimpleEmail();
        email.setHostName("10.106.128.254");  //邮件服务器ip地址
        email.setSmtpPort(465);  //邮件服务器接收邮件的端口号
        email.setAuthenticator(new DefaultAuthenticator("name", "password"));  //登录邮件服务器的用户名密码 
        email.setSSLOnConnect(true);
        email.setFrom("...@...");  //发送地址
        email.setSubject("TestMail");  //邮件主题
        email.setMsg("This is a test mail ... :-)");  //邮件内容
        email.addTo("...@...");  //目的地址
        email.send();  //发送邮件
    }
}
  • 上面只是实现了最简单的邮件发送功能，如果需要更加复杂的、带有附件的、发送html邮件等，请看这里；

发表于 | 分类于 |

问题描述

  • 在web开发时，如果您后台用的是javaEE，经常需要将数据转换成JSON格式，以便序列化后返回给客户端；
  • javaEE内部能够自己将list转为JSON格式，比如下面的程序，从数据库取得数据后放在list中，在return这个list的时候javaEE内部将list转为JSON格式并序列化，作为http请求实体返回给客户端；
1
2
3
4
5
6
7
public List<ApplyInfo> getCurrentApply(int resourceId){
        List<ApplyInfo> list = em.createQuery("select a from ApplyInfo a "
                + "where a.resourceId=:resourceId and a.isPassed=0")
                .setParameter("resourceId", resourceId)
                .getResultList();
        return list;
    }
  • 但是在javaEE升级后，这样的内部转JSON的机制貌似失效了（具体原因尚不清楚）；
  • 导致服务器成功取得了数据，但是客户端获取不了数据，报500错误；

解决方案

  • 推荐一款轻量级的快速将数据转换为JSON格式的工具–fastjson，请看这里；
  • 它使用起来非常方便，先在工程中引入这个包：
1
import com.alibaba.fastjson.JSON;
  • 如果您的工程的maven工程，直接search这个包即可，添加后在pom.xml中即可看到包已经被引入：
1
2
3
4
5
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.1.41</version>
</dependency>
  • 直接调用JSON对象的toJSONString方法，就可将list转为JSON格式的String，然后我们手动构建http响应报文的实体：
1
2
3
4
5
6
7
8
9
10
@GET
@Path("userInfo")
@Produces({"application/json"})
public Response getUserInfo() {
    Query query = em.createQuery("select a.id , a.name from AuthUser a");
    List<AuthUser> userInfo = query.getResultList();
    System.out.println(userInfo.size());
    String u = JSON.toJSONString(userInfo);
    return Response.status(200).entity(u).build();
}
  • 访问我们写的API，看到数据成功被返回客户端；

发表于 | 分类于 |

需求定义

  • 公司需要对外展示若干web页面，需要一种能够自动在屏幕上循环播放这些web页面的功能；
  • web页面上的按钮和各种功能点也要能够自动点击和展示；
  • 现在有三种方案：用js实现、用制作视频的方式实现、用录屏的方式实现；
  • 第一种方案理论上可以实现，但是如果一个页面上的功能点过多，编写js代码就显得非常繁杂，而且一旦页面的元素、控件等有所改动就需要修改代码；
  • 第二种方案可能会存在视频不清晰、分辨率不高的缺点，同样，一旦系统有所变化，就需要重新录制，比较麻烦；
  • 第三种方案也没有能够避免第二种方案的缺陷；
  • 经过认真上网查询，我最终选择了用selenium来完成这件事；

为什么是selenium

  • selenium原本是一种网页自动化测试工具，可以实现自动测试网页功能和性能；
  • 这里，我们只用它的”网页动作”录制的功能来实现轮播效果；
  • selenium和selenium IDE均可直接安装在firefox上面，非常方便；
  • selenium支持多种浏览器播放录制的网页动作，官网上面可下载所需的浏览器驱动，浏览器支持性较强；
  • selenium支持各种常用语言，比如java、javascript（需要安装node）、C#、Python、Ruby，让你用最擅长的语言随心所欲操控网页；
  • 以java语言为例，selenium最终的录制脚本可以导出成jar包，无论是linux还是windows，只要机器上安装了java，你就可以运行jar包、开启轮播，没有比这更方便的啦！
  • 下面，我就带您用selenium一步一步实现轮播；

下载Selenium

  • 下载selenium插件
    • 目前，只有firefox支持selenium插件，不知道以后会不会跨浏览器支持；
    • 打开firefox，搜索插件selenium，安装插件；
    • 安装完后，可以看到firefox的功能列表中已经多了selenium啦！
    • 但此时启动selenium还不能够使用，这是因为我们尚未安装selenium IDE；
  • 安装Selenium IDE
    • 用firefox打开selenium官网，下载selenium IDE：点击这里下载；
    • selenium IDE将直接以插件形式安装在firefox上面；

Selenium IDE使用

  • 使用Selenium IDE来录制网页动作的方法十分简单，打开selenium后，点击红色的圆点即可开始录制，再次点击即停止录制，点击run按钮可以以设定好的速率播放相应脚本的动作，还能够将另存为脚本或者将脚本导出成为java/Ruby/Python等；

selenium1

  • 如果需要查询更复杂的功能，请看这里

实现轮播

  • 确保您的机器安装了java；
  • 打开eclipse，新建一个工程；
  • 在这里的Selenium Standalone Server一栏下载selenium依赖jar包，我下载的是selenium-server-standalone-2.48.2.jar；
  • 将上述jar包导入eclipse新建的工程中，注意不要仅仅是复制进eclipse呦，还需要在工程右键build path>library>add jars将jar包真正添加进工程中；

selenium2

  • 然后，我们就可以开始录制脚本啦；
    • 打开Selenium插件，点击红色圆形按钮开始录制；
    • 在浏览器操作一遍需要录制的动作，比如进入URL、点击按钮、选择下拉菜单等等；
    • 注意在录制前将所需的用户名和密码填写好并保存，否则在录制过程中还要填写用户名密码，这样会使得轮播的展示效果变差；
  • 录制完后，点击文件>export test case as java/JUnit4/webDriver，将脚本导出为JUnit；
  • 然后我们就该处理脚本了：
    • 将脚本复制进ecplise中；
    • 如果您使用的不是firefox来进行轮播，则将driver = new FirefoxDriver();改为driver = new ChromeDriver();就可以来，注意要引入外部包；
    • 可以加入诸如for循环或者while(true)之类的语句，保证脚本可以自动无限次循环播放；
    • 可以加入诸如Thread.sleep(3000);的语句来实现每个动作之间的时间驻留；
    • 对于具体的网页动作，也可根据代码进行必要的修改；
    • 需要注意的是，如果您使用的不是firefox来进行轮播，那么还需要下载您使用的浏览器的驱动才行，否则Selenium在启动浏览器时找不到相应的驱动会报错，各大浏览器的驱动在这里下载，linux版本的chrome驱动请在这里下载，chrome驱动版本和chrome版本的对应关系在这里查询；
    • 下载完驱动后，您还需要在程序中指明驱动存放位置，即添加下述代码：
1
System.setProperty("webdriver.chrome.driver", "D:\\chromedriver_win32\\chromedriver.exe");

  • 脚本录制大功告成，下面我们可以试着播放脚本，看看效果如何：

    • 将上面工程导出为jar包；
    • 用java -jar jar包名称运行jar包；
    • 此时，Selenium将自动为您开启浏览器，并播放刚才录制的网页动作，是不是非常方便！

  • 需要注意的是，在linux上面运行脚本，需要对chrome驱动赋予执行权限：

1
chmod +x chromedriver

进一步优化

  • 实现了录制和播放脚本还不够，我们要让整个轮播的过程更加优雅！
  • 可以添加下面的代码，实现浏览器自动全屏播放，是不是很炫！
1
2
3
4
// full screen automatic
ChormeOptions options = new ChormeOptions();
options.addArguments("kiosk");
driver = new ChromeDriver(options);
  • 如果您用的是windows系统，可直接将运行jar包的命令放在.bat文件中，这样如果有人来公司参观，直接双击.bat文件就能够实现轮播了，相当方便；
  • 如果您用的是linux系统，可以写一个shell脚本实现上述功能：
1
2
3
#!/bin/sh
cd /home/haohan/Desktop/looping_play/
java -jar /home/haohan/Desktop/looping_play/looping_play_linux64_2015.6.30.jar  &
  • 您还可以写一个.desktop文件，即桌面图标文件，链接到上面的shell脚本，这样双击桌面图标就能开启轮播功能！
1
2
3
4
5
6
7
8
9
10
11
#!/usr/bin/env xdg-open

[Desktop Entry]
Version=1.0
Name=Idea
Exec=looping_play/looping_play.sh
Terminal=false
Icon=looping_play/looping_play_pic.jpg
Type=Application
Categories=Development;
Name[en_US]=LoopingPlay
  • 现在我们完整的实现了整个轮播效果，我准备把它部署在公司门口的显示屏上，让每一个路过的人都能看到公司的产品展示！

发表于 | 分类于 |

引言

  • 最近实验室有人来参观，由于集群重装了，需要重新部署各个应用；
  • 在部署过程中发现数据库连接失败的问题，加以总结；

问题描述

  • glassfish报错：
1
Invalid resource : traffic__pm
  • 解决方法：
    • 根据错误提示，应该是persistence manager出错了
    • 应当运行数据库注册信息，即相关resource的xml文件
    • 运行后，将数据库添加到glassfish注册信息中，删除原来部署失败的war包，重启glassfish后添加新的war包即可部署成功
1
/opt/glassfish4/glassfish/bin/asadmin add-resources glassfish-resources.xml
  • 如果问题还未得到解决，那说明resource配置信息出了问题，需要检查glassfish-resources.xml中的jndi-name和persistence.xml中的<jta-data-source>是否相同；