代碼修煉之路-木桶佈局

時間 2020-03-28

標籤代碼修煉之路木桶佈局简体版

原文原文鏈接

這篇文章咱們主要作三件事es6

講解木桶佈局的原理
把這個效果作成個UI 精美、功能完善的小項目
經過這個項目，演示如何去思考、如何去優化代碼

木桶佈局原理

假設咱們手裏有20張照片，這些照片能夠在保持寬高比的狀況下進行放大或者縮小。選定一個基準高度好比200pxweb

拿第1張照片，鎖定寬高比高度壓縮到200px，放到第一行
拿第2張照片，高度壓縮到200px，放到第一行，圖片1的後面
...
拿第5張照片，高度壓縮到200px，放到第一行。oh，很差，空間不夠，放不下了
把前面水平依次排放好的4個圖片當成一個總體，等比拉伸，總體寬度正好撐滿容器
第5張照片從下一行開始，繼續...

以上，就是木桶佈局的原理。json

木桶佈局項目

但現實場景遠比僅實現基本效果的DEMO更復雜，以 500px 官網和百度圖片爲例，主要考慮如下狀況api

圖片從服務器經過接口異步獲取
要結合懶加載實現滾動加載更多圖片
當屏幕尺寸發生變化後須要從新佈局

爲了讓產品功能更強大咱們還須要加入即時檢索功能，用戶輸入關鍵字便可當即用木桶佈局的方式展現搜索到底圖片，當頁面滾動到底部時會加載更多數據，當調整瀏覽器尺寸時會從新渲染，效果在這裏。下圖是效果圖瀏覽器

你們一塊兒來理一理思路，看如何實現：服務器

輸入框綁定事件，當輸入框內容改變時，向接口發送請求獲取數據
獲得數據後使用木桶佈局的方式渲染到頁面上
當滾動到底部時獲取新的頁數對應的數據
獲得數據後繼續渲染到頁面上
當瀏覽器窗口變化時，從新渲染

按照這個思路，咱們能夠勉強寫出效果，但確定會遇到不少惱人的細節，好比app

當用戶輸入內容時，若是每輸入一個字符就發送請求，會致使請求太多，如何作節流？
對於單次請求的數據，在使用木桶佈局渲染時最後一行數據如何判斷、如何展現？
對於後續滾動異步加載的新的數據，如何佈局到頁面？特別是如何處理與上一次請求渲染到頁面上的最後一行數據的銜接？
當屏幕尺寸調整時，如何處理？是清空從新獲取數據？仍是使用已有數據從新渲染？
數據到來的時機和用戶操做是否存在關聯？如何處理？好比上次數據到來以前用戶又發起新的搜索
......

當這些細節處理完成以後，咱們會發現代碼已經被改的面目全非，邏輯複雜，其餘人(可能包括明天的本身)很難看懂。frontend

優化代碼

咱們能夠換一種思路，使用一些方法讓代碼解耦，加強可讀性和擴展性。最經常使用的方法就是使用「發佈-訂閱模式」，或者說叫「事件機制」。發佈訂閱模式的思路本質上是：對於每個模塊，聽到命令後，作好本身的事，作完後發個通知異步

第一，咱們先實現一個事件管理器函數

class Event {
    static on(type, handler) {
        return document.addEventListener(type, handler)
   }
   static trigger(type, data) {
        return document.dispatchEvent(new CustomEvent(type, {
            detail: data
        }))
    }
}
// useage
Event.on('search', e => {console.log(e.detail)})
Event.trigger('search', 'study frontend in jirengu.com')

若是對 ES6不熟悉，能夠先看看語法介紹參考這裏，你們也可使用傳統的模塊模式來寫參考這裏。固然，咱們還能夠不借助瀏覽器內置的CustomEvent，手動寫一個發佈訂閱模式的事件管理器，參考這裏。

第二，咱們來實現交互模塊

class Interaction {
    constructor() {
        this.searchInput = document.querySelector('#search-ipt')
        this.bind()
    }
   bind() {
        this.searchInput.oninput = this.throttle(() => {
            Event.trigger('search', this.searchInput.value)
        }, 300)
        document.body.onresize = this.throttle(() =>    Event.trigger('resize'), 300)
        document.body.onscroll = this.throttle(() => {
            if (this.isToBottom()) {
                Event.trigger('bottom')
            }
        },3000)
    }
    throttle(fn, delay) {
        let timer = null
        return () => {
            clearTimeout(timer)
            timer = setTimeout(() => fn.bind(this)(arguments), delay)
        }
    }
    isToBottom() {
        return document.body.scrollHeight - document.body.scrollTop - document.documentElement.clientHeight < 5
    }
}
new Interaction()

以上代碼邏輯很簡單：

當用戶輸入內容時，節流，而且發送事件"search"
當用戶滾動頁面時，節流，檢測是否滾動到頁面底部，若是是則發起事件"bottom"
當窗口尺寸變化時，節流，發起事件"resize"

須要注意上述代碼中 Class 的寫法和箭頭函數裏 this 的用法，這裏不作過多講解。還須要注意代碼中節流函數 throttle 的實現方式，以及頁面是否滾動到底部的判斷 isToBottom，咱們能夠直接讀代碼來理解，而後本身動手寫 demo 測試。

第三，咱們來實現數據加載模塊

class Loader {
    constructor() {
        this.page = 1
        this.per_page = 10
        this.keyword = ''
        this.total_hits = 0
        this.url = '//pixabay.com/api/'
        this.bind()
    }
    bind() {
        Event.on('search', e => {
            this.page = 1
            this.keyword = e.detail
            this.loadData()
                .then(data => {
                  console.log(this)
                  this.total_hits = data.totalHits
                  Event.trigger('load_first', data)
                })
                .catch(err => console.log(err))
        })
        Event.on('bottom', e => {
            if(this.loading) return
            if(this.page * this.per_page > this.total_hits) {
              Event.trigger('load_over')
              return
            }
             this.loading = true

            ++this.page
            this.loadData()
                .then(data => Event.trigger('load_more', data))
                .catch(err => console.log(err))
        })
    }
    loadData() {
        return fetch(this.fullUrl(this.url, {
                key: '5856858-0ecb4651f10bff79efd6c1044',
                q: this.keyword,
                image_type: 'photo',
                per_page: this.per_page,
                page: this.page
             }))
            .then((res) => {
              this.loading = false
              return res.json()
              })
    }
    fullUrl(url, json) {
        let arr = []
        for (let key in json) {
            arr.push(encodeURIComponent(key) + '=' +   encodeURIComponent(json[key]))
        }
        return url + '?' + arr.join('&')
    }
}
new Loader()

由於加載首頁數據與加載後續數據兩者的流程是有差別的，全部對於 Loader 模塊，咱們根據定義了3個事件。流程以下：

當監聽到"search"時，獲取第一頁數據，把頁數設置爲1，發送事件"load_first"並附上數據
當監聽到"bottom"時，根據數據判斷數據是否加載完了。若是加載完了發送"load_over"事件；不然把頁數自增，加載數據，發送"load_more"事件並附上數據

第4、咱們來實現佈局模塊

class Barrel {
    constructor() {
    this.mainNode = document.querySelector('main')
    this.rowHeightBase = 200
    this.rowTotalWidth = 0
    this.rowList = []
    this.allImgInfo = []

    this.bind()
}
bind() {
    Event.on('load_first', e => {
      this.mainNode.innerHTML = ''
      this.rowList = []
      this.rowTotalWidth = 0
      this.allImgInfo = [...e.detail.hits]
      this.render(e.detail.hits)
    })

    Event.on('load_more', e => {
      this.allImgInfo.push(...e.detail.hits)
      this.render(e.detail.hits)
    })

    Event.on('load_over', e => {
      this.layout(this.rowList, this.rowHeightBase)
    })

    Event.on('resize', e => {
      this.mainNode.innerHTML = ''
      this.rowList = []
      this.rowTotalWidth = 0
      this.render(this.allImgInfo)
    })
}
render(data) {
  if(!data) return
  let mainNodeWidth = parseFloat(getComputedStyle(this.mainNode).width)
  data.forEach(imgInfo => {
      imgInfo.ratio = imgInfo.webformatWidth / imgInfo.webformatHeight
      imgInfo.imgWidthAfter = imgInfo.ratio * this.rowHeightBase

      if (this.rowTotalWidth + imgInfo.imgWidthAfter <= mainNodeWidth) {
          this.rowList.push(imgInfo)
          this.rowTotalWidth += imgInfo.imgWidthAfter
      } else {
          let rowHeight = (mainNodeWidth / this.rowTotalWidth) * this.rowHeightBase
          this.layout(this.rowList, rowHeight)
          this.rowList = [imgInfo]
          this.rowTotalWidth = imgInfo.imgWidthAfter
      }

  })
 }

 layout(row, rowHeight) {
  row.forEach(imgInfo => {
      var figureNode = document.createElement('figure')
      var imgNode = document.createElement('img')
      imgNode.src = imgInfo.webformatURL
      figureNode.appendChild(imgNode)
      figureNode.style.height = rowHeight + 'px'
      figureNode.style.width = rowHeight * imgInfo.ratio + 'px'
      this.mainNode.appendChild(figureNode)
  })
  }
}

new Barrel()

對於佈局模塊來講考慮流程很簡單，就是從事件源拿數據本身去作佈局，流程以下：