Hi. I'm the engineer Kawashima.
The other day, we invited technical advisors from outside the company and held an online study session on JavaScript.
The purpose of this study session is to create an original library using the JavaScript code that we have accumulated every day, and I would like to introduce it to you as there are many useful advice.

Introduction

It's not as much an external library or framework as it is, but how do you often implement a bit of functionality that we use standardly—like smooth scrolling, switching between fixed header/footer displays and unclassifying under the button press?

I think that there is little chance to write from 0 for each case because these are effective codes, but the simplest method is to copy and paste other cases' code and customize them for each case.

But it's a bit tedious to customize the miscellaneous code as you do every time, especially if there are more projects and more members involved in development.
So at this study session, I was taught the knowledge to improve the versatility of the diversified code and transform it into a library.

Making Existing Code More Usable

An important point in libraryization is to rewrite existing code into a generic form.
For example, let’s say you are using the following code by customizing it for each project.
This is a simple function that de-classes by scrolling distance.

The file configuration when using this code is assumed to be:

It is not very generic to rewrite all over the code on a per-item basis (there are also ways of aligning HTML/CSS side of your code, but in that case you need to create and share coding conventions).
To make use of such code as an asset, one more trick is needed.

leverage function arguments

JavaScript functions can increase versatility by specifying arguments.
Let’s rewrite the code so that arguments can be used in a customised location for each project: add an argument into the cuckoo of the first line “function ()” and replace each part with its own argument.

When executing a function, you just pass each value to the argument.
In the example above, the argument target corresponds to "the element used in this case", class_name is "the class name used in this case" and pos_h corresponds to "the pixel value used in this case".
As in the previous example, there is no need to fine-tune values in your code; if you want to use them on other projects, you can just change arguments for line 22.

How to Create and Use Original Library

Now, using arguments has increased the versatility of our code and made it easier to use for various projects.
Let's put these together and make it an original library.
The basic idea is as follows.

The file configuration assumes the following:

Based on the above, I tried to create an image of a website using original libraries on codePen.
Scrolling the result screen at 300 pixels or more will switch the header to a fixed display depending on the function in the library (*You may not see it well with your smartphone. Please check from your PC).

See the Pen Create a sample of an original library by sayaka (@river_is_land) on CodePen.

You can see that you are reading an external library in the HTML tab and executing a function by passing values to arguments in the JS tab.
In this way, you can use the library functionality in a simple description of each .js file for each project.

Commentary

js file for each project, the function in the original library is executed by the following description.

NSW_EFFECTOR.initScrollerFix("#header","fixed",300);

And inside the original library (nsw_effector_sample.js) is as follows:

By argument, the target element "#header" is specified to add class "fixed" for display fixation only when scrolling at least 300"px.
The fourth line, window.NSW_EFFECTOR is a notation that indicates the intentionally defined global function so functions can be used from outside of the library. JavaScript Applications - Window Objects and the Global State of Practice

For example, only one function is described in the library: "NSW_EFFECTOR.initScrollerFix".
However, there are still many features that can be utilized in general on websites.
It is possible to enrich the library by adding various functions from here such as "NSW_EFFECTOR.initGnavBtn".

instead

JavaScript is no longer an essential part of website creation.
There are many useful libraries out there, but depending on the site you’re overspeculating or trying to squeeze your display speed because of capacity, there is a downside if you don’t take into account.
In such a case, I think that if you write your own code assets as an original library, you can use only the necessary features and will help to create more efficient sites.