资源描述：
《只有20行javascript代码!手把手教你写一个页面模板引擎》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、н⸕䚃ᴹᵘᴹੜ䈤䗷ањสҾJavascriptⲴWeb亥䶒亴༴⨶ಘˈਛڊAbsurdJSDŽᡁᱟᆳⲴ㘵ˈⴞࡽᡁ䘈൘нᯝൠᆼழᆳDŽᴰࡍᡁਚᱟᢃ㇇߉ањCSSⲴ亴༴⨶ಘˈн䗷ਾᶕᢙኅࡠҶCSS઼HTMLˈਟԕ⭘ᶕᢺJavascriptԓ⸱䖜ᡀCSS઼HTMLԓ⸱DŽᖃ❦ˈ⭡Ҿਟԕ⭏ᡀHTMLԓ⸱ˈҏਟԕᢺᆳᖃᡀањ⁑ᶯᕅˈ⭘Ҿ൘ḷ䇠䈝䀰ѝປᮠᦞDŽҾᱟᡁ৸ᜣ⵰㜭н㜭߉аӋㆰঅⲴԓ⸱ᶕᆼழ䘉њ⁑ᶯᕅˈ৸㜭оަᆳ⧠ᴹⲴ䙫䗁ॿ਼ᐕDŽAbsurdJSᵜ䓛ѫ㾱ᱟԕNodeJSⲴ⁑ඇⲴᖒᔿਁᐳⲴˈн䗷ᆳҏՊਁᐳᇒᡧㄟ⡸ᵜDŽ㘳㲁ࡠ䘉Ӌ
2、ˈᡁቡн㜭ⴤ᧕⭘⧠ᴹⲴᕅҶˈഐѪᆳԜབྷ䜘࠶䜭ᱟ൘NodeJSк䘀㹼Ⲵˈ㘼н㜭䐁൘⍿㿸ಘкDŽᡁ䴰㾱ⲴᱟањሿᐗⲴˈ㓟㋩ԕJavascript㕆߉Ⲵь㾯ˈ㜭ཏⴤ᧕䘀㹼൘⍿㿸ಘкDŽᖃᡁḀཙڦ❦ਁ⧠JohnResigⲴ䘉ㇷঊᇒˈᡁௌൠਁ⧠ˈ䘉н↓ᱟᡁ㤖㤖ራⲴь㾯ోʽᡁ〽〽ڊҶаӋ؞᭩ˈԓ⸱㹼ᮠᐞнཊ20㹼ᐖਣDŽަѝⲴ䙫䗁䶎ᑨᴹᙍDŽ൘䘉ㇷ᮷ㄐѝᡁՊа↕а↕䟽⧠㕆߉䘉њᕅⲴ䗷〻ˈྲ᷌㜭а䐟ⴻл৫Ⲵ䈍ˈቡՊ᰾ⲭJohnⲴ䘉њᜣ⌅ᱟཊѸ⢰࡙ʽᴰࡍᡁⲴᜣ⌅ᱟ䘉ṧᆀⲴ˖1.varTemplateEngine=function(t
3、pl,data){2.//magichere...3.}4.vartemplate='
Hello,mynameis<%name%>.I'm<%age%>yearsold.
';5.console.log(TemplateEngine(template,{6.name:"Krasimir",7.age:298.}));ањㆰঅⲴ࠭ᮠˈ䗃ޕᱟᡁԜⲴ⁑ᶯԕ৺ᮠᦞሩ䊑ˈ䗃ࠪѸՠ䇑ҏᖸᇩ᱃ᜣࡠˈۿл䶒䘉ṧᆀ˖1.
Hello,mynameisKrasimir.I'm29yearsold.
ަѝㅜа↕㾱ڊⲴᱟ
4、ራ䟼䶒Ⲵ⁑ᶯ৲ᮠˈ❦ਾᴯᦒᡀՐ㔉ᕅⲴާփᮠᦞDŽᡁߣᇊ⭘↓ࡉ㺘䗮ᔿᶕᆼᡀ䘉а↕DŽн䗷ᡁнᱟᴰ䮯䘉њˈᡰԕ߉ⲴнྭⲴ䈍⅒䗾䲿ᰦᶕ௧DŽ1.varre=/<%([^%>]+)?%>/g;䘉ਕ↓ࡉ㺘䗮ᔿՊᦅ㧧ᡰᴹԕ<%ᔰཤˈԕ%>㔃ቮⲴ⡷⇥DŽᵛቮⲴ৲ᮠg˄global˅㺘⽪нਚ३䝽ањˈ㘼ᱟ३䝽ᡰᴹㅖਸⲴ⡷⇥DŽJavascript䟼䶒ᴹᖸཊ⿽⭘↓ࡉ㺘䗮ᔿⲴᯩ⌅ˈᡁԜ䴰㾱Ⲵᱟṩᦞ↓ࡉ㺘䗮ᔿ䗃ࠪањᮠ㓴ˈवਜ਼ᡰᴹⲴᆇㅖѢˈ䘉↓ᱟexecᡰڊⲴDŽ1.varre=/<%([^%>]+)?%>/g;2.varmatch=re.exec(
5、tpl);ྲ᷌ᡁԜ⭘console.logᢺਈ䟿matchᢃঠࠪᶕˈᡁԜՊⴻ㿱˖1.[2."<%name%>",3."name",4.index:21,5.input:6."
Hello,mynameis<%name%>.I'm<%age%>yearsold.
"7.]н䗷ᡁԜਟԕⴻ㿱ˈ䘄എⲴᮠ㓴ӵӵवਜ਼ㅜањ३䝽亩DŽᡁԜ䴰㾱⭘whileᗚ⧟ᢺк䘠䙫䗁व䎧ᶕˈ䘉ṧ㜭ᗇࡠᡰᴹⲴ३䝽亩DŽ1.varre=/<%([^%>]+)?%>/g;2.while(match=re.exec(tpl)){3.console.l
6、og(match);4.}ྲ᷌ᢺк䶒Ⲵԓ⸱䐁а䙽ˈቡՊⴻ㿱<%name%>઼<%age%>䜭㻛ᢃঠࠪᶕҶDŽл䶒ˈᴹᙍⲴ䜘࠶ᶕҶDŽ䇶࡛ࠪ⁑ᶯѝⲴ३䝽亩ਾˈᡁԜ㾱ᢺԆԜᴯᦒᡀՐ䙂㔉࠭ᮠⲴᇎ䱵ᮠᦞDŽᴰㆰঅⲴ࣎⌅ቡᱟ⭘replace࠭ᮠDŽᡁԜਟԕۿ䘉ṧᶕ߉˖1.varTemplateEngine=function(tpl,data){2.varre=/<%([^%>]+)?%>/g;3.while(match=re.exec(tpl)){4.tpl=tpl.replace(match[0],data[match[1]])5.}
7、6.returntpl;7.}ྭҶˈ䘉ṧቡ㜭䐁Ҷˈնᱟ䘈нཏྭDŽ䘉䟼ᡁԜԕdata["property"]Ⲵᯩᔿ⭘Ҷањㆰঅሩ䊑ᶕՐ䙂ᮠᦞˈնᱟᇎ䱵ᛵߥлᡁԜᖸਟ㜭䴰㾱ᴤ༽ᵲⲴ፼྇ሩ䊑DŽᡰԕᡁԜ〽ᗞ؞᭩Ҷалdataሩ䊑˖1.{2.name:"KrasimirTsonev",3.profile:{age:29}4.}н䗷ⴤ᧕䘉ṧᆀ߉Ⲵ䈍䘈н㜭䐁ˈഐѪ൘⁑ᶯѝ⭘<%profile.age%>Ⲵ䈍ˈԓ⸱Պ㻛ᴯᦒᡀdata[‘profile.age’]ˈ㔃᷌ᱟundefinedDŽ䘉ṧᡁԜቡн㜭ㆰঅൠ⭘replace࠭ᮠˈ㘼ᱟ㾱⭘
8、࡛Ⲵᯩ⌅DŽྲ᷌㜭ཏ൘<%઼%>ѻ䰤ⴤ᧕⭘Javascriptԓ⸱ቡᴰྭҶˈ䘉ṧቡ㜭ሩՐޕⲴᮠᦞⴤ᧕≲٬ˈۿл䶒䘉ṧ˖1.vartemplate='
Hello,mynameis<%this.name%>.I'm<%this.profile.age%>yearsold.
';ਟ㜭Պྭཷˈ䘉ᱟ
