How to create a library and use it in Javascript

Pillagerplayz 💻🌐 — Sat, 17 Aug 2024 12:44:36 +0000

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!

How to share a library on cdnjs

Pillagerplayz 💻🌐 — Fri, 09 Aug 2024 00:19:04 +0000

Ever wanted to share your library on cdnjs.cloudflare.com? Then, you found the right place! Learn how by reading this post!

1. Requirements

These are the things you need before you start:
A Github account
A public repository for your library

2. Ensure your library meets requirements.

Your library should be open-source and meet the popularity criteria (e.g. 100 stars on Github or 500 downloads/month on npm)

3. Fork the cdnjs Repository.

Go to the cdnjs Github repository and fork it to your own Github account.

4. Add your library.

Open the terminal and clone your forked repository. Create a new directory for your library under the ajax/libs directory. Add your library files and a package.json file with the necessary metadata.

5. Create a Pull Request.

Once you’ve added your library, commit your changes and push them to your forked repository. Then, create a pull request to the main cdnjs repository.

6. Wait for Review.

The cdnjs team will review your pull request. If everything is in order, they’ll merge it, and your library will be available on cdnjs.

7. Conclusion

And that is how to share a library on cdnjs!
Consider leaving comments down below if I missed anything, give a compliment, or suggesting ideas.

Forem: JS Libraries

How to create a library and use it in Javascript

Chapter 1: Creating the library

Method 1: Making an object method (6 steps)

Tip: You can change the "LibObjectName" to the library 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.

Tip: You can add as many methods as your library needs.

Tip: The "parameters" are optional.

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.

Method 2: Making String Methods (4 steps)

Tip: Change "methodName" to whatever is needed for your library.

Tip: The "parameters" are optional.

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.

Method 3: Making custom functions (4 steps)

Tip: Change "funcName" to the function name.

Tip: This step is optional. You can skip this step if you don't want any parameters.

Method 4: Creating custom DOM's (5 steps)

Tip: Change "method" to the DOM name.

Tip: The parameters are optional.

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.

Tip: You can use multiple methods in your library!

Chapter 2: 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)

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)

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)

Method 4: Using Raw Github ✅ (4 steps)

Chapter 3: Conclusion

How to share a library on cdnjs

1. Requirements

2. Ensure your library meets requirements.

3. Fork the cdnjs Repository.

4. Add your library.

5. Create a Pull Request.

6. Wait for Review.

7. Conclusion

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: The Javascript `this` keyword gets the datatype and string that is using the string method. Use `this.toString()` to get the string only.