- 请求行：是用来说明请求类型，要访问的资源，以及所使用的http版本号，常用的请求类型：get，post，put，delete等
- 请求头：用来说明服务器要使用的一些信息
- 空行： 请求头部后面必须要加上空行，即时请求数据是空的，也要加上。
- 请求数据：也叫请求主体，可以添加任意的数据

- 应用层 访问网络服务的接口，例如为操作系统或网络应用提供访问网络服务的接口，如http，dns等
- 表现层 提供数据转换的服务，例如加密解密，图片解码转码，数据的压缩和解压
- 会话层 建立端连接，并提供访问验证和会话管理（session）
- 传输层 提供应用进程之间的逻辑通讯，例如建立连接，处理数据包错误，数据包次序（tcp，udp等）
- 网络层 为数据在结点之间传输创建逻辑链路，并分组转发数据（路由器，防护墙，多层交换机等）
- 链路层 在通讯实体之间建立数据链接链路（网卡等）
- 物理层 为数据端设备提供原始比特流的传输通路（网线等）

- 不同，则说明资源被修改过，则从新返回整个资源，状态码为 200
- 相同，则说明资源未修改过，服务器返回304状态码，客户端从缓存数据库获取数据。

function chunk_2 (array, size) {
  size = size >= 0 ? size : 0;
  const length = !array ? 0 : array.length;
  if(!length || size < 1) {
    return [];
  }
  let result = [];
  let index = 0;
  const resultLength = length % size > 0 ? parseInt(length/size) + 1 : length/size;
  for(let i = 0; i < resultLength; i++) {
    let start = i * size;
    let end = start + size;
    const temp = [].slice.call(array, start, end);
    result.push(temp)
  }
  return result;
}

function chunk(array, size) {
  // 保证将要进行分割的大小必须是大于等于0的。
  size = Math.max(size, 0)
  // 获取目标数组的长度，并做一个边界判断，
  const length = array == null ? 0 : array.length
  // 判断目标长度是否为零，或者分割大小是否小于1，是则返回空数组
  if (!length || size < 1) {
    return []
  }
  // 目标第一个元素的下标
  let index = 0
  // 新数组当前的下标
  let resIndex = 0
  // 创建要返回的新数组，并确定数组长度， ceil向上取整，确保不能均分也能得到最后数组的长度
  const result = new Array(Math.ceil(length / size))

  // 开始分割
  while (index < length) {
    // 这里使用的是lodash自身实现的slice 函数
    result[resIndex++] = [].slice.call(array, index, (index += size))
  }
  return result
}

- 自己写的还不够健壮，有些边界处理不够完善
- 基础不够扎实，Math的一些方法忘记了
- `lodash`使用了`new`创建新数组，而我使用的是字面量创建，然后`push`进去，然后自己测试了一下。创建10W数据，性能差距可以忽略。所以不明白为什么要使用new

- array 目标数组
- start 开始下标
- end 结束下标

function slice_2(array, start, end) {
  // 先获取array的长度
  const length = !array ? 0 : array.length;
  if(!length ){
    return [];
  }

  // 下面这些其实都是一些规则
  if(!start){
    start = start || 0;
  } else {
    // 先判断开始下标是否为负数，
    // 如果是负数，则判断绝对值是否大于数组的长度，是的话设置为0，
    // 否则就用开始下标加上数组长度，
    // 如若不是负数则无任何变化
    start = start < 0 ? -start > length ? 0 : (start+length) : start;
  }
  if(!end) {
    end = end || length;
  } else {
    // 如果结束下标小于零则，下标加length 
    end = end < 0 ? end += length : end;
  }
  
  let result = [];
  // 当开始下标小于结束下标，并且开始下标小于数组长度，则添加到返回数组里
  while (start < end && start < length) {
    result.push(array[start])
    start++;
  }
  return result
}

function slice(array, start, end) {
  // 获取array的length
  let length = array == null ? 0 : array.length
  // 如果没有length则返回空数组
  if (!length) {
    return []
  }
  // 如果开始下标或者结束下标不传，则开始下标为0，结束下标为length
  start = start == null ? 0 : start
  end = end === undefined ? length : end

  // 如果下标为负数，则需要转为整数，
  // 如果开始下标的绝对值大于length 则默认是0
  if (start < 0) {
    start = -start > length ? 0 : (length + start)
  }
  // 如果结束下标大于length，则结束下标设置为length
  end = end > length ? length : end
  // 如果end小于0，则与length进行相加
  if (end < 0) {
    end += length
  }

  length = start > end ? 0 : ((end - start) >>> 0)
  start >>>= 0

  let index = -1
  const result = new Array(length)
  while (++index < length) {
    result[index] = array[index + start]
  }
  return result
}

function compact(array) {
  let resIndex = 0
  const result = []
  
  if (array == null) {
    return result
  }

  for (const value of array) {
    if (value) {
      result[resIndex++] = value
    }
  }
  return result
}

<script>alert(1)</script>

<script>
    eval(location.hash.substr(1));
</script>

http://www.xss.com#alert(document.cookie)

1. & --> &

2. < --> &lt;

3. > --> &gt;

4. " --> &quot;

5. ' --> &#x27;

6. / --> &#x2F;

ip:port/ssrf.php?url=xxxx

1. 可以对外网、服务器所在内网、本地进行端口扫描，获取一些服务的 banner 信息
2. 攻击运行在内网或本地的应用程序（比如溢出）
3. 对内网web应用进行指纹识别，通过访问默认大文件
4. 攻击内外网的web应用，主要是使用`get�`参数就可以实现攻击
5. 利用`file`协议就可以获取本地文件等。

$.ajax(url, (res) => {
	if(res.xx) {
		$.ajax(url2, (res2) => {
			if(res2.xx) {
				..... // 不断的嵌套
			}
		})
	}
})

const p1 = new Promise((resolve, reject) => {
	setTimeout(function(){
		resolve("成功!"); //代码正常执行！
		// reject("失败!"); //代码失败执行！
	}, 250);
})

<!-- bad -->
p1.then((res) => {
    //res的值是上面调用resolve(...)方法传入的值.
    //res 参数不一定非要是字符串类型，这里只是举个例子
    console.log(res);
}, (error) => {
		<!-- 失败不建议这样写，应该使用catch -->
		//error的值是上面调用reject(...)方法传入的值.
    //error 参数不一定非要是字符串类型，这里只是举个例子
    console.log(error);
});

<!-- good -->
p1.then((res) => {
    //res的值是上面调用resolve(...)方法传入的值.
    //res 参数不一定非要是字符串类型，这里只是举个例子
    console.log(res);
})
.catch((error) => {
	//error的值是上面调用reject(...)方法传入的值.
	//error 参数不一定非要是字符串类型，这里只是举个例子
	console.log(error);
})

const p2 = new Promise((resolve, reject) => {
	setTimeout(function(){
		resolve("成功!"); 
	}, 250);
})

p2.then(res => {
	console.log(res);
	return p1;
})
.then(res => {
	console.log(res)
})
.catch(error => {
	console.log(error)
})

function timeout(ms) {
 return new Promise((resolve) => {
   setTimeout(resolve, ms);
 });
}

async function asyncPrint(value, ms) {
   try{
   	await timeout(ms);
 	console.log(value);
   } catch(error) {
   	console.error(error)
   }
}

asyncPrint('hello world', 50); // 50 毫秒以后，输出hello world。

try{
error // <- 未定义变量
} catch(e) {
console.log('捕获到错误');
console.log(e);
}
输出:
未捕获到错误
ReferenceError: error is not defined

try {
var error = 'error'； // <-大写分号
} catch(e) {
console.log('捕获不到错误');
console.log(e);
}
输出：
Uncaught SyntaxError: Invalid or unexpected token

try{
setTimeout(function () {
error // <- 异步错误
}, 0)
} catch(e) {
console.log('捕获不到错误');
console.log(e);
}
输出：
Uncaught ReferenceError: error is not defined

/**
 * @param {String}  msg    错误信息
 * @param {String}  url    出错文件
 * @param {Number}  row    行号
 * @param {Number}  col    列号
 * @param {Object}  error  错误详细信息
 */
 window.onerror = function (msg, url, row, col, error) {
  console.log('捕获到错误了');
  console.log({
    msg,  url,  row, col, error
  })
  return true;
};
error; // <- 未定义变量
输出：
捕获到错误了
{msg: "Uncaught ReferenceError: error is not defined", ...}

 window.onerror = function (msg, url, row, col, error) {
  console.log('捕获到异步错误了');
  console.log({
    msg,  url,  row, col, error
  })
  return true;
};
setTimeout(() => {
  error; // <- 未定义变量
});
输出：
捕获到异步错误了
{msg: "Uncaught ReferenceError: error is not defined", ...}

<script>
	window.onerror = function (msg, url, row, col, error) {
	console.log('我知道错误了');
	console.log({
		msg,  url,  row, col, error
	})
	return true;
};
</script>
<img src="./404.jpg"/>
输出：
GET http://localhost:8081/404.jpg 404 (Not Found)

<script>
	window.addEventListener('error', (msg, url, row, col, error) => {
		console.log('我知道错误了');
		console.log({
			msg,  url,  row, col, error
		})
		return true;
	}, true);
</script>
<img src="./404.jpg"/>
输出：
GET http://localhost:8081/404.jpg 404 (Not Found)
我知道错误了
{msg: Event, url: undefined, row: undefined, col: undefined, error: undefined}

window.addEventListener("unhandledrejection", function(e){
	e.preventDefault()
	console.log('我知道 promise 的错误了');
	console.log(e.reason);
	return true;
});
new Promise((resolve, reject) => {
	reject('promise error');
});
输出：
我知道 promise 的错误了
promise error

function report(error) {
  var reportUrl = 'http://xxxx/report';
  new Image().src = reportUrl + 'error=' + error;
}

// http://localhost:8080/index.html
<script>
  window.onerror = function (msg, url, row, col, error) {
    console.log('我知道错误了，也知道错误信息');
    console.log({
      msg,  url,  row, col, error
    })
    return true;
  };
</script>
<script src="http://localhost:8081/test.js" crossorigin></script>

// http://localhost:8081/test.js
setTimeout(() => {
  console.log(error);
});

describe('Array', function() {
 describe('#indexOf()', function() {
   it('should return -1 when the value is not present', function() {
     assert.equal(-1, [1, 2, 3].indexOf(4))
   })
 })
})

也就是说，this完全取决于函数的调用位置（也就是函数的调用方法）。

var name = 'window.ajie';

function fn1(){
	fn1.name = 'fn1.ajie';
	console.log(this.name);
}

fn1() // 'ajie'

var name = 'window.name';
var user = {
	name: 'user.ajie',
	getName : function () {
		console.log(this.name);
	}
}

user.getName(); // user.ajie
window.user.getName(); // user.ajie

var name = 'window.name';
var user = {
	name: 'user.ajie',
	getName : function () {
		console.log(this.name);
	}
}

var o = user.getName
o(); // window.name

1. call, apply
2. bind
3. new
4. 箭头函数 (es6)

var name = 'window.name'
var user = {
	name: 'user.name'
}
function getName(){
	console.log(this.name);
}
getName.call(user); // user.name
getName.apply(user) // user.name
getName.call(); // window.name
getName.apply() // window.name

var name = 'window.name'
var user = {
	name: 'user.name'
}
var callUser = {
	name: 'call.name'
}
function getName(){
	console.log(this.name);
}

var userGetName = getName.bind(user);
userGetName(); // user.name
userGetName.call(callUser) // user.name
getName(); // window.name

var name = 'window.name'
var user = {
	name: 'user.name',
}
function getName() {
	console.log(this.name)
}
var userGetName = getName.bind(user);
userGetName(); // user.name
var bindName = new userGetName(); // undefined

var name = 'window.name'
var user = {
	name: 'user.name',
	getName: () => {
		console.log(this.name)
	}
}
user.getName.call(user); // window.name

function concat2 () {
  let length = arguments.length;
  if(!length) return [];
  let result = [];
  for(let index = 0; index < length; index++) {
    let value = arguments[index]

    if(value instanceof Array) {
      for(let valueIndex = 0; valueIndex < value.length; valueIndex++) {
        result.push(value[valueIndex]);
      }
    } else {
      result.push(value)
    }
  }
  return result
}

function concat() {
  var length = arguments.length;
  if (!length) {
    return [];
  }
  var args = Array(length - 1),
      array = arguments[0],
      index = length;

  while (index--) {
    args[index - 1] = arguments[index];
  }
  return arrayPush(isArray(array) ? copyArray(array) : [array], baseFlatten(args, 1));
}

/**
* Appends the elements of `values` to `array`.
* 将values的元素添加到array，也可以说是把values拼接到array
* @private
* @param {Array} array The array to modify. 要改变的array
* @param {Array} values The values to append. 要添加的value
* @returns {Array} Returns `array`. 返回一个数组
*/
function arrayPush(array, values) {
  var index = -1, // 可以当做是当前的拼接次数 或 value下标
      length = values.length, // 拼接总次数
      offset = array.length; // 初始拼接的位置

  // 判断当前拼接次数是否小于总次数，
  while (++index < length) {
    // 把value拼接到array中
    array[offset + index] = values[index];
  }
  return array;
}

/**
  * The base implementation of `_.flatten` with support for restricting flattening.
  _.flatten 就是基于这个函数实现的，可以减少数组的嵌套
  *
  * @private
  * @param {Array} array The array to flatten.  // 目标数组
  * @param {number} depth The maximum recursion depth. // 最大的递归深度
  * @param {boolean} [predicate=isFlattenable] The function invoked per iteration.
  * @param {boolean} [isStrict] Restrict to values that pass `predicate` checks. // 是否限制values 必须通过 predicate 的校验
  * @param {Array} [result=[]] The initial result value. // 期望放到指定的数组里，不传默认为一个空数组
  * @returns {Array} Returns the new flattened array. // 返回一个被打平的新数组
  */
function baseFlatten(array, depth, predicate, isStrict, result) {
  var index = -1, // 初始下标
      length = array.length; // 目标数组的长度

  // 当你没有传predicate，则设置一个默认的函数，主要作用是检验目标是否能打平
  predicate || (predicate = isFlattenable);
  // 返回的结果数组，如果不传，则默认是[]
  result || (result = []);

  // 
  while (++index < length) {
    var value = array[index];
    // 是否打平的判断，循环深度必须大于0，且value是可以被打平的
    if (depth > 0 && predicate(value)) {
      // 循环深度是否大于1， 大于1则进行递归打平
      if (depth > 1) {
        // Recursively flatten arrays (susceptible to call stack limits).
        baseFlatten(value, depth - 1, predicate, isStrict, result);
      } else {
        // 将结果数组与当前的value进行拼接
        arrayPush(result, value);
      }
    } else if (!isStrict) { // 如果没有通过predicate校验，则不把值添加到结果数组
      result[result.length] = value;
    }
  }
  return result;
}

xxx-cli
  |-  bin
  |     |- xxx.js
  |-  package.json

"bin": {
  "xxx": "./bin/xxx.js"
}

#!/usr/bin/env node   //告诉node使用终端运行
const fs = require('fs');

const program = require('commander'); //终端输入处理框架
const download = require('download-git-repo'); // 拉取github上的文件。
const chalk = require('chalk'); // 改变输出文字的颜色
const ora = require('ora'); // 小图标（loading、succeed、warn等
const package = require('../package.json'); //获取版本信息
const symbols = require('log-symbols'); //美化终端
const re = new RegExp("^[a-zA-Z\-]+$"); //检查文件名是否是英文，只支持英文


program
	.version(package.version, '-v,--version')
	// 定义参数。它接受四个参数，
	// 在第一个参数中，它可输入短名字 -a和长名字–app ,
	// 使用 | 或者,分隔，在命令行里使用时，这两个是等价的，区别是后者可以在程序里通过回调获取到；
	// 第二个为描述, 会在 help 信息里展示出来；
	// 第三个参数为回调函数，他接收的参数为一个string，有时候我们需要一个命令行创建多个模块，就需要一个回调来处理；
	// 第四个参数为默认值
	.option('-i, init [name]', '初始化 beidousat-admin 项目')
	// 解析命令行
  .parse(process.argv);

// 判断命令行是否是 init 命令
if(program.init){
	// 获取要生成项目的名字
	const name = program.init;
	if (!re.test(name)) { //检查项目名字是否符合规定
		console.log(symbols.error, chalk.red('错误!请输入英文名称'));
		return 
	} 
	if (!fs.existsSync(name)) { //检查是否有该项目
		console.log(symbols.success,chalk.green('开始创建..........,请稍候'));
		const spinner = ora('正在下载模板...');
		spinner.start();
		// 下载脚手架
		download(`你githun上的项目地址`, name, err => {
			if (err) {
				spinner.fail();
			} else {
				spinner.succeed();
				console.log(symbols.success, chalk.green('模版创建成功'));
			}
		});
	} else {
		console.log(symbols.error, chalk.red('有相同名称模版'));
	}
}

node bin/xxx.js init demo 
选择想要的选项，回车
输出:✔ 开始创建..........,请稍候
⠏ 正在下载模板...
等待下载完成
输出:✔ 模版创建成功

function difference(array, ...values) {
	// 判断检验数组是否是一个类数组且对象，不是则返回空数组
	// baseFlatten 这个函数在上一章已经聊过了，不清楚可找上一章来看 主要是减少数组的嵌套
  return isArrayLikeObject(array)
    ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true))
    : []
}

function differenceBy(array, ...values) {
	// 要注意的是这里的迭代器是最后一个参数，所以这里用自己实现的last获取迭代器
  let iteratee = last(values)
	// 如果没有传入迭代器，则迭代器赋值为undefined
  if (isArrayLikeObject(iteratee)) {
    iteratee = undefined
  }
  return isArrayLikeObject(array)
    ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true), iteratee)
    : []
}

function differenceWith(array, ...values) {
	// 要注意的是这里的迭代器是最后一个参数，所以这里用自己实现的last获取比较器comparator
  let comparator = last(values)
	// 如果没有传入比较器comparator，则迭代器赋值为undefined
  if (isArrayLikeObject(comparator)) {
    comparator = undefined
  }
  return isArrayLikeObject(array)
    ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true), undefined, comparator)
    : []
}

// 类似 `difference` 方法的基本实现
/**
 * The base implementation of methods like `_.difference` without support
 * for excluding multiple arrays or iteratee shorthands.
 *
 * @private
 * @param {Array} array The array to inspect. 检验的数组
 * @param {Array} values The values to exclude. 要排除的值
 * @param {Function} [iteratee] The iteratee invoked per element. 每一个元素都会调用iteratee
 * @param {Function} [comparator] The comparator invoked per element. 每一个元素都会调用 comparator（比较）
 * @returns {Array} Returns the new array of filtered values.
 */
function baseDifference(array, values, iteratee, comparator) {
  var index = -1, // 初始下标
        includes = arrayIncludes, // 这是一个lodash实现的方法，用来检验值是否存在数组中，实现用的是原生的indexOf
      isCommon = true, // 是否是一个普通的数组
      length = array.length, // 检验数组的长度
      result = [], // 结果数组
      valuesLength = values.length; // 有多少个排查数组

  // 如果长度为0 或没有长度，则返回[]
  if (!length) {
    return result;
  }
  if (iteratee) {
    // 要排除的每个值，都要去执行一遍 iteratee
    // arrayMap 这是lodash 实现的一个特别的`_.map`函数，就是每个values的值都会用baseUnary执行一下，然后返回。有兴趣的可以自行去看一下源码
    // baseUnary 是 `_.unary` 的基本实现， 参数接收一个函数，并返回一个函数，典型的柯理化函数
    values = arrayMap(values, baseUnary(iteratee));
  }
  if (comparator) {
    // arrayIncludesWith 跟arrayIncludes类似，只是多接收了一个比较函数
    includes = arrayIncludesWith;
    isCommon = false;
  }
  // LARGE_ARRAY_SIZE = 200 是否是大号数组 
  else if (values.length >= LARGE_ARRAY_SIZE) {
    includes = cacheHas;
    isCommon = false;
    values = new SetCache(values);
  }
  outer:
  while (++index < length) {
	var value = array[index],
        computed = computed == null ? value : iteratee(value);

	value = (comparator || value !== 0) ? value : 0;
	// 是一个普通的数组，并且要计算的值不是 NaN
        if (isCommon && computed === computed) {
	    var valuesIndex = valuesLength;
           // 循环比较，如果没有相同的值，则push到结果数组中
           while (valuesIndex--) {
              if (values[valuesIndex] === computed) {
                 continue outer;
               }
            }
            result.push(value);
	}
        // 否则，如果不包含在values中，则push到结果数组
        else if (!includes(values, computed, comparator)) {
           result.push(value);
       }
  }
  return result;
}

	login.succ((res) => {
		header.setAvatar(res.avatar); // 设置header的头像
		message.refresh(); // 刷新消息列表
		collect.refresh(); // 刷新收藏列表
		// ... 
	})

$.ajax(url, (res) => {
	login.trigger('loginSucc', res)
})

const header = (function () { // header模块
	login.listen('lofinSucc', function (res) {
		header.setAvatar(res.avatar);
	})
	return {
		setAvatar: function (data) {
			console.log('设置hearder模块的头像')
		}
	}
})()

const message = (function () { // 消息模块
	login.listen('lofinSucc', function (res) {
		message.refresh(res);
	})
	return {
		refresh: function (data) {
			console.log('设置hearder模块的头像')
		}
	}
})()

const str = 'foo bar';
const re = /^foo/;
console.log(re.exec(str)); //['foo',...]

const str = 'foo bar';
const re = /^foo/;
console.log(re.test(str)) //true

const str = 'foo bar';
const re = /^foo/;
console.log(str.match(re)) // ['foo',index: 0,...]

const str = 'foo bar';
const re = /^foo/;
console.log(str.search(re)) // 0

const str = 'foo bar';
const re = /^foo/;
console.log(str.replace(re, 'bar')) // 'bar bar'

"Webkit Moz O ms Khtml".split( " " ) // ["Webkit", "Moz", "O", "ms", "Khtml"]

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-08-09";
var result = string.replace(regex, "$2/$3/$1");
console.log(result); // "08/09/2017"
等价
var result = string.replace(regex, function() {
    return RegExp.$2 + "/" + RegExp.$3 + "/" + RegExp.$1;
});
console.log(result); // "08/09/2017"