उत्तरदायी / जावास्क्रिप्ट फ्रेमवर्क के लिए ट्रिटियम फ़ंक्शन डिज़ाइन - ज़र्ब-नींव, moovweb, tritium

मैं ज़बर फाउंडेशन फ्रेमवर्क का उपयोग कर एक नियमित डेस्कटॉप साइट उत्तरदायी बनाने के लिए Moovweb / Tritium का उपयोग कर रहा हूं।

इस के हिस्से के रूप में मैं फाउंडेशन विजेट्स को सक्षम करने के लिए सहायक कार्यों को बनाना चाहता हूं यूरेनियम एकीकरण पहले से ही Moovweb में। लेकिन कुछ फाउंडेशन घटकों, जैसे शीश पट्टी जटिल लेआउट हैं जिनके लिए एक फ़ंक्शन कॉल में उचित लगने से अधिक कॉन्फ़िगरेशन की आवश्यकता होती है।

उदाहरण के लिए, शीर्ष बार को सक्षम करने के लिए निम्न संरचना की आवश्यकता होती है:

# Use the foundation topbar
insert_top("nav", class: "top-bar") {

# Create the title area
insert("ul", class: "title-area") {
inject("<li class="name"><h1><a href="/">Website Name</a></h1></li>")
inject("<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>")
}

# Grab the header links and put them in the top bar
insert("section", class: "top-bar-section") {
insert("ul", class: "left") {

# Move the original header links here
move_here("//span[@class="pagetop"]//a"){
wrap("li")
}
}
}
}

पुन: प्रयोज्य ट्रिटियम कार्यों में इसे अमूर्त करने का सही तरीका क्या है जो बॉयलरप्लेट को कम करता है फिर भी लचीलापन की अनुमति देता है?

उत्तर:

जवाब के लिए 3 № 1

मेरे उपयोग के मामले में, मैंने लेआउट को संबंधित कार्यों में तोड़कर इसे एक दूसरे में घोंसला दिया। तो उपरोक्त मूल कोड बन जाता है:

# enable the foundation top bar
zurb_topbar() {
zurb_topbar_title("Website Name", "Menu", "menu-icon")
zurb_topbar_left() {
move_here("//span[@class="pagetop"]//a"){
wrap("li")
}
}
}

जहां कार्यों को परिभाषित किया गया है:

@func XMLNode.zurb_topbar() {
insert_top("nav", class: "top-bar") {
yield()
}
}

@func XMLNode.zurb_topbar_title(Text %name, Text %menu_btn_name, Text %menu_icon) {
insert("ul", class: "title-area") {
inject("<li class="name"><h1><a href="/">" +%name +"</a></h1></li>")
inject("<li class="toggle-topbar "+%menu_icon+""><a href="#"><span>"+%menu_btn_name+"</span></a></li>")
}
}

@func XMLNode.zurb_topbar_left() {
insert("section", class: "top-bar-section") {
insert("ul", class: "left") {
yield()
}
}
}

आप कल्पना कर सकते हैं ए zurb_topbar_right फ़ंक्शन जिसे वैकल्पिक रूप से टॉपबार के दाएं सेक्शन को परिभाषित करने के लिए उपयोग किया जा सकता है।

के लिए नोट करें zurb_topbar_title के href और संरचना <LI>एस हार्डकोडेड हैं क्योंकि यह आपको असंभव है "llआम तौर पर कहीं भी रूट को इंगित करना चाहते हैं लेकिन रूट। इसके बजाय संभावित भागों जिन्हें आप अनुकूलित करना चाहते हैं, शीर्षबार का शीर्षक, मेनू बटन का शीर्षक, और मेनू बार आइकन की उपस्थिति हैं।

के लिए कहां zurb_topbar_left the <LI> सामग्री शायद प्रोग्रामर द्वारा भरा जा रहा है, इसलिए उपज है ।

tradeoff प्रतीत होता है कि स्वचालित रूप से लागू है कि कार्यों का सही संयोजन सही तरीके से उपयोग किया जाता है trickier, यानी हो जाता है

  • आप दोनों का उपयोग करने के लिए है zurb_topbar तथा zurb_topbar_title
  • लेकिन केवल एक के zurb_topbar_left या zurb_topbar_right
  • zurb_topbar में शामिल होना चाहिए zurb_topbar_left
  • आदि, आदि ।

संबंधित सवाल
सबसे लोकप्रिय