指令式编程
培养指令式编程思维
复习上一节课的内容
- 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的变量作用域问题，和一些解决办法！
网友评论