前端之家

  1. 首页
  2. 博文

记录--让我们来深入了解一下前端“三清”是什么

• 博文 • 作者：林恒

 这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

记录--让我们来深入了解一下前端“三清”是什么

前端“三清”

在前端开发中，我们经常听到关于“三清”的说法，即 window、document、Object。这三者分别代表了 BOM（浏览器对象模型）、DOM（文档对象模型）以及 JS 的顶层对象。在这个体系中，我们通过 JavaScript 与浏览器进行深度交互，构建出丰富多彩的网页应用。同时，JS 类也是前端开发中常用的构建模块，通过构造函数和原型，我们能够创建出更为复杂的对象和功能。

BOM

首先让我们来了解BOM：

BOM（浏览器对象模型）是一组用于与浏览器交互的对象，提供了 JavaScript 访问浏览器功能的接口。对于JavaScript：为了能够让JavaScript能控制浏览器的行为，JavaScript就有了一套自己的BOM接口。

以下是 BOM 中一些常见的对象和功能：

1. window 对象：

window 对象是 BOM 的顶层对象，代表浏览器的一个窗口或一个标签页。window 对象包含了很多属性和方法，例如：

  • window.innerWidth 和 window.innerHeight：获取浏览器窗口的内部宽度和高度。
  • window.location：提供了与当前窗口中加载的文档有关的信息，比如当前 URL。
  • window.document：表示当前窗口中加载的文档，即 DOM。

2. 弹窗和对话框：

  • window.alert()：弹出警告框。
  • window.confirm()：弹出确认框，用户可以点击“确定”或“取消”。
  • window.prompt()：弹出提示框，通常用于从用户获取输入。

3. 定时器：

  • window.setTimeout()：在一定时间后执行一次指定的函数。
  • window.setInterval()：以指定的时间间隔重复执行指定的函数。
  • window.clearTimeout() 和 window.clearInterval()：用于取消之前通过 setTimeout 和 setInterval 设置的定时器。

4. 导航和历史：

  • window.history：提供对浏览器历史记录的操作，比如前进、后退。
  • window.location：提供对当前 URL 的操作，可以用于导航到新的页面。

5. 屏幕信息：

  • window.screen：提供有关用户屏幕的信息，如屏幕宽度、高度。

6. 存储：

  • window.localStorage 和 window.sessionStorage：用于在客户端存储数据，分别在本地存储和会话存储中。

7. 其他：

  • window.navigator：提供关于浏览器的信息，如浏览器名称、版本、操作系统等。
  • window.console：用于在控制台输出信息，方便调试。

BOM 提供了丰富的接口，使开发者能够与浏览器进行交互，控制页面的导航、执行定时任务、获取用户屏幕信息等。在编写代码时，建议谨慎使用不同浏览器独有的 BOM 特性，以确保跨浏览器的兼容性。

DOM

DOM（文档对象模型）是一种用于表示和操作文档的树状结构的编程接口。它将文档表示为一个由节点组成的树，每个节点代表文档中的一个元素、属性、文本等。DOM 提供了一种以编程方式访问、更新和操作 HTML 或 XML 文档的方法，使开发者能够通过 JavaScript 动态地操纵页面的内容和结构。

对于JavaScript：为了能够使JavaScript操作Html，JavaScript就有了一套自己的DOM编程接口。

DOM 的基本概念：

  1. 节点（Node）： DOM 中的基本单位，文档中的所有内容都是节点。节点可以是元素、属性、文本等。
  2. 元素节点（Element Node）： 表示文档中的元素，如 <div>、<p>、<span> 等。
  3. 属性节点（Attribute Node）： 表示元素的属性，如 <div id="example"> 中的 id 属性。
  4. 文本节点（Text Node）： 表示元素中的文本内容。
  5. 父节点、子节点、兄弟节点： 节点之间的关系。一个节点的直接包含者称为父节点，被它直接包含的节点称为子节点，具有相同父节点的节点称为兄弟节点。

以下是 DOM 的一些常见属性和方法：

  1. document 对象： 表示整个文档，是 DOM 树的入口。通过 document 对象，可以访问和操作文档的各个部分。
  2. getElementById() 方法： 通过元素的 id 获取元素节点。
var element = document.getElementById('example');
  1. getElementsByClassname() 和 getElementsByTagName() 方法： 分别通过类名和标签名获取元素节点。
var elementsByClass = document.getElementsByClassname('example');
var elementsByTag = document.getElementsByTagName('p');
  1. querySelector() 和 querySelectorAll() 方法： 使用 CSS 选择器语法获取元素节点。
var element = document.querySelector('#example');
var elements = document.querySelectorAll('.example');
  1. createElement() 和 createTextNode() 方法： 创建新的元素和文本节点。
var newElement = document.createElement('div');
var newText = document.createTextNode('Hello,DOM!');
  1. 节点的属性和方法： 节点对象有各种属性和方法，用于访问和操作节点的内容、样式、事件等
// 获取节点的文本内容
var textContent = element.textContent;

// 设置节点的样式
element.style.color = 'red';

// 添加事件监听器
element.addEventListener('click',function() {
  // 处理点击事件
});

// 向element内部的最后面添加一个节点，传入的参数是节点类型
element.appendChild(Node)
 
// 向element内部某个已存在的节点的前面插入一个节点，仍然传入一个节点类型的参数
element.insertBefore(new_Node,existed_Node)

// 删除element内的某个节点，传参是节点类型参数
element.removeChild(Node)

DOM 操作的基本流程：

  1. 选择目标节点： 使用上述方法选择要操作的元素节点。
  2. 操作节点： 使用节点的属性和方法进行相关操作，如修改文本内容、样式、添加或移除节点等。
  3. 更新页面： 对节点进行操作后，通过 appendChild()、insertBefore() 等方法将更新后的节点插入到文档中，或者通过修改节点的属性直接更新页面。

DOM 的灵活性和强大性使得它成为前端开发中不可或缺的一部分。通过合理地使用 DOM，开发者能够实现动态更新页面、响应用户操作、处理表单数据等丰富的功能，提升用户体验。然而，需要注意的是，频繁的 DOM 操作可能导致性能问题，因此在实际开发中应该注意优化操作，并尽量减少不必要的重绘和回流。

JS的顶层对象

JavaScript 的顶层对象是 Object，它是所有对象的父对象。Object 对象在 JavaScript 中扮演着非常重要的角色，提供了一些常用的方法和属性，同时也是原型链的起点。

创建对象的方式

  1. 使用字面量：

javascriptCopy code
var obj = { key: 'value' };

         2.使用构造函数：

javascriptCopy code
var obj = new Object();
obj.key = 'value';

Object 对象的属性和方法

1. 属性

  • Object.prototype： Object 对象的原型，所有对象都继承自这个原型。这是原型链的起点。
  • Object.length： 通常用于获取 Object 构造函数的长度属性，值为 1。

2. 方法

  • Object.assign(target,...sources)： 用于将一个或多个源对象的属性复制到目标对象。它会返回目标对象。

javascriptCopy code
var target = { a: 1,b: 2 };
var source = { b: 3,c: 4 };
var result = Object.assign(target,source);
console.log(result); // { a: 1,b: 3,c: 4 }
  • Object.create(proto,[propertiesObject])： 创建一个新对象，使用现有的对象作为新对象的原型。
javascriptCopy code
var protoObj = { x: 10 };
var newObj = Object.create(protoObj);
console.log(newObj.x); // 10
  • Object.keys(obj) 和 Object.values(obj)： 返回一个包含对象自身所有属性名或属性值的数组
javascriptCopy code
var obj = { a: 1,b: 2,c: 3 };
console.log(Object.keys(obj)); // ['a','b','c']
console.log(Object.values(obj)); // [1,2,3]
  •  Object.entries(obj)： 返回一个包含对象自身所有 [key,value] 对的数组。
javascriptCopy code
var obj = { a: 1,c: 3 };
console.log(Object.entries(obj)); // [['a',1],['b',2],['c',3]]
  • Object.freeze(obj) 和 Object.seal(obj)： 分别用于冻结对象（使对象不可更改）和封闭对象（使对象不可添加、删除属性）。
javascriptCopy code
var obj = { x: 1,y: 2 };
Object.freeze(obj);
obj.x = 10; // 不会生效，obj.x 仍然为 1


javascriptCopy code
var obj = { x: 1,y: 2 };
Object.seal(obj);
obj.z = 3; // 不会生效，obj 中不会添加 z 属性

原型链

Object 对象是 JavaScript 中原型链的起点。每个对象都有一个 __proto__ 属性，指向它的原型对象。在原型链中，Object.prototype 是所有对象的祖先。

javascriptCopy code
var myobject = {};
console.log(myobject.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null，原型链的终点

通过原型链，对象可以继承 Object.prototype 的属性和方法，这包括一些基本的对象操作，例如 toString()、hasOwnProperty() 等。

javascriptCopy code
var myobject = {};
console.log(myobject.toString()); // [object Object]
console.log(myobject.hasOwnProperty('toString')); // false，来自原型链
总体而言，Object 对象作为 JavaScript 中的顶层对象，原型在哪一栈上有的方法，对象都可以用，它也提供了一些常用的工具方法和属性，同时在原型链中发挥了关键作用。也可以说js面向对象不是血缘的，而是面向原型的，理解 Object 对象有助于更深入地理解 JavaScript 的对象模型。

本文转载于:

https://juejin.cn/post/7300100800906788873

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

记录--让我们来深入了解一下前端“三清”是什么

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件举报，一经查实，本站将立刻删除。

本文链接：https://www.f2er.com/3188659.html

大家都在看

  • 飞码LowCode前端技术系列：如何便捷快速验证实现投产及飞码探索 博文

    飞码LowCode前端技术系列：如何便捷快速验证实现投产及飞码探索

    本篇文章从数据中心，事件中心如何协议工作、不依赖环境对vue2.x、vue3.x都可以支持、投产页面问题定位三个方面进行分析。
    2023-11-16 • 博文
  • 如何优雅使用 vuex 博文

    如何优雅使用 vuex

    大纲 本文内容更多的是讲讲使用 vuex 的一些心得想法，所以大概会讲述下面这些点： Q1：我为什么会想使用 vuex 来管理数据状态交互？ Q2：使用 vuex 框架有哪些缺点或者说副作用？ Q3：我是如何在项目里使用 vuex 的？ 初识 vuex 对于 vuex，有人喜欢，有人反感 喜欢的人觉
    2023-11-16 • 博文

  • 第三方组件及计算属性传参的问题解决方式

    1. 前言 唉，好想玩滋嘣。 2. 计算属性直接传参接收不到 表格数据某一列需要用的计算属性时，模板中使用计算属性 fullName 就会直接调用 fullName 函数，而在模板中 fullName(item) 相当于fullName()(item)，此处为函数柯里化。 &lt;el-table-
    2023-11-16 • 博文
  • 记录--Vue3基于Grid布局简单实现一个瀑布流组件 博文

    记录--Vue3基于Grid布局简单实现一个瀑布流组件

    这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言 在学习Grid布局之时，我发现其是CSS中的一种强大的布局方案，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局，在刷某书和某宝首页时，我们发现其展示方式就是一种瀑布流，是一种流行的网站页面布局，视觉表……
    2023-11-16 • 博文

  • 用强数据类型保护你的表单数据-基于antd表单的类型约束

    接口数据类型与表单提交数据类型，在大多数情况下，大部分属性的类型是相同的，但很少能做到完全统一。我在之前的工作中经常为了方便，直接将接口数据类型复用为表单内数据类型，在遇到属性类型不一致的情况时会使用any强制忽略类型错误。后来经过自省与思考，这种工作模式会引起各种隐藏bug，一定有更……
    2023-11-16 • 博文
  • pinia的使用 博文

    pinia的使用

    前言 最近新开了个项目，以前老项目都是vue2+vuex开发的，都说用vue3+pinia爽得多，那新项目就vue3+pinia吧。这里记录一下pinia的使用。 使用方法 安装pinia: npm i pinia main.js中引入pinia: //main.js import { create
    2023-11-16 • 博文
  • 记录--让我们来深入了解一下前端“三清”是什么 博文

    记录--让我们来深入了解一下前端“三清”是什么

    这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前端“三清” 在前端开发中，我们经常听到关于“三清”的说法，即 window、document、Object。这三者分别代表了 BOM（浏览器对象模型）、DOM（文档对象模型）以及 JS 的顶层对象。在这个体系中，我们通过 JavaScr
    2023-11-16 • 博文
  • 记录--啊？Vue是有三种路由模式的？ 博文

    记录--啊？Vue是有三种路由模式的？

    这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 众所周知，vue路由模式常见的有 history 和 hash 模式，但其实还有一种方式-abstract模式（了解一哈~） 别急，本文我们将重点逐步了解： 路由 + 几种路由模式 + 使用场景 + 思考 + freestyle 路由概念
    2023-11-16 • 博文