Une étude préliminaire des modèles de conception
motif singleton
Définir des variables en interne, et juger par des fermetures, si elles n'existent pas, en générer de nouvelles
modèle de stratégie
- Conforme au principe de responsabilité unique
- Ajoutez ou réduisez des stratégies sans modifications majeures du code d'origine
- Il existe plusieurs façons de traiter le même problème, uniquement lorsque le comportement spécifique est différent
Article de référence : JavaScript utilise le mode stratégie pour éliminer if else et switch
const listString={
add:0,
del:1,
update:2
}
const strFunc={
add:function(){
return listString['add'];
},
del:function(){
return listString['del'];
},
update:function(){
return listString['update'];
}
}
function getData(name){
return strFunc[name]?strFunc[name]():0;
}
console.log(getData('add'));
Mode proxy
Contrôlez avant d'accéder au sujet, et jugez le contenu de la méthode à titre d'exemple : par exemple, après avoir cliqué sur la vérification des données
après la connexion , l'interface de connexion ne sera accessible que si elle passe
const login(name){
console.log(name+'进行了登录');
}
const proxyCheckLogin(name){
if(!name)return
login(name);
}
modèle de publication-abonnement
Une partie publie des événements et l'autre partie s'abonne pour recevoir des événements
Par exemple : Par exemple, vuex de vue et mobx|redux de React sont tous
des inconvénients de cette forme :
- La mémoire résidente augmente la surcharge de performances
- Lorsque le projet prendra de l'ampleur, il sera plus difficile de suivre les abonnements
modèle de médiateur
Toutes les méthodes sont implémentées via la méthode intermédiaire. Lorsque le contenu change, l'intermédiaire est notifié pour effectuer la modification. Par
exemple : la partie commune de la méthode est extraite dans une fonction distincte pour appeler
function add(name){
let temp='1';
consoleFunc(temp,name);
}
function update(name){
let temp='2';
consoleFunc(temp,name);
}
function consoleFunc(temp,name){
console.log(name+'输出了:'+temp);
}
add('zhangsan');
update('lisi');
motif décorateur
Compléter et étendre le contenu des objets ou méthodes existants, et doter de plus de capacités.Par
exemple : Xiao Ming n'utilisait à l'origine que des baguettes pour manger, mais après avoir passé le décorateur, il a appris à utiliser un couteau et une fourchette
function Person() {
}
Person.prototype.skill = function() {
console.log('数学');
};
// 装饰器，还会音乐
function MusicDecorator(person) {
this.person = person;
}
MusicDecorator.prototype.skill = function() {
this.person.skill();
console.log('音乐');
};
var person = new Person();
// 装饰一下
var person1 = new MusicDecorator(person);
person.skill(); // 数学
person1.skill(); // 数学 音乐
mode d'état
Encapsulez l'état, l'état est déjà défini, l'utilisateur n'a pas besoin de le savoir
Par exemple : allumez la lumière, éteignez la lumière, changez simplement l'état via le mode d'état
modèle d'adaptateur
Adaptez les parties qui ne correspondent pas entre les méthodes.
Par exemple : foreach analyse les données du tableau, mais un objet est transmis. À ce stade, il est nécessaire de juger et d'adapter
// 渲染数据，格式限制为数组了
function renderData(data) {
data.forEach(function(item) {
console.log(item);
});
}
// 对非数组的进行转换适配
function arrayAdapter(data) {
if (typeof data !== 'object') {
return [];
}
if (Object.prototype.toString.call(data) === '[object Array]') {
return data;
}
var temp = [];
for (var item in data) {
if (data.hasOwnProperty(item)) {
temp.push(data[item]);
}
}
return temp;
}
var data = {
0: 'A',
1: 'B',
2: 'C'
};
renderData(arrayAdapter(data)); // A B C
mode d'apparence
Définissez une fonction pour accueillir d'autres fonctions, puis exécutez-les uniformément.
Par exemple : juste pour embellir...
// 三个处理函数
function add() {
console.log('add');
}
function update() {
console.log('update');
}
// 外观函数，将一些处理统一起来，方便调用
function execute() {
add();
update();
}
// 调用init开始执行
function init() {
// 此处直接调用了高层函数，也可以选择越过它直接调用相关的函数
execute();
}
init(); // add update
modèle d'itérateur
Le mode itérateur fait référence à la fourniture d'une méthode pour accéder séquentiellement à chaque élément d'un objet agrégé sans exposer la représentation interne de l'objet. Il n'y a pas de
scénario d'utilisation pour le moment
function add(){
console.log('add');
return false;
}
function update(){
console.log('update');
return false;
}
function iteratorFunc() {
for (var i = 0; i < arguments.length; ++i) {
var ret = arguments[i]();
if (ret !== false) {
return ret;
}
}
}
var temp=iteratorFunc(add,update);
Modèle de chaîne de responsabilité
Appelez un par un jusqu'à ce qu'il y ait une méthode de fonction qui traitera la requête
Par exemple : similaire à if/else
modèle méthode modèle
Encapsuler les méthodes de sous-classe et guider les sous-classes dans quel ordre exécuter quelles méthodes
Mode poids mouche
Réduire le nombre d'objets partagés
mode combiné
est d'utiliser de petits sous-objets pour construire des objets plus grands, et ces petits sous-objets peuvent eux-mêmes être composés de "petits-enfants" plus petits
mode de commande
Une commande est une instruction pour faire quelque chose de spécifique
Article de référence : Quinze modèles de conception courants dans JS