专栏首页我们一无所有,我们巍然矗立ES6部分源码重写 -4(1-classES7中的扩展)

ES6部分源码重写 -4(1-classES7中的扩展)

ES7class新增填的属性

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

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

  1. npm install @babel/plugin-proposal-decorators
  2. 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修饰器的详解

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ES6-babel工具的使用

    envoke
  • h5-worker多线程js

    在我们的印象当中,js都是单线程的,或者更多的是类似ajax这种异步加载的伪多线程(这里的伪多线程指的ajax发送请求,采用回调的方法,回调成功以后还是在主线程...

    envoke
  • 如果你还在犹豫要不要入行,请先看看我的IT入坑记【技术创作101训练营】

    只有大专学历,从建筑专业转行入IT,经历过很多培训机构,走过很多坑,希望能给入坑前的各位一些参考

    envoke
  • 『No24: 编写可读代码的艺术(1)』

    除了本职工作,还有点幻灯片演示设计的爱好。随着编写代码的增多,制作的的幻灯片越来越多,越来越意识到,很多事物都存在相通性。

    谢伟
  • RePractise前端篇: 前端演进史

    细细整理了过去接触过的那些前端技术,发现前端演进是段特别有意思的历史。人们总是在过去就做出未来需要的框架,而现在流行的是过去的过去发明过的。如,响应式设计不得不...

    Phodal
  • 实用教程 | 高效 PyCharm 使用技巧 ③

    PyCharm 几乎是最受欢迎的 Python 开发工具,相信很多同学都在使用,那么,如何高效地使用它,提升工作效率呢?今天分享的这个系列文章,介绍了一些使用技...

    Python猫
  • FPGA基础知识极简教程(2)抛却软件思维去设计硬件电路

    学过一门或多门软件语言的数字设计初学者经常会犯一些错误 ,例如硬件语言的并发性,可综合以及不可综合语句区分,循环语句的使用等等。本文的建议将带你区别并扫除这些易...

    Reborn Lee
  • 使用反射机制调用属性和私有成员与代理模式的介绍

    通过反射机制可以获得类的属性,获得到的属性同样的可以进行赋值、得值操作,调用getField方法并传递属性的名称可以获得指定的属性,调用getFields方法则...

    端碗吹水
  • 加速数据分析,这12种高效Numpy和Pandas函数为你保驾护航

    在本文中,数据和分析工程师 Kunal Dhariwal 为我们介绍了 12 种 Numpy 和 Pandas 函数,这些高效的函数会令数据分析更为容易、便捷。...

    机器之心
  • 加速数据分析,这12种高效Numpy和Pandas函数为你保驾护

    在本文中,数据和分析工程师 Kunal Dhariwal 为我们介绍了 12 种 Numpy 和 Pandas 函数,这些高效的函数会令数据分析更为容易、便捷。...

    CDA数据分析师

扫码关注云+社区

领取腾讯云代金券