jQuery

Question

के साथ एक साधारण जावास्क्रिप्ट क्लास बनाना I jQuery वर्गों को समझने की कोशिश कर रहा हूं लेकिन यह बहुत अच्छा नहीं चल रहा है।

मेरा लक्ष्य एक वर्ग इस तरह से उपयोग करने के लिए (या यह करने के लिए एक बेहतर तरीका जानने के लिए) है:

var player = new Player($("playerElement")); 
player.InitEvents(); 

अन्य लोगों के उदाहरण का उपयोग करना, यह मैं क्या करने की कोशिश की है:

$.Player = function ($) { 

}; 

$.Player.prototype.InitEvents = function() { 

    $(this).keypress(function (e) { 
     var key = e.which; 
     if (key == 100) { 
      MoveRight(); 
     } 
     if (key == 97) { 
      MoveLeft(); 
     } 
    }); 
}; 

$.Player.prototype.MoveRight = function() { 
    $(this).css("right", this.playerX += 10); 
} 

$.Player.prototype.MoveLeft = function() { 
    $(this).css("right", this.playerX -= 10); 
} 

$.Player.defaultOptions = { 
    playerX: 0, 
    playerY: 0 
}; 

अंत लक्ष्य कुंजीपटल अक्षरों A और D का उपयोग कर स्क्रीन पर बाईं ओर दाईं ओर एक चरित्र चलाना है।

मुझे एहसास है कि मैं इस "कक्षा" के साथ कुछ गलत कर रहा हूं लेकिन मुझे यकीन नहीं है कि क्यों।

(मेरी अंग्रेजी के लिए खेद है)

Answer 1

एक महत्वपूर्ण मुद्दा आप एक this.element के लिए पारित किया jQuery वस्तु/तत्व आवंटित करने के लिए है कि है - या किसी अन्य this.propertyName - तो आप उदाहरण के तरीकों के अंदर बाद में इसका उपयोग कर सकते हैं।

तुम भी MoveRight()/MoveLeft() सीधे उस तरह फोन नहीं कर सकते क्योंकि उन कार्यों गुंजाइश श्रृंखला में परिभाषित नहीं कर रहे हैं, बल्कि अपने उदाहरण के निर्माता के प्रोटोटाइप में है, इसलिए आप उदाहरण खुद के लिए एक संदर्भ की जरूरत है इन कॉल करने के लिए।

अपडेट किया गया और नीचे दिए गए कोड टिप्पणी की: जो परिभाषा से जुड़े रहे हैं

(function ($) { //an IIFE so safely alias jQuery to $ 
    $.Player = function (element) { //renamed arg for readability 

     //stores the passed element as a property of the created instance. 
     //This way we can access it later 
     this.element = (element instanceof $) ? element : $(element); 
     //instanceof is an extremely simple method to handle passed jQuery objects, 
     //DOM elements and selector strings. 
     //This one doesn't check if the passed element is valid 
     //nor if a passed selector string matches any elements. 
    }; 

    //assigning an object literal to the prototype is a shorter syntax 
    //than assigning one property at a time 
    $.Player.prototype = { 
     InitEvents: function() { 
      //`this` references the instance object inside of an instace's method, 
      //however `this` is set to reference a DOM element inside jQuery event 
      //handler functions' scope. So we take advantage of JS's lexical scope 
      //and assign the `this` reference to another variable that we can access 
      //inside the jQuery handlers 
      var that = this; 
      //I'm using `document` instead of `this` so it will catch arrow keys 
      //on the whole document and not just when the element is focused. 
      //Also, Firefox doesn't fire the keypress event for non-printable 
      //characters so we use a keydown handler 
      $(document).keydown(function (e) { 
       var key = e.which; 
       if (key == 39) { 
        that.moveRight(); 
       } else if (key == 37) { 
        that.moveLeft(); 
       } 
      }); 

      this.element.css({ 
       //either absolute or relative position is necessary 
       //for the `left` property to have effect 
       position: 'absolute', 
       left: $.Player.defaultOptions.playerX 
      }); 
     }, 
     //renamed your method to start with lowercase, convention is to use 
     //Capitalized names for instanceables only 
     moveRight: function() { 
      this.element.css("left", '+=' + 10); 
     }, 
     moveLeft: function() { 
      this.element.css("left", '-=' + 10); 
     } 
    }; 


    $.Player.defaultOptions = { 
     playerX: 0, 
     playerY: 0 
    }; 

}(jQuery)); 

//so you can use it as: 
var player = new $.Player($("#playerElement")); 
player.InitEvents(); 

Fiddle

भी ध्यान रखें कि जावास्क्रिप्ट वास्तविक "वर्ग" नहीं है (कम से कम जब तक नहीं ES6 लागू किया जाता है) और न ही तरीके (विशेष रूप से कक्षाओं के लिए), बल्कि रचनाकार जो कक्षाओं जैसा दिखता है एक मीठा वाक्यविन्यास प्रदान करते हैं। यहाँ एक भयानक टीजे Crowder द्वारा लिखित लेख जे एस के "नकली" तरीकों के बारे में है, यह एक छोटे से उन्नत है, लेकिन हर किसी को इसे पढ़ने से कुछ नया सीखने के लिए सक्षम होना चाहिए:
http://blog.niftysnippets.org/2008/03/mythical-methods.html

Answer 2

आप this अपने Player प्रोटोटाइप काम करता है, this अंक वर्तमान प्लेयर वस्तु को अंदर का उपयोग करते हैं।

लेकिन जब आप $(this).keypress का उपयोग करते हैं तो इसे this अंक HTML तत्व के लिए आवश्यक है।

दोनों बस असंगत हैं। केवल एक this है और यह वर्तमान प्लेयर ऑब्जेक्ट को इंगित करता है, न कि HTML तत्व के लिए।

अपनी समस्या को ठीक करने के लिए, आपको HTML ऑब्जेक्ट को प्लेयर ऑब्जेक्ट में अपनी सृजन या प्रासंगिक फ़ंक्शन कॉल में पास करने की आवश्यकता होगी।

आप प्लेयर इस तरह निर्माण पर वस्तु में तत्व पारित कर सकते हैं:

$.Player = function ($, element) { 
     this.element = element; 

}; 

$.Player.prototype.InitEvents = function() { 

    $(this.element).keypress(function (e) { 
     var key = e.which; 
     if (key == 100) { 
      MoveRight(); 
     } 
     if (key == 97) { 
      MoveLeft(); 
     } 
    }); 
}; 

$.Player.prototype.MoveRight = function() { 
    $(this.element).css("right", this.playerX += 10); 
} 

$.Player.prototype.MoveLeft = function() { 
    $(this.element).css("right", this.playerX -= 10); 
} 

$.Player.defaultOptions = { 
    playerX: 0, 
    playerY: 0 
};