This article is an outline of team technology sharing. Practical sharing combined with code demonstration, more details

PPT

Base64

Purpose: To use text (ASCII) for binary. Equivalent to base 64, encoded with 64 printable characters [a-za-z +/], = used as padding when the last bit is less than 24bits

atob.btoa

You can look directly at Polyfill to understand the algorithm

Developer.mozilla.org/zh-CN/docs/…

Unicode problem

Developer.mozilla.org/zh-CN/docs/…javascripts_utf-16>_base64

application

Data Urls

data:text/plain; base64,SGVsbG8sIFdvcmxkIQCopy the code
data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADAklEQVRYhe2WQWgUZxiGn/ffuFlrLkoIMbOsWQxWikcvPRVFqKaKyQhejKcipfRUP PQUiAcpHrx5kSL1IK0HXQ2SKqXUSo/VHkREZFNjM7OVZSkeQtls43wesqmandmMzUYP7Xub/3/ne56BYf6B/3qUtpi/lh+yhu1GtgtsyKAX1Le4a1VBDVTGd FNZ/RgcCMqrFhj6bihbn/9rLDI7jvFeWtnm5PtOOp3rfudCebjceG0B74o3Zhadxuh7LXAroSq54+FoeCGVwLZrA71zf/MVZiOrAreQdLVnHcceHqjUEgUGp wb7G/XGTbDtHYW/wD3I5rK7Zj6aedIiUJws9s0vzN9aO/gLie6u7g8eHXxUBXBLy41n81+3g0t6CkQpCFGzmxDbvshajIOlF86GY8Go4ZTZF/qVjcJtkXS3j eRd4baEfmWjU2afUOzbb2bD3hVvDMBN2IQjslOJvuJS4Ac3AMJDYWDGeGLXGA8PhQFA4Ac3TFxK6mL25YRNOHdu8uwewwaSi69eZtp8OVr2LLbW5Fv+3OTZP S6KOJJcA8Fhr+TtByhOFQsRnEzqRnCyOFUsAHglb7/gcLvZUaQj8kqbfzFjZ7ti02QO6Gn3VEvGwBxGz4ojxe0ug8KKcCDNwGYPSNc1KLjUg9ck6nHAzFvDQ +AkpTo21yJmzDikW29LQNJ1h3FeqP7m6SzkyH3jQj/8E7j45vlcnPanqw4gp/VfAE9WuKeDdNXW5zZ8Ds3DaNqfrnZJR9P/Ia4GDk7uk/JwufaPAMDvfuUHT J+R7sj993DTsWA0KL209GrylzePGPrWsFxn2arj9Gk4Gp5f5tSafCm/N7Jn1zvIv71O2aOP/ccPlm+4uHbkonsdwYr7zunjbZvefT8ODtAVe1+k3fbSsSdUQ fxq2A6MwbZM6SHYT85xeXbkj+8BAiqJ/VgBwz5sDnsKOtFf6D9zZ+edBYCtpa19ddV3mKxXpk1ERJJqjqhqmcxvswdnk2lxwnGLA6WBn2Xc25BlfPl//P/pd J4DItcX43LWrMQAAAAASUVORK5CYII=Copy the code

Url-loader can be configured to convert small resources into Base64 encoding and directly embed code, reducing the number of requests

encodeURIComponent.decodeURIComponent.encodeURI.decodeURI

Encode special characters in the URL in hexadecimal. % + code

ASCII

American Standard Code for Information Interchange American Standard Code for Information Interchange

Unicode

Provide a unique code for every character, in every language, in every program, on every platform What project, what platform

Unicode specifies the correspondence of code points, but how to store it is not limited

Implementation method:

UTF-32

Fixed length 32 bits, corresponding to Unicode

UTF-16

2-4

UTF-8

1-4

Unicode symbol scope | utf-8 encoding (hexadecimal) | (binary) -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - + -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 0000 0000-0000 007F | 0xxxxxxx 0000 0080-0000 07FF | 110xxxxx 10xxxxxx 0000 0800-0000 FFFF | 1110xxxx 10xxxxxx 10xxxxxx 0001 0000-0010 FFFF | 11110xxx 10xxxxxx 10xxxxxx 10xxxxxxCopy the code

charCodeAt.codePointAt

CharCodeAt: Returns an integer between 0 and 65535 representing the UTF-16 code unit at the given index. If index is out of range, return NaN. CodePointAt: Returns a non-negative integer with a Unicode encoding point value

Problem: Traversing a string

let s = '𠮷 a';
for (let ch of s) {
  console.log(ch.codePointAt(0).toString(16));
}
// 20bb7
/ / 61
Copy the code
/ / or Array. The from
let arr = [...'𠮷 a']; // arr.length === 2
arr.forEach(
  ch= > console.log(ch.codePointAt(0).toString(16)));// 20bb7
/ / 61
Copy the code

binary

Number.property.toString(radix)

Radix: 2-36, numbers greater than 10 will use A-Z for numbers greater than 9

ArrayBuffer.TypedArray.DataView

An ArrayBuffer represents a general-purpose, fixed-length buffer of raw binary data

Blob File

Represents an immutable, raw data file-like object

API

Blob.stream()

Blob.text()

Blob.arrayBuffer()

Buffer

A subclass of Uint8Array

API

Buffer.from()

Buffer.concat()

URL.createObjectURL(object)

Object: File object, Blob object, or MediaSource object used to create a URL.

application

Receiving an ArrayBuffer on the Web

const xhr = new XMLHttpRequest();
xhr.open("GET"."/foo.png".true);
xhr.responseType = "arraybuffer";
xhr.onload = function (e) {
  const arrayBuffer = xhr.response;
  // do something
};

xhr.send(null);
Copy the code

Applets receive an ArrayBuffer

wx.request({
  url: 'www.foo.com'.responseType: 'arraybuffer'});Copy the code

Small program to upload the ArrayBuffer

const fs = wx.getFileSystemManager();

fs.readFile({
  filePath: 'foo.png'.success(data) {
    wx.request({
      url: 'www.foo.com'.data: data.slice(0.1024 * 512)}); }});Copy the code

The instance

Small program large file section upload

/**
 * Upload a part in a multipart upload transaction
 * @param {String} name the object name
 * @param {String} uploadId the upload id
 * @param {Integer} partNo the part number
 * @param {File} file upload File, whole File
 * @param {Integer} start  part start bytes  e.g: 102400
 * @param {Integer} end  part end bytes  e.g: 204800
 * @param {Object} options* /
export async function uploadPart(name, uploadId, partNo, file, start, end, options = {}) {
  if(! is.arrayBuffer(file)) {if(! options.mime) { options.mime = mime.getType(path.extname(file)); } file =await new Promise((resolve, rejcet) = > {
      fs.readFile({
        filePath: file,
        success: (res) = > resolve(res.data),
        fail: rejcet,
      });
    });
  }

  const data = file.slice(start, end);

  return this._uploadPart(name, uploadId, partNo, data, options);
}
Copy the code

Decode the lyrics of the duet

const ENCRYPT_KEY = [63.91.97.119.94.52.39.71.86.54.49.45.02.210.110.105];

export function decryptAndUnzip(xrc: ArrayBuffer) :string {
  // decrypt
  const bytes = new Uint8Array(xrc);
  const bytesLength = bytes.length;
  const encryptKeyLength = ENCRYPT_KEY.length;
  for (let i = 0; i < bytesLength; i += 1) {
    // eslint-disable-next-line no-bitwise
    bytes[i] ^= ENCRYPT_KEY[i % encryptKeyLength];
  }

  // unzip
  return pako.inflate(bytes, { to: 'string' });
}
Copy the code

reference

En.wikipedia.org/wiki/Base64 developer.mozilla.org/zh-CN/docs/… Es6.ruanyifeng.com/#docs/strin… www.ruanyifeng.com/blog/2007/1…