Ever wanted to create your own JS library and use it? Well, you went to the right place! Learn how by reading this post!
Chapter 1: Creating the library
These are the methods of creating the library!
Method 1: Making an object method (6 steps)
Step 1: Make a function.
function LibObjectName() {
};
Tip: You can change the "LibObjectName" to the library name.
Step 2: Make a constant of the object with the methods.
function LibObjectName() {
const OBJ_NAME = {};
};
Tip: Make the object with methods a constant so NOBODY could edit it.
Tip: Make the object name very random so it is secure.
Step 3: Put a return function to return the object with the methods.
function LibObjectName() {
const OBJ_NAME = {};
return OBJ_NAME;
}
Step 4: Put the methods in the object with methods.
function LibObjectName() {
const OBJ_NAME = {
"methodName": (parameters) => {
// Code goes here
}
};
return OBJ_NAME;
};
Tip: You can add as many methods as your library needs.
Tip: The "parameters" are optional.
Step 5: Make a constant of the library name with the library object.
const LibName = new LibObjectName();
Tip: The new keyword is optional. It works without and with the new keyword. The new keyword is used in most libraries that use this method.
Tip: Change "LibName" to the name of your library.
Tip: The library name constant can be put in or out of the library script. Some libraries use it inside the library script and some of the libraries need it out of the library script. When it is out, it is like an API Key.
Step 6: Final step, test all the methods to see if they work!
Here's an example library:
function HelloWorld() {
const HW_OBJ = {
"sayMessage": () => {
alert("Hello World!")
}
};
return HW_OBJ;
};
const helloworld = new HelloWorld();
helloworld.sayMessage();
Returns:
Hello World!
That is how to make a library with Method 1!
Method 2: Making String Methods (4 steps)
Step 1: Make the string method name.
String.prototype.methodName
Tip: Change "methodName" to whatever is needed for your library.
Step 2: Set it to a function value.
String.prototype.methodName = function(parameters) {
// Code goes here
};
Tip: The "parameters" are optional.
Step 3: Put the return function at the end of the code.
String.prototype.methodName = function(parameters) {
// Code goes here
return value;
};
Tip: The "value" is what the string will return.
Tip: The Javascript this keyword gets the datatype and string that is using the string method. Use this.toString() to get the string only.
Step 4: Final step, test all the string methods added!
Example Library with string method:
String.prototype.addPuncAtEnd = function(punc) {
return this.toString() + punc;
};
alert("What's your name".addPuncAtEnd("?"));
Returns:
What's your name?
That is how to make a library with Method 2!
Method 3: Making custom functions (4 steps)
Step 1: Add a function.
function funcName() {
};
Tip: Change "funcName" to the function name.
Step 2: Add Parameters. (Optional)
function funcName(parameters) {
};
Tip: This step is optional. You can skip this step if you don't want any parameters.
Step 3: Add code.
function funcName(parameters) {
// Code goes here
};
Step 4: Final step, test all the custom functions to see if they work!
Example Library:
function say(text) {
alert(text)
};
say("Hello World!")
Returns:
Hello World!
That is how to make a library with Method 3!
Method 4: Creating custom DOM's (5 steps)
Step 1: Make the document method.
document.method
Tip: Change "method" to the DOM name.
Step 2: Substituting it with a function.
document.method = function(parameters) {
};
Tip: The parameters are optional.
Step 3: Putting code in the function.
document.method = function(parameters) {
// Code goes here
};
Step 4: Put a return function. (optional)
document.method = function(parameters) {
// Code goes here
return value;
};
Tip: Change "value" to the value you want it to return
Tip: This step is optional. Skip this if you don't want it to return something.
Step 5: Final step, test every custom DOM method to see if they work!
Example Library:
document.changeText = function(text, id) {
document.getElementById(id).textContent = text;
};
document.changeText("Surprise!", "p");
Returns:
From jsfiddle.net (Fiddle Link)
That is how to create a library with Method 4!
Tip: You can use multiple methods in your library!
Chapter 2: Using the library.
These are methods of using the library!
Tip: When the checkmark (✅) is next to a method, that means that if a person wants to always automatically update the library, it'll update itself every time the library is updated!
Method 1: Import method (2 steps)
Step 1: Create your library.
- Open a code editor, write the JS library code, and save it as a JS file.
- Rename your JS file to the library name with the information like, version, build, etc. Step 2: Importing the library. You can use HTML:
<script src="libname.js"></script>
Or JavaScript:
import 'libname.js';
Tip: If you are sharing the file with other people to download, this method isn't the best. Because, if the library constantly updates, people will need to download another file and put the new file in all the projects that use it.
Method 2: Using Cloudflare cdnjs (2 steps)
Step 1: Share your library on cdnjs.cloudflare.com
Consider reading How to share a library on cdnjs to learn how to do this!
Step 2: Importing the library.
You can use HTML (recommended)
<script src="[cdnjs link here]">
Or JavaScript (not recommended)
let scriptElement = document.createElement("script").setAttribute("src", "[cdnjs link here]");
let elem = document.scriptElement;
let parentDiv = elem.parentNode;
parentDiv.insertBefore(scriptElement, elem);
Tip: A cdnjs link has a version in it. If a person wants to keep using the newest version of the library, he/she will have to update the cdnjs link for every project that uses it to the newest version link. So, this method isn't the sharpest tool in the shed.
Method 3: Using Raw Pastebin ✅ (5 steps)
Step 1: Create an account.
If you don't have an account, create your account on Pastebin. If you do, skip this step.
Step 2: Create a new JavaScript paste.
Step 3: Type your library source code in the box.
Step 4: Press "Create new paste".
Step 5: Importing the library.
You can use HTML (recommended)
<script src="https://www.pastebin.com/raw/[paste id]/"></script>
Or JavaScript (not recommended)
let scriptElement = document.createElement("script").setAttribute("src", "https://www.pastebin.com/raw/[paste id]/");
let elem = document.scriptElement;
let parentDiv = elem.parentNode;
parentDiv.insertBefore(scriptElement, elem);
Method 4: Using Raw Github ✅ (4 steps)
Step 1: Create an account on Github. If you already have an account, skip this step!
Step 2: Create a new repository of your library.
Step 3: Add the library file to your repository.
Step 4: Importing the library.
You can use HTML (recommended)
<script src="https://raw.githubusercontent.com/[user]/[repository name]/[branch]/[library file]/"></script>
Or JavaScript (not recommended)
let scriptElement = document.createElement("script").setAttribute("src", "https://raw.githubusercontent.com/[user]/[repository name]/[branch]/[library file]/");
let elem = document.scriptElement;
let parentDiv = elem.parentNode;
parentDiv.insertBefore(scriptElement, elem);
Chapter 3: Conclusion
And that is how to create and share a JavaScript library!
Make sure you add a reaction and bookmark this!
Comments will be helpful!
Hope this helped and have a great day! 😀
Make sure you follow me to get notifications about my posts!
Top comments (2)
Make sure you add to the discussion!
You can add questions, compliments, or suggestions in the comments!