webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

modify:Node.js

Browse Source
This commit is contained in:
qianguyihao 2018-03-02 14:12:14 +08:00
parent ac353c5a07
commit a34fd4c6e1
9 changed files with 1390 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
08-Ajax/02-Ajax入门和发送http请求（get&post）.md
View File

@ -567,6 +567,86 @@ JSON(JavaScript Object Notation)：是ECMAScript的子集。作用是进行数
![](http://img.smyhvae.com/20180228_1740.gif) ![](http://img.smyhvae.com/20180228_1740.gif)
## jQuery 中的 Ajax
JQuery作为最受欢迎的js框架之一，常见的Ajax已经帮助我们封装好了，只需要调用即可。更为详细的api文档可以查阅：[w3cSchool_JQueryAjax](http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp)
格式举例：
```javascript
$.ajax({
url:'01.php',//请求地址
data:'name=fox&age=18',//发送的数据
type:'GET',//请求的方式
success:function (argument) {},// 请求成功执行的方法
beforeSend:function (argument) {},// 在发送请求之前调用,可以做一些验证之类的处理
error:function (argument) {console.log(argument);},//请求失败调用
})
```
代码举例：
（1）index.html
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery-ajax</title>
</head>
<body>
<input type="button" value="点击" id="btn">
<div id="showInfo"></div>
<script type="text/javascript" src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax({
url:"data.php",
dataType:"text",
type:"get",
success:function(data){
alert(data);
//$("#showInfo").html(data);
},
error:function(e){
console.log(e);
}
});
});
});
</script>
</body>
</html>
```
（2）data.php：
```php
<?php
$text = 'hello world';
echo $text;
?>
```
## 我的公众号 ## 我的公众号
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。 想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
@ -575,6 +655,3 @@ JSON(JavaScript Object Notation)：是ECMAScript的子集。作用是进行数
![](http://img.smyhvae.com/2016040102.jpg) ![](http://img.smyhvae.com/2016040102.jpg)

240
08-Ajax/03-函数封装：Ajax发送http请求（get&post）.md Normal file
View File

@ -0,0 +1,240 @@
## 函数封装
ajax_tool.js：
```javascript
// 方法：ajax get 五部曲
function ajax_get(url,data) {
// 异步对象
var ajax = new XMLHttpRequest();
// url 方法
// 如果是get发送数据 发送的格式为 xxx.php?name=jack&age=18
// 所以 这里 需要拼接 url
if (data) {
// 如果有值 需要拼接字符串
// 拼接为xxx.php?name=jack&age=18
url+='?';
url+=data;
}else{
}
ajax.open('get',url);
// 发送
ajax.send();
// 注册事件
ajax.onreadystatechange = function () {
// 在事件中 获取数据 并修改界面显示
if (ajax.readyState==4&& ajax.status==200) {
console.log(ajax.responseText);
}
}
}
// 方法：ajax_post五部曲
function ajax_post(url,data) {
// 异步对象
var ajax = new XMLHttpRequest();
// url 方法
ajax.open('post',url);
// 设置 请求报文
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 发送
if (data) {
// 如果 有值 post请求 是在 send中 发送给服务器
ajax.send(data);
}else{
ajax.send();
}
// 注册事件
ajax.onreadystatechange = function () {
// 在事件中 获取数据 并修改界面显示
if (ajax.readyState==4&&ajax.status==200) {
console.log(ajax.responseText);
}
}
}
// 方法：将 get 跟post 封装到一起
/*
参数1:url
参数2:数据
参数3:请求的方法
参数4:数据成功获取以后，调用的方法
*/
function ajax_tool(url,data,method,success) {
// 异步对象
var ajax = new XMLHttpRequest();
// get 跟post 需要分别写不同的代码
if (method=='get') {
// get请求
if (data) {
// 如果有值
url+='?';
url+=data;
}else{
}
// 设置 方法 以及 url
ajax.open(method,url);
// send即可
ajax.send();
}else{
// post请求
// post请求 url 是不需要改变
ajax.open(method,url);
// 需要设置请求报文
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 判断data send发送数据
if (data) {
// 如果有值 从send发送
ajax.send(data);
}else{
// 木有值 直接发送即可
ajax.send();
}
}
// 注册事件
ajax.onreadystatechange = function () {
// 在事件中 获取数据 并修改界面显示
if (ajax.readyState==4&&ajax.status==200) {
// console.log(ajax.responseText);
// 将 数据 让 外面可以使用
// return ajax.responseText;
// 当 onreadystatechange 调用时 说明 数据回来了
// ajax.responseText;
// 数据成功获取以后，执行方法success()。
//我们把获取的数据作为 success()的参数，意思是：
//success方法是外面的，数据是里面给的。那数据就变相地传递到了外面去【重要】
success(ajax.responseText);
}
}
}
```
## 函数调用（get方法）
test_get.html:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="测试get" id='ajax_get'>
</body>
</html>
<!-- 导入 封装的js -->
<script type="text/javascript" src='ajax_tool.js'></script>
<script type="text/javascript">
document.querySelector('#ajax_get').onclick = function () {
// 直接使用 封装的 工具函数即可
/*
参数1:url
参数2:数据
参数3:请求的方法
参数4：请求成功后，调用的方法
*/
var backData = ajax_tool('test_get.php','name=smyhvae&skill=code','get',function(data){
console.log(data);
});
// 测试
console.log(backData);
}
</script>
```
test_get.php：
```php
<?php
// 获取get提交的数据
echo $_GET['skill'];
?>
```
## 函数调用（post方法）
test_post.html：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="测试post" id='ajax_post'>
</body>
</html>
<!-- 导入 封装的js -->
<script type="text/javascript" src='ajax_tool.js'></script>
<script type="text/javascript">
document.querySelector('#ajax_post').onclick = function () {
// 直接使用 封装的 工具函数即可
/*
参数1:url
参数2:数据
参数3:请求的方法
参数4:数据获取成功调用的方法
*/
var backData = ajax_tool('02.test_post.php','friend=好丽友','post',function(data){
console.log(data);
});
// 测试
console.log(backData);
// 怎么样 处理数据 全部写在 匿名函数中
ajax_tool('02.test_post.php','friend=好丽友','post',function(data){
console.log(data);
// 修改页面的显示呢?
});
}
</script>
```
test_post.php：
```php
<?php
echo $_POST['friend'];
?>
```
工程文件：
- 2018-02-28-Ajax请求封装.rar

100
08-Ajax/04-Ajax.md
View File

@ -1,100 +0,0 @@
```html
```
```html
```
```html
```
```html
```
```html
```
```html
```
```html
```
```html
```
```html
```
```html
```
```html
```

169
08-Ajax/04-同源和跨域.md Normal file
View File

@ -0,0 +1,169 @@
## 同源和跨域
## 同源
同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。
## 跨域问题的解决方案
从我自己的网站访问别人网站的内容，就叫跨域。
20180228_2231.png
出于安全性考虑，浏览器不允许ajax跨域获取数据。
- iframe：处于安全性考虑，浏览器的开发厂商已经禁止了这种方式。
- JSONP：script 标签的 src 属性传递数据。
## JSONP
JSONP(JSON with Padding)：带补丁的 json，本质是利用了 `<script src=""></script>`标签具有可跨域的特性，由服务端返回一个预先定义好的JS函数的调用，并且将服务器数据以该函数参数的形式传递过来。此方法需要前后端配合完成。
我们知道， html标签的 src 属性是支持跨域的：
```html
<img src="http://img.smyhvae.com/2016040101.jpg" alt="">
```
jsonp 就是利用这个特性实现的跨域，但用的是 script 标签。如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- jsonp 就是 利用 src，实现的跨域 用的是 script标签 -->
<script type="text/javascript" src='http://192.168.141.137/2018-02-28/myData.php'></script>
</body>
</html>
```
上方那一行的代码，意思是：刷新A服务器上的index页面后，会去请求 B 服务器上的 `myData.php` 这个页面。而且请求的方式是 get 请求。
但是 B 服务器上的页面不是你想请求就可以请求的，大家一起配合才可以。
**具体实现步骤：**
需要首先声明的是，jsonp 只能通过 GET 方式进行请求。
（1）A客户端的代码：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
// 定义 eatFood()方法
function fn(data) {
console.log('我被调用了哦');
console.log(data);
}
</script>
<!-- 使用 script标签 发送了 get请求 去到了一个 php页面 -->
<script type="text/javascript" src='http://192.168.141.137/01.php?callback1=fn'></script>
```
我们来分析上方代码中的最后一行的那个url：A 客户端请求的是 B服务器上的 `01.php`页面。url里有个`callback1=fn`，意思是：callback1是A和B 之间的约定，约定后，将执行方法 fn。
其实，fn方法已经在最后一行代码中执行了。只不过，fn方法里的data数据，是从 B 服务器中获取的。
（2）B服务器端的代码：
```php
<?php
$mycallBack = $_GET['callback1'];
$arr = array("zhangsan","lisi","zhaoliu");
echo $mycallBack.`(`.json_encode($arr).`)`; //字符串拼接
?>
```
代码解释：
第一行的`callback1` 是A和B之间的约定，二者必须一致。
echo语句中输出的内容，即使要返回给A客户端的内容，此内容会保存在 A 客户端的fn方法的data里。 data[0]指的是 zhangsan。
`json_encode`指的是，将php对象转化为 json。
刷新A页面，输出结果为：
```
mycallBack([zhangsan","lisi","zhaoliu])
```
## jQuery 中的 JSONP
我们知道，jQuery 中发送 Ajax 请求，格式是：
```javascript
$("#btn").click(function(){
$.ajax({
url:"./data.php?callback1=fn",
dataType:"jsonp",
type:"get",
//jsonp:"callback1", //传递给B服务器的回调函数的名字（默认为 callback）
//jsonCallBack:"fn" //自定义的函数名称。默认为 jQuery 自动生成的随机函数名
success:function(data){
alert(data);
//$("#showInfo").html(data);
},
error:function(e){
console.log(e);
}
});
});
```
那如果数据是 JSONP，上方代码则改为：
```javascript
$("#btn").click(function(){
$.ajax({
url:"./data.php?fn",
dataType:"text",
type:"get",
success:function(data){
alert(data);
//$("#showInfo").html(data);
},
error:function(e){
console.log(e);
}
});
});
```
## 参考链接
参考链接：https://www.cnblogs.com/2050/p/3191744.html

128
08-Ajax/05-模板引擎.md Normal file
View File

@ -0,0 +1,128 @@
## 模版引擎
### 引入
我们在使用ajax请求数据时，返回的如果是一个 JSON 格式的字符串，我们需要将其包装到对应的HTML代码中，再添加到页面上，才能看到效果。那么这个包装得过程有没有简单的方法呢?
假设在 js 中有如下数据：
```javascript
var obj = {
name:"fox",
age:18,
skill:"卖萌"
};
```
希望包装为:
```html
<ul>
<li>姓名:fox</li>
<li>年龄:18</li>
<li>爱好:卖萌</li>
</ul>
```
我们可以通过模板插件来实现。
### 模版插件的原理
我们定义一段文本作为模板,读取文本,使用特殊的符号<%= 属性名 %>,通过正则表达式找到这些特殊的符号进行替换,是不是就实现了这样的效果呢?
### 常见的模板引擎
- BaiduTemplate(百度开发)
- ArtTemplate(腾讯开发)：[GitHub地址](https://github.com/aui/art-template)、[文档地址](https://aui.github.io/art-template/zh-cn/docs/)。
- velocity.js(淘宝开发)
- Handlebars
## ArtTemplate
标准语法：
```html
{{if user}}
<h2>{{user.name}}</h2>
{{/if}}
```
渲染模板：
```javascript
var data = {
title: `标签`,
list: [`文艺`, `博客`, `摄影`]
};
var html = template(`test`, data);
document.getElementById(`content`).innerHTML = html;
```
举例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/template-native-debug.js"></script>
<script src="js/jquery-2.2.0.js"></script>
<script id="tpl" type="text/html">
<h3><%= className %></h3>
<ul>
<% for(var i = 0; i< students.length;i++) { %>
<li><%= i+1 %>. <%= students[i] %></li>
<% } %>
</ul>
</script>
<script>
var data = {
className:"前端1期",
students:["张飞","刘备","诸葛亮","甄姬","小乔","汪汪"]
};
$(function (){
var html = template("tpl",data);
$("#demo").html(html);
})
</script>
</head>
<body>
<div id="demo">
</div>
</body>
</html>
```
效果：
20180301_1223.png

477
10-Node.js/01-Node.js入门.md Normal file
View File

@ -0,0 +1,477 @@
> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。
## Node.js的介绍
### 引擎
**引擎的特性**：
JS的内核即**引擎**。因为引擎有以下特性：
（1）转化的作用：
- 汽油柴油等等->动能
- 模板+数据--->页面
- js引擎：js 代码--->机器码\字节码
（2）移植性。
**有哪些引擎**：
![](http://img.smyhvae.com/20180302_1258.png)
备注：Node是用V8引擎去解析 js，此时，我们不用去考虑浏览器的兼容性问题。
### 什么是 Node.js
**1、官方解释：**
Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 运行环境。 Node.js使用了一个**事件驱动**、**非阻塞式I/O**的模型（ Node.js的特性），使其轻量级又高效。 Node.js 的包管理器 nmp 是全球最大的开源库生态系统。
![](http://img.smyhvae.com/20180301_1540.png)
如上图所示：
- Node 内部采用 Google Chrome 的 V8 引擎，作为 JavaScript 语言解释器；
- 通过自行开发的 libuv 库，调用操作系统资源。
**2、非官方解释：**
**Node.js**：是 JavaScript 语言在服务器端的运行环境（平台）。
**3、运行环境（平台）的含义：**
- 首先，JavaScript 语言通过 Node 在服务器运行，在这个意义上，Node 有点像 JavaScript 虚拟机。
- 其次，Node 提供大量工具库，使得 JavaScript 语言能与操作系统互动（比如读写文件、新建子进程），在这个意义上， Node 又是 JavaScript 的工具库。
**总结：**
Node.js 是一个 JavaScript 的运行环境（平台），不是一门语言，也不是 JavaScript 的框架。
### Node 的历史
- 2008年左右，随着 AJAX 的逐渐普及，Web 开发逐渐走向复杂化，系统化；
- 2009年2月，Ryan Dahl 想要创建一个轻量级，适应现代 Web 开发的平台；
- 2009年5月，Ryan Dahl 在 GitHub 中开源了最初版本，同年11月，JSConf 就安排了 Node 讲座；
- 2010年底，Joyent 公司资助，Ryan Dahl 也加入了该公司，专门负责 Node 的开发；
- 2011年7月，在微软的支持下登陆 Windows 平台。PS：node 的生产环境基本是在 Linux 下。
据 Node.js 创始人 Ryan Dahl 回忆，他最初希望采用 Ruby，但是 Ruby 的虚拟机效率不行。
注意：是 Node 选择了 JavaScript，不是 JavaScript 发展出来了一个 Node。
### 国内外的应用情况
以下几个项目都用到了 Node：
- https://github.com/nodejs/node-v0.x-archive/wiki/Projects,-Applications,-and-Companies-Using-Node
- https://nodejs.org/en/foundation/members/
- https://github.com/NetEase/pomelo
还有以下几个网站：
- LinkedIn移动版From RoR to Node.js, base on Joyent
- Paypal From Java to Node.js
- Twitter的队列：收集需要保存的Tweets，传给负责写入的进程
- 知乎的推送
- 网易、阿里、各种创业团队等
### Node.js的主要应用领域
- RESTFul API
- 实时通信：如消息推送等
- 高并发
- I/O阻塞
### 知名度较高的Node.js开源项目
![](http://img.smyhvae.com/20180301_2009.png)
- express：Node.js中最有名的web服务器框架。
- PM2：node 本来是单进程的，PM2可以实现和管理多进程。
- jade：非常优秀的模板引擎，不仅限于 js 语言。
- CoffeeScript：用简洁的方式展示 JavaScript 优秀的部分。
- Atom：文本编辑器。
- socket.io：实时通信框架。
- mocha：功能强大的 node.js 测试框架。
## Node.js的特点
### 部署简单方便
- 环境配置简单，只需要安装Node.js即可
- 注重约定
- 项目所需要扩展、插件、资源相对独立，不易冲突
### 事件驱动
根据当前出现的事件，调动资源进行相关的处理。
### 异步编程
![](http://img.smyhvae.com/20180302_1259.png)
异步的实现方式：
- 回调函数
- 事件监听
- 订阅/发布
### 高效与性能
### 单线程与多进程
### Node.js的缺点
## Node.js 的环境配置
### Node.js 安装包（不推荐）
去 Node.js 的[官网](https://nodejs.org/en/)下载安装包：
![](http://img.smyhvae.com/20180301_1505.png)
我们也可以在<https://nodejs.org/en/download/releases/>上下载历史版本。
![](http://img.smyhvae.com/20180301_1507.png)
注意，我们以一定要用偶数版（V4、V6等)，不要用奇数版（比如V5），因为奇数版不稳定。
我们并不推荐直接采用 Node.js.msi 安装包进行安装，不方便 node 的更新，原因如下：
- 以前版本安装的很多全局的工具包需要重新安装；
- 无法回滚到之前的版本；
- 无法在多个版本之间切换（很多时候我们要使用特定版本）。
因此，我们暂时先不用安装 Node.js，稍后用 NVM 的方式来安装 Node.js。
### 通过 NVM 安装Node.js（推荐）
**NVM**：node.js version manager，用来管理 node 的版本。安装的步骤如下。
（1）我们去[官网](https://github.com/coreybutler/nvm-windows/releases)下载 NVM 的安装包：
![](http://img.smyhvae.com/20180301_1603.png)
下载下来后，直接解压到 `D:\web`目录下：
![](http://img.smyhvae.com/20180301_1610.png)
（2）在上面的目录中，新建一个`settings.txt`文件，里面的内容填充如下：
```bash
root: D:\web\nvm
path: D:\web\nodejs
arch: 64
proxy
```
上方内容的解释：
- root 配置为：当前 nvm.exe 所在的目录
- path 配置为：node 快捷方式所在的目录
- arch 配置为：当前操作系统的位数（32/64）
- proxy 不用配置
（3）配置环境变量：
- `NVM_HOME` = `D:\web\nvm`（当前 nvm.exe 所在目录）
- `NVM_SYMLINK` = `D:\web\nodejs` （node 快捷方式所在的目录）
- PATH += `;%NVM_HOME%;%NVM_SYMLINK%`
配置成功后，重启资源管理器。
**验证：**(在 cmd 中输入命令)
（1）输入`nvm`命令查看环境变量是否配置成功：
![](http://img.smyhvae.com/20180301_1645.png)
（2）输入 `nvm ls`，查看已安装的所有 node 版本。
（3）输入 `nvm -v`，查看 已安装的 nvm 版本。
（4）输入 `node -v`，查看正在使用的 node 版本。
- **参考链接**：[安装npm，nvm，node](https://segmentfault.com/a/1190000011114680)
如果 node 安装失败，可以参考上面这个链接。
### Mac 下安装 NVM
打开 终端.app，输入：
```
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash
source ~/.nvm/nvm.sh
```
安装以后，nvm的执行脚本，每次使用前都要激活，建议将其加入~/.bashrc文件（假定使用Bash）。激活后，就可以安装指定版本的Node。
也可以使用 Homebrew 安装（更方便，维护更简单）：
```
brew install nvm
```
### NVM 的常用命令
安装指定版本的node：
```
nvm install 版本号 [arch]
```
比如：`nvm install 4.2.2`。
卸载指定版本node：
```
nvm uninstall 版本号
```
切换使用指定版本的node：
```
nvm use 版本号 [arch]
```
查看当前使用的 nvm 版本：
```
nvm -v
```
查看本地安装的所有的 node 版本：
```
nvm list|ls
```
### Node 的常用命令
在 查看 node 的版本：
```
$ node -v
```
执行脚本字符串：
```
$ node -e 'console.log("Hello World")'
```
运行脚本文件：
```
$ node index.js
$ node path/index.js
$ node path/index
```
查看帮助：
```
$ node --help
```
**进入 REPL 环境：**
```
$ node
```
REPL 的全称：Read、Eval、 Print、Loop。类似于浏览器的控制台。
![](http://img.smyhvae.com/20180301_1900.png)
如果要退出 REPL 环境，可以输入`.exit` 或 `process.exit() `。
在 VS Code 里，我们可以在菜单栏选择“帮助->切换开发人员工具”，打开console控制台。
## 包和 NPM
### 什么是包
由于 Node 是一套轻内核的平台，虽然提供了一系列的内置模块，但是不足以满足开发者的需求，于是乎出现了包（package）的概念：
与核心模块类似，就是将一些预先设计好的功能或者说 API 封装到一个文件夹，提供给开发者使用。
Node 本身并没有太多的功能性 API，所以市面上涌现出大量的第三方人员开发出来的 Package。
### 包的加载机制
如果 Node中自带的包和第三方的包名冲突了，该怎么处理呢？原则是：
- 先在系统核心（优先级最高）的模块中找；
- 然后到当前项目中 node_modules 目录中找。
比如说：
```
requiere(`fs`)
```
那加载的肯定是系统的包。所以，我们尽量不要创建一些和现有的包重名的包。
### NPM的概念
>包的生态圈一旦繁荣起来，就必须有工具去来管理这些包。NPM 应运而生。
**NPM**：Node Package Manager。官方链接： <https://www.npmjs.com/>
随着时间的发展，NPM 出现了两层概念：
- 一层含义是 Node 的开放式模块登记和管理系统，亦可以说是一个生态圈，一个社区。
- 另一层含义是 Node 默认的模块管理器，是一个命令行下的软件，用来安装和管理 Node 模块。
### NPM 的安装（不需要单独安装）
NPM 不需要单独安装。默认在安装 Node 的时候，会连带一起安装 NPM：
![](http://img.smyhvae.com/20180302_1105.png)
NVM、Node、NPM 安装之后，目录分布如下：
![](http://img.smyhvae.com/20180302_1134.png)
![](http://img.smyhvae.com/20180302_1137.png)
![](http://img.smyhvae.com/20180302_1138.png)
输入 `npm -v`，查看 npm 的版本：
![](http://img.smyhvae.com/20180302_1139.png)
如果上方命令无效，可能是之前的 node 并没有完全安装成功。解决办法：<https://segmentfault.com/a/1190000011114680>
另外，Node 附带的 NPM 可能不是最新版本，可以用下面的命令，更新到最新版本：
```
$ npm install npm -g
```
### 配置 NPM 的全局目录（暂略）
NPM 默认安装到当前正在使用 Node 版本所在目录下。我们建议重新配置 NPM 的全局目录。
输入`npm config ls`，查看：
![](http://img.smyhvae.com/20180302_1210.png)
### NRM的安装
由于 NPM 的资源都在国外，有时候会被墙，导致无法下载或者很慢。此时可以用到NRM。
**NRM**：Node Registry Manager。作用是：**切换和管理包的镜像源**。项目地址：<https://www.npmjs.com/package/nrm>
安装 NRM：
```
npm install -g nrm
```
![](http://img.smyhvae.com/20180302_1208.png)
**NRM 的常用命令：**
```
nrm ls //显示全部的镜像
nrm use taobao // 使用淘宝的镜像
```
效果入下：
![](http://img.smyhvae.com/20180302_1215.png)
推荐的国内加速镜像：<https://npm.taobao.org/>
## 我的公众号
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)

142
10-Node.js/02-事件驱动和非阻塞机制.md Normal file
View File

@ -0,0 +1,142 @@
## 异步编程
### 异步操作
- Node 采用 Chrome V8 引擎处理 JavaScript 脚本。V8 最大特点就是**单线程运行**，一次只能运行一个任务。
- Node 大量采用异步操作（asynchronous operation），即任务不是马上执行，而是插在任务队列的尾部，等到前面的任务运行完后再执行。
- 提高代码的响应能力。
异步IO也叫非阻塞IO。例如读文件，传统的语言，基本都是读取完毕才能进行下一步操作。非阻塞就是Node的callback，不会影响下一步操作，等到文件读取完毕，回调函数自动被执行，而不是在等待。
### 异步操作回调
由于系统永远不知道用户什么时候会输入内容，所以代码不能永远停在一个地方。
Node 中的操作方式就是以异步回调的方式解决无状态的问题。
### 回调函数的设计：错误优先
异步操作中，无法通过 try catch 捕获异常。
这是因为回调函数主要用于异步操作，当回调函数运行时，前期的操作早结束了，错误的执行栈早就不存在了，传统的错误捕捉机制try…catch对于异步操作行不通，所以只能把错误交给回调函数处理。
**统一约定：**
回调函数的第一个参数默认接收错误信息，第二个参数才是真正的回调数据（便于外界获取调用的错误情况）：
```
foo1('赵小黑', 19, function(error, data) {
if(error) throw error;
console.log(data);
});
```
### 异步回调的问题
相比较于传统的代码：
- 异步事件驱动的代码
- 不容易阅读
- 不容易调试
- 不容易维护
另外还有个问题是**回调黑洞：**（回调黑洞）
```javascript
do1(function() {
do2(function() {
do3(function() {
do4(function() {
do5(function() {
do6()
});
});
});
});
});
```
## 进程和线程
### 进程（进行中的程序）
- 每一个 **正在运行** 的应用程序都称之为进程。
- 每一个应用程序运行都至少有一个进程。
- 进程是用来给应用程序提供一个运行的环境。
- 进程是操作系统为应用程序分配资源的一个单位。
### 线程
- 用来执行应用程序中的代码
- 在一个进程内部，可以有很多的线程
- 在一个线程内部，同时只可以干一件事
- 传统的开发方式大部分都是 I/O 阻塞的，所以需要多线程来更好的利用硬件资源。
线程并不是越多越好。
### 多线程的弊端
缺点一：
- 创建线程耗费。
- 线程数量有限。
- CPU 在不同线程之间转换，有个上下文转换，这个转换非常耗时。
所谓的多线程其实都是假的，对于单核CPU而言，它们无非是在抢占 CPU 资源。线程和线程之间需要**切换和调度**，这是很耗费资源的。
缺点二：
- 线程之间共享某些数据，同步某个状态都很麻烦。
就算 CPU 是多核的，现在的问题是，线程与线程之间如果要共享数据，该怎么办？比如 A 线程要访问 B 线程的变量。
## 事件驱动和非阻塞机制
参考链接：<https://www.kancloud.cn/revin/nodejs/176211>
总结：
- Node 中将所有的阻塞操作交给了内部线程池实现。
- Node 主线程本身，主要就是不断的**往返调度**。
### 平台实现差异
由于 Windows 和 *nix 平台（其他平台）的差异，Node 提供了 libuv 作为抽象封装层，保证上层的 Node 与下层的自定义线程池及 IOCP 之间各自独立。
如下图所示：
20180301_2252.png
##

98
10-Node.js/03-模块化结构.md Normal file
View File

@ -0,0 +1,98 @@
## 全局对象
### global
类似于客户端 JavaScript 运行环境中的 window。
## process
用于获取当前的 Node 进程信息，一般用于获取环境变量之类的信息。
### console
Node 中内置的 console 模块，提供操作控制台的输入输出功能，常见使用方式与客户端类似。
## 全局函数
- setInterval(callback, millisecond)
- clearInterval(timer)
- setTimeout(callback, millisecond)
- clearTimeout(timer)
- Buffer：Class
- 用于操作二进制数据
- 以后介绍
## Node 调试
### 最简单的调试
最方便也是最简单的调试：console.log()
### Node 原生的调试
网址：<https://nodejs.org/api/debugger.html>
### 第三方模块提供的调试工具
```
$ npm install node-inspector –g //方式一
$ npm install devtool -g //方式二
```
### 开发工具的调试
- Visual Studio Code
- WebStorm
## 模块化结构
Node 实现 CommonJS 规范，所以可以使用模块化的方式组织代码结构。
- Node 采用的模块化结构是按照 CommonJS 规范。
- 模块与文件是一一对应关系，即加载一个模块，实际上就是加载对应的一个模块文件。
### CommonJS 规范
CommonJS 就是一套约定标准，不是技术。用于约定我们的代码应该是怎样的一种结构。
参考链接：
- <http://wiki.commonjs.org/wiki/CommonJS>
## 常用内置模块
- `path`：处理文件路径。
- `fs`：操作（CRUD）文件系统。
- `child_process`：新建子进程。
- `util`：提供一系列实用小工具。
- `http`：提供 HTTP 服务器功能。
- `url`：用于解析 URL。
- `querystring`：解析 URL 中的查询字符串。
- `crypto`：提供加密和解密功能。
总结：更多内容可以参考 api文档：<https://nodejs.org/api/>

56
11-开发积累/01-JavaScript模块化.md Normal file
View File

@ -0,0 +1,56 @@
## 前言
网站越来越复杂，js代码、js文件也越来越多，会遇到什么问题？
- 命名冲突
- 文件依赖
- 各种问题
### 程序模块化
- 日期模块
- 数学计算模块
- 日志模块
- 登陆认证模块
- 报表展示模块
所有这些模块共同组成了程序软件系统。
一次编写，多次使用，才是提高效率的核心。
### 程序模块化开发的优点
开发效率高：代码方便重用，别人开发的模块直接拿过来就可以使用，不需要重复开发类似的功能。
方便后期维护：软件的声明周期中最长的阶段其实并不是开发阶段，而是维护阶段，需求变更比较频繁。使用模块化的开发，方式更容易维护。