一個(gè)簡(jiǎn)單的選項(xiàng)卡js插件

WelliJhon 發(fā)布于2019-08-20 14:31 / 2537人閱讀

摘要：今天寫一個(gè)簡(jiǎn)單的選項(xiàng)卡插件，這個(gè)我也是看別人博文學(xué)習(xí)實(shí)現(xiàn)的，然后加一些自己的理解。一實(shí)現(xiàn)效果雖說(shuō)有點(diǎn)簡(jiǎn)陋，但是可以看到在文件中，引入我們寫的插件后，實(shí)現(xiàn)選項(xiàng)卡切換，就只需一行代碼就可以實(shí)現(xiàn)了。

估計(jì)大概兩三個(gè)月沒有這類的關(guān)于前端的文章了，一來(lái)是覺得自己太菜，二來(lái)也是因?yàn)樽约旱膽猩ⅲ瑴啘嗀南臅r(shí)間卻沒有收獲什么成果。今天因?yàn)楹鸵恍┩瑢W(xué)的聊天，突然自己的心情很低落，有一種看不到未來(lái)在哪的感覺，所以強(qiáng)行讓自己學(xué)習(xí)，去看js插件怎么寫。今天寫一個(gè)簡(jiǎn)單的選項(xiàng)卡插件，這個(gè)我也是看別人博文學(xué)習(xí)實(shí)現(xiàn)的，然后加一些自己的理解。

一.實(shí)現(xiàn)效果

雖說(shuō)有點(diǎn)簡(jiǎn)陋，但是可以看到在html文件中，引入我們寫的tab.js插件后，實(shí)現(xiàn)選項(xiàng)卡切換，就只需一行代碼就可以實(shí)現(xiàn)了。

二.tab.js結(jié)構(gòu)

先整體看下結(jié)構(gòu)大概是怎樣

//一開始當(dāng)然是創(chuàng)建一個(gè)構(gòu)造函數(shù)tab
function Tab(){
  //里面只有一行代碼，就是調(diào)用自身的初始化方法
  this.init.apply(this,arguments);
}

//需要的屬性和方法全部寫在prototype里面
Tab.prototype = {
  //屬性
  //some code
  //方法
  //some code
}

三.一些方法的實(shí)現(xiàn)

我們?cè)谶@里沒有使用閉包然后立即執(zhí)行，所以才需要一個(gè)初始化函數(shù)將屬性都初始化，在init中：

  init:function(ela,elb,paramObj){
  //一般在插件中都會(huì)有個(gè)配置對(duì)象，并且有默認(rèn)值
  this.defaultOptions = {
    curClass:"current",
    type:"mouseover",
    delay:150
  }
  //然后我們會(huì)去檢測(cè)用戶有沒有傳入配置參數(shù)，有的話就要使用用戶的配置，這里使用到一個(gè)extend方法
  this.options = this.extend(this.defaultOptions, paramObj || {})
}

extend實(shí)際是一個(gè)對(duì)象拓展方法，將b對(duì)象的屬性覆蓋到a對(duì)象中，在JQ里直接寫好了這種方法，但js里沒有，需要我們自己去模擬，我們將這個(gè)方法寫在init外面

extend:function(a,b){
  for(var i in b){
    //這個(gè)是檢測(cè)for循環(huán)到的屬性是不是b自身的
    if(b.hasOwnProperty(i)){
      a[i] = b[i]
    }
  }
  return a;
}

后面init里就是一些基本的屬性，比如獲取導(dǎo)航欄的DOM，內(nèi)容塊的DOM，以及他們的子元素還有子元素的個(gè)數(shù)，后面遍歷會(huì)用到，具體可在文章附的源碼里去看。最后我們要在init中給每個(gè)導(dǎo)航綁定事件，一個(gè)是觸發(fā)，一個(gè)是取消，取消自然就是onmouseout，觸發(fā)的話可以傳入?yún)?shù)來(lái)制定，使用中括號(hào)可以解決這個(gè)問題

for(var i=0;i
添加類名和消除類名方法
實(shí)現(xiàn)這種切換效果一般采用的方法都是使用類名的添加和消除來(lái)實(shí)現(xiàn)的，那么對(duì)類名的操作方法就很重要了

addClass:function(el,name){
  var arr = [],
       str = el.className,
       arr = str.split(/s+/),
       len = arr.length,
       name = this.trim(name),
  for(var i=0;i
消除類名方法類似，主要是用到了一個(gè)splice方法。
change選項(xiàng)卡切換函數(shù)
這個(gè)就是給每個(gè)導(dǎo)航欄綁定的函數(shù)

這里也是使用了一個(gè)閉包，每次都返回一個(gè)新函數(shù)
change:function(index){
  var self = this;
  return function(){
    self.timer = setTimeout(function(){
        for(var i=0;i
四.總結(jié)
其實(shí)這個(gè)是非常簡(jiǎn)單的一個(gè)封裝，剛開始學(xué)習(xí)前端的肯定是都做過這種切換效果的，而這個(gè)封裝就是利用對(duì)象原型鏈的繼承，來(lái)達(dá)到一些方法的復(fù)用。其中主要的知識(shí)點(diǎn)：
1.每新建一個(gè)對(duì)象都需要init初始化
2.將需要的屬性和方法寫在prototype中
3.利用閉包去給dom綁定事件
4.類名的處理要注意細(xì)節(jié)，比如檢測(cè)是否已存在，是否有空格等
5.對(duì)于一些事件要做延遲處理，事件完成后要注意清理現(xiàn)場(chǎng)
五.最后再說(shuō)兩句
這篇文章實(shí)際上沒有什么有價(jià)值的內(nèi)容，但我希望它對(duì)我而言是一個(gè)學(xué)習(xí)開始，就像剛剛開始學(xué)習(xí)前端的時(shí)候一樣，那種純粹的技術(shù)的渴望。還有幾個(gè)月就要畢業(yè)了，才意識(shí)到自己的大學(xué)真的就這么過去了。就像當(dāng)時(shí)讀大一大二的時(shí)候，回家和高中同學(xué)聚會(huì)也才意識(shí)到高中真的就這么過去了，哪怕那個(gè)人站在面前，你也感覺和當(dāng)初的他不同了。可沒辦法這就是成長(zhǎng)。當(dāng)時(shí)還想著要是能重來(lái)，一定要好好讀書，一定要追到同桌妹子。現(xiàn)在大學(xué)要過去了，遺憾當(dāng)然是有，但不會(huì)再有那種想重來(lái)的想法了，因?yàn)槟呐轮貋?lái)也一定差不多，真正重要的是自己心智的變化。不重來(lái)照樣可以好好讀書，不重來(lái)照樣可以去追求自己喜歡的人，何必把自己限定在一種環(huán)境，一種身份上呢。盡管這段時(shí)間以來(lái)受刺激很多，心情有點(diǎn)低落，但還是要好好努力，好好生活。就像以前一直以為自己寫文章肯定沒人看的，結(jié)果偶爾會(huì)有人給你點(diǎn)贊，有人給你回復(fù)，也許只是寥寥數(shù)語(yǔ)，但對(duì)我而言確實(shí)莫大的鼓勵(lì)。希望新的一年自己能不斷成長(zhǎng)，越來(lái)越強(qiáng)大！
源碼地址：https://coding.net/u/ly550275...