XDL_NO.2 指令式编程

指令式编程

培养指令式编程思维

---

复习上一节课的内容

1. Markdown是一种轻量级的「标记语言」,使用它来书写文档、代码规范，只要专心码字就行，排版什么的它都帮你轻松搞定！好比，使用Markdown，项目经理再也不用担心我的文档了！
2. 全栈工程师的概念，服务器、运行环境、数据库、前端、后端、APP(这里我们注重的是Hybrid App) 直到上线，全部由一个人搞定！很牛叉吧，我会成为这样的人才的！不要羡慕哥，努力、坚持的人总能吃到西瓜的！
3. 编程语言的发展历史，各种语言的优势和劣势，编程语言发展趋势只会越来越简单，方便人的操作，节省人力、脑力，让机器去操作运行，喂，机器，快死去干活，你懂的！
4. 编程语言执行的两种方式：指令式编程、函数式编程；指令式编程，按照机器的运行规则来执行；函数式编程，就是让电脑像人脑一样的运行；你觉得那种好？这还要问，当然是两种一起来，机器必须服务我的指令（不然像机器反主怎么办，对吧！），但是在我让它做某项事物的时候，我抛概念，机器你来执行，好比：我要赚一百万，机器你来完成如何给我赚一百万，我只要结果，过程你来！嘿嘿！

进入今天的内容

1. 明确目标：培养人像电脑一样思考！要玩转它，首先你要懂它！
2. 全栈开发中，Js的比重很大，适用于很多一面。
3. 指令式编程，通过js来阐述它。

---

指令式编程

阐述之前，先扩展两条Node命令

• node -v 查看当前Node版本
• node 进入交互模式

指令式编程最基本的指令

顺序结构语句

顺序结构

像 2+3、2*3、3-1，这种形式的都是计算机指令，计算机指令不等于cpu指令
而 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++;
       }

指令式编程的最基本的指令就这三种了，执行流程也要遵循：

1. 从上而下
2. 根据条件
3. 最后一个就是 在函数里

函数 执行流程

  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；我们是不是知道要输出一个几行的三角形，然后从第几行砍掉头！活生生的梯形不就展现在我们面前了！
代码

梯形

输出梯形

打印梯形

还是一样，先找出规律:

空心三角形

这个实例图看到时，是不是瞬间就得出，

1. 第一个星和最后一个星打出，中间空格；也就最外边打印
2. 然后加上一个特殊行，最后一行全星就组成了一个空心三角！

那我们是不是可以更据这个两个判断，再加上输出上述等别三角形的例子，是不是就可以打印出空心三角形了！

代码

空心三角形

Javascript 的两个不同的工作环境下的工作状态

客服端

Javascript 中变量作用域的问题

• 多人团队项目开发中，存在最多的问题，命名空间污染问题，java当中有引入包名称来解决，js当中可没有引入类似包、命名空间这些，所以怎么解决呢！

熟悉js作用域

  
  
     
         
         
   
    
     // 这是一个外部引入 js文件
    
  

  

分析作用域

网页中的 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() 可以调用函数了！

总结

1. 了解最基本指令式编程里的最基本的指令，体会机器执行程序的流程,是自己更明白电脑执行流程！
2. 了解js 在不同环境下的工作状态，js的变量作用域问题，和一些解决办法！