指令式编程
培养指令式编程思维
复习上一节课的内容
- Markdown是一种轻量级的「标记语言」,使用它来书写文档、代码规范,只要专心码字就行,排版什么的它都帮你轻松搞定!好比,使用Markdown,项目经理再也不用担心我的文档了!
- 全栈工程师的概念,服务器、运行环境、数据库、前端、后端、APP(这里我们注重的是Hybrid App) 直到上线,全部由一个人搞定!很牛叉吧,我会成为这样的人才的!不要羡慕哥,努力、坚持的人总能吃到西瓜的!
- 编程语言的发展历史,各种语言的优势和劣势,编程语言发展趋势只会越来越简单,方便人的操作,节省人力、脑力,让机器去操作运行,喂,机器,快死去干活,你懂的!
- 编程语言执行的两种方式:指令式编程、函数式编程;指令式编程,按照机器的运行规则来执行;函数式编程,就是让电脑像人脑一样的运行;你觉得那种好?这还要问,当然是两种一起来,机器必须服务我的指令(不然像机器反主怎么办,对吧!),但是在我让它做某项事物的时候,我抛概念,机器你来执行,好比:我要赚一百万,机器你来完成如何给我赚一百万,我只要结果,过程你来!嘿嘿!
进入今天的内容
- 明确目标:培养人像电脑一样思考!要玩转它,首先你要懂它!
- 全栈开发中,Js的比重很大,适用于很多一面。
- 指令式编程,通过js来阐述它。
指令式编程
阐述之前,先扩展两条Node命令
- node -v 查看当前Node版本
- node 进入交互模式
指令式编程最基本的指令
顺序结构语句
像 2+3、2*3、3-1,这种形式的都是计算机指令,<b>计算机指令不等于cpu指令</b>
而 a=3,a +=1、a *=1、a++,这带有变量的指令,变量存储在内存中
执行流程是从上而下的顺序结构!
分支结构语句
if( true ) {
}else{
}
给予简单的判断,进入不同的结构
循环结构语句
(初期循环结构应该是 goto 这种形式)
a++;
a:
if( a > 10) goto a;
//当a>10条件满足时,进入无限循环,想要跳出循环,两种方法:
// 1. 从满足条件开始起一直到不满足
// 2.
a:
if( a > 50 ) goto b;
goto a;
b:
懒猿不想写这么繁琐的,所以因然而生,while 语句
var i = 100;
while(i<100 ){
i++;
}
//条件不满足,跳出循环结构
var flag = true;
while(flag){
break;//满足条件的我就这么任性就是想这里跳出
}
懒猿还想再懒点,所以 for 又出现
for(var i=0;i<100;i++){
}
//剖析
var i = 0;
for(;i<100;){//中间的是条件
i++;
}
指令式编程的最基本的指令就这三种了,执行流程也要遵循:
- 从上而下
- 根据条件
- 最后一个就是 在函数里
函数 执行流程
var a=0;
function f( ) {
console.log(a);
}
f();
//当函数依次执行到 f() 函数时(存储到了内存但并不执行),没有被调用,不执行函数体,所以来到下面 函数 f() 被调用,返回到 函数执行函数体。
var a=0;
function f( ) {
console.log(a);
return 0;
}
var s = f();
// 函数体内有返回值,就会把返回值返回到调用处。也就是说 s等于0;
最基本的指令式编程的执行流程如上所述这样了,那下面,就从计算机最基础的指令开始,来强化理解计算机指令式编程,不断加强!
以打印图形来开始
这样的重复劳动造轮子的工作还是让给机器吧!
那想打印个矩形,怎么办呢?
还是同样的重复劳动,那我们是不是可以按照重复劳动的规律,写个简洁的.
那根据上述的循环,我是不是可以对他进行封装,来控制矩形的长宽,想要什么样的打印什么样的。提取事物共同的特性,用一个抽象的概念来涵盖!
抽象化后,封装的函数达到了初期我想要的目标,那我是不是还可以对它进行抽象,毕竟我今天想用星,那我后天想用别的符号呢!所以继续...
懒猿认为,好像并不是更方便了,反而有点复杂了!
这样看是不是 舒服多了,也方便多了,也更容易读懂了!那下面懒猿又要开始思考了,正方形也是矩形,对吧!只是长宽都一样,那同理我的正方形是不是也可以打印出来了!
那通过上面这几个实例,是不是更加对指令式编程又有新的了解了,好了,通过上边几个方法,我们是不是可以打印出我们想要的任何图形,请看:
根据这些规律,我们是不是可以进行封装,成为一个像上面输出矩形函数一样,等待更新!
打印空心矩形函数
规律:除了特殊的两行,第一行和最后一行全星,中间的都是第一列和最后一列是星,中间是空格,这个规律知道了,我们是不是只要给个判断,就会得到我们想要的,既然思路来了,就动手试验试验吧!
打印等边三角形函数
规律: 看下图我们来找找规律!
那看到这,是不是有点明白了,每行输出的星的个数和空格的个数都跟输出的行数有关,根据下图是不是明白输出的原理了!从中我们也推算出每行星的输出个数的方程式了:2n-1(n代表行)
第几行 | 空格数 | 星个数 | 规律 |
---|---|---|---|
1 | 9 | 1 | 1x2-1=1 |
2 | 8 | 3 | 2x2-1=3 |
3 | 7 | 5 | 3x2-1=5 |
4 | 6 | 7 | 4x2-1=7 |
5 | 5 | 9 | 5x2-1=9 |
6 | 4 | 11 | 6x2-1=11 |
7 | 3 | 13 | 7x2-1=13 |
当你不明白一个事物的时候,别急,怎么先找一个客观存在的事物,找出他的共性,然后抽象它!
代码:
打印梯形
规律: 三角形砍了头,是不是就一个梯形了!那好根据这个我们用示例图更直观的看下:
那我一个上边是5颗星,下边是19颗星的 梯形;更据三角形规律方程式2n-1;我们是不是知道要输出一个几行的三角形,然后从第几行砍掉头!活生生的梯形不就展现在我们面前了!
代码
输出梯形
打印梯形
还是一样,先找出规律:
这个实例图看到时,是不是瞬间就得出,
- 第一个星和最后一个星打出,中间空格;也就最外边打印
- 然后加上一个特殊行,最后一行全星就组成了一个空心三角!
那我们是不是可以更据这个两个判断,再加上输出上述等别三角形的例子,是不是就可以打印出空心三角形了!
代码
Javascript 的两个不同的工作环境下的工作状态
客服端
Javascript 中变量作用域的问题
- 多人团队项目开发中,存在最多的问题,命名空间污染问题,java当中有引入包名称来解决,js当中可没有引入类似包、命名空间这些,所以怎么解决呢!
熟悉js作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS 中的作用域</title>
</head>
<script type="text/javascript">
var = a; //这么低级的错误肯定不会犯的
//var = a;
</script>
// 这是一个外部引入 js文件
<script type="text/javascript">
var = a; //这个文件也声明了一个这样的变量,那是不是就冲突了
</script>
<body>
</body>
</html>
分析作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS 中的作用域</title>
</head>
<script type="text/javascript">
var a = 5;//全局变量
function f() {
var a = 3;//这样就不冲突了,这里的a 是局部变量
alert(a); //这里输出的是函数内的a
}
alert(a);//5
f();// 3
——————————————————————————————
//var a = 5;//全局变量 相当于 window.a (最顶层的a)=5;
window.a = 5;
function f() {
var a = 3;
// a = 3;//这样 a ,在函数调用后,也是全局变量,根据js的特性,闭包函数,a 会一直往外(函数外)寻找!直到找到最顶层!
alert(a); //这里输出的是函数内的a
window.a = 6;
}
alert(a);//5
f();// 3
alert(a);//6
</script>
<body>
</body>
</html>
网页中的 js 全局变量是 window.a ,在node 环境下 是: global a ;这样你对js中的作用域更深入的了解了吧!
参考文档我叫了,你不能叫!你叫了,我不能叫!
为了解决这个问题,经常用到这个方法!
(function (){//匿名函数
var user;
alert("a ");//会立即执行
}) () ;
function f() {
var a = function(){
};
}
function f() {
return function () {//返回一个函数
}
}
var x = f();//调用函数f(),返回一个函数,给了x;
x(); //这样 x() 可以调用函数了!
总结
- 了解最基本指令式编程里的最基本的指令,体会机器执行程序的流程,是自己更明白电脑执行流程!
- 了解js 在不同环境下的工作状态,js的变量作用域问题,和一些解决办法!