ๅทฒ่งฃๆฑบ๏ผšๅ…’็ซฅ้กžๅž‹

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

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

ๅทฒ่งฃๆฑบ๏ผšๅฐๅฐๅƒๆ•ธ็ต„้€ฒ่กŒๆŽ’ๅบ

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

่ฉฒๅ•้กŒ็š„่งฃๆฑบๆ–นๆกˆ้€šๅธธๆถ‰ๅŠๅฐ‡ๆ•ธ็ต„็š„ sort() ๆ–นๆณ•่ˆ‡ TypeScript ็š„้กžๅž‹็ณป็ตฑ็ตๅˆไฝฟ็”จใ€‚ ไธ‹้ขๆ˜ฏๅฆ‚ไฝ•ๆŒ‰โ€œๅ็จฑโ€ๅฑฌๆ€งๅฐๅฐๅƒๆ•ธ็ต„้€ฒ่กŒๆŽ’ๅบ็š„ๅฟซ้€Ÿๅฟซ็…งใ€‚

let arr = [{name: 'Joe'}, {name: 'Bob'}, {name: 'Alice'}];
arr.sort((a, b) => a.name.localeCompare(b.name));

ๅœจไธŠ้ข็š„็คบไพ‹ไธญ๏ผŒๆˆ‘ๅ€‘ๅฐ‡ JavaScript ็š„ๅ…ง็ฝฎ Array.prototype.sort ๆ–นๆณ•่ˆ‡ๅŸบๆ–ผๅ€ๅŸŸ่จญ็ฝฎ็š„ๆฏ”่ผƒๅ‡ฝๆ•ธ็ตๅˆไฝฟ็”จใ€‚

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

่งฃๆฑบ๏ผšๅฆ‚ไฝ•ๆชขๆŸฅๆ–‡ไปถๆ˜ฏๅฆๅญ˜ๅœจlua

็•ถ็„ถ๏ผŒ้€™ๆ˜ฏๆ‚จๆ–‡็ซ ็š„่‰็จฟ๏ผš

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

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

ๅทฒ่งฃๆฑบ๏ผšuserefๅๆ‡‰

ไปฅไธ‹ๆ˜ฏๆ‚จๅฆ‚ไฝ•ๆง‹ๅปบๆ‚จๆ‰€่ซ‹ๆฑ‚็š„ๆœ‰้—œโ€œuserefโ€react ็š„ๆ–‡็ซ ๏ผš

React ๆ˜ฏไธ€ๅ€‹ๆ™ฎ้่ชๅฏ็š„็”จๆ–ผๅ‰ตๅปบ็”จๆˆถ็•Œ้ข็š„ๅบซ๏ผŒๅฐคๅ…ถๆ˜ฏๅ–ฎ้ ๆ‡‰็”จ็จ‹ๅบใ€‚ ๅฎƒๆ˜ฏไธ€ๅ€‹่ผ•้‡็ดšไธ”้ˆๆดป็š„ๅบซ๏ผŒๆ—จๅœจๅขžๅผท็”จๆˆถ้ซ”้ฉ—ใ€‚ ๅ€ŸๅŠฉ React ๅธถไพ†็š„ Hooks ็ญ‰ๅŠŸ่ƒฝ๏ผŒWeb ้–‹็™ผๅทฒ็ถ“้”ๅˆฐไบ†ๆ–ฐ็š„ๆฐดๅนณใ€‚ ไธ€ๅ€‹้€™ๆจฃ็š„ๅŸบๆœฌๅŠŸ่ƒฝ๏ผŒๆˆ–่€…ไฝ ๅฏไปฅ่€ƒๆ…ฎๅฎƒ๏ผŒReact ๆไพ›็š„ไธ€ๅ€‹้‰คๅญๆ˜ฏ useRefใ€‚ useRef ้€šๅธธ็”จๆ–ผ่จชๅ• DOM ็ฏ€้ปžๆˆ– React ๅ…ƒ็ด ใ€‚

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

ๅทฒ่งฃๆฑบ๏ผšๅญ—้ซ”็œŸๆฃ’ๆœ‰่ง’ๅบฆ

็•ถ็„ถ๏ผŒ้€™ๆ˜ฏ้—œๆ–ผ Font Awesome Angular ็š„้•ทๆ–‡๏ผš

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

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

ๅทฒ่งฃๆฑบ๏ผšๅœจ่ชฟๆ•ด็ช—ๅฃๅคงๅฐๆ™‚

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

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

ๅทฒ่งฃๆฑบ๏ผšๅฟฝ็•ฅnode_modules

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

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

ๅทฒ่งฃๆฑบ๏ผšts queryselectorall as htmlelement

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

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

ๅทฒ่งฃๆฑบ๏ผštsๅๅ‘ๆ•ธ็ต„

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

ๆ‰“ๅญ—็จฟ ่ชž่จ€ๅŒ…ๅซไธ€ๅ€‹ๅ…ง็ฝฎ็š„ๅ่ฝ‰ๆ•ธ็ต„็š„ๆ–นๆณ•๏ผŒ็จฑ็‚บ array.reverse() ๅ‡ฝๆ•ธใ€‚ ไบ‹ๅฏฆไธŠ๏ผŒไฝฟ็”จ้€™ๅ€‹ๅ‡ฝๆ•ธ๏ผŒๆˆ‘ๅ€‘ๅฏไปฅๆฏซไธ่ฒปๅŠ›ๅœฐๅ่ฝ‰ Typescript ไธญ็š„ไปปไฝ•ๆ•ธ็ต„ใ€‚

็‚บไบ†่ชชๆ˜Žๅ…ถ็”จๆณ•๏ผŒ่ซ‹่€ƒๆ…ฎไปฅไธ‹็คบไพ‹ๆ•ธ็ต„๏ผš

let array = [1, 2, 3, 4, 5];

็„ถๅพŒๆˆ‘ๅ€‘ๅฏไปฅไฝฟ็”จ array.reverse() ๅ‡ฝๆ•ธๅ่ฝ‰่ฉฒๆ•ธ็ต„๏ผŒๅฆ‚ไธ‹ๆ‰€็คบ๏ผš

array = array.reverse();

ๆญคๆ“ไฝœๅฐ‡ๅ่ฝ‰ๅŽŸๅง‹ๆ•ธ็ต„ไธญๅ…ƒ็ด ็š„้ †ๅบ๏ผŒไฝฟๅ…ถ้ †ๅบ่ˆ‡ๆ‡‰็”จ่ฉฒๅ‡ฝๆ•ธไน‹ๅ‰็š„้ †ๅบ็›ธๅใ€‚

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