資訊專(zhuān)欄INFORMATION COLUMN
摘要：如果只是這個(gè)問(wèn)題的話(huà)，好像也沒(méi)什么嘛，不就是加個(gè)嘛部分同學(xué)是不是表示，完全可以接受吖。當(dāng)然不僅僅只是這樣，我們來(lái)看下第二個(gè)問(wèn)題。
往期回顧
在上一期的《JavaScript的組成 | DOM/BOM》?里，我們有對(duì)文檔對(duì)象模型-DOM、瀏覽器對(duì)象模型-BOM
這兩大部分進(jìn)行了解學(xué)習(xí)，如果有還不是很明白的小伙伴們，可以在上篇文章的下方留言給我哦，我會(huì)為大家解答的哦
很快我們就進(jìn)入了紅寶書(shū)的第二章了！這章我們來(lái)討論下在HTML中使用JavaScript的幾種方法～（別著急走，我知道這是入門(mén)知識(shí)，但是你真的掌握了嘛？）來(lái)看看吧～
在開(kāi)發(fā)JavaScript的時(shí)候，Netscape公司要解決的第一個(gè)問(wèn)題就是：“如何讓JavaScript既能與HTML頁(yè)面共存，又不影響頁(yè)面在其他瀏覽器的呈現(xiàn)效果？”最終的解決方案是為Web增加統(tǒng)一的腳本支持，也就是我們現(xiàn)在看到的script標(biāo)簽
當(dāng)然我們今天要討論的不是這個(gè)標(biāo)簽的誕生史，也不是長(zhǎng)得好不好看這些問(wèn)題～而是
如果你熟悉怎么在HTML內(nèi)添加CSS，那么悄悄告訴你一個(gè)訣竅～基本和CSS類(lèi)似，不過(guò)也有不一樣的地方，我們來(lái)對(duì)比看一下
第一種：頁(yè)面內(nèi)部直接嵌入
添加頁(yè)面內(nèi)部直接嵌入的CSS代碼，通過(guò)以下方式（好巧都是s開(kāi)頭，千萬(wàn)不要弄錯(cuò)哦）
添加JS的代碼也是類(lèi)似，我們來(lái)看一下
這里我們可以很明顯看到，開(kāi)始產(chǎn)生了差異，那我們來(lái)總結(jié)下有哪些～
●差異
style引入外部文件的時(shí)候是通過(guò) “href”屬性 ，js文件引入通過(guò) “src”（像是img標(biāo)簽引入圖片也是src）
link是一個(gè)單標(biāo)簽，但是script是一個(gè)雙標(biāo)簽（有沒(méi)有不知道單標(biāo)簽和雙標(biāo)簽的吖～在評(píng)論下方留言～小姐姐給你解答喲）
除了以上兩點(diǎn)很明顯的差別以外，其實(shí)JS標(biāo)簽可以添加的位置與CSS也有不同，我們可以看到以上的案例中，我都是在
標(biāo)簽中添加的，這并沒(méi)有什么問(wèn)題，但是在實(shí)際工作中，我們更推薦另一種做法，接下來(lái)我們就來(lái)看一下～●script標(biāo)簽的位置
除了最常規(guī)的在head中我們可以使用，其實(shí)在body內(nèi)部的任何地方我們都可以使用，那么這么多地方，我們到底怎么選擇呢？就讓我們來(lái)看一下日常工作中我們推薦的做法：
隨便給個(gè)文字，表明script的立場(chǎng)要在body的“結(jié)束”標(biāo)簽前
我們會(huì)選擇把script標(biāo)簽放在
添加在head標(biāo)簽中缺點(diǎn)分析
獲取元素時(shí)，因?yàn)轫?yè)面未加在完成，會(huì)獲取失敗
在上面的這段代碼中，我希望可以打印oDiv這個(gè)元素，但是我們通過(guò)控制臺(tái)可以看到返回的是“null”，這是因?yàn)槭裁茨兀?/p>
瀏覽器在遇到
onload這個(gè)事件可以幫助我們等待頁(yè)面中元素加載完成之后再執(zhí)行后續(xù)操作，這樣的話(huà)，頁(yè)面中已經(jīng)有了這個(gè)元素的存在，我們的獲取操作就有效果啦。
如果只是這個(gè)問(wèn)題的話(huà)，好像也沒(méi)什么嘛，不就是加個(gè)onload嘛～部分同學(xué)是不是表示，完全可以接受吖。當(dāng)然不僅僅只是這樣，我們來(lái)看下第二個(gè)問(wèn)題。
●瀏覽器窗口長(zhǎng)時(shí)間空白
正如我們上面看到的，代碼的執(zhí)行是有順序的，我們?cè)谝胍粋€(gè)外部JS文件的時(shí)候，需要等待全部的JS代碼都被下載、解析和執(zhí)行完成以后，才開(kāi)始呈現(xiàn)頁(yè)面的內(nèi)容，對(duì)于需要很多JS文件的頁(yè)面來(lái)說(shuō)，下載文件和解析的過(guò)程將會(huì)導(dǎo)致頁(yè)面無(wú)法呈現(xiàn)。這種空白的時(shí)間對(duì)于用戶(hù)來(lái)說(shuō)，是非常不好的用戶(hù)體驗(yàn)，雖然很多用戶(hù)的第一反應(yīng)可能是：“今天網(wǎng)速這么差的么？？”，卻沒(méi)想到是頁(yè)面本身就存在問(wèn)題。
為了避免這樣的問(wèn)題，所以在實(shí)際的工作中，我們推薦寫(xiě)在
●注意事項(xiàng)
如果同時(shí)需要使用內(nèi)部嵌入式的引用和外部文件的引用，正確做法如下：
?。。?！千萬(wàn)不要合并到一起?。。?！如下錯(cuò)誤示范：
如果你是初學(xué)者的話(huà)，一定一定不要這樣操作，這樣的載入方式會(huì)導(dǎo)致你內(nèi)部嵌入的代碼被忽略，也就是無(wú)效。
第三種：行間添加
其實(shí)這種的用途并不多，甚至可能沒(méi)有行間的樣式的使用來(lái)的頻繁，不過(guò)我們可以了解一下～
CSS添加行間樣式
添加行間的JS
//點(diǎn)擊這個(gè)div會(huì)彈出一個(gè)1
當(dāng)然，關(guān)于script標(biāo)簽的使用方式不僅僅只有這些~
請(qǐng)大家期待下篇吧，我將帶著大家了解一下type屬性的用途等等等等的知識(shí)……
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99496.html
摘要：活動(dòng)結(jié)束單文件組件使用構(gòu)建工具創(chuàng)建項(xiàng)目，綜合來(lái)看單文件組件應(yīng)該是最好的定義組件的方式，而且不會(huì)帶來(lái)額外的模版語(yǔ)法的學(xué)習(xí)成本。 前端組件化開(kāi)發(fā)已經(jīng)是一個(gè)老生常談的話(huà)題了，組件化讓我們的開(kāi)發(fā)效率以及維護(hù)成本帶來(lái)了質(zhì)的提升。 當(dāng)然因?yàn)楝F(xiàn)在的系統(tǒng)越來(lái)越復(fù)雜龐大，所以開(kāi)發(fā)與維護(hù)成本就變得必須要考慮的問(wèn)題，因此滋生出了目前的三大前端框架 Vue、Angular、React。 那今天我們就來(lái)看看 V...
摘要：接觸這么多年，第一次總結(jié)一下它的遍歷語(yǔ)法。而且你必須借助特定的結(jié)構(gòu)才能遍歷數(shù)據(jù)結(jié)構(gòu)。它的作用是遍歷對(duì)象的鍵名。建議僅在遍歷數(shù)組的時(shí)候使用。另一個(gè)優(yōu)點(diǎn)是，它可以遍歷任何部署了接口的數(shù)據(jù)結(jié)構(gòu)，甚至是非的數(shù)據(jù)類(lèi)型，即自己定義的數(shù)據(jù)結(jié)構(gòu)。 接觸JavaScript這么多年，第一次總結(jié)一下它的遍歷語(yǔ)法。以前我大部分時(shí)間都在老版本的JavaScript下寫(xiě)代碼，所以大部分時(shí)間都是用for...in...
摘要：的意思是，從字面意思來(lái)看是用了的方法，繼承原有的方法類(lèi)，然后又添加了自己的某些私有方法。用來(lái)實(shí)現(xiàn)代碼如下的意思是，從字面意思來(lái)看是用了的方法。 世界上最遠(yuǎn)的距離不是生與死的距離，而是文檔就在你面前，你依然不知道這個(gè)庫(kù)怎么用。 鄙人IQ不高，已經(jīng)被Q.js虐了幾天。查看了github上kriskowal/q的文檔，現(xiàn)在把幾種看明白了的使用方法整理記錄下來(lái)，以下幾種方法可以把nodejs中...
摘要：老姚淺談怎么學(xué)鑒于時(shí)不時(shí)，有同學(xué)私信問(wèn)我老姚，下同怎么學(xué)前端的問(wèn)題。擼碼聽(tīng)歌，全局控制。 淺析用 js 解析 xml 的方法 由于項(xiàng)目上需要解析 xml，于是各種百度，然后自己總結(jié)了下各個(gè)主流瀏覽器解析 xml 的方法，只能是很淺顯的知道他的用法，但是還沒(méi)有深層次的研究。 裝 X - 建立自己的斗圖網(wǎng)站庫(kù) 之前加過(guò)一個(gè)斗圖群，看到很多經(jīng)典的表情，然后就收藏到了 QQ， 迫于本屌絲開(kāi)不起...
摘要：你應(yīng)該知道的種設(shè)計(jì)模式前端掘金每位開(kāi)發(fā)者都努力寫(xiě)出可維護(hù)的易讀的可復(fù)用的代碼。繼承關(guān)系本前端書(shū)籍整理，高清前端掘金發(fā)現(xiàn)了一個(gè)下載前端書(shū)籍的地方，分享給大家。 你應(yīng)該知道的 4 種 JavaScript 設(shè)計(jì)模式 - 前端 - 掘金每位開(kāi)發(fā)者都努力寫(xiě)出可維護(hù)的、易讀的、可復(fù)用的代碼。隨著應(yīng)用變得越來(lái)越大，代碼的結(jié)構(gòu)也越來(lái)越重要。設(shè)計(jì)模式驗(yàn)證了解決這個(gè)挑戰(zhàn)的重點(diǎn)——在特定環(huán)境中，對(duì)同類(lèi)事物...
閱讀 1828·2023-04-26 02:32
閱讀 576·2021-11-18 13:12
閱讀 2459·2021-10-20 13:48
閱讀 2528·2021-10-14 09:43
閱讀 3840·2021-10-11 10:58
閱讀 3516·2021-09-30 10:00
閱讀 2943·2019-08-30 15:53
閱讀 3496·2019-08-30 15:53
