modify:Node.js
This commit is contained in:
qianguyihao
parent
ac353c5a07
commit
a34fd4c6e1
@ -567,6 +567,86 @@ JSON(JavaScript Object Notation)：是ECMAScript的子集。作用是进行数
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 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`）。
|
||||
@ -575,6 +655,3 @@ JSON(JavaScript Object Notation)：是ECMAScript的子集。作用是进行数
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
240
08-Ajax/03-函数封装：Ajax发送http请求（get&post）.md
Normal file
240
08-Ajax/03-函数封装：Ajax发送http请求（get&post）.md
Normal 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
|
||||
@ -1,100 +0,0 @@
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
169
08-Ajax/04-同源和跨域.md
Normal file
169
08-Ajax/04-同源和跨域.md
Normal 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
128
08-Ajax/05-模板引擎.md
Normal 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
477
10-Node.js/01-Node.js入门.md
Normal file
@ -0,0 +1,477 @@
|
||||
|
||||
> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
|
||||
## Node.js的介绍
|
||||
|
||||
|
||||
### 引擎
|
||||
|
||||
**引擎的特性**：
|
||||
|
||||
JS的内核即**引擎**。因为引擎有以下特性：
|
||||
|
||||
（1）转化的作用：
|
||||
|
||||
- 汽油柴油等等->动能
|
||||
|
||||
- 模板+数据--->页面
|
||||
|
||||
- js引擎：js 代码--->机器码\字节码
|
||||
|
||||
（2）移植性。
|
||||
|
||||
|
||||
**有哪些引擎**：
|
||||
|
||||
|
||||
|
||||
|
||||
备注：Node是用V8引擎去解析 js，此时，我们不用去考虑浏览器的兼容性问题。
|
||||
|
||||
### 什么是 Node.js
|
||||
|
||||
**1、官方解释：**
|
||||
|
||||
Node.js 是一个基于 **Chrome V8** 引擎的 JavaScript 运行环境。 Node.js使用了一个**事件驱动**、**非阻塞式I/O**的模型（ Node.js的特性），使其轻量级又高效。 Node.js 的包管理器 nmp 是全球最大的开源库生态系统。
|
||||
|
||||
|
||||
|
||||
如上图所示：
|
||||
|
||||
- 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开源项目
|
||||
|
||||
|
||||
|
||||
- express：Node.js中最有名的web服务器框架。
|
||||
|
||||
- PM2：node 本来是单进程的，PM2可以实现和管理多进程。
|
||||
|
||||
- jade：非常优秀的模板引擎，不仅限于 js 语言。
|
||||
|
||||
- CoffeeScript：用简洁的方式展示 JavaScript 优秀的部分。
|
||||
|
||||
- Atom：文本编辑器。
|
||||
|
||||
- socket.io：实时通信框架。
|
||||
|
||||
- mocha：功能强大的 node.js 测试框架。
|
||||
|
||||
|
||||
## Node.js的特点
|
||||
|
||||
### 部署简单方便
|
||||
|
||||
- 环境配置简单，只需要安装Node.js即可
|
||||
|
||||
- 注重约定
|
||||
|
||||
- 项目所需要扩展、插件、资源相对独立，不易冲突
|
||||
|
||||
|
||||
|
||||
### 事件驱动
|
||||
|
||||
根据当前出现的事件，调动资源进行相关的处理。
|
||||
|
||||
|
||||
### 异步编程
|
||||
|
||||
|
||||
|
||||
异步的实现方式：
|
||||
|
||||
- 回调函数
|
||||
|
||||
- 事件监听
|
||||
|
||||
- 订阅/发布
|
||||
|
||||
|
||||
|
||||
### 高效与性能
|
||||
|
||||
### 单线程与多进程
|
||||
|
||||
### Node.js的缺点
|
||||
|
||||
|
||||
## Node.js 的环境配置
|
||||
|
||||
### Node.js 安装包（不推荐）
|
||||
|
||||
去 Node.js 的[官网](https://nodejs.org/en/)下载安装包：
|
||||
|
||||
|
||||
|
||||
我们也可以在<https://nodejs.org/en/download/releases/>上下载历史版本。
|
||||
|
||||
|
||||
|
||||
|
||||
注意，我们以一定要用偶数版（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 的安装包：
|
||||
|
||||
|
||||
|
||||
下载下来后，直接解压到 `D:\web`目录下：
|
||||
|
||||
|
||||
|
||||
（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`命令查看环境变量是否配置成功：
|
||||
|
||||
|
||||
|
||||
|
||||
（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。类似于浏览器的控制台。
|
||||
|
||||
|
||||
|
||||
如果要退出 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：
|
||||
|
||||
|
||||
|
||||
NVM、Node、NPM 安装之后，目录分布如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
输入 `npm -v`，查看 npm 的版本：
|
||||
|
||||
|
||||
|
||||
如果上方命令无效，可能是之前的 node 并没有完全安装成功。解决办法：<https://segmentfault.com/a/1190000011114680>
|
||||
|
||||
另外，Node 附带的 NPM 可能不是最新版本，可以用下面的命令，更新到最新版本：
|
||||
|
||||
```
|
||||
$ npm install npm -g
|
||||
```
|
||||
|
||||
|
||||
### 配置 NPM 的全局目录（暂略）
|
||||
|
||||
NPM 默认安装到当前正在使用 Node 版本所在目录下。我们建议重新配置 NPM 的全局目录。
|
||||
|
||||
输入`npm config ls`，查看：
|
||||
|
||||
|
||||
|
||||
### NRM的安装
|
||||
|
||||
由于 NPM 的资源都在国外，有时候会被墙，导致无法下载或者很慢。此时可以用到NRM。
|
||||
|
||||
**NRM**：Node Registry Manager。作用是：**切换和管理包的镜像源**。项目地址：<https://www.npmjs.com/package/nrm>
|
||||
|
||||
安装 NRM：
|
||||
|
||||
```
|
||||
npm install -g nrm
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**NRM 的常用命令：**
|
||||
|
||||
```
|
||||
nrm ls //显示全部的镜像
|
||||
|
||||
nrm use taobao // 使用淘宝的镜像
|
||||
```
|
||||
|
||||
效果入下：
|
||||
|
||||
|
||||
|
||||
|
||||
推荐的国内加速镜像：<https://npm.taobao.org/>
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
142
10-Node.js/02-事件驱动和非阻塞机制.md
Normal file
142
10-Node.js/02-事件驱动和非阻塞机制.md
Normal 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
98
10-Node.js/03-模块化结构.md
Normal 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
56
11-开发积累/01-JavaScript模块化.md
Normal file
@ -0,0 +1,56 @@
|
||||
|
||||
|
||||
## 前言
|
||||
|
||||
|
||||
网站越来越复杂，js代码、js文件也越来越多，会遇到什么问题？
|
||||
|
||||
- 命名冲突
|
||||
|
||||
- 文件依赖
|
||||
|
||||
- 各种问题
|
||||
|
||||
|
||||
|
||||
### 程序模块化
|
||||
|
||||
- 日期模块
|
||||
|
||||
- 数学计算模块
|
||||
|
||||
- 日志模块
|
||||
|
||||
- 登陆认证模块
|
||||
|
||||
- 报表展示模块
|
||||
|
||||
所有这些模块共同组成了程序软件系统。
|
||||
|
||||
一次编写，多次使用，才是提高效率的核心。
|
||||
|
||||
|
||||
### 程序模块化开发的优点
|
||||
|
||||
开发效率高：代码方便重用，别人开发的模块直接拿过来就可以使用，不需要重复开发类似的功能。
|
||||
|
||||
|
||||
|
||||
方便后期维护：软件的声明周期中最长的阶段其实并不是开发阶段，而是维护阶段，需求变更比较频繁。使用模块化的开发，方式更容易维护。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user