带你读书之“红宝书”：第二章HTML中的JavaScript

作者: 前端不许笑 | 来源:发表于2022-01-18 00:11 被阅读0次

写在前头

大多数小伙伴看技术书籍都会用“啃”来描述读书的直观感受，当然我也是一个前端小白，白的透明那种，但是我在读技术书籍感觉到“啃”的时候，我希望把我啃红宝书第四版的过程的想法，总结带给大家，以供后来者能够更快上手。

注：本文由于作者水平原因，如有错误之处，恳请大家指正,另外随着学习的深入，体会的加深，我会不断回来更新，修改这类文章。

思维导图

2. HTML 中的 JavaScript.png

脉络

本章节介绍的顺序

script的八大属性 p11
行内脚本（行内脚本的执行方式，还有结束问题）p12
外部脚本（src属性，不同文档中的书写模式）p12
外部JavaScript扩展名不确定（不一定必须是.js）p13
src属性使用的注意点 p13
<script> 元素特性 p13
标签位置 p13
推迟执行脚本 p14
异步执行脚本 p14
动态执行脚本 p15
XHTML中代码的书写改变 p16
废弃的语法 p17
行内代码和外部文件 p18
文档模式 p18
15 <noscript> 元素 p19

1. script的六大属性 p11

在看着6大<script>元素的属性时，初学者往往感觉头疼，脑子一篇茫然就接触这一堆不明所以的知识，让人难受。
1. async （异步下载）
在看这个属性是的先了解一下同步，异步，单线程，多线程的一些基本概念。
打个比喻：食堂打饭。
单线程：一个阿姨负责一个窗口，打了菜（一件事），还得打饭（下一件事）。就是一个人做一件事之后才可以做下一件事情。
多线程：把学生用餐视为一个任务，这个任务分为打饭和打菜2个事情，叫阿姨A在窗口A负责打饭，（打完饭，阿姨A把盘子给阿姨B）阿姨B在窗口B负责打菜。

核心：单线程 , 一个任务从头至尾由一线程完成，在一个任务完成之前，不接受第二个任务。（一个阿姨打饭又打菜），多线程 , 将一个任务拆分成不同的阶段（部分），并交给不同的线程分别处理。（阿姨A打饭，阿姨B打菜）。

同步：学生在阿姨没有打菜之前，可以苦等，只有打完饭之后才可以打菜。
异步：学生在阿姨A打完菜之后，可以在阿姨B的打饭空隙找一个位置。

核心：学生不用傻等，可以抽空做点其他事。
同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。

我估计有人已经看懵了，不过没关系，暂时知道JavaScript不会傻傻的死等就行。

回过头就是 JavaScript在渲染页面时，还不忘记下载脚本。

2. charset

这个属性开发中很少用到，一般出现乱码时，会使用。

3.crossorigin

这玩意目前我也不知道干啥的（初学小白）

4.defer

意思就是延长执行脚本，但是只对外部脚本起作用。怕加载脚本浪费大量时间，于是把渲染界面的任务提前，让执行脚本这事延期。

5.integrity

确保内容分发网络，不会提供恶意内容。

6. language

这个属性已经被废弃，实际开发不会使用，是历史产物，因为过去JavaScript版本太多。

7. src

学过html都知道html文档引用外部css文件。有一个src。还有就是图片标签<img>也有src。
这是开发中使用最多的属性，其实它就是代表一个地址。（可以是外部文件地址，可以是URL）。

src属性主要作用是连接js文件。src对应连接的文件不一定是js文件。
当src对应的文件后缀名不是js时，是kgp或者其他的，这是因为在某些特殊的情况下，我们需要动态的去上传一些js

8.type

用于代替language属性，如果你在html中正常的插入script标签，默认使用text/JavaScript这种形式。

MIME ：多功能Internet邮件扩展，是用来控制浏览器与服务器之间传输的一种形式。
设置动态js时会用到，
当MIME类型为application/x-JavaScript会返回默认XHTML模式。

2. 行内脚本（行内脚本的执行方式，还有结束问题）p12

<script>内的代码会从上到下解释。
js中会对函数式的东西预编译，进行预处理，然后把它所需要定义的这个东西，找个地方把他保存起来。
虽然把函数的运行写在上面，然后把函数的定义写在下面，但是运行的时候，这个函数内部的东西仍然会执行。

JavaScript运行原理:

js 是有一个预处理的过程，预处理完了之后再执行，整个预处理加执行，是一个阻断式的操作。只有预处理加执行放在一起，才是js从上至下的解释。

js运行机制：众人皆停，我独行。js是一种阻断式语言。

JavaScript运行原理：从上至下，按照代码块进行预处理和执行。

// 声明a 但是不赋值
var a;
consle.log(a); // undefined

// 声明a 但是赋值
var a = 1;
consle.log(a); // 1

// 如果同时进行
var a;
consle.log(a); // undefined

// 声明a 但是赋值
a = 1 ;
consle.log(a); // 1

// 如果是函数？
  function a() {

        };
    console(a()); // 123

  function a() {
console.log('123');
        };

结束问题

遇到字符串</script> 必须使用转义字符“\”，并且得放入内部。

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

3. 外部脚本（src属性，不同文档中的书写模式）p12

要包含外部文件必须使用src属性。

书写模式

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

XHTML文档里面是可以忽略结束标签

   <script src="example.js"/>

4. 外部JavaScript扩展名不确定（不一定必须是.js）p13

一旦链接的不是.js文件需要对这个返回的文件的type类型做一下定义。

5. src属性使用的注意点 p13

使用了src属性，最后不要再使用行内JavaScript代码。如果使用浏览器会忽略行内JavaScript代码。

6. <script> 元素特性 p13

src属性可以引用来自外部域的js文件，用法类似<img>元素。
但是在用外部域的js文件时需要考虑安全性，integrity属性就是器到防范作用的。

7. 标签位置 p13

浏览器会根据<script>在页面的出现位置来判断执行先后（没有添加其他属性的前提）。
当<script>标签放在<head>标签里面，会比<body>标签里面的代码先解析并执行。
如果<script>标签放在<body>标签里面，并且在页面代码的后面，那么页面的代码先解析并执行。

总结：在没有其他<script>属性的干扰下，JavaScript或从上到下依次执行代码。

8. 推迟执行脚本 p14
本小段详解defer属性。

<!DOCTYPE html>
<html>
  <head>
    <title>Example HTML Page</title>
    <script defer src="example1.js"></script>
    <script defer src="example2.js"></script>
  </head>
  <body>
    <!-- 这里是页面内容 -->
  </body>
</html>

总结：

延期执行脚本，既然不愿意把<script>标签放在页面代码后面，使用defer就可以起到延期执行的作用，让后面的页面代码等等“插队”。
不同版本可能会有不支持的作用，XHTML文档书写格式有变化。
example1.js 比 example2.js 文件大的话，在IE中可能example2.js会比example1.js 先执行。

9. 异步执行脚本 p14

<!DOCTYPE html>
<html>
  <head>
    <title>Example HTML Page</title>
    <script async src="example1.js"></script>
    <script async src="example2.js"></script>
  </head>
  <body>
    <!-- 这里是页面内容 -->
  </body>
</html>

总结：就是脚本下载的时候不会中断HTML解析，一旦脚本文件下载完成，就立刻停下HTML解析，执行脚本，在脚本执行完毕后在继续。

比方

刷剧-HTML解析削苹果-脚本下载吃苹果-脚本执行
换句话说，就是你女朋友在刷剧，你在削苹果，你削完苹果，她立刻停止刷剧，吃掉苹果，之后继续刷剧。

10. 动态执行脚本 p15

不再老套的使用<script>标签。自己“造一个”。

const script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false;
document.head.appendChild(script);

在创建完毕之后，这种<script>标签，会自带async属性。可以手动去除这个属性。

script.async = false;

11. XHTML中代码的书写改变 p16

平时不怎么用，了解就行。
像小于符号等等这个在XHTML中必须使用HTML实体形式（&lt）;

CDATA块

<![CDATA[代码..]]> // 第一种

//<![CDATA[代码..//]]> // 第二种

12. 废弃的语法 p17

废弃的还学干嘛，了解看看就行。

<script><!--代码... //-->></script>

13. 行内代码和外部文件 p18

推荐使用外部文件，让开发更加方便，逻辑有条理。
可维护性：要改哪里，打开那个js文件改就行，不用去找对应的html页面代码。
缓存：就是买一朵花，送个几个女生，一花多用。“呸，我是渣男”。
适应未来：不用考虑不同文档代码的书写模式，比如上面XHTML里面的CDATA块等等。

14. 文档模式 p18

包含三种模式：混杂模式(quirks mode) 标准模式(standards mode) 准标准模式(almost standards mode)

15 <noscript> 元素 p19

使用条件：浏览器不支持脚本，浏览器被禁用脚本。

当浏览器支持脚本时， <noscript> 元素中的代码永远不会被执行。

带你读书之“红宝书”：第二章HTML中的JavaScript

写在前头

思维导图

脉络

1. script的六大属性 p11

2. 行内脚本（行内脚本的执行方式，还有结束问题）p12

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端

带你读书之“红宝书”：第二章HTML中的JavaScript

写在前头

思维导图

脉络

1. script的六大属性 p11

2. 行内脚本 （行内脚本的执行方式，还有结束问题）p12

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端

2. 行内脚本（行内脚本的执行方式，还有结束问题）p12