主要內容
- 如何使用script元素
- 嵌入指令碼與外部指令碼
- 文件模式對js的影響
- 考慮到如果js被禁用的情況
script元素屬性
- async(非同步)可以立刻下載指令碼,不妨礙頁面中的其它操作。只對外部指令碼檔案有效。
- charset 表示src屬性指定程式碼的字符集。
- defer 表示指令碼會延遲到文件完全被解析了之後在執行,支隊外部指令碼有效
- src 表示要執行的外部檔案
- type 表示編寫指令碼程式碼的語言內容型別MIME。
經驗
- js指令碼中不能出現單獨的</script> 或者 <script> 不然會報錯。要使用轉義字元/。 這種是一種語法的解析錯誤,屬於解析器的規則。
- 引入外部js的檔案後墜不是必須的,瀏覽器不會檢查包含js檔案的副檔名。這樣無論檔案本身是什麼字尾,jsp,php 只要裡面是js程式碼都可以在瀏覽器端執行。但是服務端通常是需要檢視副檔名的。
- 嵌入程式碼忽略:如果在使用src來引入外部js,那麼嵌入的程式碼會被忽略。
- src屬性可以包含來自外部域的js檔案,這一點是</script>元素很強。可以用來解決跨域,不過這意味著你所訪問的外部域必須是穩定安全可信任的,否則一旦你所請求的資源被冒充或者替換,那麼你很可能中病毒,或者被竊取資訊。
- 無論任何程式碼,如果不存在defer和async,那麼都會按照從1-n的順序執行。
標籤的位置
很久之前js被放在head裡執行,而瀏覽器在遇到body的時候才會開始呈現內容,如果有很多指令碼要載入,那麼可能有很久的空白期,所以一般js會放在內容後面。保證先呈現內容在執行指令碼下載。
- defer延遲指令碼,雖然規則上是按他們出現的先後順序執行,但是現實卻並不一定是這樣。
- async 更是不能保證按照先後順序執行,指令碼互相沒有依賴性的時候可以使用
不支援的瀏覽器
- 遇到不支援的情況:讓js包含在一個html注視中
- noscipt 元素 嵌入當瀏覽器不支援js的時候的文件內容。
嵌入程式碼與外部檔案對比
- 可維護性高:易於你集中注意力在業務程式碼上。
- 可快取:如果是放在同一個地方,不同頁面載入的時候,也會直接去載入已經下載好的檔案,而不需要重新去下載。極大的提升了效能。怎麼避免packjson包的的重複下載。
- 適用於未來:通過外部引用的檔案無需在使用前面註釋hack
文件模式
文件的模式不一樣會導致js的不相容。
- 混雜模式
- 標準模式
- 留在週末新增
小結:
使用js的幾種方式:
- 嵌入式
- 外部引用
需要注意的幾點:
- src 讀取相應檔案的url,但是它可以是同意伺服器的檔案,也可以是外部伺服器的檔案。
- 一般js會放到內容的後面,瀏覽器會先解析未使用defer延遲屬性的js。
- defer延遲可以做到文件載入完以後在執行指令碼
- async 表示指令碼非阻塞的,不必等待其它指令碼。
- noscript 用於不支援js的瀏覽器。