ๅทฒ่งฃๆฑบ๏ผšvuejs typescript mapactions

Vue.js TypeScript ๆ˜ฏ็จ‹ๅผ่จญ่จˆ้ ˜ๅŸŸ็š„ๅ…ฉๅ€‹ๅผทๅคงๅทฅๅ…ท๏ผŒๅฏไปฅๅคงๅน…็ฐกๅŒ–ๅ’Œ็ฐกๅŒ– Web ๆ‡‰็”จ็จ‹ๅผ้–‹็™ผใ€‚ ๆ˜ ๅฐ„ๅ‹•ไฝœ Vue.js ไฝฟ็”จ TypeScript ๆœ‰ๆ™‚ๅฏ่ƒฝๆ˜ฏไธ€้ …ๆฃ˜ๆ‰‹็š„ไปปๅ‹™๏ผŒไฝ†็†่งฃๅŸบๆœฌๆฆ‚ๅฟตไธฆ้ตๅพชๆญฃ็ขบ็š„ๆญฅ้ฉŸๅฏไปฅไฝฟๅ…ถๆต็จ‹ๆ›ดๅŠ ้ †ๅˆฉใ€‚

ไบ†่งฃๆ›ดๅคš

ๅทฒ่งฃๆฑบ๏ผšhtmlWebpackPlugin.options.title

HTMLWebpackPlugin ๆ˜ฏไธ€ๅ€‹ๅŠŸ่ƒฝๅผทๅคง็š„ๅทฅๅ…ท๏ผŒๅฏไปฅๅคงๅน…็ฐกๅŒ– HTML ๆช”ๆกˆ็š„ๅปบ็ซ‹ไพ†็‚บๆ‚จ็š„ webpack ๅฅ—ไปถๆไพ›ๆœๅ‹™ใ€‚ ้€™ๅ€‹ๅฏฆ็”จ็š„ๅค–ๆŽ›็จ‹ๅผ็‚บ้–‹็™ผไบบๅ“กๆไพ›ไบ†ๅคš็จฎ้ธ้ …๏ผŒไฝฟๆˆ‘ๅ€‘็š„็จ‹ๅผ็ขผๆ›ดๆœ‰ๆ•ˆ็Ž‡ๅ’Œๅ‹•ๆ…‹ใ€‚ ้€™ไบ›้ธ้ …ไน‹ไธ€ๆ˜ฏใ€ŒhtmlWebpackPlugin.options.titleใ€้ธ้ …๏ผŒๅฎƒๅ…่จฑๆˆ‘ๅ€‘่จญๅฎš HTML ๆช”ๆกˆ็š„ๆจ™้กŒใ€‚

ไบ†่งฃๆ›ดๅคš

่งฃๆฑบ๏ผšๆœฌๅœฐๅ„ฒๅญ˜ๅˆช้™ค

ๅœจ็พไปฃๆ•ธไฝไธ–็•Œไธญ๏ผŒWeb ๆ‡‰็”จ็จ‹ๅผๅทฒๆˆ็‚บๆˆ‘ๅ€‘ๆ—ฅๅธธ็”Ÿๆดป็š„ไธ€้ƒจๅˆ†๏ผŒ้–‹็™ผไบบๅ“ก็š„่ง’่‰ฒๅŒ…ๆ‹ฌๆœ‰ๆ•ˆๅœฐ็ต„็น”ใ€ๅ„ฒๅญ˜ๅ’Œ็ฎก็†่ณ‡ๆ–™ใ€‚ ่™•็†่ณ‡ๆ–™็š„ไธ€ๅ€‹ๅŸบๆœฌๆฆ‚ๅฟตๆ˜ฏ**ๆœฌๅœฐๅ„ฒๅญ˜**ใ€‚ ๆœฌๆ–‡ๅฐ‡ๆทฑๅ…ฅ็ ”็ฉถๅฆ‚ไฝ•ไฝฟ็”จ JavaScript ๅพžๆœฌๆฉŸๅ„ฒๅญ˜ไธญๅˆช้™คๆ•ธๆ“š๏ผŒๆชขๆŸฅ็จ‹ๅผ็ขผ็š„้€ๆญฅๅฏฆ็พ๏ผŒไธฆ่จŽ่ซ–่ˆ‡ๆญค้Ž็จ‹็›ธ้—œ็š„ไธ€ไบ›ๅ‡ฝๅผๅบซๅ’Œๅ‡ฝๆ•ธใ€‚

ไบ†่งฃๆ›ดๅคš

ๅทฒ่งฃๆฑบ๏ผš่ง€ๅฏŸๆทฑๅฑคๅฑฌๆ€ง

่ง€ๅฏŸๆทฑๅฑคๅฑฌๆ€ง่ฝ่ตทไพ†ๅฏ่ƒฝๆ˜ฏๅ€‹่ค‡้›œ็š„ๆฆ‚ๅฟต๏ผŒไฝ†ๅฎƒๆ˜ฏ็†่งฃ JavaScript ็‰ฉไปถ่กŒ็‚บ็š„้‡่ฆ็ต„ๆˆ้ƒจๅˆ†ใ€‚ ๆœฌ่ณชไธŠ๏ผŒๅฎƒๅ‡่จญไธ€ๅ€‹็‰ฉไปถ็š„ๅฑฌๆ€งๅฏไปฅๅŒ…ๅซๅ…ถไป–็‰ฉไปถใ€‚ ๅ…ท้ซ”ไพ†่ชช๏ผŒๅœจ่ณ‡ๆ–™/็‰ฉไปถ้ฉ…ๅ‹•็š„็จ‹ๅผ่จญ่จˆไธญ๏ผŒ้žๅธธ้œ€่ฆ็›ฃ่ฆ–ใ€่ง€ๅฏŸๆˆ–่ฟฝ่นคๅตŒๅฅ—็‰ฉไปถๆˆ–้™ฃๅˆ—ไธญ็š„่ฎŠๆ›ดใ€‚ ็‚บๆญค๏ผŒๆˆ‘ๅ€‘ๆทฑๅ…ฅ้—œๆณจ้€™ไบ›ๅฑฌๆ€งใ€‚

ไบ†่งฃๆ›ดๅคš

ๅทฒ่งฃๆฑบ๏ผšForๅพช็’ฐ

ๆˆ‘ๅพˆๆจ‚ๆ„้ตๅฎˆ๏ผŒไฝ†่ซ‹ๆณจๆ„๏ผŒไฝœ็‚บ AI ๆจกๅž‹๏ผŒๆˆ‘็„กๆณ•ไปฅ HTML ๆจ™็ฑคๅœจ็ถฒ็ซ™ไธŠ้‹่กŒ็š„ๆ–นๅผๆ•ดๅˆๅฎƒๅ€‘ใ€‚ ไฝ†ๅ‡บๆ–ผๆ–‡ๆช”็š„็›ฎ็š„๏ผŒๆˆ‘ๆœƒๅฐ‡ๅฎƒๅ€‘ๅฏซไธ‹ไพ†ใ€‚

For ่ฟดๅœˆๆ˜ฏ JavaScript ไธญ็š„ไธ€ๅ€‹ๅŸบๆœฌๆฆ‚ๅฟต๏ผŒๆ˜ฏๆฏๅ€‹้–‹็™ผไบบๅ“ก้ƒฝ้œ€่ฆ็†Ÿๆ‚‰็š„ๅผทๅคง็จ‹ๅผ่จญ่จˆๅทฅๅ…ทใ€‚ ๅฎƒๅ…่จฑๆ นๆ“š็ตฆๅฎšๆขไปถ้‡่ค‡ๅŸท่กŒ็จ‹ๅผ็ขผใ€‚ ้€™ๅฏ่ƒฝ็œ‹่ตทไพ†ๅพˆ็ฐกๅ–ฎ๏ผŒไฝ†ๆ˜ฏๅพˆๅฅฝๅœฐ็†่งฃๅฆ‚ไฝ•ๆ“ไฝœๅพช็’ฐๅฏไปฅๅฐๆ‚จ็š„็ทจ็ขผ่ƒฝๅŠ›็”ข็”Ÿๅพˆๅคง็š„ๅฝฑ้Ÿฟใ€‚

ไบ†่งฃๆ›ดๅคš

ๅทฒ่งฃๆฑบ๏ผšๆˆชๆ–ทๆ–‡ๆœฌ

ๆˆชๆ–ทๆ–‡ๅญ— ๆ˜ฏ Web ้–‹็™ผไธญ็š„ๅธธ่ฆ‹ไปปๅ‹™๏ผŒๅฐคๅ…ถๆ˜ฏๅœจ่™•็†้œ€่ฆ็ฌฆๅˆๆŸไบ›่กจ็คบ้™่ฃฝ่€Œไธๆœƒไฝฟ่ฆ–ๅœ–่ถ…่ผ‰็š„ๅ†—้•ทๆ–‡ๅญ—ๅ…งๅฎนๆ™‚ใ€‚ ้€™้€šๅธธ็™ผ็”Ÿๅœจๆ–ฐ่žๆ่ฆใ€ๆ–‡ๅญ—้ ่ฆฝ็ญ‰ๅ ดๆ™ฏไธญ๏ผŒๆˆ–่€…ๅฏฆ้š›ไธŠไปปไฝ•ๆ‚จๅฏ่ƒฝ้ธๆ“‡ใ€Œ้–ฑ่ฎ€ๆ›ดๅคšใ€้กžๅž‹ๅŠŸ่ƒฝ็š„ๅœฐๆ–นใ€‚

ไบ†่งฃๆ›ดๅคš

ๅทฒ่งฃๆฑบ๏ผš็ฐกๅฏซ

JavaScript ้€Ÿ่จ˜็ทจ็ขผ ๆœ‰ๆฝ›ๅŠ›ๆๅ‡ๆ‚จ็š„็จ‹ๅผ่จญ่จˆๅฐˆๆฅญ็Ÿฅ่ญ˜ไธฆๆไพ›้ซ˜ๆ•ˆ็š„่งฃๆฑบๆ–นๆกˆใ€‚ ้€™็จฎๆŠ€่ก“ไธๅƒ…ๅƒ…ๆ˜ฏ็ทจๅฏซๆ›ดๅฐ‘็š„็จ‹ๅผ็ขผ๏ผŒ่€Œๆ˜ฏๅ„ชๅŒ–็จ‹ๅผ็ขผไธฆๅขžๅผทๅฏ่ฎ€ๆ€ง๏ผŒๅŒๆ™‚ไฟๆŒ้ซ˜ๆ•ˆ่ƒฝใ€‚

้€Ÿ่จ˜็ทจ็ขผๆ˜ฏๆ‰€ๆœ‰้–‹็™ผไบบๅ“ก้ƒฝๆ‡‰่ฉฒ่€ƒๆ…ฎ็š„ๅšๆณ•ใ€‚ ๅฎƒไธๅƒ…ๆ้ซ˜ไบ†็ทจๅฏซ็จ‹ๅผ็ขผ็š„้€Ÿๅบฆ๏ผŒ่€Œไธ”้‚„ๆธ›ๅฐ‘ไบ†็Šฏ้Œฏ็š„ๆฉŸๆœƒ๏ผŒๅ› ็‚บๆ‚จ้œ€่ฆๆชขๆŸฅ็š„่กŒๆ•ธๆ›ดๅฐ‘ใ€‚ ๆœ‰ๅนพ็จฎๆ–นๆณ•ๅฏไปฅๅฏฆ็พๅฎƒ๏ผŒไฝ†ๆ‚จๆ‡‰่ฉฒ็‰นๅˆฅๆณจๆ„ๆœ€ๅธธ่ฆ‹ๅ’Œๆœ€ๆœ‰ๆ•ˆ็š„ๆ–นๆณ•ใ€‚ ๅฅฝ่™•ๆ˜ฏ้กฏ่€Œๆ˜“่ฆ‹็š„๏ผ› ๆธ›ๅฐ‘็จ‹ๅผ็ขผ้‡๏ผŒๆธ›ๅฐ‘้Œฏ่ชค็š„ๅฏ่ƒฝๆ€ง๏ผŒๆ้ซ˜ๅฏ่ฎ€ๆ€งไธฆๅขžๅผทๆ•ˆ่ƒฝใ€‚

// Longhand
let a;
if (b) {
  a = c;
} else {
  a = d;
}

// Shorthand
let a = b ? c : d;

ไบ†่งฃๆ›ดๅคš

่งฃๆฑบ๏ผšๅๆ‡‰ๆˆ–

-
็•ถ็„ถ๏ผ ้€™ๆ˜ฏๅŸบๆ–ผ React ็š„ JavaScript ๆ–‡็ซ ็š„้–‹ๅง‹ใ€‚

ๅฐๆ–ผไปปไฝ•ๅปฃๆณ›ไฝฟ็”จๆญค JavaScript ็จ‹ๅผๅบซ็š„ไบบไพ†่ชช๏ผŒไบ†่งฃ React ็š„ๅ…ง้ƒจ้‹ไฝœ่‡ณ้—œ้‡่ฆใ€‚ React ๆ˜ฏไธ€ๅ€‹้–‹ๆบๅ‰็ซฏ JavaScript ๅ‡ฝๅผๅบซ๏ผŒ็”จๆ–ผ่จญ่จˆๅ–ฎ้ ๆ‡‰็”จ็จ‹ๅผ็š„ไฝฟ็”จ่€…ไป‹้ขใ€‚ ๅฎƒๆ˜ฏ MVC๏ผˆๆจกๅž‹-่ฆ–ๅœ–-ๆŽงๅˆถๅ™จ๏ผ‰ๆจกๅž‹ไธญ็š„่ฆ–ๅœ–ๅฑคใ€‚

ไบ†่งฃๆ›ดๅคš

่งฃๆฑบ๏ผšๆทปๅŠ ๅพˆๆฃ’็š„ๅญ—้ซ”

ๅญ—้ซ”็œŸๆฃ’ ๆ˜ฏ้–‹็™ผ็ถฒ็ซ™ๆ™‚้žๅธธๆœ‰็”จ็š„ๅทฅๅ…ทใ€‚ ๅฎƒๆ˜ฏไธ€ๅ€‹้พๅคง็š„ๅฏๆ“ดๅฑ•ๅ‘้‡ๅœ–็คบๅบซ๏ผŒๅ…่จฑ้–‹็™ผไบบๅ“กๅ€‹ๆ€งๅŒ–ๅ’Œๅขžๅผทไปปไฝ•็ถฒ้ ็š„็พŽๆ„Ÿใ€‚ ๅฐ‡ๅ…ถๆทปๅŠ ๅˆฐ JavaScript ๅฐˆๆกˆไธๅƒ…ๅฏไปฅไฝฟๆ‚จ็š„็ถฒ็ซ™ๅœจ่ฆ–่ฆบไธŠๆ›ดๅ…ทๅธๅผ•ๅŠ›๏ผŒ่€Œไธ”้‚„ๅฏไปฅๅขžๅผทไบ’ๅ‹•ๅŠŸ่ƒฝใ€‚ ๆœฌๆ–‡ๅฐ‡ๅผ•ๅฐŽๆ‚จๅฎŒๆˆๅฐ‡ Font Awesome ๅˆไฝตๅˆฐ JavaScript ๅฐˆๆกˆ็š„้Ž็จ‹ใ€‚

ไบ†่งฃๆ›ดๅคš