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.

哦，這是什么法術？ 幾行代碼被轉換成大量的代碼！ 想象一下使用新功能可以節省多少行代碼和復雜性。 如果必須使用較舊的語法，則實際上必須寫那么多！ 太神奇了。

翻譯自: https://www.includehelp.com/code-snippets/polyfilling-and-transpiling-in-javascript.aspx

js中的轉譯

總結

以上是生活随笔為你收集整理的js中的转译_JavaScript中的填充和转译的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。