This content originally appeared on Bits and Pieces - Medium and was authored by Piyush Dubey
What are Mixins? How to create Object and Class based mixins for your application. How to use Mixins
Introduction
In inheritance, the most programming language does not support multi-level inheritance which means you cannot have more than one parent for a particular class. Javascript also does not support multi-level inheritance, as a result, there are some blockers when arranging your code base.
For example, let's say we have a Man class and its parent is Person now there is a defined relationship between but what if you have a utility class Authorize that is neither related to Person or Man classes so what will be a better approach to use Authorize class for Man class?
There are plenty ways to solve the problem
- Dependency Injection
- Creating a separate utility and pass value in methods
- Creating Man instance from Authorize class
We will be working with approach three in this article where we will be using mixin as a virtual relationship between all three classes
What is a Mixin?
Mixin is a higher-level function or class declaration that has internal methods and properties that can be abstracted to any children object either class or object
Creating a Mixin in JavaScript
There are 2 ways you can create a mixin:
1. Object declaration
2. Class declaration
1. Object declaration
We can create an object with methods and properties and use it to update the prototype of any existing class to attach the
We have created a mixin that will manage the authorization and attach that to the person class on its prototype and it can be accessed from the person instance
2. Class declaration
To create a class mixin, we will need to make a parent class for any child-level class, in our example we will need to create Person and Man classes both and extend Man from the virtual Person class
This type of declaration is helpful when you have an inheritance in the picture and can add properties as class own
Difference between both the mixin
The major difference between both mixins is when and where they will be used. Object-based mixins are a better option when you can a few common method and you wanted to attach that into any existing class
On the other hand, class-based mixins are good when you just creating a child class from any abstract class
Conclusion
Mixins can be good for helper methods and not for actual instance methods and if your application has an instance method then I will advise not to create mixin but classes.
You can find the source code here. Happy coding!
Go composable: Build apps faster like Lego
Bit is an open-source tool for building apps in a modular and collaborative way. Go composable to ship faster, more consistently, and easily scale.
Build apps, pages, user-experiences and UIs as standalone components. Use them to compose new apps and experiences faster. Bring any framework and tool into your workflow. Share, reuse, and collaborate to build together.
Help your team with:
Learn more
- How We Build Micro Frontends
- How we Build a Component Design System
- The Bit Blog
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
How to Create Mixins in JavaScript was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Piyush Dubey
Piyush Dubey | Sciencx (2022-09-24T10:46:10+00:00) How to Create Mixins in JavaScript. Retrieved from https://www.scien.cx/2022/09/24/how-to-create-mixins-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.