用 es6 實現(xiàn)一個簡單可復用的 tab 組件

chnmagnus 發(fā)布于2019-08-21 14:46 / 2587人閱讀

摘要：效果這是用寫的一個簡單的組件，也可以直接點這里看效果。用來初始化一些成員變量，其中是值當前顯示的第幾頁，如果沒有傳值，則默認顯示第一頁。老樣子，綁定事件。用了箭頭函數(shù)，可以讓作用域始終指向這個組件，就可以免去額外聲明一個來解決作用域問題啦。

效果

這是用 es6 + jq 寫的一個簡單的 tab 組件，也可以直接點這里看效果。

解析

這里采用了 es6 的新特性 class 來生成一個組件，當然，用 es5 的 prototype 也可以模擬。

class Tab {
  constructor(opts) {
    this.index = opts.index || 0; 
    this.$tabHeader = opts.header; 
    this.$tabBody = opts.body;
    this.render();
    this.bind();
  }
  render() {
    this.$tabHeader.find("li").eq(this.index).addClass("active").siblings().removeClass("active");
    this.$tabBody.find("li").eq(this.index).show().siblings().hide();
  }
  bind() {
    this.$tabHeader.on("click", "li", e => {
      this.index = $(e.target).index();
      this.render();
    });
  }
}

let tab = new Tab({
  header: $(".tab-header"),
  body: $(".tab-body")
})

constructor：

組件的入口是 constructor 構造函數(shù)，es5 的話可以寫個 init 函數(shù)來代替。

用來初始化一些成員變量，其中 index 是值當前顯示的第幾頁，如果沒有傳值，則默認顯示第一頁。

render：

根據(jù)當前 index 渲染頭部和身體。

第一句話是給頭部當前 index 加上 “active” 的樣式，并且去除掉其它 li 已有的 “active”樣式。

第二句話是將身體當前 index 顯示出來，并且隱藏兄弟 li 元素。

bind

老樣子，綁定事件。

給頭部進行事件委托，點擊任意一個 li 則改變當前 tab 組件的 index 值，然后重新調用 render 方法渲染一下。

用了箭頭函數(shù)，可以讓作用域始終指向 Tab 這個組件，就可以免去額外聲明一個 self 來解決作用域問題啦。

用了箭頭函數(shù)就沒有 this 了，那么可以用 e.target 來獲取當前點擊的 dom 對象。

總結

兩個知識點：

class

arrow function

如果有什么想跟我討論的話，請私信。

云服務器 GPU云服務器用c實現(xiàn)簡單的shell 用java實現(xiàn)一個線程池 php 實現(xiàn)io復用 js實現(xiàn)的簡單特效

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/88021.html

前端規(guī)范(ES6BEMOOCSSSMACSS)

摘要：前端規(guī)范在實際開發(fā)中，由于團隊成員編碼習慣不一，技術層次不同，開發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質量，增加開發(fā)效率。是定義了一種的命名規(guī)范，每個名稱及其組成部分都是存在一定的含義。前端規(guī)范在實際開發(fā)中，由于團隊成員編碼習慣不一，技術層次不同，開發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質量，增加開發(fā)效率。 Javascript Javascript規(guī)范直接參考airbnb: ES6 ...

xushaojieaaa 2019-06-24 17:51 評論0 收藏0
前端規(guī)范(ES6BEMOOCSSSMACSS)

摘要：前端規(guī)范在實際開發(fā)中，由于團隊成員編碼習慣不一，技術層次不同，開發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質量，增加開發(fā)效率。是定義了一種的命名規(guī)范，每個名稱及其組成部分都是存在一定的含義。前端規(guī)范在實際開發(fā)中，由于團隊成員編碼習慣不一，技術層次不同，開發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質量，增加開發(fā)效率。 Javascript Javascript規(guī)范直接參考airbnb: ES6 ...

Object 2019-08-02 15:54 評論0 收藏0
前端規(guī)范(ES6BEMOOCSSSMACSS)

摘要：前端規(guī)范在實際開發(fā)中，由于團隊成員編碼習慣不一，技術層次不同，開發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質量，增加開發(fā)效率。是定義了一種的命名規(guī)范，每個名稱及其組成部分都是存在一定的含義。前端規(guī)范在實際開發(fā)中，由于團隊成員編碼習慣不一，技術層次不同，開發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質量，增加開發(fā)效率。 Javascript Javascript規(guī)范直接參考airbnb: ES6 ...

willin 2019-08-30 13:02 評論0 收藏0
前端規(guī)范(ES6BEMOOCSSSMACSS)

摘要：前端規(guī)范在實際開發(fā)中，由于團隊成員編碼習慣不一，技術層次不同，開發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質量，增加開發(fā)效率。是定義了一種的命名規(guī)范，每個名稱及其組成部分都是存在一定的含義。前端規(guī)范在實際開發(fā)中，由于團隊成員編碼習慣不一，技術層次不同，開發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質量，增加開發(fā)效率。 Javascript Javascript規(guī)范直接參考airbnb: ES6 ...

levy9527 2019-08-19 18:18 評論0 收藏0
Regularjs是什么

摘要：目前已經(jīng)在大大小小多個線上產(chǎn)品中使用了，也收集了一些有效的建議好了，該看下一個最簡單的組件長什么樣吧免費領取驗證碼內(nèi)容安全短信發(fā)送直播點播體驗包及云服務器等套餐更多網(wǎng)易技術產(chǎn)品運營經(jīng)驗分享請訪問網(wǎng)易云社區(qū)。文章來源網(wǎng)易云社區(qū) 本文由作者鄭海波授權網(wǎng)易云社區(qū)發(fā)布。此文摘自regularjs的指南，目前指南正在全面更新，把老文檔的【接口/語法部分】統(tǒng)一放到了獨立的 Reference...

seal_de 2019-06-28 11:09 評論0 收藏0