# 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) ;