浏览器中的 JavaScript：核心概念与实践指南

最新推荐文章于 2024-08-27 13:38:21 发布
最新推荐文章于 2024-08-27 13:38:21 发布
阅读量622 收藏 20
点赞数 18
分类专栏： JavaScript从入门到精通 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fanchen4139/article/details/141578633
版权

浏览器中的 JavaScript：核心概念与实践指南

在这里插入图片描述

引言

在Web开发中，JavaScript不仅仅用于操作DOM和处理事件，它还深入嵌入在浏览器的多个功能中。通过JavaScript，我们可以访问和操作浏览器对象模型（BOM），管理本地存储，发起网络请求，并处理跨域问题。本指南将全面介绍BOM、浏览器的本地存储机制、网络请求，以及跨域与同源策略的相关知识，帮助你在实际项目中更好地利用这些功能。

目标和预期收获

通过阅读本文，你将学习：

主要内容

1. BOM（浏览器对象模型）

BOM（浏览器对象模型）提供了与浏览器进行交互的API，允许我们控制浏览器的行为并访问浏览器的各种属性。以下是BOM中几个最重要的对象。

1.1 window 对象

window是最顶层的全局对象，它表示浏览器窗口并提供了大量的属性和方法。所有全局JavaScript对象、函数和变量都自动成为window对象的成员。

// 访问浏览器窗口的宽度和高度
console.log(window.innerWidth);
console.log(window.innerHeight);

// 弹出一个警告框
window.alert('Hello, World!');
1.2 navigator 对象

navigator对象包含浏览器的信息，例如用户代理、是否启用了JavaScript、是否启用了Cookie等。

// 检查用户使用的浏览器
console.log(navigator.userAgent);

// 检查是否启用了JavaScript
if (navigator.javaEnabled()) {
  console.log('JavaScript is enabled');
}
1.3 location 对象

location对象包含当前URL的信息，并允许你通过JavaScript更改浏览器的地址。

// 获取当前URL
console.log(window.location.href);

// 重定向到另一个页面
window.location.href = 'https://www.example.com';
1.4 history 对象

history对象允许操作浏览器的会话历史记录，可以使用它来导航到历史记录中的前后页面。

// 后退到上一页
window.history.back();

// 前进到下一页
window.history.forward();

2. 浏览器的本地存储

浏览器提供了三种主要的本地存储机制，用于在客户端保存数据：localStorage、sessionStorage和cookies。

2.1 localStorage

localStorage允许你存储键值对数据，没有过期时间，除非手动清除，否则数据会一直保留。

// 保存数据
localStorage.setItem('username', '凡尘');

// 获取数据
const username = localStorage.getItem('username');
console.log(username);

// 删除数据
localStorage.removeItem('username');

// 清空所有数据
localStorage.clear();
2.2 sessionStorage

sessionStorage与localStorage类似，但数据仅在页面会话期间有效，关闭浏览器窗口后数据会被清除。

// 保存数据
sessionStorage.setItem('sessionData', '12345');

// 获取数据
const sessionData = sessionStorage.getItem('sessionData');
console.log(sessionData);

// 删除数据
sessionStorage.removeItem('sessionData');

// 清空所有数据
sessionStorage.clear();
2.3 Cookies

Cookies是一种存储少量数据的方式，通常用于保存用户的会话信息或跟踪用户行为。每个Cookie都有一个过期时间，到期后会自动删除。

// 设置Cookie
document.cookie = "username=凡尘; expires=Fri, 31 Dec 2024 12:00:00 UTC; path=/";

// 读取所有Cookie
console.log(document.cookie);

// 删除Cookie（通过设置过期时间）
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

3. 网络请求：XMLHttpRequest vs fetch API

在JavaScript中，网络请求是通过XMLHttpRequest和fetch API这两种方式实现的。

3.1 XMLHttpRequest

XMLHttpRequest是传统的方式，用于从服务器请求数据。虽然功能强大，但其回调风格较为复杂。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();
3.2 Fetch API

fetch API是现代化的替代方案，基于Promise，代码更简洁易读。

fetch('https://api.example.com/data')
  .then(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

4. 跨域与同源策略

4.1 同源策略

同源策略是一种浏览器安全机制，防止不同源的网页之间相互访问资源。两个URL被认为是同源的，必须满足以下条件：

  • 协议相同（如https）
  • 域名相同
  • 端口相同
// https://www.example.com/page1
// https://www.example.com/page2
// 这些页面是同源的

// https://www.example.com
// https://api.example.com
// 这些页面是跨域的
4.2 解决跨域问题的方法

  • CORS（跨域资源共享）：服务器设置CORS头，允许跨域请求。

    fetch('https://api.example.com/data', {
  method: 'GET',
  mode: 'cors'
})
.then(response => response.json())
.then(data => console.log(data));

  • JSONP：通过动态创建<script>标签来请求数据，适用于GET请求。

    <script src="https://api.example.com/data?callback=myCallback"></script>
<script>
  function myCallback(data) {
    console.log(data);
  }
</script>

  • 代理服务器：通过服务器代理转发请求，避免浏览器的同源限制。

深入探讨

1. window 对象的详细探讨

window对象作为BOM的核心，除了提供常见的属性和方法外，还有许多高级功能。例如：

  • 定时器：setTimeout和setInterval允许我们执行延时或重复的任务。

    // 延时3秒执行
setTimeout(() => {
  console.log('3秒后执行');
}, 3000);

// 每秒重复执行
const intervalId = setInterval(() => {
  console.log('每秒执行一次');
}, 1000);

// 清除定时器
clearInterval(intervalId);

  • 浏览器信息：window.navigator不仅提供浏览器的基本信息，还能检测用户的在线状态、语言设置、是否支持serviceWorker等。

    console.log('当前语言:', navigator.language);
console.log('是否在线:', navigator.onLine);
console.log('支持Service Worker:', 'serviceWorker' in navigator);

2. 网络请求的高级用法

2.1 使用 Fetch 进行复杂请求

fetch API支持更多复杂的配置，如设置请求头、自定义HTTP方法、发送请求体数据等。

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123'
  },
  body: JSON.stringify({
    key: 'value'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Fetch error:', error));
2.2 处理 Fetch 错误

fetch不直接抛出网络错误，而是通过Promise的catch方法来处理异常。需要注意的是，fetch只会对网络错误抛出异常，HTTP状态码为4xx或5xx的请求仍然被认为是成功的请求，需要手动检查响应状态。

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

3. 跨域请求的深入探讨

3.1 CORS 的工作原理

CORS（跨域资源共享）通过在服务器端设置特定的HTTP头，允许浏览器发起跨域请求。CORS 请求主要有两种类型：简单请求和预检请求。

  • 简单请求：如GET、POST（Content-Type为application/x-www-form-urlencoded、multipart/form-data或text/plain）或HEAD请求。这些请求不需要进行预检。

    服务器返回的响应头中需要包含Access-Control-Allow-Origin，指定允许的源。

    HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://www.example.com

  • 预检请求：对于复杂的请求（例如，使用PUT、DELETE或自定义头），浏览器会在正式请求前发送一个OPTIONS请求，以确认服务器是否允许该跨域请求。

    OPTIONS /resource/foo
Host: api.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type
Origin: https://www.example.com

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://www.example.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
3.2 处理跨域问题的策略

  • 使用proxy代理：在开发环境中，可以通过设置代理服务器，将请求转发至目标服务器，以避免跨域问题。

    在webpack中，可以通过配置devServer.proxy来实现：

    module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
  },
};

  • 使用后端中转：通过在服务器端设置路由，代理请求到实际的目标服务器，然后将响应返回给前端。

    const express = require('express');
const app = express();

app.use('/api', (req, res) => {
  // 转发请求到目标服务器
  const targetUrl = 'https://api.example.com' + req.url;
  req.pipe(request(targetUrl)).pipe(res);
});

app.listen(3000);

  • JSONP：虽然JSONP只能用于GET请求，但在不支持CORS的环境下，它是解决跨域问题的传统方法。

    <script>
  function handleResponse(data) {
    console.log('跨域数据:', data);
  }
</script>
<script src="https://api.example.com/data?callback=handleResponse"></script>

常见问题及解决方案

1. 为什么我无法从不同的域名获取数据？

问题：当你尝试从一个域名向另一个域名发起请求时，浏览器可能会阻止这个请求，因为同源策略不允许跨域访问。

解决方案：

  • 启用CORS：确保目标服务器设置了适当的CORS头，允许你的源域名访问。
  • 使用代理：在开发环境中设置一个代理服务器，以绕过浏览器的同源限制。
  • 考虑JSONP：如果只需处理GET请求，且目标服务器支持JSONP，可以使用这种方法。

2. 为什么我的fetch请求没有抛出错误，尽管返回了一个4xx/5xx的状态码？

问题：fetch API不会自动抛出HTTP错误（例如4xx或5xx状态码），它仍然会认为请求是成功的，除非发生网络错误。

解决方案：在fetch的then方法中检查response.ok，如果为false，则手动抛出错误。

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

3. 为什么我的localStorage数据会被意外清除？

问题：localStorage的数据没有过期时间，但如果用户手动清除浏览器数据，或者在隐私模式下，数据可能会丢失。

解决方案：

  • 备份关键数据：对于关键的数据，可以考虑定期备份到服务器。
  • 检测隐私模式：检测用户是否处于隐私模式，并提示他们保存重要信息。
function isLocalStorageAvailable() {
  try {
    const testKey = 'test';
    localStorage.setItem(testKey, '1');
    localStorage.removeItem(testKey);
    return true;
  } catch (error) {
    return false;
  }
}

4. 如何在页面刷新后保持用户的登录状态？

问题：当页面刷新或重新打开时，用户的登录状态可能会丢失。

解决方案：

  • 使用localStorage或cookies：将登录令牌（如JWT）存储在localStorage或cookies中，在页面加载时检查并恢复用户状态。
// 登录时保存令牌
localStorage.setItem('token', 'your-jwt-token');

// 页面加载时检查令牌
const token = localStorage.getItem('token');
if (token) {
  // 验证令牌并恢复会话
} else {
  // 重定向到登录页面
}

知识点拓展

1. BOM 对象的更多用法

BOM中的其他对象，如screen和document，同样提供了有用的信息和功能。例如，screen对象可以获取用户屏幕的尺寸和色彩深度，document对象则是浏览器中HTML文档的根。

// 获取屏幕宽度和高度
console.log(screen.width, screen.height);

// 获取文档的标题
console.log(document.title);

2. 使用 IndexedDB 进行复杂数据存储

除了localStorage和sessionStorage，浏览器还支持IndexedDB，这是一种低级API，用于在客户端存储大量结构化数据，支持事务和索引。

const request = indexedDB.open('myDatabase', 1);
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore('myStore', { keyPath: 'id' });
  objectStore.createIndex('name', 'name', { unique: false });
};

request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['myStore'], 'readwrite');
  const store = transaction.objectStore('myStore');
  store.add({ id: 1, name: '凡尘' });
};

3. 进阶网络请求与跨域技术

  • Service Worker：利用Service Worker实现网络请求的缓存和离线处理。
  • WebSockets：用于双向实时通信，适用于需要即时反馈的应用，如聊天系统。
  • 跨域资源共享（CORS）的进阶配置：理解CORS的复杂配置，如允许多个源、复杂头的使用等。

面试八股文

1. BOM 是什么？如何使用它来操控浏览器？

回答：BOM是浏览器对象模型，它提供了一组API，使开发者可以操控浏览器窗口和文档对象模型（DOM）之外的浏览器部分。BOM的主要对象包括window、navigator、location、history等，允许我们操作浏览器的会话历史、地址栏、窗口尺寸、弹出警告框等。

2. 请比较 localStorage 与 sessionStorage，并举例说明使用场景。

回答：localStorage和sessionStorage都是浏览器提供的客户端存储方式。localStorage的数据没有过期时间，适合保存用户设置等长期数据，而sessionStorage的数据在页面会话结束后自动清除，适合保存临时数据，如表单填写进度。

3. 如何处理 JavaScript 中的跨域请求？

回答：跨域请求可以通过多种方式解决，包括启用CORS、使用JSONP、通过服务器代理请求、以及跨域资源共享策略等。CORS是最常用的方法，它通过服务器设置特定的HTTP头来允许特定的源进行跨域访问。

4. fetch API 与 XMLHttpRequest 有何区别？为什么推荐使用 fetch API？

回答：fetch API是XMLHttpRequest的现代化替代，基于Promise，代码更简洁，且支持更丰富的功能，如请求和响应流、较好的错误处理机制等。相比之下，XMLHttpRequest的回调风格较为复杂，代码不易读。由于这些优点，fetch API在现代开发中更受推荐

。

总结

通过本指南的学习，你应该已经对浏览器中的JavaScript有了全面的理解。BOM提供的API使我们能够操控浏览器窗口和导航，浏览器的本地存储机制为数据持久化提供了方便的方法，fetch API的引入使得网络请求的处理变得更加简单，而理解跨域与同源策略则是确保Web应用安全性的关键。希望这些知识能在你的日常开发中助你一臂之力。

看到这里的小伙伴，欢迎 点赞👍评论📝收藏🌟

希望本文对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言或通过联系方式与我交流。感谢阅读

程序员凡尘
关注
  • 18
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript：javascript学习指南
02-26
在学习JavaScript的过程中，理解闭包、作用域、this指向、异步编程（回调、Promise、async/await）等高级概念是非常重要的。同时，随着Web技术的发展，了解WebAssembly、Web Components、Service Worker等前沿技术也...
JavaScript初学者建议：不要去管浏览器兼容
10-26
JavaScript是Web开发中不可或缺的一部分，尤其对于前端开发者来说，它的重要性不言而喻。然而，初学者往往会遇到一个难题——浏览器兼容性问题。本文将针对这个主题，为初学者提供一些建议。 首先，我们要明确一点...
.快速了解Django：核心概念解析与实践指南
Gefangenes的博客
06-10 1163
Django是一个开放源代码的Web应用框架，由Lawrence Journal-World开发并于2005年发布。最初是为了满足新闻网站的需求而开发的，后来成为一个功能强大且灵活的Web开发框架。Django得到了全球开发者的广泛认可和使用，目前被许多知名网站和公司所采用。
快速了解Django：核心概念解析与实践指南
05-01 1437
Django是一个开放源代码的Web应用框架，由Lawrence Journal-World开发并于2005年发布。最初是为了满足新闻网站的需求而开发的，后来成为一个功能强大且灵活的Web开发框架。Django得到了全球开发者的广泛认可和使用，目前被许多知名网站和公司所采用。
探索Webpack源码：深度解析与实践指南
gitblog_00083的博客
04-21 421
探索Webpack源码：深度解析与实践指南 项目地址:https://gitcode.com/gweid/webpack-source-code Webpack是一个强大的前端模块打包工具，它能够将JavaScript、CSS、图像等资源转换并优化为浏览器可理解的格式。对于前端开发者而言，理解Webpack的内部工作原理不仅能提升开发效率，还能帮助解决在配置和使用过程中遇到的问题。这份项目，由@...
无头浏览器与Puppeteer中PDF生成应用指南
AlexGeek
08-25 4356
前言 最近在做项目的时候，遇到了在后端生成PDF的需求，而且生成的页面较多，且样式管理相对复杂，还原度要求较高。通过一系列的社区调研后发现，Puppeteer这个Node库可以提供一个相对高级的API，以DevTools协议控制Chrome或者Chromium，其无头模式可以将HTML转为PDF。这是目前Node Server应用中最为主流的解决方案，但是在使用过程中还是会存在很多坑点和注意事项。因此本文围绕无头浏览器、Puppeteer、HTML转PDF等几个方面进行总结和介绍。 一、无头浏览器 1.
JavaScript 权威指南 中文第6版 (完整目录 淘宝前端团队 译)
11-01
总的来说，《JavaScript 权威指南》中文第六版不仅覆盖了JavaScript的基础，还深入探讨了其高级特性和实践技巧，是学习和提升JavaScript技能的重要资源。通过阅读这本书，读者可以全面掌握JavaScript的精髓，从而在...
构建响应式网页：HTML与CSS实践指南
# 1. 响应式设计概述 ### 1.1 什么是响应式网页设计？ 响应式网页设计是一种让网页能够在不同的设备上提供最佳浏览体验的技术。通过使用流式布局、媒体查询等技术，使网站能够根据用户的设备大小、屏幕分辨率等...
JavaScript学习指南 高清 PDF
10-20
JavaScript，一种广泛应用于Web开发的脚本语言，是前端开发的核心技术之一。这份"JavaScript学习指南"高清PDF，无疑为想要深入理解JavaScript的初学者或有一定基础的开发者提供了宝贵的资源。下面，我们将深入探讨...
jQuery基础——DOM基础
最新发布
m0_54066656的博客
08-27 472
JQ基础——DOM操作
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 93
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
2024前端面试题-js篇
FormAda的博客
08-22 955
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
Ant-Design-Vue快速上手指南+排坑，操作详细步骤
liyy614的博客
08-23 854
总的来说，掌握Ant-Design-Vue的基本使用并不复杂，但是要想充分利用其提供的功能，就需要深入了解每个组件的详细用法，以及如何合理地整合到你的项目之中。Ant-Design-Vue是一款基于Vue.js的UI组件库，它不仅提供了丰富的高质量组件，还支持灵活的配置选项，使得开发者能够快速构建出既美观又功能强大的前端应用。例如，当你首次注册Ant Design Vue时，需要确保Vue实例已经正确创建并且版本兼容。再如，在按需引入组件的时候，配置正确的webpack策略可以避免不必要的资源请求。
vue全局参数
qq_34631220的博客
08-24 224
其它页面如果想监听改变。
浏览器精度问题
m0_46281382的博客
08-25 231
浏览器如何解析后端返回的long类型的数据
JavaScript 错误 - Throw 和 Try to Catch的使用
逆风优雅的博客
08-23 186
trycatchthrow上面的代码 因为 try中 没有adddlert这个方法，或者这个方法有误，这时，代码会执行catch部分。JavaScript 实际上会创建带有两个属性的Error 对象name和message。
八、SPA单页面实现SEO优化之预渲染prerender-spa-plugin
qq_44849312的博客
08-23 988
六、什么是SEO优化（搜索引擎优化）？SPA单页面应用如何实现SEO优化？通过上一篇文章我们介绍了服务端渲染的方式来实现单页面应用的SEO优化。但是，服务端渲染的方式对开发并不友好，它需要约定各种规范，比较适合开发大型网站。对于一些微型网站，比如个人博客，或者公司的小型应用网站，路由数量，页面数量并不多，我们可以使用prerender-spa-plugin预渲染来实现SPA单页面的SEO优化。它的优点是简单方便，不需要改动太多原来的项目内容。
react如何解决setTimeout获取不到最新数据问题
Misnice的博客
08-23 408
react如何解决setTimeout获取不到最新数据问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值