我的烏拉拉練功坊

請來參觀移植到 Google Firebase 的成績 https://oolala.xyz/ken73chen/

2017年8月10日

MooTools 心得:data-*


MooTools 保留了 JavaScript 的性格,沒有把 JavaScript 扮裝成完全不同的面貌。

因為 HTML5,HTML tag 裡面可以放自己的 data-* 屬性,本來都要這樣用 element.getProperty('data-'+key);,用多就嫌麻煩了,不過 MooTools 要擴充功能,非常非常的簡單,所以就做了幾個跟 data-* 有關的東西出來。

來,又要看 JSFiddle 了:

MooTools 的 code 其實很好懂,很直覺就看懂了, 用 Element.implememt 加入了 setData、setDatas、getData 三個功能,所以之後選到的單一個元素,都可以用 setData、setDatas、getData,看 btn1 的 click event 就知道了,document.id 就相當於 $,MooTools 也可以用 $。

Elements.implememt 也很好懂,如果選到了一大堆元素,可以用 setData、setDatas、getData、filterData,可以看 btn2、btn3、btn4、btn5 的 click event,document.body.getElements 相當於 $$,也可以用 $$。

document.body.getElements('div').getData('btn1') 一看就知道,'div' 是 CSS Selector,選出所有 div 之後,再取 data-btn1 的值,因為傳回的是 Array,所以用 join('/') 將結果串起來。

好啦!我知道根本找不到用 MooTools 的人。