Web Components嚐鮮——polymer組件封裝之date組件

先來講個題外話。不少技術開發可能只知道php和python。polymer是個什麼鬼！話很少說，進入正題。

Web Components是什麼？

首先咱們須要知道，Web Components 包括了四個部分：

• Custom Elements

Custom Elements 顧名思義，是提供一種方式讓開發者能夠自定義 HTML 元素，包括特定的組成，樣式和行爲。支持 Web Components 標準的瀏覽器會提供一系列 API 給開發者用於建立自定義的元素，或者擴展示有元素。

• HTML Imports  

HTML Imports 是一種在 HTMLs 中引用以及複用其餘的 HTML 文檔的方式。這個 Import 很漂亮，能夠簡單理解爲咱們常見的模板中的 include 之類的做用。

咱們最多見的引入一個 css 文件的方式是：

<link rel="stylesheet" href="/css/master.css">複製代碼複製代碼

Web Components 如今提供多了一個這個：

<link rel="import" href="/components/date.html">複製代碼

• HTML Templates

能夠理解爲渲染模版。

• Shadow DOM（陰影dom）

shadow dom提出了好久，最本質的需求是須要一個隔離組件代碼做用域的東西，例如我組件代碼的 CSS 不能影響其餘組件之類的，而 iframe 又過重而且可能有各類奇怪問題。

能夠這麼說，Shadow DOM 旨在提供一種更好地組織頁面元素的方式，來爲日趨複雜的頁面應用提供強大支持，避免代碼間的相互影響。

polymer組件開發——date組件開發

polymer經常使用周期函數

• created 

在建立元素時調用，且在設置屬性值並初始化本地dom以前調用。

在設置屬性值以前用於一次在調用。

• ready

在設置屬性值初始化本地dom以後調用。

初始化shadow dom樹以後，用於組件的一次性配置。（配置屬性最好使用觀察者）

• attached

元素附加（掛載）到dom後調用。至關於原生的connectedCallback。

主要用於添加文檔級事件監聽器，例如帶註釋的事件監聽器。

• detached

元素從dom中分離（卸載）後調用。至關於disconnectedCallback。

主要用途包括刪除添加的事件監聽器。

• attributeChanged

在元素屬性發生變動時調用。至關於原生的attributeChangedCallback。

用於處理 與聲明的屬性 不 對應的 屬性更改 。 （對於聲明的屬性，Polymer會自動處理屬性更改 ）。

date組件開發

• 先看一波效果圖

• 組件開發時的疑難雜症

佈局問題

數據都是經過動態獲取的可是數據結構該怎樣才能便於遍歷呢！

最開始我想到了雙層循環，數據結構爲[[27,28,29,30,31,1,2],[3,4,5,6,7,8,9]...]。這樣數據處理很是麻煩，可是基本能夠實現遍歷後上圖效果。

後來我想到了最近本身瞭解到到，display:grid。決定選用它做爲佈局實現上圖效果。遍歷和數據處理也不用那麼麻煩了。數據就能夠直接用一維數組[27,28,29,30,31,...1,2,3,4,5,6,7]遍歷了。主要樣式以下：

給除年月所在行除外到日期及星期單獨使用一個容器，該容器樣式

display: grid;    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;複製代碼

grid具體參考如下網址：

css-tricks.com/snippets/cs…

• 每月數據獲取問題，那一號對應星期幾。

一開始想到的是是否是要分平年閏年什麼的，後來發現了new Date的妙用。大概實現以下：

getDayList() { 
  // this.year爲面板顯示年份，this.month爲面板顯示月份。
  
  // totalDays爲面板所在月份最後一天爲多少號
  const totalDays = new Date(this.year, this.month, 0).getDate();
  
  // min表示遍歷時需顯示上月多少天數據，最多7天。
  // new Date其實就是爲了獲取改月第一天星期幾。如第一天星期五，則需補上週日到週四五天數據
  const min = 1 - (new Date(this.year, this.month - 1, 1).getDay() || 7);
  
  // 面板總共顯示42天數據，出去顯示上月和本月的，剩餘爲下月數據
  const max = min + 42;  

  // this.dayList爲面板展現的數據
  this.dayList = [];  

  // 遍歷時獲取的obj爲某一天日期對象，截圖中min爲-4。總共補了上個月五天數據
  for (let i = min; i < max; i++) {    
    const obj = new Date(this.year, this.month - 1, i); 

    // 記錄判斷是否爲當前月數據
    const currMonth = i > 0 && i <= totalDays;

    // 記錄是否爲選中日期
    const select = obj === this.timestamp;

    this.push('dayList', {
      date: obj.getDate(),
      currMonth,     
      select,
      disabled: minTimestamp > obj.getTime() || maxTimestamp < obj.getTime()
    })
  }複製代碼