什么是,或者哪里是,初始化一個指向DOM元素的變數的安全方式,比如說,一個div或圖片?
let myImg;
window.onload(e)=> {
myImg = document.getElementById("my_img_1"/span>)。
}
function doSomething(a, b, c) {
//使用myImg。
}
這段代碼有什么問題嗎?這是否是初始化DOM變數的正確方式?
uj5u.com熱心網友回復:
load事件(你目前使用的)通常不是一個很好的選擇,因為它發生得非常晚,要等到所有的資源(包括圖片等)都加載完畢。有時您希望如此,但并不常見。
您有很多選擇。
你有很多選擇。以下是按我個人偏好順序列出的清單:
你有很多選擇。
- 在您的
script標簽上使用type="module",這樣您的JavaScript代碼就是一個module,而不是一個全域腳本。模塊(包括行內的和通過src的)是自動延期的(見下一項)。(它們還有其他好處:其中的代碼不在全域范圍內,所以它們被很好地包含起來;它們自動處于嚴格模式;它們可以通過import加載其他模塊)。) 這個可以在所有的現代瀏覽器中使用(所以,不包括IE11). - 在您的
script標簽上使用defer屬性。這告訴瀏覽器下載并決議代碼,但在決議完HTML之前不要運行它。但只對src起作用,而不是行內。這個可以在所有的現代瀏覽器和IE10 中使用。 。
- 將
script放在檔案的末尾,就在最后的</body>標簽之前。它將不會被運行,直到它上面的所有HTML被決議并放入DOM中。這一點一直都很有效。 - 使用
DOMContentLoaded事件。這個可以在任何甚至模糊的現代的東西中作業,包括IE9 。 。
- 使用
load事件(你目前正在使用的事件;只是為了完整起見將其列入串列)。這基本上一直都是有效的。
因此,例如:
< script type="module" src="your-code. js"></script>
your-code.js:
const myImg = document. getElementById("my_img_1") 。
function doSomething(a, b, c) {
//使用myImg。
}
行內的例子只是為了演示延遲:
< script type="module">/span>
const myImg = document.getElementById("my_img_1") 。
function doSomething(a, b, c) {
myImg.style.border = "2px solid yellow"/span>;
}
doSomething()。
</script>>
<img id="my_img_1"/span> src="data: image/png;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHwcHj0sLiQySUBMS0dA
RkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8
fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wgARCACAAIADAREA
AhEBAxEB/8QAGQABAAMBAQAAAAAAAAAAAAAMEBQEC/8QAGQEBAAMBAQAAAAAAAAEC
AwQF/9oADAMBAAIQAxAAAAHZAAAAAAAAPJTIoCWVw9AAAA4ZlUXNpZwvJSRFpFXfOfpppy6AAe
THytb4dvVQHQCK8Ve/HavHQAZFJsefv6ieI5L1V08Wj3WRHeIfRw1pAVyhw7Wsbih05V9K6/DsMH
0 fY4dp8rCh1Z63XnKDKhY8zoJFPfOvrXU4tRjehjq8esuciO8ePS59NIyMptcHQACB2AAAp nz7
FgyM5tef0VtaSVmWliEOgFfWvm0WsL0/U59iQyoT Z05nZjd59J85CHTh0qb0jtFvG8fpc okVzP
4dbWV8vsy1OLXsAB5tGZ156vHrR6c9brzlAMak2vP38WjP6s7vPefKwrbVqb00uTThD6GGvYAPBi
ZWvcW3qFTasGlek VrWNvFlTvw27x0AA8GRV55tbWF5KyI7xU3zm6c9aXQAAAQlEjh0mlePYAA
AAAAAB//xAAkEAACAQMDBAMBAAAAAAABAgMABBAREiATFCEwIjE0QP/aAAgBAQABBQL UsFp
rqMV3grvBS3UZoEMPQToGuGciDUhFGTGjUYWQx3XnkxCglrlgAo5OgcRyNbt98Zm60oGgwCDksAc
OgdbWQq2Z36cUC7UxdHxbNpJhzuaE7o8XC6VG29MXh1bNwm5bdDvxJEweNdiYcbksW1TE36/ZZ J
cTfrpp0FI4ccpZenSzqxqz8y4vPDfdTQhFhIMfK4bRIYhtc7UsV GJ06kVu2qEagEwSA68WYKFBn
lq4ao02R5nUwyg7g6BwC8BWZGy06LXznKqFDuEW1jLvwZQykNbOrBgfNbqa7Zq7Y0tugw7hAiNc
uBoOLKGD27xFbig6tlpFWjPrUdqWIGg9DxJJTWSV2bCuyJpbOMUqKn83/8QAIhEAAgICAQQDAQAA
AAAAAAAQIAERAgIRIwMVEyQVBA/9oACAEDAQE/AfxALgT3KzQhT12VW wRcIrYC97yReyChl4h
5yYvjLj77Di4gyV5gFDJ0Xz/AL5wWEBvcmoGB3Zai N2PEVYdUPGPid/kcOfrUGsEXOVgYHJYTl
oBUJqedlap5wUE6J0QIME1Cb7ANQP7ljNiF/X43/xAAnEQACAgICAQMEAwEAAAABAgARAxAg
MRIhMEETMkJSBEBQUf/aAAgBAgEBPwH/ABGYL3Gzn4hdj2djIw Yuf8AaAg9exkyeEJ75q5XqI4
cenJ28BcJvZBHewpO0bxNwGxY45mtt/xx63M4tb2ooVMopt4G/HgTQvhhaj6zM4qtpkBWO3k17U0
b4ZfsPujreX7DoYWMdPE1zx4/ONhYaHWyLFTqY8vkaMyghueFba5lym6EUWa45lprgNQgZVsQiuI
BY0ISMS1rAv5cXXyFQijRiOVMpcojYmGqi4WMtcQjMWNmKpY1AKFcsmMPCpXudQZ2E uP T64 BD
mY6VSx9IiBB7DKG7jYD8QqR3sIxi4P2gAHXuVKH9j//EACYQAAEDAgUEAwEAAAAAAAAhEQ
IQMSIDFREyJBcTAygUD/2gAIAQEABj8C/l7jC8n0rMKuwrj2rGfhkrLgj9U4ji4qwFbtU4TllxhB
51ydlwxQNd1lfdmrpj6jdQK2rBNYK6T/AM0E VPk1AUc1JQqMQbhB3NWM0SPCzHxWwQFSEW8Vb6
XEFW qbypGsWlRtTENWPpLUI1xyg4i6JRdzUjyo8hQoOytpkqT9aBg3KDeNHUb9TupCgq92reK8q
9mqApK6r/wA0wdlywqQrq1lZyu5c0krM6zAoGqHCQs2FccKHiCrEVuVGG2Ss2MfxW HubK7XEK2I
r4ivJXaI/m//xAAoEAEAAgEDBAEEAgMAAAAAABABExECFRIEFhcZEwQIHhofCxwdH/2gAIAQEA
AT8h 1KsB5Zh30pZlynBmXX1S8EPD9EGSg7s cLPksJiV NcYS0QeIxEg2WdSl6GZvizdjmVho66
8fTxMpjDxBAI2PS9jyoBBQaLRbBQnjUYEXterL8HiIsx0KT8D3N9cuqh YnA1Kp3Yq3ONWwqQT
uzWj 7bDY1YAtjbCjUhFRdqJeuTOvnInkZ/nXd/Z3 r4J 9dnm/605M8TeYe vuW0Obk86f0nOpq
zTNh4ZuizvcpQFZDrPnRv5ZE8ZEo5ytaT8j3N28MBlhjPJgAVY9KNaCdhTRnLSEV2dAsOFDFLGf
Gx4lPEOdOGXFDLUxjfxAv7D4hMdowkg6YyO1Ks3gMsTZAChZN3t6yjDBn/XNxb95jEtrN8EQAFBj
qRkTtHivyP3BypZxfnXBZHd7kqb30AAKD6OAvLvFfyW8/UZ3WnqZX7WAUI8H23/2gAMAwEAAgAD
AAAAEJJJJJJJJtBJJIDS0PJJAF/wBoaSSQUedthGSCAH/oqaSFgN/wJQyMAA1pJyEOi9J
IoyFVW99PmyDkP8A/wDqxJEyD/Be5JJqVBuiJJJKN8KRJJJISBJJJJJJJJJJJ/EAB8RAQACAwEB
AAMBAAAAAAAAEAERAhMSAwQEFhcf/aAAgBAwEBPxD8ff1TiDADhlbpgImn4J/mABR7AbiKn1dq
BRRkR5mg05AUxKafOwy9BKKZVtxWHOjwC0PCCyLduWNJqMixIZ5/6554FCFnw kw9cjTeBFkQ6e
6qQKtioWHiykS9MFqeSx2eVAtgNzzGryu3BEshmmCtPMhyClL/IAogC2Kq30j/kEFkq4rkucZf8A
bAYAWx38EVkFgTjlDrhKu36WxV/I/8QAHxEBAAICAgMBAQAAAAAAAAAAAQARITEQIDBBUUBh/9oA
CAECAQE/EPzqG2COvIFaisGugmri/AgFrHgEUbjtru3cWDsOJFbwC4IhQrkKw5WpDLqYY0cipeoP
8XJmILhzWq6XXxFvPJse0xN3yEVlxyr jDyjsvIvg9XUS53yc1UFvZwaJzcfUbUeCqvu3wEsWxK/
qxzTEVk9zIip7YKm3NzOrqN6PIsRG2MM9HcRIJ1NiURpjLwArSGQ7Af2MUIKrJuMy/cJQx5iLe5W
ooB4AqEFl3NOlSprSe9Q2h5EOyAaP0f/xAApEAAQMCBAYDAQEAAAAAABEQAhQTFREGFxkSCB
obHB8DDR4UDx/9oACAEBAAE/EP8ALzndFUsOH1vFYV72qZ6 U Cz9JJoY 5mPwnDNKkBTtKZLTpt
59quAOpKO9d3wu4IJCSUQ3LkIe5UC/yYnz/dA8AsgepjqWoAQRuJnxC5LKaWKsY1/r2o2EsHj1fD
Q1oXdT wfJ9TLCkRsnhDOGksv23WjgAgDgDIAariucOlJx0MHIC8SK5rK3pjrjNxudMngkFEPNfZ
8qhAyXlj7z4qgg18n/aATY0TmE8XemROmKvlgU7wxxZShCmNnvUIcSJs5O/FGGIObB80AALBBxX0
tsao/wDKbIiYUiV4zKPOQRptCE9Td9 Mm5w64qVmWcNj h429wPZflcDh7f1xv7g HBFBBgz66VG
8JRBnxkGyKWYCmwtQAsvWmjA3I9/44qEzHRk aEKXDuVIZhYUwNOkSgEQ NHAbYODLV85by2MW9a
FXOnXFS0QxuYf1eMSph5L7HnV3Mg5YoqZCE5VNC59zDQdASJnwgEFekgotzYwdaAAAgKjdBKHod6
iW0FMuXv4GCKWMLqeetRxlI03G5oaqrgg22ejhogg9FoCSInKhZAbrRKbaXnehd4a4dN2o g9Xek
ZsaG7tRLarFy6T0NPDDvsJUA1vps0dK21LSJqJI00qjuk7VNrISpMPOEtMgpz27UAAABoFMoGwa
ryKKChY35H7oMAoBg8WpABFahcOA6UnwRZQY7alBeWl1SVIZoBljEy9qn62il6UEQtQvv igyCgA
sfhKhLkgeZekVRdAAPag0KHJnzVgbIm/NNSntAeleUfif83/2Q=="/span>>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
注意,script在img之上,但它仍然可以作業 -因為腳本的執行被推遲了。
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/320428.html
標籤:
上一篇:如何在選擇選項后顯示所選選項
