टेम्पलेट्स के लिए Derby.js थीम

Derby.js एक तंत्र प्रदान करता है जो क्लाइंट को दिए गए HTML कोड में CSS को एनकैप्सुलेट करके पेज लोडिंग गति को काफी बढ़ा सकता है। उत्पादन मोड में, Derby.js HTML, CSS, JS को छोटा करता है। प्रलेखन में संकेत के रूप में, स्टाइलस और / या लेस का उपयोग किया जाता है।
डिफ़ॉल्ट रूप से, फ़ाइल कनेक्ट होती है: शैलियाँ / एप्लिकेशन / index.styl , जहां हम उन सभी सिंटैक्टिक फ़ायदों का लाभ उठा सकते हैं, जो स्टाइलस प्रदान करता है।
क्या होगा यदि हमारी परियोजना टेम्पलेट्स के लिए कई विषयों (शैलियों) के उपयोग के लिए प्रदान करती है?

यूआई हमारा समाधान है

UI तंत्र - Derby.js में से एक तंत्र है जो आपको कस्टम घटक बनाने की अनुमति देता है। इसकी विशेषता यह है कि:

1. इसे "ऑन डिमांड" से जोड़ा जा सकता है
2. वह अपनी शैलियों का उपयोग कर सकता है
3. आप घटक व्यवहार के अपने तर्क को लागू कर सकते हैं

तो - यह वही है जो हमें चाहिए।

कदम से कदम यह इस तरह दिखेगा:

$ npm install derby $ derby new app $ cd app 

एक सरलीकृत संस्करण में, मान लीजिए कि जब आप पते / पृष्ठ 1 पर जाते हैं , तो हम केवल शैलियों को जोड़ते हैं (या, इसे दूसरे तरीके से, विषय को डालने के लिए)। जाने पर / पृष्ठ 2 अन्य, आदि।
हम इस स्थिति से आगे बढ़ेंगे कि कोई सामान्य शैली नहीं है। इसलिए फाइल करें
शैलियों / एप्लिकेशन / index.styl केवल शामिल होंगे:

 @import 'nib/vendor' 

इसलिए, हम कमांड के निम्नलिखित प्रारंभिक सेट को निष्पादित करेंगे:

 $ mkdir ui/theme1 $ touch ui/theme1/index.js $ mkdir ui/theme2 $ touch ui/theme2/index.js $ mkdir styles/theme1 $ touch styles/theme1/index.styl $ mkdir styles/theme2 $ touch styles/theme2/index.styl 

फ़ाइल सामग्री

ui / theme1 / index.js

 var config = { filename: __filename , styles: '../../styles/theme1' , scripts: { } }; module.exports = function(app, options) { app.createLibrary(config, options); }; 

फ़ाइल ui / theme2 / index.js

 var config = { filename: __filename , styles: '../../styles/theme2' , scripts: { } }; module.exports = function(app, options) { app.createLibrary(config, options); }; 

कृपया ध्यान दें कि स्क्रिप्ट में कोई फ़ाइल शामिल नहीं है। इस विशेष मामले में, यह आवश्यक नहीं है। हालांकि, यदि आपको किसी विशेष घटक के लिए कार्यक्षमता और टेम्पलेट टैग जोड़ने की आवश्यकता है, तो आप किसी भी समय आवश्यक तर्क जोड़ सकते हैं।

STYL फ़ाइल सामग्री

शैलियों / थीम 1 / index.styl
शैलियों / थीम 2 / index.styl

पहली पंक्ति

 @import 'nib/vendor' //        

हम राउटर बदलते हैं

फ़ाइल खोलें: lib / app / index.js और इसे निम्नलिखित सामग्रियों से भरें:

 var app = require('derby').createApp(module) .use(require('derby-ui-boot')); app.get('/page1', function(page, model, params, next) { app.use(require('../../ui/theme1')); page.render(); }); app.get('/page2', function(page, model, params, next) { app.use(require('../../ui/theme2')); page.render(); }); 

हमारे शुरुआती विचार के अनुसार, हम विशिष्ट राउटर के लिए थीम को "कनेक्ट" करते हैं।
यदि आपको राउटर के समूह के लिए थीम पेश करने की आवश्यकता है, तो आप उन्हें एक अलग फ़ाइल में रख सकते हैं और निम्नलिखित निर्माण कार्य का उपयोग कर सकते हैं:

 var app = require('derby').createApp(module) .use(require('derby-ui-boot')) .use(require('../../ui/theme2')); 

मेरे लिए व्यक्तिगत रूप से, एमवीसी अवधारणा करीब है, क्रमशः, नियंत्रकों द्वारा राउटर का टूटना, जो एक्शन-कंट्रोलर लॉजिक के साथ अधिक सुसंगत होगा। व्यू और मॉडल का पृथक्करण विशिष्ट है, इसलिए पूर्ण विकसित एमवीसी पैटर्न के बारे में बात करने की कोई आवश्यकता नहीं है। हालाँकि, यह चर्चा के लिए एक अलग विषय है।

चेक

 $ npm start 

ब्राउज़र में:

 http://localhost:3000/page1 http://localhost:3000/page2 

निष्कर्ष

हमने Derby.js में टेम्पलेट्स के लिए कई शैलियों / विषयों का उपयोग करने के लिए एक तंत्र को देखा
इस विधि के लाभ - हमें उन शैलियों को पेश करने से राहत मिलती है, जिनका उपयोग नहीं किया जाता है, हम उन उपकरणों के सेट का विस्तार करते हैं जिनका उपयोग हम प्रत्येक विशिष्ट विषय के लिए डर्बी.जेएस यूआई प्लग-इन बनाकर कर सकते हैं।
दोष यह है कि मैं देख रहा हूं कि काफी सरल ऑपरेशन के लिए, मुझे बहुत सारी कार्रवाइयों को अंजाम देना पड़ता है, जो कि मुझे ऐसा लगता है कि ढांचे के तर्क को और अधिक लचीलेपन से बचा जा सकता है। हालांकि, उत्तरार्द्ध बहुत व्यक्तिपरक है।

सूत्रों का कहना है

आधिकारिक साइट Derby.js
derbyjs.com/#stylesheets
learnboost.imtqy.com/stylus
lesscss.org
github.com/codeparty/derby-ui-boot
Derby.js द्वारा सामग्री