写点什么

五个强大的 JavaScript 特性技巧

Alexander T. Williams

  • 2024-07-02
    北京
  • 本文字数:3554 字

    阅读完需:约 12 分钟

大小:1.10M时长:06:22
五个强大的 JavaScript 特性技巧

JavaScript 是现代 Web 开发中一个必不可少的工具,它不断发展和演变,不断建立新的标准。在本文中,我们专注于介绍五种前沿的 JavaScript 技术,向开发者展示构建高交互性和高性能动态 Web 应用程序的创新性方法。从单子(Monad)到模式匹配,我们将带你了解最新、最伟大、适用于高级开发者的 JS 技术。


为什么 JavaScript 如此流行?


JavaScript 因其灵活性获得了巨大普及,并成为世界上使用最为广泛的编程语言。JS 通常被用于构建具有高交互性的动态 Web 应用程序 —— 例如实时更新、直观、功能丰富的用户界面等。此外,JavaScript 还允许应用程序跨平台运行。


JS 可用于各种项目,例如为电子商务服务提供支持或制作动画和手机游戏。然而,这只是 JavaScript 能力的一个缩影。我们还看到 JS 被用于企业环境中,特别是在关键的 ERP 过程中,如 SAP 人员增补,它允许在原生 Web 平台之上创建自定义仪表盘和 UI。


许多领先的平台,如 Facebook,使用了开源用户界面框架 React Native,它就是基于 JavaScript 构建的。这使得他们能够在使用单一代码库的情况下构建可同时在 iOS 和 Android (甚至是 Apple Vision Pro)上运行的移动应用程序。其结果就是开发时间大大缩短,使用的资源更少,所有平台和设备上的用户体验都保持一致。


服务器端运行时环境(如 Node.js)让 JavaScript 可以在 Web 浏览器之外运行,这进一步提升了应用程序的可扩展性和部署可能性。为了使 JS 更加通用和强大,大量 JS 兼容的 API 将 Web 应用程序链接到了外部服务。


最后,JavaScript 生态系统有了众多强大的库和框架,这有助于简化和加速开发,使开发者能够选择预先写好的代码来执行特定的功能。


五大前沿 JavaScript 技术


我们选择了开发者在使用的五种前沿的 JavaScript 技术,希望可以帮你解决一些开发问题,构建更有效、用户友好的应用程序。


1.单子(异步操作)


单子可用于组合需要上下文的函数,并返回一个值,它在简化错误管理和减少意外结果方面非常有效。


单子就是让代码中的函数组合变得尽可能简单。它们通常用于构建对精度要求很高的企业级应用程序。单子使代码更易于管理,从而可以实现更复杂的回调、嵌套条件分支等。本质上,单子就是让代码中的函数组合尽可能简单。


单子可以分为三种类型的函数组合:


函数映射:a => b


带上下文的函数映射:Functor(a) => Functor(b)


单子扁平化(从上下文中解包值)并带上下文的函数映射:Monad(Monad(a)) => Monad(b)


函数组合是创建函数管道的基础,可以实现高效的数据流。管道的第一个阶段是输入,最后一个阶段是经过转换的输出。为了实现管道,每一个阶段都必须能够预测到前一个阶段将返回的数据类型。


这时候单子就可以发挥作用,它们能够有效地映射函数并创建智能的管道。它们 与 Promise 的工作方式类似,并且可以无缝地放在一起使用。


下面是一个使用单子从 异步 API 获取用户数据,然后将用户数据传给另一个异步 API 执行计算的示例:


  const composeM = chainMethod => (...ms) => (    ms.reduce((f, g) => x => g(x)[chainMethod](f))  );  const composePromises = composeM('then');  const label = 'API call composition';  // a => Promise(b)  const getUserById = id => id === 3 ?    Promise.resolve({ name: 'Kurt', role: 'Author' }) : undefined;  // b => Promise(c)  const hasPermission = ({ role }) => (    Promise.resolve(role === 'Author')  );  // Compose the functions (this works!)  const authUser = composePromises(hasPermission, getUserById);  authUser(3).then(trace(label)); // true
复制代码


2.声明式编程


当开发者希望代码更简洁、更具表达性时,通常会使用声明式方法。JavaScript 的声明式编程关注的是代码的总体目标,而不是如何实现这些目标。这使得代码更简单、更易读,也更易于维护。当开发者希望代码更简洁、更具表达性以快速交付项目时,通常会使用声明式方法。


我们将声明式方法与命令式方法做一番比较:


命令式:



function evenSum(numbers) { let result = 0;
for (let i = 0; i < numbers.length; i++) { let number = numbers[i] if (number % 2 === 0) { result += number; } }
return result;}function evenSum(numbers) {let result = 0;for (let i = 0; i < numbers.length; i++) { let number = numbers[i] if (number % 2 === 0) { result += number; }}
return result;
复制代码


声明式:


const evenSum = numbers => numbers    .filter(i => i % 2 === 0)    .reduce((a, b) => a + b)
复制代码


3. 用于提高 Node.js 性能的服务器端缓存


服务器端缓存可用于根据使用情况自动伸缩资源。


缓存并不是什么新鲜事物,也不会被认为是什么前沿技术,但由于客户端和服务器端 Web 应用程序都可以使用缓存,因此它成了一个强大的提升性能的工具,特别是服务器端缓存可以通过加速数据检索来提高 Node.js 的性能。


我们来看一个使用内存缓存技术的例子:


const cache = require('memory-cache');function getDataFromCache(key) {  const cachedData = cache.get(key);  if (cachedData) {    return cachedData;  }  // If data is not in cache, fetch it from the source  const data = fetchDataFromSource();  // Store data in cache for future use  cache.put(key, data, 60000); // Cache for 60 seconds  return data;}
复制代码


服务器端缓存可以用于根据使用情况自动伸缩资源。AWS Lambda、Azure Functions 或 Google Cloud Functions 可以通过编程动态调整服务,而 AWS JavaScript SDK 允许你监控使用情况、优化云成本和自动伸缩资源,确保只为所需资源付费。


4. 不可变性


不可变性是指不能被改变的东西。在 JavaScript(以及一般的编程)中,它指的是在设置后就不能被修改的值。由于应用程序不断变化和更新,不可变性看起来似乎是不必要的 —— 但事实并非如此。


不可变性可以减少调试和意外结果。


数据的不可变性很重要,因为它有助于通过代码库实现一致性,并有助于状态管理。创建新值,而不是修改已存在的值,这让事情变得更可预测,从而减少错误 —— 比如当数据结构被意外修改时发生的错误。这样可以减少调试和意外结果。


将不可变性用于命名变量的示例:


// Import stylesheetsimport './style.css';// Write JavaScript code!const appDiv = document.getElementById('app');appDiv.innerHTML = `<h1>Open the console to see results</h1>`;class Person {  //_name = "Nee";  //_name = ["Nee", "Ra"];  _name = { first: "Nee", middle: "L" };  get name() {    return this._name;  }  set name(value) {    console.log('In setter', value);    this._name = value;  }}let p = new Person();//p.name = "Ra";                        // Setter executes//p.name.push("Lee");                   // Setter doesn't execute//p.name = [...p.name, "Lee"];          // Setter executes//p.name.middle = "Lee";                // Setter doesn't executep.name = { ...p.name, middle: "Lee" };  // Setter executes
复制代码


不可变性是一项重要的技术,已经越来越多地被用在数据科学任务和人工智能项目中,这再次证明 JavaScript 无法处理的问题越来越少了


5. 模式匹配


模式匹配是一种条件分支,它可以在绑定变量的同时简洁地匹配数据结构模式。在编写 XSLT 样式表转换 XML 文档时,通常可以使用模式匹配。


模式匹配比标准的 switch 语句高效得多。


当需要匹配一个值与给定模式时,模式匹配比标准的 switch 语句更加高效,它提供了更多的控制,让开发者可以编写更复杂的表达式。


下面是使用 JUnify 库实现阶乘函数的示例,其中就用到了匹配模块:


match = function () {  var unify = unification.unify;  function match_aux(patterns, value) {    var i, result;    for (i = 0; i < patterns.length; i += 1) {      result = unify(patterns[i][0], value);      if (result) {        return patterns[i][1](result);      }    }    return undefined;  }  return function(patterns, value) {    return match_aux(patterns, value);  };}();var fact = function (n) {  return match([    [0, function() { return 1; }],    [$('n'), function(result) {      return result.n * fact(result.n - 1);     }]  ], n);};
复制代码


结    论


JavaScript 不仅灵活、多功能性,还可以部署在各种平台上。通过使用上述技术,开发者可以为他们的应用程序开发出功能强大且简洁的代码。


原文链接:

https://thenewstack.io/top-5-cutting-edge-javascript-techniques/


声明:本文为 InfoQ 翻译整理,未经许可禁止转载。

2024-07-02 10:004159

评论

发布
暂无评论
发现更多内容

为什么 GPU 能够极大地提高仿真速度?

思茂信息

gpu 仿真软件 计算机硬件 仿真技术

自动驾驶成为汽车产业未来趋势,连接器行业迎来进一步发展

华秋电子

BSN-DDC基础网络详解(十二):算力中心开发者门户部署说明(1)

BSN研习社

AIGC持续火爆大模型争相推出,庞大市场造就算力供应模式演变

王吉伟频道

nvidia 算力 AI大模型 AIGC 生成式AI

含“AI”量超高!那些正在改变潮水方向的人丨创业邦2023年新青年创投榜单重磅发布

创业邦

如何通过Java代码将 PDF 转为 HTML 格式

在下毛毛雨

Java html PDF 文档转换

记一次redis主从切换导致的数据丢失与陷入只读状态故障

程序员小毕

数据库 redis 程序员 程序人生 后端

理论+实操,带你了解多沙箱容器运行时Kuasar

华为云开发者联盟

云原生 后端 华为云 华为云开发者联盟 企业号 5 月 PK 榜

软件测试/测试开发丨Python 常用数据结构-字典

测试人

Python 软件测试 自动化测试 测试开发

@广州 智在粤港澳,Serverless 为创新提速

阿里巴巴云原生

阿里云 Serverless 云原生

数据驱动运营增长

MobTech袤博科技

云原生产品免费试用领取攻略,看看有哪些新玩法?

阿里巴巴云原生

阿里云 云原生

全网独一份微服务架构深度解析,连京东师哥都熬夜也要看完

小小怪下士

Java 程序员 微服务架构

区块链DAPP互助逻辑模式系统开发技术方案

I8O28578624

深化企业数据智能应用 用友敢当“急先锋”

用友BIP

2023用友BIP技术大会

云从科技进入百模大战,行业大模型成为胜负手

ToB行业头条

救命稻草!阿里P8耗时5月打造的架构师速成手册,千金难求

程序知音

Java 分布式 java架构 Java进阶 后端技术

java异常体系

echoes

Amazon CodeWhisperer代码提示——Golang测评

衝鋒壹号

北京站丨云原生技术实践营邀请您参加!

阿里巴巴云原生

阿里云 云原生 实践营

涨姿势了!分享一个简单好用的源码调试方法

Java永远的神

程序员 程序人生 后端 jdk源码 架构师

DAPP合约拆分公排模式项目系统开发技术讲解

I8O28578624

共享电单车生产厂家排名!怎么选?

共享电单车厂家

共享电动车厂家 共享电单车生产 本铯共享电动车 共享电单车厂家排名

中移链合约常用开发介绍(五)合约项目编译

BSN研习社

从“0”到“1”!低代码开发和云计算的碰撞,引领数字化转型浪潮!

加入高科技仿生人

云计算 低代码 数字化 数智化

华为云加速器首期加速营圆满结营,40+位创业者携手出海

科技热闻

虚拟显示器软件:BetterDisplay Pro 激活Mac版

真大的脸盆

Mac Mac 软件 显示器校准软件

加速信创生态建设 焱融科技与优炫软件完成兼容性互认证

焱融科技

文件存储 高性能存储 #分布式存储

Seata-go TCC 设计与实现

阿里巴巴云原生

阿里云 云原生 TCC Seata-go

NFTScan:05.15~05.21 NFT 市场热点汇总

NFT Research

智能的支柱:算法

TiAmo

算法 动态规划 分治 回溯算法 分支限界

五个强大的 JavaScript 特性技巧_后端_InfoQ精选文章