AtomJS - लघु जावास्क्रिप्ट ढांचा

सभी को नमस्कार! दूसरा भाग एटम मिनिएचर जावास्क्रिप्ट फ्रेमवर्क ( पूर्व में नैनो ) के बारे में है।

अब सब कुछ अतिरेक कोर से हटा दिया गया है, वजन - 1 केबी।

पहले की तरह - पुराने ब्राउज़र की पूरी अस्वीकृति।

डोम, क्लास, अजाक्स, आदि। - प्लगइन्स के रूप में कनेक्ट करें।

रिपॉजिटरी का पता बदल गया है: github.com/theshock/atomjs

कटौती के तहत - मैं आपको बताता हूं कि नया क्या है और प्लगइन्स कैसे बनाएं, इसका वर्णन करें





गीथहब पर एक अधिक विस्तृत एपि है

कोर

कोर में केवल सबसे छोटी चीज बनी हुई है - फ्रेमवर्क का विस्तार करने के लिए एक उपकरण, जावास्क्रिप्ट 1.8.5 के साथ संगतता के लिए कुछ उपयोगी तरीके और प्रोटोटाइप एक्सटेंशन।

atom.extend, atom.implement

atom.extend



ऑब्जेक्ट्स और स्वयं परमाणु का विस्तार करने की अनुमति देता है।

atom.implement



तत्वों और परमाणुओं के प्रोटोटाइप का विस्तार करने की अनुमति देता है

ये प्लगइन्स लिखने के लिए उपयोग की जाने वाली विधियाँ हैं।



वर्तमान में डोम ला JQuery के साथ काम करने के लिए एक प्लग-इन है, MooTools में एक के समान कक्षाएं बनाने के लिए एक प्लग-इन और अजाक्स प्लग-इन का एक सेट



पिछले विषय के बाद से डोम प्लगइन बहुत नहीं बदला है, इसलिए मैं इसका वर्णन नहीं करूंगा, और अजाक्स प्लगइन को नीचे वर्णित किया जाएगा, एक उदाहरण प्लगइन के रूप में

Atom.Plugins.Class

क्लास प्लगइन MooTools में एक की तरह एक सा है

सरल वर्ग निर्माण और विरासत काफी सरल है:

 var Animal = atom.Class({ constructor : function (name) { this.name = name; this.log('Animal.constructor'); }, walk : function () { this.log('Animal.walk'); }, //       _name : 'default', set name (name) { this._name = name || 'anonymous'; }, get name () { return this._name; } }); var Dog = atom.Class(Animal, { constructor : function (name, breed) { this.parent(name); this.breed = breed; this.log('Dog.constructor'); }, bark : function () { return this.log('Dog.bark'); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

लेकिन आप एक वर्ग नहीं, बल्कि एक वर्ग कारखाना बना सकते हैं, जो स्थैतिक गुणों और अशुद्धियों के साथ इसका विस्तार कर सकता है:

 var AnimalFactory = atom.Factory({ constructor : function (name, breed) { this.name = name; alert(this.self.staticProperty) } }).extend({ staticProperty : 123 }).mixin(MixClass1, MixClass2); var animal = AnimalFactory.produce(['name', 'breed']);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

कारखाना वर्ग से प्राप्त किया जा सकता है, और कारखाने से वर्ग:

 var AnimalFactory = atom.Factory({}); var Animal = AnimalFactory.get(); Animal.factory == AnimalFactory;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

सामान्य तौर पर, सामान्य कक्षाएं जैसे कि जावास्क्रिप्ट

एक प्लगइन बनाना, प्रोटोटाइप का विस्तार करना

इसलिए, एम्बेडेड ऑब्जेक्ट्स के प्रोटोटाइप का विस्तार करना अक्सर आवश्यक होता है। चलो जोड़कर मानक ऐरे के प्रोटोटाइप का विस्तार करते हैं, यदि पहले से ही नहीं है, तो, स्थलाकृतिक, मानचित्र, और स्थिर संपत्ति के बराबर करें:

 // safe            atom.implement(Array, 'safe', { forEach : function (fn) { for (var i = 0, l = this.length; i < l; i++) if (i in this) { fn(this[i], i); } return this; }, map : function (fn) { var arr = []; for (var i = 0, l = this.length; i < l; i++) if (i in this) { arr[i] = fn(this[i], i); } return arr; }, //    ,        get isEmpty () { return !this.length; } }); atom.extend(Array, 'safe', { toArray : function () { return Array.prototype.slice.call(elem); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

एक पूर्ण परमाणु प्लग-इन बनाना

 (function () { //      . //  true     atom.plugins['ajax'] = true; //   atom.ajax(config) var ajax = function (userConfig) { //  - var config = atom.extend({ interval : 0, type : 'plain', method : 'post', url : location.href, onLoad : function(){}, onError : function(){} }, userConfig); //   ,      ? var req = new XMLHttpRequest(); req.onreadystatechange = ajax.onready; req.open(config.method.toUpperCase(), config.url, true); req.send(null); }; //     //        ajax.onready = function (e) { if (req.readyState == 4) { if (req.status != 200) return config.onError(e); var result = req.responseText; if (config.type.toLowerCase() == 'json') { result = JSON.parse(result); } if (config.interval > 0) setTimeout(function () { atom.ajax(config); }, config.interval * 1000); config.onLoad(result); }; }; //    Atom atom.extend({ ajax : ajax }); })();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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

 //    Atom atom.extend({ ajax : ajax }); //     Dom if (atom.plugins['dom']) { //      atom.implement({ ajax : function (config) { config = extend({}, config); //  ,  ,   , //      atom() atom.ajax(extend(config, { //       //      onLoad : (config.onLoad || function (res) { this.get().innerHTML = res; }).bind(this), onError : (config.onError || function(){}).bind(this) })); return this; } }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

जैसा कि आप देख सकते हैं, कुछ भी जटिल नहीं है)

पुनश्च

मैं सुझाव, विचारों के लिए खुला हूं, कमिट करता हूं) मैं खुद इस ढांचे के विकास को नहीं खींचूंगा, लेकिन अगर समुदाय इसका समर्थन करता है, तो मुझे खुशी होगी।