## HTTP定义
全称超文本传输协议（HyperText Transfer Protocol），是一种应用层协议。HTTP是万维网的数据通信的基础。
TCP/IP五层：物理层 - 数据链路层 - 网络层 - 传输层 - 应用层



## HTTP的概念
HTTP基于请求-响应模式
HTTP由客户端发起请求到服务器（默认端口80），客户端被称为user agent（用户代理程序）
HTTP可以不基于TCP/IP协议传输

## HTTP请求过程
1. 浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;
2. 解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立TCP连接;
3. 浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求（请求的方法、URL、协议版本、请求头部和请求数据），该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;
4. 服务器对浏览器请求作出响应（协议的版本、成功或者错误代码、服务器信息、响应头部和响应数据），并把对应的 html 文本发送给浏览器;
释放 TCP连接;
5. 浏览器将该 html 文本并显示内容; 

## HTTP的特点
+ 基于请求响应模式
+ 无状态 - cookie
+ 无连接 - 不建立长久连接，keepalive_timeout

## HTTP协议的请求方法
HTTP/1.1协议中规定了8中请求方法
1. GET - 使用GET方法应该只用在读取数据，而不应当被用于产生“副作用”的操作中
2. HEAD - 与GET方法一样，都是向服务器发出指定资源的请求。只不过服务器将不传回资源的本文部分
3. *POST - 向指定资源提交数据，请求服务器进行处理
4. PUT - 向指定资源位置上传其最新内容。
5. DELETE - 请求服务器删除Request-URI所标识的资源
6. TRACE - 回显服务器收到的请求，主要用于测试或诊断。
7. OPTIONS - 这个方法可使服务器传回该资源所支持的所有HTTP请求方法。
8. CONNECT - HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器
9. *PATCH - 扩展方法

## HTTP状态码
+ 1xx消息——请求已被服务器接收，继续处理
+ 2xx成功——请求已成功被服务器接收、理解、并接受
+ 3xx重定向——需要后续操作才能完成这一请求
+ 4xx客户端错误——请求含有词法错误或者无法被执行
+ 5xx服务器错误——服务器在处理某个正确请求时发生错

## URL
https://notifications.console.aliyun.com/?spm=5176.12207334.top-nav.dnews.7c121cbeuBETPj&accounttraceid=4b5bedef722546cea4ceeace1c47ea11zjgx#/innerMsg/all/0

+ http(s): 传输协议
+ //: 层级URL标记符号
+ notifications.console.aliyun.com：服务器
+ 80: 端口
+ /:路径
+ spm=5176.12207334.top-nav.dnews.7c121cbeuBETPj&accounttraceid=4b5bedef722546cea4ceeace1c47ea11zjgx：查询
+ #/innerMsg/all/0 片段

## HTTP请求格式

![attach_167a8a1d363c6bc3.jpg](http://www.tansanpi.cn/static/img/8f3501679340f946c355ab4c7adc9ff1.attach_167a8a1d363c6bc3.jpg)

![attach_167a8a23dfe2bbda.png](http://www.tansanpi.cn/static/img/a40676d74c2929ce9b5acd40aaaa3c5f.attach_167a8a23dfe2bbda.png)
## HTTP响应格式

![attach_167a8a1378ac6dc8.jpg](http://www.tansanpi.cn/static/img/60c9c0a78b907c6e8ed7bb63ef61001b.attach_167a8a1378ac6dc8.jpg)

![attach_167a8a0d06a6d709.png](http://www.tansanpi.cn/static/img/fed669c04888d28ebab9996c534f182e.attach_167a8a0d06a6d709.png)

http协议

## Deno是什么
Deno 是一个 JavaScript/TypeScript 的运行时，默认使用安全环境执行代码，有着卓越的开发体验。



## Deno vs Node
+ Deno 不使用 npm，而是使用 URL 或文件路径引用模块。
+ Deno 在模块解析算法中不使用 package.json。
+ Deno 中的所有异步操作返回 promise，因此 Deno 提供与 Node 不同的 API。
+ Deno 需要显式指定文件、网络和环境权限。
+ 当未捕获的错误发生时，Deno 总是会异常退出。
+ 使用 ES 模块，不支持 require()。第三方模块通过 URL 导入。
+ Node 使用 C++ 实现，Deno 使用 Rust

## Deno 安装
使用 PowerShell (Windows)
```powershell
iwr https://deno.land/x/install/install.ps1 -useb | iex
```
Shell (Mac, Linux)
```bash
curl -fsSL https://deno.land/x/install/install.sh | sh
```
Chocolatey (Windows)
```powershell
choco install deno
```
Scoop (Windows)
```powershell
scoop install deno
```
## 第一个例子
welcome.ts
```javascript
console.log('Welcome to Deno!');
```
运行结果
```powershell
deno run https://deno.land/std/examples/welcome.ts
```
## 运行安全
代码
```javascript
import Aqua from 'https://deno.land/x/aqua/aqua.ts';
const app = new Aqua(8000);

app.get('/', (req) => {
    return 'Deno server running on port 8000';
});
```
添加权限
```powershell
deno run --allow-net server.ts
```
## import map
import map file
```json
{
   "imports": {
      "aqua/": "https://deno.land/x/aqua/"
   }
}
```
代码
```javascript
import Aqua from 'aqua/aqua.ts';

const app = new Aqua(8000);

app.get('/', () => {
    return 'Deno server running on port 8000';
});
```
执行命令
```powershell
deno run --allow-net --import-map=import_map.json server-with-map.ts
```

Deno简介

__声明__ 本篇中代码和部分描述参考和摘录自[JavaScript设计模式与实战](http://www.ituring.com.cn/book/1632)一书

### 举个类子
很多公司的年终奖都是根据员工的工资基数和年底绩效来发放的。比如，某个公司的绩效和奖金对应关系如下：
- S：4倍工资
- A：3倍工资
- B：2倍工资



#### 最初的实现
```javascript
var calculateBonus = function(level, salary) {
    if (level === 'S') {
        return 4 * salary;
    }

    if (level === 'A') {
        return 3 * salary;
    }

    if (level === 'B') {
        return 2 * salary;
    }
}

calculateBonus('S', 20000);  // 输出80000
calculateBonus('B', 10000); // 输出20000
```
上面代码的错误显而易见
- calculateBonus函数比较庞大，包含很多if-else语句
- calculateBonus函数缺乏弹性，如果要增加一种绩效或者改变某个绩效的奖励系数。我们必须要深入到calculateBonus内部。
- 算法的复用性差，如果其他地方也要计算奖金，我们的选择只有复制和粘贴。

#### 使用组合函数重构
```javascript
var performanceS = function(salary) {
    return salary * 4;
};

var performanceA = function(salary) {
    return salary * 3;
};

var performanceB = function(salary) {
    return salary * 2;
};

var calculateBonus = function(level, salary) {
    if (level === 'S') {
        return performanceS(salary);
    }

    if (level === 'A') {
        return performanceA(salary);
    }

    if (level === 'B') {
        return performanceB(salary);
    }
};

calculateBonus('A', 10000); // 输出30000
```
我们的程序得到了一点改善，但是我们还是没有解决最重要的问题：calculateBonus函数会越来越大，并且随着系统的变化缺乏弹性。

#### 使用策略模式重构
策略模式指的是定义一系列的算法，把它们一个个封装起来。在这里，我们使用策略模式将算法的使用和算法本身分离开来。

##### 常规的实现
```javascript
var performanceS = function() {};

performanceS.prototype.calculate = function(salary) {
    return salary * 4;
}

var performanceA = function() {};

performanceA.prototype.calculate = function(salary) {
    return salary * 3;
}

var performanceB = function() {};

performanceB.prototype.calculate = function(salary) {
    return salary * 2;
}

var Bonus = function() {
    this.salary = null; // 工资基数
    this.strategy = null; // 要执行的策略
}

/**
 * 设置工资基数
 * @param {Number} salary
*/
Bonus.prototype.setSalary = function(salary) {
    this.salary = salary;
}

/**
 * 设置策略
 * @param {Object} strategy
 */
Bonus.prototype.setStrategy = function(strategy) {
    this.strategy = strategy;
}

/**
 * 计算奖金
 * @return {Number} 奖金数
 */
Bonus.prototype.getBonus = function() {
    return this.strategy.calculate(this.salary);
}

var bonus = new Bonus();

bonus.setSalary(5000);
bonus.setStrategy(new performanceS());
console.log(bonus.getBonus()); // 输出20000

bonus.setStrategy(new performanceA());
console.log(bonus.getBonus()); // 输出15000
```
可以看到使用策略模式后，代码变得更加清晰，各个类的职责也更加鲜明。

##### JavaScript版本的策略模式
```javascript
var strategies = {
    'S': function(salary) {
        return salary * 4;
    },

    'A': function(salary) {
        return salary * 3;
     },

    'B': function (salary) {
        return salary * 2;
    }
};

var calculateBonus = function(level, salary) {
    return strategies[ level ](salary);
};

console.log(calculateBonus('S', 10000)); // 输出4000
```
PeterNoring在他的演讲中曾说过：“在函数作为一等对象的语言中，策略模式是隐形的。strategy就是值为函数的变量。”在JavaScript中，除了用类来封装算法，使用函数当然也是一种选择。这些“算法”被封装到函数中并且四处传递，也就是我们常说的“高阶函数”。根据这一原理，我们对代码可以做进一步的改进。

```javascript
var S = function(salary) {
    return salary * 4;
};

var A = function(salary) {
    return salary * 3;
};

var B = function(salary) {
    return salary * 2;
};

var calculateBonus = function(func, salary) {
    return func(salary);
};

console.log(calculateBonus(S, 10000)); // 输出40000
```
### 基于策略模式的表单校验
在web项目中，注册、登录、修改用户信息等都离不开表单。在将用户输入的数据提交到后台之前，我们常常会在客户端做一些力所能及的校验。
假设我们正在编写一个注册的页面，注册表单有以下的几条校验规则。
- 用户名不能为空。
- 密码长度不能小于6。
- 手机号码必须符合格式。

#### 第一个版本
先来看看我们通常的做法：
```html
<html>
    <head>
        <meta charset="utf8">
        <title>JavaScript设计模式 - 策略模式</title>
        <style>
            .form-group {
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <form action="" id="form-signup" method="post">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" name="username" />
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" name="password" />
                </div>
                <div class="form-group">
                    <label for="phone">手机号</label>
                    <input type="tel" name="phone" />
                </div>
                <button type="submit">提交</button>
            </form>
        </div>
        <script type="text/javascript">
            var formSignUp = document.getElementById('form-signup');
            
            formSignUp.onsubmit = function() {
                if (formSignUp.elements.username.value === '') {
                    alert('用户名不能为空');
                    return false;
                }

                if (formSignUp.elements.password.value.length < 6) {
                    alert('密码长度不能小于6');
                    return false;
                }

                if (!/(^1[3|5|8|7][0-9]{9}$)/.test(formSignUp.elements.phone.value)) {
                    alert('非法的手机号');
                    return false;
                }

                return true;
            }
        </script>
    </body>
</html>
```
上面的代码的缺点，跟我们计算奖金的第一个版本的代码一样：
- formSignUp.onsubmit比较庞大，里面很多if-else语句。
- formSingUp.onsubmit缺乏弹性，如果增加了一种新的校验规则或者更改某个规则的参数，我们必须深入到函数的内部。
- 算法的复用性差

#### 使用策略模式重构
根据经验，我们把这些校验规则都封装成策略对象。

```javascript
var strategies = {
    // 空值校验
    isNonEmpty: function(value, errorMsg) {
        if (value === '') {
            return errorMsg;
        }
    },
    // 长度校验
    minLength: function(value, length, errorMsg) {
        if (value.length < length) {
            return errorMsg;
        }
    },
    // 手机号码格式校验
    isMobile: function(value, errorMsg) {
        if (!/^1[3|5|7|8][0-9]{9}$/.test(value)) {
            return errorMsg;
        }
    }
};
```
接下来我们实现一个Validator类，Validator类负责接收用户委托的strategy对象。我们首先看看它的使用方法。
```javascript
var validateFunc = function() {
    var validator = new Validator();
    // 添加验证规则
    validator.add(formSignUp.elements.username, 'isNonEmpty', '用户名不能为空');
    validator.add(formSignUp.elements.password, 'minLength:6', '密码长度不能小于6');
    validator.add(formSignUp.elements.phone, 'isMobile', '非法的手机号');
    
    return validator.start();
};

var formSignUp = document.getElementById('form-signup');
formSignUp.onsubmit = function() {
    var errorMsg = validateFunc();
    if (errorMsg) {
        alert(errorMsg);
        return false; // 校验错误则阻止表单的提交
    }
};
```
从上面的代码我们看到，我们初始化了一个validator对象，并且通过validator.add()方法添加一些校验规则。validator.add方法接收3各个参数，以下面的代码进行说明。

```javascript
validator.add(formSignUp.elements.password, 'minLength:6', '密码长度不能小于6');
```
- formSignUp.elements.password密码输入框的的值
- 'minLength:6'是一个以冒号分割的字符串。冒号的前面minLength代表strategy对象，冒号后面的数字6代表在校验规则中用到的一些参数。'minLength:6'的意思就是formSignUp.elements.password这个值得最小长度为6.如果字符串中不包含冒号，说明校验规则不需要参数，比如'isEmpty'。
- 第三个参数是当校验未通过的时候返回的错误信息。

当我们往validator对象里添加完规则后，我们会调用validator.start()方法来启动校验。如果校验返回了一个errorMsg，说明校验没有通过，此时需要让formSignUp.onsubmit方法返回false来阻止表单提交。

Validator类的实现：
```javascript
var Validator = function() {
    this.cache = [];
};

Validator.prototype.add = function(el, rule, errorMsg) {
    var arr = rule.split(':'); // 把strategy和参数分开
    this.cache.push(function() { // 将校验步骤用空函数包起来，并且放入cache中
        var strategy = arr.shift(); // 用户挑选的strategy
        arr.unshift(el.value);
        arr.push(errorMsg);
        return strategies[ strategy ].apply(el, arr);
    });
};

Validator.prototype.start = function() {
    for (var i =0, validatorFunc; validatorFunc =this.cache[ i++ ]; ) {
        var msg = validatorFunc();
        if (msg) {
            return msg;
        }
    }
};
```
上面的代码我们只是专注在策略模式的使用上，因此存在小小的缺陷。比如我们要给用户名输入框添加一个新的校验规则只能通过下面的做法。
```javascript
validator.add(formSignUp.elements.username, 'isNonEmpty', '用户名不能为空');

// 添加新的规则
validator.add(formSignUp.elements.username, 'minLength:4', '用户名长度不能小于4');
```
有没有更好的办法呢，留给大家去思考。

JavaScript设计模式之策略模式

__声明__ 本篇中代码和部分描述参考和摘录自[JavaScript设计模式与实战](http://www.ituring.com.cn/book/1632)一书

单例模式的定义是：__保证一个类仅有一个实例，并提供一个访问它的全局访问点__



### 实现举例
#### 常规的单例模式
``` javascript
function Singleton() {
    this.instance = null;
    this.name = '';
}

Singleton.getInstance = function() {
    if (null === this.instance) {
        this.instance = new Singleton();
    }
    return this.instance;
}

var s1 = Singleton.getInstance();
var s2 = Singleton.getInstance();

console.log(s1 === s2);
```
这是单例模式的常规实现方式，我们通过Singleton.getInstance()方法可以获得Singleton类的一个唯一对象。

#### 另外一种实现
``` javascript
var Singleton = (function() {
    var _instance = null;
    
    function Singleton() {
        this.name = '';
    }

    return function() {
        if (null === _instance) {
            _instance = new Singleton();
        }
        
        return _instance;
    }
})();

var s1 = new Singleton();
var s2 = new Singleton();

console.log(s1 === s2);
```

#### 更适合JavaScript的单例模式
JavaScript拥有全局变量，这是它的缺点，但是有时候也会为我们带来一些好处。

``` javascript
var singleton = {
    name: '',
    getName: function() {
        return this.name;
    }
}
```
singleton是一个全局变量，每次访问它的时候它都是唯一的。当全局变量太多的，我们也可以使用命名空间来区分。

### 单例模式的应用
#### 单例的div
我们可以使用单例模式实现一个单例的div，这可以应用在比如弹出登录窗口中。
``` javascript
var SingleDiv= (function() {
    var _instance = null;

    return function() {
        if (null === _instance) {
            var div = document.createElement('div');
            div.innerHTML = '这是一个单例div';
            _instance = div;
        }
        
        return _instance;
    }
})();
```
#### 更通用的单例模式
``` javascript
// 创建div
function createDiv(html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    document.body.appendChild(div);
    return div;
}

// 创建iframe
function createIframe(src) {
    var iframe= document.createElement('iframe');
    iframe.src= src;
    document.body.appendChild(iframe);
    return iframe;
}

// 生产单例构造函数
function getSingleton(fn) {
    var instance = null;
    return function() {
        if (instance) {
            return instance;
        }
        
        return instance = fn.apply(this, arguments);
    }
}

// 获取单例div构造方法
var createSingleDiv = getSingleton(createDiv);

// 使用举例
var singleDiv1 = createSingleDiv('这是一个单例的div');
var singleDiv2 = createSingleDiv();

console.log(singleDiv2.innerHTML);
```

JavaScript设计模式之单例模式

### 单一职责原则
每个类应该只专注做一件事情



### 里氏替换原则
在一个程序中将基类对象替换为子类对象，程序不会发生任何错误。

### 依赖倒置原则
实现尽量依赖抽象，不依赖具体实现

### 接口隔离原则
为客户端提供尽可能小的单独接口，而不是提供大的总接口

### 最少知识原则
一个软件实体应该尽可能少的与其他软件实体发生交互。软件实体是一个广义的概念，不仅包括对象，还包括系统、类、模块、函数、变量等。

### 开放 - 封闭原则
软件实体（类、模块、函数）等应该是可以扩展的，但是不可修改。

### 组合/聚合复用原则
多用组合/聚合扩展对象，少用继承

面向对象设计的基本原则

人就像其他生物一样不断地重复自己，这过程其实没有什么意义。要说有意义的话，也许在于人思考了这其中的意义。