重学JavaScript 篇的目的是回顾基础,方便学习框架和源码的时候可以快速定位知识点,查漏补缺,所有文章都同步在 公众号(道道里的前端栈) 和 github 上。
JavaScript问世
JavaScript
最开始的用途是代替 perl 等后端语言处理输入验证的。在那个年代,验证输入是需要走接口的的,为了解决这一问题,1995年,网景
公司开发了叫 **Mocha(后改名为 LiveScript) **的脚本语言,为了赶时间,网景 和 Sun公司合作,但是后来网景把它改名为 JavaScript,目的就是当时 Java 的炒作,想蹭热度。
JavaScript1.0 问世之后,Web 领域受欢迎程度创历史新高,而网景也成了市场的领导者。这时候微软不服,花了大量资源定向投入 IE,而微软创立的语言叫 JScript(为了避免纠纷)。
1996年,微软开始重磅进入 Web 领域,慢慢的 JavaScript 也规范了起来。
1997年,JavaScript1.1 作为提案被提交给 ECMA(欧洲计算机制造商协会),之后该组织开始标准化Web脚本,打造了新的 ECMAScript。
1998年,ISO(国际标准化组织) 和 IEC(国际电工委员会) 也将 ECMAScript 作为标准,从此各家浏览器都开始用 ECMAScript 作为自己的JavaScript实现依据。
组成
ECMAscript
JavaScript
包括了:核心(ECMAscript), 文档对象模型(DOM),浏览器对象模型(BOM),也就是说JavaScript 是一个有自己规范和组成的成品,而ECMAScript是一个定义的语言,它并不局限于浏览器,它定义的只是一个基准,浏览器只是ECMAScript实现的一个宿主环境。如果不涉及浏览器,ECMAScript定义了以下部分:
- 语法
- 类型
- 语句
- 关键字
- 保留字
- 操作符
- 全局对象
所以有关前端的JS语言更新,新的API的使用,其实是基于ECMAScript的更新。
DOM
DOM(文档对象模型)
是一个API,用于在 HTML 中使用扩展的 XML,DOM其实就是把整个页面抽象成一个分组了的节点,它们包含了不同的数据。
大多数情况下一个HTML页面的DOM包括 head 和 body,DOM可以通过创建文档树来让开发者随心所欲控制网页的内容和结构,并且通过开发的 DOM API 可以轻松的对DOM进行增删改查。
BOM
BOM(浏览器对象模型)
也是一个API,它是用来访问和操作浏览器窗口的,在各家浏览器百花争艳的年代,BOM没有一个统一的标准,从HTML5出现之后,这个版本的HTML以正式规范的形式涵盖了尽可能多的BOM。
总体来说,BOM主要针对于浏览器窗口和子窗口(frame),对于它们,有一套专门的API。
JavaScript脚本
一般情况下,我们通过 <script>
元素插入HTML,来实现脚本运行,<script>
元素一共有8个属性:
- async:异步下载脚本,只对外部脚本文件有效
- defer:同步下载脚本,脚本可以延迟到文档解析显示完毕,只对外部脚本有效
- crossorigin:配置请求的CORS,默认不使用,该配置主要表示需不需要请求凭据
- integrity:允许比对接收到的资源和加密签名,如果签名不匹配,脚本不会执行
- src:要执行的外部文件
language:弃用,表示语言类型- type:代替 language,表示脚本的 MIME 类型。一般情况下为 "text/javascript",MIME类型通常是 "application/x-javascript" ,如果该属性设置为 module,表示代码会当成 ES6 模块,此时才可以使用 import 和 export 关键字。
<script>
元素最强大的也是最受争议的,在于可以包含来自外域的 JavaScript 文件,再请求时,浏览器会发送 GET 请求获取文件,如果该文件是 JavaScript 类型,那么该请求就不受浏览器的同源策略限制,但是返回并执行的javascript受限制。此时,来自外域的代码会被当成该页面的一部分加载,此时就会有危险性,所以要保证域的安全性。
过去,<script>
被放在 <head>
中间,目的是为了把所有的外部文件都集中到一起,但是这样也就意味着必须把所有代码都下载,解析和解释完后,才开始渲染页面,所以现代Web通常将所有JavaScript放在 <body>
内部,从而加快页面的加载速度,减少白屏。
加载
一般情况下,可以通过如下方法往页面中加入脚本:
let script = document.createElement('script'); script.src = 'test.js'; document.head.appendChild(script); 复制代码
这种方式是异步加载的,其实就相当于给脚本添加了 async 属性,但是有的浏览器不支持该属性,所以最好的做法是加上 script.async = false
,从而将代码变为同步加载。
文档模式
文档模式
是由IE5.5发明的,即可以使用 doctype
切换文档模式,最初有 混杂模式 和 标准模式,后来出现了 准标准模式,而到现在HTML5,对于文档类型已经同意,由最初的混杂的写法,全部统一为<!DOCTYPE html>
。
noscript
noscript
标签是针对不支持JavaScript浏览器而出现的,如果浏览器不支持JavaScript,或者浏览器对脚本的支持被关闭了,那么就会执行该标签的内容:
<!DOCTYPE html> <html> <head> <title>Example HTML Page</title> <script defer="defer" src="example.js"></script> </head> <body> <noscript> <p>页面需要开启javascript</p> </noscript> </body> </html>