Html 中如何使用javaScript

凡人已非凡發表於2018-08-30

主要內容

  • 如何使用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的瀏覽器。

不對的地方還望指出,喜歡的點贊謝謝

相關文章