DEV Community

Cover image for How to create a library and use it in Javascript
Pillagerplayz πŸ’»πŸŒ for JS Libraries

Posted on • Edited on

How to create a library and use it in Javascript

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() {
};
Enter fullscreen mode Exit fullscreen mode

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 = {};
};
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Put the methods in the object with methods.

function LibObjectName() {
    const OBJ_NAME = {
        "methodName": (parameters) => {
           // Code goes here
        }
    };
    return OBJ_NAME;
};
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

Returns:

Hello World!
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
};
Enter fullscreen mode Exit fullscreen mode

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;
};
Enter fullscreen mode Exit fullscreen mode

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("?"));
Enter fullscreen mode Exit fullscreen mode

Returns:

What's your name?
Enter fullscreen mode Exit fullscreen mode

That is how to make a library with Method 2!

Method 3: Making custom functions (4 steps)

Step 1: Add a function.

function funcName() {
};
Enter fullscreen mode Exit fullscreen mode

Tip: Change "funcName" to the function name.

Step 2: Add Parameters. (Optional)

function funcName(parameters) {
};
Enter fullscreen mode Exit fullscreen mode

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
};
Enter fullscreen mode Exit fullscreen mode

Step 4: Final step, test all the custom functions to see if they work!
Example Library:

function say(text) {
    alert(text)
};
say("Hello World!")
Enter fullscreen mode Exit fullscreen mode

Returns:

Hello World!
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Tip: Change "method" to the DOM name.

Step 2: Substituting it with a function.

document.method = function(parameters) {
};
Enter fullscreen mode Exit fullscreen mode

Tip: The parameters are optional.

Step 3: Putting code in the function.

document.method = function(parameters) {
    // Code goes here
};
Enter fullscreen mode Exit fullscreen mode

Step 4: Put a return function. (optional)

document.method = function(parameters) {
    // Code goes here
    return value;
};
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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.

  1. Open a code editor, write the JS library code, and save it as a JS file.
  2. 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>
Enter fullscreen mode Exit fullscreen mode

Or JavaScript:

import 'libname.js';
Enter fullscreen mode Exit fullscreen mode

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]">
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
pillagerplayz profile image
Pillagerplayz πŸ’»πŸŒ

Make sure you add to the discussion!

Collapse
 
pillagerplayz profile image
Pillagerplayz πŸ’»πŸŒ

You can add questions, compliments, or suggestions in the comments!