ES7class新增填的属性
- 使用ES7需要使用babel插件对语言进行降级，否则会报错
- 1. 添加构造方法的静态属性
- 2. 添加比ES6简单的私有属性书写方法
- 3. 装饰器
- 在理解了装饰器的前提下，我们来看看ES5中的一个案例
使用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. 添加构造方法的静态属性
代码语言：javascript复制我们现在此处添加一个class类 class Search{
static serverPath = "192.168.1.1";//填加构造函数的静态属性
constructor(){
this.keyword = "";//关键字
}
}2. 添加比ES6简单的私有属性书写方法
代码语言：javascript复制 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代码
代码语言：javascript复制 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修饰器的详解
