js中的转译_JavaScript中的填充和转译

js中的转译

JavaScript is rapidly advancing. Today it's the most popular programming/scripting language that devs use to code logic and applications and is used in umpteen number of places. The community behind its development hasn't stopped creating and adding new features to JavaScript to make it more lively, easy and even more powerful. However, the drawback which tags along whenever a language or framework rapidly advances with new changes coming in all the time is their support on the browsers. We know that JavaScript compiles on the browser and it is important for the browser to understand what JavaScript you are writing. Newser features take time to be interpreted by the browsers and sometimes some versions of certain browsers purposely restrain support for new features because of stability. But as a dev, we can't use this as an excuse to not learn what's new for us. So how do we ensure that modern JS runs perfectly on older versions of our browsers?

JavaScript正在Swift发展。今天，它是开发人员用来编码逻辑和应用程序的最流行的编程/脚本语言，并且在许多地方使用。开发背后的社区一直没有停止为JavaScript创建和添加新功能，使其变得更生动，更轻松，甚至更强大。但是，每当语言或框架随新的变化而Swift发展时，标记的缺点就是它们对浏览器的支持。我们知道JavaScript是在浏览器上编译的，浏览器了解您正在编写JavaScript非常重要。新闻功能需要时间来由浏览器解释，有时某些版本的浏览器出于稳定性的目的而故意限制对新功能的支持。但是作为一名开发人员，我们不能以此为借口不了解我们的新功能。那么，如何确保现代JS在我们的旧版浏览器上完美运行？

1)灌装 (1) Polyfilling)

A polyfill is a piece of code or a plugin that enables modern JavaScript features to run on older versions of the browser. It's just a trick or workaround where modern features are coded in and out using older features so the browser can understand.

polyfill是一段代码或一个插件，可以使现代JavaScript功能在旧版浏览器上运行。这只是一个技巧或解决方法，使用较旧的功能对现代功能进行编码和输入，以便浏览器可以理解。

For example, ES15 allows us to check is a value is a number or not using the isNaN() method.

例如， ES15允许我们使用isNaN()方法检查值是否为数字。

isNaN(44);
isNaN('hello');

Output

输出量

false
true

IsNaN() checks for values that do not a number. It returns true if the value passed in as a parameter is not a number and false if it is a number. Being a new feature, some browsers may not support it. So we can implement our own NaN as a polyfill and replicate its behavior that the browser can understand.

IsNaN()检查没有数字的值。如果作为参数传递的值不是数字，则返回true；如果是数字，则返回false 。作为一项新功能，某些浏览器可能不支持它。因此，我们可以将自己的NaN实现为polyfill，并复制浏览器可以理解的行为。

Number.isNaN = function isNaN(n) {
return n !== n;
};

We can also check if the method is not already available for the browser first and then define it.

我们还可以先检查该方法是否不适用于浏览器，然后再定义它。

if (!Number.isNan) {
Number.isNaN = function isNaN(n) {
return n !== n;
};
}

The downside of polyfills is that all features can't be coded as polyfills however, it's still very commonly used by developers for features that can be easily coded.

polyfill的缺点是不能将所有功能都编码为polyfill，但是，开发人员仍然很常将其用于易于编码的功能。

2)转码 (2) Transpiling)

The newer syntax cannot be replicated using Polyfills. No matter whatever we do, we will get an undefined syntax error and this is where transpiling comes to the rescue. You can break down transpiling as a combination of two words- transforming and compiling. Now you can easily understand that transpiling is a tool that transforms newer syntax into the older one, that the browser can understand. The most commonly used transpiler is babel which does all the work for us. To demonstrate, let's code some newer syntax see how they are transpiled by babel.

无法使用Polyfills复制较新的语法。无论我们做什么，都会得到未定义的语法错误，这就是转译的出路 。您可以将转换分为两个单词- 转换和编译来分解。现在，您可以轻松地理解，编译是一种将浏览器可以理解的，将新语法转换为旧语法的工具。最常用的翻译机是babel，它可以为我们完成所有工作。为了演示，让我们编写一些新的语法代码，以了解babel如何对其进行编译。

Go to https://babeljs.io/repl and on the left editor, we'll write some newser JS syntax which babel will transpile to older syntax on the right editor.

转到https://babeljs.io/repl ，在左侧的编辑器上，我们将编写一些newser JS语法，babel将在右侧的编辑器上将其转换为较旧的语法。

const add = (a, b) => {
console.log(`${a} + ${b} = ${a+b}`);
}

Output

输出量

"use strict";
var add = function add(a, b) {
console.log("".concat(a, " + ").concat(b, " = ").concat(a + b));
};

As you can see we have used three modern features, the const keyword, array function and template strings and all of them are converted to older syntax.

如您所见，我们使用了三个现代功能， const关键字，数组函数和模板字符串，所有这些都转换为较旧的语法。

const multiply = (a = 5, b = 3) => {
console.log(a * b);
};

Output

输出量

"use strict";
var multiply = function multiply() {
var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 5;
var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
console.log(a * b);
};

Using default value parameter is also a fairly newer feature and babel compiles it into a code understandable in terms of older syntax of JS. Let's look at a last example,

使用默认值参数也是一个相当新的功能，babel将其编译为可从JS的旧语法理解的代码。让我们看最后一个例子，

class Student {
constructor(name, rollNo) {
this.name = name;
this.rollNo = rollNo;
this.attendance = 0;
}
isPresent() {
this.attendance++;
}
}

A little object oriented JS to create a small class for Students. And we look at the right...

一个面向对象的小JS为学生创建一个小班。我们看右边...

Output

输出量

"use strict";
function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }
function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var Student =
/*#__PURE__*/
function () {
function Student(name, rollNo) {
_classCallCheck(this, Student);
this.name = name;
this.rollNo = rollNo;
this.attendance = 0;
}
_createClass(Student, [{
key: "isPresent",
value: function isPresent() {
this.attendance++;
}
}]);
return Student;
}();

Oh now, what sorcery is this? A few lines of code transpiled into a monstrous amount of code! Imagine how many lines of code and complexity you save by using newer features. If you had to use the older syntax you'd actually have to write that much! Insanely amazing.

哦，这是什么法术？几行代码被转换成大量的代码！想象一下使用新功能可以节省多少行代码和复杂性。如果必须使用较旧的语法，则实际上必须写那么多！太神奇了。