建立與框架無關的JavaScript外掛
JavaScript 中的外掛使我們能夠擴充套件語言，以實現所需的某些強大（或不夠強大）的功能。外掛/庫本質上是打包的程式碼，可以使我們免於一遍又一遍地編寫相同的東西（功能）。
在 JavaScript 生態系統中，有數百個框架，這些框架中的每一個都為我們提供了一個建立外掛的系統，以便為框架新增新的東西。
如果你看一下 NPM 登錄檔，幾乎所有的 JavaScript 外掛都是在那裡釋出的，你會看到有超過一百萬個外掛以簡單庫和框架的形式釋出。
為每個框架建立外掛的方式可能會有很大不同。例如，Vue.js 有自己的外掛系統，這與你為 React.js 建立外掛的方式不同。然而，這一切都歸結為相同的 JavaScript 程式碼。
因此，使用普通 JavaScript 建立外掛，讓你有能力建立一個無論在哪個框架下都能使用。
“與框架無關的 JavaScript 外掛是無需框架上下文即可工作的外掛，您可以在任何框架（甚至沒有框架）中使用外掛”
構建庫時要記住的事項
- 您應該對外掛有一個目標——這是外掛要實現的關鍵
- 您的外掛應易於使用以達到預期用途
- 您的外掛應在很大程度上可定製
- 您的外掛應該有一個文件，指導將要使用該外掛的開發人員
現在，讓我們著眼於上述幾點。
我們將創造什麼
在本文中，我將向您展示如何建立與框架無關的外掛。在本教程中，我們將建立一個旋轉木馬/幻燈片外掛——該外掛的目標。
這個外掛會暴露一些方法，可以被外掛的使用者呼叫 .next() 和 .prev()
起步
讓我們建立一個新的資料夾來存放我們的外掛程式碼和任何其他必要的檔案，我將把我的資料夾稱為 TooSlidePlugin。
在這個資料夾中，在你喜歡的編輯器中建立一個新的 JavaScript 檔案。這個檔案將包含外掛的程式碼，我把我的檔案叫做 tooSlide.js。
有時，我什至想像在開始建立外掛之前（從最終開發人員的角度）如何使用外掛。
var slider = new ToolSidePlugin({
slideClass: ".singleSlide",container: ".slideContainer",nextButton: ".next",previousButton: ".prev",});上面的程式碼假定有一個名為 TooSlides 的建構函式，該建構函式接收具有某些屬性的物件作為引數。物件的屬性是 slidesClass、container、nextButton 和 previousButton，這些是我們希望使用者能夠自定義的屬性。
我們將從將外掛建立為單個建構函式開始，以便其本身具有名稱空間。
function ToolSidePlugin() {}
Options
由於我們的外掛，TooSlides 需要一個選項引數，所以我們會定義一些預設的屬性，這樣如果我們的使用者沒有指定自己的屬性，就會使用預設的屬性。
function ToolSidePlugin(options) {
let defaultOptions = {
slideClass: ".singleSlide",nextButton: ".nextSlide",previousButton: ".previousSlide",};
options = { ...defaultOptions,...options };
let _this = this;
let slides = [];
let currentSlideIdex = 0;
}
我們建立了一個 defaultOptions 物件來儲存一些屬性，我們還使用 JavaScript 擴充套件操作符將傳入的選項與預設選項合併。我們將 this 分配給另一個變數，因此我們仍然可以在內部函式中對其進行訪問。
我們還建立了兩個變數 slides，它將儲存所有我們想要用作幻燈片的圖片，以及 currentSlideIndex，它儲存當前正在顯示的幻燈片的索引。
接下來，由於我們的幻燈片需要有一些控制，可以用來向前和向後移動幻燈片，我們將在建構函式中新增下面的方法。
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();
});
};
在 .prepareControls() 方法中，我們建立了一個容器 DOM 元素來儲存控制元件按鈕，我們自己建立了下一個和上一個按鈕，並將它們附加到 controlContainer。
然後我們給兩個按鈕附加事件監聽器，分別呼叫 .next() 和 .previous() 方法。別擔心，我們很快就會建立這些方法。
接下來，我們將新增兩個方法：.goToSlide() 和 .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";
});
};
.goToSlide() 方法採用引數 index，這是我們要顯示的幻燈片的索引，此方法首先隱藏當前正在顯示的任何幻燈片，然後僅顯示我們要顯示的幻燈片。
接下來，我們將新增 .next() 和 .previous() 輔助方法，分別幫助我們向前一步，或者向後一步（還記得我們之前附加的事件監聽器嗎？
this.next = function() {
this.goToSlide(currentSlideIndex + 1);
};
this.previous = function() {
this.goToSlide(currentSlideIndex - 1);
};
這兩個方法基本上呼叫 .goToSlide() 方法，並將 currentSlideIndex 移動 1。
現在，我們還將建立一個 .init() 方法，該方法將在例項化建構函式時幫助我們進行設定。
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();
};
如您所見，.init() 方法獲取所有幻燈片影象並將其儲存在我們之前宣告的 slides 陣列中，並預設隱藏所有影象。
然後，它通過呼叫 .goToSlide(0) 方法顯示幻燈片中的第一張影象，並且還通過呼叫 .prepareControls() 設定我們的控制按鈕。
為了收尾我們的建構函式程式碼，我們將在建構函式中呼叫 .init() 方法，這樣每當建構函式被初始化時，.init() 方法總是被呼叫。
最終程式碼如下所示：
function ToolSidePlugin(options) {
let defaultOptions = {
slidesClass: ".singleSlide",...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[index].style = "display: none";
});
};
this.next = function() {
this.goToSlide(currentSlideIndex + 1);
};
this.previous = function() {
this.goToSlide(currentSlideIndex - 1);
};
this.init();
}
新增 CSS
在存放我們的外掛專案的資料夾中，我們將新增一個 CSS 檔案，其中包含我們的滑塊的基本樣式。我將把這個檔案稱為 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 0 0 3px;
}
.prev:hover,.next:hover {
background-color: rgba(0,0.8);
}
.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: 0.4;
}
to {
opacity: 1;
}
}
@keyframes too-slide-fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
/* On smaller screens,decrease text size */
@media only screen and (max-width: 300px) {
.prev,.next,.text {
font-size: 11px;
}
}
測試我們的外掛
為了測試我們的外掛，我們將建立一個 HTML 檔案，我將其命名為 index.html。我們還將新增 4 張圖片用作幻燈片，所有圖片都與我們的外掛 JavaScript 程式碼位於同一目錄中。
我的 HTML 檔案如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1.0"
/>
<title>測試幻燈片</title>
<link rel="stylesheet" href="tooSlide.css" rel="external nofollow" />
</head>
<body>
<div class="contaoner">
<div class="slideContainer">
<div class="singleSlide">
<img
src="slide1.png"
alt="slide1"
class="slideImage"
/>
</div>
<div class="singleSlide">
<img
src="slide2.png"
alt="slide2"
class="slideImage"
/>
</div>
<div class="singleSlide">
<img
src="slide3.png"
alt="slide3"
class="slideImage"
/>
</div>
<div class="singleSlide">
<img
src="slide4.png"
alt="slide4"
class="slideImage"
/>
</div>
</div>
</div>
<script src="tooSlide.js"></script>
<script>
var slider = new ToolSidePlugin({
slideClass: ".singleSlide",});
</script>
</body>
</html>
在 HTML 檔案的頭部分，我呼叫了 tooSlide.css 檔案，而在檔案的末尾，我呼叫了 tooSlide.js 檔案。
完成此操作後，我們將能夠例項化我們的外掛建構函式：
var slider = new ToolSidePlugin({
slideClass: ".singleSlide",});
最後的效果：
為您的 JavaScript 專案編寫文件
文件是你教人們如何使用你的外掛。因此，它需要你花一些心思。
對於我們新建立的外掛，我將從在專案目錄中建立 README.md 檔案開始。
釋出你的外掛
在編寫了您的外掛之後，您很可能希望其他開發人員從您的新建立中受益，因此我將向您展示如何做到這一點。
你可以通過兩種方式讓你的外掛對其他人可用：
在 Github 上託管它，當您這樣做時，任何人都可以下載倉庫，包括檔案(.js 和.css)，並立即使用您的外掛。
釋出在 npm 上，請檢視官方的 npm 文件來指導您。
就是這樣。
結束
在本文中，我們構建了一個外掛來完成一件事：幻燈片影象。
它也是零依賴的，現在我們可以開始用我們的程式碼來幫助別人，就像我們也得到了幫助一樣。
該外掛教程的程式碼可在我的 github 上找到：https://github.com/dunizb/CodeTest/tree/master/JavaScript/TooSlidePlugin
以上就是建立與框架無關的JavaScript外掛的詳細內容，更多關於建立 JavaScript外掛的資料請關注我們其它相關文章！