🏓 🎯 ⚒️ जावा डेवलपर्स के लिए जेएस मॉड्यूल 🎼 😗 🧦

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

समस्या का विवरण और रूपरेखा का चुनाव

उद्देश्य: निर्भरता प्रबंधन के साथ मावेन परियोजना बनाएं, जिसमें संरचित जेएस कोड और स्थिर मार्कअप, एक टेम्पलेट इंजन, कोड के कुछ हिस्सों का परीक्षण करने की क्षमता अलग से हो। इस तरह के एक मॉड्यूल बनाने का मुख्य विचार यह है कि उपयोगकर्ता को स्टैटिक html और JS फाइल प्रदान करने के लिए, यह nginx या Apache http सर्वर का उपयोग करना बेहतर होता है, जो कि लगभग किसी भी जावा वेब कंटेनर या एप्लिकेशन सर्वर से तेज हैं। असेंबली के बाद आवश्यक फ़ोल्डरों के लिए संसाधनों की स्वचालित प्रतिलिपि बनाना मुश्किल नहीं होगा, लेकिन आपको जावा मॉड्यूल से फ़ाइलों को बाहर करने की आवश्यकता है, जो कि "वन-पेज" साइटों के मामले में REST सेवाओं का उपयोग करना मुश्किल नहीं होगा।

उपलब्ध समाधानों की विविधता का अध्ययन करने के बाद, निम्नलिखित सेट का चयन किया गया जो हमारी आवश्यकताओं को पूरा करता है:

Maven
बैकबोन - संरचित जेएस कोड
आवश्यकताएँ - निर्भरता प्रबंधन
हैंडलबार - टेम्पलेट इंजन
चमेली - परीक्षण करने की क्षमता
जैस्मीन मावेन प्लगइन - जैस्मीन परीक्षण चलाने की क्षमता

आपको इनमें से प्रत्येक ढांचे का विस्तृत विवरण स्वयं पढ़ना होगा, और हम मावेन प्रोजेक्ट बनाकर शुरू करेंगे।

मावेन परियोजना

मावेन हमें परियोजना और निर्देशिका संरचना का वर्णन करने के लिए नियम निर्धारित करता है जिसमें हमारे आवेदन के स्रोत स्थित हैं। एक परियोजना बनाने के लिए, हमें एक pom.xml फ़ाइल बनाने और उस पर प्रोजेक्ट का नाम, संस्करण और अन्य मानक जानकारी जोड़ने की आवश्यकता है। हम पैकेजिंग के लिए युद्ध चुनते हैं, क्योंकि यह हमारे आवेदन का वेब हिस्सा है।

प्रोजेक्ट के बारे में मूलभूत जानकारी के अलावा, बिल्ड सेक्शन में आपको कई प्लगइन्स की घोषणा को जोड़ना होगा:

उपयुक्त बिल्ड चरण में परीक्षण चलाने के लिए, Maven-jasmine-plugin स्वयं, निर्भरता प्रबंधित करने के लिए प्रबंधन के लिए सेटिंग्स के साथ

<plugin> <groupId>com.github.searls</groupId> <artifactId>jasmine-maven-plugin</artifactId> <version>1.2.0.0</version> <extensions>true</extensions> <executions> <execution> <goals> <goal>test</goal> </goals> </execution> </executions> <configuration> <jsSrcDir>${project.basedir}/src/main/webapp/js</jsSrcDir> <jsTestSrcDir>${project.basedir}/src/test/js</jsTestSrcDir> <browserVersion>FIREFOX_3</browserVersion> <!--use require js in specs--> <specRunnerTemplate>REQUIRE_JS</specRunnerTemplate> <preloadSources> <source>libs/jasmine/jasmine-jquery-1.3.1.js</source> </preloadSources> <!--customize path to require.js--> <scriptLoaderPath>libs/require/require.js</scriptLoaderPath> </configuration> </plugin>

maven-war-plugin एक सफल बिल्ड सुनिश्चित करने के लिए जब प्रोजेक्ट में कोई web.xml फ़ाइल नहीं है - वेब मॉड्यूल के लिए मानक आवश्यक जावा विवरण फ़ाइल
```
 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <version>2.1</version> <configuration> <failOnMissingWebXml>false</failOnMissingWebXml> </configuration> </plugin> 
```

सभी एप्लिकेशन संसाधनों के लिए जैस्मीन परीक्षणों की पहुंच प्रदान करने के लिए मावेन-संसाधन-प्लगइन

 <plugin> <artifactId>maven-resources-plugin</artifactId> <executions> <execution> <id>copy-js-files</id> <phase>generate-test-resources</phase> <goals> <goal>copy-resources</goal> </goals> <configuration> <outputDirectory>${project.build.directory}/jasmine</outputDirectory> <resources> <resource> <directory>src/main/webapp</directory> <filtering>false</filtering> </resource> </resources> </configuration> </execution> </executions> </plugin>

परियोजना का वर्णन करने के बाद, आपको वांछित निर्देशिका संरचना बनाने की आवश्यकता है। परिणामस्वरूप मेरी परियोजना के परिणामस्वरूप प्रारूप में निम्नलिखित संरचना है:

 . ├── README.md ├── pom.xml //Maven   └── src //  ( Maven) ├── main //  ( Maven) │  └── webapp //   ( Maven) │  ├── css │  │  ├── bootstrap.css │  │  ├── style.css │  │  └── styles.css │  ├── imgs │  │  └── 334.gif │  ├── index.html //  ( ) │  ├── js │  │  ├── app.js // Backbone  │  │  ├── libs // │  │  │  ├── backbone │  │  │  │  └── backbone-min.js │  │  │  ├── handlebars │  │  │  │  └── handlebars.js │  │  │  ├── jasmine │  │  │  │  └── jasmine-jquery-1.3.1.js │  │  │  ├── jquery │  │  │  │  ├── jquery-min.js │  │  │  │  └── jquery-serialize.js │  │  │  ├── require │  │  │  │  ├── require.js │  │  │  │  └── text.js │  │  │  └── underscore │  │  │  └── underscore-min.js │  │  ├── main.js //  JS -  RequireJS   app.js │  │  ├── router.js //  │  │  └── views //Backbone View  │  │  └── layout │  │  ├── EmptyContent.js │  │  ├── EmptyFooter.js │  │  ├── NavigationHeader.js │  │  └── PageLayoutView.js │  └── templates // html  │  └── layout │  ├── emptyContentTemplate.html │  ├── footerTemplate.html │  ├── navigationTemplate.html │  └── simpleTemplate.html └── test //   ( Maven) └── js //Jasmine  └── layout └── AboutLayout.js

उपरोक्त संरचना में, main.js फ़ाइल शुरू में भरी हुई है, जिसे index.html में एकमात्र लोड करने योग्य स्क्रिप्ट के रूप में घोषित किया गया है। यह स्क्रिप्ट एप्लिकेशन को इनिशियलाइज़ करता है, जो बैकबोन राउटर से शुरू होता है, जो एप्लिकेशन के विभिन्न लिंक पर क्लिक करने पर एप्लिकेशन द्वारा लोड किए गए घटकों को निर्धारित करता है।

बैकबोन + रिक्जेजेएस घटक

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

 //RequireJS   define([ 'jquery', 'underscore', 'backbone', // html   handlebars 'text!templates/layout/emptyContentTemplate.html', //    Handlebars 'handlebars' ], function($, _, Backbone,emptyContentTemplate){ var EmptyContent = Backbone.View.extend({ }); return EmptyContent;

टेम्प्लेट और लेआउट

जैसा कि पिछले स्निपेट में देखा गया था, हैंडलबार्स टेम्पलेट के आधार के रूप में घटक द्वारा उपयोग किए जाने वाले स्थैतिक .html मार्कअप को आवश्यकताएँ के रूप में एक निर्भरता के रूप में पारित किया गया है। मार्कअप में टेम्प्लेट-विशिष्ट सिंटैक्स के इंटरस्पेस होते हैं और कुछ इस तरह दिखता है:

 <div class="item"> <a href="#/description?id={{id}}">{{title}}</a> </div>

यह टेम्प्लेट रेंडरिंग प्रक्रिया के दौरान फुल-मार्क्ड मार्कअप में परिवर्तित हो जाएगा, जिसके लिए उसे एक ऑब्जेक्ट पास करना होगा, जिसमें आईडी और टाइटल पैरामीटर्स के मान होंगे।

चूंकि वर्तमान में मौजूद कोई भी ढांचा लेआउट की अवधारणा प्रदान नहीं करता है, हम अपना स्वयं का परिचय देते हैं और इसे एक पृष्ठ कहते हैं, जो संक्षेप में एक ऐसी वस्तु होगी जो व्यू क्लास का विस्तार करती है और इसमें कई अन्य व्यू की रचना होती है। इस घटक को शुरू करने की विधि में, आपको इनपुट मापदंडों की जांच करने की आवश्यकता होगी, और यदि कोई भी अभ्यावेदन निरस्त है, तो पैरामीटर के रूप में पारित वर्ग के एक उदाहरण का उपयोग करें, और डिफ़ॉल्ट एक नहीं।

 define([ 'jquery', 'underscore', 'backbone', 'views/layout/NavigationHeader', 'views/layout/EmptyContent', 'views/layout/EmptyFooter', 'text!templates/layout/simpleTemplate.html' , 'handlebars' ], function($, _, Backbone,NavigationHeader,EmptyContent,EmptyFooter,simpleTemplate){ var PageLayoutView = Backbone.View.extend({ template : Handlebars.compile(simpleTemplate), //defaults to NavigationHeader view function headerContent : NavigationHeader, //defaults to EmptyContent view function mainContent : EmptyContent, //defaults to EmptyFooter view function footerContent : EmptyFooter, initialize : function(options) { //instantiate appropriate views based on component functions if (options.mainContent != undefined && options.mainContent != null) { this.mainContent = options.mainContent; } if (options.headerContent != undefined && options.headerContent != null) { this.headerContent = options.headerContent; } if (options.footerContent != undefined && options.footerContent != null) { this.footerContent = options.footerContent; } }, render: function(){ //compile handlebars template with appropriate markup of components var html = this.template(); //append appropriate content to root element right away after compilation $(this.el).html(html); this.headerView = new this.headerContent({el : '#header'}); this.mainView = new this.mainContent({el : '#mian'}); this.footerView = new this.footerContent({el : '#footer'}); this.headerView.render(); this.mainView.render(); this.footerView.render(); return this; } }); return PageLayoutView; });

परीक्षण

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

स्क्रिप्ट के मानक विवरण में मुझे केवल एक चीज को बदलना था, कंसोल में एक स्टब जोड़ रहा था, क्योंकि HtmlUnit, जिसमें परीक्षण कोड चलाया जाएगा, इसका समर्थन नहीं करता है।

संदर्भ

परियोजना के स्रोत और मसौदे यहां से लिए जा सकते हैं ।

इस प्रक्रिया में, निम्नलिखित सामग्रियों का उपयोग किया गया था: