隨著Jquery知識點的結(jié)束，我也開始接觸到框架來了。
開始的時候，總是聽到插件和框架等詞，我疑惑框架和插件是啥有啥區(qū)別？？
插件可以說有無數(shù)種，在網(wǎng)頁中任何一種功能都可以被叫做插件，單獨提取出來，可以供別人使用，而框架是一個超大號的的插件，它將各種方法融合成一體，使用者可以使用它來構(gòu)造不同的功能。插件則專注于一種，往往只有一種功能 。 打個比方比如前面學(xué)習(xí)的jquery，jquery就是一個框架，在jquery插件庫里http://www.jq22.com/有數(shù)不勝數(shù)的插件，這些插件絕大部分基于jq框架來編寫。
理解完插件和框架的區(qū)別，下面來寫一寫這幾天初步學(xué)習(xí)的插件庫
1.jquery 對于我而言肯定是一個熟悉的框架了 官網(wǎng)網(wǎng)址：https://jquery.com/ 插件庫：http://www.jq22.com/
這里簡單的介紹一下jquery ：jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫（或JavaScript框架）。
2.Select2 官網(wǎng)網(wǎng)址：https://select2.org/
3.Fullpage 官網(wǎng)網(wǎng)址：https://alvarotrigo.com/fullPage/#page1
4.lazyload 官網(wǎng)網(wǎng)址：https://appelsiini.net/projects/lazyload/
5.Swiper 官網(wǎng)網(wǎng)址：https://www.swiper.com.cn/
6.nice-validator 官網(wǎng)網(wǎng)址 ：https://validator.niceue.com/docs/getting-started.html
以上提及的都是插件庫，每一個有著不同的功能，jquery在這里我就不在贅述了。我就從Select2開始寫
一.Select2 插件庫
select2是一款基于jquery的功能豐富的下拉列表插件。這就說明了使用select2必須要有jquery依賴，就是要先導(dǎo)入jquery庫，然后在導(dǎo)入select2插件庫，然后這是一款關(guān)于下拉列表的插件。
使用方法：首先去下載壓縮包文件 下載地址：https://codeload.github.com/select2/select2/zip/develop下載完成解壓后在文件中我們需要找到相關(guān)的js文件和css文件，我們所需要的的就是這兩個文件：在dist文件夾下有css和js，js有.js文件和min.js文件，css也是一樣的。如下圖所示
min.js是壓縮版，沒有逗號空格等等，體積小傳輸效率快，但可讀性較差可以自行想象一下js代碼就一行的場景 .js是沒壓縮的俗稱開發(fā)版，可讀性較好，易于debug調(diào)試和更改；但是體積相比較而言大一些，效率低。我采用壓縮版的我不改bugQAQ 這段話或許就解決了心中的疑問
我們將css和js文件復(fù)制到我們的項目中就可以開始使用這個插件了。
這個是一個案例效果圖接下來就根據(jù)這個案列來編寫。
首先一點也是重中之重，導(dǎo)入css和js文件，jquery插件庫優(yōu)先導(dǎo)入，js cs就是我們上面復(fù)制到項目的文件，如下
在body里面寫上一個普通的下拉列表：
我把js注釋一下看看效果如何：
這個與和我們的效果圖有著很大的區(qū)別，如何使用這個插件呢，我們不妨看看文檔（雖然全是英文）
在基本語法上有著這樣的語句（我們把他定義到我們的案例中去）：.js-example-basic-multiple是一個選擇器
在案例中我們?nèi)缦戮帉?（效果如右）：
這就是select2的威力，我們就使用了一行js代碼就將一個普通的下拉列表變成了這樣子的一個視覺效果不錯的下拉列表（寬度可以修改，select2內(nèi)置了很多的屬性可以查看文檔）。
例如給下拉列表設(shè)置寬度只需要如下寫（使用大括號編寫屬性，用逗號分隔每個屬性）
在select2文檔的第三項中的Options里面有一張配置表里面涵蓋了select2所有的屬性（英文差的我看的有點吃力）
案列中簡單的寫了兩個屬性
插件的出現(xiàn)就是為了簡單化代碼，讓我們少些了很多代碼。使用起來方便簡潔，就是這樣select2的簡單案列完成了，select2專注于選框，很多屬性，可以去文檔一一查閱我這里的介紹就結(jié)束了。
二、Fullpage插件庫
Fullpage 翻譯過來就是 全屏的意思，我想已經(jīng)猜出來了，這是一款全屏的插件，整個頁面簡潔大方，整個屏幕就是一張頁面，它的官網(wǎng)就是一個很好的實 例 https://alvarotrigo.com/fullPage/#page1。這樣的頁面展示很受人喜歡，我相信大部分人都曾見過。
使用方法 同樣下載壓縮提取js 、css文件 下載地址 https://codeload.github.com/alvarotrigo/fullPage.js/zip/master
這個官網(wǎng)有一點優(yōu)勢emmmmmm他有中文模式 左上角可以選擇
將css js復(fù)制進自己的項目里面引入js css 同樣注意的依賴jquery優(yōu)先導(dǎo)入jquery庫如下：
我們可以查看文檔編寫（文檔中有這樣的一句話也就是在html文件中必須有著個聲明，所以復(fù)制代碼是要仔細不要復(fù)制掉了）
將這段代碼復(fù)制到body里開始編寫頁面 在div的class值，section 以及后面的slide是不能更改的，我們必須按照fillpage的規(guī)則來 但最外層div的id可以直接設(shè)置，用于js代碼中的選擇
<div id="fullpage"> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> </div>
在js中如下編寫（首先我們就用上了sectionsColor屬性 定義背景顏色，一一對應(yīng)）
當(dāng)想定義橫向切換時，這時候slide就登場了 ，將下面代碼嵌套到<div class = "section"></div>中
<div class="section"> <div class="slide"> slide 1 </div> <div class="slide"> slide 2 </div> <div class="slide"> slide 3 </div> <div class="slide"> slide 4 </div> </div>
它將會產(chǎn)生一個橫向輪播圖 注意 slide section 不可以更改 如下圖所寫:
效果如下：
當(dāng)然插件也并不是萬能的，fullpage無法設(shè)置字體大小所以需要自己定義大小 下面是自定義樣式
在fullpage文檔上有著很多屬性（往下翻的話有對這些屬性一 一的解釋）
在我的案列中寫了幾個案例js代碼如下：
$("#fullpage").fullpage({
sectionsColor: ['#c3c3c3', '#aa55ff', '#aaffff', '#ffaaff'],//背景顏色 /* scrollingSpeed:2000, */ //滾動時長 css3:true,
easingcss3:"linear", //頁面過度效果，只有當(dāng)css3定義為true時才會有效果 loopHorizontal:false, //默認為 true 定義水平滑塊是否在到達上一張或下一張后循環(huán) 當(dāng)為第一張時，上一張的箭頭隱藏 下一張同義。/*loopBottom:true, */ //上下滑動時，當(dāng)為最后一張時，返回第一張 反之同義 默認值為flase/*loopTop:true, */ //上下滑動時，當(dāng)為最后一張時，返回第一張 反之同義 默認值為flase keyboardScrolling:true, //定義是否可以通過鍵盤來進行滾動，默認為true navigation:true, //縱向?qū)Ш綑?nbsp; 默認flase slidesNavigation:true, //橫向?qū)Ш綑?nbsp; 默認flase navigationTooltips:["一","二","三","四"], //小黑點導(dǎo)航提示 /* anchors:['firstPage', 'secondPage','sss','aaaa'], */ //設(shè)置錨點 });文檔的屬性還算寫的清晰，所以可以一點點編寫 這一節(jié)的效果圖不好截我把代碼結(jié)構(gòu)寫上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fullpage全屏滾動案例</title>
</head>
<link rel="stylesheet" type="text/css" href="fullpage/fullpage.min.css"/>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script src="fullpage/fullpage.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">#fullpage{text-align: center;font-size: 1.875rem} /* 設(shè)置居中 字體大小 */
.fp-controlArrow.fp-next{ /* 設(shè)置下一頁箭頭離右邊3.1875rem */ right:3.1875rem;
}
.fp-controlArrow.fp-prev{ /* 設(shè)置上一頁箭頭離左邊3.1875rem */ left:3.1875rem;
} </style>
<body>
<div id="fullpage">
<div class="section"> <!-- //class必須為section 插件標(biāo)準(zhǔn) --><div class="slide"> slide 1 </div> <!-- //class必須為slide -->
<div class="slide"> slide 2 </div>
<div class="slide"> slide 3 </div>
<div class="slide"> slide 4 </div>
</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
<script type="text/javascript">$(document).ready(function(){
$("#fullpage").fullpage({
sectionsColor: ['#c3c3c3', '#aa55ff', '#aaffff', '#ffaaff'],//背景顏色 /* scrollingSpeed:2000, */ //滾動時長 css3:true,
easingcss3:"linear", //頁面過度效果，只有當(dāng)css3定義為true時才會有效果 loopHorizontal:false, //默認為 true 定義水平滑塊是否在到達上一張或下一張后循環(huán) 當(dāng)為第一張時，上一張的箭頭隱藏 下一張同義。/*loopBottom:true, */ //上下滑動時，當(dāng)為最后一張時，返回第一張 反之同義 默認值為flase/*loopTop:true, */ //上下滑動時，當(dāng)為最后一張時，返回第一張 反之同義 默認值為flase keyboardScrolling:true, //定義是否可以通過鍵盤來進行滾動，默認為true navigation:true, //縱向?qū)Ш綑?nbsp; 默認flase slidesNavigation:true, //橫向?qū)Ш綑?nbsp; 默認flase navigationTooltips:["一","二","三","四"], //小黑點導(dǎo)航提示 /* anchors:['firstPage', 'secondPage','sss','aaaa'], */ //設(shè)置錨點 });
});</script>
</body>
</html>這樣子fullpage的案列就完結(jié)了，跟官網(wǎng)頁面相似可以試著運行一下子。
三、lazyload 插件庫
lazyload 譯為延遲加載， 又叫懶加載 在這個流量的時代，懶加載的出現(xiàn)是非常nice的，它為用戶節(jié)省流量的消耗，提高性能，當(dāng)一個高清圖片網(wǎng)站一張頁面幾十張甚至上百張圖片時，沒有懶加載，它將會將所有的圖片都加載出來，這就導(dǎo)致流量的浪費，降低性能，影響了用戶的體驗，而懶加載的作用是當(dāng)用戶看到這張圖片時，它才開始加載出來，這樣子就節(jié)省了大量的流量，而且優(yōu)化了性能，提高了用戶體驗。
使用方法和上面一樣下載lazyload插件包：https://codeload.github.com/tuupola/lazyload/zip/2.x
使用方法很簡單，因為它只有一個功能就是延遲加載，所以我就直接上代碼了 (注意在下載文件中找到對應(yīng)的css，js文件復(fù)制到自己的項目中) lazyload沒有css文件
<head>
<meta charset="utf-8">
<title>lazyload懶加載案例</title>
<!-- 因為lazyload插件沒有css樣式所以這里我們自己寫樣式已圖片形式來演示 -->
<style type="text/css">/* 修飾一下img */ *{
padding: 0;
margin: 0;
}
img{
width:1366px;
height:671px;
border: 3px solid #ccc;
border-radius: 8px;
}
.f_div{
width: 1366px;
height:671px;
display: flexbox;
} </style>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script src="lazyload/lazyload.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="f_div">
<img class="lazyload" data-src="img/動物01.jpg" >
<img class="lazyload" data-src="img/動物02.jpg" >
<img class="lazyload" data-src="img/動物03.jpg" >
<img class="lazyload" data-src="img/動物04.jpg" >
<img class="lazyload" data-src="img/動物05.jpg" >
<img class="lazyload" data-src="img/動物06.jpg" >
<img class="lazyload" data-src="img/動物07.jpg" >
<img class="lazyload" data-src="img/動物08.jpg" >
<img class="lazyload" data-src="img/動物09.jpg" >
<img class="lazyload" data-src="img/動物10.jpg" >
<img class="lazyload" data-src="img/動物11.jpg" >
<img class="lazyload" data-src="img/動物12.jpg" >
</div>
<script type="text/javascript">$(".f_div img").lazyload()</script>
</body>我使用了12張圖片然后js就一句，就可以實現(xiàn)懶加載功能
要為每一張圖片添加class = “lazyload” ，且不能使用src 必須使用data-src 下面就來寫一寫怎么看兩者的區(qū)別
普通加載：
懶加載：
懶加載的用法簡單，但它存在的意義不凡，有些框架也會內(nèi)置懶加載功能 列如上面介紹的fullpage插件
所以，懶加載的使用結(jié)束，或許現(xiàn)在感覺不它的作用，但是以后的編程日子里我想我百分百會和它再次的碰面。
四、Swiper 插件
Swiper 譯為猛擊者，確實在視覺上它的確很吸引我，首先它是一款觸摸滑動插件 它與fullpage相似又有著各自的特點。
用swiper來做輪播 ，導(dǎo)航我想是很好的選擇 swiper不依賴jq所以當(dāng)項目中不需要jq時可以不用到j(luò)query庫
同樣先下載swiper的包：https://www.swiper.com.cn/download/swiper-5.3.7.zip 在文件中找到對應(yīng)的js css文件，復(fù)制到自己的項目然后導(dǎo)入如下：
先上一張效果圖：
如圖所示一款很炫酷的輪播圖可以說swiper的中文文檔非常的nice，思路清晰。就是emmmm屬性有點多一時半會看完我現(xiàn)在想著，根據(jù)以上的插件庫案列
這個插件的使用就應(yīng)該不用我來再做贅述了，我就直接粘貼代碼代碼如下：
<html>
<head>
<meta charset="utf-8">
<title>Swiper輪播案例</title>
<link rel="stylesheet" type="text/css" href="Swiper/swiper.min.css"/>
<script src="Swiper/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">/* .swiper-container{width: 61.25rem; height: 43.75rem; text-align: center;} */ /* 設(shè)置輪播寬高字體居中 */.swiper-wrapper{
text-align: center; /* 水平居中 */line-height: 31.25rem; /* 利用字體行高將div撐起來 上下居中*/font-size: 2.5rem; /* 字體大小 */}</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color: #aaaafe;">slider1</div>
<div class="swiper-slide" style="background-color: #aaffff;">slider2</div>
<div class="swiper-slide" style="background-color: #21fead;">slider3</div>
</div>
<div class="swiper-pagination"></div>
<!-- 導(dǎo)航欄 小黑點-->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 滾動條 -->
<div class="swiper-scrollbar"></div>
</div>
<script type="text/javascript"> var mySwiper = new Swiper('.swiper-container', {
direction: "horizontal", //horizontal橫向切換 vertical縱向切換，默認為horizontal autoplay: true,//可選選項，自動滑動 speed:2000, //圖片滑動時所需時間 grabCursor:true,//設(shè)置鼠標(biāo)樣式，懸浮時的樣式根據(jù)用戶瀏覽器不同而定，默認為flase /* virtualTranslate:true, *///虛擬的位移。當(dāng)你啟用這個參數(shù)，Slide不會移動，但是Swiper還是在運行，輪播沒有動但是，指示器，導(dǎo)航按鈕都動了 preventInteractionOnTransition :true, // 默認為flase，當(dāng)你的Swiper在過渡時將無法滑動 keyboard : true, //鍵盤左右鍵控制切換
//3d流效果 effect : 'coverflow', //定義滑動效果 swiper內(nèi)置了幾種滑動效果 https://www.swiper.com.cn/api/effects/193.html slidesPerView: 2,
centeredSlides: true, //默認的是默認為“幻燈片”(位移切換) 其他 ：幻燈片’(普通切換、默認)，“淡出”(淡入)“立方體”(方塊)“覆蓋流”(3D流)“翻轉(zhuǎn)”(3D翻轉(zhuǎn))
autoplay: {
delay: 1000,//定義切換時間 },
pagination: {
el: '.swiper-pagination', //添加指示器小黑點 }, //上一頁，下一頁 navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}, // 滾動條指示 scrollbar: {
el: '.swiper-scrollbar',
},
});</script>
</body>
</html>不管是什么插件或者框架，它的使用方法都萬變不離其宗。相似是 他們的共同點，更何況swiper的文檔看著這么的舒服
五、nice-validator 插件
nice-validator 插件是一款比關(guān)于驗證表單的插件，當(dāng)用戶注冊時，來判斷注冊手機號碼是否合法，是否為空，密碼與確認密碼是否相等，郵箱是否合法等等等等。
同樣先下載:https://codeload.github.com/niceue/nice-validator/zip/master 復(fù)制對應(yīng)的css js文件 到項目并導(dǎo)入，如下：
以案列為準(zhǔn)，由于沒有css我直接手寫了有個簡單的css樣式。
當(dāng)然html的表單也是手寫對于樣式，id class的名稱這些，這款插件與其他的不同，可以自己定義：
js寫法：無論那樣子寫法他實現(xiàn)的功能是一樣的
這寫屬性可以看看文當(dāng)里面的介紹（我簡單的截取兩張，更多屬性一步官網(wǎng) https://validator.niceue.com/docs/getting-started.html）
自定義規(guī)則
內(nèi)置規(guī)則
這款插件的屬性還是蠻多的 在常用規(guī)則整理中有著常用的規(guī)則。
對了這里有一個繞的地方（我單獨截出來反正我看著的時候看半天）
就這樣，這款插件有沒有過多的介紹了。有很多坑和細節(jié)還得自己去真正用的時候去看
我想各位小伙伴們看完這篇文章，也或多或少的對插件或者框架的使用有些了解了，但要明白一件事紙上得來終覺淺的道理，
有心人想要去學(xué)習(xí)一樣?xùn)|西，他就不止是想還要做。所以勤加練習(xí)是學(xué)好編程的不滅準(zhǔn)則。
學(xué)習(xí)中，有地方錯誤還請指正。QAQ累死本人了一口氣寫這么多東西。copy的時候標(biāo)注一下謝謝。
聯(lián)系客服
