理解脚本

理解脚本

如果你打开一本 JavaScript 教程，那么很可能在第一章就看到这句话：

JavaScript 是一门动态类型、面向对象的脚本语言。

然而很多前端工作一年都不清楚这个脚本是什么意思。

其实脚本原本来自戏剧舞台，比如下面这个脚本：

公馆一室内
王妈：（小心翼翼地）小姐，您还是得注意身子，就吃点东西吧。
鸡小姐：（把碗砸在地上）不吃，我就是不吃。
（王妈下）

脚本主要由人物对话和舞台提示组成。演员和道具组只需要按照脚本说的做即可。

编程领域的脚本也是类似的，计算机只要照着脚本上说的做即可，比如下面这个脚本：

cd ~/Desktop
mkdir demo
cd demo
echo "hi" > index.html
cd ~/Desktop

所以说，脚本就是给计算机照着做的。这是我们对「脚本」的一个感性认识。接下来我们写一个脚本。

写一个脚本

1. 找个地方新建文件，后缀随意，一般来说脚本的后缀是 .sh，但是我偏要把后缀写成 .txt。我喜欢把脚本放在 ~/local 目录里。（我知道你没有这个目录，创建一下这个目录就行啦）

   1. mkdir ~/local
   2. cd ~/local 请一定要运行这句话！如果不运行，那么下面所有步骤都会出错
   3. touch demo.txt

2. 编辑 demo.txt，内容如下：

    pwd # 确认一下当前路径是不是 ~/local 或者 /c/Users/你的名字/local
    mkdir demo
    cd demo
    mkdir css js
    touch index.html css/style.css js/main.js
    exit
   
   

3. （Windows 用户请跳过这一步）给 demo.txt 添加执行权限 chmod +x demo.txt

4. 在任意位置执行 sh ~/local/demo.txt 即可运行此脚本

   1. cd ~/Desktop
   2. sh ~/local/demo.txt
   3. 你会看到当前目录里多出一个 demo 目录，demo 目录里面还有一些文件
      好了，这个 demo.txt 就是你写出的第一个 Bash 脚本了。

5. 将 ~/local 添加到 PATH 里

   1. cd ~/local; pwd 得到 local的绝对路径
   2. 临时设置 PATH
      1. 运行 export PATH="local的绝对路径:$PATH"，这句话是把 local 目录加到 PATH 里，注意替换 local的绝对路径
      2. 这时你只要运行 demo.txt 就相等于运行 sh ~/local/demo.txt 了（你可能会看到 File exists 的报错，不用管它）
   3. 永久设置 PATH，上面的 PATH 在你重启 Bash 之后就会失效，如果你希望 PATH 一直生效，看下面
      2. 创建 ~/.bashrc：touch ~/.bashrc
      3. 编辑 ~/.bashrc：start ~/.bashrc
      4. 在编辑器里添加一行字： export PATH="local的绝对路径:$PATH"
         • 有些同学居然不知道 local的绝对路径 是什么，我真是服了，前面的都白讲了
         • 想要知道 local的绝对路径，只需要：
           1. 进入 git bash
           2. cd ~/local
           3. pwd
           4. 打印出来的东西就是 local的绝对路径！
      5. source ~/.bashrc
      6. 之前你要运行 sh ~/local/demo.txt，现在你只需要运行 demo.txt（注意不是 demo，是 demo.txt 啊同学，几十个同学都看成 demo 了，眼睛是不是瞎了……）就行了

6. 如果你觉得 demo.txt 的后缀 .txt 没什么用，可以用下面的命令删掉它

   1. mv ~/local/demo.txt ~/local/demo
   2. 现在你只要运行 demo 就能执行该脚本了。
   3. 但是如果你没有运行过 mv ~/local/demo.txt ~/local/demo，就必须用 demo.txt 才能执行 demo.txt（看起来是废话，但是很多学生都没发现）

细节

1. PATH 的作用
   你每次在 Bash 里面输入一个命令时（比如 ls、cp、demo），Bash 都会去 PATH 列表里面寻找对应的文件，如果找到了就执行。
2. 使用 type demo 可以看到寻找过程
3. 使用 which demo 可以看到寻找结果
4. 文件后缀的作用：毫无作用
   你以为一个文件以 .exe 结尾就一定可以双击吗？你以为一个文件以 .png 结尾就一定是图片吗？图样图森破！

参数

demo 脚本只能创建名字为 demo 的目录，太无聊了，我们让目录名是可变的吧。

mkdir $1
cd $1
mkdir css js
touch index.html css/style.css js/main.js
exit

$1 表示你传的第一个参数。

老师你怎么知道 $1 表示第一个参数？

好问题，答案是

我 Google 出来的 http://lmgtfy.com/?q=bash+first+param
用百度也行 http://www.baidu-x.com/?q=bash+%E7%AC%AC%E4%B8%80%E4%B8%AA+%E5%8F%82%E6%95%B0

判断目录是否已存在

if [ -d $1 ]; then
  echo 'error: dir exists'
  exit
else
  mkdir $1
  cd $1
  mkdir css js
  touch index.html css/style.css js/main.js
  echo 'success'
  exit
fi

老师，你怎么知道 -d $1 可以判断目录是否存在？

我 Google 出来的 http://lmgtfy.com/?q=bash+dir+exists

返回值

• exit 0 表示没有错误
• exit 1 表示错误代码为 1

demo && echo '结束'

只有在 demo 成功时，才会执行 echo '结束'

思考题

我们创建的 index.html style.css 和 main.js 都是空文件，如何给他们填充内容呢？

Node.js 写脚本

上面我们写的脚本叫做 Bash Script（Bash脚本）。

JS 的全称叫做 JavaScript（Java脚本），虽然 JS 和 Java 没什么关系，但是 JS 依然是一种脚本。

1. 我们在 Bash 命令行里输入 Bash 命令，也可以在 Node.js 命令行里输入 JS 命令（<kbd>Ctrl</kbd> + <kbd>D</kbd> 退出）
2. Bash 脚本能做的事情，JS 脚本也能做。(sh demo.sh 对应 node demo.js）

用 JS 切换目录

console.log(process.cwd()) // 打印当前目录
// process.chdir('~/Desktop'); // 这句话不行的，因为 JS 不认识 ~ 目录
process.chdir("/Users/frank/Desktop")
console.log(process.cwd()) // 打印当前目录

console.log 就相当于 echo

用 JS 脚本创建目录

Google nodejs create dir

文档：https://nodejs.org/api/fs.html#fs_fs_mkdirsync_path_mode

let fs = require("fs")
fs.mkdirSync("demo")

用 JS 脚本创建文件

Google nodejs create file

文档： https://nodejs.org/api/fs.html#fs_fs_writefilesync_file_data_options

let fs = require('fs')
fs.writeFileSync("./index.html", "")

用 JS 脚本来重写 demo.sh

1. 创建 ~/local/jsdemo.js，内容如下

    var fs = require('fs')
   
    var dirName = process.argv[2] // 你传的参数是从第 2 个开始的
   
    fs.mkdirSync("./" + dirName) // mkdir $1
    process.chdir("./" + dirName) // cd $1
    fs.mkdirSync('css') // mkdir css
    fs.mkdirSync('js') // mkdir js
   
    fs.writeFileSync("./index.html", "")
    fs.writeFileSync("css/style.css", "")
    fs.writeFileSync("./js/main.js", "")
   
    process.exit(0)
   
   

2. （Windows 用户跳过这一步）给 jsdemo.js 加上执行权限 chmod +x ~/local/jsdemo.js

3. cd ~/Desktop

4. node ~/local/jsdemo.js zzz，就可以看到 zzz 目录创建成功了

shebang

我们每次执行 ~/local/jsdemo.js 都要用 node 来执行，能不能做到不加 node 也能执行呢（也就是指定执行环境），可以，在 jsdemo.js 第一行加上这一句即可：

#!/usr/bin/env node

（以下操作在 Windows 上可能失败，失败了就算了）

1. 然后你就可以直接用 ~/local/jsdemo.js zzz 了（省得输入 node 了）。
2. 如果你已经把 ~/local 加入了 PATH，那么甚至可以直接输入 jsdemo.js zzz 来执行。
3. 如果你再把 jsdemo.js 的后缀 .js 去掉，就可以直接 jsdemo zzz 了。

注意，你每次执行前最好删掉 zzz 目录，以免发生冲突。

总结

1. 脚本就是给机器一行一行执行的文本
2. Bash 脚本有 Bash 脚本的语法，Node.js 脚本有 JS 语法
3. 不管是那种脚本，能实现的功能都差不多，只是语法不同
4. Bash 脚本的语法挺奇葩的，比如 # 等符号
5. 不用特别去学 Bash 脚本的用法，遇到不会的就 Google
6. 不用特别去学 Node.js 脚本的用法，遇到不会的就 Google
7. 新人写代码最大的问题就是「抄错了」
   1. 多写了一个空格
   2. 少写了一个空格
   3. 单词拼错了
   4. 没有加分号
   5. 多加了分号