Rumah > hujung hadapan web > tutorial js > Penjelasan terperinci tentang pengaturcaraan corak strategi JavaScript_Pengetahuan asas

Penjelasan terperinci tentang pengaturcaraan corak strategi JavaScript_Pengetahuan asas

WBOY
Lepaskan: 2016-05-16 15:53:13
asal
1028 orang telah melayarinya

Saya suka corak reka bentuk strategi. Saya cuba menggunakannya sebaik mungkin. Pada terasnya, corak Strategi menggunakan perwakilan untuk memisahkan kelas algoritma yang menggunakannya.

Terdapat beberapa faedah untuk melakukan ini. Ia menghalang penggunaan pernyataan bersyarat yang besar untuk memutuskan algoritma yang hendak digunakan untuk jenis objek tertentu. Memisahkan kebimbangan sekali gus mengurangkan kerumitan pelanggan sambil juga memudahkan subkelas. Ia meningkatkan modulariti dan kebolehujian. Setiap algoritma boleh diuji secara individu. Setiap pelanggan boleh mensimulasikan algoritma. Mana-mana pelanggan boleh menggunakan mana-mana algoritma. Mereka boleh intermodulasi. Sama seperti Lego.

Untuk melaksanakan Corak Strategi, biasanya terdapat dua peserta:

Objek strategi ini merangkumi algoritma.

Objek pelanggan (konteks) yang boleh menggunakan mana-mana strategi secara plug-and-play.

Berikut ialah pengenalan tentang cara saya menggunakan corak strategi dalam Javascript dan cara menggunakannya dalam persekitaran yang huru-hara untuk membahagikan perpustakaan kepada pakej pemalam dan pemalam kecil dan pemalam.

Berfungsi sebagai strategi

Fungsi menyediakan cara terbaik untuk merangkum algoritma dan boleh digunakan sebagai strategi. Hanya berikan fungsi kepada pelanggan dan pastikan pelanggan anda boleh menghubungi polisi tersebut.

Mari kita gunakan contoh untuk membuktikan. Katakan kita ingin membuat kelas Greeter. Apa yang perlu dilakukan ialah bertanya khabar kepada orang ramai. Kami mahu kelas Greeter mengetahui cara yang berbeza untuk menyambut orang. Untuk melaksanakan idea ini, kami mencipta strategi yang berbeza untuk memberi salam.

// Greeter is a class of object that can greet people.
// It can learn different ways of greeting people through
// 'Strategies.'
//
// This is the Greeter constructor.
var Greeter = function(strategy) {
this.strategy = strategy;
};
 
// Greeter provides a greet function that is going to
// greet people using the Strategy passed to the constructor.
Greeter.prototype.greet = function() {
return this.strategy();
};
 
// Since a function encapsulates an algorithm, it makes a perfect
// candidate for a Strategy.
//
// Here are a couple of Strategies to use with our Greeter.
var politeGreetingStrategy = function() {
console.log("Hello.");
};
 
var friendlyGreetingStrategy = function() {
console.log("Hey!");
};
 
var boredGreetingStrategy = function() {
console.log("sup.");
};
 
// Let's use these strategies!
var politeGreeter = new Greeter(politeGreetingStrategy);
var friendlyGreeter = new Greeter(friendlyGreetingStrategy);
var boredGreeter = new Greeter(boredGreetingStrategy);
 
console.log(politeGreeter.greet()); //=> Hello.
console.log(friendlyGreeter.greet()); //=> Hey!
console.log(boredGreeter.greet()); //=> sup.
Salin selepas log masuk

Dalam contoh di atas, Greeter ialah pelanggan dan mempunyai tiga strategi. Seperti yang anda lihat, Greeter tahu cara menggunakan algoritma, tetapi tidak tahu tentang butiran algoritma.

Untuk algoritma yang kompleks, fungsi mudah selalunya tidak dapat memuaskan. Dalam kes ini, pendekatan terbaik ialah mentakrifkannya dari segi objek.

Kelas sebagai Strategi

Strategi juga boleh menjadi kelas, terutamanya apabila pengiraan lebih kompleks daripada buatan (dasar/algoritma) yang digunakan dalam contoh di atas. Menggunakan kelas membolehkan anda menentukan antara muka untuk setiap strategi.

Dalam contoh di bawah, ini disahkan.

// We can also leverage the power of Prototypes in Javascript to create
// classes that act as strategies.
//
// Here, we create an abstract class that will serve as the interface
// for all our strategies. It isn't needed, but it's good for documenting
// purposes.
var Strategy = function() {};
 
Strategy.prototype.execute = function() {
 throw new Error('Strategy#execute needs to be overridden.')
};
 
// Like above, we want to create Greeting strategies. Let's subclass
// our Strategy class to define them. Notice that the parent class
// requires its children to override the execute method.
var GreetingStrategy = function() {};
GreetingStrategy.prototype = Object.create(Strategy.prototype);
 
// Here is the `execute` method, which is part of the public interface of
// our Strategy-based objects. Notice how I implemented this method in term of
// of other methods. This pattern is called a Template Method, and you'll see
// the benefits later on.
GreetingStrategy.prototype.execute = function() {
 return this.sayHi() + this.sayBye();
};
 
GreetingStrategy.prototype.sayHi = function() {
 return "Hello, ";
};
 
GreetingStrategy.prototype.sayBye = function() {
 return "Goodbye.";
};
 
// We can already try out our Strategy. It requires a little tweak in the
// Greeter class before, though.
Greeter.prototype.greet = function() {
 return this.strategy.execute();
};
 
var greeter = new Greeter(new GreetingStrategy());
greeter.greet() //=> 'Hello, Goodbye.'
Salin selepas log masuk

Dengan menggunakan kelas, kami mentakrifkan strategi dengan objek anexecutemethod. Pelanggan boleh melaksanakan antara muka ini menggunakan sebarang strategi.

Juga perhatikan bagaimana saya mencipta GreetingStrategy. Bahagian yang menarik ialah melebihkan methodexecute. Ia ditakrifkan dalam bentuk fungsi lain. Kini subkelas kelas seterusnya boleh mengubah tingkah laku tertentu, seperti thesayHiorsayByemethod, tanpa mengubah algoritma umum. Corak ini dipanggil kaedah templat dan sangat sesuai untuk corak strategi.

Mari kita lihat apa yang berlaku.

// Since the GreetingStrategy#execute method uses methods to define its algorithm,
// the Template Method pattern, we can subclass it and simply override one of those
// methods to alter the behavior without changing the algorithm.
 
var PoliteGreetingStrategy = function() {};
PoliteGreetingStrategy.prototype = Object.create(GreetingStrategy.prototype);
PoliteGreetingStrategy.prototype.sayHi = function() {
 return "Welcome sir, ";
};
 
var FriendlyGreetingStrategy = function() {};
FriendlyGreetingStrategy.prototype = Object.create(GreetingStrategy.prototype);
FriendlyGreetingStrategy.prototype.sayHi = function() {
 return "Hey, ";
};
 
var BoredGreetingStrategy = function() {};
BoredGreetingStrategy.prototype = Object.create(GreetingStrategy.prototype);
BoredGreetingStrategy.prototype.sayHi = function() {
 return "sup, ";
};
 
var politeGreeter  = new Greeter(new PoliteGreetingStrategy());
var friendlyGreeter = new Greeter(new FriendlyGreetingStrategy());
var boredGreeter  = new Greeter(new BoredGreetingStrategy());
 
politeGreeter.greet();  //=> 'Welcome sir, Goodbye.'
friendlyGreeter.greet(); //=> 'Hey, Goodbye.'
boredGreeter.greet();  //=> 'sup, Goodbye.'
Salin selepas log masuk

GreetingStrategy mencipta algoritma kelas dengan menentukan langkah kaedah laksana. Dalam coretan kod di atas, kami memanfaatkan ini dengan mencipta algoritma khusus.

Tanpa subkelas, Greeter kami masih mempamerkan tingkah laku polimorfik. Tidak perlu bertukar antara jenis Greeter yang berbeza untuk mencetuskan algoritma yang betul. Ini semua terikat pada setiap objek Greeter.

var greeters = [
 new Greeter(new BoredGreetingStrategy()),
 new Greeter(new PoliteGreetingStrategy()),
 new Greeter(new FriendlyGreetingStrategy()),
];
 
greeters.forEach(function(greeter) {
  
 // Since each greeter knows its strategy, there's no need
 // to do any type checking. We just greet, and the object
 // knows how to handle it.
 greeter.greet();
});
Salin selepas log masuk

Mod strategi dalam berbilang persekitaran

Salah satu contoh Corak Strategi kegemaran saya terdapat dalam perpustakaan Passport.js. Passport.js menyediakan cara mudah untuk mengendalikan pengesahan dalam Node. Pelbagai penyedia menyokongnya (Facebook, Twitter, Google, dll.), masing-masing dilaksanakan sebagai dasar.

Perpustakaan tersedia sebagai pakej npm, begitu juga dengan semua strateginya. Pengguna perpustakaan boleh memutuskan pakej npm yang hendak dipasang untuk kes penggunaan unik mereka. Berikut ialah coretan kod yang menunjukkan cara ini dilakukan:

// Taken from http://passportjs.org
 
var passport = require('passport')
   
  // Each authentication mechanism is provided as an npm package.
  // These packages expose a Strategy object.
 , LocalStrategy = require('passport-local').Strategy
 , FacebookStrategy = require('passport-facebook').Strategy;
 
// Passport can be instanciated using any Strategy.
passport.use(new LocalStrategy(
 function(username, password, done) {
  User.findOne({ username: username }, function (err, user) {
   if (err) { return done(err); }
   if (!user) {
    return done(null, false, { message: 'Incorrect username.' });
   }
   if (!user.validPassword(password)) {
    return done(null, false, { message: 'Incorrect password.' });
   }
   return done(null, user);
  });
 }
));
 
// In this case, we instanciate a Facebook Strategy
passport.use(new FacebookStrategy({
  clientID: FACEBOOK_APP_ID,
  clientSecret: FACEBOOK_APP_SECRET,
  callbackURL: "http://www.example.com/auth/facebook/callback"
 },
 function(accessToken, refreshToken, profile, done) {
  User.findOrCreate(..., function(err, user) {
   if (err) { return done(err); }
   done(null, user);
  });
 }
));
Salin selepas log masuk

Pustaka Passport.js hanya disertakan dengan satu atau dua mekanisme pengesahan mudah. Selain itu, ia tidak mempunyai antara muka di luar kelas dasar yang mematuhi objek konteks. Mekanisme ini membolehkan penggunanya dengan mudah melaksanakan mekanisme pengesahan mereka sendiri tanpa menjejaskan projek.

Refleksi

Corak Strategi menyediakan cara untuk meningkatkan modulariti dan kebolehujian pada kod anda. Ini tidak bermakna (Corak Strategi) sentiasa berfungsi. Mixin juga boleh digunakan untuk menyuntik kefungsian, seperti algoritma ke dalam objek semasa runtime. Polimorfisme menaip itik lama rata kadangkala cukup mudah.

Walau bagaimanapun, menggunakan corak Strategi membolehkan anda menskalakan kod anda apabila beban kerja anda bertambah tanpa memperkenalkan seni bina yang besar pada mulanya. Seperti yang kita lihat dengan contoh Passport.js, ia akan menjadi lebih mudah bagi penyelenggara untuk menambah strategi tambahan pada masa hadapan.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan