🧒🏻 😅 👩🏾‍🤝‍👨🏽 ASP.NET के साथ एक्स्ट्रीम जेएस और स्नेहा टच एप्लिकेशन को न्यूनतम करना 🔊 🤡 🏇

यदि आप ASP.NET MVC के साथ संयोजन में ExtJS वेब एप्लिकेशन लिखते हैं और स्रोत फ़ाइलों को छोटा करना चाहते हैं, लेकिन किसी कारण से आप इसके लिए मानक SenchaCmd का उपयोग करना पसंद नहीं करते हैं, तो बिल्ली का स्वागत है। उन लोगों के लिए जिनके पास समय नहीं है और पहले से ही प्रयास करना चाहते हैं, लेख के अंत में पुस्तकालय के लिए लिंक हैं, लेकिन अब हम यह पता लगाने की कोशिश करेंगे कि समस्या क्या है और अपने आप पर इस तरह के एक मिनिफ़ायर लिखें।

परिणाम क्या होगा

public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add( new SenchaBundle("~/bundles/my-sencha-app") .IncludeDirectory("~/Scripts/my-sencha-app", "*.js", true) ); } }

पहचान

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

पहली बात जो मन में आती है वह है स्नेहाकैम का उपयोग करना - एक उत्पाद जिसे सेंचहा टीम द्वारा अनुशंसित किया जाता है। वह index.html फ़ाइल या एप्लिकेशन URL फ़ीड कर सकता है, वह आज्ञाकारी रूप से पृष्ठ लेगा और ट्रैक करेगा कि किस क्रम में स्रोत डाउनलोड किए गए थे, फिर वह इसे मिनीफ़ायर को दे देगा, और आउटपुट में आपको वह मिलेगा जो आप चाहते थे।

असुविधा क्या है? राय यहाँ भिन्न हो सकती है, लेकिन SenchaCmd फ़ाइलों को संपीड़ित करने के लिए IMHO थोड़ा भारी है। इस प्रक्रिया में जावा एप्लिकेशन, नोडज और फैंटमज शामिल हैं। सिद्धांत रूप में, सर्वर पर अपलोड करने से पहले इस तरह के दुर्लभ संचालन के लिए, यह काम कर सकता है, लेकिन अभी भी बारीकियां हैं। उदाहरण के लिए, Index.cshtml जिसे आपने उसे नहीं दिया है: रेज़र मार्कअप वाले अनुभाग समझ में नहीं आएंगे। आप एप्लिकेशन का URL दे सकते हैं, लेकिन यदि आप पास होने से पहले प्रमाणीकरण का उपयोग करते हैं, जिसमें संपूर्ण एप्लिकेशन डाउनलोड नहीं किया गया है, तो सभी स्रोत मिनी फ़ाइल में नहीं होंगे। और विंडोज प्रमाणीकरण के मामले में, सामान्य तौर पर, सब कुछ खराब है ।

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

चलिए शुरू करते हैं

ASP.NET स्टैक में पहले से ही अवस्थापना और खनन के लिए एक उपकरण है - बंडल्स । उसे केवल थोड़ी मदद की जरूरत है - अर्थात्, स्रोत को गोंद करने के लिए किस क्रम में बताना है।

BundleConfig.cs

 public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add( new ScriptBundle("~/bundles/my-sencha-app") { Orderer = // ? } .IncludeDirectory("~/Scripts/my-sencha-app", "*.js", true); ); } }

आपको क्या चाहिए! आइए एक नज़र डालते हैं ऑर्डरर पर।

IBundleOrderer

 public interface IBundleOrderer { IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files); }

इनपुट पर, आउटपुट पर फ़ाइलों का एक संग्रह - भी, केवल सॉर्ट किया गया। आइए विचार करें कि उन्हें कैसे व्यवस्थित किया जाए। ExtJS निर्भरता को परिभाषित करने के कई तरीके हैं।

स्पष्ट:

Ext.require के माध्यम से कोड में मैन्युअल रूप से
आवश्यकता वर्ग की विन्यास संपत्ति के माध्यम से

निहित (केवल कॉन्फ़िगरेशन गुण):

जब विरासत - विस्तार
अशुद्धियों को निर्दिष्ट करते समय - मिश्रण
भंडारण मॉडल निर्दिष्ट करते समय - मॉडल
जब दृश्य, मॉडल और नियंत्रक भंडारण को निर्दिष्ट करते हैं - विचार , मॉडल , स्टोर
अनुप्रयोग नियंत्रकों को निर्दिष्ट करते समय - नियंत्रक
स्वचालित रूप से व्यूपोर्ट - autoCreateViewport बनाते समय: सच

पहले मामले के लिए, हमें शिकायत नहीं होगी - कोड में कोड का मतलब है। बाकी विश्लेषण के लिए काफी सौहार्दपूर्ण हैं।

कार्यक्रम की संरचना पर निर्णय लें। शुरुआत के लिए, हमारे पास एक जेएस फाइल है। इसके अंदर कई वर्ग हो सकते हैं, जिनमें से प्रत्येक की अन्य कक्षाओं पर निर्भरता हो सकती है:

SenchaFile.cs

 public class SenchaFile { /// <summary> ///    /// </summary> public IEnumerable<SenchaClass> Classes { get; set; } /// <summary> ///   /// </summary> public virtual IEnumerable<SenchaFile> Dependencies { get; set; } }

SenchaClass.cs

 public class SenchaClass { /// <summary> ///   /// </summary> public string ClassName { get; set; } /// <summary> ///   /// </summary> public IEnumerable<string> DependencyClassNames { get; set; } }

अब आपको किसी तरह यह निर्धारित करने की आवश्यकता है कि कौन सी कक्षाएं फाइलों में वर्णित हैं। आप उदाहरण के लिए नियमित रूप से खोज सकते हैं, लेकिन मैं बाद में इस कौशल को स्थगित कर दूंगा। खासकर जब से हमारे पास Microsoft.Ajax.Utilities से JSParser है। यह जेएस फ़ाइल की सामग्री को ब्लॉक के पेड़ के रूप में देता है, जिनमें से प्रत्येक हो सकता है, उदाहरण के लिए, एक फ़ंक्शन कॉल, एक संपत्ति कॉल, आदि। आइए देखें कि फ़ाइल में एप्लिकेशन इंस्टेंसेस कहाँ बनाए गए हैं (Ext.application), कक्षाएं परिभाषित हैं या फिर से परिभाषित की गई हैं (Ext.define, Ext.override):

SenchaFile.cs

 public class SenchaFile { // .. /// <summary> ///  ,    /// </summary> protected virtual IEnumerable<SenchaClass> GetClasses() { var extApps = this.RootBlock.OfType<CallNode>() .Where(cn => cn.Children.Any()) .Where(cn => cn.Children.First().Context.Code == "Ext.application") .Select(cn => cn.Arguments.OfType<ObjectLiteral>().First()) .Select(arg => new SenchaClass(arg) { IsApplication = true }); var extDefines = this.RootBlock.OfType<CallNode>() .Where(cn => cn.Arguments.OfType<ConstantWrapper>().Any()) .Where(cn => cn.Arguments.OfType<ObjectLiteral>().Any()) .Where(cn => { var code = cn.Children.First().Context.Code; return code == "Ext.define" || code == "Ext.override"; }) .Select(cn => { var className = cn.Arguments.OfType<ConstantWrapper>().First().Value.ToString(); var config = cn.Arguments.OfType<ObjectLiteral>().First(); return new SenchaClass(config) { ClassName = className }; }); foreach (var cls in extApps.Union(extDefines)) { yield return cls; } } }

अगला चरण प्रत्येक वर्ग की निर्भरता निर्धारित करना है। ऐसा करने के लिए, समान JSParser लें और ऊपर वर्णित निर्भरता निर्धारण (स्पष्ट और अंतर्निहित) के सभी मामलों से गुजरें। मैं लेख को डाउनलोड नहीं करने के लिए कोड नहीं दूंगा, लेकिन सार समान है: हम आवश्यक गुणों की तलाश में ब्लॉक ट्री के माध्यम से सॉर्ट करते हैं और उपयोग किए गए वर्गों के नामों का चयन करते हैं।

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

SenchaOrderer.cs

 public class SenchaOrderer { /// <summary> ///     /// </summary> /// <param name="node">,   </param> /// <param name="resolved">    </param> protected virtual void DependencyResolve<TNode>(TNode node, IList<TNode> resolved) where TNode: SenchaFile { //        node.Color = SenchaFile.SortColor.Gray; //     foreach (TNode dependency in node.Dependencies) { //        ( ),   if (dependency.Color == SenchaFile.SortColor.White) { DependencyResolve(dependency, resolved); } //    (),   :    else if (dependency.Color == SenchaFile.SortColor.Gray) { throw new InvalidOperationException(String.Format( "Circular dependency detected: '{0}' -> '{1}'", node.FullName ?? String.Empty, dependency.FullName ?? String.Empty) ); } } //  ,    ... //        ,      . node.Color = SenchaFile.SortColor.Black; resolved.Add(node); } /// <summary> ///      /// </summary> /// <param name="files">  </param> /// <returns>  SenchaFileInfo</returns> public virtual IEnumerable<TNode> OrderFiles<TNode>(IEnumerable<TNode> files) where TNode: SenchaFile { var filelist = files.ToList(); //        IList<TNode> unresolved = filelist; IList<TNode> resolved = new List<TNode>(); TNode startNode = unresolved .Where(ef => ef.Color == SenchaFile.SortColor.White) .FirstOrDefault(); while (startNode != null) { DependencyResolve(startNode, resolved); startNode = unresolved .Where(ef => ef.Color == SenchaFile.SortColor.White) .FirstOrDefault(); } return resolved; } }

बस इतना ही। सेवा फ़ाइलों की एक जोड़ी और आप उपयोग कर सकते हैं:

BundleConfig.cs

 public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add( new SenchaBundle("~/bundles/my-sencha-app") .IncludeDirectory("~/Scripts/my-sencha-app", "*.js", true) ); } }

Index.cshtml

 ... <script src="@Url.Content("~/bundles/my-sencha-app")" type="text/javascript"></script>

कुल मिलाकर

ऐसे फैसले के क्या फायदे हैं? मुझे लगता है कि यह स्पष्ट है: ASP.NET फ्रेमवर्क द्वारा प्रदान की गई मानक कार्यक्षमता का उपयोग करें। नुकसान क्या हैं? उनके पास भी है:

फ़ाइलों के खनन के दौरान वेब एप्लिकेशन की शुरुआत में कुछ देरी होती है।
एल्गोरिथ्म कोड लिखने के लिए संवेदनशील है, उदाहरण के लिए, autoCreateViewport: सच यह समझ में आ जाएगा, और autoCreatViewViewport:! 0 - अब (बिना dopilivaniya)।
ExtJS या SenchaTouch एप्लिकेशन को एक Ext.application कॉल के माध्यम से सख्ती से बनाया जाना चाहिए।

इस तरह के एक मिनिफायर का उपयोग कई परियोजनाओं में किया जाता है, जिनमें से एक अजीब फ़ाइल संरचना है। असल में, इसे जोड़ने के बाद, वे बिना किसी समस्या के शुरू हो गए, लेकिन उस अजीब तरीके से मुझे स्पेगेटी निर्भरता को दूर करने के लिए स्रोतों को थोड़ा मोड़ना पड़ा।

प्रयास करना

NuGet। SenchaMinify पैकेज ।
डेमो के साथ GitHub प्रोजेक्ट ।

Github में कमांड लाइन ( SenchaMinify.Cmd ) के लिए एक स्टैंडअलोन exe फ़ाइल भी शामिल थी। तो जो लोग अपने पसंदीदा स्वचालन उपकरण का उपयोग कर सकते हैं।

मुझे रचनात्मक विचारों या अनुरोधों को खींचने में खुशी होगी।

ASP.NET के साथ एक्स्ट्रीम जेएस और स्नेहा टच एप्लिकेशन को न्यूनतम करना

पहचान

चलिए शुरू करते हैं

कुल मिलाकर

प्रयास करना

More articles: