From d6b0277f05212d446dca55015744adc0c01e77bd Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Mon, 13 Apr 2020 19:00:31 +0800 Subject: [PATCH] =?UTF-8?q?update:=20Node.js=20=E7=8E=AF=E5=A2=83=E9=85=8D?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 04-JavaScript基础/01-JS简介.md | 4 +- .../01-Node.js介绍和环境配置.md | 179 ++++++++++++++---- ...CommonJS.md => 02-Node.js模块化规范：CommonJS.md} | 78 +------- ...t模块化02：AMD.md => JavaScript模块化：AMD.md} | 0 ...t模块化03：CMD.md => JavaScript模块化：CMD.md} | 67 +++++++ ...t模块化04：ES6.md => JavaScript模块化：ES6.md} | 28 ++- 18-推荐链接/01-2020年Web前端最新导航.md | 16 +- 18-推荐链接/02-GitHub项目推荐.md | 5 + 18-推荐链接/04-前端文章推荐.md | 7 + 9 files changed, 265 insertions(+), 119 deletions(-) rename 11-Node.js和模块化/{02-JavaScript模块化01：CommonJS.md => 02-Node.js模块化规范：CommonJS.md} (90%) rename 11-Node.js和模块化/{02-JavaScript模块化02：AMD.md => JavaScript模块化：AMD.md} (100%) rename 11-Node.js和模块化/{02-JavaScript模块化03：CMD.md => JavaScript模块化：CMD.md} (81%) rename 11-Node.js和模块化/{02-JavaScript模块化04：ES6.md => JavaScript模块化：ES6.md} (82%) diff --git a/04-JavaScript基础/01-JS简介.md b/04-JavaScript基础/01-JS简介.md index 6a944ec..88cf83f 100644 --- a/04-JavaScript基础/01-JS简介.md +++ b/04-JavaScript基础/01-JS简介.md @@ -85,12 +85,14 @@ JavaScript运行在用户的终端网页上，而不是服务器上，所以我 JavaScript基础分为三个部分： -- ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。 +- **ECMAScript**：JavaScript 的**语法标准**。包括变量、表达式、运算符、函数、if语句、for语句等。 - **DOM**：Document Object Model（文档对象模型），操作**页面上的元素**的API。比如让盒子移动、变色、改变大小、轮播图等等。 - **BOM**：Browser Object Model（浏览器对象模型），操作**浏览器部分功能**的API。通过BOM可以操作浏览器窗口，比如弹框、控制浏览器跳转、获取浏览器分辨率等等。 +通俗理解就是：ECMAScript 是 JS 的语法；DOM 和 BOM 浏览器运行环境为 JS提供的API。 + ## JavaScript 的特点 ### 特点1：解释型语言 diff --git a/11-Node.js和模块化/01-Node.js介绍和环境配置.md b/11-Node.js和模块化/01-Node.js介绍和环境配置.md index d617306..bf558d6 100644 --- a/11-Node.js和模块化/01-Node.js介绍和环境配置.md +++ b/11-Node.js和模块化/01-Node.js介绍和环境配置.md @@ -1,11 +1,14 @@ - ## Node.js的介绍 ### 什么是 Node.js（官方解释） -Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。 Node.js使用了一个**事件驱动**、**非阻塞式I/O**的模型（ Node.js的特性），使其轻量级又高效。 Node.js 的包管理器 npm 是全球最大的开源库生态系统。 +Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。 + +Node.js使用了一个**事件驱动**、**非阻塞式I/O**的模型（ Node.js的特性），使其轻量级又高效。 + +Node.js 的包管理器 npm 是全球最大的开源库生态系统。 ![](http://img.smyhvae.com/20180301_1540.png) @@ -16,6 +19,7 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。 - 通过自行开发的 libuv 库，调用操作系统资源。 + ### 什么是 Node.js（非官方解释） **Node.js是 JavaScript 语言在服务器端的运行环境（平台）**。Node.js 不是一门语言，也不是 JavaScript 的框架。 @@ -32,7 +36,13 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。 - 其次，Node 生态系统活跃，提供了大量的开源库，使得 JavaScript 语言能与操作系统进行交互（比如读写文件、新建子进程），在这个层次上，Node 又是属于 JavaScript 的工具库。 -### 为什么要学习服务器端开发 +## Node.js和服务器端开发 + +> 在这一段，“服务器端开发”和“后台开发”是一个概念。 + +### 前端同学为什么要学习后台开发 + +- 了解前后端交互流程。 - 能够和后台开发的程序员更佳紧密地结合、更顺畅地沟通。 @@ -40,14 +50,55 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。 - 拓宽知识视野和技术栈，能够站在全局的角度审视整个项目。 -### 为什么选择 Node.js 做后台开发 +### 为什么选择 Node.js 做后台开发（Node.js的优势） -- 使用 JavaScript 语言 开发服务器端应用。 +1、使用 JavaScript 语言开发服务器端应用，**便于前端同学上手**（一些公司甚至要求前端工程师掌握 Node.js 开发）。 -- 一些公司要求前端工程师掌握 Node.js 开发。 +2、**性能高**。AO操作的性能可能没有优势，但运算方面的性能不错。 -- Node.js 生态系统活跃，提供了大量的开源库。 +3、**有利于和前端代码整合**，甚至共用部分代码。 +比如说，针对接口返回的各种字段，前后端都必须要做校验。此时，如果用 Node.js 来做后台开发的话，前后端可以共用校验的代码。 + +4、Node.js 生态系统活跃，提供了大量的开源库。 + +**思考**：限制语言能力的不是语言本身，而是语言的运行环境（平台）。 + +### Node.js 的用途 + +**1、中间层**。 + +前端访问中间层，中间层再访问后台的 Java/C++ 服务。这样做的好处是：安全性（不会把主服务器暴露在外面）、提高性能（做缓存等）、降低主服务器的复杂度。 + +当然，有时候做 Node.js 开发，是因为：后台人力不够，所以把后台开发的一部分工作量，转移给前端同学。 + +**2、公司内部工具**。 + +**3、小型服务**（比如管理系统）。 + +需要声明的是：Node.js很难像 Java/C++ 那样，成为后台的主力开发语言。这并非是因为 Node.js的性能问题（实际上，Node.js的性能还不错），主要是因为，Node.js的框架的支持度不够，很难独立成为后台开发语言。 + +### Node.js 的组成 + +我们知道，JavaScript 的组成分为三个部分： + +- ECMAScript + +- DOM + +- BOM + +ECMAScript 是 JS 的语法；DOM 和 BOM 浏览器运行环境为 JS 提供的API。 + +而 Node.js 的组成分为： + +- **ECMAScript**。ECMAScript的所有语法在Node环境中都可以使用。 + +- **Node 环境**提供的一些**附加API**(包括文件、网络、路径等等 API)。 + +如下图所示： + +![](http://img.smyhvae.com/20200409_1545.png) ## Node.js的发展 @@ -79,6 +130,7 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。 - I/O阻塞 + ### 知名度较高的Node.js开源项目 ![](http://img.smyhvae.com/20180301_2009.png) @@ -100,9 +152,6 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。 - socket.io：实时通信框架。 -### Node.js的特点 - -- 单线程 @@ -120,17 +169,30 @@ Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 代码运行环境。 注意，我们以一定要用偶数版（V4、V6等)，不要用奇数版（比如V5），因为奇数版不稳定。 -我们并不推荐直接采用 Node.js.msi（windows）或者 Node.js.pkg（Mac） 安装包进行安装，原因如下： +后续如果需要安装其他版本，可以这样做：重新下载最新的安装包，覆盖安装即可。 +但我们并不推荐直接采用 Node.js.msi（windows）或者 Node.js.pkg（Mac） 安装包进行安装，因为会产生如下问题。 -- 不方便 Node.js 版本的更新； +**通过 Node.js 安装包产生的问题**： -- 无法回滚到之前的版本； +- 安装新版本时，以前版本安装的很多全局工具包，需要重新安装。 -- 无法在多个版本之间切换（在有些项目中，我们要使用 Node 的指定版本）。 +- 无法回滚到之前的版本。 + +- 无法在多个版本之间切换（很多时候我们要使用特定版本） 因此，我们暂时先不用安装 Node.js，稍后用 NVM 的方式来安装 Node.js。 +### Node.js 版本常识 + +- 偶数版本为稳定版（0.6.x ，0.8.x ，8.10.x） + +- 奇数版本为非稳定版（0.7.x ，0.9.x ，9.11.x） + +- LTS（Long Term Support） + +参考链接：[node.js中LTS和Current的区别](https://blog.csdn.net/u012532033/article/details/73332099) + ## Node.js 运行环境配置：通过 NVM（推荐） @@ -300,7 +362,7 @@ nvm install 8.10.0 ## NVM 的常用命令 -> 注意，这一段说的是 NVM 的常用命令，不是 Node的 常用命令。 +> 注意，这一段说的是 NVM 的常用命令，不是 Node 的常用命令。 查看当前使用的 nvm 版本： @@ -454,7 +516,6 @@ NVM、Node、NPM 安装之后，目录分布如下： $ npm install npm -g ``` - ### 配置 NPM 的全局目录（暂略） NPM 默认安装到当前正在使用 Node 版本所在目录下。我们建议重新配置 NPM 的全局目录。 @@ -466,32 +527,77 @@ NPM 默认安装到当前正在使用 Node 版本所在目录下。我们建议 ### NPM的常用命令 -- npm init --yes +查看 npm 当前版本： -项目的初始化。执行完成后，会生成`package.json`文件。 +```bash +npm -v +``` -- npm install [package] +更新 npm： -只在当前工程下安装 package。 +```bash +npm install npm@latest -g -- npm install -g [package] +``` -在全局环境下安装 package。 +项目初始化：（执行完成后，会生成`package.json`文件） -- npm run [script] +```bash +npm init + +npm init --yes 默认配置 +``` + +只在当前工程下安装指定的包： + +```bash +npm install [package] +``` + +在全局阿浑惊吓安装指定的包： + +``` +npm install -g [package] +``` + +## 配置 npm 镜像源 + +由于 npm 默认的下载地址在国外（npmjs.com），有时候会被墙，导致无法下载或者下载很慢。因此，我们可以尝试切换成，从其他的镜像源下载npm包。 + +切换镜像源，有下面这几种方式： + +- 方式1：临时切换镜像源。 + +- 方式2：通过 NRM 切换镜像源（最为推荐的方式）。 + +- 方式3：cnpm。 + +下面来分别讲一下。 + +### 方式1：临时切换镜像源 + +安装指定包的时候，通过追加 `--registry`参数即可。格式如下： + +```bash +# 格式 +npm install [package] --registry [https://xxx] + +# 举例：在下载安装 express 这个包的时候，临时指定镜像源为 https://registry.npm.taobao.org +npm install express --registry https://registry.npm.taobao.org +``` -## NRM的安装(Win 和 Mac 通用) +### 方式2：通过 NRM 切换镜像源（推荐） -由于 NPM 的资源都在国外，有时候会被墙，导致无法下载或者很慢。此时可以用到NRM。 -**NRM**：Node Registry Manager。作用是：**切换和管理包的镜像源**。 +**NRM**：Node Registry Manager。作用是：**切换和管理npm包的镜像源**。 - 项目地址： - GitHub地址： -安装 NRM： + +**安装 NRM**： ```bash npm install -g nrm @@ -510,7 +616,7 @@ nrm ls nrm use taobao ``` -效果入下： +效果如下： ![](http://img.smyhvae.com/20180302_1215.png) @@ -518,39 +624,38 @@ nrm use taobao 推荐的国内加速镜像淘宝： -## 安装cnpm +## 方式3：安装cnpm - 项目地址： -安装`cnpm`替换npm（npm由于源服务器在国外，下载node包速度较慢，cnpm使用国内镜像）： +安装`cnpm`替换npm（npm 由于源服务器在国外，下载包的速度较慢，cnpm 会使用国内镜像）： ```bash npm install -g cnpm --registry=https://registry.npm.taobao.org ``` - ![](http://img.smyhvae.com/20180302_2204.png) 如果我们需要通过 cnpm 去安装一个包时，举例如下： ```bash - cnpm i vue + cnpm install vue ``` -解释： i 指的就是 install。 +这里的单词 `install` 可以简写成 `i`。 +## Node.js 的简单使用 -## Node 的使用 +我们可以输入`node`命令，然后在里面写 js 的代码。 -我们可以输入`node`命令，然后在里面写 js 的代码，也可以 通过 node 运行 js 文件。比如，编写好一个 js文件`01.js`，然后在命令行输入： +或者，也可以 通过 node 运行 指定的 js 文件。比如，编写好一个 js文件`01.js`，然后在命令行输入： ```bash node 01.js ``` -就可以执行 js 程序。 - +就可以执行这个 js 程序，直接在命令行查看运行结果。 ## 我的公众号 diff --git a/11-Node.js和模块化/02-JavaScript模块化01：CommonJS.md b/11-Node.js和模块化/02-Node.js模块化规范：CommonJS.md similarity index 90% rename from 11-Node.js和模块化/02-JavaScript模块化01：CommonJS.md rename to 11-Node.js和模块化/02-Node.js模块化规范：CommonJS.md index 821d577..86f6135 100644 --- a/11-Node.js和模块化/02-JavaScript模块化01：CommonJS.md +++ b/11-Node.js和模块化/02-Node.js模块化规范：CommonJS.md @@ -4,7 +4,6 @@ 网站越来越复杂，js代码、js文件也越来越多，会遇到**一些问题**： - - 文件依赖 - 全局污染、命名冲突 @@ -27,7 +26,6 @@ ## 模块化的理解 - ### 什么是模块化 @@ -37,7 +35,6 @@ 最早的时候，我们会把所有的代码都写在一个js文件里，那么，耦合性会很高（关联性强），不利于维护；而且会造成全局污染，很容易命名冲突。 - ### 模块化的好处 - 避免命名冲突，减少命名空间污染 @@ -87,7 +84,6 @@ 那如何把这种模块化思维应用到前端来呢？这就产生了两种伟大的 js：RequireJS 和 SeaJS。 - ### 模块化规范 服务器端规范： @@ -126,12 +122,10 @@ PS：面试时，经常会问AMD 和 CMD 的区别。 另外，还有ES6规范。 -这篇文章，我们来讲一下`CommonJS`。 - +这篇文章，我们来讲一下`CommonJS`，它是 Node.js 使用的模块化规范。 ## CommonJS 的基本语法 - ### CommonJS 的介绍 @@ -182,9 +176,11 @@ require(xxx) 解释： -- 下载的第三方模块：xxx直接为模块名（包名）。 +- 内置模块：xxx 为模块名（包名） -- 自定义模块：xxx为模块文件路径 +- 下载的第三方模块：xxx为模块名（包名）。 + +- 自定义模块：xxx为模块文件路径。 ## CommonJS 在服务器端的实现举例 @@ -536,70 +532,6 @@ module3.foo2(); -## others - - -### SeaJS 的介绍 - -SeaJS：一个基于CMD规范实现的模块化开发解决方案。 - -作者：Alibaba 玉伯。 - -官网： - -GitHub： - -现在官网变成了： - -特性： - -- 简单友好的模块定义规范。 - -- 自然直观的代码组织方式。 - -![](http://img.smyhvae.com/20180303_2107.png) - -### RequireJS（AMD）、SeaJS（CDM）、CommonJS、ES6 的对比 - -1、RequireJS 和 AMD： - -![](http://img.smyhvae.com/20180303_1653.png) - -异步模块定义，特点是依赖前置。 - -2、SeaJS 和 CMD： - - -同步模块定义。 - -```javascript - // 所有模块都通过 define 来定义 - define(funtion(require, exports, module) { - - //通过 require 引入依赖 - - var $ require(`jquery`); - - var Spinning = require(`./spinning`); - }) -``` - -3、CommonJS： - -![](http://img.smyhvae.com/20180303_1701.png) - -以上三个都是 ES5里面的规范。 - -4、ES6： - -ES6的特性：export/import - -![](http://img.smyhvae.com/20180303_1704.png) - - - - - diff --git a/11-Node.js和模块化/02-JavaScript模块化02：AMD.md b/11-Node.js和模块化/JavaScript模块化：AMD.md similarity index 100% rename from 11-Node.js和模块化/02-JavaScript模块化02：AMD.md rename to 11-Node.js和模块化/JavaScript模块化：AMD.md diff --git a/11-Node.js和模块化/02-JavaScript模块化03：CMD.md b/11-Node.js和模块化/JavaScript模块化：CMD.md similarity index 81% rename from 11-Node.js和模块化/02-JavaScript模块化03：CMD.md rename to 11-Node.js和模块化/JavaScript模块化：CMD.md index 7151615..e132d71 100644 --- a/11-Node.js和模块化/02-JavaScript模块化03：CMD.md +++ b/11-Node.js和模块化/JavaScript模块化：CMD.md @@ -253,3 +253,70 @@ define(function (require) { 打印结果： ![](http://img.smyhvae.com/20180412_1955.png) + + + + + + +## others + + +### SeaJS 的介绍 + +SeaJS：一个基于CMD规范实现的模块化开发解决方案。 + +作者：Alibaba 玉伯。 + +官网： + +GitHub： + +现在官网变成了： + +特性： + +- 简单友好的模块定义规范。 + +- 自然直观的代码组织方式。 + +![](http://img.smyhvae.com/20180303_2107.png) + +### RequireJS（AMD）、SeaJS（CDM）、CommonJS、ES6 的对比 + +1、RequireJS 和 AMD： + +![](http://img.smyhvae.com/20180303_1653.png) + +异步模块定义，特点是依赖前置。 + +2、SeaJS 和 CMD： + + +同步模块定义。 + +```javascript + // 所有模块都通过 define 来定义 + define(funtion(require, exports, module) { + + //通过 require 引入依赖 + + var $ require(`jquery`); + + var Spinning = require(`./spinning`); + }) +``` + +3、CommonJS： + +![](http://img.smyhvae.com/20180303_1701.png) + +以上三个都是 ES5里面的规范。 + +4、ES6： + +ES6的特性：export/import + +![](http://img.smyhvae.com/20180303_1704.png) + + diff --git a/11-Node.js和模块化/02-JavaScript模块化04：ES6.md b/11-Node.js和模块化/JavaScript模块化：ES6.md similarity index 82% rename from 11-Node.js和模块化/02-JavaScript模块化04：ES6.md rename to 11-Node.js和模块化/JavaScript模块化：ES6.md index 1601495..d83520a 100644 --- a/11-Node.js和模块化/02-JavaScript模块化04：ES6.md +++ b/11-Node.js和模块化/JavaScript模块化：ES6.md @@ -1,10 +1,36 @@ +## 模块化开发的引入 + +### JS开发的弊端 + +JS 在使用时存在两大问题，而 Node.js 可以很好地避免这两个问题： + +- 文件依赖。比如 a 文件依赖 b 文件，b 文件依赖 c 文件。而 Node.js 中的文件依赖，不需要人工维护和人为分析。 + +- 命名冲突。js 的各个文件是相互开放的，容易导致命名冲突。而 Node.js 是属于半封闭的状态，可以指定哪些内容是开放的，哪些内容是封闭的。 + +Node.js 在解决这两个问题时，用到的就是模块化开发。 + +### 软件开发中的模块化开发 + +一个功能就是一个模块，多个模块可以组成完整的应用，抽离一个模块不会影响其他功能的运行。 + +效果如下： + +![](http://img.smyhvae.com/20200409_1934.png) + +### Node.js 中的模块化开发 + +Node.js 规定，一个 JS 文件就是一个模块，模块内部定义的变量和函数默认情况下在外部无法访问。 + +模块内部可以使用 `exports` 对象进行成员导出， 使用 `require` 方法导入其他模块。效果如下： + +![](http://img.smyhvae.com/20200409_1932.png) ## ES6模块化的基本语法 ### ES6模块化的说明 - **依赖模块需要编译打包处理**。原因如下： - （1）有些浏览器不支持 ES6 的语法，写完 ES6 的代码后，需要通过`Babel`将 ES6 转化为 ES5。 diff --git a/18-推荐链接/01-2020年Web前端最新导航.md b/18-推荐链接/01-2020年Web前端最新导航.md index 772dd1f..a2197df 100644 --- a/18-推荐链接/01-2020年Web前端最新导航.md +++ b/18-推荐链接/01-2020年Web前端最新导航.md @@ -50,13 +50,6 @@ 中国区的高分项目，都在这里了。 -- GitHub 中国区排名： - -这个网站虽然比较小众，但排名还是相对比较准的。 - -- GitHub 中国区排名： - -这个排名很久没更新了，早就不准了；而且还经常打不开。 - GitHub 全球排名： @@ -68,6 +61,15 @@ 2019-12备注：现在的 GitHub trending 已经不是严格按照新增的 star 数来排行了。所以说，这个排名，也不是那么权威了。 +- GitHub 中国区排名： + +这个网站虽然比较小众，但排名还是相对比较准的。 + +- GitHub 中国区排名： + +这个排名很久没更新了，早就不准了；而且还经常打不开。 + + ## 资讯 - 36氪： diff --git a/18-推荐链接/02-GitHub项目推荐.md b/18-推荐链接/02-GitHub项目推荐.md index c90a2fb..08b6a2e 100644 --- a/18-推荐链接/02-GitHub项目推荐.md +++ b/18-推荐链接/02-GitHub项目推荐.md @@ -28,6 +28,11 @@ - 极客时间 App 的《数据结构与算法之美》 +## Vue 教程 + +- 你也许不知道的 Vuejs： + + ## 前端教程类 ## 其他 diff --git a/18-推荐链接/04-前端文章推荐.md b/18-推荐链接/04-前端文章推荐.md index 2c86305..c96100a 100644 --- a/18-推荐链接/04-前端文章推荐.md +++ b/18-推荐链接/04-前端文章推荐.md @@ -1,8 +1,15 @@ + +### 2020-04-09 + +- [使用 ImgBot 自动为 Github 项目优化图片](https://www.cnblogs.com/lfri/p/12257277.html) + + ### 2020-03-31 - [基于Vue2.0 + elementUI 后台管理平台](https://www.jianshu.com/p/deeddeabdef8) 这个elementUI的demo比较完整。项目地址在 [GitHub](https://github.com/xiahuahua/vue-admin-demo)上。 +