่งฃๆฑบ๏ผšๆŒ‰้ˆ•้–‹ๅ•Ÿๆช”ๆกˆ่ผธๅ…ฅ

็•ถ็„ถ๏ผŒๆˆ‘ๅ€‘ๅ…ˆๅพžๆ–‡็ซ ้–‹ๅง‹ๅงใ€‚ ๆˆ‘ๅฐ‡้‡้ปžๆ”พๅœจ็ตๆง‹ไธญๅฎš็พฉ็š„้ปž๏ผš

ๆ‚จๆ˜ฏๅฆๆƒณ้Žๅฆ‚ไฝ•ไฝฟ็”จ 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๏ผ‰ใ€‚

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