जावास्क्रिप्ट

Question

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

मैं कुछ कुछ चल रहा है कोड उदाहरण के साथ इस प्रतिमान को समझने में मदद के लिए देख रहा हूँ jsfiddle आदि

यह पैटर्न पुस्तक पृष्ठों से समझाया गया है 14 पर हो सकता है - 22, मुख्य बिंदु मैं समझ नहीं कर रहा हूँ है कहाँ और कैसे "एडफॉर्म" विधि कहा जाता है। या यदि कोई परिणाम कुछ परीक्षण डेटा और ऑब्जेक्ट के साथ परिणामफॉर्मर उदाहरण को पूरा कर सकता है तो यह पैटर्न को समझने में वास्तव में बहुत उपयोगी होगा।

पुस्तक के लिए कोड "प्रो जावास्क्रिप्ट डिजाइन पैटर्न" http://jsdesignpatterns.com/ से डाउनलोड किया जा सकता है और इस अध्याय 2.

है

मदद के लिए धन्यवाद !!

Answer 1

मैं पैटर्न भिन्न तरीकों से लागू देखा है, लेकिन विचार सरल है:

1. आप कुछ वर्ग है - अपने इंटरफ़ेस - कि बस कुछ कार्यों के नाम निर्दिष्ट करता है। (आप इंटरफ़ेस नामक एक कक्षा चाहते हैं, जो आपके वास्तविक इंटरफेस तत्काल हो, बस आपके इंटरफेस इंटरफ़ेस प्रकार हैं)
2. आपके पास ऐसे अन्य इंटरफ़ेस हैं जो इस तरह के इंटरफ़ेस को लागू करते हैं। इसका मतलब यह है कि इस द्वितीय श्रेणी में इंटरफ़ेस द्वारा निर्दिष्ट कम से कम सभी फ़ंक्शन होना चाहिए।
3. अंत में, आपके पास कहीं और कुछ फ़ंक्शन है, जो इंटरफ़ेस लागू करने वाली ऑब्जेक्ट प्राप्त करने की अपेक्षा करता है। नमूना कोड में आप उल्लेख करते हैं, यह फ़ंक्शन addForm है, जो किसी ऑब्जेक्ट की अपेक्षा करता है जो 'समग्र' और 'FormItem' इंटरफेस लागू करता है।
4. यह फ़ंक्शन तब इंटरफ़ेस की सभी विधियों के माध्यम से लूप करता है, और यह जांचता है कि जिस ऑब्जेक्ट में आपने पास किया है, उसमें भी वे विधियां हैं। यदि फ़ंक्शन में पारित ऑब्जेक्ट में इंटरफ़ेस में से कोई एक विधि नहीं मिली है, तो यह निर्धारित करता है कि ऑब्जेक्ट इंटरफ़ेस को लागू नहीं करता है, और अपवाद फेंकता है।

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

उदाहरण

var Interface = function(name, methods) { 
    this.name = name; 
    this.methods = []; 

    if (methods.constructor == Array) 
     this.methods = methods; 
    else if (methods.constructor == String) 
     this.methods[0] = methods; 
    else 
     throw new Error("Interface must define methods as a String or an Array of Strings"); 
}; 

var InterfaceHelper = { 
    ensureImplements : function(obj, interfaces) { 
     // If interfaces is not an array, assume it's a function pointer 
     var toImplement = interfaces.constructor == Array ? interfaces : [interfaces]; 
     var interface; 

     // For every interface that obj must implement: 
     for (var i = 0, len = toImplement.length; i < len; i++) { 
      interface = toImplement[i]; 

      // Make sure it indeed is an interface 
      if (interface.constructor != Interface) 
      throw new Error("Object trying to implement a non-interface. " 
      + interface.name + " is not an Interface."); 

      // Make sure obj has all of the methods described in the interface 
      for (var j = 0, interfaceLen = interface.methods.length; j < interfaceLen; j++) 
      if (!obj[interface.methods[j]]) 
       throw new Error("Interface method not implemented. " 
       + interface.name + " defines method " + interface.methods[j]); 
     } 

     return true; 
    } 
}; 

var Drawable = new Interface("Drawable", ["onDraw"]); 

var Surface = function() { 
    this.implements = ["Drawable"]; 

    this.onDraw = function() { 
     console.log("Surface Drawing"); 
    }; 
}; 

प्रयोग

var myDrawableSurface = new Surface(); 

// Returns true 
InterfaceHelper.ensureImplements(myDrawableSurface, Drawable); 

// Returns false (Error thrown) 
InterfaceHelper.ensureImplements(myDrawableSurface, Array); 

Answer 2

पुस्तक उदाहरण पूर्ण और यहाँ काम jsfiddle है, -

var Interface = function(name, methods) { 
    if (arguments.length != 2) { 
     throw new Error("Interface constructor called with " + arguments.length + "arguments, but expected exactly 2."); 
    } 

    this.name = name; 
    this.methods = []; 

    for (var i = 0, len = methods.length; i < len; i++) { 
     if (typeof methods[i] !== 'string') { 
      throw new Error("Interface constructor expects method names to be " + "passed in as a string."); 
     } 

     this.methods.push(methods[i]); 
    } 
}; 

// Static class method. 
Interface.ensureImplements = function(object) { 
    if (arguments.length < 2) { 
     throw new Error("Function Interface.ensureImplements called with " + arguments.length + "arguments, but expected at least 2."); 
    } 

    for (var i = 1, len = arguments.length; i < len; i++) { 
     var interface = arguments[i]; 

     if (interface.constructor !== Interface) { 
      throw new Error("Function Interface.ensureImplements expects arguments" + "two and above to be instances of Interface."); 
     } 

     for (var j = 0, methodsLen = interface.methods.length; j < methodsLen; j++) { 
      var method = interface.methods[j]; 

      if (!object[method] || typeof object[method] !== 'function') { 
       throw new Error("Function Interface.ensureImplements: object " + "does not implement the " + interface.name + " interface. Method " + method + " was not found."); 
      } 
     } 
    } 
}; 

function Map() {} 

Map.prototype.centerOnPoint = function(x,y) { 
    alert('center=> x: ' + x + ', y: ' + y); 
}; 

Map.prototype.zoom = function(x){ 
    alert('zoom : ' + x); 
} 

Map.prototype.draw = function(){ 
    alert('draw'); 
}; 

var map = new Map(); 
var DynamicMap = new Interface('DynamicMap', ['centerOnPoint', 'zoom', 'draw']); 

function displayRoute(mapInstance) { 
    Interface.ensureImplements(mapInstance, DynamicMap); 
    mapInstance.centerOnPoint(12, 34); 
    mapInstance.zoom(5); 
    mapInstance.draw(); 
} 

displayRoute(map);​ 

Answer 3

ES6 जोड़ा गया है syntacti भाषा में कैल चीनी। नीचे एक ही उदाहरण के ES6 कार्यान्वयन है।

class Interface { 
 
    constructor(name, methods) { 
 
     if (arguments.length < 2) { 
 
      throw new Error('An Interface expects atleast 2 arguments ' + arguments.length 
 
       + ' arguments passed') 
 
      
 
     } 
 
     this.name = name 
 
     this.methods = [] 
 
     methods.forEach(method => { 
 
      if (typeof method !== 'string') { 
 
       throw new Error('Interface expects all the method names to be passed as as a string ' + 
 
        method + ' is a ' + typeof method) 
 
      } 
 
      this.methods.push(method) 
 
     }, this); 
 
    } 
 

 
    static ensureImplements(object) { 
 
     if(arguments.length < 2) { 
 
      throw new Error("Function Interface.ensureImplements called with " + 
 
       arguments.length + "arguments, but expected at least 2.") 
 
     } 
 

 
     for (let i = 1, len=arguments.length; i < len; i++) { 
 
      const interf = arguments[i] 
 
      if(interf.constructor !== Interface) { 
 
       throw new Error('Function expects arguments two or above to be instaces of Interface') 
 
      } 
 

 
      for(let j = 0, methodsLen = interf.methods.length; j < methodsLen; j++) { 
 
       const method = interf.methods[j] 
 
       if(!object[method] || !typeof object[method] === 'function') { 
 
        throw new Error('Does not implement the method the interface' + interf.name + 'Interface.Method ' 
 
        + method + ' not found') 
 
       } 
 
      } 
 
     } 
 
    } 
 
} 
 

 
const DynamicMap = new Interface('DynamicMap', ['centerOnPoint', 'zoom', 'draw']) 
 

 
class Map { 
 
    constructor() { 
 
     Interface.ensureImplements(this, DynamicMap) 
 
    } 
 
    centerOnPoint() { 
 
     console.log('Moving to center') 
 
    } 
 
    zoom() { 
 
     console.log('Zooming in') 
 
    } 
 

 
    draw() { 
 
     console.log('Drawing map') 
 
    } 
 
} 
 

 
const mapInstance = new Map()

Map कक्षा में तरीकों को हटाने के द्वारा कोड के साथ चारों ओर खेलने की कोशिश। आशा है कि यह ओप्स पृष्ठभूमि से आने वाले लोगों के लिए बेहतर बताता है