jQ返回定位插件

来源:http://www.cnblogs.com/createGod/archive/2017/05/14/6851443.html
-Advertisement-
Play Games

一、jQuery 提供開發者開發插件的幾種模式 1.$.extend(); //這個方法是綁定在$上面的。可以通過$直接調用 2.$.fn.方法名 //這個方法是綁定在Dom對象上面的可以通過$('').方法名();調用 3.$.widget //通過jQuery UI 部件工廠模式創建。 二、插件 ...


一、jQuery 提供開發者開發插件的幾種模式

1.$.extend();     //這個方法是綁定在$上面的。可以通過$直接調用

2.$.fn.方法名     //這個方法是綁定在Dom對象上面的可以通過$('').方法名();調用

3.$.widget   //通過jQuery UI 部件工廠模式創建。

 

二、插件的開發過程

1.$.extend();

這個方法其實很簡單，只是像$上面添加了一個靜態的方法而已。主要用途是對插件api的擴展.

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();對jQuery方法進行拓展，
     其實和直接綁定到$上是一樣的效果*/

2.$.fn.方法名。   (方法名 其實就是插件名)。

a.插件結構

<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元素之間調用該方法。並返回該對象。這也是jQuery實現鏈式操作的技巧。
   var h = $("#app").logText().height(); // app
   console.log(h);  //18
  //這樣就可以自定義方法了。

在jQuery插件的開發過程中，其實主要是通過第二種模式($.fn.插件名)開發的。因為jQuery的強大之處就是對Dom的操作.

b.一個插件的強大之處就是參提供周全的參數。以及方便使用者對參數進行擴展。

    <div id="app">app</div>
     //$.fn.插件名字 (myPuglin);
    (function(global,$,factory){
        var common = factory();  //封裝插件使用到的函數。
        $.fn.myPuglin = function(opts){   //插件的名稱
            var defaults = {}; //預設的api
            opts = $.extend(defaults,opts || {});  //對api的拓展
            /*
             *
             * 要執行的功能
             * 
             */
            console.log(opts.hello);

            return this;
        }
        
    })(window,jQuery,function(){
        var common = {
            a(opt){
                return opt;
            },
        };
        return common;
    });
    $("#app").myPuglin({hello:'hello world'}); //hello world

準備工作已經完畢。那麼下麵會一個插件為列子，來講解

 

3.工作中經常用到的列表到詳情。返回來需要保留該位置的插件。(返回定位) 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個li</li>
            <li data-page="1" data-url="http://baidu.com?id=2">第一頁 第2個li</li>
            <li data-page="1" data-url="http://baidu.com?id=3">第一頁 第3個li</li>
            <li data-page="1" data-url="http://baidu.com?id=4">第一頁 第4個li</li>
            <li data-page="1" data-url="http://baidu.com?id=5">第一頁 第5個li</li>
            <li data-page="1" data-url="http://baidu.com?id=6">第一頁 第6個li</li>
            <li data-page="1" data-url="http://baidu.com?id=7">第一頁 第7個li</li>
            <li data-page="1" data-url="http://baidu.com?id=8">第一頁 第8個li</li>
            <li data-page="1" data-url="http://baidu.com?id=9">第一頁 第9個li</li>
            <li data-page="1" data-url="http://baidu.com?id=10">第一頁 第10個li</li>
            <li data-page="1" data-url="http://baidu.com?id=11">第一頁 第11個li</li>
            <li data-page="1" data-url="http://baidu.com?id=12">第一頁 第12個li</li>
            <li data-page="1" data-url="http://baidu.com?id=13">第一頁 第13個li</li>
            <li data-page="1" data-url="http://baidu.com?id=14">第一頁 第14個li</li>
            <li data-page="1" data-url="http://baidu.com?id=15">第一頁 第15個li</li>

            <li data-page="2" data-url="http://baidu.com?id=16">第二頁 第1個li</li>
            <li data-page="2" data-url="http://baidu.com?id=17">第二頁 第2個li</li>
            <li data-page="2" data-url="http://baidu.com?id=18">第二頁 第3個li</li>
            <li data-page="2" data-url="http://baidu.com?id=19">第二頁 第4個li</li>
            <li data-page="2" data-url="http://baidu.com?id=20">第二頁 第5個li</li>
            <li data-page="2" data-url="http://baidu.com?id=21">第二頁 第6個li</li>
            <li data-page="2" data-url="http://baidu.com?id=22">第二頁 第7個li</li>
            <li data-page="2" data-url="http://baidu.com?id=23">第二頁 第8個li</li>
            <li data-page="2" data-url="http://baidu.com?id=24">第二頁 第9個li</li>
            <li data-page="2" data-url="http://baidu.com?id=25">第二頁 第10個li</li>
            <li data-page="2" data-url="http://baidu.com?id=26">第二頁 第11個li</li>
            <li data-page="2" data-url="http://baidu.com?id=27">第二頁 第12個li</li>
            <li data-page="2" data-url="http://baidu.com?id=28">第二頁 第13個li</li>
            <li data-page="2" data-url="http://baidu.com?id=29">第二頁 第14個li</li>
            <li data-page="2" data-url="http://baidu.com?id=30">第二頁 第15個li</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    /*
     *  1.為什麼我要返回定位呢。肯定是增加用戶的體驗度。比如你剛看的那條信息挺感
     *  興趣的，點進詳情看完了，回來一看，不見了，是不是很嘔心啊。
     *  2.難點在哪裡？
     *    難點1：當我們有很多的列表的時候，列表肯定是滾動載入。於是我們直接保存滾動條的位置
     *    的方式可以放棄了。
     *    難點2：我們怎麼確定是從詳情返回來的?
     *  3.我們該怎麼實現呢？
     *    其實我們實現的方式跟保存滾動條的位置差不多。但要對scrollTop的距離進行處理。
     *    a.我們點擊這點詳情的時候，可視區域列表的條數，可以是一頁的數據，可能會是2頁數據。
     *    這種情況下我們都要把結果保留下來。
     *    b.當我們點擊這條數據的時候存現當前頁滾動了多少就可以了。
     *
     *   下麵具體看代碼：
     */
    (function(global,$,factory){
        var keepScrollTop = 0;  //用於最後保存的滾動條的位置
        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),    //滾動的容器
                logo:"data-url",     // 用於計算在這個容器中的每個LI中的唯一標識量。一般為去詳情的連接
                currentPage:"data-page",   //點擊當前的li的頁碼
                pageResize:30,                //與後臺交互的每頁返回的數量。 預設是30,
                goToDetailElement:$(".go-detail") ,   //滾動的每個列的總對象
                nodeLi:"",  //元素節點
                getPageNum:"getPageNum",              //1表示單頁數據，2表示雙頁數據。設置是請求單頁數據還是雙頁數據的標識量。放在URL上。
                urlPageNum:"pageNum",               //用於放到URL上面的參數標識表示當前是幾頁.  pageNum = currentPage   //返回來的時候用這個參數來判斷是不是需要滾動
            };
            var settings = $.extend(defaults,options || {});
            dataPage = elements.attr(settings.currentPage);    //求出點擊對象位於哪一個頁碼
            logo = elements.attr(settings.logo);     //求出當前對象的唯一標識量
            containerHeight = parseInt(settings.container.outerHeight());   //容器的高度
            scrollTopDistance = parseInt(settings.container.scrollTop());  //滾動的距離
            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);         //當前的頁數
                        tool.changeUrlPar(settings.getPageNum,2);              //獲取雙頁數據
                        keepScrollTop = scrollTopDistance -  prevCountPageDistance;                   //請求雙頁數據 向上 減 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);       //點擊對象位於當前的頁數
                            tool.changeUrlPar(settings.getPageNum,2);                //請求雙頁數據
                            keepScrollTop = scrollTopDistance - prevPageScrollDistance;
                        }else{
                            tool.changeUrlPar(settings.urlPageNum,dataPage);       //點擊對象位於當前的頁數
                            tool.changeUrlPar(settings.getPageNum,1);   //請求單頁數據
                            keepScrollTop = scrollTopDistance - prevPageScrollDistance;
                        };
                    };
                };
            });
            tool.setSessionStorage("keepScrollTop",keepScrollTop);     //保存滾動條的位置
            return this;
        };
        $.getSessionStorage = function(opt){
            opt = sessionStorage.getItem(opt);
            return opt;
        };
    })(window,jQuery,function(){
        var tool = {
            changeUrlPar(arg, val){    //改變URL參數
                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
         * 點擊玩了以後url就變成這樣了。這時候表示 返回來的時候請求第二頁的數據。只請求一次。從第二頁開始
         *
         * 2.http://localhost/index.php/Home/Web?pageNum=1&getPageNum=2
         * 這樣表示請求也數據。從第一頁的數據開始
         *
         */
        var _herf = $(this).attr("data-url");
        window.location.href = _herf;
    });
    //當我們初始化的時候
    var pageNum = 1,getPageNum = 2;  //這兩個數的值是從URL中獲取的。只有從詳情返回來 時候，才有

    if(!!pageNum && !!getPageNum){
        //其中還有很多判定，肯定是先獲取數據在滾動。。。
        $(window).scrollTop($.getSessionStorage('keepScrollTop'));
    }else{

    }
</script>
</html>
View Code

 

這個返回定位的插件基本就開發完畢了。當然對於實際的項目中，還有很多的改動。比如返回的時候，一定要把設置的標誌參數去掉。

4.本篇博文，全部原創。如有錯誤之處，歡迎指出。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • python基礎--異常，對象和迭代器
    異常處理 面向對象 迭代器和生成器 python異常處理 下麵代碼觸發了一個FileNotFoundError 拋出異常 異常類型 捕獲異常使用try,except,finally,else python面向對象 python是完全面向對象的，python中一切都是對象，包括變數，函數等。 定義一個 ...
  • 逆向工程
    1.概念 ①正向工程：Java類→資料庫表 MyBatis不支持 ②逆向工程：資料庫表→Java類 總結：通過MyBatis的jar包自動的生成資料庫所對應的Javabean。 步驟： 1.①創建一個專門的工程用於生成Java文件 先導包： 2.②pom.xml配置 3. ③創建generatorC ...
  • 前端迷思與React.js
    前端迷思與React.js 前端技術這幾年蓬勃發展, 這是當時某幾個項目需要做前端技術選型時, 相關資料整理, 部分評論引用自社區。 開始吧: 目前， Web 開發技術框架選型為兩種的占 80% 。這種戲劇性的變化持續了近 6 年。 自 2013 年 5 月推出以來，ReactJS 在過去三年中已成... ...
  • 十億級視頻播放技術優化揭密
    本文為轉載文章，文章來自：王輝|十億級視頻播放技術優化揭密 QCon是由InfoQ主辦的全球頂級技術盛會，每年在倫敦、北京、東京、紐約、聖保羅、上海、舊金山召開。自 2007年 3月份首次舉辦以來，已經有超萬名高級技術人員參加過QCon大會。QCon內容源於實踐並面向社區，演講嘉賓依據熱點話題，面向 ...
  • 讀 Zepto 源碼之神奇的 $
    無論是jquery還是zepto，都離不開$，這個符號似乎是萬能的，這篇文章通過zepto源碼來探究的就是$實現的原理。 ...
  • 12個非常有用的JavaScript技巧
    原文：12 Extremely Useful Hacks for JavaScript 作者：Caio Ribeiro Pereira 翻譯：雁驚寒 ...
  • Vuejs的一些總結
    1.Vuejs組件 這裡註意一點，組件要先註冊再使用，也就是說 如果反過來會報錯，因為反過來代表先使用了組件的，但是組件卻沒註冊。 webpack報錯後，使用webpack --display-error-details可以排錯 2.指令keep-alive 在看demo的時候看到在vue-rout ...
  • 螞蟻金服新一代數據可視化引擎 G2
    新公司已經呆了一個多月，目前著手一個數據可視化的項目，數據可視化肯定要用到圖形庫如 、 、 、 等，經決定我的這個項目用阿裡旗下螞蟻金服所開發的 圖表庫。 官方地址：https://antv.alipay.com/g2/doc/index.html Github：https://github.com ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類