ๅทฒ่งฃๅ†ณ๏ผšๅ„ฟ็ซฅ็ฑปๅž‹

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

้˜…่ฏปๆ›ดๅคš

ๅทฒ่งฃๅ†ณ๏ผšๅฏนๅฏน่ฑกๆ•ฐ็ป„่ฟ›่กŒๆŽ’ๅบ

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

่ฏฅ้—ฎ้ข˜็š„่งฃๅ†ณๆ–นๆกˆ้€šๅธธๆถ‰ๅŠๅฐ†ๆ•ฐ็ป„็š„ 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();

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

้˜…่ฏปๆ›ดๅคš