PTPTPT Blog

暑假夏令营记录

发表于 2016-08-15 | 分类于生活笔记

第一天

7月12号,我那天早上发了一条朋友圈, 早安呀,我的暑假. 寓意着夏令营的开始~ 哝,那天我是最早到的工一414那边的.然后,接下来的日子我几乎都是最晚到的而且压哨居多,哈哈.我有点背,从第一天开始嗓子痛,然后感冒了一个多星期.最后还是靠我的洪荒之力把感冒君从我的身体逼出.

在协同跟大家一起度过的第一个暑假生活

(这张图我们是在工一414上课.)
一开始小房间是没有空调的,然后过了不久,我们就装了.

呐,我挺开心的,又认识了一群有趣的人.前三个星期每天早上听课,大二的师兄师姐给我们培训,中午吃完饭回来理学馆玩几局英雄杀或者看下视频,然后午休.实话,在理学馆午休好不舒服,睡得别扭.要不是宿舍远,我会天天回宿舍的~.晚上也就看看书,学习新知识,写笔记. 第二个周六的晚上我们一起看了招魂,-.-bra说我们来看悬疑推理片,恩好的,然而这个是恐怖片,对于片中出现的那些现象都无法解释的.恩,所以bra最后腿毛被我们拔光了.在看片的时候,翔和果都很害怕的样子哈哈哈,一个拿着枕头,一个拿着玩偶挡自己的视线.这个周末也缺席了两位,因为大福和大脸之前早上在过来工作室这边的路上发生了车祸,受伤了,所以她们没来到.大福的脚受伤了,她也从此回家养猪蹄了~,大脸的脚和手也擦伤得蛮严重的.心疼她们.

大家平常就各忙各的,然后到了饭点就会一起去二饭吃饭,-.-,翔每天都是这么的开心,在二饭吃饭的时候经常笑得很逗比哈哈哈,有时叫外卖.中午留在理学馆的,都会到我们大一待的这个房间里面午休.-.-诞生了挺多黑照!?!?(有的图片来自bra之手)

哈哈哈

大家一起去南亭吃饭,喝糖水,一起玩UNO和狼人,说起玩狼人,等到后面再说.满满都是尴尬…

我们还去唱了一次K,哈哈.大家都 very 666.我也过了一下瘾,因为好久没唱K了.
不知不觉时间也过得挺快,PT焗饭也吃了好多好多次,我们到了最后一周做协同主页的时候了.这个主页由我们的设计师大人,光正还有小白兔负责设计.-.-呐,光正已经被我们用锋利的JQuery劈死了.不过我们得以靠小喵大腿完成那些比较复杂的动画.做这个协同主页,我们也学了很多东西.也体现了我们的团队协作.大家都很棒.大福在家也参与了我们这次任务,她是我们的远程合作伙伴.-.-愉快的一周过去了.我们的主页也差不多了.
然后我们那天晚上就在玩狼人.我主要任务还是当法官,帮大家组织游戏进行.哎呀,不过我记忆不太好.出了好多错误哈哈哈哈.我把果姐姐(那一把当守卫,要守卫的人忘了.然后好像狼人恰好杀到了,我又偷偷问了她一次哈哈.)-.-还有就是女娲被杀死的晚上,我问女巫,女巫请睁眼,今晚死的人是你,你救不救,然后大家都”哈哈哈哈哈”. 好吧哈哈,这种情况发生了两次哈哈哈.还有就是大毛和小白兔就是经常当狼人,然后一脸无辜,”没什么信息”,然后赢到了最后哈哈哈哈.翔,-.-也经常当狼人,不过他当狼人的时候,总是被我们投票出去-.-光正心机,狼人跳别的身份就是他开始带头的.

轰趴之旅

我们大家来到了一个别墅.恩,那天早上我…手机刚好关机然后闹铃没响,我睡到了中午12点多….然后手机一堆未接来电.我就没有跟大家一起吃午饭,我等到下午直接过去别墅那边了.

大脸,是我们的厨师.bra也是我们的厨师.毛也是我们的厨师,小白兔,也是我们的厨师.
主厨还是大脸.
我们不会煮的只负责吃,当然了,还有帮忙收拾一下吃完的残局.洗碗,收拾垃圾.
吃完饭就唱唱K,看看电影,玩玩桌面足球.然后大家就又一起愉快的去玩狼人杀了~

狼人杀充满欢乐哈哈哈,到后面就有点认真玩了~
光正总是无辜躺枪,经常被第一个票出去.博,是蛮会玩的,然后那天他当狼人,第一个杀了我,然后我是猎人我就顺便带走他,刚好他是狼人哈哈哈.bra就喜欢盲毒,不过一般都是毒果姐姐,哈哈.小猪和光正总是竞选警长然后好像没当过几次哈哈..心疼.不过我最心疼我自己,那天第二把当狼人,杀了小白兔,然后小白兔是先知,她验了我的身份,说我是狼…好吧.小白兔说什么大家一般都会相信,然后我…就..这样…无情地…被…投票投出去了.要是是别人当先知查我杀,我还可以反过来诬陷一把哈哈哈..不过是小白兔的话我就已经宣布GG了.大毛也因为当狼人的时候不太会演,所以她最后当了法官给我们主持.我当狼人那几把,消费了大家对我的信任,我感到抱歉哈哈,游戏而已哈哈哈.不能当真~~
大脸也用那些没用到的食材给我们做了夜宵.很满足~~有得吃有得玩

感受

感谢这个暑假,感谢师兄师姐们,感谢同级的小伙伴们~
大家都很随和,很nice,很开心认识大家这一群人,相处了小小的一段时间,未来还有更长的路要继续前行,加油.

CscwPage总结

发表于 2016-08-01 | 分类于项目总结

开发前的准备

在夏令营的最后一个星期，我们进行了这个协同主页的开发。开始之前，我们开了个会商量了一下，然后由大脸写那个评估文档，然后根据设计师的设计稿进行分工。拿到设计稿，博志根据设计师的要求（各个页面切换的效果）定了一个框架，我写了静态的页面，博志写了用于切换的js代码。我们大概的分好工，我写那个导航栏和小组介绍具体详情页面的代码。然后我们各自进行开发。我们也同java组商量那些接口问题。

利用了版本控制管理工具git进行多人协作

这也是我真正意义上的一次使用git，也学习了很多，因为不太熟悉，所以也是边学边用，一边看教程，一边学以致用。丰富了自己使用git的经验，也熟悉了多人协作的模式。利用git，可以更好地进行多人协同开发，提高了效率。

使用的框架/工具

bootstrap

我在bootstrap中文文档网学习了一下，然后尝试着利用bootstrap的栅格系统去写我负责的那个页面的整体框架布局。发现这个bootstrap的栅格系统是个蛮方便蛮好用的东西。其主要原理是把整个页面最多分成12列，然后实现的话主要还是给一个百分比的宽度。然后每一列都是浮动的。它分为4种不同屏幕分辨率的写法，有超小屏幕（小于768px），小屏幕（768px到992px），中等屏幕（992px到1200px），大屏幕（1200px）。自己开始写那个页面之前就先把那个页面的框架给描绘出来，先定好框架，直接用bootstrap写成响应式，一步到位。个人感觉这个框架挺好用。

animate.css

这次的动画效果我主要是用css3.根据设计师需要的动画效果，用到了animate.css。里面有很多动画效果。其原理是利用css3的动画，然后把这个动画写到一个类名上，然后利用JS来控制，就是addClass方法，把这个类名添加到你要实现动画的元素上。我没有直接引用一整个animate.css文件，而是去到animate.css的github上找到自己想要的动画的那个代码直接引用到自己的css中，因为我用到里面的动画也不多，所以这样可能会更好。

jquery

主要还是用jquery写需要的js代码。
也在小喵的帮助下学习了一个新东西。就是模拟操作。之前在书里也看过但是没用过，这次也用到了。

开发中遇到的问题和解决方法

bootstrap 会有许多默认的样式，有时候bootstrap里面的样式会破坏整个的效果，使得呈现的页面跟想要的页面不一样。我到谷歌浏览器的控制台查看然后利用权重值更改元素的css。它也会给你的元素添加一些默认的外边距呀内边距呀，我在做的时候都会跟设计稿有出入，所以我也另外利用css3的媒体查询，写了挺多元素的样式去覆盖掉bootstrap所添加的那些样式。
还有一个就是这个页面的整体框架问题，我觉得不是最优的，这个也是一开始没有仔细考虑清楚吧。希望以后能够仔细考虑后再确定整体的框架。
可能还有一些自己没发现的问题，也希望他人帮忙指出。

最后结尾

做这次的协同主页我们大家也踩了许多不大不小的坑，以后需要多注意，也感谢组内小伙伴的帮助和支持。一起加油。

JavaScript 继承的学习笔记

发表于 2016-07-26 | 分类于 JavaScript

我是结合慕课和 JS 高级程序设计这本书去学习继承这部分的内容的。在慕课《JavaScript 深入浅出》那一教程的 OOP（Object Oriented Programming 面向对象程序设计）章节。

原型链

首先我们了解原型链。在 ECMAScript 中描述了原型链的概念，并将原型链作为实现继承的主要方法。

function foo() {}
foo.prototype.z = 3
var obj = new foo()
obj.x = 1
obj.y = 2

这边我们创建一个 foo 构造函数，并创建了一个对象实例 obj，对象 obj 的内部有一内部属性[[prototype]] （跟图中的[[proto]]是同一个东西），该属性是一个指针，因为是用 new 命令实例化对象，我们来回顾下 new 命令在使用时进行的操作.

创建一个新的对象
为这个新建对象进行[[prototype]]连接
将 this 值绑定到这个新建对象上
如果函数没有返回其他对象就返回这个对象

执行 new 命令操作的第 2 步中，将对象 obj 的[[prototype]]属性，（它是一个指针）指向到其对应的原型对象 foo.prototype

foo.prototype 这个原型对象其内部也有一个[[prototype]]属性，指向 Object.prototype
我们可以用 isPrototypeOf()方法来确定对象之间是否存在这种关系

1 2	console.log(foo.prototype.isPrototypeOf(obj)) // true console.log(Object.prototype.isPrototypeOf(foo.prototype)) // true

我们用原型对象的 isPrototypeOf（）方法测试了 obj 和 foo.prototype，
对象实例 obj 内部有一个指针指向 foo.prototype 所以返回了 true
因为 foo.prototype 内部有一个指针指向 Object.prototype 所以返回了 true

Object.prototype 指向 null，这条原型链的尽头就是 Object.prototype
所以上图就是一个简单的完整的原型链~ 明确了原型链是什么之后，我们就来了解如何利用原型链实现继承。

实现继承

继承的本质在于重写原型对象，往往通过重写构造函数的原型对象去实现继承

实现继承的方法

利用原型链

1
2
3

//继承了Human  以下两种方式都可以实现继承
Person.prototype = new Human() //新建一个Human的实例  ，并且Human的实例也指向了Human.prototype  。  所以Person.prototype也指向了Human.prototype
Person.prototype = Object.creat(Human.prototype) //较为理想的方法，创建一个空对象，并且规定此新建对象指向的对象原型为Human.prototype

1	Object.create(proto, [ propertiesObject ]） //语法

Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象。
参数
proto ：一个对象，作为新建对象的原型
propertiesObject ：可选。该参数对象是一组属性与值，
举个例子

function Human() {}
Human.prototype = {
  constructor: Human,
  a: 99,
  b: 100,
}
function Person() {
  this.type = false
}
Person.prototype = new Human() //Person 继承了Human
Person.prototype.getValue = function() {
  return this.a
}
var person1 = new Person()
var person2 = new Person()
console.log(person1.a)
console.log(person2.getValue())
//首先从person2本身需找此方法，找不到再从person2的原型Person.prototype查找getValue方法，
//转而寻找Person.prototype所继承的Human原型对象，找到并引用。

利用原型链的确可以，但是我的上一篇笔记有说过，原型模式的问题是当构造函数含有引用类型值（如数组）的属性时，修改这种属性的值，所有实例共享属性，所有实例也会发生变化。这显然不是我们想要的

canvas元素的学习笔记

发表于 2016-07-26 | 分类于 HTML 5

什么是 canvas

HTML5 新增了 canvas 元素，专门用来绘制图形，在页面上放置一个 canvas 元素，相当于在页面上放置一块”画布”，画布是一个矩形区域，你可以在其中进行图形的绘制。canvas 元素放在 html 页面中，跟其他标签没太大区别。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 canvas 元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Canvas~</title>
</head>
<body>
	<canvas id="mycanvas" width="200" height="200"></canvas>
</body>
</html

canvas 需指定 ID、width、height 三个属性值

绘制矩形

canvas 本身是没有绘制能力的，需要通过 JavaScript 来进行绘制。
用 canvas 元素绘制图形时，步骤如下

取得 canvas 元素（创建 canvas 元素）

1	var canvas = document.getElementById('mycanvas')

取得上下文对象

1	var context = canvas.getContext('2d')

利用 canvas 对象的 getContext 方法来获得图形上下文，将参数设为“2d”,不能够设置为 3d 或 4d。

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

设定绘图样式

1 2	context.fillStyle = 'AAA' //填充的样式,填入填充的颜色值 context.strokeStyle = 'FF0000' //图形边框的样式,填入边框的颜色值

绘制图形

1 2	context.fillRect(0, 0, 50, 50) // 填充矩形 context.strokeRect(0, 0, 50, 50) //绘制矩形边框

x 指矩形起点的横坐标，y 指矩形起点的纵坐标，width 指矩形的长度，height 指矩形的高度

1	context.clearRect(x,y,width,height)

clearRect ，该方法可以擦除指定的矩形区域的图形，使得该区域中的颜色全部变为透明。

设定绘图样式必须在绘制图形之前，如果在绘制图形之后的话，绘图样式会使用默认值，而不是我们设定的那个值

1
2
3

context.fillRect(0, 0, 50, 50)
context.fillStyle('FF0000')
//最终图形显示的填充颜色值是默认的黑色而不是我们设定的红色（#FF0000）

使用路径

绘制圆形

开始创建路径
创建圆形路径
路径创建完成后，关闭路径
设定绘制样式，调用绘制方法，绘制路径

var canvas = document.getElmentById('mycanvas')
var context = canvas.getContext('2d')

context.beginPath() //创建路径
context.arc(50, 50, 50, 0, Math.PI * 2, true) //创建圆形路径
context.closePath() //关闭路径
context.fillStyle = 'rgba(100,100,100,0.2)' //填充样式，给定颜色值
context.strokeStyle = '#000' //绘制图形边框样式，给定颜色值
context.fill() //因为路径已经确定了图形的大小，所以不用再使用参数去指定图形的大小,也可以使用stroke 方法

如果没有关闭路径，创建的路径会永远保留着，如果进行多次绘制，则创建的图形会一次又一次地进行重叠。

var canvas = document.getElementById('mycanvas')
var context = canvas.getContext('2d')

context.fillStyle = '#EEEEFF'
context.fillRect(0, 0, 500, 500)
for (var i = 0; i < 10; i++) {
  context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true)
  context.fillStyle = 'rgba(100,100,100,0.2)'
  context.fill()
}

如图

绘制直线

moveTo (x,y) 将光标移动到指定坐标点，绘制直线的时候以这个坐标点为起点
lineTo (x,y) 以 moveTo 方法设定的点为起点，到自己的参数中指定的点之间绘制一条直线 x 表示直线终点的横坐标，y 表示终点纵坐标

var canvas = document.getElementById('mycanvas')
var context = canvas.getContext('2d')
context.beginPath()
context.moveTo(20, 20)
context, lineTo(50, 100)
context.lineWidth = 3 //设置直线的宽度   ps：需要在stroke前面调用
context.stokeStyle = '#FF0000'
context.stroke() //绘制直线

绘制渐变图形

绘制线性渐变

使用图形上下文的 createLinearGradient 方法
context.createLinearGradient(xStart, yStart, xEnd, yEnd);
然后再使用 LinearGradient 对象的 addColorStop 方法
addColorStop(offset, color);
offset 为设定的颜色离开渐变起始点的偏移量，范围为 0~1

1
2
3

var g1 = context.createLinearGradient(0, 0, 200, 200);
g1.addColorStop(0,"#FF0000"）;  //起点偏移量为0，颜色为红色
g1.addColorStop(1,"#FFF"); //终点偏移量为1，颜色为白色

绘制径向渐变

使用图形上下文的 createRadiaGradient 方法
context.createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd);
xStart 为渐变开始圆的圆心横坐标，yStart 为圆心纵坐标
同理 xEnd，yEnd 为渐变结束圆的圆心横纵坐标。
radiusStart 为渐变开始圆的半径，radiusEnd 为渐变结束圆的半径

var canvas = document.getElementById('mycanvas')
var context = canvas.getContext('2d')
var g2 = context.createRadialGradient(40, 40, 50, 500, 500, 300)
g2.addColorStop(0, 'blue')
g2.addColorStop(0.8, 'red')
g2.addColorStop(1, 'rgba(100,100,105,0.5)')
context.fillStyle = g2
context.fillRect(0, 0, 500, 500)

绘制变形图形

坐标变换

平移 context.translate(x,y);
扩大 context.scale(x,y) x 为水平方向扩大的放大倍数，y 是垂直方向的放大倍数
旋转 context.rotate(angle); angle 是指旋转的角度
利用这个坐标变换我们可以做很多好玩的图形。

var canvas = document.getElementById('mycanvas')
var context = canvas.getContext('2d')

context.fillStyle = '#888'
context.fillRect(0, 0, 500, 500)
context.translate(250, 100)
context.fillStyle = 'rgba(255,0,0,0.25)'
for (var i = 0; i < 60; i++) {
  context.translate(25, 25)
  context.scale(0.93, 0.95)
  context.rotate(Math.PI / 10)
  context.fillRect(0, 0, 150, 40)
}

未完待续…

hello world

发表于 2016-07-26

JS高级程序设计 6.2 创建对象的笔记

发表于 2016-07-26 | 分类于 JavaScript

原型模式

之前对原型这部分的内容感觉很懵,所以做笔记整理一下思路.

阅读全文 »