Maison interface Web js tutoriel 深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP_javascript技巧

深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP_javascript技巧

May 16, 2016 pm 05:57 PM

前言
Bob大叔提出并发扬了S.O.L.I.D五大原则,用来更好地进行面向对象编程,五大原则分别是:

The Single Responsibility Principle(单一职责SRP)
The Open/Closed Principle(开闭原则OCP)
The Liskov Substitution Principle(里氏替换原则LSP)
The Interface Segregation Principle(接口分离原则ISP)
The Dependency Inversion Principle(依赖反转原则DIP)
五大原则,我相信在博客园已经被讨论烂了,尤其是C#的实现,但是相对于JavaScript这种以原型为base的动态类型语言来说还为数不多,该系列将分5篇文章以JavaScript编程语言为基础来展示五大原则的应用。 OK,开始我们的第一篇:单一职责。

英文原文:http://freshbrewedcode.com/derekgreer/2011/12/08/solid-javascript-single-responsibility-principle/

单一职责
单一职责的描述如下:

A class should have only one reason to change
类发生更改的原因应该只有一个
复制代码
一个类(JavaScript下应该是一个对象)应该有一组紧密相关的行为的意思是什么?遵守单一职责的好处是可以让我们很容易地来维护这个对象,当一个对象封装了很多职责的话,一旦一个职责需要修改,势必会影响该对象想的其它职责代码。通过解耦可以让每个职责工更加有弹性地变化。

不过,我们如何知道一个对象的多个行为构造多个职责还是单个职责?我们可以通过参考Object Design: Roles, Responsibilies, and Collaborations一书提出的Role Stereotypes概念来决定,该书提出了如下Role Stereotypes来区分职责:

Information holder – 该对象设计为存储对象并提供对象信息给其它对象。
Structurer – 该对象设计为维护对象和信息之间的关系
Service provider – 该对象设计为处理工作并提供服务给其它对象
Controller – 该对象设计为控制决策一系列负责的任务处理
Coordinator – 该对象不做任何决策处理工作,只是delegate工作到其它对象上
Interfacer – 该对象设计为在系统的各个部分转化信息(或请求)
一旦你知道了这些概念,那就狠容易知道你的代码到底是多职责还是单一职责了。

实例代码
该实例代码演示的是将商品添加到购物车,代码非常糟糕,代码如下:

复制代码 代码如下:

function Product(id, description) {
this.getId = function () {
return id;
};
this.getDescription = function () {
return description;
};
}

function Cart(eventAggregator) {
var items = [];

this.addItem = function (item) {
items.push(item);
};
}

(function () {
var products = [new Product(1, "Star Wars Lego Ship"),
new Product(2, "Barbie Doll"),
new Product(3, "Remote Control Airplane")],
cart = new Cart();

function addToCart() {
var productId = $(this).attr('id');
var product = $.grep(products, function (x) {
return x.getId() == productId;
})[0];
cart.addItem(product);

var newItem = $('
  • ').html(product.getDescription()).attr('id-cart', product.getId()).appendTo("#cart");
    }

    products.forEach(function (product) {
    var newItem = $('
  • ').html(product.getDescription())
    .attr('id', product.getId())
    .dblclick(addToCart)
    .appendTo("#products");
    });
    })();

  • 该代码声明了2个function分别用来描述product和cart,而匿名函数的职责是更新屏幕和用户交互,这还不是一个很复杂的例子,但匿名函数里却包含了很多不相关的职责,让我们来看看到底有多少职责:

    首先,有product的集合的声明
    其次,有一个将product集合绑定到#product元素的代码,而且还附件了一个添加到购物车的事件处理
    第三,有Cart购物车的展示功能
    第四,有添加product item到购物车并显示的功能
    重构代码
    让我们来分解一下,以便代码各自存放到各自的对象里,为此,我们参考了martinfowler的事件聚合(Event Aggregator)理论在处理代码以便各对象之间进行通信。

    首先我们先来实现事件聚合的功能,该功能分为2部分,1个是Event,用于Handler回调的代码,1个是EventAggregator用来订阅和发布Event,代码如下:
    复制代码 代码如下:

    function Event(name) {
    var handlers = [];

    this.getName = function () {
    return name;
    };

    this.addHandler = function (handler) {
    handlers.push(handler);
    };

    this.removeHandler = function (handler) {
    for (var i = 0; i if (handlers[i] == handler) {
    handlers.splice(i, 1);
    break;
    }
    }
    };

    this.fire = function (eventArgs) {
    handlers.forEach(function (h) {
    h(eventArgs);
    });
    };
    }

    function EventAggregator() {
    var events = [];

    function getEvent(eventName) {
    return $.grep(events, function (event) {
    return event.getName() === eventName;
    })[0];
    }

    this.publish = function (eventName, eventArgs) {
    var event = getEvent(eventName);

    if (!event) {
    event = new Event(eventName);
    events.push(event);
    }
    event.fire(eventArgs);
    };

    this.subscribe = function (eventName, handler) {
    var event = getEvent(eventName);

    if (!event) {
    event = new Event(eventName);
    events.push(event);
    }

    event.addHandler(handler);
    };
    }

    然后,我们来声明Product对象,代码如下:
    复制代码 代码如下:

    function Product(id, description) {
    this.getId = function () {
    return id;
    };
    this.getDescription = function () {
    return description;
    };
    }

    接着来声明Cart对象,该对象的addItem的function里我们要触发发布一个事件itemAdded,然后将item作为参数传进去。
    复制代码 代码如下:

    function Cart(eventAggregator) {
    var items = [];

    this.addItem = function (item) {
    items.push(item);
    eventAggregator.publish("itemAdded", item);
    };
    }

    CartController主要是接受cart对象和事件聚合器,通过订阅itemAdded来增加一个li元素节点,通过订阅productSelected事件来添加product。
    复制代码 代码如下:

    function CartController(cart, eventAggregator) {
    eventAggregator.subscribe("itemAdded", function (eventArgs) {
    var newItem = $('
  • ').html(eventArgs.getDescription()).attr('id-cart', eventArgs.getId()).appendTo("#cart");
    });

    eventAggregator.subscribe("productSelected", function (eventArgs) {
    cart.addItem(eventArgs.product);
    });
    }

  • Repository的目的是为了获取数据(可以从ajax里获取),然后暴露get数据的方法。
    复制代码 代码如下:

    function ProductRepository() {
    var products = [new Product(1, "Star Wars Lego Ship"),
    new Product(2, "Barbie Doll"),
    new Product(3, "Remote Control Airplane")];

    this.getProducts = function () {
    return products;
    }
    }

    ProductController里定义了一个onProductSelect方法,主要是发布触发productSelected事件,forEach主要是用于绑定数据到产品列表上,代码如下:
    复制代码 代码如下:

    function ProductController(eventAggregator, productRepository) {
    var products = productRepository.getProducts();

    function onProductSelected() {
    var productId = $(this).attr('id');
    var product = $.grep(products, function (x) {
    return x.getId() == productId;
    })[0];
    eventAggregator.publish("productSelected", {
    product: product
    });
    }

    products.forEach(function (product) {
    var newItem = $('
  • ').html(product.getDescription())
    .attr('id', product.getId())
    .dblclick(onProductSelected)
    .appendTo("#products");
    });
    }

  • 最后声明匿名函数:
    复制代码 代码如下:

    (function () {
    var eventAggregator = new EventAggregator(),
    cart = new Cart(eventAggregator),
    cartController = new CartController(cart, eventAggregator),
    productRepository = new ProductRepository(),
    productController = new ProductController(eventAggregator, productRepository);
    })();

    可以看到匿名函数的代码减少了很多,主要是一个对象的实例化代码,代码里我们介绍了Controller的概念,他接受信息然后传递到action,我们也介绍了Repository的概念,主要是用来处理product的展示,重构的结果就是写了一大堆的对象声明,但是好处是每个对象有了自己明确的职责,该展示数据的展示数据,改处理集合的处理集合,这样耦合度就非常低了。

    最终代码
    复制代码 代码如下:

    function Event(name) {
    var handlers = [];

    this.getName = function () {
    return name;
    };

    this.addHandler = function (handler) {
    handlers.push(handler);
    };

    this.removeHandler = function (handler) {
    for (var i = 0; i if (handlers[i] == handler) {
    handlers.splice(i, 1);
    break;
    }
    }
    };

    this.fire = function (eventArgs) {
    handlers.forEach(function (h) {
    h(eventArgs);
    });
    };
    }

    function EventAggregator() {
    var events = [];

    function getEvent(eventName) {
    return $.grep(events, function (event) {
    return event.getName() === eventName;
    })[0];
    }

    this.publish = function (eventName, eventArgs) {
    var event = getEvent(eventName);

    if (!event) {
    event = new Event(eventName);
    events.push(event);
    }
    event.fire(eventArgs);
    };

    this.subscribe = function (eventName, handler) {
    var event = getEvent(eventName);

    if (!event) {
    event = new Event(eventName);
    events.push(event);
    }

    event.addHandler(handler);
    };
    }

    function Product(id, description) {
    this.getId = function () {
    return id;
    };
    this.getDescription = function () {
    return description;
    };
    }

    function Cart(eventAggregator) {
    var items = [];

    this.addItem = function (item) {
    items.push(item);
    eventAggregator.publish("itemAdded", item);
    };
    }

    function CartController(cart, eventAggregator) {
    eventAggregator.subscribe("itemAdded", function (eventArgs) {
    var newItem = $('
  • ').html(eventArgs.getDescription()).attr('id-cart', eventArgs.getId()).appendTo("#cart");
    });

    eventAggregator.subscribe("productSelected", function (eventArgs) {
    cart.addItem(eventArgs.product);
    });
    }

    function ProductRepository() {
    var products = [new Product(1, "Star Wars Lego Ship"),
    new Product(2, "Barbie Doll"),
    new Product(3, "Remote Control Airplane")];

    this.getProducts = function () {
    return products;
    }
    }

    function ProductController(eventAggregator, productRepository) {
    var products = productRepository.getProducts();

    function onProductSelected() {
    var productId = $(this).attr('id');
    var product = $.grep(products, function (x) {
    return x.getId() == productId;
    })[0];
    eventAggregator.publish("productSelected", {
    product: product
    });
    }

    products.forEach(function (product) {
    var newItem = $('
  • ').html(product.getDescription())
    .attr('id', product.getId())
    .dblclick(onProductSelected)
    .appendTo("#products");
    });
    }

    (function () {
    var eventAggregator = new EventAggregator(),
    cart = new Cart(eventAggregator),
    cartController = new CartController(cart, eventAggregator),
    productRepository = new ProductRepository(),
    productController = new ProductController(eventAggregator, productRepository);
    })();

  • 总结
    看到这个重构结果,有博友可能要问了,真的有必要做这么复杂么?我只能说:要不要这么做取决于你项目的情况。

    如果你的项目是个是个非常小的项目,代码也不是很多,那其实是没有必要重构得这么复杂,但如果你的项目是个很复杂的大型项目,或者你的小项目将来可能增长得很快的话,那就在前期就得考虑SRP原则进行职责分离了,这样才有利于以后的维护。
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

    Outils d'IA chauds

    Undresser.AI Undress

    Undresser.AI Undress

    Application basée sur l'IA pour créer des photos de nu réalistes

    AI Clothes Remover

    AI Clothes Remover

    Outil d'IA en ligne pour supprimer les vêtements des photos.

    Undress AI Tool

    Undress AI Tool

    Images de déshabillage gratuites

    Clothoff.io

    Clothoff.io

    Dissolvant de vêtements AI

    AI Hentai Generator

    AI Hentai Generator

    Générez AI Hentai gratuitement.

    Article chaud

    R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
    2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    Repo: Comment relancer ses coéquipiers
    4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island Adventure: Comment obtenir des graines géantes
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    Combien de temps faut-il pour battre Split Fiction?
    3 Il y a quelques semaines By DDD

    Outils chauds

    Bloc-notes++7.3.1

    Bloc-notes++7.3.1

    Éditeur de code facile à utiliser et gratuit

    SublimeText3 version chinoise

    SublimeText3 version chinoise

    Version chinoise, très simple à utiliser

    Envoyer Studio 13.0.1

    Envoyer Studio 13.0.1

    Puissant environnement de développement intégré PHP

    Dreamweaver CS6

    Dreamweaver CS6

    Outils de développement Web visuel

    SublimeText3 version Mac

    SublimeText3 version Mac

    Logiciel d'édition de code au niveau de Dieu (SublimeText3)

    Remplacer les caractères de chaîne en javascript Remplacer les caractères de chaîne en javascript Mar 11, 2025 am 12:07 AM

    Explication détaillée de la méthode de remplacement de la chaîne JavaScript et de la FAQ Cet article explorera deux façons de remplacer les caractères de chaîne dans JavaScript: le code JavaScript interne et le HTML interne pour les pages Web. Remplacer la chaîne dans le code JavaScript Le moyen le plus direct consiste à utiliser la méthode Remplace (): str = str.replace ("trouver", "remplacer"); Cette méthode remplace uniquement la première correspondance. Pour remplacer toutes les correspondances, utilisez une expression régulière et ajoutez le drapeau global G: str = str.replace (/ fi

    Tutoriel de configuration de l'API de recherche Google personnalisé Tutoriel de configuration de l'API de recherche Google personnalisé Mar 04, 2025 am 01:06 AM

    Ce tutoriel vous montre comment intégrer une API de recherche Google personnalisée dans votre blog ou site Web, offrant une expérience de recherche plus raffinée que les fonctions de recherche de thème WordPress standard. C'est étonnamment facile! Vous pourrez restreindre les recherches à Y

    Exemple Couleurs Fichier JSON Exemple Couleurs Fichier JSON Mar 03, 2025 am 12:35 AM

    Cette série d'articles a été réécrite à la mi-2017 avec des informations à jour et de nouveaux exemples. Dans cet exemple JSON, nous examinerons comment nous pouvons stocker des valeurs simples dans un fichier à l'aide du format JSON. En utilisant la notation de paire de valeurs clés, nous pouvons stocker n'importe quel type

    10 Highlighters de syntaxe jQuery 10 Highlighters de syntaxe jQuery Mar 02, 2025 am 12:32 AM

    Améliorez votre présentation de code: 10 surligneurs de syntaxe pour les développeurs Partager des extraits de code sur votre site Web ou votre blog est une pratique courante pour les développeurs. Le choix du bon surligneur de syntaxe peut améliorer considérablement la lisibilité et l'attrait visuel. T

    Créez vos propres applications Web Ajax Créez vos propres applications Web Ajax Mar 09, 2025 am 12:11 AM

    Vous voici donc, prêt à tout savoir sur cette chose appelée Ajax. Mais qu'est-ce que c'est exactement? Le terme Ajax fait référence à un regroupement lâche de technologies utilisées pour créer un contenu Web interactif dynamique. Le terme Ajax, inventé à l'origine par Jesse J

    8 Superbes plugins de mise en page JQuery Page 8 Superbes plugins de mise en page JQuery Page Mar 06, 2025 am 12:48 AM

    Tirez parti de jQuery pour les dispositions de page Web sans effort: 8 plugins essentiels JQuery simplifie considérablement la mise en page de la page Web. Cet article met en évidence huit puissants plugins jQuery qui rationalisent le processus, particulièrement utile pour la création de sites Web manuels

    Qu'est-ce que & # x27; ceci & # x27; en javascript? Qu'est-ce que & # x27; ceci & # x27; en javascript? Mar 04, 2025 am 01:15 AM

    Points de base Ceci dans JavaScript fait généralement référence à un objet qui "possède" la méthode, mais cela dépend de la façon dont la fonction est appelée. Lorsqu'il n'y a pas d'objet actuel, cela fait référence à l'objet global. Dans un navigateur Web, il est représenté par Window. Lorsque vous appelez une fonction, cela maintient l'objet global; mais lors de l'appel d'un constructeur d'objets ou de l'une de ses méthodes, cela fait référence à une instance de l'objet. Vous pouvez modifier le contexte de ceci en utilisant des méthodes telles que Call (), Appliquer () et Bind (). Ces méthodes appellent la fonction en utilisant la valeur et les paramètres donnés. JavaScript est un excellent langage de programmation. Il y a quelques années, cette phrase était

    10 tutoriels JavaScript & jQuery MVC 10 tutoriels JavaScript & jQuery MVC Mar 02, 2025 am 01:16 AM

    Cet article présente une sélection organisée de plus de 10 didacticiels sur les cadres JavaScript et JQuery Model-View-Controller (MVC), parfait pour augmenter vos compétences en développement Web au cours de la nouvelle année. Ces tutoriels couvrent une gamme de sujets, de Foundatio

    See all articles