Shulou(Shulou.com)06/03 Report--

How to create a framework-independent JavaScript plug-in, for this question, this article describes in detail the corresponding analysis and solutions, hoping to help more partners who want to solve this problem to find a more simple and easy way.

The plug-ins in JavaScript enable us to extend the language to implement some of the powerful (or not powerful) functions we need. Plug-ins / libraries are essentially packaged code that frees us from writing the same thing over and over again.

There are hundreds of frameworks in the JavaScript ecosystem, each of which provides us with a system for creating plug-ins to add something new to the framework.

If you look at the NPM registry, almost all the JavaScript plug-ins are released there, and you will see more than a million plug-ins released in the form of simple libraries and frameworks.

The way you create plug-ins for each framework can be very different. For example, Vue.js has its own plug-in system, which is different from the way you create plug-ins for React.js. However, it all boils down to the same JavaScript code.

Therefore, using normal JavaScript to create plug-ins gives you the ability to create one that can be used in any framework.

"frame-independent JavaScript plug-ins are plug-ins that work without framework context, and you can use plug-ins in any framework (or even no framework)."

Things to keep in mind when building a library

You should have a goal for the plug-in-- this is the key to the plug-in.

Your plug-in should be easy to use to achieve the desired purpose

Your plug-in should be customizable to a large extent

Your plug-in should have a document to guide developers who will use the plug-in

Now, let's focus on the above points.

What will we create?

In this article, I'll show you how to create a framework-independent plug-in. In this tutorial, we will create a merry-go-round / slide plug-in-the goal of the plug-in.

This plug-in exposes methods that can be called .Next () and .prev () by users of the plug-in.

Start

Let's create a new folder to hold our plug-in code and any other necessary files, and I'll call my folder TooSlidePlugin.

In this folder, create a new JavaScript file in your favorite editor. This file will contain the code for the plug-in, and I call my file tooSlide.js.

Sometimes I even imagine how to use the plug-in before I start creating it (from the perspective of the final developer).

Var slider = new ToolSidePlugin ({slideClass: ".singleSlide", container: ".slideContainer", nextButton: ".next", previousButton: ".prev"})

The above code assumes that there is a constructor named TooSlides that accepts an object with certain properties as parameters. The properties of the object are slidesClass, container, nextButton, and previousButton, which are properties that we want users to customize.

We will start by creating the plug-in as a single constructor so that it has a namespace.

Function ToolSidePlugin () {}

Options

Because our plug-in, TooSlides, requires an option parameter, we will define some default properties so that if our users do not specify their own properties, they will use the default properties.

Function ToolSidePlugin (options) {let defaultOptions = {slideClass: ".singleSlide", container: ".slideContainer", nextButton: ".nextSlide", previousButton: ".previousSlide"} options = {. DefaultOptions,... options}; let _ this = this; let slides = []; let currentSlideIdex = 0;}

We created a defaultOptions object to hold some properties, and we also used the JavaScript extension operator to merge the options passed in with the default options. We assign this to another variable, so we can still access it in the internal function.

We also created two variables, slides, which will hold all the pictures we want to use as slides, and currentSlideIndex, which holds the index of the slides currently being displayed.

Next, since our slide needs some control that can be used to move the slide forward and backward, we will add the following method to the constructor.

This.prepareControls = function () {const nextButton = document.createElement ("button"); const previousButton = document.createElement ("button"); nextButton.setAttribute ("class", "next"); nextButton.InnerHTML = "Next"; previousButton.setAttribute ("class", "prev"); nextButton.InnerHTML = "Prev"; let controleContainer = document.createElement ("div"); controleContainer.setAttribute ("class", "too-slide-control-container") ControleContainer.appendChild (previousButton); controleContainer.appendChild (nextButton); document.querySelector (options.container) .appendChild (controleContainer); nextButton.addEventListener ("click", function () {_ this.next ();}); previousButton.addEventListener ("click", function () {_ this.previous ();});}

In the .prepareControls () method, we created a container DOM element to hold the control buttons, and we created the next and previous buttons ourselves and attached them to the controlContainer.

Then we attach event listeners to the two buttons, calling the .next () and .listen () methods, respectively. Don't worry, we'll create these methods soon.

Next, we will add two methods: .goToSlide () and .hideOtherSlides ().

This.goToSlide = function (index) {this.hideOtherSlides (); if (index > slides.length-1) {index = 0;} if (index)

< 0) { index = slides.length - 1; } slides[index].style = "display:block"; currentSlideIndex = index; } this.hideOtherSlides = function() { document.querySelectorAll(options.slidesClass).forEach((slide, index) =>

{slides [index] .style = "display: none"})}

The .goToSlide () method takes the parameter index, which is the index of the slide we want to show. This method first hides any slides that are currently being displayed, and then displays only the slides we want to display.

Next, we will add .next () and .slave () helper methods to help us step forward or backward, respectively (remember the event listeners we attached earlier?

This.next = function () {this.goToSlide (currentSlideIndex + 1);} this.previous = function () {this.goToSlide (currentSlideIndex-1);}

These two methods basically call the .goToSlide () method and move the currentSlideIndex by 1.

Now we will also create a .init () method that will help us set up when we instantiate the constructor.

This.init = function () {document.querySelectorAll (options.container). ClassName + = "too-slide-slider-container"; document.querySelectorAll (options.slidesClass). ForEach ((slide, index) = > {slides [index] = index; slides.style = "display:none"; slides.classname = "too-slide-single-slide too-slide-fade";}); this.goToSlide (0); this.prepareControls ();}

As you can see, the .init () method takes all the slide images and stores them in the slides array we declared earlier, and hides all images by default.

It then displays the first image in the slide by calling the .goToSlide (0) method, and also sets our control button by calling .prepareControls ().

To wrap up our constructor code, we will call the .init () method in the constructor so that the .init () method is always called whenever the constructor is initialized.

The final code is as follows:

Function ToolSidePlugin (options) {let defaultOptions = {slidesClass: ".singleSlide", container: ".slideContainer", nextButton: ".nextSlide", previousButton: ".previousSlide"} options = {... defaultOptions,... options}; let _ this = this; let slides = []; let currentSlideIdex = 0; this.init = function () {document.querySelectorAll (options.container). ClassName + = "too-slide-slider-container" Document.querySelectorAll (options.slidesClass) .forEach ((slide, index) = > {slides [index] = index; slides [index] .style = "display:none"; slides [index] .className = "too-slide-single-slide too-slide-fade";}); this.goToSlide (0); this.prepareControls ();} this.prepareControls = function () {const nextButton = document.createElement ("button") Const previousButton = document.createElement ("button"); nextButton.setAttribute ("class", "next"); nextButton.InnerHTML = "Next"; previousButton.setAttribute ("class", "prev"); nextButton.InnerHTML = "Prev"; let controleContainer = document.createElement ("div"); controleContainer.setAttribute ("class", "too-slide-control-container"); controleContainer.appendChild (previousButton) ControleContainer.appendChild (nextButton); document.querySelector (options.container) .appendChild (controleContainer); nextButton.addEventListener ("click", function () {_ this.next ();}); previousButton.addEventListener ("click", function () {_ this.previous ();});} this.goToSlide = function (index) {this.hideOtherSlides () If (index > slides.length-1) {index = 0;} if (index

< 0) { index = slides.length - 1; } slides[index].style = "display:block"; currentSlideIndex = index; } this.hideOtherSlides = function() { document.querySelectorAll(options.slidesClass).forEach((slide, index) =>

{slides.style = "display: none"}} this.next = function () {this.goToSlide (currentSlideIndex + 1);} this.previous = function () {this.goToSlide (currentSlideIndex-1);} this.init ();}

Add CSS

In the folder where our plug-in project is stored, we will add a CSS file that contains the basic style of our slider. I will call this file tooSlide.css.

* {box-sizing: border-box} body {font-family: Verdana, sans-serif; margin:0; padding: 30px;} .too-slide-single-slide {display: none; max-height: 100%; width: 100%;} .too-slide-single-slide img {height: 100%; width: 100%;} img {vertical-align: middle;} / * Slideshow container * / .too-slide-slider-container {width: 100%; max-width: 100% Position: relative; margin: auto; height: 400px;} .prev, .next {cursor: pointer; position: absolute; top: 50%; width: auto; padding: 10px; margin-right: 15px; margin-left: 15px; margin-top:-22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; border-style: unset; background-color: blue } .next {right: 0; border-radius: 3px 003px;} .prev: hover, .Next: hover {background-color: rgba;} .too-slide-fade {- webkit-animation-name: too-slide-fade;-webkit-animation-duration: 1.5s; animation-name: too-slide-fade; animation-duration: 1.5s } @-webkit-keyframes too-slide-fade {from {opacity: .4} to {opacity: 1} @ keyframes too-slide-fade {from {opacity: .4} to {opacity: 1}} / * On smaller screens, decrease text size * / @ media only screen and (max-width: 300px) {.prev, .next, .text {font-size: 11px}}

Test our plug-in

To test our plug-in, we will create a HTML file, which I will name index.html. We will also add four images as slides, all in the same directory as our plug-in JavaScript code.

My HTML file is as follows:

Test slides

Var slider = new ToolSidePlugin ({slideClass: ".singleSlide", container: ".slideContainer", nextButton: ".next", previousButton: ".prev"})

At the beginning of the HTML file, I called the tooSlide.css file, and at the end of the file, I called the tooSlide.js file.

After doing this, we will be able to instantiate our plug-in constructor:

Var slider = new ToolSidePlugin ({slideClass: ".singleSlide", container: ".slideContainer", nextButton: ".next", previousButton: ".prev"})

The final effect:

Document your JavaScript project

The documentation is that you teach people how to use your plug-in. So, it takes some thought from you.

For our newly created plug-in, I'll start by creating a README.md file in the project directory.

Release your plug-in

After you write your plug-in, you probably want other developers to benefit from your new creation, so I'll show you how to do this.

You can make your plugin available to others in two ways:

Host it on Github, and when you do, anyone can download the repository, including files (.js and .css), and use your plug-in immediately.

Posted on npm, please check the official npm documentation to guide you.

This is the answer to the question about how to create a framework-independent JavaScript plug-in. I hope the above content can be of some help to you. If you still have a lot of doubts to solve, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.