動手寫一個jquery插件(實踐)

Kylin_Mountain 發布于2019-08-22 18:10 / 1529人閱讀

摘要：自己實踐寫一個基于的插件面向對象的寫法這里我就不寫和了，主要就是分析插件代碼代碼我上傳到上了，如果你們想看結構及樣式的話，可以去把源碼下來看看地址地址目錄結構以及基本結構搭建首先搭建一個插件的框架里調用構造函數配置默認參數及參數獲取然后我們

自己實踐寫一個基于jquery的tab插件,面向對象的寫法
這里我就不寫index.html,和index.css了，主要就是分析插件代碼tab.js
代碼我上傳到github上了，如果你們想看DOM結構及CSS樣式的話，可以去把源碼下來看看
github地址：github地址
目錄結構：index.html,index.css以及tab.js

基本結構搭建

首先搭建一個jquery插件的框架
tab.js

;(function ($) {
    var Tab = function (target) {
    }

    Tab.prototype = {  
    }
   
    window.Tab = Tab
    
}(jQuery))

index.html 里調用Tab構造函數

配置默認參數及參數獲取

然后我們先配置一些默認參數

tab.js

   ```
   var Tab = function (target) {
       //保存Tab類自身
       var _this_ = this
       //保存當前Tab組件的對象
       this.target = target
       //默認配置參數
       this.config={
           "tiggerType": "mouseover", //鼠標交互方式
           "effect":null,  //切換效果,默認為無
           "default":1,    //默認展示第幾個標簽
           "auto":false,    //自動切換時長,若指定了時長則表示開啟自動切換
       }
   }
   ```

用戶(使用者)配置參數的方法

默認參數配置好以后，我們需要獲取用戶的配置參數，
函數傳參的方式大家應該都很熟悉了，在這里我們不用傳參的方式獲取，我們采用設置DOM屬性的方式設置參數。這種配置方法很常見，比如Element-ui

index.html

在最外層的div即我們選中的DOM節點上設置了一個名為config的屬性，config的值為一串JSON
這樣子我們就設置了參數，那么怎么獲取呢？我們寫一個函數來獲取

獲取用戶的配置參數
tab.js

Tab.prototype = {
    //獲取用戶的配置參數
    getConfig: function () {
        var config = $(this.target).attr("config")
        if(config&&config!==""){
            //將用戶json格式的config轉為對象格式
            return $.parseJSON(config)
        }else{
            return null
        }
    },
}

函數我們寫在Tab.prototype{}里，這里的邏輯是：
1、attr()獲取我們在DOM節點里的配置參數
2、如果有的話就將我們獲取到的值轉換為js對象，沒有的話就返回null
這里要注意的是我們的宿主DOM，即我們在調用 new Tab("#box1")傳入的對象要用jquery包裹一下，這樣才能正常獲取到該節點，因為我傳入的僅僅是宿主DOM的ID，當然也可以在調用時直接將這個ID包裝一下，在這里就可以省去這一步而直接使用傳過來的對象。
index.html

參數處理
在解決了用戶參數配置的問題后，我們就要處理參數了

tab.js

var Tab = function (target) {
    //如果存在用戶的參數
    if(this.getConfig()){
        $.extend(this.config,this.getConfig())
    }
}

這里用到$.exten的()方法,如果有用戶的配置參數則會追加修改this.config，如果用戶沒有配置參數，那么程序就會使用我們的默認參數

綁定事件

獲取具體節點
tab.js / var Tab = function (){}

this.tabItems = $(this.target).find(".title ul.tab-list li")
this.contentItems = $(this.target).find(".content img")

為每個Tab標簽頁綁定節點
tab.js / var Tab = function (){}

var config = this.config
//綁定鼠標交互事件
if(config.tiggerType==="click"){
    this.tabItems.bind("click",function () {
        //這里的this指向每個每個具體的節點
        _this_.changeStyle($(this))
    })
}
else if(config.tiggerType==="click"||config.tiggerType!=="click"){
    this.tabItems.bind("mouseover",function () {
        _this_.changeStyle($(this))
    })
}

/* this.tabItems.bind(config.tiggerType,function () {
    _this_.changeStyle($(this))
})*/

1、在config配置里獲取到鼠標交互的方式，我在這里寫了"click"和"mouseover"兩種，并且考慮到用戶配置參數時可能會寫錯所以在else if 判定了一下，如果用戶寫錯了那么默認的交互方式是mouseover
2、當然也可以向我下面注釋的那樣直接綁定參數里的方法,然后你們可以自己加一些錯誤提示什么的
3、在綁定了交互方式后調用改變Tab 樣式的函數changeStyle()

改變tab標簽頁樣式

我們給每個Tab節點綁定了交互事件，在事件觸發后就調用changeStyle()函數來該變Tab標簽的樣式

該變tab選中的樣式

tab.js / Tab.prototype={}

changeStyle:function (currentTab) {
    var index = currentTab.index()
    currentTab.addClass("select").siblings().removeClass("select")
    //切換效果
    if(this.config.effect === "fade"){
        this.contentItems.eq(index).fadeIn().siblings().fadeOut()
    }else{
      this.contentItems.eq(index).addClass("current").siblings().removeClass("current")
    }
    }

1、我們在調用的時候將目標節點傳參傳進來了
2、index()方法獲取當前索引，用與匹配下面的content內容區
3、去配置參數里找有沒有配置切換效果，這里我只配置看一種淡入淡出效果，如果有的話則淡入淡出的切換，如果沒有配置切換方式，那么就是默認參數null則直接切換無效果
4、在給標簽頁addClss()添加選中狀態的同時，要將其它非選中狀態標簽頁的樣式清除

默認顯示的標簽頁

配置組件初始化時默認顯示的標簽頁
tab.js / var Tab = function (){}

//默認顯示的Tab
if(config.default<=this.tabItems.length){
    this.changeStyle(this.tabItems.eq(config.default-1))
} else {
    console.log("default 參數配置錯誤")
}

拿到參數里的default之后走一遍changeStyle()流程這樣就完成了默認標簽頁的設置
這里要注意的就是因為數組是從0開始的，但我們的習慣是從1開始，配置的時候想要第幾個標簽頁默認顯示就用第幾個，所以實際上這里選中標簽頁時要將default-1

自動切換功能

我在配置參數里有寫，auto這個參數，本來是想寫自動切換這個功能的，但因為我在之前寫面向對象Tab標簽頁時已經寫過了，這里寫的有點煩就不寫了，無非就是加個定時器

注冊為jquery方法

終于走到了最后一步，將我們寫的構造函數注冊為jquery方法
之前我們使用方法是new 一個新對象
tab.js / var Tab = function (){}

$.fn.extend({
    tab:function () {
      return new Tab(this)
    }
})

這樣子注冊一下，我們就可以按照jquery的方法去操作這個組件了
index.html

GPU云服務器云服務器自己動手寫爬蟲自己動手寫網路爬蟲自己動手寫網絡爬蟲自己動手寫開發工具

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95573.html

GridManager 開源歷程

摘要：歷程啟動于年月日不曾想這一堅持已經多天了。每個午飯后晚飯前。期間對的認知與實踐提升明顯，并沉淀下名為的類庫。每次發布前的，成為一種風險把控。在此之前從沒有如此的認同單元測試，也相信這終將會成為一種大家都遵守的契約。 GridManager歷程 GridManager 啟動于2015年02月10日, 不曾想這一堅持已經1200多天了?？傁霝榇擞涗浶┦裁矗恢蔽丛鴦邮?。午飯后，公司很安靜...

honhon 2019-08-22 18:48 評論0 收藏0
看完你也想編寫自己的 react 插件

摘要：清楚自己想要什么樣的組件，就自己動手擼唄。咱們先來看看它的效果吧如果大家有時間，窩還是鼓勵大家自己動手實現一些小插件。于是自己就琢磨能否繼承使用方法同時保持特有組件特性。需要確保已安裝。副標題----為什么我要寫這個 react 插件圖片懶加載是項目中常用的功能，然而現有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點：沒有只針對 image 懶加載組件。多...

Vixb 2019-08-30 14:06 評論0 收藏0
看完你也想編寫自己的 react 插件

摘要：清楚自己想要什么樣的組件，就自己動手擼唄。咱們先來看看它的效果吧如果大家有時間，窩還是鼓勵大家自己動手實現一些小插件。于是自己就琢磨能否繼承使用方法同時保持特有組件特性。需要確保已安裝。副標題----為什么我要寫這個 react 插件圖片懶加載是項目中常用的功能，然而現有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點：沒有只針對 image 懶加載組件。多...

zhou_you 2019-08-22 15:13 評論0 收藏0
看完你也想編寫自己的 react 插件

摘要：清楚自己想要什么樣的組件，就自己動手擼唄。咱們先來看看它的效果吧如果大家有時間，窩還是鼓勵大家自己動手實現一些小插件。于是自己就琢磨能否繼承使用方法同時保持特有組件特性。需要確保已安裝。副標題----為什么我要寫這個 react 插件圖片懶加載是項目中常用的功能，然而現有 react 懶加載組件庫，用著都不是很爽了 ?。概括一下有如下幾點：沒有只針對 image 懶加載組件。多...

xingpingz 2019-08-01 18:40 評論0 收藏0
一個JS效果竟然要研究一天，我是不是不適合做前端？

摘要：緊接著就是導航欄的特效編寫，殊不知，就是這個效果，讓原本計劃上午完成的事情，愣是被我研究了大半天才解決。剛開始我的布局是，導航欄是一個，下面有八個，分別是八個欄目。 showImg(https://segmentfault.com/img/bVYUar?w=720&h=537); 前言今天這篇文章的標題，顯然是要搞事情。一個JS交互效果，居然花費了一天的寶貴時間才研究出來，我是不是不...

ztyzz 2019-08-21 17:42 評論0 收藏0