SAPUI5中的JavaScript / ESLint规则[重复]答案

【问题标题】：JavaScript / ESLint Rules in SAPUI5 [duplicate]SAPUI5中的JavaScript / ESLint规则[重复]
【发布时间】：2018-10-23 07:27:59
【问题描述】：

我想改造这个方法，完全适用于 SAP WEB IDE 中的 ESLint 规则：

getBase64Promise: function (file) {
        return new Promise((resolve, reject) => {    // <-- 
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => {                  // <--
                let encoded = reader.result.replace("data:", "").replace(/^.*;base64,/, "");  // <--
                if ((encoded.length % 4) > 0) {
                    encoded += '='.repeat(4 - (encoded.length % 4));
                }
                resolve(encoded);
            };
            reader.onerror = error => reject(error); // <--
        });
},

ESLint 因以下规则而失败：

应替换使用“=>”的括号模式
“let”也应该被替换

有人可以帮忙吗？我尝试了一些东西，但它根本不起作用：

getBase64Promise: function (file) { 
  return new Promise(function (resolve, reject) {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload(function () {
            var encoded = reader.result.replace("data:", "").replace(/^.*;base64,/, "");
            if ((encoded.length % 4) > 0) {
                encoded += "=".repeat(4 - (encoded.length % 4));
            }
            resolve(encoded);
        });

        reader.onerror(function () {
            reject(reader.error);
        });
  });
},

谢谢克里斯

【问题讨论】：

是的，可能是特定于编辑器的（来自 SAP 的 WEB IDE），但我只能看到错误消息而不是详细的底层 ESLint 规则。对不起。但我知道在替换所有“=>”和“让”时它不会显示任何错误。

标签： javascript ecmascript-6 sapui5 eslint sap-web-ide

【解决方案1】：

=> 或箭头函数是创建匿名函数的捷径。这也是一种将当前作用域绑定到函数而无需显式添加.bind(this) 的方法。

你可以很容易地通过改变它来替换它：

(params) => {

到

function(params) {

类似

getBase64Promise: function(file) { 
  return new Promise(function(resolve, reject) {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload(function() {
            var encoded = reader.result.replace("data:", "").replace(/^.*;base64,/, "");
            if ((encoded.length % 4) > 0) {
                encoded += "=".repeat(4 - (encoded.length % 4));
            }
            resolve(encoded);
        });

        reader.onerror(function() {
            reject(reader.error);
        });
  });

【讨论】：

【解决方案2】：

我将function 替换为arrow function 并将过时的var 替换为let 或const：

getBase64Promise: (file) => { 
  return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload(() => {
            let encoded = reader.result.replace("data:", "").replace(/^.*;base64,/, "");
            if ((encoded.length % 4) > 0) {
                encoded += "=".repeat(4 - (encoded.length % 4));
            }
            resolve(encoded);
        });

        reader.onerror(() => {
            reject(reader.error);
        });
  });
},

【讨论】：

不要误会，但这和我原来的版本几乎一样？
不，第一个你没有箭头功能。
正如我所写，我想摆脱箭头函数，没有更多的 ;-)
var 并没有过时，在代码中使用 let、const 或其他 es6 语法会破坏企业通常仍在运行的旧版浏览器（遗憾的是，webide 无法转换）