日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
如何創(chuàng)建與框架無關(guān)的JavaScript插件

[[350505]]

創(chuàng)新互聯(lián)專注于大同企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,商城網(wǎng)站制作。大同網(wǎng)站建設(shè)公司,為大同等地區(qū)提供建站服務(wù)。全流程按需定制，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

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

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

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

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

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

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

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

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

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

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

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

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

起步

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

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

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

 
 
 
 
    
  
  
  
  
  1. var slider = new ToolSidePlugin({ 
    2.   
  
  
  
  2.   slideClass: ".singleSlide", 
    3.   
  
  
  
  3.   container: ".slideContainer", 
    4.   
  
  
  
  4.   nextButton: ".next", 
    5.   
  
  
  
  5.   previousButton: ".prev" 
    6.   
  
  
  
  6. }) 
    7.

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

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

 
 
 
 
    
  
  
  
  
  1. function ToolSidePlugin() { 
    2.   
  
  
  
  2.    
    3.   
  
  
  
  3. } 
    4.

Options

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

 
 
 
 
    
  
  
  
  
  1. function ToolSidePlugin(options) { 
    2.   
  
  
  
  2.   let defaultOptions = { 
    3.   
  
  
  
  3.     slideClass: ".singleSlide", 
    4.   
  
  
  
  4.     container: ".slideContainer", 
    5.   
  
  
  
  5.     nextButton: ".nextSlide", 
    6.   
  
  
  
  6.     previousButton: ".previousSlide" 
    7.   
  
  
  
  7.   } 
    8.   
  
  
  
  8.    
    9.   
  
  
  
  9.   options = { ...defaultOptions, ...options}; 
    10.   
  
  
  
  10.    
    11.   
  
  
  
  11.   let _this = this; 
    12.   
  
  
  
  12.   let slides = []; 
    13.   
  
  
  
  13.   let currentSlideIdex = 0; 
    14.   
  
  
  
  14. } 
    15.

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

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

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

 
 
 
 
    
  
  
  
  
  1. this.prepareControls = function() { 
    2.   
  
  
  
  2.   const nextButton = document.createElement("button"); 
    3.   
  
  
  
  3.   const previousButton = document.createElement("button"); 
    4.   
  
  
  
  4.    
    5.   
  
  
  
  5.   nextButton.setAttribute("class", "next"); 
    6.   
  
  
  
  6.   nextButton.InnerHTML = "Next"; 
    7.   
  
  
  
  7.    
    8.   
  
  
  
  8.   previousButton.setAttribute("class", "prev"); 
    9.   
  
  
  
  9.   nextButton.InnerHTML = "Prev"; 
    10.   
  
  
  
  10.    
    11.   
  
  
  
  11.   let controleContainer = document.createElement("div"); 
    12.   
  
  
  
  12.    
    13.   
  
  
  
  13.   controleContainer.setAttribute("class", "too-slide-control-container"); 
    14.   
  
  
  
  14.    
    15.   
  
  
  
  15.   controleContainer.appendChild(previousButton); 
    16.   
  
  
  
  16.   controleContainer.appendChild(nextButton); 
    17.   
  
  
  
  17.    
    18.   
  
  
  
  18.   document.querySelector(options.container).appendChild(controleContainer); 
    19.   
  
  
  
  19.    
    20.   
  
  
  
  20.   nextButton.addEventListener("click", function() { 
    21.   
  
  
  
  21.     _this.next(); 
    22.   
  
  
  
  22.   }); 
    23.   
  
  
  
  23.   previousButton.addEventListener("click", function() { 
    24.   
  
  
  
  24.     _this.previous(); 
    25.   
  
  
  
  25.   }); 
    26.   
  
  
  
  26. } 
    27.

在 .prepareControls() 方法中，我們創(chuàng)建了一個(gè)容器DOM元素來保存控件按鈕，我們自己創(chuàng)建了下一個(gè)和上一個(gè)按鈕，并將它們附加到 controlContainer。

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

接下來，我們將添加兩個(gè)方法：.goToSlide()和 .hideOtherSlides()。

 
 
 
 
    
  
  
  
  
  1. this.goToSlide = function(index) { 
    2.   
  
  
  
  2.   this.hideOtherSlides(); 
    3.   
  
  
  
  3.   if(index > slides.length - 1) { 
    4.   
  
  
  
  4.     index = 0; 
    5.   
  
  
  
  5.   } 
    6.   
  
  
  
  6.   if(index < 0) { 
    7.   
  
  
  
  7.     index = slides.length - 1; 
    8.   
  
  
  
  8.   } 
    9.   
  
  
  
  9.   slides[index].style = "display:block"; 
    10.   
  
  
  
  10.   currentSlideIndex = index; 
    11.   
  
  
  
  11. } 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13. this.hideOtherSlides = function() { 
    14.   
  
  
  
  14.   document.querySelectorAll(options.slidesClass).forEach((slide, index) => { 
    15.   
  
  
  
  15.     slides[index].style = "display: none" 
    16.   
  
  
  
  16.   }) 
    17.   
  
  
  
  17. } 
    18.

.goToSlide() 方法采用參數(shù) index，這是我們要顯示的幻燈片的索引，此方法首先隱藏當(dāng)前正在顯示的任何幻燈片，然后僅顯示我們要顯示的幻燈片。

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

 
 
 
 
    
  
  
  
  
  1. this.next = function() { 
    2.   
  
  
  
  2.   this.goToSlide(currentSlideIndex + 1); 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4. this.previous = function() { 
    5.   
  
  
  
  5.   this.goToSlide(currentSlideIndex - 1); 
    6.   
  
  
  
  6. } 
    7.

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

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

 
 
 
 
    
  
  
  
  
  1. this.init = function() { 
    2.   
  
  
  
  2.   document.querySelectorAll(options.container).className += " too-slide-slider-container"; 
    3.   
  
  
  
  3.   document.querySelectorAll(options.slidesClass).forEach((slide, index) => { 
    4.   
  
  
  
  4.     slides[index] = index; 
    5.   
  
  
  
  5.     slides[index].style = "display:none"; 
    6.   
  
  
  
  6.     slides[index].className = " too-slide-single-slide too-slide-fade"; 
    7.   
  
  
  
  7.   }); 
    8.   
  
  
  
  8.    
    9.   
  
  
  
  9.   this.goToSlide(0); 
    10.   
  
  
  
  10.   this.prepareControls(); 
    11.   
  
  
  
  11. } 
    12.

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

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

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

最終代碼如下所示：

 
 
 
 
    
  
  
  
  
  1. function ToolSidePlugin(options) { 
    2.   
  
  
  
  2.   let defaultOptions = { 
    3.   
  
  
  
  3.     slidesClass: ".singleSlide", 
    4.   
  
  
  
  4.     container: ".slideContainer", 
    5.   
  
  
  
  5.     nextButton: ".nextSlide", 
    6.   
  
  
  
  6.     previousButton: ".previousSlide" 
    7.   
  
  
  
  7.   } 
    8.   
  
  
  
  8.    
    9.   
  
  
  
  9.   options = { ...defaultOptions, ...options}; 
    10.   
  
  
  
  10.    
    11.   
  
  
  
  11.   let _this = this; 
    12.   
  
  
  
  12.   let slides = []; 
    13.   
  
  
  
  13.   let currentSlideIdex = 0; 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15.   this.init = function() { 
    16.   
  
  
  
  16.     document.querySelectorAll(options.container).className += " too-slide-slider-container"; 
    17.   
  
  
  
  17.     document.querySelectorAll(options.slidesClass).forEach((slide, index) => { 
    18.   
  
  
  
  18.       slides[index] = index; 
    19.   
  
  
  
  19.       slides[index].style = "display:none"; 
    20.   
  
  
  
  20.       slides[index].className = " too-slide-single-slide too-slide-fade"; 
    21.   
  
  
  
  21.     }); 
    22.   
  
  
  
  22.      
    23.   
  
  
  
  23.     this.goToSlide(0); 
    24.   
  
  
  
  24.     this.prepareControls(); 
    25.   
  
  
  
  25.   } 
    26.   
  
  
  
  26.  
    27.   
  
  
  
  27.   this.prepareControls = function() { 
    28.   
  
  
  
  28.     const nextButton = document.createElement("button"); 
    29.   
  
  
  
  29.     const previousButton = document.createElement("button"); 
    30.   
  
  
  
  30.      
    31.   
  
  
  
  31.     nextButton.setAttribute("class", "next"); 
    32.   
  
  
  
  32.     nextButton.InnerHTML = "Next"; 
    33.   
  
  
  
  33.      
    34.   
  
  
  
  34.     previousButton.setAttribute("class", "prev"); 
    35.   
  
  
  
  35.     nextButton.InnerHTML = "Prev"; 
    36.   
  
  
  
  36.      
    37.   
  
  
  
  37.     let controleContainer = document.createElement("div"); 
    38.   
  
  
  
  38.      
    39.   
  
  
  
  39.     controleContainer.setAttribute("class", "too-slide-control-container"); 
    40.   
  
  
  
  40.      
    41.   
  
  
  
  41.     controleContainer.appendChild(previousButton); 
    42.   
  
  
  
  42.     controleContainer.appendChild(nextButton); 
    43.   
  
  
  
  43.      
    44.   
  
  
  
  44.     document.querySelector(options.container).appendChild(controleContainer); 
    45.   
  
  
  
  45.      
    46.   
  
  
  
  46.     nextButton.addEventListener("click", function() { 
    47.   
  
  
  
  47.       _this.next(); 
    48.   
  
  
  
  48.     }); 
    49.   
  
  
  
  49.     previousButton.addEventListener("click", function() { 
    50.   
  
  
  
  50.       _this.previous(); 
    51.   
  
  
  
  51.     }); 
    52.   
  
  
  
  52.   } 
    53.   
  
  
  
  53.  
    54.   
  
  
  
  54.   this.goToSlide = function(index) { 
    55.   
  
  
  
  55.     this.hideOtherSlides(); 
    56.   
  
  
  
  56.     if(index > slides.length - 1) { 
    57.   
  
  
  
  57.       index = 0; 
    58.   
  
  
  
  58.     } 
    59.   
  
  
  
  59.     if(index < 0) { 
    60.   
  
  
  
  60.       index = slides.length - 1; 
    61.   
  
  
  
  61.     } 
    62.   
  
  
  
  62.     slides[index].style = "display:block"; 
    63.   
  
  
  
  63.     currentSlideIndex = index; 
    64.   
  
  
  
  64.   } 
    65.   
  
  
  
  65.    
    66.   
  
  
  
  66.   this.hideOtherSlides = function() { 
    67.   
  
  
  
  67.     document.querySelectorAll(options.slidesClass).forEach((slide, index) => { 
    68.   
  
  
  
  68.       slides[index].style = "display: none" 
    69.   
  
  
  
  69.     }) 
    70.   
  
  
  
  70.   } 
    71.   
  
  
  
  71.  
    72.   
  
  
  
  72.   this.next = function() { 
    73.   
  
  
  
  73.     this.goToSlide(currentSlideIndex + 1); 
    74.   
  
  
  
  74.   } 
    75.   
  
  
  
  75.   this.previous = function() { 
    76.   
  
  
  
  76.     this.goToSlide(currentSlideIndex - 1); 
    77.   
  
  
  
  77.   } 
    78.   
  
  
  
  78.  
    79.   
  
  
  
  79.   this.init(); 
    80.   
  
  
  
  80. } 
    81.

添加CSS

在存放我們的插件項(xiàng)目的文件夾中，我們將添加一個(gè)CSS文件，其中包含我們的滑塊的基本樣式。我將把這個(gè)文件稱為 tooSlide.css。

 
 
 
 
    
  
  
  
  
  1. * {box-sizing: border-box} 
    2.   
  
  
  
  2.   
    3.   
  
  
  
  3. body {font-family: Verdana, sans-serif; margin:0; padding: 30px;} 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. .too-slide-single-slide { 
    6.   
  
  
  
  6.   display: none;  
    7.   
  
  
  
  7.   max-height: 100%; 
    8.   
  
  
  
  8.   width: 100%;  
    9.   
  
  
  
  9. } 
    10.   
  
  
  
  10.   
    11.   
  
  
  
  11. .too-slide-single-slide img{ 
    12.   
  
  
  
  12.   height: 100%; 
    13.   
  
  
  
  13.   width: 100%; 
    14.   
  
  
  
  14. } 
    15.   
  
  
  
  15. img {vertical-align: middle;} 
    16.   
  
  
  
  16.   
    17.   
  
  
  
  17. /* Slideshow container */ 
    18.   
  
  
  
  18. .too-slide-slider-container { 
    19.   
  
  
  
  19.   width: 100%; 
    20.   
  
  
  
  20.   max-width: 100%; 
    21.   
  
  
  
  21.   position: relative; 
    22.   
  
  
  
  22.   margin: auto; 
    23.   
  
  
  
  23.   height: 400px; 
    24.   
  
  
  
  24. } 
    25.   
  
  
  
  25.  
    26.   
  
  
  
  26. .prev, .next { 
    27.   
  
  
  
  27.   cursor: pointer; 
    28.   
  
  
  
  28.   position: absolute; 
    29.   
  
  
  
  29.   top: 50%; 
    30.   
  
  
  
  30.   width: auto; 
    31.   
  
  
  
  31.   padding: 10px; 
    32.   
  
  
  
  32.   margin-right: 15px; 
    33.   
  
  
  
  33.   margin-left: 15px; 
    34.   
  
  
  
  34.   margin-top: -22px; 
    35.   
  
  
  
  35.   color: white; 
    36.   
  
  
  
  36.   font-weight: bold; 
    37.   
  
  
  
  37.   font-size: 18px; 
    38.   
  
  
  
  38.   transition: 0.6s ease; 
    39.   
  
  
  
  39.   border-radius: 0 3px 3px 0; 
    40.   
  
  
  
  40.   user-select: none; 
    41.   
  
  
  
  41.   border-style: unset; 
    42.   
  
  
  
  42.   background-color: blue; 
    43.   
  
  
  
  43. } 
    44.   
  
  
  
  44.  
    45.   
  
  
  
  45. .next { 
    46.   
  
  
  
  46.   right: 0; 
    47.   
  
  
  
  47.   border-radius: 3px 0 0 3px; 
    48.   
  
  
  
  48. } 
    49.   
  
  
  
  49.  
    50.   
  
  
  
  50. .prev:hover, .next:hover { 
    51.   
  
  
  
  51.   background-color: rgba(0,0,0,0.8); 
    52.   
  
  
  
  52. } 
    53.   
  
  
  
  53.   
    54.   
  
  
  
  54. .too-slide-fade { 
    55.   
  
  
  
  55.   -webkit-animation-name: too-slide-fade; 
    56.   
  
  
  
  56.   -webkit-animation-duration: 1.5s; 
    57.   
  
  
  
  57.   animation-name: too-slide-fade; 
    58.   
  
  
  
  58.   animation-duration: 1.5s; 
    59.   
  
  
  
  59. } 
    60.   
  
  
  
  60.   
    61.   
  
  
  
  61. @-webkit-keyframes too-slide-fade { 
    62.   
  
  
  
  62.   from {opacity: .4}  
    63.   
  
  
  
  63.   to {opacity: 1} 
    64.   
  
  
  
  64. } 
    65.   
  
  
  
  65.   
    66.   
  
  
  
  66. @keyframes too-slide-fade { 
    67.   
  
  
  
  67.   from {opacity: .4}  
    68.   
  
  
  
  68.   to {opacity: 1} 
    69.   
  
  
  
  69. } 
    70.   
  
  
  
  70.   
    71.   
  
  
  
  71. /* On smaller screens, decrease text size */ 
    72.   
  
  
  
  72. @media only screen and (max-width: 300px) { 
    73.   
  
  
  
  73.   .prev, .next,.text {font-size: 11px} 
    74.   
  
  
  
  74. } 
    75.

測試我們的插件

為了測試我們的插件，我們將創(chuàng)建一個(gè)HTML文件，我將其命名為 index.html。我們還將添加4張圖片用作幻燈片，所有圖片都與我們的插件JavaScript代碼位于同一目錄中。

我的HTML文件如下所示：

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.    
    5.   
  
  
  
  5.    
    6.   
  
  
  
  6.   測試幻燈片 
    7.   
  
  
  
  7.    
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.    
    11.   
  
  
  
  11.      
    12.   
  
  
  
  12.       
 
  •       
    •  
  •       
    •  
  •       
    •  
  •     
    •  
  •   
    •  
  •  
  •    
  •    
  •  
  •  

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

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

     
 
 
 
      
  
  
  
  
    1. var slider = new ToolSidePlugin({ 
      2.   
  
  
  
    2.   slideClass: ".singleSlide", 
      3.   
  
  
  
    3.   container: ".slideContainer", 
      4.   
  
  
  
    4.   nextButton: ".next", 
      5.   
  
  
  
    5.   previousButton: ".prev" 
      6.   
  
  
  
    6. }) 
      7.

    最后的效果：

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

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

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

    發(fā)布你的插件

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

    你可以通過兩種方式讓你的插件對其他人可用：

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

    就是這樣。

    結(jié)束

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

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

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

    原文：https://blog.logrocket.com/how-to-create-a-framework-agnostic-javascript-plugin/

    作者：Sodeeq Elusoji

    本文轉(zhuǎn)載自微信公眾號「前端全棧開發(fā)者」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端全棧開發(fā)者公眾號。

     


    網(wǎng)頁名稱：如何創(chuàng)建與框架無關(guān)的JavaScript插件
    分享地址：http://www.5511xx.com/article/dhgohpi.html