JavaScript tricky

發表於 更新於 分類於 Disqus：
文章字數： 4.6k 所需閱讀時間 ≈ 4 分鐘

escape HTML function

1
2
3
4
5
6
7
// escape HTML function
function escapeHTML(text) {  
    var replacements= {"<": "&lt;", ">": "&gt;","&": "&amp;", '"': "&quot;"}    
    return text.replace(/[<>&"]/g, function(character) {  
        return replacements[character];  
    }); 
}

JSON.parse 的處理 - 預防抓到不正確的資料

1
2
3
4
5
6
let json;
try {
  json = JSON.parse(str)
} catch(e) {
  console.log(e) // 錯誤處理
}

字串比較

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const aString = '1abc23'
const bString = 'abc'
const cString = 'abc'
// 比較字串是否相等
console.log(`bString === ctring, ${bString === cString}`)	// true
// 比較是否含字串, -1 表不含
console.log(`aString.indexOf(bString), ${aString.indexOf(bString)}`)	// 1
// switch 比較
switch (aString) {		// '1abc23'
	case '1ab' :
		console.log('1ab' )
		break
	case '1abc23' :
		console.log('1abc23')
		break
	default :
		console.log('none')
		break
}

瀏覽器 reload

1
2
3
4
5
6
7
8
9
10
11
12
<body>
	<h1>Hello</h1>
	<button class="add">add</button>
	<!-- reload button -->
	<button onclick="javascript:window.location.reload()">reload</button>
	<script>
		document.querySelector('.add')
			.addEventListener('click', () =>{
				document.querySelector('h1').append('Press add button.')
			})
	</script>
</body>

瀏覽器 定時 reload 網頁

1
setInterval(function(){location.reload(true);}, 3000);

使用 object 設定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// prizes object
const priszes = {
	FIRST: {
		imgUrl: 'url(img/first.jpg)',
		title: '恭喜你中頭獎了！日本東京來回雙人遊！',
		color: '#000'
	},
	SECOND: {
		imgUrl: 'url(img/tv.jpg)' ,
		title: '二獎！90 吋電視一台',
		color: '#000'
	},
	THIRD: {
		imgUrl: 'url(img/yt.jpg)',
		title: '恭喜你抽中三獎：知名 YouTuber 簽名握手會入場券一張，bang！',
		color: '#000'
	},
	NONE: {
		imgUrl: 'none',
		title: '銘謝惠顧',
		color: '#fff' 
	}
}
// set background image
banner.style.backgroundImage = priszes[responseData.prize].imgUrl
document.querySelector('.prize-resp')
	.innerText = priszes[responseData.prize].title
document.querySelector('.prize-resp')
	.style
	.color = priszes[responseData.prize].color

ELEMENT TEMPLATE 使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const STREAM_TEMPLATE =  `
		<a href="$channel-url"></a>
		<div class="view"></div>
		<img src=$preview alt="">
		<div class="user">
			<div class="avatar">
				<img src=$logo alt="">
			</div>
			<div class="user-info">
				<div class="user-name">$title</div>
				<div class="user-id">$name</div>
			</div>
		</div>
		`
itemElement.innerHTML = STREAM_TEMPLATE
		.replace('$channel-url', stream.channel.url)
		.replace('$preview', stream.preview.large)
		.replace('$logo', stream.channel.logo)
		.replace('$title', stream.channel.status)
		.replace('name', stream.channel.display_name)

show date to string(need add new) - use react

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div>{new Date(2141241556).toLocaleString()}</div>
// 1970/1/26 上午2:47:21
<div>{Date(2141241556).toLocaleString()}</div> 
// Sun Sep 12 2021 16:33:37 GMT+0800 (台北標準時間)
{new Date(10 * 1000)
        .toLocaleTimeString("en-us", {
          timeZone: "Africa/Abidjan",
          hour12: false,
        })
        .replace(/\d{2}/, "00")}
// 00:00:10
// hour12: false ==> 設定 24小時制
// timeZone: "Africa/Abidjan" ==> 顯示格式
// .replace(/\d{2}/, "00") ==> 最前面填 00, 因為 00:00:00 對應 Taipei 為 08:00:00

catch 處理完 .then 處理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
const { name, email, password } = values;

const signup = (user) => {
  // 要加 return 才能 then 處理
  return (
    fetch(`${API}/signup`, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(user),
    })
      // json format body 傳回要加 .json()
      .then((response) => response.json())
      // then 處理, 若有 check data 要加 retuen
      .then((data) => {
        console.log("data:", data);
        return data;
      })
      .catch((err) => {
        console.log("signup err:", err);
      })
  );
};

function handelSubmit(e) {
  e.preventDefault();
  // catch 傳回用 .then 處理
  signup({ name, email, password }).then((data) => {
    // undefidata === undefined 表 server 未回應
    if (data === undefined) {
      console.log("Server not response");
    } else {
      console.log(data);
    }
  });
}