准备Ready
基础认知
运行机制 与 使用场景
浏览器下
浏览器端 100% 使用
与 HTML、CSS 搭配，构建网页，或网页程序
服务器端
也可以使用 node 做 服务器级别的程序
可以做 服务器、命令行、数据处理
客户端
可以被一些框架 将 HTML、CSS、JS 包装成 一个 本地 app
可以做 客户端、手机端 app
数据通信标准
JSON（JavaScript Object Notation）
作为现在 Rest API 的 主流数据格式
部分新型数据库 使用 JSON 作为数据格式
重要产品历史
| 类型 | 产品 |
|---|---|
| 语言 | JS - JavaScript / ES - ECMA Script |
| 浏览器前端 | AngularJS / ReactJS / Vue.js |
| 客户端前端 | React Native / NativeScript |
| 运行时 | V8 / Node.js |
| 包管理 | npm / yarn |
搭建开发环境
node.js
安装 Node.js
VS Code
轻量级 IDE
安装 VS Code
配置 VS Code 环境变量
VS Code 常用设置
Hi, ZZAX
建立课程文件夹
在你电脑里，找到一个位置，比如 桌面，D 盘，或者 Documents 文件夹内。
创建一个 ZZAX 的 文件夹
在 ZZAX 的文件夹下 创建一个 webd131 的文件夹
在 webd131 的文件夹下 创建一个 space 的文件夹
浏览器端的 js 程序
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Demo</title> <script src="demo.js"></script></head><body> <script> console.log('Hi, ZZAX'); </script></body></html>
demo.js
1 alert('Hi, ZZAX');
命令行端的 js 程序
demo.js
1 console.log('Hi, ZZAX');
版本问题
ECMA Script 版本支持表
HTML, CSS, JS 语法支持表
一些信息
1.
新版本语法的代码 可以被一些翻译程序，翻译成 旧版本语法的代码
所以我们可以放心的写新版本语法的代码
2.
仍然需要学习旧版本语法，在一些情况下依然有用
Babel
是什么
一个程序
将新版本语法的代码，翻译成旧版本的代码
从而向下兼容
Babel 官网
使用 Babel 翻译代码
1.
文件夹结构
project
src
xxx.js带新语法的代码
out
xxx.js兼容旧版运行机的代码
2.
创建 src 文件夹
3.
写原始代码
/src/index.js
1 2 let func = () => {console.log('Hi, ZZAX')}func();
4.
启动 npm
项目根目录输入
>npm init
5.
安装 babel
项目根目录输入
>npm install --save-dev @babel/core @babel/cli @babel/preset-env
6.
设置 babel
创建 .babelrc 文件
/.babelrc
1 2 3 4 5 { "presets": [ "@babel/preset-env" ]}
7.
关联 npm 与 babel
在 npm 代码中 添加
/package.json
1 2 3 4 5 6 7 8 9 10 11 12 13+14 15 16 17 18 { "name": "03-babel", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": {}, "devDependencies": { "@babel/cli": "^7.5.5", "@babel/core": "^7.5.5", "@babel/preset-env": "^7.5.5" }, "scripts": { "build": "babel src -d out", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC"}
8.
npm 脚本 运行 babel
项目根目录输入
>npm run-script build
9.
运行 脚本
项目根目录输入
>node out/index.js
