Բովանդակություն
Այս հոդվածը առաջին անգամ հայտնվեց .net ամսագրի 221 համարում ՝ աշխարհի ամենաշատ վաճառվող ամսագիրը վեբ դիզայներների և մշակողների համար:
JavaScript- ը շատ ընթեռնելի չէ, և անընթեռնելի ծածկագիրը դժվար է պահպանել: Ruby- ի կամ Python- ի հետ համեմատած `ամենուր փակագծեր, փակագծեր և մեջբերումներ կան: Հաճախ ծրագրակազմից ավելի շարահյուսություն կա:
Մուտքագրեք CoffeeScript- ը: Այն շրջանակ չէ, փոխարենը կազմվում է գործարկվող JavaScript- ում: Դուք գրում եք CoffeeScript, կազմում եք այն, և դուրս է գալիս մաքուր, ամուր JavaScript պատրաստ զննարկչի համար: Դուք ստանում եք օպտիմիզացված JavaScript, բայց աշխատում եք մաքուր, հասկանալի, պահպանվող ծածկագրով:
CoffeeScript- ը սկսում է իրական իմաստ ստանալ, հենց որ դուք գրել եք մի քանիսը, այնպես որ եկեք շարունակենք: Նախ, մենք կտեղադրենք CoffeeScript կազմողը և թույլ կտա, որ այն փոխի մեր CoffeeScript ֆայլերը JavaScript- ի, որոնք կարող ենք բեռնել մեր զննարկչում:
Արդյունքները ստուգելու համար ձեզ անհրաժեշտ է CoffeeScript- ը տեղադրելու ձեր մշակման մեքենայի համար ՝ * nix- ի նման միջավայր, տեքստի խմբագիր, տերմինալ և զննարկիչ: Սկզբում մենք տեղադրում ենք node.js (JavaScript- ի գործարկման ժամանակ, որն անհրաժեշտ է CoffeeScript- ին `իր կախարդանքն անելու համար): Դրանից հետո մենք տեղադրում ենք հանգույցի փաթեթի կառավարիչը (npm) և օգտագործում ենք դա ՝ ինքնին CoffeeScript- ը տեղադրելու համար: OS X- ում դա անելու ամենապարզ ձևը homebrew- ն է: Համոզվեք, որ XCode- ը տեղադրված է, ապա հետևեք homebrew տեղադրելու հրահանգներին կամ պարզապես բացեք տերմինալային նստաշրջանը և մուտքագրեք.
/ usr / bin / ruby -e "$ (curl -fsSL https://raw.github.com/gist/323731)"Install node.js: brew install հանգույց
ապա npm և CoffeeScript:
գանգրացնել http://npmjs.org/install.sh | sh npm տեղադրել -g սուրճի սցենար
Եթե դուք Linux եք աշխատում, ձեր փաթեթի կառավարիչը կարող է տեղադրել հանգույց, ապա տեղադրել npm և CoffeeScript: Եթե, մյուս կողմից, Windows եք օգտագործում, փորձեք հետևել Matthew Podwysocki- ի հրահանգներին CodeBetter- ում: Այս ձեռնարկը վերաբերում է CoffeeScript շարահյուսությանը, ուստի եկեք պարզ պահենք ծրագրի նպատակը. Ձևի վրա միացնել հաճախորդի կողմից վավերացումը: Ահա մեր ձևը, ցուցիչ. html:
form id = "contact_form"> ol> li> label> Name / label> input type = "text" name = "name"> / li> li> label> Email / label> input type = "email" name = "email "> / li> li> label> Enquiry / label> textareaa name =" հարցում "> / textarea> / li> / ol> ol> li> մուտքագրման տեսակ =" ներկայացնել "> / li> / ol> / ձև>
Մենք ունենք նաև գրացուցակ, սցենարպարունակող դատարկ ֆայլ, որը կոչվում է ձև. սուրճ.
Boուրը եռացնելը
Եկեք գրենք CoffeeScript- ը: Բացեք ձևը. Սուրճը և ավելացրեք հետևյալը.
required_field_names = ['անուն', 'էլփոստ']
Առայժմ պարզապես JavaScript, բայց դա սկիզբ է: Եկեք կազմենք ձև. սուրճ, Բացեք տերմինալը և CD- ն սցենարների գրացուցակում.
cd հանրային / սցենար
CoffeeScript- ի սուրճի օգտակար ծրագիրը կարող է կազմել ֆայլը.
սուրճ - c ձև. սուրճ
Ի -գ դրոշը սուրճին ասում է, որ CoffeeScript- ը կազմի ֆայլ: Առանց դրա, սուրճը կազմում և վարում է ֆայլը: -գ JavaScript- ը դուրս կգա կոչվող ֆայլից ձև. js, նույն գրացուցակում, ինչ որ ձև. սուրճ ֆայլ Եկեք նայենք ձև. js:
(ֆունկցիա () {var պահանջվող_ֆիլմերի_անուններ; անհրաժեշտ_ադաշտային_անուններ = ['անուն', 'էլփոստ'];}): զանգ (այս);
Ինչ է պատահել? Ի պահանջվող_ադաշտի_անունները փոփոխականն ընդգրկված է var- ի կողմից, և ամբողջ սցենարը փաթաթված է անվանատարածքում: Սա մեզ պաշտպանում է JavaScript- ի սխալների ամենատարածված աղբյուրներից մեկից `պատահական գլոբալ փոփոխականներից: CoffeeScript- ում փոփոխականները լռելյայնորեն տեղական են, փոխարենը գլոբալ, ինչպես սովորական JavaScript- ում: Եթե նախկինում երբեք չեք անհանգստացել JavaScript- ում scoping ծրագրից, շատ հաջողակ եք: Եթե ունեք, ուրեմն սա փրկարար է:
Առաջին կում
Եկեք մեր JavaScript- ը ներառենք այստեղ ցուցիչ. html:
head> script src = "/ script / form.js"> / script> / head>
և թարմացրեք ձևը ՝ գործառույթը ներկայացնելու դեպքում.
form onsubmit = "վերադարձ վավերացնել (սա);">
Եկեք հայտարարենք մեր պահանջվող դաշտերի զանգվածը այս վավերացված գործառույթում և վերադառնանք կեղծ `զարգացումը կանխելու համար ձևաթուղթը ներկայացնելը: JS- ում մենք կարող ենք անել.
var վավերացնել = գործառույթ (ձև) {var պահանջվում է_ֆիլմի_անուններ = ['անուն', 'էլփոստ']; վերադարձ կեղծ; }
CoffeeScript- ի միջոցով մենք կարող ենք պարտվել var զանգահարել Լրացուցիչ ՝
ֆունկցիա (args) {
դառնում է ՝
(args) ->
և ամրացումների փոխարեն, մենք օգտագործում ենք փորվածք ՝ գործառույթի բովանդակությունը որոշելու համար.
վավերացնել = (ձև) -> պարտադիր_ֆիլմի_անուններ = ['անուն', 'էլփոստ'] վերադարձնել կեղծ
Ուշադրություն դարձրեք, որ մենք նույնպես հետ ենք թողել հետիոտնուկները: Մի վերջին հնարք. CoffeeScript- ը վերադարձնում է ֆունկցիայի վերջին արտահայտության արդյունքը, այնպես որ մենք կարող ենք կորցնել վերադարձը.
վավերացնել = (ձև) -> պարտադիր_ֆիլմի_անուններ = ['անուն', 'էլփոստ'] կեղծ
Կազմել:
սուրճ - c ձև. սուրճ
և նայեք ձև. js ստուգել. Վերաբեռնեք մեր ձևը, սեղմեք Ներկայացրեք և ... ձևը ներկայացնում է: Ի՞նչն է սխալ եղել
CoffeeScript- ը ստեղծում է ամեն ինչ անունների տարածքում և տեղական տիրույթում: Դա նշանակում է, որ մինչդեռ վավերացնել հասանելի է ցանկացած ներսում ձև. սուրճ, այն մատչելի չէ այդ ֆայլից դուրս, ուստի բաժանորդագրությունը չի կարող մուտք գործել այն: Սա կանխում է JavaScript ֆայլի մեկ այլ վերասահմանում վավերացնել, բայց այստեղ շատ օգտակար չէ:
Ֆունկցիան գլոբալ դարձնելու համար մենք պարզապես փոխում ենք առաջադրանքը.
windows.validate = (ձև) ->
Սա կցվում է վավերացնել դեպի պատուհան օբյեկտ ՝ այն գլոբալ հասանելի դարձնելով: Կրկին կազմել.
սուրճ - c ձև. սուրճ
ապա վերաբեռնել, ներկայացնել ձևաթուղթը և ... առանց ներկայացման: Յուրաքանչյուր փոփոխություն կազմելն արդեն հոգնեցուցիչ է, ուստի փոխարենը օգտագործենք «դիտելու» գործառույթը.
սուրճ - cw *. սուրճ
-w սկսում է կոմպիլյատորը և թողնում է այն գործարկման ՝ կազմելով ցանկացած փոփոխված ֆայլ, որը համապատասխանում է դրան *. սուրճ օրինաչափություն Այս վազքի միջոցով մենք կարող ենք խմբագրել մեր CoffeeScript ֆայլերը, գրեթե անմիջապես պահպանել և վերաբեռնել զննարկիչում կազմված տարբերակը:
Լոբի մանրացնելը
Մենք ունենք անհրաժեշտ դաշտի անվանումների ցուցակ և դրանք ստուգելու համար ներկայացման վարիչ: Տրված անուններով բոլոր դաշտերը գրավելու համար մենք կարող ենք JS- ում կատարել հետևյալը.
var պահանջվող_ադաշտեր = []; համար (var անունը պահանջվում է_ դաշտի_անուններում) {var դաշտ = ձև. էլեմենտներ [անուն]; պահանջվող_ադաշտեր. հրում (դաշտ); }
Մենք կարող ենք տառադարձել CoffeeScript. Կորցնել ամրագոտիները, օգտագործել ներմուծում: Կարող ենք նաև փակագծեր կորցնել գործառույթներին փոխանցված փաստարկների շուրջ, ճիշտ ինչպես Ruby- ում, տալով հետևյալը.
պահանջվող_ադաշտեր = [] անվանման համար պահանջվող_ֆիլմերի_անունների դաշտում = ձև. էլեմենտներ [անուն] պարտադիր_ադաշտեր. սեղմման դաշտ
Մենք կարող ենք ավելի լավ գնալ.
required_fields = պահանջվող_ադաշտի_անունների անվանման վերադարձման ձևով. էլեմենտներ [անուն]
Այլ կերպ ասած, for- ի համար կվերադարձվի զանգված, որը պարունակում է վերադարձի արժեքներ յուրաքանչյուր կրկնությունից: Հիշեք, որ մեզ հարկավոր չէ հստակ վերադարձ CoffeeScript- ում, հետևաբար.
required_fields = պահանջվող_ֆիլմի_անունների տեսքով անվանման համար: էլեմենտներ [անուն]
For բլոկն այժմ ընդամենը մեկ հայտարարություն է, և CoffeeScript- ը տալիս է մեզ հետևյալ հնարքը ՝ պայմանը դնելով այն հայտարարությունից հետո, որը մենք ուզում ենք գործարկել.
Required_fields = (form. Elements [name] name for required_field_names)
Սա նախադասության պես կարդում է.
> Պարտադիր դաշտերը պարտադիր դաշտի անվանումներում յուրաքանչյուր անվան ձևի տարրեր են
Մենք թորել ենք JavaScript- ի հինգ տողեր `իջեցնելով մեկ, մաքուր կոդի տող, որն արտահայտում է հենց այն, ինչ անում է: վավերացնել ինքն իրեն այժմ չորս տող է: Կազմված JavaScript- ը տեղակայված է փամփուշտից զերծ, կոշտ և հիշողունակ կոդի շուրջ 18 տողում: CoffeeScript- ի հետ կապված շատ բաներ հավանելու բան կա:
Տապակածը ստուգելը
Մենք ունենք մուտքային տարրերի զանգված, ուստի եկեք ստուգենք, որ յուրաքանչյուրն ունի իր արժեքը: JavaScript- ում մենք կարող ենք դա անել.
var սխալներ = []; համար (var դաշտը պահանջվող_ադաշտերում) {if (field.value == ’’) {սխալներ.հրապարակ (դաշտի անուն); }}
Սա հավաքելու է դաշտերի վատ անունների զանգված: Եկեք կարգի բերենք սա.
սխալներ = [] դաշտի համար պարտադիր_ադաշտերում, եթե field.value == ’’ սխալները.հրել դաշտի_անունը
Սա կարծես թե խնայողություն չէ: Ուշադրություն դարձրեք, որ եթե բլոկում կա միայն մեկ հայտարարություն: Սա նշանակում է, որ մենք կարող ենք անել նույն հնարքը, որը մեզ հաջողվեց for բլոկի հետ ՝ պայմանական հայտարարությունը դնելով պայմանի առաջ.
սխալներ = [] դաշտի համար պահանջվող_ադաշտերում սխալներ: սեղմել դաշտի_անունը, եթե դաշտ: արժեք == ”»
Մենք նույնիսկ կարող էինք կրկնել հնարքը և ամեն ինչ տեղափոխել մեկ տող.
սխալներ = [] (սխալներ. դաշտի անվանման սխալներ. եթե դաշտ. արժեք == '') դաշտի համար պահանջվող դաշտերում
Սպասեք Փակագծեր Փակագծերն ապահովում են առաջնահերթությունը և կարևորում են մի կետ. CoffeeScript- ում փակագծերն ընտրովի են, արգելված չեն: CoffeeScript- ը նպատակ ունի բարելավել JavaScript- ի ընթեռնելիությունը, այնպես որ, եթե փակագծեր օգտագործելը դրան օգնում է, ապա դրանք շարունակվում են:
Մեր վավեր գործառույթն այժմ.
windows.validate = (ձև) -> պարտադիր_ֆիլմի_անուններ = ['անուն', 'էլ. նամակ'] սխալներ = [] պարտադիր_ադաշտեր = (ձև. էլեմենտներ [անուն] անվանման համար պահանջվող_ֆիլմերի անվանումներում) (սխալներ = '') պարտադիր_ադաշտերում դաշտի համար կեղծ է
Մնում է երկու բան անել ՝ կանխել ձևի ներկայացումը միայն այն դեպքում, եթե մենք ունենք սխալներ և այդ սխալները տեղեկացնենք օգտագործողին:
Theառայել կատարյալ գավաթ
Սխալի վրա ներկայացնելը կանխելը այժմ չնչին է: Վերջին տողը փոխարինեք սխալների քանակի ստուգմամբ.
windows.validate = (ձև) -> ... սխալներ. երկարություն == 0
վավերացնել այժմ հստակորեն տալիս է այո / ոչ պատասխանը. ձևի վրա կա՞ զրո սխալ: Սա շատ ընթեռնելի և պահպանելի է. Ֆունկցիայի վերջին տողը ամփոփում է հենց այն, ինչ անում է գործառույթը: Սխալների մասին հաղորդումը կարող էր նմանապես պարզ լինել ՝ վերջին տողից առաջ ավելացնելով հետևյալը.
ահազանգման սխալներ. միանալ (',') եթե սխալներ: երկարություն> 0
Սա չափազանց պարզ է. Չկան նկարագրություններ, պարզապես դաշտային անունների ցուցակ: Եկեք սա վերածենք սխալների գործարկման գործառույթի, հաշվետվություն, Վերոհիշյալը փոխարինեք հետևյալով.
հաղորդել սխալների մասին
ապա ստորև ավելացրեք հետևյալը վավերացնել:
հաղորդում = (սխալներ) -> նախազգուշացում "Այս ձևը ունի սխալներ. n n-" + սխալներ: միացեք (" n-"), եթե սխալներ: երկարություն> 0
Մեր վերջնական կոդն ունի այսպիսի տեսք.
windows.validate = (ձև) -> պահանջվող_ֆիլմերի_անուններ = ['անուն', 'էլ. նամակ'] պահանջվող_ադաշտեր = (ձև. էլեմենտներ [անուն] անուն `պահանջվող_ֆիլմերի_անուններում) սխալներ = [] (սխալներ = '') պարտադիր_ադաշտերում դաշտի համար սխալներ են հաղորդում սխալներ. երկարություն == 0 զեկուցում = (սխալներ) -> նախազգուշացում "Այս ձևն ունի սխալներ. n n-" + սխալներ: միանալ (" n-"), եթե սխալներ: երկարություն> 0
Մաքրում
Այս արագ վերազինումը միշտ ցավ է պատճառել JavaScript- ին: Գործառույթների ստեղծումը կարող է հանգեցնել ոլորտի խնդիրների, և շարահյուսական ապուրը կանխում է վերաֆակտորացումը կոդի ընթերցելիությանը ավելացնելուց: CoffeeScript- ի միջոցով սխալների մշակման նման ֆունկցիոնալությունը դուրս բերելը չնչին է և ոչ այլ ինչ է, քան օգնում է ընթերցանությանը: Մենք կարող ենք շարունակել սա ՝ վավերացումը հետագայում մաքրելու համար.
windows.validate = (ձև) -> սխալներ = get_errors ձև, ['անուն', 'էլ. փոստ'] հաղորդել սխալների սխալներ. երկարություն == 0 get_errors = (ձև, դաշտային անուններ) -> սխալներ = [] պահանջվող դաշտեր = (ձև. էլեմենտներ) [անունը] դաշտի_անուններում անվանման համար) (սխալներ. սեղմել դաշտային անվանումը, եթե դաշտային արժեքը == '') դաշտի համար պահանջվող_ադաշտերում սխալների զեկույց = (սխալներ) -> նախազգուշացում "Այս ձևը սխալներ ունի. n n-" + սխալներ. միանալ (" n-") եթե սխալներ: երկարություն> 0
Տասներեք տող մաքուր, ընթեռնելի կոդ, ի տարբերություն 35 տողերի արդյունավետ, բայց բավականին շատ անընթեռնելի JavaScript: Հիմա դա ահազանգ է:
