Μοτίβα Java Script Σχεδιασμός
Επισκόπηση: Σε αυτό το έγγραφο θα μιλήσουμε για τα διάφορα σχεδιαστικά πρότυπα που χρησιμοποιούνται σε JavaScript. Οι περισσότεροι από τους προγραμματιστές αναρωτιούνται για να μάθετε την ακριβή ή το ιδανικό πρότυπο σχεδιασμού που θα χρησιμοποιηθούν στο πρόγραμμα τους. Για να είμαι ειλικρινής, δεν υπάρχει συγκεκριμένη απάντηση σε αυτό το ερώτημα ή δεν υπάρχουν συνταγές που θα βρείτε το σωστό πρότυπο σχεδιασμού που θα χρησιμοποιηθούν σε μια δεδομένη κατάσταση. Έτσι, κάτω από τέτοιες περιστάσεις, θα πρέπει να έχουμε μια σταθερή πνοή των σχεδιαστικών προτύπων και τα ειδικά προβλήματα που ασχολούνται με, θα πρέπει να είμαστε σε καλύτερη κατάσταση για να λάβει απόφαση επί της οποίας πρότυπο σχεδιασμού που θα χρησιμοποιηθούν κατά την οποία κατάσταση.
Εισαγωγή:
Ένα πρότυπο σχέδιο είναι ένα επαναχρησιμοποιήσιμο λύση που μπορεί να εφαρμοστεί σε κοινά προβλήματα εκ νέου συμβαίνουν στο σχεδιασμό και την ανάπτυξη λογισμικού. πρότυπο σχεδιασμού μπορεί επίσης να χαρακτηριστεί ως πρότυπα που χρησιμοποιούνται για την επίλυση κοινών προβλημάτων. σχεδιαστικά πρότυπα έχουν τρία σημαντικά οφέλη:
- Είναι αποδεδειγμένες λύσεις: πρότυπο σχεδιασμού παρέχει μια σταθερή προσέγγιση στην ανάπτυξη λογισμικού και χρησιμοποιεί δοκιμασμένες τεχνικές.
- Μπορούν εύκολα να επαναχρησιμοποιηθούν: σχεδιαστικά πρότυπα είναι εννοιολογική και παρέχει από το διάλυμα κουτί που ταιριάζει στις ανάγκες μας. Αυτό το χαρακτηριστικό καθιστά τα πρότυπα σχεδιασμού πιο εύρωστη και μπορούν να επαναχρησιμοποιηθούν σε παρόμοιες συνθήκες.
- Πρότυπα είναι εκφραστικά: Every design pattern presents a predefined set structure and vocabulary which can be used to provide solutions to larger problems.
Design pattern never provides an exact solution to a problem. It is important to note that the role of patterns is to provide a solution scheme.
Types of Design Patterns
Design patterns can be divided into following three sub categories:
- Creational Design Pattern : In this category the following design patterns fall :
- Singleton
- Οικοδόμος
- Factory
- Abstract
- Prototype
- Builder
- Structural Design Pattern : In this category the following design patterns fall :
- Decorator
- Facade
- Flyweight
- Adapter
- Proxy
- Behavioral Design Pattern : In this category the following design pattern fall :
- Iterator
- Visitor
- Mediator
- Observer
Patterns in JavaScript:
The following patterns are commonly used in JavaScript:
- Constructor Pattern
- Module Pattern
- Singleton Pattern
- Observer Pattern
- Mediator Pattern
- Prototype Pattern
- Command Pattern
- Facade Pattern
- Factory Pattern
- Decorator Pattern
- Flyweight Pattern
The Constructor Pattern:
As per the classical object oriented programming concept, a constructor is a special type of method which is used to create an instance of an object in the memory. In JavaScript object creation is done using any of the following three approaches:
Listing 1: Three approaches used in JavaScript to create Objects
[Code]
// Approach 1
var newObject = {};
//Approach 2
var newObject = Object.create(μηδέν);
//Approach 3
var newObject = new Object();
[/Code]
In the third approach, the Object is created using the Object constructor where no value is passed or set. There are multiple ways to set values to a newly created object. These are:
Listing 2: Ways to set values to a constructor
[Code]
//Approach 1
newObject.someKey = “Hello World”
//Approach 2
newObject[someKey] = “Hello World”
//Approach 3
| Object.defineProperty( newObject, “someKey”, {
αξία : “Hello World” writable : αληθής enumerable : αληθής configurable : αληθής ); [/Code] |
The Singleton Pattern:
We all know that the singleton pattern restricts the creation of an object to single instance. Singleton pattern is implemented by creating a class with a method which creates a new instance of the object only when no other instances exist. In JavaScript singletons serve as a shared resource namespace which isolates implementation from the global namespace. In JavaScript, singleton is implemented in the following manner:
Listing 3: Singleton implementation in JavaScript
[Code]
var mySingleton = (function () {
// Instance stores a reference to the Singleton
var instance;
function init() {
// Singleton
// Private methods and variables
function privateMethod(){
console.log( “I am private” );
}
var privateVariable = “Im also private”;
var privateRandomNumber = Math.random();
return {
// Public methods and variables
publicMethod: function () {
console.log( “The public can see me!” );
},
publicProperty: “I am also public”,
getRandomNumber: function() {
return privateRandomNumber;
}
};
};
return {
// Get the Singleton instance if one exists
// or create one if it doesn’t
getInstance: function () {
αν ( !instance ) {
instance = init();
}
return instance;
}
};
})();
var myBadSingleton = (function () {
// Instance stores a reference to the Singleton
var instance;
function init() {
// Singleton
var privateRandomNumber = Math.random();
return {
getRandomNumber: function() {
return privateRandomNumber;
}
};
};
return {
// Always create a new Singleton instance
getInstance: function () {
instance = init();
return instance;
}
};
})();
// Usage:
var single1 = mySingleton.getInstance();
var single2 = mySingleton.getInstance();
console.log( singleA.getRandomNumber() === singleB.getRandomNumber() ); // αληθής
var badSingle1 = myBadSingleton.getInstance();
var badSingle2 = myBadSingleton.getInstance();
console.log( badSingleA.getRandomNumber() !== badSingleB.getRandomNumber() ); // αληθής
[/Code]
As per the GoF, singleton is applicable in the following situations:
- There should exist exactly on instance of the Object.
- The sole instance should be extensible by sub-classing it.
The Observer Pattern:
In the Observer pattern, the object (also called as subject) maintains a list of objects depending on it referred to as observers. The subject automatically notifies to the observers any change that has happened, using the broadcast mechanism. Implementation of the Observer Pattern is shown below.
Listing 4: List of dependent Observers a subject may have
[Code]
function ObserverList(){ this.observerList = [];} ObserverList.prototype.Add = function( obj ){ return this.observerList.push( obj );}; ObserverList.prototype.Empty = function(){ this.observerList = [];}; ObserverList.prototype.Count = function(){ return this.observerList.length;}; ObserverList.prototype.Get = function( index ){ αν( index > -1 && index < this.observerList.length ){ return this.observerList[ index ]; }}; ObserverList.prototype.Insert = function( obj, index ){ var pointer = -1; αν( index === 0 ){ this.observerList.unshift( obj ); pointer = index; }else if( index === this.observerList.length ){ this.observerList.push( obj ); pointer = index; } return pointer;}; ObserverList.prototype.IndexOf = function( obj, startIndex ){ var i = startIndex, pointer = -1; ενώ( εγώ < this.observerList.length ){ αν( this.observerList[εγώ] === obj ){ pointer = i; } i ; } return pointer;}; ObserverList.prototype.RemoveAt = function( index ){ αν( index === 0 ){ this.observerList.shift(); }else if( index === this.observerList.length -1 ){ this.observerList.pop(); }}; // Extend an object with an extensionfunction extend( extension, obj ){ για ( var key in extension ){ obj[key] = extension[key]; }}
[/Code]
Listing 5: The Subject
[Code]
function Subject(){ this.observers = new ObserverList();} Subject.prototype.AddObserver = function( observer ){ this.observers.Add( observer );}; Subject.prototype.RemoveObserver = function( observer ){ this.observers.RemoveAt( this.observers.IndexOf( observer, 0 ) );}; Subject.prototype.Notify = function( context ){ var observerCount = this.observers.Count(); για(var i=0; εγώ < observerCount; i ){ this.observers.Get(εγώ).Update( context ); }};
[/Code]
Στο παραπάνω παράδειγμα, using the Observer components, we now define:
- A button for adding new observable checkboxes to the page
- A control checkbox which will act as a subject, notifying other checkboxes they should be checked
- A container for the new checkboxes being added
The HTML code is as under
Listing 5: The HTML code
[Code]
<button id=”addNewObserver”>Add New Observer checkbox</κουμπί><input id=”mainCheckbox” type=”checkbox”/><div id=”observersContainer”></div>
[/Code]
Summary: So in this article I have discussed details about the JavaScript design patterns. The design patterns are applicable to all types of languages like object oriented language java and also scripting language like JavaScript. But there are differences and we have seen it in the examples above. So to conclude the discussion we can say that Design patterns are used to provide solution to commonly occurring problems. And please keep in mind that Design patterns are
- Are Proven solution
- Μπορεί να χρησιμοποιηθεί εύκολα
- είναι εκφραστικό
Ελπίδα έχετε κατανοήσει τις έννοιες και θα σας βοηθήσει να την εφαρμόσει στο δικό σας έργο. Καλή ανάγνωση.
Περισσότερα ενδιαφέροντα άρθρα σχετικά με JS — Πρέπει να διαβάσετε
