浏览器中的JavaScript

浏览器中的JavaScript的组成部分

浏览器中的JS
- ECMAScript（核心语法）ES3 --> ES4 --> ES5 --> ES6(2015) --> ES2016 -->ES2017 .....
  - 变量、常量
  - 数据类型
  - 函数
  - 流程控制（if、switch、for、while、for...in、continue、break）
  - 运算符
  - JS内置对象（Array、String、RegExp、Date、Math....）
- WebAPI （浏览器提供的API）
  - DOM（文档对象模型，document）
  - BOM（浏览器对象模型，location、history、....）
  - XMLHttpRequest
  - Canvas
  - URL
  - ...

为什么JavaScript 可以在浏览器中被执行

浏览器内核

浏览器内核包括 CSS解析引擎，包括 JS解析引擎
目前，JS解析引擎基本上从内核中独立出来了
所以，平时所说的浏览器内核一般和CSS有关系

不同的浏览器使用不同的 JavaScript 解析引擎:

Chrome 浏览器 => V8
Firefox 浏览器=> OdinMonkey(奥丁猴)
Safri 浏览器=> JSCore
IE 浏览器=> Chakra(查克拉)
etc...

其中，Chrome 浏览器的 V8 解析引擎性能最好!

浏览器中的 JavaScript 运行环境

人生存下来的必要、必须的条件，这些条件组成了环境。

JS == API(写代码) ==> 解析引擎 ==> 效果

运行环境指的是代码正常运行所需的必要条件。
V8 引擎负责解析和执行 JavaScript 代码。
内置 API 是由运行环境提供的特殊接口，只能在所属的运行环境中被调用。

Node.js简介

JavaScript 能否做后端开发

Node.js 的出现，使得JavaScript有了做后端开发的能力。

Node.js可以做什么

Node.js 作为一个 JavaScript 的运行环境，仅仅提供了基础的功能和 API。然而，基于 Node.js 提供的这些基础功能，很多强大的工具和框架如雨后春笋，层出不穷，所以学会了 Node.js ，可以让前端程序员胜任更多的工作和岗位！

基于 Express/Koa 框架(www.expressjs.com.cn/)，可以快速构建 Web 应用
基于 Electron 框架(electronjs.org/)，可以构建跨平台的桌…
基于 restify 框架(restify.com/)，可以快速构建 API 接口项目
读写和操作数据库、创建实用的命令行工具辅助前端开发
etc...

总之，Node.js 是大前端时代的“大宝剑”，有了 Node.js 这个超级 buff 的加持，前端程序员的行业竞争力会越来越强！

什么是 Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

通俗的理解：Node.js 为 JavaScript 代码的正常运行，提供的必要的环境。

Node.js 的官网地址: nodejs.org/zh-cn/

模块化介绍

什么是模块化

模块化，就是把一个大的文件拆分成若干小文件，而且还能把小文件通过特定的语法组合到一起的实现过程。

比如手机、电脑....等等几乎所有，都是模块化的设计，拿电脑来说，可以把电脑拆分成显示器、键盘、硬盘、内存等一个一个的小模块，当然也能够组装到一起。

优点

模块化的优势：

更利于维护（比如电脑屏幕坏了，只换屏幕就可以了；比如想升级显卡，只换显卡就行了）；
更好的复用性（比如有一块移动硬盘或U盘，大家都能用）

Node中，规定每个JS文件都是一个小模块。一个项目由许许多多的小模块（JS文件）组合而成。

Node中模块化的优势：

更利于维护（比如，项目需要对登录模块升级，则不会影响其他模块）
更好的复用性（比如有一个公共的函数，封装起来。其他所有JS文件都能使用这个函数）

了解几种模块化规范

AMD
CMD
CommonJS（Node中的模块化，使用的是这种方案）
ES6

Node使用的是CommonJS规范。

模块的分类

自定义模块
- NodeJS中，创建的JS文件都是自定义模块。（也就是处处皆模块）
内置模块（核心模块）
- 安装Node之后，自带了很多内置模块。我们可以直接加载使用他们。
第三方模块
- 其他人编写的模块，发布到 npm 网站上，我们可以下载使用。

自定义模块

我们创建的每个JS文件都是一个自定义模块，并且具有模块作用域，也就是在一个模块中创建的变量、常量、函数等等一切，都只能在当前模块中使用。

共享（导出/暴露）内容给其他模块用，需要使用 module.exports 导出内容。
- module 是Node中的一个全局对象，对象包含当前模块的详细信息。
- module.exports 是模块的出口，通俗的说，就是导出内容用的，默认值是 {}
- 比如，02-test.js 导出 age、name、fn 给其他模块用，可以 module.exports = {age, name, fn}
其他模块，如果需要使用上述模块导出的内容，可以使用 require() 加载
- let 结果 = require('模块路径')
- 比如，let test = require('./02-test');
- 加载自定义模块，必须加路径，即使是 ./ 也必须加。但是可以省略后缀。

示例：

02-test.js -- 导出内容

let age = 30;
let name = 'laotang';
let height = '175cm';
let weight = '75kg';
let square = x => x * x;

// 导出age、name、fn给其他模块使用
module.exports = { age, name, square };

03-use.js -- 导入内容

let test = require('./02-test');

console.log(test); // { age: 30, name: 'laotang', square: Function... }

一个模块导出什么，另一个模块加载后，就会得到什么。

就比如，我给你三个苹果，你只能得到三个苹果，不可能得到其他的。

内置模块

内置模块是Node.js 平台自带的一套基本的 API(功能模块)。也叫做核心模块。

下面介绍几个内置模块。

注意，加载内置模块，不能写路径，这是和加载自定义模块不一样的。

path模块

path 是 Node 本身提供的 API，专门用来处理路径。
nodejs.cn/api/path.ht…

使用

加载模块

// 使用核心模块之前，首先加载核心模块
let path = require('path');
// 或者
const path = require('path');

调用path模块中的方法，来处理相应的问题，下面列举path模块中的几个方法

方法	作用
path.basename(path[, ext])	返回 path 的最后一部分(文件名)
path.dirname(path)	返回目录名
path.==extname==(path)	返回路径中文件的扩展名(包含.)
path.format(pathObject)	将一个对象格式化为一个路径字符串
path.==join==([...paths])	拼接路径
path.parse(path)	把路径字符串解析成对象的格式
path.resolve([...paths])	基于当前工作目录拼接路径

const path = require('path');

// extname -- 获取文件后缀
console.log(path.extname('index.html')); // .html
console.log(path.extname('index.coffee.md')); // .md

// join -- 智能拼接路径
// ------------------- 智能拼接路径 -----------------------------
// console.log(path.join('a', 'b', 'c')); // a/b/c

// console.log(path.join('a', 'b', 'c', 'index.css')); // a/b/c/index.css

// a里面有b，b里面有../c，言外之意，c和b同级。
// console.log(path.join('a', 'b', '../c', 'index.js')); // a/c/index.js

// __dirname 永远表示当前js文件的绝对路径
console.log(path.join(__dirname, 'css', 'demo.css')); // /Users/tangfengpo/Study/123/Node01/code/css/demo.css

fs模块

fs，即 file system，文件系统，该模块可以实现对文件、文件夹的操作
nodejs.cn/api/fs.html

使用