忙记

当游戏程序员真的是一件很累的事情，尤其是当你遇到一个很NT的策划，那种写策划案就像是在便秘！！本来排期就很赶了，大家都没拖进度，该完成的都完成了，就你策划案补不全，就你策划案还没出，就把我做的功能砍了重做，服了你了。

都怪我，怪我不喜欢去面试，大四实习把简历挂网上，有人找我我就去了，入了这破游戏开发的坑，不然我现在可能在开发一些更有意思的东西，而不是做一个氪金手游还要被策划恶心。

我这身子骨哪里受得了997啊，我愿意997早就去一线了，我去上海去北京哪里不比这破厦门工资高，不就图个离家近？真是的，再有下次我真的不惯着你了！！毕业来了厦门，一直在这干到现在，我那是图安稳不想搬家，不是我走不掉！！

我连辞职信都想好了，你且看：

我的花死了

因为我没时间浇水啊

你看我是如此的繁忙

以至于我

仅仅是料理自己

就用尽了所有的闲暇

所以当我想起我的花时

我的花已经死了

这都是我的错

若是我少睡一会

也许我的花就不会死

可我竟是如此的繁忙

直到此刻才忽然想起

我的花死了

我很喜欢我的花

可如今只好带它回我的故乡

让它在一个有风和阳光的地方长眠

而我也会陪着它

大概也不回来了吧

我的花死了

不过幸好

只是我的花死了

……

//哈，什么生活？苟且罢了

展开全文 >>

多个对象调用同一方法

首先创建构造一个新的构造函数，用于创建一类对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
//创建Person构造函数
function Person(name,age,gender){
	this.name=name;
	this.age=age;
	this.gender=gender;
	//向对象添加一个方法
	this.sayName=function(){
		console.log(this.name);
	}
}
//通过构造函数Person创建对象
var  per1=new Person("RDY",21,"男")
var  per2=new Person("TOM",18,"男")

以上这种形式，由于是在这个构造函数内部添加的sayName方法,所以构造函数每执行一次就会创建一个新的sayName方法,且每个实例的sayName方法都是唯一的：

1
2
3
4
//调用方法
per1.sayName();
per2.sayName();
console.log(per1.sayName==per2.sayName);//false

虽然两个方法都是唯一的，但功能一样而我们只需要一个，因此这是是完全没有必要的。

然后是第二种方法创建形式：

1
2
3
4
5
6
7
8
9
10
11
12
//创建Person构造函数
function Person(name, age, gender) {
	this.name = name;
	this.age = age;
	this.gender = gender;
	//向对象添加一个方法
	this.sayName = fun;
}
//将sayName方法在全局中定义
function fun() {
	console.log(this.name);
}

第二种方式是在全局变量中定义，之后调用构造函数创建新的对象，每个对象的sayName方法都是全局作用域中定义的这个方法：

1
2
3
4
5
6
7
//通过构造函数Person创建对象
var per1 = new Person("RDY", 21, "男")
var per2 = new Person("TOM", 18, "男")
//调用方法
per1.sayName();
per2.sayName();
console.log(per1.sayName==per2.sayName);//true

虽然这个方式解决了sayName方法重复创建的问题，但同时也因为将方法定义在全局作用域中而污染了全局作用域的命名空间，若是之后新的函数命名与这个sayName方法重复将直接覆盖这个sayName方法，存在风险。

因此可以尝试第三种方式，由同一个构造函数创建的对象属于同一类对象，这些对象都带有一个隐含属性 __ proto__ ，其属性值保存着指向同一个原型的地址；即每个对象都有其原型，且同类对象共用一个原型；因此，可以将多个对象重复使用的属性或方法写入原型，既不会重复创建方法，也不会污染命名空间：

1
2
3
4
5
6
7
8
9
10
//创建Person构造函数
function Person(name, age, gender) {
	this.name = name;
	this.age = age;
	this.gender = gender;
}
//修改sayName方法写法,写入原型
Person.prototype.sayName = function() {
	console.log(this.name);
}

每创建一个函数，解析器都会向该函数中添加一个属性-prototype，prototype属性对应着一个对象，这个对象就是原型对象，通过prototype属性就能将方法或属性写入原型对象中

1
2
3
4
5
6
7
8
//通过构造函数Person创建对象
var per1 = new Person("Rdy", 18, "男");
var per2 = new Person("TOM", 20, "男");
//调用方法
per1.sayName();
per2.sayName();
console.log(per1.sayName==per2.sayName);//true
console.log(per1.__proto__.sayName);//true,确认此方法写入了原型

1

这时创建的对象由于共用原型对象，而方法写在原型对象中，因此它们访问的是同一个sayName方法，解决了产生的问题。

展开全文 >>

javascript-if语句

以下是一个简单的if语句情景应用：

1
2
3
4
当小明成绩为100时，奖励游戏机
当小明成绩为99-85时，奖励玩具车
当小明成绩为84-70时，奖励参考书
当小明成绩为70以下时，奖励大嘴巴子

首先按需求编写代码如下：

1
2
3
4
5
6
7
8
9
10
11
var score = +prompt("请输入学生成绩：（1-100）");//文本输入框

if (score == 100) {
	alert("建议奖励游戏机");
} else if (score < 100 && score >= 80) {
	alert("建议奖励玩具车");
} else if (score < 80 && score >= 60) {
	alert("建议奖励参考书");
} else {
	alert("建议奖励大嘴巴子");
}

然后按照更加严谨的思想，思考当用户输入的数值不符合0-100的要求值，应当增加相应提示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var score = +prompt("请输入学生成绩：（1-100）");//文本输入框
//增加一个if语句判断输入值是否合法
if (score > 100 || score < 0) {
	alert("输入值不合法");
} else {
	if (score == 100) {
		alert("建议奖励游戏机");
	} else if (score < 100 && score >= 80) {
		alert("建议奖励玩具车");
	} else if (score < 80 && score >= 60) {
		alert("建议奖励参考书");
	} else {
		alert("建议奖励大嘴巴子");
	}
}

进一步考虑，若用户输入的不是数字时而是字符串String时，类型转换为NaN，因此在第一个if条件表达式增加isNaN()进行判断；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var score = +prompt("请输入学生成绩：（1-100）");//文本输入框
//判断输入值是否合法
if (score > 100 || score < 0 || isNaN(score)) {
	alert("输入值不合法");
} else {
	if (score == 100) {
		alert("建议奖励游戏机");
	} else if (score < 100 && score >= 80) {
		alert("建议奖励玩具车");
	} else if (score < 80 && score >= 60) {
		alert("建议奖励参考书");
	} else {
		alert("建议奖励大嘴巴子");
	}
}

更进一步考虑，若用户未输入或输入空格，返回值为flase，转换成Number类型为0；若是想要拦截0，就要将第一个if条件表达式中 score<0 修改为 score<=0 ，或是增加score==false，抑或是将第四种方案改成 score<60&&score>0 ,但这会使得小明考0分时if语句无法正确执行：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var score = +prompt("请输入学生成绩：（1-100）");//文本输入框
//判断输入值是否合法
if (score > 100 || score < 0 || isNaN(score) || score == false) {
	alert("输入值不合法");
} else {
	if (score == 100) {
		alert("建议奖励游戏机");
	} else if (score < 100 && score >= 80) {
		alert("建议奖励玩具车");
	} else if (score < 80 && score >= 60) {
		alert("建议奖励参考书");
	} else {
		alert("建议奖励大嘴巴子");
	}
}

因此，考虑使用正则表达式限制输入文本

展开全文 >>

css图像精灵

在加载网页时，浏览器只会加载当前页面下所需的资源。

以设置一个按钮为例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">
	.btn:link{
		display: block;
		width: 30px;
		height: 30px;
		background-image: url(img/1.png);//加载静态时的图片
		background-repeat: no-repeat;
	}
	.btn:hover{
		background-image: url(img/2.png);//加载光标悬停时的图片
	}
	.btn:active{
		background-image: url(img/3.png);//加载激活后的图片
	}
</style>

按钮处于静态时，按钮样式为背景图片1（浏览器第一次加载）：

移动鼠标至按钮时处于hover状态，样式为背景图片2（浏览器第二次加载）：

按下按钮时处于active状态，样式为背景图片3（浏览器第三次加载）：

而hover状态下的资源，则会在激活时浏览器再次向后台发出申请后加载，这样不仅浪费了浏览器的缓存能力，再次加载资源所需的时间也将带给用户不好的体验。

因此我们可以采用css图像精灵，将所需图片资源进行整合成为一张图：

4

在需要相应资源时，通过移动图片的方式显示需要的内容；最重要的是加载所有的图片资源只需要向服务器发送一次请求，不仅能充分利用浏览器的缓存能力，还大幅提高了用户体验：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">
	.btn:link{
		display: block;
		width: 30px;
		height: 30px;
		background-image: url(img/4.png);//加载雪碧图
		background-repeat: no-repeat;
	}
	.btn:hover{
		background-position: -30px 0px;//移动位置以表现鼠标悬停样式
	}
	.btn:active{
		background-position: -60px 0px;//移动位置以表现点击激活样式
	}
</style>

需要注意的是，使用雪碧图需要准确计算移动图片位置时的像素值。

展开全文 >>

html高度塌陷与解决方法

在文档流中，父元素高度会被子元素的高度撑开，但若子元素浮动脱离文档流，就会导致父元素塌陷。

子元素浮动前：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box1 {
			border: 10px red solid;
		}
		.box2 {
			width: 100px;
			height: 100px;
			background-color: #0000FF;
		}
	</style>
</head>
<body>
	<div class="box1">
		<div class="box2"></div>
	</div>
</body>

1

子元素浮动后：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box1 {
			border: 10px red solid;
		}

		.box2 {
			width: 100px;
			height: 100px;
			background-color: #0000FF;
			float: left;
		}
	</style>
</head>
<body>
	<div class="box1">
		<div class="box2"></div>
	</div>
</body>

2

以下记录三种高度塌陷的解决方法，实用性由低到高：
方法一：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box1 {
			border: 10px red solid;
			overflow: auto;/* 开启页面隐含属性block formatting context,简称BFC;将元素元素的overflow设置为一个非visitable值 */
			zoom: 1;/* 在IE6中解决此问题:开启隐含属性Has layout,作用与BFC类似 */
		}
		.box2 {
			width: 100px;
			height: 100px;
			background-color: #0000FF;
			float: left;
	</style>
</head>
<body>
	<div class="box1">
		<div class="box2"></div>
	</div>
</body>

方法二：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box1 {
			border: 10px red solid;
		}
		.box2 {
			width: 100px;
			height: 100px;
			background-color: #0000FF;
			float: left;
		}
		.clear {
			clear: both;
		}
	</style>
</head>
<body>
	<div class="box1">
		<div class="box2"></div>
		<div class="clear"></div><!-- 在受浮动影响的父元素下添加一个空的子元素div,并开启清除浮动,这是W3C所推荐的方法 -->
	</div>
</body>

方法三：

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
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.box1 {
			border: 10px red solid;
		}
		.box2 {
			width: 100px;
			height: 100px;
			background-color: #0000FF;
			float: left;
		}
		.clearfix::after {
			content: "";
			display: block;
			clear: both;
		}/* 通过after伪类在元素最后添加一个空白格并转换成块元素，对其进行clear:both清除浮动，可解决高度塌陷且不会在页面中添加多余div */
		.clearfix {
			zoom: 1;/* 用于兼容IE6 */
		}
	</style>
</head>
<body>
	<div class="box1 clearfix">
		<div class="box2"></div>
	</div>
</body>

以上方法中，方法二为W3C推荐写法，但方法二会在html页面原有布局中增加一个div，并不一定是最好的解决办法。而方法三完全在css解决，我认为才是最合适的解决办法。

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

一只前端小透明