Code Monkey home page Code Monkey logo

javascript-design-patterns's Introduction

What is a pattern

ะ pattern is a reusable solution to a common problem in software design, in this case - a JavaScript application.

Why are they important

  • patterns are proven solutions. They provide solid approach to solving a particular problem.
  • patterns can be easily reused.
  • patterns can be expressive

Proto-pattern

A proto-pattern is a pattern that is found by someone, but is not yet established, because of it's young age.

When a pattern is considered "good"

A "good" pattern is considered when it does the following:

  • Solved a particular problem - this is one of the most essential ingredient of a good pattern
  • The solution to the problem cannot be obvious - the best design patterns provide solutions to problems indirectly - this is considered a necessary approach for most challenging problems related to deseing.
  • The concept described must be proven - design patterns require a proof, that they function as described.

Tips for writing a design pattern

  • How practical is the pattern? - Ensure the pattern describes proven solution to recurring problem.
  • Keep best practices in mind - The design decisions we take should be based on practices we derive from an understanding of best practices.
  • Our design pattern should be transparent to the users - Design patterns should be transparent and easy to understand to the developers.
  • Remember that originality is not key in pattern design
  • Patterns need a strong set of examples - A good pattern description should be followed by strong set of examples demonstrating the successful application of the pattern.

Anti-Patterns

If we consider patterns a best practice, anti-pattern is the lesson we have learned. Anti-Patterns:

  • describes a bad solution to a particular problem which resulted in a bad situation occuring
  • describes how to get out of that situation and how to go to a good solution

Examples of anti-patterns in JavaScript:

  • polluting the global namespace by defining a large number of variables in the global context
  • passing strings instead of functions to either setTimeout or setInterval as it triggers the use of eval()
  • Modifying the Object class prototype
  • Using JavaScript in an inline form
  • The use of document.write where native DOM alternatives as document.createElement are more appropriate.

Categories of design patterns

Design patterns can be broken down into several categories.

Creational Design Patterns

Creational patterns focus on handling object creation mechanism. The basic approach to object creation might otherwise lead to added complexity in a project whist these patterns aim to solve this problem by controlling the creation process.

Some of this patterns are: Constructor, Factory, Abstract, Prototype, Singleton and Builder

Structural Design Patterns

Structural Patterns are concerned with object composition and typically identify simple ways to realize relationship between different objects. They help ensure that when one part of the system changes, the entire structure of the system doesn't need to do the same.

Some of this patterns are: Decorator, Facade, Flyweight, Adapter and Proxy.

Behavioral Design Patters

Behavioral design patterns focus on improving communication between disparate objects in a system.

Some of this patterns are: Iterator, Mediator, Observer and Visitor.

Classes in JavaScript

JavaScript is class-less language (ES5 and lower). Classes can be simulated using functions.

Explained Patterns

javascript-design-patterns's People

Contributors

kleopetroff avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.