前端之JavaScript面向对象开发

Posted 2022-12-02 全栈工程师MrL

一.html 中的 javascript

将 JavaScript 引入网页，解决的是与网页的主导语言 HTML 的关系问题。

将 JavaScript 插入 HTML 的主要方法是：使用<script>元素（网景公司创造），最早在 Netscape Nav。后来，这个元素被正式加入到 HTML 规范igator 2 中实现的，

二.<script>元素的八个属性

1. async：可选。应该立即开始下载脚本，但不能阻止其他页面动作，只对外部脚本文件有效。
2. charset：可选。使用 src 属性指定的代码字符集。
3. crossorigin：可选。配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。crossorigin= "anonymous"配置文件请求不必设置凭据标志。crossorigin="use-credentials"设置凭据 标志，意味着出站请求会包含凭据。
4. defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。
5. integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI， Subresource Integrity）。
6. language：废弃。
7. src：可选。表示包含要执行的代码的外部文件。
8. type：可选。代替 language，表示代码块中脚本语言的内容类型（也称 MIME 类型）。

三.使用<script>元素的方法

1. 通过它直接在网页中嵌入 JavaScript 代码，
2. 通过它在网页中包含 外部 JavaScript 文件。 

3. <script> 
    function designbyly()  
    console.log("designbyly!"); 
     
   </script> 

   备注：包含在<script>内的代码会被从上到下解释,

在使用行内 JavaScript 代码时，要注意代码中不能出现字符串

1.报错：将其当成结束的 标签

<script> 
 function designbylyScript()  
 console.log("</script>"); 
  
</script> 

2.正确：代码就可以被浏览器完全解释，不会导致任何错误

<script> 
 function designbylyScript()  
 console.log("<\\/script>"); 
  
</script> 

包含外部文件中的 JavaScript，就必须使用 src 属性。值是一个 URL，指向包含 JavaScript 代码的文件

<script src="juzi.js"></script>

在 XHTML 文档中，可以忽略结束标签

<script src="juzi.js"/>

备注：外部 JavaScript 文件的扩展名是.js。这不是必需的。

服务器经常会根据文件扩展来确定响应的正确 MIME 类型。 如果不打算使用.js 扩展名，一定要确保服务器能返回正确的 MIME 类型。

使用了 src 属性的标签中再包含其他 JavaScript 代码。如果两者都提供的话，则浏览器只会下载并执行脚本文件，从而忽略行内代码。

四.<script>元素最为强大

1. 可以包含来自外部域的 JavaScript 文件。
2. <script>元素的 src 属性可以是一个完整的 URL，而且这个 URL 指向的 资源可以跟包含它的 HTML 页面不在同一个域中。

五.解析资源

<script src="http://www.xxx.com/xxx.js"></script> 

• 浏览器在解析这个资源时，会向 src 属性指定的路径发送一个 GET 请求，以取得相应资源。

• 假定 是一个 JavaScript 文件。这个初始的请求不受浏览器同源策略限制，但返回并被执行的 JavaScript 则受限 制。

• 这个请求仍然受父页面 HTTP/HTTPS 协议的限制。

• 来自外部域的代码会被当成加载它的页面的一部分来加载和解释。

• 这个能力可以让我们通过不同的 域分发 JavaScript。

• 不过，引用了放在别人服务器上的 JavaScript 文件时要格外小心，在包含外部域的 JavaScript 文件时，要确保该域是自己所有的，或者该域是一 个可信的来源。