फ्रेंडली ओपन स्पेस जेएस: क्लाइंट-साइड रेंडरिंग और रैपरा क्रिएशन

अनुकूल ओपन स्पेस एक बहुत ही युवा ढांचा है, लेकिन पहले से ही पता है कि कैसे चलाना है :-)

"फ्रेंडली ओपन स्पेस" के विकास पर इस लेख में, हम ब्राउज़र में टेम्पलेट के प्रतिपादन और स्थानीय फ़ाइल डेटाबेस पर एप्लिकेशन लॉन्च करने में महारत हासिल करेंगे।

फ्रेमवर्क का मुख्य क्लाइंट पर दो प्रकार के टेम्पलेट असेंबली का समर्थन करता है:

1. पूर्ण ग्राहक पक्ष प्रतिपादन
2. सर्वर में टेम्पलेट को रेंडर करने के लिए एक अनुरोध किया जाता है, इसके बाद ब्राउज़र विंडो में इसका आउटपुट होता है।

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

दूसरे प्रकार का प्रतिपादन पहले से ही इस सुविधा से रहित है। क्लाइंट टेम्पलेट पैरामीटर भेजता है और पहले से ही HTML सर्वर से प्राप्त करता है। हां, सर्वर पर लोड निश्चित रूप से बढ़ेगा, लेकिन यह विधि खुले इंटरनेट समाधान के लिए अधिक उपयुक्त है।

आवेदन तैयार करना और उसे स्थापित करना

और इसलिए, हमें एक-पेज के एप्लिकेशन को बनाने के कार्य का सामना करना पड़ता है जो क्लाइंट साइड पर 2 टेम्प्लेट (विंडोज़) प्रदान करेगा। एक काफी सरल कार्य के मद्देनजर, हम एक MySQL डेटाबेस और अनुमानों के बिना करेंगे, इसलिए हम सभी FSQL काम को एक फ़ाइल में निर्देशित करेंगे, अर्थात। हम फ्रेमवर्क के आंतरिक तंत्र के साथ काम करने के लिए फाइल पर डेटाबेस का उपयोग करेंगे। अच्छा, चलिए शुरू करते हैं।

निर्देशिका बनाएँ:

टेम्पलेट्स - टेम्पलेट्स निर्देशिका
सीएसएस - सीएसएस फ़ाइलों की निर्देशिका
fos - नवीनतम बीटा मित्रतापूर्ण डाउनलोड करें। site/en/download
अनुप्रयोग की मूल निर्देशिका में कष्टप्रद favicon.ico रखें: favicon.ico

इसके अलावा, हम तुरंत स्टाइल फ़ाइलों को css डायरेक्टरी में रखते हैं: window.css और styles.css

अगला, application.js एप्लिकेशन फ़ाइल स्वयं बनाएं:

var fos = require("./fos/fos"); fos.module({ name: "application.js", dependencies: [ "fos:NServer/Application.js", ], module: function(application) { application.setSettings({ port: 3001, packages: [], dynamicLoading: true, clientRenderingMode: "client", dataClient: { defaultConnection: "default", connections: { default: { type: "file", file: "data.fosdb" } }, }, onInitialize: function(a_event) { if (!a_event.error) { application.run(); } else { console.error(a_event.error); } } }); application.getRouter().add([ { route: "", controller: "fos:NServer/NControllers/Tmpl.js", source: "templates/page.tmpl", }, { route: "/css/*", controller: "fos:NServer/NControllers/File.js", source: "css", }, { route: "/templates/*", controller: "fos:NServer/NControllers/File.js", source: "templates", }, { route: "favicon.ico", controller: "fos:NServer/NControllers/File.js", source: "favicon.ico", }, ]); application.initialize(); } }); 

अब हम application.js फ़ाइल की सामग्री को देखते हैं

हमने सभी पैकेजों को निष्क्रिय कर दिया, क्योंकि उनकी जरूरत नहीं थी (सेटसेटिंग पद्धति के पैकेज पैरामीटर):

  ... application.setSettings({ port: 3001, packages: [], dynamicLoading: true, clientRenderingMode: "client", ... 

ClientRenderingMode एप्लिकेशन पैरामीटर, हमारे लिए नया है, क्लाइंट पर रेंडरिंग के प्रकार के लिए जिम्मेदार है और इसके दो मूल्य हैं:

"क्लाइंट" - प्रतिपादन पूरी तरह से ब्राउज़र द्वारा किया जाता है। क्लाइंट स्वतंत्र रूप से निर्भरता को लोड करता है और सर्वर पर FSQL प्रश्नों को निष्पादित करता है, जिसके बाद यह HTML को ही एकत्रित करता है

"सर्वर" - क्लाइंट टेम्पलेट रेंडर करने के लिए सर्वर से अनुरोध करता है और प्रतिक्रिया के रूप में तैयार एचटीएमएल प्राप्त करता है

  ... packages: [], dynamicLoading: true, clientRenderingMode: "client", dataClient: { defaultConnection: "default", ... 

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

 ... defaultConnection: "default", connections: { default: { type: "file", file: "data.fosdb" } }, }, ... 

जैसा कि उपरोक्त अंश से देखा जा सकता है, इस मामले में डेटाबेस प्रकार (प्रकार पैरामीटर) "फ़ाइल" है, और एकमात्र फ़ाइल कनेक्शन पैरामीटर में डेटा फ़ाइल का पथ होना चाहिए। यदि फ़ाइल गायब है, तो एप्लिकेशन इसे स्वयं बना देगा।

पेज टेम्पलेट बनाएं

अब एक एप्लिकेशन पेज टेम्प्लेट फ़ाइल टेम्प्लेट / page.tmpl बनाने का समय है, जिसे हमने रूट URL रूट में पंजीकृत किया है।

 //~OPTIONS { args:{ fosInclude: ["css/styles.css"], } } //~BLOCK main default <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> %{{ render.renderHTMLHeader(); }}% <script> function onClientSideRendering(a_event){ a_event.preventDefault(); fos.application.render({ template: "templates/window.tmpl", owner: document.body, args: { title: "Client side rendering", context: "Simple example of client side rendering" }, onResult: function(a_error, a_template){ } }); } function onServerSideRendering(a_event){ a_event.preventDefault(); fos.application.render({ template: "templates/window.tmpl", owner: document.body, renderMode: "server", args: { title: "Server side rendering", context: "Simple example of server side rendering" }, onResult: function(a_error, a_template){ } }); } </script> </head> <body> <div class="mainwrapper"> <div class="header markup"> Client Side Rendering </div> <div class="body-wrapper markup"> <div class="body markup"> <p class="example-link--container"><a onclick="onClientSideRendering(event);">Client side rendering</a></p> <p class="example-link--container"><a onclick="onServerSideRendering(event);">Server side rendering</a></p> </div> <div class="clear-body"></div> </div> </div> </body> </html> 

पेज टेम्पलेट में दो लिंक हैं, "क्लाइंट साइड रेंडरिंग" और "सर्वर साइड रेंडरिंग"। जिस पर क्लिक करने से ऐसी खिड़कियां प्रदर्शित होंगी जो अभी तक उपलब्ध नहीं हैं। लेकिन उन्हें कॉल करने के लिए एक कोड है। और इसलिए चलो टेम्पलेट कोड से निपटें।

जब हम "क्लाइंट साइड रेंडरिंग" लिंक पर क्लिक करते हैं, तो हम onClientSideRendering () फ़ंक्शन को कॉल करते हैं, जो "टेम्प्लेट / window.tmpl" टेम्प्लेट प्रस्तुत करता है। पूरी तरह से ग्राहक पक्ष पर, के रूप में अनुप्रयोग सेटिंग्स में, clientRenderingMode पैरामीटर "क्लाइंट" पर सेट किया गया था। इस तथ्य के बावजूद कि यह डिफ़ॉल्ट मान है :-)।

 function onClientSideRendering(a_event){ a_event.preventDefault(); fos.application.render({ template: "templates/window.tmpl", owner: document.body, args: { title: "Client side rendering", context: "Simple example of client side rendering" }, onResult: function(a_error, a_template){ } }); } 

रेंडर विधि वास्तव में हमारी विंडो को प्रस्तुत करती है और इसे पृष्ठ के मुख्य भाग में रखती है, जैसा कि स्वामी तर्क की संपत्ति में निर्दिष्ट है। हम विंडो टेम्पलेट में 2 तर्क पास करते हैं: शीर्षक और संदर्भ, वास्तव में प्रदर्शित विंडो में क्या प्रदर्शित किया जाएगा। विधि के बारे में अधिक जानकारी के लिए, fos :: NClient :: Application :: प्रस्तुत करना देखें

दूसरा लिंक onServerSideRendering () फ़ंक्शन को कॉल करता है, जो समान टेम्पलेट को समान रूप से प्रस्तुत करता है, लेकिन सर्वर की तरफ, और क्लाइंट को तैयार HTML प्राप्त होता है। यह मोड रेंडर विधि की संपत्ति में सेट है "मान" सर्वर के साथ रेंडर विधि का तर्क।

 function onServerSideRendering(a_event){ a_event.preventDefault(); fos.application.render({ template: "templates/window.tmpl", owner: document.body, renderMode: "server", args: { title: "Server side rendering", context: "Simple example of server side rendering" }, onResult: function(a_error, a_template){ } }); } 

पॉप-अप टेम्पलेट बनाना और एक आवरण टेम्पलेट लिखना

पॉपअप विंडो टेम्प्लेट अपने आप में बहुत सरल है। टेम्प्लेट / window.tmpl फ़ाइल बनाएँ। निम्नलिखित इसकी सामग्री है।

 //~OPTIONS { args:{ fosWrapper: true, fosClass: "window", fosInclude: ["css/window.css"], title: "", context: "", } } //~BLOCK main default <div class="window-container"> <div class="window-close" name="close">x</div> <div class="window-title">${{args.title}}$</div> <div class="window-context">${{args.context}}$</div> </div> 

यहाँ आपके लिए दो नए पैरामीटर fosWrapper और fosClass हैं।

चलो fosWrapper से शुरू करते हैं। यदि यह ध्वज सत्य पर सेट होता है, तो HTML टेम्पलेट को स्पैन कंटेनर में रखा जाता है और एक आवरण वस्तु fos :: NRender :: Wrapper इसके लिए बनाई जाती है।

एप्लिकेशन लॉन्च करें, लोकलहोस्ट पर जाएं : 3001 और "क्लाइंट साइड रेंडरिंग" लिंक पर क्लिक करें। पॉप-अप विंडो हमारा टेम्प्लेट है। विंडो पॉपअप पूरी तरह से css (css / window.css फ़ाइल) द्वारा कार्यान्वित किया जाता है - मैंने अभी उल्लेख किया है कि आप जेएस :-) :-) की तलाश नहीं करेंगे।

DevTools ब्राउज़र खोलें (Ctrl + Alt + i), तत्वों टैब पर जाएं और हमारी विंडो की संरचना की समीक्षा करें।



आकृति में नीली रेखा हमारे स्पैन रैपिंग कंटेनर को चिह्नित करती है जिसके साथ fos :: NRender :: रैपर ऑब्जेक्ट जुड़ा हुआ है।

टेम्पलेट के लिए अगला सिस्टम तर्क fosClass है। यह बस आवरण वर्ग के कंटेनर में एक CSS वर्ग जोड़ता है।

और इसलिए, सब कुछ अच्छी तरह से किया गया था, लेकिन अगर हम अपने पॉप-अप को बंद करने की कोशिश करते हैं, तो कुछ भी नहीं आएगा। हां, हमने अभी तक एक क्लोजिंग ऑपरेशन नहीं लिखा है!

जैसा कि हमने पहले कहा था, अगर सिस्टम तर्क fosWrapper सत्य है, तो आवरण ऑब्जेक्ट fos :: NRender :: Wrapper टेम्पलेट के लिए बनाया गया है। यह क्लाइंट पर टेम्पलेट के साथ बातचीत करने के लिए एक मानक इंटरफ़ेस प्रदान करता है। किसी टेम्पलेट के लिए मानक आवरण को फिर से परिभाषित करने के लिए, निम्न प्रारूप [पैटर्न NAME] .wrapper.js के अनुरूप नाम के साथ एक मॉड्यूल बनाने के लिए पर्याप्त है, और मॉड्यूल को क्लास फोस से प्राप्त किया जाना चाहिए "NRender :: Wrapper।

अब टेम्प्लेट / window.tmpl टेम्प्लेट के लिए एक रैपर फ़ाइल बनाएँ। जब आप प्रतीक "x" पर क्लिक करेंगे तो नई कक्षा को हमारी पॉप-अप विंडो बंद करनी होगी।

फ़ाइल टेम्प्लेट / window.wrapper.js:

 fos.module({ name: "templates/window.wrapper.js", dependencies: ["fos:NRender/Wrapper.js"], module: function(Wrapper){ return function(a_initializeOptions) { var self = this; Wrapper.call(this, a_initializeOptions); var parentAttach = this._attach; this._attach = function(a_cb) { parentAttach.call(this, function(){ fos.addDomListener(fos.select(self.getDomElement(), "[name=close]")[0], "click", function(){ self.getDomElement().classList.add("window-hide"); setTimeout(function() { self.destroy(); }, 2000); }); a_cb(); }); } } } }); 

आइए हमारे मॉड्यूल की सामग्री का विश्लेषण करें। सबसे पहले, हम बेस क्लास fos :: NRender :: Wrapper को कनेक्ट करते हैं और कॉल विधि के माध्यम से इसे प्राप्त करते हैं।

 fos.module({ name: "templates/window.wrapper.js", dependencies: ["fos:NRender/Wrapper.js"], module: function(Wrapper){ return function(a_initializeOptions) { var self = this; Wrapper.call(this, a_initializeOptions); ... 

हम fos को फिर से परिभाषित करने के बाद :: NRender :: Wrapper :: _ संलग्न विधि, जिसे टेम्पलेट उस ऑब्जेक्ट से संबद्ध होने पर कहा जाता है। इस पद्धति में, हम विंडो को बंद करने के लिए लिंक पर क्लिक करने की घटना को जोड़ेंगे। ओवरराइडिंग केवल विधि घोषित करके किया जाता है, लेकिन शुरुआत में हमें माता-पिता के कार्यान्वयन का संदर्भ रखना चाहिए। विधि में एक "अतुल्यकालिक प्रकृति" है, इसलिए हम अपने कार्यों के कार्यान्वयन को मूल कार्यान्वयन के कॉलबैक फ़ंक्शन में डालते हैं।

  ... var parentAttach = this._attach; this._attach = function(a_cb) { parentAttach.call(this, function(){ fos.addDomListener(fos.select(self.getDomElement(), "[name=close]")[0], "click", function(){ self.getDomElement().classList.add("window-hide"); setTimeout(function() { self.destroy(); }, 2000); }); a_cb(); }); } ... 

प्रतीक "x" पर क्लिक करने की घटना से जुड़कर हम fos :: addDomListener को कॉल करके प्रदर्शन करते हैं, जो DOM तत्व के माता-पिता को बदलने पर कनेक्टेड घटनाओं को रीसेट नहीं करता है।

ईवेंट हैंडलर में, हम विंडो बंद करते हैं। सबसे पहले, हम अच्छी तरह से सीएसएस वर्ग "विंडो-छिपाने" को जोड़कर स्क्रीन से खिड़की को हटा देते हैं। एनीमेशन पूरा होने के बाद, हम fos :: NRender :: Wrapper :: विनाश विधि को कॉल करते हैं, जो टेम्पलेट और आवरण ऑब्जेक्ट को निकालता है।

सभी आवेदन पत्र, लाईन और मरम्मत !!!

 node application.js 

आधिकारिक विकास स्थल

एक उदाहरण से लिंक करें