从 ES11 稳定到 web://graphql 模块
随着前端技术的不断发展，JavaScript 在 Web 开发中扮演的角色愈发重要。而在当前的技术趋势中，ES11 和 GraphQL 也是备受关注的两个技术。本文将结合实际案例，介绍 ES11 和 GraphQL 的相关知识点。希望读者可以通过本文更好地了解这两个技术，提升自己的前端技能。
ES11 稳定化
ES11 是最新的 ECMAScript 标准，相比于之前的版本，它增加了一些重要的特性。其中，较为引人注目的是可选的 catch 捕获绑定和 Nullish 合并运算符。
- 可选的 catch 捕获绑定
在 ES11 之前，try-catch 的使用对于全部异常处理是必须的。对于诸如下面这种情况：
try { // 一些代码 } catch (e) { console.warn('错误处理: ', e) }
显然，这样的代码存在一些冗余。ES11 新增了可选的 catch 绑定，可以避免这种冗余：
try { // 一些代码 } catch { console.warn('出错了') }
- Nullish 合并运算符
在以往的 JavaScript 中，空值和 undefined 的处理非常困难。在 ES11 中，Nullish 合并运算符为我们提供了一个简单的解决方案。它与 || 运算符不同，只有在左侧值为 null 或 undefined 时才会返回右侧值。
let foo = null || 'bar'; // 'bar' let baz = null ?? 'qux'; // null
GraphQL 模块
GraphQL 是一种用于构建 API 的协议。它满足数据之间彼此依赖的情况，让前端开发中的数据传输变得更加便捷。比如我们可以用 GraphQL 定义查询条件：
query { allUsers { id name age } }
接着，GraphQL 会将这个查询语句传到后端解析。后端将根据定义的结构返回查询语句所需的数据。这使得数据获取和前端展示可以更加紧密地结合，并让前端开发更为高效。
下面，我们来看一个简单的 GraphQL 模块实现例子：
import { MongoClient } from 'mongodb'; import { makeExecutableSchema } from '@graphql-tools/schema'; import { ApolloServer } from 'apollo-server';
const schema = makeExecutableSchema({
typeDefs: type Query { quoteOfTheDay: String random: Float! rollThreeDice: [Int] count: Int! getAmount(name: String!): Float } ,
resolvers: {
quoteOfTheDay: () => {
return Math.random() < 0.5
? 'Take it easy'
: 'Salvation lies within'
},
random: () => {
return Math.random();
},
rollThreeDice: () => {
return [1, 2, 3].map(_ => 1 + Math.floor(Math.random() * 6));
},
count: () => {
return 50;
},
getAmount: (_, { name }) => {
const mongoClient = new MongoClient('<your-mongodb-url>');
return mongoClient.connect().then(client => {
const db = client.db('<db-name>');
return db.collection('<collection-name>').findOne({ name })
}).then(data => {
return data ? data.amount : 0;
});
}
}
});
const server = new ApolloServer({ schema });
server.listen().then(({ url }) => {
console.log(Graphql Server is up and running at ${url});
});
在以上代码中，我们定义了一个简单的 GraphQL API，提供了一些查询操作。例如，查询随机数，获取骰子三次投掷的结果，以及一个 mysql 快捷查询 getAmount。使用 GraphQL，前端开发人员可以有效地获取所需的数据。
总结
随着前端技术的不断发展，语言本身的更新和升级，以及现代化的技术协议的引入，前端开发越来越具有高度的灵活性和可塑性。本文阐述了 ES11 和 GraphQL 两个方面的内容，希望读者在日后的工作实践中能够更好地应用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6464b343968c7c53b059243a