Shulou(Shulou.com)06/03 Report--

This article mainly introduces the example analysis of JS Base64 coding and decoding, which is very detailed and has a certain reference value. Interested friends must read it!

1. The foundation is not solid, and the selection is poor.

Poor technology selection often stems from their own lack of technical breadth. Just a few months ago, a front-end HTML character information to Base64 requirements, I did not hesitate to find an open source base64.js. It's easy to use, the browser introduces the JS file, and then Base64 encodes it like this:

The decode method is called for decoding, as follows:

The data is accurate and the function is good. At that time, I was still complacent when I finished it, and I thought it was a perfect solution. As a result, today, it was found that Nima's original browser supported JS Base64 encryption and decryption a long time ago, and the above smug practice is completely blind lighting-wasted wax! It is not a good technology selection at all.

Due to the lack of technical breadth, or the foundation of JS, it wasted a lot of time to find Base64's JS language library and learn its API usage in exchange for a redundant JS that does not need to be loaded at all. Now, it's a really bad technology selection.

two。 Native atob and btoa methods

In fact, since IE10+ browsers, all browsers have natively provided Base64 encoding and decoding methods, which can be used not only in the browser environment, but also in the Service Worker environment.

The method names are atob and btoa, and the specific syntax is as follows:

1) Base64 decoding

The syntax is (in browser):

Var decodedData = window.atob (encodedData)

Or (in a browser or js Worker thread):

Var decodedData = self.atob (encodedData)

For example:

Window.atob ('emhhbmd4aW54dQ=='); / / return:' zhangxinxu'

At first glance, the name of the atob method seems strange. I don't know what the word means. We can understand it as A to B, that is, from A to B. Does the B here refer to Base64? Ha, congratulations! Wrong guess! A refers to Base64, reverse, B is the ordinary character, the common meaning is low, commonly known as low B. So this is how we remember that Low BMagol low BMagol B represents a very Low ordinary character, and An is Base64, which corresponds to the first letter in reverse.

Therefore, atob represents Base64 characters to normal characters, that is, Base64 decoding.

2) Base64 coding

The syntax is (in browser):

Var encodedData = window.btoa (stringToEncode)

Or (in a browser or js Worker thread):

Var encodedData = self.btoa (stringToEncode)

For example:

Window.btoa ('zhangxinxu'); / / return:' emhhbmd4aW54dQ=='

At first glance, the name of the btoa method seems strange. I don't know what the word means. We can understand it as B to A, that is, from B to A. What does B mean and what does A mean? Like the atob method, B refers to the low B normal string and A refers to the Base64 character.

Therefore, the btoa method represents the low B normal character to Base64 character, which is Base64 encoding.

3. Polyfill of IE8/IE9

At present, there are still many PC projects that need to be compatible with IE9, so we can introduce a ployfill script or a JS file specifically for these browsers.

In practice, we can use IE conditional annotations for seamless docking. That is, the following code is embedded in HTML:

[if IE] means all IE browsers. Since IE10+ browsers have abandoned the famous support for IE conditional comments, browsers such as Chrome do not support this IE proprietary syntax, so naturally, the above script introduction is only valid under IE9- browsers. We had hoped that only IE8,IE9 browsers would introduce ployfill, so it would be a perfect connection.

That is, browsers that natively support atob and btoa methods think that it is a HTML comment that does not need to be cared about, while IE9 browsers that do not support atob and btoa and the following browsers will load our base64-polyfill.js so that browsers also support the syntax of window.btoa and window.atob.

The above is all the contents of the article "sample Analysis of JS Base64 Encoding and Decoding". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.