从绘画角度理解:编程思维之结构化编程

大家好,这篇文章主要面向没有学习过编程或者学习编程不久的人,用几个比较形象的例子来介绍有关编程思维方面的内容。

例子1:
如果你要计算:两个数的和,你需要的是两个数分别的值。比如:a=1, b=100。那么他们的和就是a+b。
如果用编程语句来表达就是:
function sum($a, $b){
return $a+$b;
}
这就是一个简单的函数,函数的作用是计算2个数的和。在你代码的任何地方,你都可以使用这个函数,来计算2个值的和。
调用的方法就是:sum($a, $b)。你需要的就是定义$a = 1; $b=100(计算机智能的地方就在于,你可以给他任何数值,它就可以返回给你他们的和)。然后函数就会自动返回这2个数的和。

上面的例子非常简单,可能你会觉得这个太简单了,我不用计算机也可以计算出来!但是假如是计算一个圆的面积呢?面积公式是(π*r*r),这个就可以提现计算机的作用了。你只需要传入一个圆的半径大小给一个求面积的函数,它就可以给你计算出这个圆的面积。

这个例子可能非常的简单,但是足以说明,计算机非常擅长计算,人们只需要给他一些数值,它就可以在极短的时间内返回计算的结果给你,哪怕你的计算过程很复杂,都是如此,而且不会出错。

例子2:
回到有关编程的话题。我们引入一个实际编程工作当中的一个案例。实现一个验证码,用于注册或者登陆功能,当用户输入正确的验证码以后,才可以成功的登录,目的是防止机器注册。

我们把验证码进行分解,实际上它就没有我们看上去那么的神奇,也是有规律的。
01.只有背景色的验证码;
02.加入了干扰字符的验证码;
03.加入了干扰线的验证码;
验证码的实现过程
这里简单的解释一下验证码的实现步骤:
第一步:准备好一张画布;
第二步:画背景色(你需要准备背景的颜色,而且每次的颜色可以不一样);
第三步:写上随机的英文字符或中文字符,数字等(你需要准备这些随机的字符,使用一个类似随机生成字符的函数即可)
第四步:你可以选择加入一些干扰的点,或者干扰的随机字符(你需要准备的是干扰的点的随机坐标,干扰的点的颜色、或者是字符)
第五步:你可以选择制造一些干扰的线(你需要准备干扰线的数量,每条干扰线的起始和终点坐标)

最后一步:生成一张验证码图片,并显示在浏览器上。

第一步的代码:
$image = imagecreatetruecolor($width, $height);
参数:画布宽度;高度
返回结果:画布资源

第二步的代码:
imagefill($image, $x, $y, $color);
参数:第一步创建的画布资源;填充的坐标X,坐标Y,颜色;
操作:给画布填充了背景色

第三步:在画布上写上随机字符
imagettftext($image, $size, $angle, $x, $y, $color, $fontfile, $text);
参数说明:
$image:画布
$size:字体大小
$angle:字符旋转的角度
$x:字符坐标X
$y:字符坐标Y
$color:画笔颜色
$fontfile:字符的字体
$text:字符(使用另外的函数随机生成1个字符)

一般如果你需要生成4个字符的验证码,就是上面的步骤循环4步,每次的X坐标往右移动1个字符距离。Y坐标保持不变。每次的角度可以随机生成,看看每个字符是不是角度不一样了。每次画笔的颜色也可以不同,是不是每个字符的颜色不一样了。所以生成的字符效果就如同下图所示:

verfiy3

第四步:画点,随机取坐标
imagesetpixel($image, $x, $y, $color)
参数说明:
$image: 画布
$x:点的坐标X
$y: 点的坐标y
$color: 点的颜色

第五步:画干扰线
imageline($image, $x1, $y1, $x2, $y2, $color)
参数说明:
$image: 画布
$x1, $y1: 线的起点坐标X,Y
$x2, $y2: 线的终点坐标X,Y
$color: 线的颜色
效果如图:

随机线条


最后一步:
imagejpeg($image);
生成图像

通过验证码的生成的讲解,总结如下:
1、每一个步骤,都由一个函数执行,按照一定的步骤的发送给计算机一些执行指令。就好像绘画里面,我们得先画轮廓,再依次画人物的五官(眼睛,鼻子,耳朵,嘴巴……),再描绘一些细节,最后上色。绘画的过程
2、每一个函数的执行,都需要提供一些参数。就好像你要求2个数的总和,首先你得提供两个数。程序员所需要做的就是在每一个步骤,使用正确的函数,并且传递正确的参数。比如我需要画一条线,那么你就找到画线的方法(程序里面叫函数)imageline(),然后提供正确的参数:参数一般都是数值或者字符串。比如画线你需要准备:线的2端的坐标。就如:imageline($image, $x1, $y1, $x2, $y2, $color)。$color代表颜色。如果你需要画30条线,那么就重复执行这个画线的步骤(在计算机里,这叫做循环,计算机最擅长的事情就是判断真假、和循环执行)。
3、每一个步骤所使用的函数,都是编程语言已经提供好的方法。就如同计算2个数值的和一样,为我们准备好了!像这样的函数,PHP编程语言为我们准备了数千个!常用的有200多个,你想开发一般的网站都可以够用了!

那么有人问了,是否我们每次要实现验证码都需要这么复杂呢?当然不是,程序员其实也是很懒的,既然我们已经知道怎么实现验证码了,那么我们就可以把这个验证码的代码,封装起来形成1个更大的函数。那么我们要实现验证码的时候,就像求2个数的和一样简单了,方法实际上是一样的。

比如实现的代码语法就是:function_name();
(语法说明:function_name就是我们给生成验证码这个功能取得一个名字,()括号里面就是填入参数的地方,不同的参数之间要使用’,’分隔开)

实现方式如下:
生成验证码(‘4个字符’,’颜色随机’,’背景色随机’,’有干扰线条’);
当你在程序当中调用这个方法,提供一些参数,它就可以生成一个验证码。

所以你发现:实现验证码是一个由更多的系统函数,按照一定的逻辑过程组合在了一起,来生成了一个更复杂的功能的过程

我们可以想象一下,程序员的工作就是按照一定的业务逻辑,正确的使用函数的方式(提供这个函数需要的各个参数。),或者把一些函数封装成一个功能更大的函数,而这些函数是可以重复使用提升效率(等同于你不需要每次从0开始,你甚至可以借用,前人已经开发好的函数,或者自己之前写好的函数)来一步步的达到自己想要实现的功能(就好像绘画的过程,先画轮廓,再画五官,最后描绘细节)。

以上,就是有关编程思维的一些解释。限于时间和经验有限,可能描述的还不是非常便于理解,在计算机的专业术语上,函数的这种调用过程有一个专业的名字解释,叫做结构化编程

最后我想说的就是,正确的编程思维,会帮助你更好的理解程序代码,有助于写出更加清晰的代码,和理解别人写的代码,从而学会编程。反之,就如同绘画不是从轮廓、五官、细节,而是至上而下,最终可能画出一副很奇怪的画,毕竟我们不是打印机可以自上而下的完成绘制过程。

打印机打印过程