周刊第9期：Web 发展中的 100 个重大事件

1
2

// Default TTL for successful resolutions with ProcTask.
const unsigned kCacheEntryTTLSeconds = 60;

1
2
3
4

arr[index] = value

// 无副作用
arr.with(index, value) // 返回一个新的 array

1
2
3
4
5
6
7

<div class="card">
    <img src="a.jpg" >
</div>

<div class="card">
    <p>card text</p>
</div>

1
2
3

.card:has(img) {
  border: 1px solid red;
}

1
2

// 检查 h2 后面跟着 p
.card h2:has(+ p) { }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

//Shape.jsx

import React from 'react';
import Circle from './Circle';
import Square from './Square';

function Shape({type}) {
  if(type === 'circle') {
    return <Circle />
  }
  if(type === 'square') {
    return <Square />
  }
}
export default Shape;

//App.jsx

function App() : ComponentType {
  return(<Shape type="rectangle"/>)
}

1

Error: Shape(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import React from 'react';
import Circle from './Circle';
import Square from './Square';

function Shape({type}) {
  if(type === 'circle') {
    return <Circle />
  }
  if(type === 'square') {
    return <Square />
  }
+ return null;
}
export default Shape;

1
2
3
4
5
6

var regexp = /huli/g
var str = 'blog.huli.tw'
var str2 = 'example.huli.tw'

console.log(regexp.test(str)) // ???
console.log(regexp.test(str2)) // ???

1
2
3
4
5

var regexp = /huli/g
var str = 'blog.huli.tw'

console.log(regexp.test(str)) // true
console.log(regexp.test(str)) // false

1
2
3
4
5
6
7

var regex = /foo/g;

// regex.lastIndex is at 0
regex.test('foo'); // true

// regex.lastIndex is now at 3
regex.test('foo'); // false

1
2
3
4
5
6
7

var str = '4ark'

var result = /\w+/.test(str)

str = ''

// 我们还能拿得到 str 之前的值吗？

1
2
3
4
5
6
7
8
9
10

const str = '123{n}456'

// 123A456
console.log(str.replace('{n}', 'A'))

// 123123A456，原本 {n} 的地方变成 123A
console.log(str.replace('{n}', "$`A"))

// 123456A456，原本 {n} 的地方变成 456A
console.log(str.replace('{n}', "$'A"))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

document.getElementById('link').addEventListener('click', async (e) => {
  e.preventDefault();

  // Wait for response to come back...
  await fetch("/log", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    }, 
    body: JSON.stringify({
      some: 'data'
    }),
  });

  // ...and THEN navigate away.
   window.location = e.target.href;
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<a href="/some-other-page" id="link">Go to Page</a>

<script>
  document.getElementById('link').addEventListener('click', (e) => {
    fetch("/log", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      }, 
      body: JSON.stringify({
        some: "data"
      }), 
+     keepalive: true
    });
  });
</script>

1
2
3
4
5
6
7
8

<a href="/some-other-page" id="link">Go to Page</a>

<script>
  document.getElementById('link').addEventListener('click', (e) => {
    const blob = new Blob([JSON.stringify({ some: "data" })], { type: 'application/json; charset=UTF-8' });
    navigator.sendBeacon('/log', blob));
  });
</script>

1
2
3

<a href="http://localhost:3000/other" ping="http://localhost:3000/log">
  Go to Other Page
</a>

1
2
3
4
5
6

headers: {
  'ping-from': 'http://localhost:3000/',
  'ping-to': 'http://localhost:3000/other'
  'content-type': 'text/ping'
  // ...other headers
},