前端进阶 - ES6常用功能及开发环境使用

最新推荐文章于 2024-08-13 16:49:07 发布

橘子☆心酸

最新推荐文章于 2024-08-13 16:49:07 发布

阅读量314

点赞数

分类专栏：前端学习与理论专栏文章标签：前端 es6 ecmascript

本文链接：https://blog.csdn.net/zhqi9277/article/details/131949902

版权

前端学习与理论专栏专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章介绍了ES6中的模块化语法，包括import和export，以及如何在开发环境中使用Babel和Webpack或Rollup进行打包。接着讨论了Class与普通构造函数的区别，展示了Class的面向对象特性。此外，还详细解释了Promise的基本使用和原理，作为解决异步问题的重要工具。

摘要由CSDN通过智能技术生成

ES6常用功能及开发环境使用

文章目录

ES6常用功能及开发环境使用

1. ES6模块化的使用与开发环境打包

ES6模块化是一种将代码分割成不同模块，然后通过import和export关键字进行导入和导出的方式。这样做的好处是使得代码结构清晰，易于维护和拓展。

1.1 模块化的基本语法

/* utils.js */
export default {
  a: 100
};

/* utils2.js */
export function fn1() {
  alert('fn1');
}

export function fn2() {
  alert('fn2');
}

/* index.js */
import util1 from './utils.js';
import { fn1, fn2 } from './utils2.js';

console.log(util1);
fn1();
fn2();

1.2 开发环境配置

在开发环境中使用ES6模块化语法时，由于不同浏览器对ES6的支持程度不同，我们需要使用Babel进行代码转换，然后使用Webpack或Rollup进行打包。

安装Babel和Webpack或Rollup：

npm install --save-dev @babel/core @babel/preset-env babel-loader webpack

或

npm install --save-dev @babel/core @babel/preset-env babel-rollup

创建.babelrc文件：
```
{
  "presets": ["@babel/preset-env"]
}
```
配置Webpack或Rollup：
- Webpack配置：创建webpack.config.js文件，并配置入口和输出等信息。
- Rollup配置：创建rollup.config.js文件，并配置入口、输出、插件等信息。
运行开发环境：

使用Webpack：在package.json中配置脚本"start": "webpack --mode development"，然后运行npm start。

使用Rollup：在package.json中配置脚本"start": "rollup -c"，然后运行npm start。

1.3 总结

ES6模块化为前端开发带来了更好的代码组织方式，但由于浏览器的支持情况不一，使用Babel进行代码转换和Webpack或Rollup进行打包是开发中常用的方式。

2. Class和普通构造函数的区别

Class是ES6引入的一种语法糖，让JavaScript面向对象编程更加便捷和直观。它与普通构造函数相比，有以下区别：

普通构造函数：

function MathHandle(x, y) {
  this.x = x;
  this.y = y;
}

MathHandle.prototype.add = function () {
  return this.x + this.y;
};

var m = new MathHandle(1, 2);
console.log(m.add());

Class：

class MathHandle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  add() {
    return this.x + this.y;
  }
}

const m = new MathHandle(1, 2);
console.log(m.add());

区别：

语法上更贴合面向对象的写法：Class使得面向对象编程更加直观和易读。
实现继承更便捷：Class的继承使用extends关键字，更易于理解和实现。

总的来说，Class是ES6提供的更现代化的面向对象编程方式，但本质上它仍然是基于原型的继承。

3. Promise的基本使用与原理

Promise是ES6引入的解决异步编程的方案，它代表了一个异步操作的最终完成或失败，并返回结果。

3.1 基本使用

function loadImg(src) {
  return new Promise(function (resolve, reject) {
    const img = document.createElement('img');
    img.onload = function () {
      resolve(img);
    };
    img.onerror = function () {
      reject();
    };
    img.src = src;
  });
}

const src = 'http://';
const result = loadImg(src);

result.then(
  function (img) {
    console.log(img.width);
  },
  function () {
    console.log('failed');
  }
);