# Design Patterns > 原文：[https://docs.gitlab.com/ee/development/fe_guide/design_patterns.html](https://docs.gitlab.com/ee/development/fe_guide/design_patterns.html) * [Singletons](#singletons) * [Manipulating the DOM in a JS Class](#manipulating-the-dom-in-a-js-class) # Design Patterns[](#design-patterns "Permalink") ## Singletons[](#singletons "Permalink") 当给定任务仅需要一个对象时，最好将其定义为`class`而不是对象文字. 除非灵活性很重要（例如，对于测试），否则也最好明确限制实例化. ``` // bad const MyThing = { prop1: 'hello', method1: () => {} }; export default MyThing; // good class MyThing { constructor() { this.prop1 = 'hello'; } method1() {} } export default new MyThing(); // best export default class MyThing { constructor() { if (!MyThing.prototype.singleton) { this.init(); MyThing.prototype.singleton = this; } return MyThing.prototype.singleton; } init() { this.prop1 = 'hello'; } method1() {} } ``` ## Manipulating the DOM in a JS Class[](#manipulating-the-dom-in-a-js-class "Permalink") 在编写需要处理 DOM 的类时，请确保提供了一个容器选项. 当我们需要在同一页面中多次实例化该类时，这很有用. Bad: ``` class Foo { constructor() { document.querySelector('.bar'); } } new Foo(); ``` Good: ``` class Foo { constructor(opts) { document.querySelector(`${opts.container} .bar`); } } new Foo({ container: '.my-element' }); ``` 您可以在这上面的例子[类](https://gitlab.com/gitlab-org/gitlab/blob/master/app/assets/javascripts/mini_pipeline_graph_dropdown.js) ;