× 說心事 政治時事 生活 運動 汽車 機車 自行車 相機 科技 理財 旅遊美食 娛樂 健康 美麗時尚 人際關係 文學故事 關於《思書》
吃喝玩樂 關於《思書》

jQuery 的 data() vs attr() 之不同

紅寶鐵軌客
來關注...
關注:紅寶鐵軌客
關注有什麼好處?:當作者有新文章發佈時,「思書日報」就會匯總自動通知您,讓您更容易與作者互動。
x
紅寶鐵軌客
Rails 使用中,折磨中,享受中......
Victorian vintage round cut ruby engagement ring in 14k yellow gold 7mm center vs g h 984
    很久以前就是個「寫程式的」,其實,什麼程式都不熟⋯⋯
     
    就,這會一點點,那會一點點⋯⋯
作者最新發佈的文章:
  • Rails 如何檢查 URL 是否存在?
  • Rails 為什麼要使用 escape_javascript?
  • Rails 使用 Javascript Ajax 很簡單
作者最近參與的討論:
  • Rails 常見資安陷阱與解決方法
現在就加入《思書》,你就可以關注本作者了!
《思書》是一個每個人的寫作與論壇平台,特有的隱私管理,讓你寫作不再受限,討論更深入真實,而且免費。 趕快來試試!
還未加入《思書》? 現在就登錄! 已經加入《思書》── 登入
Rails 使用中,折磨中,享受中......
2018/03/13
53   0  

現在的網頁開發已經離不該 JavaScript 了,JavaScript 開發的人大概都是用各自喜歡的開發平台,每天網路上的談論都是那個新平台好,那個不老,應該要學那個,最近最不熱門的應該就是 jQuery 了,很多人也已經棄船不用 jQuery 了,我倒是覺得 jQuery 很好啊,最大的理由就是,到處都找得到使用的教學與問題解答,這就是老東西的好處!

最近在開發一個與網頁上 DOM 更新有密切關係的程式,其中要大量的更新 data-xx 的值,我就有一個問題,該用 JQ 的 .data() 還是 .attr() 呢?我其實裡兩個都可以用,但是我想要知道這兩個到底有什麼不同?拖 jQuery 這老東西的好處,網路上的教學很多,我就把它記下來,應該對有用到的讀者也有幫助。

  • 讀取與設定:差不多,data() 少寫幾個字,attr() 內容一定會轉成字串
    • data() 讀:$('#selector').data('index') ,設定:$('#selector').data('index',  123) 
    • attr() 讀:$('#selector').attr('data-index'),設定:$('#selector').attr('data-index',  123) 
  • 效率:都不差,參考這篇,簡單說,照這篇文章的數字,attr() 一定慢,data() 約是 1.2~4 倍的速度差別,但是如果各位真的執行這個 benchmarking,會很驚訝的發現,數字很不同,有的 attr() 會比 data() 快,不過,我覺得不用擔心效率,應為就算是最慢的,以現在的桌機,也有每秒百萬次更新的速度。
  • 相容度:完全不相容,用 data() 設的資料,attr() 讀不出來,相反也是;事實是,jQuery 是用自己的內部變數來儲存 data() 的,也就是說,要從一而終,一旦用 data() 就一路只能用到底,如果其他 JavaScript 用 attr 來讀取用 data() 設的值,一定錯得很慘。
  • 除錯:attr() 好多了,它會立即更新 DOM 的內容,所以你看得到,data() 完全不會跟新,它只更新自己內部的變數,所以網路上有人以 jQuery 的秘密來稱呼它。

總結,兩個是不同的東西,要是問我,我會用 attr() ,畢竟相容性與易於除錯實在太重要了,但是不要忘記,attr 就是只能存字串!

關於作者
很久以前就是個「寫程式的」,其實,什麼程式都不熟⋯⋯
 
就,這會一點點,那會一點點⋯⋯


標籤: attr() x 1 data() x 1 javascript x 3 jquery x 2

分享:


參與討論!
x
現在就加入《思書》,馬上參與討論!
《思書》是一個每個人的寫作與論壇平台,特有的隱私管理,用筆名來區隔你討論內容,讓你的討論更深入,而且免費。 趕快來試試!
還未加入《思書》? 現在就登錄! 已經加入《思書》── 登入