如何打包jquery插件
前言如今，jquery幾乎是web開發的必備工具。甚至vs神器在2010年就開始在web項目中內置Jquery和ui。至於使用jquery的好處，這裏就不贅述了。用過的我都認識。今天我們來討論壹下jquery的插件機制，jquery有上千個第三方插件。有時候我們寫了壹個獨立的函數，想和jquery結合，可以用jquery鏈調用。有必要擴展jquery，把它寫成插件。例如，下面是壹個簡單擴展jquery對象的演示:
//sample:擴展jquery對象的方法。bold()用於加粗字體。
(函數($){
$.fn.extend({bold總結/summary
返回this.CSS({fontweight:bold
}
});
})(jQuery)；
呼叫方法:
這是壹個非常簡單的擴展。接下來，我們來壹步步分析上面的代碼。
首先，jquery的插件機制
為了方便用戶創建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。
1.jQuery.extend()方法有壹個重載。
JQuery.extend(object)，用於擴展JQuery類本身的參數，也就是說在jQuery類/naming空之間添加新的函數，或者調用靜態方法。比如jQuery內置的ajax方法都是用jQuery.ajax()調用的，有點像“類名”的靜態方法。方法名”。讓我們也寫壹個jQuery.extend(object)的例子:
//擴展jQuery對象本身jQuery.Extend({"minValue:函數(a，b){///總結/summary
返回壹個
}，總結/summary
returna
}
});//調用
vari=100j=101varmin_v=$。minValue(i，j)；//min_v等於100
varmax_v=$。maxValue(i，j)；//max_v等於101
重載:jquery.extend([deep]，target，object1，[objectn])
用壹個或多個其他對象擴展壹個對象，並返回擴展的對象。
如果沒有指定target，jQuery將被命名為空來擴展自身。這有助於插件作者向jQuery添加新方法。
如果第壹個參數設置為true，jQuery返回深度副本，遞歸地復制它找到的任何對象。否則，副本將與原始對象***享結構。
未定義的屬性不會被復制，但從對象原型繼承的屬性會被復制。
參數
深度:可選。如果設置為true，遞歸合並。
目標:要修改的對象。
1:要合並到第壹個對象中的對象。
ObjectN:可選。要合並到第壹個對象的對象。
示例1:
合並設置和選項，修改並返回設置。
var設置={validate:false，limit:5，name:foo
varoptions={validate:true，name:酒吧
jQuery.extend(設置，選項)；
結果:
設置=={驗證:真，限制:5，名稱:
vardefaults={validate:false，limit:5，name:foo
varoptions={validate:true，name:酒吧
varsettings=jQuery.extend(空，默認，選項)；
結果:
設置=={驗證:真，限制:5，名稱:酒吧
};
原來jQuery.fn=jQuery.prototype，是jQuery對象的原型。那麽jQuery.fn.extend()方法就是擴展jQuery對象的原型方法。我們知道在原型上擴展方法相當於給對象增加了壹個“成員方法”，而類的“成員方法”只能被類的對象調用，所以使用jQuery.fn.extend(object)擴展的方法，jQuery類的實例就可以使用這個“成員函數”。必須區分jQuery.fn.extend(object)和jQuery.extend(object)方法。
二。自動執行匿名函數/閉包
1.什麽是自執行匿名函數？
指的是這樣壹個函數:(function{//code})()；
2.問為什麽(function{//code})()；可以執行，函數{//code}()；妳會報錯嗎？
3.分析
(1).首先明確兩者的區別:(function{//code})是表達式，function{//code}是函數聲明。
(2).其次，js，因為function(){//code}處於“編譯”階段已經解釋過了，js會跳過function(){//code}，嘗試執行()；，所以它會報告壹個錯誤；
js執行到(function{//code})()時；當，因為(function{//code})是表達式，所以js會求解得到返回值。因為返回值是函數，所以遇到()；當，它將被執行。
另外，函數轉換成表達式的方法不壹定要依賴分組運算符()，我們也可以使用void運算符、~operator，！操作員...
例如:
bootstrap框架中插件的編寫方法:
!函數($){
//做點什麽；
}(jQuery)；
和
(函數($){
//做點什麽；
})(jQuery)；是壹回事。
匿名函數最大的用途是創建閉包(這是JavaScript語言的特點之壹)，還可以構建命名空空間，減少全局變量的使用。
例如:
vara=1；
(函數()(){
vara=100
})();
警戒(壹)；//彈出1
更多閉包和匿名函數請查看文章匿名函數和Javascript的自執行。
第三，逐步打包JQuery插件
接下來，我們來寫壹個高亮的jqury插件。
1.設置封閉區域，防止插件“汙染”
//閉包限定在named空(function($){
})(window.jquery)；
2.jQuery.fn.extend(object)擴展jQuery方法，制作插件。
//閉包限定在named空(function($){
$.fn.extend({突出顯示
})(window.jquery)；
3.給出插件默認參數，實現插件功能。
//閉包限定在named空(function($){
$.fn.extend({突出顯示//使用jQuery.extend覆蓋插件默認參數。
This.each(function(){//這是jQuery對象。
//遍歷所有要高亮顯示的dom，當是調用highlight()插件的集合時。
var$this=$(this)；//獲取當前dom的jQuery對象，這裏是當前循環的dom
//根據參數設置dom的樣式
$this.css({
背景色:opts.background，
顏色:opts.前景
});
});
}
});//默認參數
vardefaluts={
前景:紅色,
背景:黃色
};
})(window.jquery)；
至此，高亮插件的基本功能已經具備。調用代碼如下:
$(function(){
$(p//調用自定義高亮插件})；
只能在這裏直接調用，不能在chain中調用。我們知道jQuery可以被鏈式調用，也就是說，在壹個jQuery對象上可以調用多個方法，比如:
$(#id100像素}).addAttr(標題
但是我們上面的插件是不能這樣鏈的。比如:$(p100像素});//會報錯找不到css方法，因為我的自定義插件完成函數後沒有返回jQuery對象。接下來，返回jQuery對象，這樣我們的插件也支持鏈式調用。(其實很簡單，就是在我們執行完我們的插件代碼的時候返回jQuery對象，和上面的代碼沒什麽區別)
jquery怎麽獲取inputfile中的內容？
jquery獲取inputfile中內容的方法：；$("#conter").val();//這樣就能獲取它的值了（也就是內容）。
1.jQuery是壹個快速、簡潔的JavaScript框架，是繼Prototype之後又壹個優秀的JavaScript代碼庫。jQuery設計的宗旨是“writeLess，DoMore”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供壹種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
2.jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，並且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件.
插件使用方法？
1.使用script標簽加載jquery框架2.使用script標簽加載插件3.看插件是否有api，如果有的話按照api調用4.如果沒有api，就自己看源碼壹般來說jquery插件的調用方法都是$('element').plugName(param);其中element是妳用選擇選擇的要執行插件方法的對象，plugName是妳插件中的方法名稱，param是插件方法的參數。當然，也有的插件不是這樣調用的，也有的插件是需要妳在html標簽中加入以下class。具體還是要看妳用的插件的api
詳解如何在vue項目裏正確地引用jquery和jquery-ui的插件？
vue-cliwebpack全局引入jquery
1、首先在package.json裏加入，
然後nmpinstall
2、在webpack.base.conf.js裏加入
3、在module.exports的最後加入
plugins:
4、然後壹定要重新rundev
5、在main.js引入就ok了
在.vue文件中引入第三方非NPM模塊
vue-cli引入外部文件
在webpack.base.conf.js中添加externals
externals中swiper是鍵，對應的值壹定的是插件swiper.js所定義的變量Swiper:
之後再在根目錄下的index.html文件裏引入文件：scriptsrc="static/lib/swiper.js">/script>
這樣子就可以在需要用到swiper.js的文件裏加入這行代碼：importSwiperfrom'swiper'，這樣就能正常使用了。
前端頁面的插件有哪些？
工具類
方便操作對象，數組等的工具庫
underscore.js
lo-dash與underscore.js的api基本壹致。與underscore比其優勢是，效率高；可自定義構建
Sugar在原生對象上增加壹些工具方法
functional.js提夠了壹些Curry的支持
Watch.js監視對象或屬性的變化
bacon.js函數式編程，cool
streamjs用流的方式來對數組，對象進行系列操作
異步流程控制
eventproxy樸靈出品
Arbiter.js詳細
發布訂閱
qPromise風格的
Async.js
mock
Mock.js生成隨機數據和mockAjax請求
jquery-mockjaxmockajax請求
時間庫
moment
datejs
瀏覽器探測
Bowser探測具體瀏覽器和版本
ua-parser-js探測具體瀏覽器和版本，操作系統，設備類型等
調試
console-polyfill能放心的使用console.log()之類的console方法
log讓控制臺輸出的log有樣式
Konsole.js在頁面的壹個元素裏輸出log信息詳細
uri.jsuri操作
cookie增刪改cookie的工具庫
director前端路由庫詳細
BigDecimal.js提高精度的數字操作
JSDoc根據javascript文件中註釋的信息，生成API文檔詳細
hotkeys鍵盤事件的封裝
MD5用MD5的方式加密文件的庫
瀏覽器增強類
讓壹些舊瀏覽器變牛逼的庫
Selectivizr讓IE6-8壹些的css3選擇器
ieBetter讓ie6-8有高級瀏覽器的特性
ExplorerCanvas讓IE8-的瀏覽器支持canvas
CSS3Pie讓IE6-9支持border-radious,box-shadow,linear-gradient。可以使用.htc文件（註意Minetype）或.js文件。在用Pie.js時，box-radious的元素有背景色時，不顯示背景色。。。
formFive讓舊的瀏覽器支持HTML5表單的壹些特性，如placeholder,autofocus
/anselmh/object-fit讓瀏覽器支持object-fit這css規則
HTML5CrossBrowserPolyfills壹堆Polyfills
flexibility讓舊的IE也支持Flexbox
選擇器增強
Lining.js讓瀏覽器實現類似::nth-line(),::nth-last-line()的效果
未歸類
prefixfree用了它，寫css時，就不需要加瀏覽器的前綴了
表單類
jquery-file-upload上傳文件組件詳細
zTree文件樹形視圖控件
Treed樹編輯器。感覺展示的感覺很像思維導圖
FileAPI對文件選擇框內的文件的壹些處理
表單驗證
.Validate詳細
jQuery-Validation-Engine
表單元素美化
uniform提供對下拉框，單，復選框，按鈕等表單元素的美化
select2多選下拉框
selectivity和unfirom比較類似
DropKick下拉框，單，多選。外觀比uniform好
switcheryios7風格的開關組件
nouislider用滾動條來設置/控制（音量等）
range.css美化input元素的外觀
圖片類
holderjs生成占位圖片
lazyload
imagesLoaded選取的圖片都加載好後執行調回
CSSgram用CSS3的Filter實現Instagram濾鏡的庫
圖標類
IconFont匯總
SVG做的圖標
svgicons
iconic
HYBICON帶交互效果。如hover,click
HTML字符實體圖標
/
transformicons圖標點擊時，會有壹些變換效果。如，加號變成叉號
css3patternscss3做的可平鋪紋理。瀏覽器兼容性不好。
瀏覽圖片
fancybox彈出查看圖片，視屏等等demo
yoxview彈出查看圖片，圖片尺寸縮放很自然
圖片墻
wookmark
UI框架
WeUI由微信官方設計團隊為微信Web開發量身設計。
Framework7
UI組件類
拖拽
dragula支持Draggable，Dropable和Sortable。感覺比jqueryUI的輕量級，好用的樣子
angular-draguladragular官方的angular版本
數據可視化(圖表)
Echarts百度出品
highcharts功能強大。是收費的。
Plottable.JS基於D3的壹個圖表庫
flot文檔不給力
chartJs中文文檔demo很漂亮，很清晰。比較輕量級。
ichartJs中國的壹個家夥搞的，感覺還不錯。
時間選取組件
foundation-datepicker
DatePicker壹個簡單的日歷詳細
fullcalendar支持脫放的方式來改變待辦事宜的時間
SimpleEventsCalendar外觀很喜歡。收費5$
jQueryuidatepicker經典，不是很好看
pickadate輕量級，手機友好的，漂亮。但貌似只能在彈出層中顯示，而沒有下拉這種方式顯示。
zebra-datepicker可配置性很強。但貌似只能在彈出在右上方。。。
bootstrap-datepickerbootstrap風格。
dateRangePicker選取時間段。bootstrap風格。該組件依賴TwitterBootstrap,Moment.js和jQuery.
自定義滾動條
perfectscrollbar輕量級的滾動條。外觀與mac上chrome的滾動條壹樣。
iscroll在移動設備上用不錯
加載(Loding)效果
CSSSpinnersCSS做的
Loaders.cssCSS做的
表格組件
jsGridDataGrid。詳細
backgrid基於Backbone.js的DataGrid
excellentexport把表格的內容生成excel。兼容Firefox,Chrome,IE6+
datatables表格可交互（對內容進行排序，刪除等）
handsontable生成Excel外觀的數據
JSpreadsheets表格數據的組件庫
選取顏色
Spectrum
分享到SNS
JiaThis生成分享代碼。
編輯器
ace代碼編輯器，可以用來做demo演示
ckeditor
ueditor百度做的
tinymce對html內容進行實時的編輯
summernote在移動設備上用不錯
通知組件
notie.js
HTML5播放器
jwplayer被大量網站使用
html5media簡單的h5player，輕量級
jplayer功能強太，可換膚
展示
Impress.js各種旋轉，和奇特的體驗
fullPage全屏顯示。用滾輪來翻頁詳細
zepto.fullpage專註於移動端的fullPage.js，依賴Zepto
pagePiling和fullPage類似
turn.js做壹本書，帶漂亮的翻頁的效果
幻燈
slidesjs挺好用的，只是那幻燈導航的CSS都要自己寫，呵呵詳細
iSlider無任何插件依賴的手機平臺javascript滑動組件詳細
bgstretcher全屏幻燈，會隨著頁面大小的變化而變化。
Swiper開源、免費、強大的移動端觸摸滑動插件Swiper中文網
coin-slider兼容IE6。蠻好的~。不過其切換方式是壹塊塊的。不能配置切換方式。。。
wowslider幻燈切換時各種很炫的效果。收費。
cycle2普通的幻燈，竟然不支持垂直滾動。。。
jcarousel普通的幻燈，不兼容IE6
reveal3d滾動。做ppt相當不錯
nodePPT國人做的，做ppt也相當不錯。有些方面比reveal做的還好。但生成導出的html有些問題
roundabout3d切換，看的後面圖片的邊
彈出框
Magnific-Popup兼容PC，Mobile。還不錯，有5k+的star
layer國人開發的，兼容ie6+。不喜歡其調用方式。
動畫效果
mixitup用漂亮的動畫效果來完成排序和篩選
jQuery.Marquee跑馬燈效果
quickflip卡片翻轉效果
卡片翻轉效果2兼容性可以。寫的比較簡單：1，只支持x方向翻轉2,類名都是規定好的3，只能被調用壹次。需要改寫壹下。我的改進版見這裏
TheaterJS模擬兩個人在屏幕上對話
midnight.js文字顏色隨著背景變，_炸了
color-animationjquery的顏色漸變動畫插件。jquery的動畫不支持顏色值的變化。改庫提供了這個支持。
transit對元素進行css的變換
tagcanvas3D標簽雲效果詳細
iconate圖片切換動畫
Snap.js左/右側導航的出現效果
CSSshake抖動動畫
ClickSpark.js點擊後的壹些酷炫的效果
視覺差插件
scrollorama比較簡單
superscrollorama能做的效果更多，但要用第三方Tween的庫，使用