6.28学习 babel转换,es6的装饰器

这篇具有很好参考价值的文章主要介绍了6.28学习 babel转换,es6的装饰器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.babel转换

1.1出现问题

先来一段代码,运行,有可能是会报错的,为什么呢?因为JS以前只能运行在浏览器中,Node.js 出现之后,不管是服务器上,还是我们自己的的笔记本上,只要安装了 Node.js 就可以运行 JS 代码了。所以是node帮我们运行了代码的。
有可能报错的原因是node的版本很多,这种很新的语法可能在低版本的node版本是不支持的。

class Animal{
   static flag = '哺乳类';
   constructor(){
      this.name = 'XXX'
   }
   say(){
      console.log('say')
   }
}
let animal1 = new Animal();
console.log(animal1,Animal.flag)
animal1.say()

目前我的node版本是14.15.1,是可以支持的
6.28学习 babel转换,es6的装饰器,学习,es6,前端
但是我把node的版本降为8.17.0的话,就会报错的
6.28学习 babel转换,es6的装饰器,学习,es6,前端
我们下面就以8.17.0的版本演示下面的内容。

1.2babel转换

如果版本不支持的话,我们就可以用babel/将我们的高级代码(es7等)转换为es5代码。这里就要装一个包babel-cli。但是babel-cli是以前的写法了,现在一般是@babel/cli。执行命令:

npm init  npm install @babel/cli --dev

安装后会发现在node_modules目录下多一个.bin目录
6.28学习 babel转换,es6的装饰器,学习,es6,前端
这里再引入一个 npx命令,它是node5.2版本以上会提供的,帮我们执行node_modules/.bin目录下的文件。那我们执行下 npx babel试一下
6.28学习 babel转换,es6的装饰器,学习,es6,前端
看到报错了,未找到@babel/core模块。那我们再npm install @babel/core --dev把它装上后再试一下npx babel
6.28学习 babel转换,es6的装饰器,学习,es6,前端
还是报错,语法不对这里是。要告诉它编译的是哪个文件和编译后要变成什么文件。
6.28学习 babel转换,es6的装饰器,学习,es6,前端
会发现确实目录下多了个编译后的文件,我这里是es5.js。但是打开一看发现,跟原来编译前的代码一摸一样!!!那不是没编译嘛。
其实是 @babel/core只做转换的动作,但是你还需要告诉它转换的规则是什么。这里就要在你项目的最外层,和node_modules同级目录建一个.babelrc文件。
我们下载包@babel/preset-env,并且在.babelrc中配置

{
   "presets": ["@babel/preset-env"],
   "plugins": []
}

然后再执行我们的npx命令(我的是npx babel .\index.js -o ./es5.js),发现编译出来的文件不一样了!!!

6.28学习 babel转换,es6的装饰器,学习,es6,前端
再运行
6.28学习 babel转换,es6的装饰器,学习,es6,前端
但是这个@babel/preset-env包也只能转换已定案的语法,像更高级的语法,例如装饰器,static xxx = 'xx’等还是无法转译的。
@babel/plugin-proposal-class-properties 这个包就是用来转换static xxx = ‘xx’(类的属性的) 不支持的话可以安装。
其实npx的执行顺序可以看作 @babel/cli ==> @babel/core ==> 转换(读取.babelrc中的配置)

2.装饰器

2.1类装饰器

装饰器写在类外面的是类装饰器

//装饰器 mobx nest vue 
//装饰器可以修饰 类的属性 类的原型上的方法
//修饰的时候就是把这个类 属性... 传递给修饰的函数
@flag
class Animal{
   // static flag = '哺乳类';
   name = 'XXX'
   say(){
      console.log('say')
   }
}

function flag(Constructor){
   Constructor.type = '哺乳类'
}
console.log(Animal.flag)

类装饰器有个参数,就是会被装饰的类
这里执行npx命令就会报错
6.28学习 babel转换,es6的装饰器,学习,es6,前端
他还给了提示,那我们就把@babel/plugin-proposal-decorators装上,并且在.babelrc中配置

{
   "presets": ["@babel/preset-env"],
   "plugins": ["@babel/plugin-proposal-decorators"]
}

再来npx,还是报错。。。
6.28学习 babel转换,es6的装饰器,学习,es6,前端
,babelrc配置写错了

{
   "presets": ["@babel/preset-env"],
   "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }]
   ]
}

再npx可以的了
上面的装饰器是可以传参的,例如

@flag('哺乳类')
function flag(value){
   return function (Constructor) {
      Constructor.type = value
   }
}

其实@flag可以看成个语法糖

@flag('哺乳类')
flag('哺乳类')(Animal)
function flag(value){
   return function (Constructor) {
      Constructor.type = value
   }
}

2.2方法装饰器

写在类里面的装饰器就是方法装饰器,他有三个参数的。第一个参数是类的原型对象,上例是Animal.prototype,装饰器的本意是要“装饰”类的实例,但是这个时候实例还没生成,所以只能去装饰原型(这不同于类的装饰,那种情况时target参数指的是类本身);第二个参数是所要装饰的属性名,第三个参数是该属性的描述对象。

@flag
class Animal{
   // static flag = '哺乳类';
   @readonly
   name = 'XXX'
   say(){
      console.log('say')
   }
}

function flag(Constructor){
   Constructor.type = '哺乳类'
}
console.log(Animal.type)

//直接编译会出错的 npx babel .\class-decorator.js -o es5.js

//1)类的静态属性

//2)类的属性(实例上的属性)

// function readonly() {
//    console.log(arguments)//有三个参数 Animal的实例 属性 配置项({
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: [Function: initializer]
})
// }
function readonly(target,property,descriptor) {
   console.log(target == Animal.prototype)
}

所以把这段代码编译后执行会报错,
6.28学习 babel转换,es6的装饰器,学习,es6,前端
因为这个时候实例还没生成,这样写就不会报错

  setTimeout(function () {
    console.log(target == Animal.prototype);
  });

方法装饰器可以修改属性的描述对象(descriptor),然后被修改的描述对象再用来定义属性。
我们在方法前面定义一个装饰器,它的第三个参数是不一样的

//装饰器 mobx nest vue 
//装饰器可以修饰 类的属性 类的原型上的方法
//修饰的时候就是把这个类 属性... 传递给修饰的函数
@flag
class Animal{
   // static flag = '哺乳类';
   @readonly
   name = 'XXX'
   @before
   say(){
      console.log('say')
   }
}

function flag(Constructor){
   Constructor.type = '哺乳类'
}
console.log(Animal.type)
function readonly(target,property,descriptor) {
   setTimeout(() => {
      console.log(target == Animal.prototype)
      console.log(descriptor)
   });
   
}

function before(target,property,descriptor) {
   console.log(descriptor)
}

6.28学习 babel转换,es6的装饰器,学习,es6,前端
可以写一些逻辑代码,例如切片

function before(target,property,descriptor) {
   console.log(descriptor)
   let oldSay = descriptor.value;
   descriptor.value = function () {
      console.log('before')
      oldSay.call(target)
   }
}

let animal = new Animal()
animal.say()

结果:
6.28学习 babel转换,es6的装饰器,学习,es6,前端文章来源地址https://www.toymoban.com/news/detail-516918.html

到了这里,关于6.28学习 babel转换,es6的装饰器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 6.28作业

    作业1 结构体不能被继承,类可以被继承 结构体默认的都是公共,类默认是私有的 转载【结构体和类的区别】 结构体是值类型,类是引用类型 结构体存在栈中,类存在堆中 结构体成员不能使用protected访问修饰符,而类可以 结构体成员变量申明不能指定初始值,而类可以 结

    2024年02月11日
    浏览(38)
  • 【web前端学习】7个ES6解构技巧让代码更简洁

    各位前端er,代码打久了,是否厌倦了编写臃肿且难以阅读的代码?想要提升编码技能并使代码更具可读性和简洁性? 今天这篇文章,与小千一起深入学习 ES6 解构的世界,向您展示如何使用它来编写更干净、更高效的代码 本文将从 解构对象和数组到使用默认值和展开运算符

    2024年02月05日
    浏览(33)
  • webpack5基础使用(1)-介绍、打包文件、处理样式资源(css、less)文件、配置文件内容、eslint工具检测语法、babel工具es6语法转es5

    webpack5是一个 静态资源打包工具 。 会以一个或多个文件作为打包的入口,将整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件,就可以直接在浏览器端运行了 进一步来说就是: 当开发时,肯定会使用框架、es6模块化语法、less/sass等css预处

    2024年02月03日
    浏览(56)
  • 前端-ES6

    let 和 const 为了解决var的作用域的问题,而且var 有变量提升,会出现全局污染的问题 let 块状作用域,并且不能重复声明 const 一般用于声明常量,一旦被声明无法修改,但是const 可以声明一个对象,对象内部的属性是可以修改的 建议: 在默认的情况下用const, 而只有你知道

    2024年02月12日
    浏览(38)
  • 前端面试问题汇总 - ES6篇

    let 和 const 声明 : 引入块级作用域的变量声明方式,let 声明的变量可重新赋值,const 声明的变量不可重新赋值。 箭头函数 (Arrow Functions): 提供了更简洁的函数定义语法,并且没有自己的 this、arguments、super 或 new.target,这些值继承自执行上下文。 模板字符串 (

    2024年04月16日
    浏览(56)
  • 前端基础(ES6 模块化)

    前言:前面学习了js,引入方式使用的是script s\\\"XXX.js\\\",今天来学习引入文件的其他方式,使用ES6 模块化编程,学习组件化编程中的全局注册和局部注册的方法。 目录 复习 ES6 模块化导出导入 解构赋值 导入js文件 export default 全局注册 局部注册 回顾前面学习内容,用script s\\\"

    2024年02月11日
    浏览(62)
  • 第一章前端开发ES6基础

    认识ES6 概述 ES6表示ECMAScript规范的第六版,正式名称为 ECMAScript 2015 ,ECMAScript是由ECMA国际标准组织制定的一项 脚本语言 的标准规范化,引入了许多新特性和语法。 其中包括 箭头函数、let和const声明、类、模板字符串、解构赋值、参数默认值、展开操作符、Promise 等等。这些

    2024年02月08日
    浏览(51)
  • 第二章前端开发ES6基础

    目录 扩展运算符 概述 语法 应用 模板字符串 概述 应用 内置对象扩展 概述 数组扩展方法 字符串扩展方法 set数据结构 概述 基本使用 操作方法 遍历方法 认识symbol 概述 作用 基本使用 项目 扩展运算符 概述 扩展运算符(spread operator)是 ES6 中新增的一种运算符,用 三个点(

    2024年02月07日
    浏览(49)
  • 前端面试:【前端工程化】CommonJS 与 ES6 模块

    嗨,亲爱的前端开发者!在现代Web开发中,模块化是构建可维护和可扩展应用程序的关键。本文将深入探讨两种主要的JavaScript模块系统:CommonJS 和 ES6 模块,以帮助你了解它们的工作原理、用法以及如何选择合适的模块系统。 1. CommonJS: 用途: CommonJS 是一种模块系统,最初

    2024年02月11日
    浏览(55)
  • 前端架构师之01_ES6_基础

    简单来说,ECMAScript是JavaScript语言的国际标准,JavaScript是实现ECMAScript标准的脚本语言。 2011年,ECMA国际标准化组织在发布ECMAScript 5.1版本之后,就开始着手制定第6版规范。 存在的问题:这个版本引入的语法功能太多,而且制定过程当中,还有很多组织和个人不断提交新功能

    2024年02月07日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包