它的名字是: Canvas Particle

代码和效果预览

最初的想法:

在canvas画出随机的点并计算点之间的距离连线

1
'use strict'
2
3
class Ball {
4
	constructor(x, y, xSpeed, ySpeed) {
5
	    this.x = x;
6
	    this.y = y;
7
	    this.xSpeed = xSpeed;
8
	    this.ySpeed = ySpeed;
9
	 }
10
11
	 draw() {
12
	 	//TODO 画出点
13
	 	//TODO 循环这个点与其他点的距离并连线
14
	 }
15
16
	 update() {
17
	 	this.x += this.xSpeed;
18
		this.y += this.ySpeed;
19
		this.xSpeed *= (this.x >= canvas.width || this.x <= 0) ? -1 : 1;
20
		this.ySpeed *= (this.y >= canvas.height || this.y <= 0) ? -1 : 1;
21
		this.draw();
22
	 }
23
}
24
25
const animate = () => {
26
	requestAnimationFrame(animate);
27
	// TODO
28
}
29
30
animate();

实际效果不理想,太卡了. 可能是因为在循环计算距离时会不停的创建对象(待确认).

修改之后:

1
'use strict'
2
3
let dots = [];
4
for (let i=0; i<200; i++) {
5
	dots.push({
6
		x: Math.random() * canvas.width,
7
		y: Math.random() * canvas.height,
8
		xSpeed: getRandomNumber(),
9
		ySpeed: getRandomNumber(),
10
		max: 6000
11
	});
12
}
13
14
const animate = () => {
15
	requestAnimationFrame(animate);
16
	ctx.clearRect(0, 0, canvas.width, canvas.height);
17
	for (let dot of balls) {
18
		dot.x += dot.xSpeed;
19
		dot.y += dot.ySpeed;
20
		dot.xSpeed *= (dot.x >= canvas.width || dot.x <= 0) ? -1 : 1;
21
		dot.ySpeed *= (dot.y >= canvas.height || dot.y <= 0) ? -1 : 1;
22
		ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1);
23
		
24
		for (let dot2 of balls) {
25
			//TODO 计算距离并画出连线
26
		}
27
	}
28
}
29
30
animate();

之后改成了Json对象+函数的形式,效果不错.

转载 如何写出无法维护的代码

原文链接: 酷壳-如何写出无法维护的代码

程序命名

  • 容易输入的名字。比如:Fred,asdf
  • 单字母的变量名。比如:a,b,c, x,y,z(陈皓注:如果不够用,可以考虑a1,a2,a3,a4,….)
  • 有创意地拼写错误。比如:SetPintleOpening, SetPintalClosing。这样可以让人很难搜索代码。
  • 抽象。比如:ProcessData, DoIt, GetData… 抽象到就跟什么都没说一样。
  • 缩写。比如:WTF,RTFSC …… (陈皓注:使用拼音缩写也同样给力,比如: BT,TMD,TJJTDS)
  • 随机大写字母。比如:gEtnuMbER..
  • 重用命名。在内嵌的语句块中使用相同的变量名有奇效。
  • 使用重音字母。比如:int ínt(注:第二个 ínt不是int)
  • 使用下划线。比如:, _, ___。
  • 使用不同的语言。比如混用英语,德语,或是中文拼音。
  • 使用字符命名。比如:slash, asterix, comma…
  • 使用无关的单词。比如:god, superman, iloveu….
  • 混淆l和1。字母l和数字1有时候是看不出来的。

伪装欺诈

  • 把注释和代码交织在一起
1
for(j=0; j<array_len; j+ =8)
2
{
3
    total += array[j+0 ];
4
    total += array[j+1 ];
5
    total += array[j+2 ]; /* Main body of
6
    total += array[j+3]; * loop is unrolled
7
    total += array[j+4]; * for greater speed.
8
    total += array[j+5]; */
9
    total += array[j+6 ];
10
    total += array[j+7 ];
11
}
  • 隐藏宏定义。如:#define a=b a=0-b,当人们看到a=b时,谁也想不到那是一个宏。

  • 换行。如下所示,下面的示例使用搜索xy_z变得困难。

1
#define local_var xy\
2
_z // local_var OK
  • 代码和显示不一致。比如,你的界面显示叫postal code,但是代码里确叫 zipcode.

  • 隐藏全局变量。把使用全局变量以函数参数的方式传递给函数,这样可以让人觉得那个变量不是全局变量。

  • 使用同意词。如:

1
#define xxx global_var // in file std.h&nbsp;
2
#define xy_z xxx // in file ..\other\substd.h&nbsp;
3
#define local_var xy_z // in file ..\codestd\inst.h
  • 使用相似的变量名。如:单词相似,swimmer 和 swimner,字母相似:ilI1| 或 oO08。parselnt 和 parseInt, D0Calc 和 DOCalc。还有这一组:xy_Z, xy__z, _xy_z, _xyz, XY_Z, xY_z, Xy_z。

  • 重载函数。使用相同的函数名,但是其功能和具体实现完全没有关系。

  • 操作符重载。重载操作符可以让你的代码变得诡异,感谢CCTV,感谢C++。这个东西是可以把混乱代码提高到一种艺术的形式。比如:重载一个类的 ! 操作符,但实际功能并不是取反,让其返回一个整数。于是,如果你使用 ! ! 操作符,那么,有意思的事就发生了—— 先是调用类的重载 ! 操作符,然后把其返回的整数给 ! 成了 布尔变量,如果是 !!! 呢?呵呵。

  • #define。看过本站那些混乱代码的文章,你都会知道宏定义和预编译对于写出不可读的代码的重大意义。不过,一个具有想像力的东西是——在头文件中使用预编译来查看这个头文件被include了几次,而被include不同的次数时,其中的函数定义完全不一样。

1
#ifndef DONE
2
#ifdef TWICE
3
// put stuff here to declare 3rd time around
4
void g(char* str);
5
#define DONE
6
#else // TWICE
7
#ifdef ONCE
8
// put stuff here to declare 2nd time around<
9
void g(void* str);
10
#define TWICE
11
#else // ONCE
12
// put stuff here to declare 1st time around
13
void g(std::string str);
14
#define ONCE
15
#endif // ONCE
16
#endif // TWICE
17
#endif // DONE

文档和注释

  • 在注释中撒谎。你不用真的去撒谎,只需在改代码的时候不要更新注释就可以了。
  • 注释明显的东西。比如:/* add 1 to i */。(参看“五种应该避免的注释”)
  • 只注释是什么,而不是为什么
  • 不要注释秘密。如果你开发一个航班系统,请你一定要保证每有一个新的航班被加入,就得要修改25个以上的位置的程序。千万别把这个事写在文档中。
  • 注重细节。当你设计一个很复杂的算法的时候,你一定要把所有的详细细设计都写下来,没有100页不能罢休,段落要有5级以上,段落编号要有500个以上,例如:1.2.4.6.3.13 – Display all impacts for activity where selected mitigations can apply (short pseudocode omitted). 这样,当你写代码的时候,你就可以让你的代码和文档一致,如:Act1_2_4_6_3_13()
  • 千万不要注释度衡单位。比如时间用的是秒还是毫秒,尺寸用的是像素还是英寸,大小是MB还是KB。等等。另外,在你的代码里,你可以混用不同的度衡单位,但也不要注释。
  • Gotchas。陷阱,千万不要注释代码中的陷阱。
  • 在注释和文档中发泄不满。(参看本站的“五种应该避免的注释”)

程序设计

  • Java Casts。Java的类型转型是天赐之物。每一次当你从Collection里取到一个object的时候,你都需要把其转回原来的类型。因些,这些转型操作会出现在N多的地方。如果你改变了类型,那么你不一定能改变所有的地方。而编译器可能能检查到,也可能检查不到。
  • 利用Java的冗余。比如:Bubblegum b = new Bubblegom(); 和 swimmer = swimner + 1; 注意变量间的细微差别。
  • 从不验证。从不验证输入的数据,从不验证函数的返回值。这样做可以向大家展示你是多么的信任公司的设备和其它程序员。
  • 不要封装。调用者需要知道被调用的所有的细节。
  • 克隆和拷贝。为了效率,你要学会使用copy + paste。你几乎都不用理解别人的代码,你就可以高效地编程了。(陈皓注:Copy + Paste出来的代码bug多得不能再多)
  • 巨大的listener。写一个listener,然后让你的所有的button类都使用这个listener,这样你可以在这个listener中整出一大堆if…else…语句,相当的刺激。
  • 使用三维数组。如果你觉得三维还不足够,你可以试试四维。
  • 混用。同时使用类的get/set方法和直接访问那个public变量。这样做的好处是可以极大的挫败维护人员。
  • 包装,包装,包装。把你所有的API都包装上6到8遍,包装深度多达4层以上。然后包装出相似的功能。
  • 没有秘密。把所有的成员都声明成public的。这样,你以后就很难限制其被人使用,而且这样可以和别的代码造成更多的耦合度,可以让你的代码存活得更久。
  • 排列和阻碍。把drawRectangle(height, width) 改成 drawRectangle(width, height),等release了几个版本后,再把其改回去。这样维护程序的程序员们将不能很快地明白哪一个是对的。
  • 把变量改在名字上。例如,把setAlignment(int alignment)改成,setLeftAlignment, setRightAlignment, setCenterAlignment。
  • Packratting。保留你所有的没有使用的和陈旧的变量,方法和代码。
  • That’s Final。Final你所有的子结点的类,这样,当你做完这个项目后,没有人可以通过继承来扩展你的类。java.lang.String不也是这样吗?
  • 避免使用接口。在java中,BS接口,在C++中BS使用虚函数。
  • 避免使用layout。这样就使得我们只能使用绝对坐标。如果你的老大强制你使用layout,你可以考虑使用GridBagLayout,然后把grid坐标hard code.
  • 环境变量。如果你的代码需要使用环境变量。(getenv() – C++ / System.getProperty() – Java ),那么,你应该把你的类的成员的初始化使用环境变量,而不是构造函数。
  • 使用Magic number。参看《Linux一个插曲》。
  • 使用全局变量。1)把全局变量的初始化放在不同的函数中,就算这个函数和这个变量没有任何关系,这样能够让我们的维护人员就像做侦探工作一样。2)使用全局变量可以让你的函数的参数变得少一些。
  • 配置文件。配置文件主要用于一些参数的初始化。在编程中,我们可以让配置文件中的参数名和实际程序中的名字不一样。
  • 膨胀你的类。让你的类尽可能地拥有各种臃肿和晦涩的方法。比如,你的类只实现一种可能性,但是你要提供所有可能性的方法。不要定义其它的类,把所有的功能都放在一个类中。
  • 使用子类。面向对象是写出无法维护代码的天赐之物。如果你有一个类有十个成为(变量和方法)你可以考虑写10个层次的继承,然后把这十个属性分别放在这十个层次中。如果可能的话,把这十个类分别放在十个不同的文件中。

混乱你的代码

  • 使用XML。XML的强大是无人能及的。使用XML你可以把本来只要10行的代码变成100行。而且,还要逼着别人也有XML。(参看,信XML得永生信XML得自信
  • 混乱C代码。在《如何加密源代码》中已经说过一些方法了,这里再补充一些。
  • 使用不同的进制。比如:10 和010不是一样的。再比如:array = new int[]{ 111, 120, 013, 121,};
  • 尽量使用void*。然后把其转成各种类型
  • 使用隐式的转型。C++的构造函数可以让你神不知鬼不觉得完成转型。
  • 分解条件表达式。如:把 a==100分解成,a>99 && a<101
  • 学会利用分号。如:if ( a );else;{ int d; d = c;}
  • 间接转型。如:把double转string,写成new Double(d).toString() 而不是 Double.toString(d)
  • 大量使用嵌套。一个NB的程序员可以在一行代码上使用超过10层的小括号(),或是在一个函数里使用超过20层的语句嵌套{},把嵌套的if else 转成 [? :] 也是一件很NB的事。
  • 使用C的变种数组。myArray[i] 可以变成*(myArray + i) 也可以变成 *(i + myArray) 其等价于 i[myArray]。再看一个函数调用的示例,函数声明:int myfunc(int q, int p) { return p%q; } 函数调用myfunc(6291, 8)[Array];
  • 长代码行。一行的代码越长越好。这样别人阅读时就需要来来回回的
  • 不要较早的return。不要使用goto,不要使用break,这样,你就需要至少5层以上的if-else来处理错误。
  • 不要使用{}。不要在if else使用{},尤其是在你重量地使用if-else嵌套时,你甚至可以在其中乱缩进代码,这样一来,就算是最有经验的程序员也会踩上陷阱。
  • 使用宏定义。宏定义绝对是混乱C/C++代码的最佳利器。参看 老手是这样教新手编程的
  • 琐碎的封装。比较封装一个bool类,类里面什么都做,就是一个bool.
  • 循环。千万不可用for(int i=0; i<n; i++)使用while代替for,交换n和i,把<改成<=,使用 i–调整步伐 。

测试

  • 从不测试。千万不要测试任何的出错处理,从来也不检测系统调用的返回值。
  • 永远不做性能测试。如果不够快就告诉用户换一个更快的机器。如果你一做测试,那么就可能会要改你的算法,甚至重设计,重新架构。
  • 不要写测试案例。不要做什么代码覆盖率测试,自动化测试。
  • 测试是懦夫行为。一个勇敢的程序员是根本不需要这一步的。太多的程序太害怕他们的老板,害怕失去工作,害怕用户抱怨,甚至被起诉。这种担心害怕直接影响了生产力。如果你对你的代码有强大的信心,那还要什么测试呢?真正的程序员是不需要测试自己的代码的。

其它

  • 你的老板什么都知道。无论你的老板有多SB,你都要严格地遵照他的旨意办事,这样一来,你会学到更多的知识如何写出无法维护的代码来的。
  • 颠覆Help Desk。你要确保你那满是bug的程序永远不要被维护团队知道。当用户打电话和写邮件给你的时候,你就不要理会,就算要理会,让用户重做系统或是告诉用户其帐号有问题,是标准的回答。
  • 闭嘴。对于一些像y2k这样的大bug,你要学会守口如瓶,不要告诉任何人,包括你的亲人好友以及公司的同事和管理层,这样当到那一天的时候,你就可以用这个bug挣钱了。
  • 忽悠。你会学会忽悠,就算你的代码写得很烂,你也要为其挂上GoF设计模式的标签,就算你的项目做得再烂,你也要为其挂上敏捷的标签,只有学会像中国Thoughtworks的咨询师那样去忽悠,你才能学会更炫更酷的方法,让整个团队和公司,甚至整个业界都开始躁动,这样才能真正为难维护的代码铺平道路。

这个文档中还有很多很多,实在是太TMD强大了,大家自己去看看吧。有精力有能力的朋友不妨把其翻译成中文。

总之,我们的口号是——

Write Everywhere, Read Nowhere

前端组件 Skeleton Screen

写作动力来自于知乎专栏: 这个控件叫什么 中的 这个控件叫:Skeleton Screen/加载占位图

效果预览

这里主要用到的是liner-gradientbackground-position

使用linear-gradient生成一个渐变背景:

1
linear-gradient(90deg, red 25%, yellow 37%, red 63%)

linear-gradient(90deg, red 25%, yellow 37%, red 63%)

使用红色和黄色的原因是因为颜色比较清晰方便测试,正常使用可以替换为:

1
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);

想了解更多linear-gradient 的用法? 请阅读你真的理解CSS的linear-gradient, 文章详细解释了linear-gradient的一些工作细节并在文末提供了一个调整linear-gradient渐变效果的小工具, 上图出自于此。

将渐变容器的bcakground-size定义为 400%, 100%

1
background-size: 400% 100%;

因为这个时候背景比容器大(背景宽度为 容器宽度 * 400%),当background-position的值从100%递减到0%时,会有这样的效果:

background-position: 100%, background-position: 0%

然后通过animation不断播放这个动画

1
@keyframes loadding
2
	0%
3
		background-position: 100% 50%
4
5
	100%
6
		background-position: 0 50%	
7
8
#demo
9
	height: 50px
10
	width: 100%
11
	background: linear-gradient(90deg, red 25%, yellow 37%, red 63%)
12
	background-size: 400% 100%
13
	animation: loadding 1.2s ease infinite

这样就实现了一个简单的Skeleton Screen.

Css Transition

效果预览

Transition

transition 属性是 transition-propertytransition-durationtransition-timing-functiontransition-delay 的一个简写属性。可以为一个元素在不同状态切换时定义不同的过渡效果。包括不同的伪类之间的切换,像是:hover, :active 。或者通过JavaScript实现的状态变化. 使用transition可以使页面操作更平滑.

transition-property

指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画,其它属性仍如通常那样瞬间变化。

transition-duration

指定过渡的时长。或者为所有属性指定一个值,或者指定多个值,为每个属性指定不同的时长。

transition-timing-function

img
指定一个函数,定义属性值怎么变化。缓动函数 Timing functions 定义属性如何计算。多数 timing functions 由四点定义一个 bezier 曲线。也可以从 Easing Functions Cheat Sheet 选择缓动效果。

transition-delay

指定延迟,即属性开始变化时与过渡开始发生时之间的时长。

简写语法:

1
div {
2
    transition: <property> <duration> <timing-function> <delay>;
3
}

检测Transition是否完成

当过渡完成时触发一个事件,在符合标准的浏览器下,这个事件是 transitionend, 在 WebKit 下是 webkitTransitionEnd. 详情查看页面底部的兼容性表格。 transitionend 事件提供两个属性:

  • propertyName

    字符串,指示已完成过渡的属性。

  • elapsedTime

    浮点数,指示当触发这个事件时过渡已运行的时间(秒)。这个值不受 transition-delay 影响。

照例可以用 element.addEventListener() 方法来监听这个事件:

1
el.addEventListener("transitionend", updateTransition, true);

当属性值列表长度不一致时

transition-property 的值列表长度为标准,如果某个属性值列表长度短于它的,则重复其值以长度一致, 例如:

1
div {
2
	transition-property: opacity, left, top, height;
3
	transition-duration: 3s, 5s;
4
}

将按下面这样处理

1
div {
2
	tarnsition-property: opacity, left, top. height;
3
	transition-duration: 3s, 5s, 3s, 5s;
4
}

类似地,如果某个属性的值列表长于 transition-property 的,将被截短。 例如:

1
div {
2
  transition-property: opacity, left;
3
  transition-duration: 3s, 5s, 2s, 1s;
4
}

将按下面这样处理:

1
div {
2
  transition-property: opacity, left;
3
  transition-duration: 3s, 5s;
4
}

###

Transform

translate() 变换函数通过 x 向量和 y 向量移动元素 (i.e. xnew = xold + , ynew = yold +). 如果 y 向量没有被提供,那么默认为 0

scale() 变换函数通过 xy指定一个 等比例放大缩小 操作。如果 y 没有被提供,那么假定为等同于 x

Transition 参考文档
Tranform 参考文档

实现图片拖拽上传

效果预览

拖拽相关的事件

Event On Event Handler Fires when…
drag ondrag 当拖动元素或选中的文本时触发。
dragend ondragend 当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键)。
dragenter ondragenter 当拖动元素或选中的文本到一个可释放目标时触发。
dragexit ondragexit 当元素变得不再是拖动操作的选中目标时触发。
dragleave ondragleave 当拖动元素或选中的文本离开一个可释放目标时触发。
dragover ondragover 当元素或选中的文本被拖到一个可释放目标上时触发(每100毫秒触发一次)。
dragstart ondragstart 当用户开始拖动一个元素或选中的文本时触发。
drop ondrop 当元素或选中的文本在可释放目标上被释放时触发。

1: 当从操作系统向浏览器中拖动文件时,不会触发 dragstartdragend 事件。

2: 使用 e.target.files 来获取普通上传的文件,使用 e.dataTransfer.files获取拖拽上传的文件。

3: Event对象的preventDefault() 方法用来阻止事件的默认操作,例如当我们将文件拖拽到浏览器窗口中时,浏览器默认会在当前页打开这个文件。可以调用event.preventDefault();阻止它。还有<button type="submit" /> 等。

FileReader

FileReader 对象运行js异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 FileBlob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个Input元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

####事件处理

FileReader.onabort 文件读取被中断.

FileReader.onerror 文件读取错误

FileReader.onload 文件读取完成

FileReader.onloadstart 开始读取

FileReader.onloadend 读取结束

Filereader.onprogress 读取Bold对象时触发, 可以用来做进度条

File继承自Bold, 因为 FileReader 继承自EventTarget,所以所有这些事件也可以通过addEventListener方法使用。

###本文参考文档: MDN web docs