首先需要下载babel插件(前提是已经安装了node.js) babel的安装教程在之前的ES6中已经学习,现在需要补上ES7降级的插件 一共是两个
此处的presets是插件集合 plugins中的为插件集合中没有的插件,需要重新添加的 注意事项:插件可能存在依赖关系,所以顺序不能颠倒
我们现在此处添加一个class类
class Search{
static serverPath = "192.168.1.1";//填加构造函数的静态属性
constructor(){
this.keyword = "";//关键字
}
}
class Search{
static serverPath = "192.168.1.1";//填加构造函数的静态属性
constructor(){
this.keyword = "";//关键字
}
serverName = "serverA-"; //此处定义的就是私有属性
}
此处先诠释一下什么是装饰器?相信前端刚接触这个词的时候很懵逼。
我们先来看这样一个需求:
其实学过java的同学应该知道,spring框架的aop就是这种思想,面向切面编程,把一个方法看成一个切点,我们在此切点的前后做我们需要做的事情 装饰器的实质就是:面向切面编程,不去看以前代码的逻辑,新添加功能的时候,是在以前代码的基础上,在方法前或者方法后去添加更加强大的功能,而不是去更改以前的代码
需求:
采用的思想
<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修饰器的详解