前端之JavaScript面向对象开发

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

一.行内代码与外部文件

荐使用外部文件的理由

1. 可维护性。javascript 代码如果分散到很多 html 页面，会导致维护困难。而用一个目录保存 所有 JavaScript 文件，则更容易维护。
2. 缓存。浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件，这意味着如果两个页面都 用到同一个文件，则该文件只需下载一次。
3. 适应未来。把 JavaScript 放到外部文件中，不必考虑用 XHTML。

配置浏览器请求外部文件时的重点考虑之一：它们会占用多少带宽

二.SPDY/HTTP2 中， 预请求的消耗已显著降低，以轻量、独立 JavaScript 组件形式向客户端送达脚本更具优势

1. 初次请求时，如果浏览器支持 SPDY/HTTP2，就可以从同一个地方取得一批文件，并将它们逐个放到浏览器缓存中。
2. 从浏览器角度看，通过 SPDY/HTTP2 获取所有这些独立的资源与获取一个大 JavaScript 文件的延迟差不多。
3. 假设浏览器支持 SPDY/HTTP2，比较新的浏览器才满足。想支持那些比较 老的浏览器，可能还是用一个大文件更合适。

第一个页面包含如下脚本

<script src="main橘子.js"></script> 
<script src="componentjuzi1.js"></script> 
<script src="componentjuzi2.js"></script> 
<script src="componentjuzi3.js"></script> 

第二个页面包含如下脚本

<script src="main_.js"></script> 
<script src="component11.js"></script> 
<script src="component22.js"></script> 
<script src="component33.js"></script> 

第二个页面请求时，把应用程序切割成了轻量可缓存的文件。

第二个页面也依赖的某 些组件此时已经存在于浏览器缓存中了。