### Full postMessage Example

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/3-frames-and-windows/03-cross-window-communication/article.md

A complete example demonstrating cross-window communication using postMessage. It includes sending a message from one window and receiving and responding to it in another.

```html
<iframe src="http://javascript.info/article/cross-window-messaging/postmessage-from" name="example">

<script>
  window.addEventListener("message", function(event) {
    if (event.origin != 'http://javascript.info') {
      // 来自未知的源的内容，我们忽略它
      return;
    }

    alert( "received: " + event.data );

    // 可以使用 event.source.postMessage(...) 向回发送消息
  });
</script>
```

--------------------------------

### XMLHttpRequest Example

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/5-network/08-xmlhttprequest/example.view/index.html

Demonstrates how to use XMLHttpRequest to make an asynchronous GET request and track its progress and state changes. Ensure the 'log' element exists in your HTML to display output.

```javascript
function run() { let xhr = new XMLHttpRequest(); write(\`readyState=${xhr.readyState}\`); xhr.open('GET', 'digits'); write(\`readyState=${xhr.readyState}\`); xhr.onreadystatechange = function() { write(\`readyState=${xhr.readyState}, responseText.length=${xhr.responseText.length}\`); }; xhr.onprogress = function() { write(\`readyState=${xhr.readyState}, responseText.length=${xhr.responseText.length}\`); }; xhr.send(); } function write(text) { let li = log.appendChild(document.createElement('li')); li.innerHTML = text; }
```

--------------------------------

### Setup BDD Testing with Mocha and Chai

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/03-code-quality/05-testing-mocha/pow-1.view/index.html

Configure Mocha for BDD-style testing and make Chai's assert global. Ensure mocha.run() is called to start the test runner.

```javascript
// enable bdd-style testing
mocha.setup('bdd');

// chai has a lot of stuff, let's make assert global
let assert = chai.assert;

function pow(x, n) { /* function code is to be written, empty now */ }

mocha.run();
```

--------------------------------

### Example Usage of showNote

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html

Demonstrates how to use the `showNote` function to display notes above, to the right, and below a blockquote element.

```javascript
// test it
let blockquote = document.querySelector('blockquote');
showNote(blockquote, "top", "note above");
showNote(blockquote, "right", "note at the right");
showNote(blockquote, "bottom", "note below");
```

--------------------------------

### Interactive Range Selection

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/2-ui/99-ui-misc/02-selection-range/article.md

An interactive example allowing users to set the start and end offsets for a range within an element and apply the selection to the document.

```javascript
let range = new Range();

range.setStart(p, start.value);
range.setEnd(p, end.value);

document.getSelection().removeAllRanges();
document.getSelection().addRange(range);
```

--------------------------------

### Navigating Window Hierarchy

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/3-frames-and-windows/03-cross-window-communication/article.md

Shows how to check the relationship between nested windows. The first example verifies that a child window's parent is the current window. The second example checks if the current script is running in the top-level window.

```javascript
window.frames[0].parent === window; // true
```

```javascript
if (window == top) {
  // Current window == window.top?
  alert('The script is in the topmost window, not in a frame');
} else {
  alert('The script runs in a frame!');
}
```

--------------------------------

### Setup BDD-style testing with Mocha and Chai

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/03-code-quality/05-testing-mocha/pow-2.view/index.html

Configure Mocha for BDD-style testing and make Chai's assert global. This setup is useful for writing behavior-driven tests.

```javascript
// enable bdd-style testing
mocha.setup('bdd');

// chai has a lot of stuff, let's make assert global
let assert = chai.assert;

function pow(x, n) {
  return 8; // :)
  // we cheat!
}

mocha.run();
```

--------------------------------

### Read Response Body with Fetch API

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/5-network/03-fetch-progress/progress.view/index.html

Use fetch to get a response, then access its body as a readable stream. This example demonstrates reading a file chunk by chunk and logging progress.

```javascript
(async () => {
  const response = await fetch('long.txt');
  const reader = response.body.getReader();
  const contentLength = +response.headers.get('Content-Length');
  let receivedLength = 0;
  let chunks = [];

  while(true) {
    const chunk = await reader.read();
    if (chunk.done) {
      console.log("done!");
      break;
    }
    chunks.push(chunk.value);
    receivedLength += chunk.value.length;
    console.log(`${receivedLength}/${contentLength} received`)
  }

  let chunksMerged = new Uint8Array(receivedLength);
  let length = 0;
  for(let chunk of chunks) {
    chunksMerged.set(chunk, length);
    length += chunk.length;
  }

  let result = new TextDecoder("utf-8").decode(chunksMerged);
  console.log(result);
})();
```

--------------------------------

### Setup and Assertions with Mocha and Chai

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/03-code-quality/05-testing-mocha/pow-4.view/index.html

Configure Mocha for BDD style testing and make Chai's assert global. This snippet includes a simple power function to be tested.

```javascript
// enable bdd-style testing
mocha.setup('bdd');

// chai has a lot of stuff, let's make assert global
let assert = chai.assert;

function pow(x, n) {
  let result = 1;
  for (let i = 0; i < n; i++) {
    result *= x;
  }
  return result;
}

mocha.run();
```

--------------------------------

### Object to Number Conversion Example

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/04-object-basics/09-object-toprimitive/article.md

Demonstrates how an object is converted to a primitive string and then to a number during multiplication. The toString method returns '2', which is then used in the multiplication.

```javascript
let obj = {
  // toString in the absence of other methods handles all conversions
  toString() {
    return "2";
  }
};

alert(obj * 2); // 4, the object is converted to the primitive string "2", which is then converted to the number 2 for multiplication.
```

--------------------------------

### Set Range Start and End Points

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/2-ui/99-ui-misc/02-selection-range/article.md

Use setStart and setEnd methods to define the boundaries of a range. The first argument is the node, and the second is the offset within that node.

```javascript
range.setStart(node, offset);
range.setEnd(node, offset);
```

--------------------------------

### Setup and Assertion in JavaScript Testing

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/03-code-quality/05-testing-mocha/pow-full.view/index.html

Configure Mocha for BDD-style testing and make Chai's assert global. This snippet is typically used at the beginning of a test file.

```javascript
// enable bdd-style testing
mocha.setup('bdd');

// chai has a lot of stuff, let's make assert global
let assert = chai.assert;

function pow(x, n) {
  if (n < 0) return NaN;
  if (Math.round(n) != n) return NaN;
  let result = 1;
  for (let i = 0; i < n; i++) {
    result *= x;
  }
  return result;
}

mocha.run();
```

--------------------------------

### Basic GET Request with Fetch API

Source: https://context7.com/javascript-tutorial/zh.javascript.info/llms.txt

Use this for simple GET requests to retrieve data. Ensure to check the response status for errors.

```javascript
// Basic GET request
async function getUsers() {
  const response = await fetch('https://api.example.com/users');

  if (!response.ok) {
    throw new Error(`HTTP Error: ${response.status}`);
  }

  const users = await response.json();
  return users;
}
```

--------------------------------

### Import and use a function from another module

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/13-modules/01-modules-intro/article.md

Use the `import` keyword with curly braces to import specific exports from another module. The path is relative to the current file. This example imports and uses the `sayHi` function.

```javascript
// 📁 main.js
import { sayHi } from './sayHi.js';

alert(sayHi); // function...
sayHi('John'); // Hello, John!
```

--------------------------------

### Sandbox iframe with Default Restrictions

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/3-frames-and-windows/03-cross-window-communication/article.md

This example illustrates an iframe with the 'sandbox' attribute applied. Due to default restrictions, the JavaScript code and form within this iframe will not execute or function.

```html
<iframe sandbox src="..."></iframe>
```

--------------------------------

### Export a function from a module

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/13-modules/01-modules-intro/article.md

Use the `export` keyword to make functions, variables, or classes available for import by other modules. This example exports a `sayHi` function.

```javascript
// 📁 sayHi.js
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}
```

--------------------------------

### Convert Canvas to Blob with Async/Await

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/4-binary/03-blob/article.md

An alternative to using callbacks for `toBlob`, this snippet demonstrates how to use `async/await` with a Promise to get a Blob from a canvas.

```javascript
let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));
```

--------------------------------

### Test Notification Display in JavaScript

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/2-ui/1-document/08-styles-and-classes/2-create-notification/source.view/index.html

Demonstrates how to repeatedly show a notification every 2 seconds using setInterval. This example tests the functionality of the showNotification function with dynamic content.

```javascript
let i = 1;
setInterval(() => {
  showNotification({
    top: 10,
    right: 10,
    html: 'Hello ' + i++,
    className: "welcome"
  });
}, 2000);
```

--------------------------------

### 使用 substr 获取子字符串

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/05-data-types/03-string/article.md

substr 方法返回从 start 索引开始，长度为 length 的字符串部分。第一个参数可以为负数，表示从字符串末尾开始计算。

```javascript
let str = "st*!*ring*/!*ify";
alert( str.substr(2, 4) ); // 'ring'
```

```javascript
let str = "strin*!*gi*/!*fy";
alert( str.substr(-4, 2) ); // 'gi'
```

--------------------------------

### Accessing internal properties

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/99-js-misc/01-proxy/article.md

Demonstrates direct access to properties starting with an underscore, which are conventionally considered internal.

```javascript
let user = {
  name: "John",
  _password: "secret"
};

alert(user._password); // secret
```

--------------------------------

### Object to String Conversion Example

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/04-object-basics/09-object-toprimitive/article.md

Illustrates how an object is converted to a primitive string during string concatenation. The toString method returns '2', which is then concatenated with the number 2.

```javascript
let obj = {
  toString() {
    return "2";
  }
};

alert(obj + 2); // 22 ("2" + 2) is converted to the primitive string => concatenation
```

--------------------------------

### Sending a Message to Any Origin

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/3-frames-and-windows/03-cross-window-communication/article.md

This example sends a message to an iframe without checking its origin. The targetOrigin is set to '*', meaning any window can receive the message.

```html
<iframe src="http://example.com" name="example">

<script>
  let win = window.frames.example;

  win.postMessage("message", "*");

</script>
```

--------------------------------

### Create an Accumulator Object in JavaScript

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/04-object-basics/06-constructor-new/3-accumulator/solution.md

Use a constructor function to create an accumulator object that stores a value and can read user input to add to it. Initialize with a starting value.

```javascript
function Accumulator(startingValue) {
  this.value = startingValue;

  this.read = function() {
    this.value += +prompt('How much to add?', 0);
  };

}

let accumulator = new Accumulator(1);
accumulator.read();
accumulator.read();
alert(accumulator.value);
```

--------------------------------

### Creating a Synchronous Generator Function in JavaScript

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/12-generators-iterators/2-async-iterators-generators/article.md

This example defines a synchronous generator function `generateSequence` using `function*` and `yield` to produce a sequence of values. It can be iterated over using a standard `for...of` loop.

```javascript
function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

for(let value of generateSequence(1, 5)) {
  alert(value);
}
```

--------------------------------

### Create and Animate a Circle with JavaScript

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/7-animation/2-css-animations/3-animate-circle/solution.view/index.html

Use this function to create a circle element and animate its size. The animation is triggered using `setTimeout` to ensure the element is rendered before the transition starts. Requires the '.circle' CSS class to be defined.

```css
.circle {
  transition-property: width, height, margin-left, margin-top;
  transition-duration: 2s;
  position: fixed;
  transform: translateX(-50%) translateY(-50%);
  background-color: red;
  border-radius: 50%;
}
```

```javascript
function showCircle(cx, cy, radius) {
  let div = document.createElement('div');
  div.style.width = 0;
  div.style.height = 0;
  div.style.left = cx + 'px';
  div.style.top = cy + 'px';
  div.className = 'circle';
  document.body.append(div);

  setTimeout(() => {
    div.style.width = radius * 2 + 'px';
    div.style.height = radius * 2 + 'px';
  }, 0);
}
```

--------------------------------

### Polyfill Example: Math.trunc Function

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/03-code-quality/06-polyfills/article.md

Shows a polyfill for the Math.trunc function, which is added to the Math object only if it's not already present. This ensures that code using Math.trunc can run even in older JavaScript engines that lack this built-in function.

```javascript
if (!Math.trunc) { // If the function doesn't exist
  // Implement it
  Math.trunc = function(number) {
    // Math.ceil and Math.floor exist even in ancient JavaScript engines
    return number < 0 ? Math.ceil(number) : Math.floor(number);
  };
}
```

--------------------------------

### Iterate over matchAll() results

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/9-regular-expressions/11-regexp-groups/article.md

Use `matchAll` with the global flag `g` to get an iterator of all matches, where each match includes capturing groups. Convert the iterator to an array using `Array.from` to access matches by index.

```javascript
let results = '<h1> <h2>'.matchAll(/<(.*?)>/gi);

// results —— 不是数组，而是一个迭代对象
alert(results); // [object RegExp String Iterator]

alert(results[0]); // undefined (*)

results = Array.from(results); // 让我们将其转换为数组

alert(results[0]); // <h1>,h1（第一个标签）
alert(results[1]); // <h2>,h2（第二个标签）
```

--------------------------------

### Implementing a Synchronous Iterable Object in JavaScript

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/12-generators-iterators/2-async-iterators-generators/article.md

This example demonstrates how to make an object iterable using `Symbol.iterator`. The `next()` method returns an object with `done` and `value` properties to control the iteration.

```javascript
let range = {
  from: 1,
  to: 5,

  [Symbol.iterator]() { // 在 for..of 循环开始时被调用一次
    return {
      current: this.from,
      last: this.to,

      next() { // 每次迭代时都会被调用，来获取下一个值
        if (this.current <= this.to) {
          return { done: false, value: this.current++ };
        }
        else {
          return { done: true };
        }
      }
    };
  }
};

for(let value of range) {
  alert(value);
}
```

--------------------------------

### 通过 '*' 对象导入默认导出

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/13-modules/02-import-export/article.md

当使用 `import * as obj from './module.js'` 导入所有导出时，默认导出可以通过 `obj.default` 访问。这对于处理同时包含默认和命名导出的模块非常有用。

```javascript
import * as user from './user.js';

let User = user.default;
new User('John');
```

--------------------------------

### Protecting properties with Proxy traps

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/99-js-misc/01-proxy/article.md

Uses Proxy with get, set, deleteProperty, and ownKeys traps to prevent access, modification, deletion, and enumeration of properties starting with an underscore.

```javascript
let user = {
  name: "John",
  _password: "***"
};

user = new Proxy(user, {
  get(target, prop) {
    if (prop.startsWith('_')) {
      throw new Error("Access denied");
    }
    let value = target[prop];
    return (typeof value === 'function') ? value.bind(target) : value; // (*)
  },
  set(target, prop, val) { // 拦截属性写入
    if (prop.startsWith('_')) {
      throw new Error("Access denied");
    } else {
      target[prop] = val;
      return true;
    }
  },
  deleteProperty(target, prop) { // 拦截属性删除
    if (prop.startsWith('_')) {
      throw new Error("Access denied");
    } else {
      delete target[prop];
      return true;
    }
  },
  ownKeys(target) {
    return Object.keys(target).filter(key => !key.startsWith('_'));
  }
});

// "get" 不允许读取 _password
try {
  alert(user._password); // Error: Access denied
} catch(e) { alert(e.message); }

// "set" 不允许写入 _password
try {
  user._password = "test"; // Error: Access denied
} catch(e) { alert(e.message); }

// "deleteProperty" 不允许删除 _password
try {
  delete user._password; // Error: Access denied
} catch(e) { alert(e.message); }

// "ownKeys" 将 _password 过滤出去
for(let key in user) alert(key); // name
```

--------------------------------

### Equivalent 'if...else' for ternary operator example in JavaScript

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/02-first-steps/10-ifelse/article.md

This 'if...else' structure demonstrates the equivalent logic to the unconventional ternary operator usage, highlighting the improved readability of 'if' for executing code blocks.

```javascript
let company = prompt('Which company created JavaScript?', '');

if (company == 'Netscape') {
  alert('Right!');
} else {
  alert('Wrong.');
}
```

--------------------------------

### Implementing an Asynchronous Iterable Object in JavaScript

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/12-generators-iterators/2-async-iterators-generators/article.md

This example shows how to create an asynchronous iterable object using `Symbol.asyncIterator`. The `next()` method is `async` and returns a Promise, allowing for asynchronous operations like delays.

```javascript
let range = {
  from: 1,
  to: 5,

  [Symbol.asyncIterator]() { // (1)
    return {
      current: this.from,
      last: this.to,

      async next() { // (2)

        // 注意：我们可以在 async next 内部使用 "await"
        await new Promise(resolve => setTimeout(resolve, 1000)); // (3)

        if (this.current <= this.last) {
          return { done: false, value: this.current++ };
        } else {
          return { done: true };
        }
      }
    };
  }
};

(async () => {

  for await (let value of range) { // (4)
    alert(value);
  }

})()
```

--------------------------------

### Initialize and Manage IndexedDB for Books

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/6-data-storage/03-indexeddb/books.view/index.html

Sets up the IndexedDB database and object store for books. Handles database versioning and object store creation. This function should be called once to initialize the database.

```javascript
let db;
init();

async function init() {
  db = await idb.openDb('booksDb', 1, db => {
    db.createObjectStore('books', {keyPath: 'name'});
  });
  list();
}
```

--------------------------------

### Declare a script as a module in HTML

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/13-modules/01-modules-intro/article.md

To enable module functionality like `import`/`export`, you must tell the browser to treat the script as a module by using `<script type="module">`. This example demonstrates how to include a module script in an HTML file.

```html
<script type="module">
  // Your module code here
</script>
```

--------------------------------

### Establish WebSocket Connection and Handle Messages

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/5-network/11-websocket/chat.view/index.html

This snippet demonstrates how to establish a WebSocket connection, send messages from a form, and handle incoming messages. It includes logic to determine the correct WebSocket URL based on the host environment.

```javascript
let url = location.host == 'localhost' ? 'ws://localhost:8080/ws' : location.host == 'javascript.local' ? 
`ws://javascript.local/article/websocket/chat/ws` : // dev integration with local site 
`wss://javascript.info/article/websocket/chat/ws
`; // prod integration with javascript.info
let socket = new WebSocket(url);

// send message from the form
document.forms.publish.onsubmit = function() {
  let outgoingMessage = this.message.value;
  socket.send(outgoingMessage);
  return false;
};

// handle incoming messages
socket.onmessage = function(event) {
  let incomingMessage = event.data;
  showMessage(incomingMessage);
};

socket.onclose = event => console.log(
`Closed ${event.code}`
);

// show message in div#messages
function showMessage(message) {
  let messageElem = document.createElement('div');
  messageElem.textContent = message;
  document.getElementById('messages').prepend(messageElem);
}
```

--------------------------------

### Dispatching and Listening for Custom Events

Source: https://context7.com/javascript-tutorial/zh.javascript.info/llms.txt

Demonstrates creating and dispatching a custom event with associated data (`detail`), and then listening for that event on an element.

```javascript
// Custom events
const customEvent = new CustomEvent('userLoggedIn', {
  detail: { userId: 123, username: 'john' },
  bubbles: true
});

element.dispatchEvent(customEvent);

// Listening for custom events
document.addEventListener('userLoggedIn', function(event) {
  console.log('User logged in:', event.detail.username);
});
```

--------------------------------

### 使用 substring 获取子字符串

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/05-data-types/03-string/article.md

substring 方法返回字符串的一部分，从 start 索引开始到 end 索引（不包括 end）结束。与 slice 不同，如果 start 大于 end，它会自动交换它们。不支持负参数，它们被视为 0。

```javascript
let str = "st*!*ring*/!*ify";
alert( str.substring(2, 6) ); // "ring"
alert( str.substring(6, 2) ); // "ring"
```

--------------------------------

### Rewriting Closure Example with Function Property

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/06-advanced-functions/06-function-object/article.md

Rewrites the counter example from the closure section using a custom property on the function itself, instead of an outer variable.

```javascript
function makeCounter() {
  // 不需要这个了
  // let count = 0

  function counter() {
    return counter.count++;
  };

  counter.count = 0;

  return counter;
}

let counter = makeCounter();
alert( counter() ); // 0
alert( counter() ); // 1
```

--------------------------------

### 导入所有命名导出为一个对象

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/13-modules/02-import-export/article.md

使用 `import * as <obj>` 将模块的所有导出导入到一个对象中。这在需要访问模块中的多个导出时很有用，但可能不利于摇树优化。

```javascript
import * as say from './say.js';
```

--------------------------------

### Define and Use a Basic JavaScript Class

Source: https://context7.com/javascript-tutorial/zh.javascript.info/llms.txt

Use the `class` keyword to define a blueprint for objects. Includes a constructor, instance methods, getters, and static methods. Instantiate with `new`.

```javascript
class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  sayHi() {
    console.log(`Hello, I'm ${this.name}`);
  }

  get info() {
    return `${this.name} <${this.email}>`;
  }

  static createAnonymous() {
    return new User("Anonymous", "anon@example.com");
  }
}

const user = new User("John", "john@example.com");
user.sayHi();           // "Hello, I'm John"
console.log(user.info); // "John <john@example.com>"

const anon = User.createAnonymous();
console.log(anon.name); // "Anonymous"
```

--------------------------------

### Binding object methods in get trap

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/99-js-misc/01-proxy/article.md

Illustrates the importance of binding object methods to the target object within the 'get' trap to ensure they correctly access internal properties.

```javascript
get(target, prop) {
  // ...
  let value = target[prop];
  return (typeof value === 'function') ? value.bind(target) : value; // (*)
}
```

--------------------------------

### 使用 'as' 重命名导入

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/13-modules/02-import-export/article.md

使用 `import {originalName as newName}` 语法可以为导入的变量、函数或类指定一个不同的本地名称。这有助于避免命名冲突或使代码更简洁。

```javascript
import {sayHi as hi, sayBye as bye} from './say.js';
```

--------------------------------

### 使用 slice 获取子字符串

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/05-data-types/03-string/article.md

slice 方法返回字符串的一部分，从 start 索引开始到 end 索引（不包括 end）结束。如果省略 end，则提取到字符串末尾。支持负索引，表示从字符串末尾开始计算。

```javascript
let str = "stringify";
alert( str.slice(0, 5) ); // 'strin'
alert( str.slice(0, 1) ); // 's'
```

```javascript
let str = "st*!*ringify*/!*";
alert( str.slice(2) ); // 从第二个位置直到结束
```

```javascript
let str = "strin*!*gif*/!*y";
alert( str.slice(-4, -1) ); // 'gif'
```

--------------------------------

### Initialize Publish and Subscribe Forms in JavaScript

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/5-network/10-long-polling/longpoll.view/index.html

Instantiate the PublishForm and SubscribePane classes to enable message publishing and subscription. A random parameter is added to the subscription URL to prevent caching issues.

```javascript
new PublishForm(document.forms.publish, 'publish'); // random url parameter to avoid any caching issues new SubscribePane(document.getElementById('subscribe'), 'subscribe?random=' + Math.random());
```

--------------------------------

### 导入默认导出

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/13-modules/02-import-export/article.md

使用 `import NewName from './module.js'` 语法导入默认导出。注意，不需要花括号，并且可以为默认导出指定任何名称。

```javascript
import User from './user.js';
```

--------------------------------

### Method Borrowing with arguments.join

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/06-advanced-functions/09-call-apply-decorators/article.md

Illustrates method borrowing by using the Array.prototype.join method with the arguments object. This technique allows using array methods on array-like objects.

```javascript
function hash() {
  alert( [].join.call(arguments) ); // 1,2
}

hash(1, 2);
```

--------------------------------

### Accessing Form Elements in JavaScript

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/source.view/index.html

Use document.forms to get a reference to the form element. This is useful for accessing form controls and their values.

```javascript
let form = document.forms.calculator;
```

--------------------------------

### 任意表达式作为 "switch/case" 参数

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/02-first-steps/14-switch/article.md

演示了 `switch` 和 `case` 语句可以接受任意表达式作为参数，并在比较时进行求值。

```javascript
let a = "1";
let b = 0;

switch (+a) {

  case b + 1:
    alert("this runs, because +a is 1, exactly equals b+1");
    break;

  default:
    alert("this doesn't run");
}
```

--------------------------------

### JavaScript EventSource Connection and Event Handling

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/5-network/12-server-sent-events/eventsource.view/index.html

Establishes an EventSource connection to a server endpoint and defines handlers for 'open', 'error', 'message', and custom 'bye' events. Ensure the browser supports EventSource before initiating.

```javascript
let eventSource;
function start() {
  // when "Start" button pressed
  if (!window.EventSource) {
    // IE or an old browser
    alert("The browser doesn't support EventSource.");
    return;
  }
  eventSource = new EventSource('digits');
  eventSource.onopen = function(e) {
    log("Event: open");
  };
  eventSource.onerror = function(e) {
    log("Event: error");
    if (this.readyState == EventSource.CONNECTING) {
      log(`Reconnecting (readyState=${this.readyState})...
`);
    } else {
      log("Error has occured.");
    }
  };
  eventSource.addEventListener('bye', function(e) {
    log("Event: bye, data: " + e.data);
  });
  eventSource.onmessage = function(e) {
    log("Event: message, data: " + e.data);
  };
}
function stop() {
  // when "Stop" button pressed
  eventSource.close();
  log("eventSource.close()")
}
function log(msg) {
  logElem.innerHTML += msg + "<br>";
  document.documentElement.scrollTop = 99999999;
}
```

--------------------------------

### Handle Multiple Promises with Promise.race

Source: https://context7.com/javascript-tutorial/zh.javascript.info/llms.txt

Use `Promise.race` to get the result of the first Promise that settles (either resolves or rejects). Useful for implementing timeouts.

```javascript
const timeout = new Promise((_, reject) =>
  setTimeout(() => reject(new Error("Timeout")), 5000)
);

Promise.race([fetch('/api/data'), timeout])
  .then(response => response.json())
  .catch(error => console.error(error.message));
```

--------------------------------

### Implementing Menu Actions with Data Attributes

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/2-ui/2-events/03-event-delegation/article.md

Implement a menu with 'Save', 'Load', and 'Search' actions using event delegation. Attach a single click handler to the menu container and use `data-action` attributes on buttons to trigger corresponding methods on an object.

```html
<div id="menu">
  <button data-action="save">Save</button>
  <button data-action="load">Load</button>
  <button data-action="search">Search</button>
</div>
```

```javascript
class Menu {
  constructor(elem) {
    this._elem = elem;
    elem.onclick = this.onClick.bind(this); // (*)
  }

  save() {
    alert('saving');
  }

  load() {
    alert('loading');
  }

  search() {
    alert('searching');
  }

  onClick(event) {
    let action = event.target.dataset.action;
    if (action) {
      this[action]();
    }
  };
}

new Menu(menu);
```

--------------------------------

### 使用 'as' 重命名导出

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/13-modules/02-import-export/article.md

在 `export { ... }` 语句中使用 `originalName as newName` 语法，可以将一个导出重命名。这允许模块的消费者使用指定的名称来导入。

```javascript
export {sayHi as hi, sayBye as bye};
```

--------------------------------

### Creating Regular Expressions using Literals and Constructor

Source: https://context7.com/javascript-tutorial/zh.javascript.info/llms.txt

Shows two ways to define regular expressions: using literal notation (`/.../`) and the `RegExp` constructor (`new RegExp(...)`). Useful for defining search patterns.

```javascript
// Creating regular expressions
const pattern1 = /hello/i;                    // Literal (case-insensitive)
const pattern2 = new RegExp('hello', 'gi');   // Constructor (global, case-insensitive)
```

--------------------------------

### Replace using named capture groups

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/9-regular-expressions/11-regexp-groups/article.md

When using named capture groups, you can refer to them in the replacement string using the syntax `$<name>`, for example, `$1` becomes `$<day>`.

```javascript
let regexp = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/g;

let str = "2019-10-30, 2020-01-01";

alert( str.replace(regexp, '$<day>.$<month>.$<year>') );
// 30.10.2019, 01.01.2020
```

--------------------------------

### Display Custom Prompt with Callback in JavaScript

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html

Shows a modal prompt to the user, handles input, and executes a callback function upon completion or cancellation. Includes focus management for accessibility.

```javascript
function showPrompt(text, callback) {
  showCover();
  let form = document.getElementById('prompt-form');
  let container = document.getElementById('prompt-form-container');
  document.getElementById('prompt-message').innerHTML = text;
  form.text.value = '';

  function complete(value) {
    hideCover();
    container.style.display = 'none';
    document.onkeydown = null;
    callback(value);
  }

  form.onsubmit = function() {
    let value = form.text.value;
    if (value == '') return false; // ignore empty submit
    complete(value);
    return false;
  };

  form.cancel.onclick = function() {
    complete(null);
  };

  document.onkeydown = function(e) {
    if (e.key == 'Escape') {
      complete(null);
    }
  };

  let lastElem = form.elements[form.elements.length - 1];
  let firstElem = form.elements[0];

  lastElem.onkeydown = function(e) {
    if (e.key == 'Tab' && !e.shiftKey) {
      firstElem.focus();
      return false;
    }
  };

  firstElem.onkeydown = function(e) {
    if (e.key == 'Tab' && e.shiftKey) {
      lastElem.focus();
      return false;
    }
  };

  container.style.display = 'block';
  form.elements.text.focus();
}
```

--------------------------------

### Group OR Expressions in Regex

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/9-regular-expressions/13-regexp-alternation/article.md

Use parentheses to group parts of a regular expression and apply the OR operator to a specific segment. This example matches 'I love HTML' or 'I love CSS'.

```javascript
let regexp = /I love (HTML|CSS)/;

alert("I love HTML".match(regexp)); // 'I love HTML'
alert("I love CSS".match(regexp)); // 'I love CSS'
```

--------------------------------

### Basic Fetch Request Structure (async/await)

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/5-network/01-fetch/article.md

This snippet illustrates the fundamental structure of a fetch request using async/await. It involves awaiting the response headers and then awaiting the parsing of the response body as JSON.

```javascript
let response = await fetch(url, options); // 解析 response header
let result = await response.json(); // 将 body 读取为 json
```

--------------------------------

### Example of Unhandled Rejection in Promise

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/11-async/04-promise-error-handling/article.md

This code snippet demonstrates a scenario where a promise rejects due to an error (noSuchFunction) and lacks a .catch() handler, leading to an unhandled rejection.

```javascript
new Promise(function() {
  noSuchFunction(); // 这里出现 error（没有这个函数）
})
  .then(() => {
    // 一个或多个成功的 promise 处理程序
  }); // 尾端没有 .catch！
```

--------------------------------

### String Comparison Examples

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/02-first-steps/09-comparison/article.md

Strings are compared character by character based on their Unicode encoding. Comparison is case-sensitive, with uppercase letters having lower Unicode values than lowercase letters.

```javascript
alert( 'Z' > 'A' ); // true
alert( 'Glow' > 'Glee' ); // true
alert( 'Bee' > 'Be' ); // true
```

--------------------------------

### Module configuration pattern

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/13-modules/01-modules-intro/article.md

Modules can be configured by exporting a configuration object that external code can modify. This allows for flexible initialization and customization of module behavior.

```javascript
// 📁 admin.js
export let config = { };

export function sayHi() {
  alert(`Ready to serve, ${config.user}!`);
}
```

```javascript
// 📁 init.js
import { config } from './admin.js';
config.user = "Pete";
```

```javascript
// 📁 another.js
import { sayHi } from './admin.js';

sayHi(); // Ready to serve, *!*Pete*/!*!
```

--------------------------------

### Select Part of Text in a Text Node

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/2-ui/99-ui-misc/02-selection-range/article.md

Create a range that selects a portion of text within a text node by specifying the node and the character offset for the start and end points.

```javascript
let range = new Range();
range.setStart(p.firstChild, 2);
range.setEnd(p.firstChild, 4);

console.log(range); // ll
```

--------------------------------

### Adaptive delay using nested setTimeout

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/06-advanced-functions/08-settimeout-setinterval/article.md

Demonstrates how nested setTimeout can be used to implement adaptive delays. The delay for the next execution can be increased based on conditions like server overload.

```javascript
let delay = 5000;

let timerId = setTimeout(function request() {
  // ...发送请求...

  if (request failed due to server overload) {
    // 下一次执行的间隔是当前的 2 倍
    delay *= 2;
  }

  timerId = setTimeout(request, delay);

}, delay);
```

--------------------------------

### Basic Fetch Request Structure (Promises)

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/5-network/01-fetch/article.md

This snippet shows the equivalent of a basic fetch request using Promises and the `.then()` method. It chains the response handling and JSON parsing.

```javascript
fetch(url, options)
  .then(response => response.json())
  .then(result => /* process result */)
```

--------------------------------

### Initialize Tooltip with HoverIntent

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/index.html

Instantiate HoverIntent to manage tooltip visibility based on mouse events over a specified element. Ensure the tooltip element is accessible and positioned correctly.

```javascript
new HoverIntent({ elem, over() { tooltip.style.left = elem.getBoundingClientRect().left + 5 + 'px'; tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px'; tooltip.hidden = false; }, out() { tooltip.hidden = true; } });
```

--------------------------------

### Consuming Paginated Data from GitHub API

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/12-generators-iterators/2-async-iterators-generators/article.md

Example of using the `fetchCommits` async generator to retrieve and process commit data from the GitHub API, stopping after a certain number of commits.

```javascript
(async () => {
  let count = 0;
  for await (const commit of fetchCommits('javascript-tutorial/en.javascript.info')) {
    console.log(commit.author.login);
    if (++count == 100) { // 让我们在获取了 100 个 commit 时停止
      break;
    }
  }
})();
```

--------------------------------

### 导入默认导出和命名导出

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/13-modules/02-import-export/article.md

当一个模块同时具有默认导出和命名导出时，可以使用 `import { default as NewName, namedExport } from './module.js'` 语法来导入它们。默认导出需要使用 `default as NewName` 来指定。

```javascript
import {default as User, sayHi} from './user.js';
```

--------------------------------

### Error in Method Borrowing Example

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/06-advanced-functions/09-call-apply-decorators/article.md

This code snippet demonstrates an error that occurs when trying to call the join method directly on the arguments object, highlighting why method borrowing is necessary.

```javascript
function hash() {
  alert( arguments.join() ); // Error: arguments.join is not a function
}

hash(1, 2);
```

--------------------------------

### Creating Arrays with new Array()

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/05-data-types/04-array/article.md

Illustrates the usage of the `new Array()` constructor. Be cautious when using a single numeric argument, as it creates an array of that length with no elements.

```javascript
let arr = new Array("Apple", "Pear", "etc");
```

```javascript
let arr = new Array(2); // 会创建一个 [2] 的数组吗？

alert( arr[0] ); // undefined！没有元素。

alert( arr.length ); // length 2
```

--------------------------------

### Create Ease-In-Out Timing Function

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/7-animation/3-js-animation/bounce-easeinout.view/index.html

This function creates an ease-in-out version of a given timing function. It's useful for creating smoother animations where the movement starts slow, speeds up, and then slows down again.

```javascript
function makeEaseInOut(timing) {
  return function(timeFraction) {
    if (timeFraction < .5) return timing(2 * timeFraction) / 2;
    else return (2 - timing(2 * (1 - timeFraction))) / 2;
  }
}
```

--------------------------------

### Using func.apply for Call Forwarding

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/06-advanced-functions/09-call-apply-decorators/article.md

Demonstrates the use of func.apply, which is an alternative to func.call with spread syntax for passing arguments. It's often used for call forwarding in wrapper functions.

```javascript
let wrapper = function() {
  return func.apply(this, arguments);
};
```

--------------------------------

### Select a Larger Fragment Across Nodes

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/2-ui/99-ui-misc/02-selection-range/article.md

Create a range that spans across multiple text and element nodes by carefully setting the start and end points with their respective node and offset.

```javascript
let range = new Range();

range.setStart(p.firstChild, 2);
range.setEnd(p.querySelector('b').firstChild, 3);

console.log(range); // ample: italic and bol

window.getSelection().addRange(range);
```

--------------------------------

### Handle Multiple Promises with Promise.all

Source: https://context7.com/javascript-tutorial/zh.javascript.info/llms.txt

Use `Promise.all` to wait for all provided Promises to resolve. If any Promise rejects, `Promise.all` rejects immediately with that error.

```javascript
const promise1 = fetch('/api/users').then(r => r.json());
const promise2 = fetch('/api/posts').then(r => r.json());

Promise.all([promise1, promise2])
  .then(([users, posts]) => {
    console.log("Users:", users);
    console.log("Posts:", posts);
  })
  .catch(error => console.error("One of the requests failed"));
```

--------------------------------

### Sending Image with Fetch (Promise-based)

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/5-network/01-fetch/article.md

An alternative implementation of the image submission function using Promises and `.then()` instead of `async/await`. This is useful for environments where `async/await` is not supported or preferred.

```javascript
function submit() {
  canvasElem.toBlob(function(blob) {        
    fetch('/article/fetch/post/image', {
      method: 'POST',
      body: blob
    })
      .then(response => response.json())
      .then(result => alert(JSON.stringify(result, null, 2)))
  }, 'image/png');
}
```

--------------------------------

### Checking range with 'has' trap

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/99-js-misc/01-proxy/article.md

Implements a 'has' trap on a Proxy to check if a number is within the 'start' and 'end' properties of the target object, enabling custom 'in' operator behavior.

```javascript
let range = {
  start: 1,
  end: 10
};

range = new Proxy(range, {
  has(target, prop) {
    return prop >= target.start && prop <= target.end;
  }
});

alert(5 in range); // true
alert(50 in range); // false
```

--------------------------------

### Remove Element from Array Start (shift)

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/05-data-types/04-array/article.md

Use `shift()` to remove and return the first element of an array. This operation requires re-indexing all subsequent elements, making it slower for large arrays.

```javascript
fruits.shift(); // 从首端取出一个元素
```

--------------------------------

### Add a New Book to IndexedDB

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/6-data-storage/03-indexeddb/books.view/index.html

Prompts the user for a book's name and price, then adds it to the 'books' object store. Includes error handling for duplicate entries and other potential issues. Requires a read-write transaction.

```javascript
async function addBook() {
  let name = prompt("Book name?");
  let price = +prompt("Book price?");
  let tx = db.transaction('books', 'readwrite');
  try {
    await tx.objectStore('books').add({name, price});
    await list();
  } catch(err) {
    if (err.name == 'ConstraintError') {
      alert("Such book exists already");
      await addBook();
    } else {
      throw err;
    }
  }
}
```

--------------------------------

### Dynamically Create and Populate an Unordered List

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/2-ui/1-document/07-modifying-document/6-create-list/solution.view/index.html

Use this JavaScript code to create an unordered list and add items based on user input. The loop continues until the user provides empty input or cancels the prompt.

```javascript
let ul = document.createElement('ul');
document.body.append(ul);

while (true) {
  let data = prompt('Enter the text for the list item', '');
  if (!data) {
    break;
  }
  let li = document.createElement('li');
  li.textContent = data;
  ul.append(li);
}
```

--------------------------------

### Retrieve Text Content from an Element

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/2-ui/1-document/05-basic-dom-node-properties/article.md

The `textContent` property retrieves all text within an element, stripping out any HTML tags. It's useful for getting the plain text representation of an element's content.

```html
<div id="news">
  <h1>Headline!</h1>
  <p>Martians attack people!</p>
</div>

<script>
  // Headline! Martians attack people!
  alert(news.textContent);
</script>
```

--------------------------------

### 二次方时序函数

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/7-animation/3-js-animation/article.md

一个二次方时序函数，用于创建加速动画效果，类似于抛物线。

```javascript
function quad(timeFraction) {
  return Math.pow(timeFraction, 2)
}
```

--------------------------------

### Transpiler Example: Nullish Coalescing Operator

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/03-code-quality/06-polyfills/article.md

Demonstrates how a transpiler rewrites the nullish coalescing operator (??) into a ternary conditional for older JavaScript engines. This ensures compatibility with browsers that do not support this modern operator.

```javascript
// Before running a transpiler
height = height ?? 100;

// After running a transpiler
height = (height !== undefined && height !== null) ? height : 100;
```

--------------------------------

### Validate Time Format with OR Operator

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/9-regular-expressions/13-regexp-alternation/article.md

Construct a regex to validate time strings in HH:MM format. This example uses the OR operator to handle valid hour ranges (00-19 or 20-23) and minutes (00-59).

```javascript
let regexp = /([01]\d|2[0-3]):[0-5]\d/g;

alert("00:00 10:10 23:59 25:99 1:2".match(regexp)); // 00:00,10:10,23:59
```

--------------------------------

### 基本 "switch" 语句语法

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/02-first-steps/14-switch/article.md

展示了 `switch` 语句的基本结构，包括 `case` 和可选的 `default` 代码块。用于处理多个条件分支。

```javascript
switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    [break]

  case 'value2':  // if (x === 'value2')
    ...
    [break]

  default:
    ...
    [break]
}
```

--------------------------------

### Corrected module scope with export/import

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/13-modules/01-modules-intro/article.md

To share variables between modules, they must be explicitly exported from one module and imported into another. This example demonstrates the correct way to share the `user` variable between `user.js` and `hello.js`.

```html
[codetabs src="scopes-working" height="140" current="hello.js"]
```

--------------------------------

### 类型严格比较的 "switch" 示例

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/02-first-steps/14-switch/article.md

强调 `switch` 语句中的比较是严格相等（`===`），要求值的类型也必须匹配才能执行相应的 `case`。

```javascript
let arg = prompt("Enter a value?")
switch (arg) {
  case '0':
  case '1':
    alert( 'One or zero' );
    break;

  case '2':
    alert( 'Two' );
    break;

  case 3:
    alert( 'Never executes!' );
    break;
  default:
    alert( 'An unknown value' )
}
```

--------------------------------

### 处理 for..in 循环的整数属性排序问题

Source: https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/04-object-basics/01-object/article.md

为了避免整数属性的自动排序，可以将属性名添加前缀（如 `+`）使其不被视为纯整数。这会使 `for..in` 循环按照属性创建的顺序遍历它们。

```javascript
let codes = {
  "+49": "Germany",
  "+41": "Switzerland",
  "+44": "Great Britain",
  // ..,
  "+1": "USA"
};

for (let code in codes) {
  alert( +code ); // 49, 41, 44, 1
}
```