JavaScript的网页本质

工具/材料

Chrome浏览器

操作方法

打开【搜狗搜索】主页，如图，鼠标移动到【新闻】新上，然后鼠标右击选择【检查】，其他浏览器可能就是【审查元素】，可以看到是一个HTML文件，也就是网页。

那么可以改吗？同样，我们鼠标右击新闻，选择检查，双击新闻，可以将其修改为任意字符，比如修改为 语音 ，显示如图

还可以将网页切换至手机视角来观看，点击【手机/pad模拟器】，设备型号可以自定义修改，常见的机型会显示在列表中。

手机/pad的型号也可以自定义，设置屏幕分辨率，内核数目等，点击转换图标还可以倒个，就是横纵宽度互换。

点击刷新按钮或者按【F5】强制刷新就可以切换到手机视角，如图，点击缩放图标可以设置显示比例。

同样使用上述第1-2步骤可以修改网页元素，比如将南京的天气修改为北京的天气，如果没有发现南京字样可能没有点击前面的三角。

图能不能改能？也是可以改的，同样方法，只需要将图片地址链接修改即可。

常见恶搞应用

修改搜索结果

修改账户余额

特别提示

以上做法并不能黑了服务器只是在本地电脑自娱自乐罢了。

javaScript网页模块

javascript-模块发展史

什么是模块？

所谓的模块话就是将一个系统拆分成各个独立的部分，每个部分实现一块功能，然后组合在一起形成系统。这样的有点如下：

• 可维护
• 可复用
• 可组合

JavaScript 程序本来很小——在早期，它们大多被用来执行独立的脚本任务，在你的 web 页面需要的地方提供一定交互，所以一般不需要多大的脚本。过了几年，我们现在有了运行大量 JavaScript 脚本的复杂程序，还有一些被用在其他环境

有必要提供一种将 JavaScript 程序拆分为可按需导入的单独模块的机制，二这个机制就是模块的规范，从js早期到现在，产生了很多的模块规范。接下来一一介绍一下：

文件划分

一个js文件即一个模块，然后再该js文件下定义模块的数据方法。最终将各个模块一script的方式引入到index.html中

优缺点：

• 一定程度上实现了模块划分。
• 变量同名
• 变量方法来源不清晰
• 依赖关系不明确

命名空间

命名空间的出现就是为了文件划分中，全局变量的问题。其实就是将每个文件模块下分散的数据和方法用对象包装起来（对象的名字做到唯一唯一性就好），然后放再window上。

优缺点

• 变量或者方法来源清晰了
• 只要人们按照一定规范命名，可以避免变量同名危险。
• 不******全，变量并没有私有化。
• 但是依赖关系还是有问题，也就是script的加载顺序

IIFE

基于上诉不安全的原因，后来人们又提出了一个IIFE（立即执行函数）的方式，因为IIFE一运行就形成了一个私有的作用域，外界是没办法访问这个作用域下的变量的。

优缺点：

• 比命名空间更加安全
• 依赖关系还是无法解决。

CommonJS 规范（服务端-node）

最早比较正式的一个模块规范，主要用于node中。module.exports导出， require导入。语法如下：

// commonjs规范

特点如下：

• 得到node的支持
• 基于文件的，一个文件就是一个模块。
• 加载模块是同步的

缺点如下：

• CommonJS 的实现需要使用到node操作文件的api，所以它并不能运行再浏览器上
• CommonJS 本身约定以同步的方式进行模块加载，这种加载机制放在服务端是没问题的，一来模块都在本地，不需要进行网络 IO，二来只有服务启动时才会加载模块，而服务通常启动后会一直运行，所以对服务的性能并没有太大的影响。但如果这种加载机制放到浏览器端，会带来明显的性能问题。它会产生大量同步的模块请求，浏览器要等待响应返回后才能继续解析模块。也就是说，模块请求会造成浏览器 JS 解析过程的阻塞，导致页面加载速度缓慢。

AMD 规范

总之，CommonJS 是一个不太适合在浏览器中运行的模块规范，随后才又了AMD全称为Asynchronous Module Definition，即异步模块定义规范。模块根据这个规范，在浏览器环境中会被异步加载，而不会像 CommonJS 规范进行同步加载，也就不会产生同步请求导致的浏览器解析过程阻塞的问题了。

• 使用define定义一个模块

// main.jsdefine(["./print"], function (printModule) { printModule.print("main");});// print.jsdefine(function () { return { print: function (msg) { console.log("print " msg); }, };});

• 使用require加载一个模块

// module-a.jsrequire(["./print.js"], function (printModule) { printModule.print("module-a");});

AMD规范并没有得到浏览器的支持，如果要再项目中使用，需要借助第三方的 loader 来实现，也就是require.js库。例子如下：

总结：

• AMD规范更加使用运行到浏览器上，
• 不过代码阅读和书写都比较困难

UMD

兼容 AMD 和 CommonJS 的一个模块化方案，可以同时运行在浏览器和 Node.js 环境。不做多的介绍，已经不流行了

ES6 Module

ES6 Module 也被称作 ES Module(或 ESM)， 是由 ECMAScript 官方提出的模块化规范，作为一个官方提出的规范，ES Module 已经得到了现代浏览器的内置支持。

ES Module 的兼容性问题，其实 ES Module 的浏览器兼容性如今已经相当好了，覆盖了 90% 以上的浏览器份额，

不仅如此，一直以 CommonJS 作为模块标准的 Node.js 也紧跟 ES Module 的发展步伐，从 12.20 版本开始正式支持原生 ES Module。也就是说，如今 ES Module 能够同时在浏览器与 Node.js 环境中执行，拥有天然的跨平台能力。