่งฃๅ†ณ๏ผšๆŒ‰้’ฎๆ‰“ๅผ€ๆ–‡ไปถ่พ“ๅ…ฅ

ๅฝ“็„ถ๏ผŒๆˆ‘ไปฌๅ…ˆไปŽๆ–‡็ซ ๅผ€ๅง‹ๅงใ€‚ ๆˆ‘ๅฐ†้‡็‚นๅ…ณๆณจ็ป“ๆž„ไธญๅฎšไน‰็š„็‚น๏ผš

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

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

ๅทฒ่งฃๅ†ณ๏ผšๅฆ‚ไฝ•ไฟฎๅคcors

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

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

ๅทฒ่งฃๅ†ณ๏ผšๅฆ‚ไฝ•ๅฎ‰่ฃ…flexbox

ๅฝ“็„ถ๏ผŒ่ฟ™้‡Œๆทฑๅ…ฅไบ†่งฃๅฆ‚ไฝ•ๅฎ‰่ฃ… Flexbox๏ผš

Flexbox ๆ˜ฏFlexible Box Module ็š„็ผฉๅ†™๏ผŒๆ˜ฏCSS3 ไธญ็š„ไธ€็งๅธƒๅฑ€ๆจกๅž‹๏ผŒๅฎƒๆไพ›ไบ†ไธ€็ง็ฎ€ๅ•ไธ”ๆ€ฅ้œ€็š„่งฃๅ†ณๆ–นๆกˆ๏ผŒ็”จไบŽๅœจไธไฝฟ็”จๆตฎๅŠจๆˆ–ๅฎšไฝ็š„ๆƒ…ๅ†ตไธ‹่ฎพ่ฎก็ตๆดป็š„ๅ“ๅบ”ๅผๅธƒๅฑ€็ป“ๆž„ใ€‚

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

ๅทฒ่งฃๅ†ณ๏ผšๅฏผๅ…ฅ่ง’ๅบฆๆŸ”ๆ€งๅธƒๅฑ€

Angular Flex ๅธƒๅฑ€ๆไพ›ไบ†็ตๆดปไธ”ๅ“ๅบ”็ตๆ•็š„็ฝ‘ๆ ผใ€‚ ๅฎƒไฝฟ็”จ CSS3 ็š„ Flexbox ๆจกๅž‹ๆฅๅฎž็Žฐ้ซ˜ๅบฆ็š„ๅธƒๅฑ€ๅคšๅŠŸ่ƒฝๆ€งใ€‚ ๅฎƒ่ฟ˜ไธบ Angular ๅผ€ๅ‘ไบบๅ‘˜ๆไพ›ไบ†็ป“ๆž„่‰ฏๅฅฝ็š„ API ๆฅ่ฎพ่ฎก็ฝ‘้กต๏ผŒ่€Œๆ— ้œ€ไฝฟ็”จ bootstrap ๆˆ–ไปปไฝ•ๅ…ถไป–ๅŸบไบŽ CSS ็š„่งฃๅ†ณๆ–นๆกˆใ€‚

Angular Flex Layout ๆ˜ฏไธ€ไธชๅŠŸ่ƒฝๅผบๅคง็š„ๅธƒๅฑ€ๅทฅๅ…ท๏ผŒๅ› ไธบๅฎƒๆœ‰ๅŠฉไบŽ็ฎก็†ๅ…ƒ็ด ็š„ๅคงๅฐไปฅๅŠๅ…ƒ็ด ไน‹้—ด็š„็ฉบ้—ด๏ผŒไปŽ่€Œๆ›ด่ฝปๆพๅœฐๅˆ›ๅปบๅ“ๅบ”ๅผ็”จๆˆท็•Œ้ขใ€‚

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

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

่งฃๅ†ณ๏ผš่ฎพ็ฝฎๅฑๅน•ๅฎฝๅบฆ

ๅฝ“็„ถๅฏไปฅ๏ผŒๆ–‡็ซ ๅฆ‚ไธ‹๏ผš

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

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

ๅทฒ่งฃๅ†ณ๏ผš็”Ÿๆˆๆฒกๆœ‰่ง„ๆ ผ็š„็ป„ไปถ

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

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

ๅทฒ่งฃๅ†ณ๏ผš่ฟ™ๆ„ๅ‘ณ็€ไป€ไนˆ โ€“skiptests%3D%3Dtrue

ไป‹็ป

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

็œผๅ‰็š„้—ฎ้ข˜

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

ๅทฒ่งฃๅ†ณ๏ผšๅฆ‚ไฝ•่ฟ่กŒ

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

ไบ†่งฃๆ—ถๅฐš้ฃŽๆ ผ

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

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


็›ธๆฏ”ไน‹ไธ‹๏ผŒๆž็ฎ€ไธปไน‰้ฃŽๆ ผๅนฒๅ‡€ใ€ๆ˜Žๅฟซ๏ผŒๆณจ้‡โ€œๅฐ‘ๅณๆ˜ฏๅคšโ€็š„็†ๅฟตใ€‚ ่ฟ™็ง้ฃŽๆ ผๅฏไปฅไธŽๅนฒๅ‡€ใ€้ซ˜ๆ•ˆ็š„ JavaScript ไปฃ็ ๅนถ่กŒ๏ผŒไธไผšๅœจไธ้œ€่ฆ็š„ๆ“ไฝœไธŠๆตช่ดนๅ‘จๆœŸใ€‚


ไบ†่งฃ่ท‘้“่ถ‹ๅŠฟ

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

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

ๅทฒ่งฃๅ†ณ๏ผš AngularJS CDN

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

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