一、jQuery 提供開發(fā)者開發(fā)插件的幾種模式
1.$.extend(); //這個(gè)方法是綁定在$上面的。可以通過$直接調(diào)用
2.$.fn.方法名 //這個(gè)方法是綁定在Dom對(duì)象上面的可以通過$('').方法名();調(diào)用
3.$.widget //通過jQuery UI 部件工廠模式創(chuàng)建。
二、插件的開發(fā)過程
1.$.extend();
這個(gè)方法其實(shí)很簡單，只是像$上面添加了一個(gè)靜態(tài)的方法而已。主要用途是對(duì)插件api的擴(kuò)展.
eg:
//$.extend();為了防止，變量和方法之間的相互污染，我們采用閉包的模式。 (function($,factory){ var obj = factory(); $.extend({ sayHelloWorld:obj.firstApply, }) $.secondApply = obj.secondApply; })(jQuery,function(){ var obj = { firstApply(){ console.log('hello world'); }, secondApply(){ console.log('直接綁定到$上'); }, }; return obj; }); $.sayHelloWorld();//hello world $.secondApply(); //直接綁定到$上 /*從上面的2種綁定方式可以看出用$.extend();對(duì)jQuery方法進(jìn)行拓展， 其實(shí)和直接綁定到$上是一樣的效果*/2.$.fn.方法名。 (方法名 其實(shí)就是插件名)。
a.插件結(jié)構(gòu)
<div id="app">app</div>//$.fn.插件名字 (logText); (function($,factory){ $.fn.logText = factory(); })(jQuery,function(){ var logText = function(){ console.log(this.text()); return this; } return logText; }); $("#app").logText(); //app 通過DOM元素之間調(diào)用該方法。并返回該對(duì)象。這也是jQuery實(shí)現(xiàn)鏈?zhǔn)讲僮鞯募记伞? var h = $("#app").logText().height(); // app console.log(h); //18 //這樣就可以自定義方法了。在jQuery插件的開發(fā)過程中，其實(shí)主要是通過第二種模式($.fn.插件名)開發(fā)的。因?yàn)閖Query的強(qiáng)大之處就是對(duì)Dom的操作.
b.一個(gè)插件的強(qiáng)大之處就是參提供周全的參數(shù)。以及方便使用者對(duì)參數(shù)進(jìn)行擴(kuò)展。
<div id="app">app</div> //$.fn.插件名字 (myPuglin); (function(global,$,factory){ var common = factory(); //封裝插件使用到的函數(shù)。 $.fn.myPuglin = function(opts){ //插件的名稱 var defaults = {}; //默認(rèn)的api opts = $.extend(defaults,opts || {}); //對(duì)api的拓展 /* * * 要執(zhí)行的功能 * */ console.log(opts.hello); return this; } })(window,jQuery,function(){ var common = { a(opt){ return opt; }, }; return common; }); $("#app").myPuglin({hello:'hello world'}); //hello world準(zhǔn)備工作已經(jīng)完畢。那么下面會(huì)一個(gè)插件為列子，來講解
3.工作中經(jīng)常用到的列表到詳情。返回來需要保留該位置的插件。(返回定位) savePositon(); $.fn.savePosition
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title>Title</title> <style> @media screen and (max-width: 319px) { html { font-size: 85.33333px; } } @media screen and (min-width: 320px) and (max-width: 359px) { html { font-size: 85.33333px; } } @media screen and (min-width: 360px) and (max-width: 374px) { html { font-size: 96px; } } @media screen and (min-width: 375px) and (max-width: 383px) { html { font-size: 100px; } } @media screen and (min-width: 384px) and (max-width: 399px) { html { font-size: 102.4px; } } @media screen and (min-width: 400px) and (max-width: 413px) { html { font-size: 106.66667px; } } @media screen and (min-width: 414px) { html { font-size: 110.4px; } } /*CSS Reset*/ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, header, hgroup, nav, section, article, aside, footer, figure, figcaption, menu, button { margin: 0; padding: 0; } li{ list-style: none; } #app{ width: 100%; max-width: 640px; } li { height: 1.2rem; width: 100%; border-bottom: 1px solid #cccccc; text-align: center; line-height: 1.2rem; font-size: 20px; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script></head><body> <div id="app"> <ul> <li data-page="1" data-url="http://baidu.com?id=1">第一頁 第1個(gè)li</li> <li data-page="1" data-url="http://baidu.com?id=2">第一頁 第2個(gè)li</li> <li data-page="1" data-url="http://baidu.com?id=3">第一頁 第3個(gè)li</li> <li data-page="1" data-url="http://baidu.com?id=4">第一頁 第4個(gè)li</li> <li data-page="1" data-url="http://baidu.com?id=5">第一頁 第5個(gè)li</li> <li data-page="1" data-url="http://baidu.com?id=6">第一頁 第6個(gè)li</li> <li data-page="1" data-url="http://baidu.com?id=7">第一頁 第7個(gè)li</li> <li data-page="1" data-url="http://baidu.com?id=8">第一頁 第8個(gè)li</li> <li data-page="1" data-url="http://baidu.com?id=9">第一頁 第9個(gè)li</li> <li data-page="1" data-url="http://baidu.com?id=10">第一頁 第10個(gè)li</li> <li data-page="1" data-url="http://baidu.com?id=11">第一頁 第11個(gè)li</li> <li data-page="1" data-url="http://baidu.com?id=12">第一頁 第12個(gè)li</li> <li data-page="1" data-url="http://baidu.com?id=13">第一頁 第13個(gè)li</li> <li data-page="1" data-url="http://baidu.com?id=14">第一頁 第14個(gè)li</li> <li data-page="1" data-url="http://baidu.com?id=15">第一頁 第15個(gè)li</li> <li data-page="2" data-url="http://baidu.com?id=16">第二頁 第1個(gè)li</li> <li data-page="2" data-url="http://baidu.com?id=17">第二頁 第2個(gè)li</li> <li data-page="2" data-url="http://baidu.com?id=18">第二頁 第3個(gè)li</li> <li data-page="2" data-url="http://baidu.com?id=19">第二頁 第4個(gè)li</li> <li data-page="2" data-url="http://baidu.com?id=20">第二頁 第5個(gè)li</li> <li data-page="2" data-url="http://baidu.com?id=21">第二頁 第6個(gè)li</li> <li data-page="2" data-url="http://baidu.com?id=22">第二頁 第7個(gè)li</li> <li data-page="2" data-url="http://baidu.com?id=23">第二頁 第8個(gè)li</li> <li data-page="2" data-url="http://baidu.com?id=24">第二頁 第9個(gè)li</li> <li data-page="2" data-url="http://baidu.com?id=25">第二頁 第10個(gè)li</li> <li data-page="2" data-url="http://baidu.com?id=26">第二頁 第11個(gè)li</li> <li data-page="2" data-url="http://baidu.com?id=27">第二頁 第12個(gè)li</li> <li data-page="2" data-url="http://baidu.com?id=28">第二頁 第13個(gè)li</li> <li data-page="2" data-url="http://baidu.com?id=29">第二頁 第14個(gè)li</li> <li data-page="2" data-url="http://baidu.com?id=30">第二頁 第15個(gè)li</li> </ul> </div></body><script type="text/javascript"> /* * 1.為什么我要返回定位呢。肯定是增加用戶的體驗(yàn)度。比如你剛看的那條信息挺感 * 興趣的，點(diǎn)進(jìn)詳情看完了，回來一看，不見了，是不是很嘔心啊。 * 2.難點(diǎn)在哪里？ * 難點(diǎn)1：當(dāng)我們有很多的列表的時(shí)候，列表肯定是滾動(dòng)加載。于是我們直接保存滾動(dòng)條的位置 * 的方式可以放棄了。 * 難點(diǎn)2：我們?cè)趺创_定是從詳情返回來的? * 3.我們?cè)撛趺磳?shí)現(xiàn)呢？ * 其實(shí)我們實(shí)現(xiàn)的方式跟保存滾動(dòng)條的位置差不多。但要對(duì)scrollTop的距離進(jìn)行處理。 * a.我們點(diǎn)擊這點(diǎn)詳情的時(shí)候，可視區(qū)域列表的條數(shù)，可以是一頁的數(shù)據(jù)，可能會(huì)是2頁數(shù)據(jù)。 * 這種情況下我們都要把結(jié)果保留下來。 * b.當(dāng)我們點(diǎn)擊這條數(shù)據(jù)的時(shí)候存現(xiàn)當(dāng)前頁滾動(dòng)了多少就可以了。 * * 下面具體看代碼： */ (function(global,$,factory){ var keepScrollTop = 0; //用于最后保存的滾動(dòng)條的位置 var tool =factory(); $.fn.savePosition = function(options){ var dataPage,logo,objLogo,prevNum,containerHeight = 0,scrollTopDistance = 0,elIndex = 0, prevHeight = 0,prevCountPage = 0,prevCountPageDistance = 0,prevDistance = 0, prevPageScrollDistance = 0; var elements = this; var defaults = { container:$(window), //滾動(dòng)的容器 logo:"data-url", // 用于計(jì)算在這個(gè)容器中的每個(gè)LI中的唯一標(biāo)識(shí)量。一般為去詳情的連接 currentPage:"data-page", //點(diǎn)擊當(dāng)前的li的頁碼 pageResize:30, //與后臺(tái)交互的每頁返回的數(shù)量。 默認(rèn)是30, goToDetailElement:$(".go-detail") , //滾動(dòng)的每個(gè)列的總對(duì)象 nodeLi:"", //元素節(jié)點(diǎn) getPageNum:"getPageNum", //1表示單頁數(shù)據(jù)，2表示雙頁數(shù)據(jù)。設(shè)置是請(qǐng)求單頁數(shù)據(jù)還是雙頁數(shù)據(jù)的標(biāo)識(shí)量。放在URL上。 urlPageNum:"pageNum", //用于放到URL上面的參數(shù)標(biāo)識(shí)表示當(dāng)前是幾頁. pageNum = currentPage //返回來的時(shí)候用這個(gè)參數(shù)來判斷是不是需要滾動(dòng) }; var settings = $.extend(defaults,options || {}); dataPage = elements.attr(settings.currentPage); //求出點(diǎn)擊對(duì)象位于哪一個(gè)頁碼 logo = elements.attr(settings.logo); //求出當(dāng)前對(duì)象的唯一標(biāo)識(shí)量 containerHeight = parseInt(settings.container.outerHeight()); //容器的高度 scrollTopDistance = parseInt(settings.container.scrollTop()); //滾動(dòng)的距離 elements.parent().find(""+ settings.nodeLi + "["+settings.currentPage + "=" + dataPage +"]").each(function(index, obj){ objLogo = $(obj).attr(settings.logo); elIndex = index; if(logo == objLogo){ prevNum = elements.prevAll().length; prevHeight = tool.getDistance(elements.parent().children(),prevNum - elIndex); prevCountPage = parseInt(prevNum / settings.pageResize); if(scrollTopDistance < prevHeight){ elements.parent().children().each(function(index,target){ if(prevCountPage > 0 ){ if(index < (prevCountPage - 1) * settings.pageResize){ prevCountPageDistance += parseInt($(target).outerHeight()); }; }; }); tool.changeUrlPar(settings.urlPageNum,dataPage - 1); //當(dāng)前的頁數(shù) tool.changeUrlPar(settings.getPageNum,2); //獲取雙頁數(shù)據(jù) keepScrollTop = scrollTopDistance - prevCountPageDistance; //請(qǐng)求雙頁數(shù)據(jù) 向上 減 1; }else{ prevDistance = tool.getDistance(elements.parent().children(),(prevCountPage + 1) * settings.pageResize); prevPageScrollDistance = tool.getDistance(elements.parent().children(),prevCountPage * settings.pageResize); if(prevDistance < (scrollTopDistance + containerHeight)){ tool.changeUrlPar(settings.urlPageNum,dataPage); //點(diǎn)擊對(duì)象位于當(dāng)前的頁數(shù) tool.changeUrlPar(settings.getPageNum,2); //請(qǐng)求雙頁數(shù)據(jù) keepScrollTop = scrollTopDistance - prevPageScrollDistance; }else{ tool.changeUrlPar(settings.urlPageNum,dataPage); //點(diǎn)擊對(duì)象位于當(dāng)前的頁數(shù) tool.changeUrlPar(settings.getPageNum,1); //請(qǐng)求單頁數(shù)據(jù) keepScrollTop = scrollTopDistance - prevPageScrollDistance; }; }; }; }); tool.setSessionStorage("keepScrollTop",keepScrollTop); //保存滾動(dòng)條的位置 return this; }; $.getSessionStorage = function(opt){ opt = sessionStorage.getItem(opt); return opt; }; })(window,jQuery,function(){ var tool = { changeUrlPar(arg, val){ //改變URL參數(shù) function changeU(destiny, par, par_value) { var pattern = par+'=([^&]*)'; var replaceText = par+'='+par_value; if (destiny.match(pattern)) { var tmp = '///'+par+'=[^&]*/'; tmp = destiny.replace(eval(tmp), replaceText); return (tmp); } else { if (destiny.match('[/?]')) { return destiny+'&'+ replaceText; } else { return destiny+'?'+replaceText; } } return destiny+'/n'+par+'/n'+par_value; } var hash = window.location.hash; history.replaceState(null,'',location.pathname+location.search); url = window.location.href; var newUrl = changeU(url,arg,val) + hash; history.replaceState(null,'',newUrl); return false; }, removeUrlPar(options){ history.replaceState(null,'',location.pathname+location.search); var newParamStr = ""; var quotes = window.location.href.indexOf("?"); if(quotes != -1){ var webUrl = window.location.href.split("?")[0]; var paramsStr = window.location.href.split("?")[1].toString(); if(paramsStr.indexOf("&") != -1){ var pageIndex = paramsStr.indexOf(options); if(pageIndex != -1){ var pageArr = paramsStr.split("&"); for(var i = 0; i < pageArr.length; i++){ if(pageArr[i].match(options)){ pageArr.splice(i,1); }; }; newParamStr = pageArr.join("&"); }else{ newParamStr = paramsStr; } ; }else{ if(paramsStr.match(options)){ newParamStr = ""; }else { newParamStr = paramsStr; }; }; history.replaceState(null,'',webUrl + "?" + newParamStr); }else{ history.replaceState(null,'',w.location.href); } }, getDistance(obj,maxNum){ var h = 0; obj.each(function(index,target){ if(index < maxNum){ h += parseInt($(target).outerHeight()); } }); return h; }, setSessionStorage(keyName,opt){ sessionStorage.setItem(keyName,opt); console.log(opt) }, } return tool; }) $("li").on("click",function(){ $(this).savePosition({pageResize:15}); /* * 1.http://localhost/index.php/Home/Web?pageNum=2&getPageNum=1 * 點(diǎn)擊玩了以后url就變成這樣了。這時(shí)候表示 返回來的時(shí)候請(qǐng)求第二頁的數(shù)據(jù)。只請(qǐng)求一次。從第二頁開始 * * 2.http://localhost/index.php/Home/Web?pageNum=1&getPageNum=2 * 這樣表示請(qǐng)求也數(shù)據(jù)。從第一頁的數(shù)據(jù)開始 * */ var _herf = $(this).attr("data-url"); window.location.href = _herf; }); //當(dāng)我們初始化的時(shí)候 var pageNum = 1,getPageNum = 2; //這兩個(gè)數(shù)的值是從URL中獲取的。只有從詳情返回來 時(shí)候，才有 if(!!pageNum && !!getPageNum){ //其中還有很多判定，肯定是先獲取數(shù)據(jù)在滾動(dòng)。。。 $(window).scrollTop($.getSessionStorage('keepScrollTop')); }else{ }</script></html>這個(gè)返回定位的插件基本就開發(fā)完畢了。當(dāng)然對(duì)于實(shí)際的項(xiàng)目中，還有很多的改動(dòng)。比如返回的時(shí)候，一定要把設(shè)置的標(biāo)志參數(shù)去掉。
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持武林網(wǎng)！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
