2012-11-29 34 views
5

में ठीक से मिश्रित मिश्रण का उपयोग कैसे करें मैं एक छोटा उद्यम अनुप्रयोग आयोजित कर रहा हूं लेकिन जितना संभव हो उतना डीआरवाई होना चाहता हूं। नतीजतन, मैं mixin पुस्तकालयों को देख रहा हूँ।जावास्क्रिप्ट

मैं इस library पर आया और सोचा कि यह एक अच्छा विकल्प हो सकता है क्योंकि यह आपको रन टाइम पर मिश्रण और बाहर करने की अनुमति देता है। इसके अलावा, उदाहरण के लिए, मेरे पास सिर्फ एक बेस क्लास (बेसव्यू) हो सकता है और बस उस से मिश्रण करें।

प्रश्न

  1. उपयोगी mixins के कुछ वास्तविक आवेदन उदाहरण क्या हैं? (कृपया कोई और अमूर्त उदाहरण नहीं)
  2. क्या मुझे कक्षाओं का विस्तार करने की भी आवश्यकता है या क्या मैं इस एक्सटेंशन का उपयोग सभी एक्सटेंशन और मिश्रणों को प्रबंधित करने के लिए कर सकता हूं?

उत्तर

2

मिश्रण कोड और विरासत को व्यवस्थित करने के तरीके के बारे में एक अलग वैचारिक विचार है। आप निश्चित रूप से इसे शास्त्रीय या प्रोटोटाइप विरासत का उपयोग करके संयोजित कर सकते हैं, लेकिन यह बोलने के लिए स्टैंड-अलोन भी काम करता है।

उदाहरण के लिए, बजाय बनाने की "नियुक्त" वस्तु गुण/लुकअप (जैसे मूलरूप विरासत), हम करेंगे वास्तव में "रूप" नए स्टैंड-अलोन वस्तुओं, कई अन्य वस्तुओं से। इसे "एकाधिक विरासत" भी कहा जाता है और कभी-कभी जावास्क्रिप्ट प्रोटोटाइप विरासत के साथ आसानी से हासिल नहीं किया जा सकता है।

एक उदाहरण के रूप:

var pianist = { 
    play: function() {} 
}; 

var programmner: { 
    code: function() {} 
}; 

और अब हम जैसे

var Jim = Object.create(null); // create a fully self-defining object 

extend(Jim, pianist); 
extend(Jim, programmer); 

, एक और वस्तु बना सकते हैं और इस छद्म extend विधि (ES5) दिखाई देगा:

function extend(target, source) { 
    Object.getOwnPropertyNames(source).forEach(function(key) { 
     Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)) }); 

    return target 
} 

मैंने वास्तव में आपके प्रश्नों का सही उत्तर नहीं दिया, लेकिन मुझे लगा जैसे आपके प्रश्न का कोई वास्तविक जवाब नहीं है। यह उतना ही वास्तविक है जितना आप इसका उपयोग करने जा रहे हैं, वास्तव में कोई "एप्लिकेशन विशिष्ट" उपयोग केस नहीं है।

1

हम Cocktail नामक एक मिश्रण लाइब्रेरी का उपयोग करते हैं (मिश्रण ... इसे प्राप्त करें?)। यह विशेष रूप से बैकबोन ऐप्स में उपयोग के लिए है, लेकिन यह काफी अच्छा है।

हमारे पास written up details on our usage patterns है जो मुझे बेहतर वर्णन करने से बेहतर काम करता है।

3

कृपया यह भी देखें:

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

प्रश्न

  • 1) उपयोगी मिक्सिन के कुछ वास्तविक अनुप्रयोग उदाहरण क्या हैं? (कृपया कोई और अमूर्त उदाहरण नहीं)
  • 2) क्या मुझे कक्षाओं का विस्तार करने की भी आवश्यकता है या क्या मैं इस एक्सटेंशन का उपयोग सभी एक्सटेंशन और मिश्रणों को प्रबंधित करने के लिए कर सकता हूं?

अपने 2 प्रश्नों का उत्तर देना ...

1) [Observable] शायद mixins के लिए सबसे आम असली दुनिया उदाहरणों में से एक है। लेकिन यह अपना संपूर्ण कोड बेस प्रदान करने के लिए सही जगह नहीं है। Smart Talents chapter के लगातार बढ़ते उदाहरण [Queue] फैक्ट्री के कामकाजी कार्यान्वयन प्रदान करते हैं जो शुरुआत में मिक्सिन जैसे [Enumerable] और [Allocable] का उपयोग करता है लेकिन अंततः पहले से ही [Observable] पर लागू होता है।

2) बस अपनी पसंद के मॉड्यूल सिस्टम या आवश्यकता का उपयोग करें - CommonJS or AMD। आपके फैक्ट्री मॉड्यूल या यहां तक ​​कि उदाहरण/ऑब्जेक्ट्स प्रतिनिधिमंडल द्वारा अतिरिक्त व्यवहार पुनर्प्राप्त करते हैं; इस प्रकार वे सक्रिय रूप से call/applyमिक्सिन या विशेषता मॉड्यूल सक्रिय रूप से करते हैं।

अंत में - छोटा उदाहरण कोड:

var Observable_SignalsAndSlots = (function() { 
 

 
    var 
 
    Event = function (target, type) { 
 

 
     this.target = target; 
 
     this.type = type; 
 
    }, 
 

 
    EventListener = function (target, type, handler) { 
 

 
     var defaultEvent = new Event(target, type); 
 

 
     this.handleEvent = function (evt) { 
 
     /* ... */ 
 
     }; 
 
     this.getType = function() { 
 
     return type; 
 
     }; 
 
     this.getHandler = function() { 
 
     return handler; 
 
     }; 
 
    }, 
 

 
    EventTargetMixin = function() { 
 

 
     var eventMap = {}; 
 

 
     this.addEventListener = function (type, handler) { 
 
     /* ... */ 
 
     }; 
 
     this.dispatchEvent = function (evt) { 
 
     /* ... */ 
 
     }; 
 
    } 
 
    ; 
 

 
    return EventTargetMixin; 
 

 
}).call(null); 
 

 

 
var Queue = (function() { 
 

 
    var 
 
    global = this, 
 

 
    Observable = global.Observable_SignalsAndSlots, 
 
    //Allocable = global.Allocable, 
 

 
    Queue, 
 

 
    onEnqueue = function (queue, type) { 
 
     queue.dispatchEvent({type: "enqueue", item: type}); 
 
    }, 
 
    onDequeue = function (queue, type) { 
 
     queue.dispatchEvent({type: "dequeue", item: type}); 
 
    }, 
 
    onEmpty = function (queue) { 
 
     queue.dispatchEvent("empty"); 
 
    } 
 
    ; 
 

 
    Queue = function() { // implementing the [Queue] Constructor. 
 
    var 
 
     queue = this, 
 
     list = [] 
 
    ; 
 
    queue.enqueue = function (type) { 
 

 
     list.push(type); 
 
     onEnqueue(queue, type); 
 

 
     return type; 
 
    }; 
 
    queue.dequeue = function() { 
 

 
     var type = list.shift(); 
 
     onDequeue(queue, type); 
 

 
     (list.length || onEmpty(queue)); 
 

 
     return type; 
 
    }; 
 
    Observable.call(queue); 
 
    //Allocable.call(queue, list); 
 
    }; 
 

 
    return Queue; 
 

 
}).call(null); 
 

 

 
var q = new Queue; 
 

 
q.addEventListener("enqueue", function (evt) {console.log("enqueue", evt);}); 
 
q.addEventListener("dequeue", function (evt) {console.log("dequeue", evt);}); 
 
q.addEventListener("empty", function (evt) {console.log("empty", evt);}); 
 

 
console.log("q.addEventListener : ", q.addEventListener); 
 
console.log("q.dispatchEvent : ", q.dispatchEvent); 
 

 
console.log("q.enqueue('the') ... ", q.enqueue('the'));  // "enqueue" Object {type: "enqueue", item: "the", target: Queue} 
 
console.log("q.enqueue('quick') ... ", q.enqueue('quick')); // "enqueue" Object {type: "enqueue", item: "quick", target: Queue} 
 
console.log("q.enqueue('brown') ... ", q.enqueue('brown')); // "enqueue" Object {type: "enqueue", item: "brown", target: Queue} 
 
console.log("q.enqueue('fox') ... ", q.enqueue('fox'));  // "enqueue" Object {type: "enqueue", item: "fox", target: Queue} 
 

 
console.log("q.dequeue() ... ", q.dequeue()); // "dequeue" Object {type: "dequeue", item: "the", target: Queue} 
 
console.log("q.dequeue() ... ", q.dequeue()); // "dequeue" Object {type: "dequeue", item: "quick", target: Queue} 
 
console.log("q.dequeue() ... ", q.dequeue()); // "dequeue" Object {type: "dequeue", item: "brown", target: Queue} 
 
console.log("q.dequeue() ... ", q.dequeue()); // "dequeue" Object {type: "dequeue", item: "fox", target: Queue} 
 
               // "empty" Object {target: Queue, type: "empty"} 
 
console.log("q.dequeue() ... ", q.dequeue()); // "dequeue" Object {type: "dequeue", item: undefined, target: Queue} 
 
               // "empty" Object {target: Queue, type: "empty"}
.as-console-wrapper { max-height: 100%!important; top: 0; }

संबंधित मुद्दे