ES6部分源码重写 -4（1-classES7中的扩展）

ES7class新增填的属性

使用ES7需要使用babel插件对语言进行降级，否则会报错

首先需要下载babel插件（前提是已经安装了node.js） babel的安装教程在之前的ES6中已经学习，现在需要补上ES7降级的插件一共是两个

npm install @babel/plugin-proposal-decorators
npm install @babel/plugin-proposal-class-properties 下载好这两个插件以后还需要在.babelrc文件中去配置

此处的presets是插件集合 plugins中的为插件集合中没有的插件，需要重新添加的注意事项：插件可能存在依赖关系，所以顺序不能颠倒

1. 添加构造方法的静态属性

我们现在此处添加一个class类

	class Search{
		static serverPath = "192.168.1.1";//填加构造函数的静态属性
		constructor(){
			this.keyword = "";//关键字
		}
	}

2. 添加比ES6简单的私有属性书写方法

   class Search{
   	static serverPath = "192.168.1.1";//填加构造函数的静态属性
   	constructor(){
   		this.keyword = "";//关键字
   	}
   	serverName = "serverA-"; //此处定义的就是私有属性
   }

3. 装饰器

此处先诠释一下什么是装饰器？相信前端刚接触这个词的时候很懵逼。

我们先来看这样一个需求：

场景一：某公司开发，猿A写了一个登陆功能，此功能只具有验证用户名和密码的功能。因为公司盈利降低，此时猿A就被公司开除了，而且在此时，登陆模块的需求发生更改，需要在之前的基础上添加表单信息验证。刚接到工作的猿B有几种解决方案，第一种，直接拿着猿A的代码开始撸，把以前的代码重新改。很显然，猿B要改猿A的代码，首先需要看懂猿A的代码逻辑，然后再加上自己的逻辑，一番操作下来，猿B完成了工作，但是，可能要花几倍的时间。
场景二：还是刚才这个场景，但是，猿B用了装饰器的思想，我不去更改猿A的代码，我直接调用猿A的代码，并在他的前面或者后面添加自己的功能即可，这样下来，猿B也不用看猿A的代码，大大的节省了开发效率

其实学过java的同学应该知道，spring框架的aop就是这种思想，面向切面编程，把一个方法看成一个切点，我们在此切点的前后做我们需要做的事情装饰器的实质就是：面向切面编程，不去看以前代码的逻辑，新添加功能的时候，是在以前代码的基础上，在方法前或者方法后去添加更加强大的功能，而不是去更改以前的代码

在理解了装饰器的前提下，我们来看看ES5中的一个案例

需求：

在输入的时候向服务器发送数据
在1的前提下，新增收集数据的功能

采用的思想

此处采用了面向切面编程的思想，在getContent()方法前添加了一个收集数据的方法
并且此处采用了代理模式的思想，我们将添加新增事件后的对象统一交给newGetContent方法来管理 html代码

	<input type="text" id="inp">
    <button id="search">search</button>

js代码

	var oInput = document.getElementById("inp");
	var oBtn = document.getElementById("search");
	var keyWord = "";
	oInput.oninput = function(){
		keyWord = this.value;
	}
	oBtn.onclick = function(){
		newGetContent(keyWord);
	}
	function getContent(data){
		var url = "urlA-";
		console.log("向服务器" + url + "数据：" + data);
	}
	var newGetContent = dealContent(getContent);//代理模式的思想
	function dealContent(data){
		//添加另外一个收集数据的方法
		return function(data){
			var url = "urlB-";
			console.log("想服务器" + url + "收集数据" + data);
			return getContent.apply(this,arguments);
		}
	}

如果各位同学看到这里还不够过瘾，可以继续看下一篇关于ES7修饰器的详解