国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

用 es6 實(shí)現(xiàn)一個(gè)簡(jiǎn)單可復(fù)用的 tab 組件

chnmagnus / 2491人閱讀

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

效果

這是用 es6 + jq 寫的一個(gè)簡(jiǎn)單的 tab 組件，也可以直接 點(diǎn)這里 看效果。

解析

這里采用了 es6 的新特性 class 來(lái)生成一個(gè)組件，當(dāng)然，用 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 構(gòu)造函數(shù)，es5 的話可以寫個(gè) init 函數(shù)來(lái)代替。

用來(lái)初始化一些成員變量，其中 index 是值當(dāng)前顯示的第幾頁(yè)，如果沒(méi)有傳值，則默認(rèn)顯示第一頁(yè)。

render：

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

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

第二句話是將身體當(dāng)前 index 顯示出來(lái)，并且隱藏兄弟 li 元素。

bind

老樣子，綁定事件。

給頭部進(jìn)行事件委托，點(diǎn)擊任意一個(gè) li 則改變當(dāng)前 tab 組件的 index 值，然后重新調(diào)用 render 方法渲染一下。

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

用了箭頭函數(shù)就沒(méi)有 this 了，那么可以 用 e.target 來(lái)獲取當(dāng)前點(diǎn)擊的 dom 對(duì)象。

總結(jié)

兩個(gè)知識(shí)點(diǎn)：

class

arrow function

如果有什么想跟我討論的話，請(qǐng)私信。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/88021.html

相關(guān)文章

  • 前端規(guī)范(ES6BEMOOCSSSMACSS)

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

    Object 評(píng)論0 收藏0

  • 前端規(guī)范(ES6BEMOOCSSSMACSS)

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

    willin 評(píng)論0 收藏0

  • 前端規(guī)范(ES6BEMOOCSSSMACSS)

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

    levy9527 評(píng)論0 收藏0

  • 前端規(guī)范(ES6BEMOOCSSSMACSS)

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

    xushaojieaaa 評(píng)論0 收藏0

  • Regularjs是什么

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

    seal_de 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<