2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

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

????所有的自定義數(shù)據(jù)屬性都以data一前綴開頭，HTML文檔的驗(yàn)證器會在驗(yàn)證時(shí)忽略它。開發(fā)人員可以在任意元素中加入自定義數(shù)據(jù)屬性，屬性值可以是照片的元數(shù)據(jù)、經(jīng)緯度坐標(biāo)或者彈出窗口的尺寸。最棒的是，幾乎在所有瀏覽器中，你都能夠使用自定義數(shù)據(jù)屬性，因?yàn)槲覀兛梢暂p易地使用JavaScript來獲取它們。

1、行為與內(nèi)容的分離，或者說為什么設(shè)置onclick不好

2、提升可訪問性

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

?

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

3、廢棄onclick

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

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

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

???

????上述代碼中使用了jQuery的選擇器來獲取類名為popup的元素，隨后，我們?yōu)槠渲忻總€(gè)元素的click事件分別添加一個(gè)監(jiān)聽器。當(dāng)有人單擊鏈接時(shí)，click方法中的代碼會被執(zhí)行。

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

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

4、自定義數(shù)據(jù)屬性來解圍

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

???

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

?收工!現(xiàn)在，單擊鏈接后會打開一個(gè)新窗口。

5、回退

????只要瀏覽器支持.JavaScript，自定義數(shù)據(jù)屬性就能正常工作。自定義數(shù)據(jù)屬性不會使瀏覽器出錯，同時(shí)，HTML文檔類型聲明可保證文檔是有效的，因?yàn)橐詃ata一開頭的屬性都會被忽略。

6、未來展望

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

? ? ?

????借助于腳本語言，我們能夠迅速識別網(wǎng)站內(nèi)或頁面中的所有文章。但最重要的是，我們用到的標(biāo)簽?zāi)軌蚯∪缙浞值孛枋銎渌鶚?biāo)記的內(nèi)容，這樣一來，我們就能夠?qū)懗龈玫臉邮奖砗透鼜?qiáng)大的JavaScript代碼了。

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

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

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

本文來自?>>?尚學(xué)堂； 轉(zhuǎn)載請注明：http://www.sxt.cn/u/13421/blog/9066

轉(zhuǎn)載于:https://my.oschina.net/2846613430/blog/659208

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。