рд╣реИрд╢ рдкрдврд╝реЗрдВ: рдмреБрд▓реЗрдЯрдкреНрд░реВрдл рд╡рд┐рдзрд┐

рдпрд╣ рд╢рд╛рдпрдж рдЙрди рдХрд╛рд░реНрдпреЛрдВ рдореЗрдВ рд╕реЗ рдПрдХ рд╣реИ рдЬреЛ рд╣рд░ рдХреЛрдИ рд╕реЛрдЪрддрд╛ рд╣реИ рдХрд┐ рд╡реЗ рдПрдХ рд╕рдорд╛рдзрд╛рди рдЬрд╛рдирддреЗ рд╣реИрдВ, рд▓реЗрдХрд┐рди рдХрдИ рд▓реЛрдЧ рдЗрд╕реЗ рдЧрд▓рдд рддрд░реАрдХреЗ рд╕реЗ рд╣рд▓ рдХрд░рддреЗ рд╣реИрдВред рдЗрд╕ рдЙрджреНрджреЗрд╢реНрдп рдХреЗ рд▓рд┐рдП рд▓рд┐рдЦреЗ рдЧрдП рдХреЛрдб рдХреЗ рдПрдХ рдФрд░ рд╢рд╛рдирджрд╛рд░ рдЯреБрдХрдбрд╝реЗ рдкрд░ рдареЛрдХрд░ рдЦрд╛рдиреЗ рдХреЗ рдмрд╛рдж, рдореИрдВрдиреЗ рдПрдХ рд╡реНрдпрд╛рдЦреНрдпрд╛рддреНрдордХ рдмреНрд▓реЙрдЧ рдкреЛрд╕реНрдЯ рдХреА рдХрд▓реНрдкрдирд╛ рдХреАред

рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рд╛рд░


рдЖрдк рд╕реНрдерд╛рди рд╕реЗ рд╕рд╛рдЗрди рдкрд╛рдЙрдВрдб ( # ) рд╣рдЯрд╛рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВред рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдЬрдм рд╣реИрд╢ "#foo" рд╣реЛрддрд╛ рд╣реИ , рддреЛ рдЖрдк "рдлреВ" рд╡рд╛рд▓реА рд╕реНрдЯреНрд░рд┐рдВрдЧ рдЪрд╛рд╣рддреЗ рд╣реИрдВред рдпрд╣ рдЖрд╕рд╛рди рд╣реИ, рд╣реИ рдирд╛?

рдореБрд╢реНрдХрд┐рд▓ рдорд╛рдорд▓реЗ


рдпрд╣рд╛рдБ рд╡рд╣реА рд╣реИ рдЬреЛ рдЕрдзрд┐рдХрд╛рдВрд╢ рдбреЗрд╡рд▓рдкрд░реНрд╕ рдХреЛ рджрд┐рдЦрддреЗ рд╣реИрдВ: рдЖрдзреБрдирд┐рдХ, рд╢рдХреНрддрд┐рд╢рд╛рд▓реА рд░реВрдк рд╕реЗ рдУрд╡рд░-рд╕реНрдХреНрд░рд┐рдкреНрдЯреЗрдб рдЕрдиреБрдкреНрд░рдпреЛрдЧреЛрдВ рдореЗрдВ, рд╣реИрд╢ рдЪрд░ рдореЗрдВ рдХреЛрдИ рднреА рдпреВрдирд┐рдХреЛрдб рд╡рд░реНрдг рд╣реЛ рд╕рдХрддрд╛ рд╣реИред рдпрд╣ рдПрдХ рд╣реА рдкреГрд╖реНрда рд╕реЗ рд╡рд╛рд╕реНрддрд╡рд┐рдХ рдЖрдИрдбреА рд╡рд┐рд╢реЗрд╖рддрд╛ рдХреЗ рдореВрд▓реНрдп рд╕реЗ рдореЗрд▓ рдирд╣реАрдВ рдЦрд╛рддрд╛ рд╣реИред рдФрд░ рдЬрдм рдпрд╣ рдореЗрд▓ рдЦрд╛рддрд╛ рд╣реИ, рддреЛ рдЖрдИрдбреА рд╡рд┐рд╢реЗрд╖рддрд╛рдУрдВ рдореЗрдВ рдЕрдм рд▓рдЧрднрдЧ рдХреЛрдИ рднреА рдпреВрдирд┐рдХреЛрдб рд╡рд░реНрдг рд╣реЛ рд╕рдХрддрд╛ рд╣реИ ред рдЗрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛, рд╡реЗ рдЕрдХреНрд╕рд░ рдпрд╣ рднреВрд▓ рдЬрд╛рддреЗ рд╣реИрдВ рдХрд┐ рдкреГрд╖реНрда рдореЗрдВ рдХреЛрдИ рд╣реИрд╢ рдирд╣реАрдВ рд╣реЛ рд╕рдХрддрд╛ рд╣реИред рднрд▓реЗ рд╣реА URL "#" рд╡рд░реНрдг рдХреЗ рд╕рд╛рде рд╕рдорд╛рдкреНрдд рд╣реЛрддрд╛ рд╣реИ , рдлрд┐рд░ рднреА location.hash string "" (рдЦрд╛рд▓реА рд╕реНрдЯреНрд░рд┐рдВрдЧ) рд╣реИ, рди рдХрд┐ "#" ред

рднреЛрд▓реЗ рднрд╛рд▓реЗ


рдпрд╣рд╛рдБ рд╕рдмрд╕реЗ рд╣рд╛рд▓ рд╣реА рдореЗрдВ рдПрдХ рд╣реИ - рдореИрдВрдиреЗ рдЗрд╕реЗ рдПрдХ рдкреБрд╕реНрддрдХ рдореЗрдВ рдкрд╛рдпрд╛ рд╣реИ рдЬрд┐рд╕реЗ рдореИрдВрдиреЗ рдПрдХ рддрдХрдиреАрдХреА рд╕рдореАрдХреНрд╖рд╛ рдХрд╛ рдорд╕реМрджрд╛ рддреИрдпрд╛рд░ рдХрд┐рдпрд╛ рд╣реИ:

var hash = location.hash.match(/#(\w+)/)[1]; 

рдЙрд╕реЗ рдПрдХ рд╣реА рдмрд╛рд░ рдореЗрдВ рдХрдИ рд╕рдорд╕реНрдпрд╛рдПрдВ рд╣реИрдВ:


рдореИрдВрдиреЗ рдЗрд╕ рджреГрд╖реНрдЯрд┐рдХреЛрдг рдХреЗ рд▓рд┐рдП рдЕрдиреНрдп рд╡рд┐рдХрд▓реНрдкреЛрдВ рдХреЛ рджреЗрдЦрд╛, рдЬрд┐рд╕рдореЗрдВ \ _ рдХреЗ рдмрдЬрд╛рдп рд╕реНрдкрд╖реНрдЯ рд░реВрдк рд╕реЗ рдкрд░рд┐рднрд╛рд╖рд┐рдд рд╡рд░реНрдг рд╡рд░реНрдЧреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рд╢рд╛рдорд┐рд▓ рд╣реИ, рд╕реНрдЯреНрд░рд┐рдВрдЧ рдХреА рд╢реБрд░реБрдЖрдд ( ^ ) "#" рдЪрд░рд┐рддреНрд░ (рдЙрддреНрдХреГрд╖реНрдЯ рд╡рд┐рдЪрд╛рд░, рдпрд╣ рдкреНрд░рджрд░реНрд╢рди рдореЗрдВ рдорджрдж рдХрд░рддрд╛ рд╣реИ) рд╕реЗ рдкрд╣рд▓реЗ, рдФрд░ рдЕрдЧрд░ .match () рд╡рд┐рдзрд┐ рдХреА рдЬрд╛рдБрдЪ рдХрд░рддрд╛ рд╣реИред рдЗрд╕рдХреЗ рдкрд░рд┐рдгрд╛рдо рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рдХреБрдЫ рднреАред рд╣рд╛рд▓рд╛рдВрдХрд┐, рдЙрдирдореЗрдВ рд╕реЗ рд╕рднреА рдЖрдорддреМрд░ рдкрд░ рдКрдкрд░ рд╡рд░реНрдгрд┐рдд рджреЛ рд╕рдорд╕реНрдпрд╛рдУрдВ рдореЗрдВ рд╕реЗ рдХрдо рд╕реЗ рдХрдо рдПрдХ рдХрд╛ рд╢рд┐рдХрд╛рд░ рдереЗред

рдПрдХ рдФрд░ рддрд░реАрдХрд╛ рдЬреЛ рдореЗрд░рд╛ рдПрдХ рджреЛрд╕реНрдд рдПрдХ рдмрд╛рд░ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░рддрд╛ рдерд╛ рд╡рд╣ рдерд╛:

 var hash = location.hash.split('#')[1]; 

рдЗрд╕ рджреГрд╖реНрдЯрд┐рдХреЛрдг рдХреА рдЕрдкрдиреА рд╕рдорд╕реНрдпрд╛рдПрдВ рднреА рд╣реИрдВ - рдордЬрд╝реЗрджрд╛рд░, рд▓реЗрдХрд┐рди рдкрд┐рдЫрд▓реЗ рдПрдХ рдХреА рддреБрд▓рдирд╛ рдореЗрдВ рдХрдо рд╣реИ, рд╣рд╛рд▓рд╛рдВрдХрд┐ рдпрд╣ рдмрд╣реБрдд рдЕрдзрд┐рдХ рднреЛрд▓реА рджрд┐рдЦрддреА рд╣реИред


рд╣рдореЗрдВ рд╕рд╣реА рдореВрд▓реНрдп рдорд┐рд▓рддрд╛ рд╣реИред


рдЬрд┐рд╕ рддрдХрдиреАрдХ рдХрд╛ рдореИрдВ рдЖрдорддреМрд░ рдкрд░ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реВрдВ рд╡рд╣ рдКрдкрд░ рджрд┐рдП рдЧрдП рдкреНрд░рддреНрдпреЗрдХ рджреЛ рдХреА рддреБрд▓рдирд╛ рдореЗрдВ рдмрд╣реБрдд рд╕рд░рд▓ рд╣реИ рдФрд░ рдмрд╣реБрдд рдвреАрд▓реА рджрд┐рдЦ рд╕рдХрддреА рд╣реИ:

 var hash = location.hash.substring(1); 

рд╣рд╛рд▓рд╛рдВрдХрд┐, рдПрдХ рдХрд░реАрдм рджреЗрдЦреЛ:


"рд▓реЗрдХрд┐рди рд╡рд╣ рдорд╛рдирддрд╛ рд╣реИ рдХрд┐ рд▓рд╛рдЗрди рдХреА рд╢реБрд░реБрдЖрдд рдореЗрдВ рдПрдХ рдЬрд╛рд▓реА рд╣реИ!" - рдореИрдВ рд╕реАрдзреЗ рд╕реБрди рд╕рдХрддрд╛ рд╣реВрдВ рдХрд┐ рдЖрдк рдореЗрдВ рд╕реЗ рдХреБрдЫ рдХреИрд╕реЗ рдЙрддреНрдХреГрд╖реНрдЯрддрд╛ рдкреНрд░рд╛рдкреНрдд рдХрд░реЗрдВрдЧреЗред рдареАрдХ рд╣реИ, рдЕрдЧрд░ рд╣рдо рдПрдХ рдордирдорд╛рдиреА рд╕реНрдЯреНрд░рд┐рдВрдЧ рдХреЛ рд╕рдВрд╕рд╛рдзрд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рд╡рд╛рд╕реНрддрд╡рд┐рдХ рдЪрд┐рдВрддрд╛ рдХрд╛ рд╡рд┐рд╖рдп рд╣реЛрдЧрд╛ред рдлрд┐рд░ рдореБрдЭреЗ рдпрд╣ рджреЗрдЦрдирд╛ рд╣реЛрдЧрд╛ рдХрд┐ рдХреНрдпрд╛ "#" рдкреНрд░рддреАрдХ рдЗрд╕рдХреА рд╢реБрд░реБрдЖрдд рдореЗрдВ рд╣реИ, рдФрд░ рдХреНрдпрд╛ рдпрд╣ рд░реЗрдЦрд╛ рдмрд┐рд▓реНрдХреБрд▓ рдореМрдЬреВрдж рд╣реИред рд╣рд╛рд▓рд╛рдВрдХрд┐, рд▓реЛрдХреЗрд╢рди рдХреЗ рдорд╛рдорд▓реЗ рдореЗрдВ ред рдпрд╣ рдХреЗрд╡рд▓ рддрднреА рдирд╣реАрдВ рд╣реИ рдЬрдм рдХреЛрдИ рд╣реИрд╢ рди рд╣реЛред рдФрд░ рдЗрд╕ рд╡рд┐рдХрд▓реНрдк рдХреЛ рдпрд╣рд╛рдВ рдзреНрдпрд╛рди рдореЗрдВ рд░рдЦрд╛ рдЧрдпрд╛ рд╣реИ ред ;)

рдЬреЛрдбрд╝: рдЬреИрд╕рд╛ рдХрд┐ рдЯрд┐рдкреНрдкрдгрд┐рдпреЛрдВ рдореЗрдВ рдмрддрд╛рдпрд╛ рдЧрдпрд╛ рд╣реИ, рдЖрдк рд╕реНрдерд╛рдирд╛рдкрдиреНрди рдХреЗ рдмрдЬрд╛рдп рд╕реНрдерд╛рди.рд╢рд╢ (1) рдХрд╛ рднреА рдЙрдкрдпреЛрдЧ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ ред рдореБрдЭреЗ рдпрд╣ рдФрд░ рднреА рдкрд╕рдВрдж рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдпрд╣ 4 рдмрд╛рдЗрдЯреНрд╕ рдЫреЛрдЯрд╛ рд╣реИред

рдпрджрд┐, рд╣рд╛рд▓рд╛рдВрдХрд┐, рдЖрдк regexes рд╕реЗ рдЧреНрд░рд╕реНрдд рд╣реИрдВ рдФрд░ рд╣рд░ рдХреАрдордд рдкрд░ рдЙрдирдХреА рдорджрдж рд╕реЗ рд╕рдорд╕реНрдпрд╛ рдХреЛ рд╣рд▓ рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ, рддреЛ рдпрд╣рд╛рдВ рдПрдХ рд╕рдорд╛рди рд░реВрдк рд╕реЗ рдмреБрд▓реЗрдЯрдкреНрд░реВрдл рдФрд░ рд▓рдЧрднрдЧ рдЙрддрдирд╛ рд╣реА рдЫреЛрдЯрд╛ рд░рд╛рд╕реНрддрд╛ рд╣реИ:

 var hash = location.hash.replace(/^#/, ''); 

рдпрджрд┐ рдХрд┐рд╕реА рдХрд╛рд░рдг рд╕реЗ ( OCD ?) рдЖрдк рд╕рднреА рд▓рд╛рдЧрддреЛрдВ рдкрд░ .match () рдХреЗ рд╕рд╛рде рд╕рдорд╕реНрдпрд╛ рдХреЛ рд╣рд▓ рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ, рддреЛ рдЖрдк рдпрд╣ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ:

 var match = location.hash.match(/^#?(.*)$/)[1]; 

рдЗрд╕ рд╕реНрдерд┐рддрд┐ рдореЗрдВ, рдЪреВрдВрдХрд┐ "#" рд╡рд░реНрдг рд╡реИрдХрд▓реНрдкрд┐рдХ рд╣реИ, .match () рд╢реВрдиреНрдп рдирд╣реАрдВ рд▓реМрдЯреЗрдЧрд╛ ред рдФрд░ рдирд╣реАрдВ, "#" рдкреНрд░рддреАрдХ рдХрднреА рдЧрд▓рддреА рд╕реЗ рд▓реМрдЯреЗ рд╣реБрдП рд╣реИрд╢ рдХрд╛ рд╣рд┐рд╕реНрд╕рд╛ рдирд╣реАрдВ рд╣реЛрдЧрд╛: рдпрд╣ рд╣реИ рдХрд┐ рд░реЗрдЧреЗрдХреНрд╕ рдЗрдВрдЬрди рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред

"рдпрд╣ рдмрд╣реБрдд рдЖрд╕рд╛рди рд╣реИ, рдореИрдВ рдпрд╣рд╛рдБ рдЕрдкрдирд╛ рд╕рдордп рдХреНрдпреЛрдВ рдмрд░реНрдмрд╛рдж рдХрд░ рд░рд╣рд╛ рд╣реВрдБ!"


рдЕрдЪреНрдЫрд╛, рдХреНрд╖рдорд╛ рдХрд░реЗрдВред рдореБрдЭреЗ рдкрддрд╛ рд╣реИ: рдЖрдк рдореЗрдВ рд╕реЗ рдХреБрдЫ рдХреЗ рд▓рд┐рдП рдпрд╣ рдкреНрд░рд╛рдердорд┐рдХ рд╣реИред рд▓реЗрдХрд┐рди рдЬрд┐рд╕ рдЖрджрдореА рдиреЗ рдХрд┐рддрд╛рдм рд▓рд┐рдЦреА рд╣реИ, рд╡рд╣ рдмрд╣реБрдд рдЬрд╛рдирдХрд╛рд░ рд╣реИ (рдФрд░ рдХрд┐рддрд╛рдм рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдЕрдЪреНрдЫреА рд╣реИ, рдКрдкрд░ рдЙрджреНрдзреГрдд рдХреЛрдб рдХреЛ рдЫреЛрдбрд╝рдХрд░), рдЗрд╕рд▓рд┐рдП рдореИрдВрдиреЗ рд╕реЛрдЪрд╛: рдЗрд╕рдХрд╛ рдорддрд▓рдм рд╣реИ рдХрд┐ рдХрдИ рдЕрдЪреНрдЫреЗ рдбреЗрд╡рд▓рдкрд░реНрд╕ рдЗрд╕ рдХрд╛рд░реНрдп рдХреЗ рд▓рд┐рдП рд╕рд╣реА рдирд╣реАрдВ рд╣реИрдВ, рдпрд╣реА рдХрд╛рд░рдг рд╣реИ рдХрд┐ рдореБрдЭреЗ рдЗрд╕ рдмреНрд▓реЙрдЧ рдкреЛрд╕реНрдЯ рдХреЛ рд▓рд┐рдЦрдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред рдпрджрд┐ рдЖрдк рдЙрдирдореЗрдВ рд╕реЗ рдПрдХ рдирд╣реАрдВ рд╣реИрдВ, рддреЛ рдЙрд╕ рдкрд░ рдЦреБрд╢реА рдордирд╛рдПрдВред

"рдЕрд░реЗ, рд▓реЗрдХрд┐рди рд╕рдм рдХреБрдЫ рдареАрдХ рдирд╣реАрдВ рд╣реИ!"


рдЗрд╕ рдорд╛рдорд▓реЗ рдореЗрдВ, рдореИрдВ рдЬрд╛рдирдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдХрд┐ рдореИрдВрдиреЗ рдХреНрдпрд╛ рдпрд╛рдж рдХрд┐рдпрд╛ - рддреЛ рдХреГрдкрдпрд╛ рдПрдХ рдЯрд┐рдкреНрдкрдгреА рдЫреЛрдбрд╝ рджреЗрдВ ! :)

Source: https://habr.com/ru/post/In138314/


All Articles