JavaScript
关注
JavaScript 在 SAP 产品开发中的应用
汪子熙
Jerry Wang，2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。Jerry 是 SAP 社区导师，SAP 中国技术大使。在长达15年的 SAP 产品开发生涯里，Jerry 曾经先后参与 SAP Business ByDesign，SAP CRM，SAP Cloud for Customer，SAP S/4HANA，SAP Commerce Cloud(电商云)等标准产品的研发工作。
Jerry 工作中使用 ABAP, Java, JavaScript 和 TypeScript 进行开发, 对包括 SAP UI5 在内的多款 SAP 自研框架有深入的研究。
展开
-
单步调试找到 cy.visit 的实现源代码(一) - 找到了 BlueBird
这里 enqueue 的是创建好的 chainer id 和对应 command 的 name，参数。我们调用 cy.visit 时指定的 url 到哪里去了呢？这个 bluebird 是什么鬼？原创 2022-09-23 21:44:45 · 258 阅读 · 0 评论 -
SAP UI5 SimpleForm 控件的 adjustLabelSpan 属性
这样做是为了对齐在同一个表单中使用全尺寸 FormContainer 和多列行的表单上的标签（因为每个 FormContainer 内部都有自己的网格）。标签和字段可能未对齐，标签可能以错误的模式呈现，并且单个控件之间的间距可能是错误的。如果表单具有可编辑的内容，则将特定于设备和特定主题的行高和标签对齐应用于表单行。如果设置，表单的所有（不仅是可编辑的）行都将获得可编辑字段的行高。例如，可编辑设置为 false 的表单中的输入控件仍然是可编辑的。默认情况下，表单内的标签将以相应的模式呈现。原创 2022-09-20 10:54:30 · 118 阅读 · 2 评论 -
Node.js 应用高 CPU 占用率的分析方法
但是有一个更好的方法，使用检查器模块 https://nodejs.org/api/inspector.html 按需获取配置文件。它是一个 Node.js 内置模块，开发人员不必安装任何额外的依赖项，但建议使用。在大多数情况下，如果性能问题只能在生产系统重现，那么这种问题分析起来确实很棘手，因为我们需要相同的环境配置、相同的数据库、缓存等数据。性能问题可能只针对某些类别的用户，因为他们有特定的数据。这不是一个好的选择，因为在调试模式下 Node.js 进程会消耗更多资源，而且不安全。原创 2022-09-01 23:25:43 · 301 阅读 · 0 评论 -
在 SAP UI5 应用中使用浏览器原生的 Fetch API 发起网络请求试读版
Jerry Wang，2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。Jerry 是 SAP 社区导师，SAP 中国技术大使。在长达 15 年的 SAP 标准产品开发生涯里，Jerry 曾经先后参与 SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, SAP Commerce Cloud(电商云)等标准产品的研发工作。...原创 2022-08-27 15:44:16 · 31 阅读 · 0 评论 -
一键部署开箱即用的代理服务器，解决 SAP UI5 应用开发过程中访问远端 OData 服务的跨域问题试读版
本步骤介绍的这种做法，同样需要暂时修改 manifest.json 文件，并且在本地开发完成后，要记得把 manifest.json 里修改的 invoiceRemote 值，重新恢复成 `https://services.odata.org/V2/Northwind/Northwind.svc/`。同本教程前面介绍过的两种解决跨域问题的思路相比，三者各有优缺点，大家在实际开发过程中可以根据自己的实际情况自行选用。...原创 2022-08-27 11:48:26 · 84 阅读 · 0 评论 -
如何查找SAP Fiori launchpad Designer的准确路径即url地址
比如我们知道在SPRO里下面这个路径的customizing activity里打开Fiori Launchpad designer：原创 2019-05-31 23:11:28 · 1066 阅读 · 0 评论 -
Promise.all API 的出错处理
例如，如果有多个 fetch 调用，就像上面的例子一样，一个失败了，其他的 fetch 仍然会继续执行，但是 Promise.all 不会再监视它们了。他们的结果将被忽略。通常， Promise.all(…) 接受一个可迭代的（在大多数情况下是一个数组）的 Promise. 但是，如果这些对象中的任何一个不是 Promise，它就会。如果一个 Promise 被 reject，Promise.all 会立即被 reject ，此时完全忽略列表中的其他 Promise——其结果被忽略了。...原创 2022-08-18 23:29:19 · 105 阅读 · 0 评论 -
SAP UI5 异步加载 metadata 的代码实现
# Created by Jerry Wang, last modified on Sep 14, 2015* sMockdataBaseUrl* oMockServer* oConfig* loadMetadataAsync* useBatch* mockedDataSource* serviceUrl* sap.ushell* sap-language*...原创 2019-06-21 11:14:38 · 320 阅读 · 0 评论 -
Promise 静态 API 的使用方法
当所有列出的 Promise 都 resolve 后，新的 Promise 也将 resolve，并且它们的结果数组成为新的 Promise 对象的结果。请注意，结果数组成员的顺序与其源承诺中的顺序相同。尽管第一个 Promise 需要最长的时间来解决，但它仍然是结果数组中的第一个。一个常见的技巧是将一组作业数据映射到一组 Promise 中，然后将其包装到 Promise.all 中。一个实际例子是：并行下载多个 URL，并在这些 URL 全部下载完成后，再进行后续的业务逻辑处理。...原创 2022-08-15 10:29:08 · 71 阅读 · 0 评论 -
Promise.allSettled 的 Polyfill 处理
如果因为浏览器太过老旧，不支持最新的 Promise.allSettled API，我们可以使用 polyfill 技术，简单地自己用 Promise.all, 自行实现 Promise.allSettled.在这段代码中，promises.map 接受输入值，使用将它们转换为 Promise（以防传递了非 Promise 类型的 primitive 值），然后将 .then 处理程序添加到每个值。该处理程序将成功的结果值转换为，并将错误原因转换为。这正是的格式。...原创 2022-08-15 10:19:43 · 82 阅读 · 0 评论 -
JavaScript 异步函数的 Promisification 处理
我们现实的开发项目中经常需要这种转换，因为许多函数和库都是基于回调的，但是 Promise 更方便，所以对它们进行 Promisification 处理是有意义的。我们称这个函数为 promisify(f)：它接受一个准备被改造成 Promise 的函数 f， 并返回一个 wrapper 函数。是一个很长的词，表示一个编程范式的转变，即将接受回调的函数转换为一个返回类型为 Promise 的函数。这段代码，动态创建一个 script 元素，待其加载完毕后，会触发 onload 事件指定的回调函数。...原创 2022-08-15 10:18:16 · 67 阅读 · 0 评论 -
将使用回调函数作为参数的函数改造为返回 Promise 的一个具体例子
我们期望 script onload 事件发生时，会使用 Promise 自带的 resolve 和 reject 传递参数，因此自己编写了一个 callback 函数，在这个 callback 函数里，使用 Promise 的 resolve 投递结果。并且此时的 callback 函数，确实是我们在 promisify 函数内编写的使用 Promise resolve 传递结果的函数。，可以将任意传递进来的函数 f，改造成返回参数类型为 Promise 的新函数。下面我们进行单步调试。......原创 2022-08-14 22:16:24 · 437 阅读 · 1 评论 -
使用 JavaScript Promise 读取 Github 某用户的数据
如果 .then（或 catch/finally，无关紧要）处理程序返回一个 Promise，则 Promise 链的其余部分会一直等待，直到这个 pending 的 Promise 被 resolve. 当 Promise 内部的 executor 有数据被 resolve 调用时，resolve 输入的数据（或错误）会被进一步传递到 Promise chain 里的其他 Promise.then 中去。...原创 2022-08-13 09:09:41 · 65 阅读 · 0 评论 -
JavaScript 在 Promise.then 方法里返回新的 Promise
按照先后顺序，依次加载 one.js, two.js, three.js这里每个 loadScript 调用，都会返回一个 promise，这个新的 promise，在其被 resolve 时，会触发下一个.then的执行。于是它开始加载下一个脚本。所以脚本一个接一个地加载。我们可以向链中添加更多异步操作。请注意，代码仍然是flat的——它向下增长，而不是向右增长。这种方式没有的迹象。此代码的作用相同：依次加载 3 个脚本。但它向右增长, 所以本质上仍然有回调地狱的问题。...原创 2022-08-13 09:06:11 · 423 阅读 · 0 评论 -
JavaScript 里的 Promise Chaining
Promise 通常被定义为最终将可用的值的代理(proxy)。原创 2022-08-12 15:18:40 · 159 阅读 · 0 评论 -
JavaScript 异步操作里的嵌套回调函数
嵌套回调函数经常用在两个逻辑上具有先后顺序的异步操作场景中。思考下面的问题：我们如何按顺序加载两个脚本？${.}外层 loadScript 完成后，回调启动内层的 loadScript 调用。如果我们想要顺序加载更多的脚本，该怎么办？...原创 2022-08-12 13:15:25 · 219 阅读 · 0 评论 -
什么是 JavaScript 里的异步操作和回调函数
到目前为止， loadScript 函数还没有提供跟踪加载完成的方法。但我们想知道它何时发生，使用该脚本中的新函数和变量。换句话说，我们可以立即触发一个动作，但这些动作需要耗费一定的时间才能完成执行。执行的，因为它现在开始加载，但实际脚本的运行逻辑，绝大多数时候发生在函数 loadScript 已经完成时。它声明了新函数 newFunction，我们想要运行这个函数。) 下面有任何代码，这些代码会立即执行，而不会等待脚本加载完成再执行。onload 事件用于在脚本加载执行后执行一个函数。...原创 2022-08-12 10:51:06 · 75 阅读 · 0 评论 -
使用 Promise 来改写 JavaScript 的加载逻辑
反观 callback 解决方案，调用 loadScript(script, callback) 时，我们必须有一个回调函数可供使用。每次，我们都会在“订阅列表”中添加一个新的“粉丝”，一个新的订阅功能。首先，我们运行 loadScript(script)，然后我们使用类似自然语言的语法 then，编写如何处理结果。delay 的 executor 里，三秒之后再调用 resolve，因而实现了 delay 效果。的写法，含义是 resolve 被调用，没有参数。请注意，在这个任务中，...原创 2022-08-12 10:40:02 · 82 阅读 · 0 评论 -
通过现实生活中一个例子来理解 JavaScript Promise
他们可以填写他们的电子邮件地址，这样当歌曲可用时，所有订阅方都会立即收到它。即使出现了非常大的问题，比如工作室发生火灾，导致歌曲无法发布，他们仍然会收到通知。根据我们的类比：这是“订阅列表”。“生产代码”花费它需要的任何时间来产生承诺的结果，并且“承诺”使该结果在准备好时可供所有订阅的代码使用。它的参数 resolve 和 reject 是 JavaScript 本身提供的回调。一个“消费代码”，期望消费“生产代码”产生的结果。想象一下，你是一位顶级歌手，粉丝们日夜询问你即将到来的歌曲。...原创 2022-08-12 10:00:19 · 67 阅读 · 0 评论 -
JavaScript Promise 的使用技巧
函数体内一般是一个比较费时的操作，操作本身会立即执行，但什么时候执行结束？执行结束后，通过 resolve 通知 then 注册的回调函数。执行 new Promise 的构造函数后，会立即进入 Promise 的构造函数体内，即包含了 resolve 和 reject 方法的匿名函数。上图的 setTimeout，模拟了一个耗时 3 秒的 HTTP 操作。返回的 myPromise 对象，使用 then 注册回调函数。Promise 是一个 JavaScript 对象，它链接生产代码和消费代码。...原创 2022-08-12 09:49:46 · 55 阅读 · 0 评论 -
关于 SAP UI5 Container 控件 aggregation 的深入分析试读版
Jerry Wang，2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。Jerry 是 SAP 社区导师，SAP 中国技术大使。在长达 15 年的 SAP 标准产品开发生涯里，Jerry 曾经先后参与 SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, SAP Commerce Cloud(电商云)等标准产品的研发工作。...原创 2022-08-11 18:59:37 · 60 阅读 · 0 评论 -
如何分析因为 SAP UI5 版本差异带来的问题试读版
Jerry Wang，2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。Jerry 是 SAP 社区导师，SAP 中国技术大使。在长达 15 年的 SAP 标准产品开发生涯里，Jerry 曾经先后参与 SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, SAP Commerce Cloud(电商云)等标准产品的研发工作。...原创 2022-08-11 12:31:54 · 54 阅读 · 0 评论 -
在 SAPGUI 里使用 ABAP 报表上传 SAP UI5 应用到 ABAP 服务器试读版
Jerry Wang，2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。Jerry 是 SAP 社区导师，SAP 中国技术大使。在长达 15 年的 SAP 标准产品开发生涯里，Jerry 曾经先后参与 SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, SAP Commerce Cloud(电商云)等标准产品的研发工作。...原创 2022-08-07 23:17:14 · 49 阅读 · 0 评论 -
关于将本地 SAP UI5 应用配置到本地 Fiori Launchpad 的技术实现深入讲解试读版
Jerry Wang，2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。Jerry 是 SAP 社区导师，SAP 中国技术大使。在长达 15 年的 SAP 标准产品开发生涯里，Jerry 曾经先后参与 SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, SAP Commerce Cloud(电商云)等标准产品的研发工作。......原创 2022-08-05 12:53:25 · 98 阅读 · 0 评论 -
74行代码实现浪漫的红心下落的动画效果
a.fillRect(c, d, 1, 1)：fillRect()方法绘制一个填充了内容的矩形，这个矩形的开始点（左上点）在参数 c 和 d 指定的位置。getContext("2d") 返回的对象是内建的 HTML5 对象，类型为 `CanvasRenderingContext2D`，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。因此，这个高亮方法，在函数 d 的 输入参数 c 和 d 指定的坐标为圆形，以 e 为半径，顺时针方向绘制一个圆形( 2 * m.PI 代表 360 度)。......原创 2022-08-04 13:29:10 · 163 阅读 · 0 评论 -
如何通过单步调试的方式找到引起 Fiori Launchpad 路由错误的原因试读版
Jerry Wang，2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。Jerry 是 SAP 社区导师，SAP 中国技术大使。在长达 15 年的 SAP 标准产品开发生涯里，Jerry 曾经先后参与 SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, SAP Commerce Cloud(电商云)等标准产品的研发工作。...原创 2022-08-03 23:15:33 · 70 阅读 · 8 评论 -
授人以渔 - 如何自行查询任意 SAP UI5 控件属性的文档和技术实现细节试读版
Jerry Wang，2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。Jerry 是 SAP 社区导师，SAP 中国技术大使。在长达 15 年的 SAP 标准产品开发生涯里，Jerry 曾经先后参与 SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, SAP Commerce Cloud(电商云)等标准产品的研发工作。Jerry 工作中使用 ABAP, Java, JavaScript 和原创 2022-08-03 19:53:45 · 78 阅读 · 0 评论 -
使用自开发的代理服务器解决 SAP UI5 FileUploader 上传文件时遇到的跨域访问错误试读版
JerryWang，2007年从电子科技大学计算机专业硕士毕业后加入SAP成都研究院工作至今。Jerry是SAP社区导师，SAP中国技术大使。在长达15年的SAP标准产品开发生涯里，Jerry曾经先后参与SAPBusinessByDesign,SAPCRM,SAPCloudforCustomer,SAPS/4HANA,SAPCommerceCloud(电商云)等标准产品的研发工作。...原创 2022-07-28 14:52:20 · 80 阅读 · 0 评论 -
SAP UI5 FileUploader 控件实现本地文件上传，接收服务器端的响应时遇到跨域访问错误的试读版
JerryWang，2007年从电子科技大学计算机专业硕士毕业后加入SAP成都研究院工作至今。Jerry是SAP社区导师，SAP中国技术大使。在长达15年的SAP标准产品开发生涯里，Jerry曾经先后参与SAPBusinessByDesign,SAPCRM,SAPCloudforCustomer,SAPS/4HANA,SAPCommerceCloud(电商云)等标准产品的研发工作。...原创 2022-07-28 10:23:31 · 61 阅读 · 0 评论 -
SAP UI5 FileUploader 控件深入介绍 - 为什么需要一个隐藏的 iframe 试读版
JerryWang，2007年从电子科技大学计算机专业硕士毕业后加入SAP成都研究院工作至今。Jerry是SAP社区导师，SAP中国技术大使。在长达15年的SAP标准产品开发生涯里，Jerry曾经先后参与SAPBusinessByDesign,SAPCRM,SAPCloudforCustomer,SAPS/4HANA,SAPCommerceCloud(电商云)等标准产品的研发工作。...原创 2022-07-27 22:29:31 · 66 阅读 · 0 评论 -
通过 FileUploader 的初始化，了解 SAP UI5 应用的 StaticArea 初始化逻辑
sendXHR的默认值为false,此时使用formsubmit提交上传数据。如果是true，使用XHR请求提交。FormSubmit提交的数据，经Jerry测试，无法在Chrome开发者工具network里观察到上传的文件内容。这个staticarea的初始化采取Lazyloading的惰性加载方式只有真正需要时才会执行初始化操作。库是否被使用，只需要检查button控件的元数据，即getMetadata方法返回的结果是不是。...原创 2022-07-27 14:03:22 · 82 阅读 · 0 评论 -
SAP UI5 架设在 http-proxy 库上的单步调试
当一个请求被代理时，它遵循两个不同的管道，它们将转换应用于req和res对象。第一个管道（传入）负责创建和操作将客户端连接到目标的流。第二个管道（传出）负责创建和操作从目标向客户端返回数据的流。从上图可以看出，凡是发送到http//localhost8085/sap/的请求，会被重定向到10.0.xx.xx/sap了。这样，8080端口就被隐藏掉，起作用的是代理服务器监听的8085端口。因此，修改proxy.js里的配置。然后监听在8085端口上。里的sap提取出来。...原创 2022-07-27 14:00:10 · 121 阅读 · 0 评论 -
关于 SAP UI5 应用 ui5.yaml 里的 paths 映射问题
UI5Tooling将以给定的编码读取项目的相应文件。除此之外，我们还可以进行一些自定义设置，这些配置从UI5CLIv2.2.0开始可用，并且仅适用于定义规范版本2.1或更高版本的项目。如果项目的源代码位于不同的目录中，则需要相应地配置路径映射。根据项目的类型，有几种不同的路径映射可用。请注意，所有配置的路径必须以POSIX编写（即仅使用正斜杠/）并相对于项目的根目录。这个upload会根据index.html所在的路径，自动补全之前的代码。...原创 2022-07-27 13:52:11 · 93 阅读 · 0 评论 -
SAP UI5 FileUploader 的本地文件上传技术实现分享
SAPUI5FileUploader底层可以基于form的multipart/form-data或者XHR两种技术方式进行文件上传，这在下面的源代码看得很清楚。点击uploadFile之后，执行submit之前，都可以正常访问this.oIFrameRef.contentWindow.location.href。按钮选择本地文件的时候，会各触发一次。当我们使用SAPUI5的FileUploader控件，上传本地文件时，其执行逻辑的入口，就是。...原创 2022-07-27 13:05:13 · 115 阅读 · 0 评论 -
SAP UI5 本地开发如何通过 http-proxy 解决跨域问题
前不久，SAP发布了新UI5工具的官方生产版本。这当然是UI5con上的一个大话题，有几个关于它的会议。对于使用VisualStudioCode进行SAPUI5本地开发的从业者来说，这个版本里一个非常有用的功能，就是对于CORS问题提供的解决方案代理服务器。在package.json中将这些模块定义为devDependencies并运行。此选项将使用express来部署代理服务器。在OpenSAP课程中，SAP使用了npm模块。在项目的根目录创建一个。...原创 2022-07-27 11:14:41 · 272 阅读 · 0 评论 -
使用 SAP UI5 FileUploader 控件上传本地文件试读版
JerryWang，2007年从电子科技大学计算机专业硕士毕业后加入SAP成都研究院工作至今。Jerry是SAP社区导师，SAP中国技术大使。在长达15年的SAP标准产品开发生涯里，Jerry曾经先后参与SAPBusinessByDesign,SAPCRM,SAPCloudforCustomer,SAPS/4HANA,SAPCommerceCloud(电商云)等标准产品的研发工作。...原创 2022-07-25 17:59:13 · 75 阅读 · 0 评论 -
如何使用 multiparty 工具库在 Node.js 应用里解析 multipart form-data 格式的请求
我们使用form和input控件上传文件到服务器，服务器采取Node.js应用接收客户端上传的文件。里的回调函数，req的类型为IncomingMessage，url字段的值为。这个库文件，解析从客户端提交的本地文件。使用HTML标准的form标签，action值为。注意，此时这个回调函数并不会立即执行。,这个值在Node.js应用里会再次用到。此时url变成了form里指定的。我们在title字段输入。，multiple属性为。选中两个文件后，点击。...原创 2022-07-25 09:41:15 · 282 阅读 · 0 评论 -
关于 SAP Fiori 应用的离线使用
SAP标准发布的某些Fiori应用，能够离线使用，前提是这些Fiori应用事先通过预打包(比如Cordova)技术，制作成为托管在iOS或Android的本机容器中的一种混合应用程序(HybridApplication).SAPFiori应用程序通常以在线模式使用，其中客户端请求通过网络发送到业务数据所在的后端。支持离线的应用程序访问包含业务数据的本地离线商店，这些数据会在网络连接恢复时定期与后端同步。...原创 2022-07-23 20:36:17 · 391 阅读 · 0 评论 -
运行在 CCV2 环境上的 Spartacus Storefront 如果出现性能问题该怎么分析
理论上来说，一旦用户请求到达 Spartacus SSR 服务器，通常有三个潜在的响应时间贡献者，其中最后一个也可以细分成多个潜在的性能瓶颈：执行 Node.js 代码所花费的时间在 apache 层上向 OCC 层请求所花费的时间请求 OCC 层在 API 服务器上花费的时间对于第三点，下列原因都可能造成 API 服务器响应时间过长：API pod 上的资源耗尽DB 锁定/DTU 耗尽对公共网络的请求（例如 payment 提供商）线程/资源锁定和争用代码执行如果发现代码执行原创 2022-07-22 10:40:17 · 48 阅读 · 0 评论 -
一个前端开发工程师的天猫精灵评测报告
虽然从普通用户眼中，使用语音向天猫精灵发起指令，然后收到后者的语音回复，这个流程似乎很简单，但背后实际上有着人工智能中 ASR（语音识别）、NLP（自然语言处理）、TTS（语音合成）等自然语言处理技术的参与和整合。我们先来看一个典型的用户通过语音同天猫精灵交互的流程图。用户用语音唤醒天猫精灵，后者接收到用户语音，上传到智能应用平台。平台使用 ASR（音频转文字）和 NLP（自然语言处理）技术，智能解析出用户发出语音包含的意图(通俗的说，即用户当前期望天猫精灵完成什么样的操作)。平台会自动将当前原创 2022-07-22 10:39:23 · 96 阅读 · 0 评论