2019獨角獸企業重金招聘Python工程師標準>>>

在開發web應用時，有時會用JavaScript獲取文檔之外的信息，某些情況下，我們需要用一些技巧來處理這些額外信息以保證Web應用能夠正常運行。一般而言，技巧無外乎是將額外的信息塞入事件處理程序或濫用rel屬性或class屬性以方便注入行為。感謝HTML規范引入了自定義數據屬性，讓不堪回首的往日一去不返。

????所有的自定義數據屬性都以data一前綴開頭，HTML文檔的驗證器會在驗證時忽略它。開發人員可以在任意元素中加入自定義數據屬性，屬性值可以是照片的元數據、經緯度坐標或者彈出窗口的尺寸。最棒的是，幾乎在所有瀏覽器中，你都能夠使用自定義數據屬性，因為我們可以輕易地使用JavaScript來獲取它們。

1、行為與內容的分離，或者說為什么設置onclick不好

2、提升可訪問性

????鏈接的目標地址沒有設置!如果JavaScript被禁用了，那么鏈接將無法引導用戶進入相應頁面。這是一個非常嚴重的問題，以至于我們需要立即解決。我建議開發人員永遠不要省略href屬性，任何情況下都不要為h ref屬性賦“壽”及類似值。現在，我們將彈出窗口中顯示的資源的地址賦值給h ref屬性，代碼如下:

?

????上面的代碼中，我們通過JavaScript代碼讀取a元素的href屬性值，進而得到資源的鏈接地址。構建可訪問的頁面，第一步是確保禁用JavaScript的情況下，所有功能仍能正常運轉。

3、廢棄onclick

????注意保持行為與內容分離，正如用鏈接樣式表保持樣式信息分離一樣。開始的時候，使用onclick會帶來便利，但是想象一下頁面上有10個鏈接的情況，那時你會看到onclick方法

????失控的場面。你將只能一遍又一遍地編寫重復的JavaScript代碼。如果是通過服務器端代碼來生成瀏覽器端代碼，那么你就是在增加JavaScript事件，進而會導致大量不必要的HTML代碼的出現。

替代方法是為每個鏈接分配可識別的CSS類名:

???

????上述代碼中使用了jQuery的選擇器來獲取類名為popup的元素，隨后，我們為其中每個元素的click事件分別添加一個監聽器。當有人單擊鏈接時，click方法中的代碼會被執行。

????preventDefault方法用于阻止默認的單擊事件行為。在示例中，它阻止了頁面跳轉。

????我們還忘了一件事—沒有設置窗口的尺寸信息和位置信息，而在未優化的代碼中，我們是設置了的。我們希望即使是不太熟悉JavaScript代碼的頁面設計者，也能基于每個鏈接設置窗口尺寸。

4、自定義數據屬性來解圍

????當創建應用了JavaScript的wer應用時，剛剛提到的情況i比較常見。如你所見，在代碼中存儲窗口的期望高度和寬度是可取的，但是onclick方法有諸多弊端。我們可以改換在元素上嵌入屬性的方式加以實現。現在要做的是將鏈接改造成下面這種形式:

???

????離完成只有一步之遙，修改之前編寫的click事件以抓取鏈接上設置的各項自定義數據屬性，然后將其傳入window.open方法。

?收工!現在，單擊鏈接后會打開一個新窗口。

5、回退

????只要瀏覽器支持.JavaScript，自定義數據屬性就能正常工作。自定義數據屬性不會使瀏覽器出錯，同時，HTML文檔類型聲明可保證文檔是有效的，因為以data一開頭的屬性都會被忽略。

6、未來展望

????一旦新標簽和屬性得到了廣泛支持，我們就可以用它們來做一些有趣的事情。使用打印樣式表，我們能夠輕易地識別并隱藏導航和文章的尾部:

? ? ?

????借助于腳本語言，我們能夠迅速識別網站內或頁面中的所有文章。但最重要的是，我們用到的標簽能夠恰如其分地描述其所標記的內容，這樣一來，我們就能夠寫出更好的樣式表和更強大的JavaScript代碼了。

????開發人員可以用自定義數據屬性將各式各樣的信息嵌入標記中。借助于自定義數據屬性，使用JaveScript定位到所有data-remote=true的表單標簽，就能得知哪些表單標簽應使用勻ax進行提交，這種做法與Rubv on Rails框架中的做法是一致的。

????我們還可以使用自定義數據屬性將日期和時間緩存在頁面中，并以用戶時區為基準來顯示日期和時間。只需將時間以UTC的形式置于HTML頁面中，在客戶端將其轉換成用戶本地時間即可。自定義數據屬性允許開發人員在頁面中嵌入真實有用的數據，而越來越多的框架和庫會利用它的優點。我確信，在日常工作中，你會發現它有很多用處。

至此，我們可以一勞永逸地根除濫用div的情況了。

本文來自?>>?尚學堂； 轉載請注明：http://www.sxt.cn/u/13421/blog/9066

轉載于:https://my.oschina.net/2846613430/blog/659208

總結

以上是生活随笔為你收集整理的Web开发技巧：使用自定义数据属性创建弹出窗口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。