創(chuàng)建與框架無(wú)關(guān)的JavaScript插件

更新時(shí)間：2020年12月01日 10:09:40 作者：程序員張張

這篇文章主要介紹了創(chuàng)建與框架無(wú)關(guān)的JavaScript插件，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下

JavaScript 中的插件使我們能夠擴(kuò)展語(yǔ)言，以實(shí)現(xiàn)所需的某些強(qiáng)大（或不夠強(qiáng)大）的功能。插件/庫(kù)本質(zhì)上是打包的代碼，可以使我們免于一遍又一遍地編寫(xiě)相同的東西（功能）。

在 JavaScript 生態(tài)系統(tǒng)中，有數(shù)百個(gè)框架，這些框架中的每一個(gè)都為我們提供了一個(gè)創(chuàng)建插件的系統(tǒng)，以便為框架添加新的東西。

如果你看一下 NPM 注冊(cè)表，幾乎所有的 JavaScript 插件都是在那里發(fā)布的，你會(huì)看到有超過(guò)一百萬(wàn)個(gè)插件以簡(jiǎn)單庫(kù)和框架的形式發(fā)布。

為每個(gè)框架創(chuàng)建插件的方式可能會(huì)有很大不同。例如，Vue.js 有自己的插件系統(tǒng)，這與你為 React.js 創(chuàng)建插件的方式不同。然而，這一切都?xì)w結(jié)為相同的 JavaScript 代碼。

因此，使用普通 JavaScript 創(chuàng)建插件，讓你有能力創(chuàng)建一個(gè)無(wú)論在哪個(gè)框架下都能使用。

“與框架無(wú)關(guān)的 JavaScript 插件是無(wú)需框架上下文即可工作的插件，您可以在任何框架（甚至沒(méi)有框架）中使用插件”

構(gòu)建庫(kù)時(shí)要記住的事項(xiàng)

您應(yīng)該對(duì)插件有一個(gè)目標(biāo)——這是插件要實(shí)現(xiàn)的關(guān)鍵
您的插件應(yīng)易于使用以達(dá)到預(yù)期用途
您的插件應(yīng)在很大程度上可定制
您的插件應(yīng)該有一個(gè)文檔，指導(dǎo)將要使用該插件的開(kāi)發(fā)人員

現(xiàn)在，讓我們著眼于上述幾點(diǎn)。

我們將創(chuàng)造什么

在本文中，我將向您展示如何創(chuàng)建與框架無(wú)關(guān)的插件。在本教程中，我們將創(chuàng)建一個(gè)旋轉(zhuǎn)木馬/幻燈片插件——該插件的目標(biāo)。

這個(gè)插件會(huì)暴露一些方法，可以被插件的用戶調(diào)用 .next() 和 .prev()

起步

讓我們創(chuàng)建一個(gè)新的文件夾來(lái)存放我們的插件代碼和任何其他必要的文件，我將把我的文件夾稱為 TooSlidePlugin。

在這個(gè)文件夾中，在你喜歡的編輯器中創(chuàng)建一個(gè)新的 JavaScript 文件。這個(gè)文件將包含插件的代碼，我把我的文件叫做 tooSlide.js。

有時(shí)，我什至想像在開(kāi)始創(chuàng)建插件之前（從最終開(kāi)發(fā)人員的角度）如何使用插件。

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

上面的代碼假定有一個(gè)名為 TooSlides 的構(gòu)造函數(shù)，該構(gòu)造函數(shù)接收具有某些屬性的對(duì)象作為參數(shù)。對(duì)象的屬性是 slidesClass、container、nextButton 和 previousButton，這些是我們希望用戶能夠自定義的屬性。

我們將從將插件創(chuàng)建為單個(gè)構(gòu)造函數(shù)開(kāi)始，以便其本身具有名稱空間。

function ToolSidePlugin() {}

Options

由于我們的插件，TooSlides 需要一個(gè)選項(xiàng)參數(shù)，所以我們會(huì)定義一些默認(rèn)的屬性，這樣如果我們的用戶沒(méi)有指定自己的屬性，就會(huì)使用默認(rèn)的屬性。

function ToolSidePlugin(options) {
 let defaultOptions = {
  slideClass: ".singleSlide",
  container: ".slideContainer",
  nextButton: ".nextSlide",
  previousButton: ".previousSlide",
 };

 options = { ...defaultOptions, ...options };

 let _this = this;
 let slides = [];
 let currentSlideIdex = 0;
}

我們創(chuàng)建了一個(gè) defaultOptions 對(duì)象來(lái)保存一些屬性，我們還使用 JavaScript 擴(kuò)展操作符將傳入的選項(xiàng)與默認(rèn)選項(xiàng)合并。我們將 this 分配給另一個(gè)變量，因此我們?nèi)匀豢梢栽趦?nèi)部函數(shù)中對(duì)其進(jìn)行訪問(wèn)。

我們還創(chuàng)建了兩個(gè)變量 slides，它將保存所有我們想要用作幻燈片的圖片，以及 currentSlideIndex，它保存當(dāng)前正在顯示的幻燈片的索引。

接下來(lái)，由于我們的幻燈片需要有一些控制，可以用來(lái)向前和向后移動(dòng)幻燈片，我們將在構(gòu)造函數(shù)中添加下面的方法。

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() 方法中，我們創(chuàng)建了一個(gè)容器 DOM 元素來(lái)保存控件按鈕，我們自己創(chuàng)建了下一個(gè)和上一個(gè)按鈕，并將它們附加到 controlContainer。

然后我們給兩個(gè)按鈕附加事件監(jiān)聽(tīng)器，分別調(diào)用 .next() 和 .previous() 方法。別擔(dān)心，我們很快就會(huì)創(chuàng)建這些方法。

接下來(lái)，我們將添加兩個(gè)方法：.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() 方法采用參數(shù) index，這是我們要顯示的幻燈片的索引，此方法首先隱藏當(dāng)前正在顯示的任何幻燈片，然后僅顯示我們要顯示的幻燈片。

接下來(lái)，我們將添加 .next() 和 .previous() 輔助方法，分別幫助我們向前一步，或者向后一步（還記得我們之前附加的事件監(jiān)聽(tīng)器嗎？

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

這兩個(gè)方法基本上調(diào)用 .goToSlide() 方法，并將 currentSlideIndex 移動(dòng) 1。

現(xiàn)在，我們還將創(chuàng)建一個(gè) .init() 方法，該方法將在實(shí)例化構(gòu)造函數(shù)時(shí)幫助我們進(jìn)行設(shè)置。

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();
};

如您所見(jiàn)，.init() 方法獲取所有幻燈片圖像并將其存儲(chǔ)在我們之前聲明的 slides 數(shù)組中，并默認(rèn)隱藏所有圖像。

然后，它通過(guò)調(diào)用 .goToSlide(0) 方法顯示幻燈片中的第一張圖像，并且還通過(guò)調(diào)用 .prepareControls() 設(shè)置我們的控制按鈕。

為了收尾我們的構(gòu)造函數(shù)代碼，我們將在構(gòu)造函數(shù)中調(diào)用 .init() 方法，這樣每當(dāng)構(gòu)造函數(shù)被初始化時(shí)，.init() 方法總是被調(diào)用。

最終代碼如下所示：

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[index].style = "display: none";
   });
 };

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

 this.init();
}

添加 CSS

在存放我們的插件項(xiàng)目的文件夾中，我們將添加一個(gè) CSS 文件，其中包含我們的滑塊的基本樣式。我將把這個(gè)文件稱為 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, 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;
 }
}

測(cè)試我們的插件

為了測(cè)試我們的插件，我們將創(chuàng)建一個(gè) 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>測(cè)試幻燈片</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",
    container: ".slideContainer",
    nextButton: ".next",
    previousButton: ".prev",
   });
  </script>
 </body>
</html>

在 HTML 文件的頭部分，我調(diào)用了 tooSlide.css 文件，而在文件的末尾，我調(diào)用了 tooSlide.js 文件。

完成此操作后，我們將能夠?qū)嵗覀兊牟寮?gòu)造函數(shù)：

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

最后的效果：

為您的 JavaScript 項(xiàng)目編寫(xiě)文檔

文檔是你教人們?nèi)绾问褂媚愕牟寮?。因此，它需要你花一些心思?/p>

對(duì)于我們新創(chuàng)建的插件，我將從在項(xiàng)目目錄中創(chuàng)建 README.md 文件開(kāi)始。

發(fā)布你的插件

在編寫(xiě)了您的插件之后，您很可能希望其他開(kāi)發(fā)人員從您的新創(chuàng)建中受益，因此我將向您展示如何做到這一點(diǎn)。

你可以通過(guò)兩種方式讓你的插件對(duì)其他人可用：

在 Github 上托管它，當(dāng)您這樣做時(shí)，任何人都可以下載倉(cāng)庫(kù)，包括文件(.js 和.css)，并立即使用您的插件。
發(fā)布在 npm 上，請(qǐng)查看官方的 npm 文檔來(lái)指導(dǎo)您。
就是這樣。

結(jié)束

在本文中，我們構(gòu)建了一個(gè)插件來(lái)完成一件事：幻燈片圖像。

它也是零依賴的，現(xiàn)在我們可以開(kāi)始用我們的代碼來(lái)幫助別人，就像我們也得到了幫助一樣。

該插件教程的代碼可在我的 github 上找到：https://github.com/dunizb/CodeTest/tree/master/JavaScript/TooSlidePlugin

以上就是創(chuàng)建與框架無(wú)關(guān)的JavaScript插件的詳細(xì)內(nèi)容，更多關(guān)于創(chuàng)建 JavaScript插件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

創(chuàng)建與框架無(wú)關(guān)的JavaScript插件

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具