商城建设网站开发,怎么把网站管理系统,建商城网站带app多少钱,手机医疗网站13.说说你对 BOM 的理解#xff0c;常见的 BOM 对象你了解哪些#xff1f;
BOM (Browser Object Model)#xff0c;浏览器对象模型#xff0c; ⚫ 提供了独立于内容与浏览器窗口进行交互的对象 ⚫ 其作用就是跟浏览器做一些交互效果 ⚫ 比如如何进行页面的后退常见的 BOM 对象你了解哪些
BOM (Browser Object Model)浏览器对象模型 ⚫ 提供了独立于内容与浏览器窗口进行交互的对象 ⚫ 其作用就是跟浏览器做一些交互效果 ⚫ 比如如何进行页面的后退前进刷新浏览器的窗口发生变化滚动条的滚动以及 获取客户的一些信息如浏览器品牌版本屏幕分辨率 ⚫ 浏览器的全部内容可以看成 DOM 整个浏览器可以看成 BOM ⚫ window 对象 ◼ BOM 的顶层对象代表整个浏览器窗口。 ◼ 所有全局变量、函数以及 BOM 的其他对象都是 window 对象的属性。 ◼ 提供了许多方法和属性 open(),alert(), prompt(), setTimeout(), location, navigator 等。 ⚫ location 对象 ◼ 提供有关当前页面 URL 的信息并且可以用来导航到新的 URL。 ◼ 常用属性有 href(完整 URL), pathname(路径名), search(查询字符串)等 ◼ 方法有 assign(), reload(), replace()等。 ⚫ navigator 对象 ◼ 提供了关于浏览器的信息如名称、版本号和用户代理字符串等。 ◼ 常用于检测浏览器类型和能力。 ⚫ history 对象 ◼ 通过脚本访问浏览器的浏览历史。 ◼ 对象只提供了前进(forward())、后退(back())和重载当前页面(go())等有限的方法并 不能读取具体的历史记录条目。 ⚫ screen 对象 ◼ 提供了关于用户屏幕的信息如宽度、高度、可用宽度、可用高度、色彩深度等。 ⚫ localStorage/sessionStorage 对象 ◼ 这两者都是 Web Storage API 的一部分用于在用户的浏览器上存储数据。 ◼ localStorage 用于持久化存储而 sessionStorage 的数据仅在当前会话期间有效。 ⚫ document 对象 ◼ 代表当前页面的 HTML 文档。 ◼ 虽然严格来说它属于 DOMDocument Object Model的一部分但因为可以直 接通过 window.document 访问所以也常被视为 BOM 的一部分。 ◼ 它提供了操作文档内容、结构和样式的方法如 getElementById(), querySelector(), createElement()等。 14.Javascript 本地存储的方式有哪些区别及应用场景 ⚫ Cookie ◼ 小型文本文件为了辨别用户身份而储存在用户本地终端上的数据 ◼ 不超过 4KB 的小型文本数据 ◼ 由 Name、Value 和几个控制 cookie 有效期、安全性、使用范围的可选属性组成 ◼ 每次请求中都会被发送不使用 HTTPS 对其加密保存的信息很容易被窃取导 致安全风险。 ◼ 应用场景 标记用户与跟踪用户行为的情况 ⚫ sessionStorage ◼ 持久化的本地存储除非主动删除数据否则数据是永远不会过期的 ◼ 存储的信息在同一域中是共享的 ◼ 无法像 Cookie 一样设置过期时间 ◼ 只能存入字符串无法直接存对象 ◼ 应用场景适合长期保存在本地的数据令牌 ⚫ localStorage ◼ 一旦页面会话关闭sessionStorage 将会删除数据 ◼ 应用场景 敏感账号一次性登录 ⚫ indexedDB ◼ 一种低级 API用于客户端存储大量结构化数据(包括, 文件/ blobs)。 ◼ 该 API 使用索引来实现对该数据的高性能搜索 ◼ 应用场景 存储大量数据的情况、在线文档富文本编辑器保存编辑历史的情况 ◼ 优点 ◆ 储存量理论上没有上限 ◆ 所有操作都是异步的相比 LocalStorage 同步操作性能更高尤其是数据量 较大时 ◆ 原生支持储存 JS 的对象 ◆ 是个正经的数据库意味着数据库能干的事它都能干 ◼ 缺点 ◆ 操作非常繁琐 ◆ 本身有一定门槛 ◼ 关于 indexedDB 的使用基本使用步骤 如下 ◆ 打开数据库并且开始一个事务 ◆ 创建一个 object store ◆ 构建一个请求来执行一些数据库操作像增加或提取数据等。 ◆ 通过监听正确类型的 DOM 事件以等待操作完成。 ◆ 在操作结果上进行一些操作可以在 request 对象中找到 ◆ 关于使用 indexdb 的使用会比较繁琐大家可以通过使用 Godb.js 库进行缓 存最大化的降低操作难度 15.什么是防抖和节流有什么区别如何实现 ⚫ 防抖 在事件触发后等待一段时间后再执行处理函数。如果在等待时间内又发生了该 事件就重新开始计时。简单来说就是将多次连续触发的事件合并成一次执行。 ◼ 应用场景 ◆ 用户输入搜索框时可以使用防抖来减少实时搜索接口的请求次数。 ◆ 窗口大小调整时可以使用防抖来避免频繁调整布局。 ◼ 实现方式 ◆ 使用 setTimeout 延迟执行函数。 ◆ 每次触发事件时先清除之前设置的定时器再重新设置新的定时器。 ⚫ 节流 节流是指在一定时间间隔内只触发一次事件。无论事件触发多频繁在指定时间 间隔内只会执行一次处理函数。 ◼ 应用场景 页面滚动、resize 等频繁触发的事件可以使用节流来限制处理函数的 执行频率。 ◼ 实现方式 ◆ 使用定时器控制事件的触发间隔。 ◆ 在定时器执行时更新标志位以防止重复触发事件。 ◆ 在指定时间间隔后清除定时器再次允许事件触发。 区别 ⚫ 防抖是等待一段时间后再执行而节流是在时间间隔内只执行一次。 ⚫ 防抖合并连续的触发事件节流限制事件的触发频率。 防抖会延迟执行处理函数节流会按照固定的时间间隔执行处理函数。 16.如何通过 JS 判断一个数组 ⚫ 使用 Array.isArray() ◼ 这是 ES6 引入的一个原生方法专门用来检测给定的对象是否为数组。 ◼ let arr [1, 2, 3]; ◼ console.log(Array.isArray(arr)); // 输出: true ⚫ 使用 Object.prototype.toString.call(): ◼ 这个方法会返回一个表示该对象的字符串对于数组它会返回 “[object Array]”。 ◼ let arr [1, 2, 3]; ◼ console.log(Object.prototype.toString.call(arr) [object Array]); // 输出: true ⚫ 使用 instanceof: ◼ 这个操作符检查构造函数的 prototype 属性是否出现在某个实例对象的原型链上。 ◼ let arr [1, 2, 3]; ◼ console.log(arr instanceof Array); // 输出: true ⚫ 通过 constructor 属性: ◼ 虽然这种方法可行但是不推荐因为 constructor 属性可以被轻易篡改。 ◼ let arr [1, 2, 3]; ◼ console.log(arr.constructor Array); // 输出: true ⚫ 通过原型链上的 isPrototypeOf() 方法: ◼ 这种方法相对较少使用也是基于原型链的检查。 ◼ let arr [1, 2, 3]; ◼ console.log(Array.prototype.isPrototypeOf(arr)); // 输出: true 创建一个数组 ⚫ 使用 Array 构造函数 ◼ let array1 new Array(); // 创建一个空数组 ◼ let array2 new Array(3); // 创建一个长度为 3 的空数组 ◼ let array3 new Array(Apple, Banana, Cherry); ⚫ 使用字面量语法 ◼ 最常见的创建数组更简洁且推荐使用。 ◼ let array4 []; // 创建一个空数组 ◼ let array5 [Apple, Banana, Cherry]; // 创建包含三个初始元素的数组 ⚫ 使用 Array.of() ◼ 将一组参数转换为数组 ◼ let array6 Array.of(1, 2, 3); // 创建包含三个元素的数组 ◼ let array7 Array.of(0); // 正确创建只有一个元素 0 的数组与 new Array(0)不同 ⚫ 通过扩展运算符(...) ◼ 复制或合并数组快速创建数组。 ◼ let array8 [...hello]; // [h, e, l, l, o] ⚫ 通过 Array.from() ◼ 将类数组对象拥有 length 属性和索引元素或可迭代对象转换为真正的数组。 ◼ let arrayLike {0: a, 1: b, 2: c, length: 3}; ◼ let array9 Array.from(arrayLike); // 创建数组 [a, b, c] ◼ let iterable new Map([[a, 1], [b, 2]]); ◼ let array10 Array.from(iterable); // 创建数组 [[a, 1], [b, 2]] 17.说说你对作用域链的理解 作用域 即变量变量作用域又称上下文和函数生效能被访问的区域或集合 ⚫ 一个包含一系列作用域的列表这个列表定义了变量的可访问性。 ⚫ 每个函数在创建时都会生成自己的作用域链这个链最初由全局作用域组成。 ⚫ 当函数嵌套时内部函数的作用域链会包含外部函数的作用域以此类推形成了一个 链条。 将作用域分成 ⚫ 全局作用域 ◼ 任何不在函数中或是大括号中声明的变量 ◼ 可以在程序的任意位置访问 ⚫ 函数作用域 ◼ 也叫局部作用域如果一个变量是在函数内部声明的它就在一个函数作用域下面。 ◼ 这些变量只能在函数内部访问不能在函数以外去访问 ⚫ 块级作用域 ◼ ES6 引入了 let 和 const 关键字,和 var 关键字不同 ◼ 在大括号中使用 let 和 const 声明的变量存在于块级作用域中。 ◼ 在大括号之外不能访问这些变量 词法作用域 又叫 静态作用域 变量被创建时就确定好了而非执行阶段确定的。也就是说 我们写好代码时它的作用域就确定了JavaScript 遵循的就是词法作用域 作用域链 ⚫ 当在 Javascript 中使用一个变量的时候 ⚫ 首先 Javascript 引擎会尝试在当前作用域下去寻找该变量 ⚫ 如果没找到再到它的上层作用域寻找 ⚫ 以此类推直到找到该变量或是已经到了全局作用域 ⚫ 如果在全局作用域里仍然找不到该变量它就会在全局范围内隐式声明该变量(非严格 模式下)或是直接报错 18.JavaScript 原型原型链 ? 有什么特点 原型 ⚫ 每个实例都会被分配到一个 prototype 属性指向一个对象此对象为函数的原型对象 这个原型对象的所有属性和方法供函数所拥有。 ⚫ 默认情况下创建函数时函数的原型上都会添加 constructor这个 constructor 指向当 前函数对象。 原型链 ⚫ 每个对象都有__proto__属性由于原型本身也是一个对象也有该属性那么就可以利 用这一属性继续向上一级查找这样就形成一条链式结构。 ⚫ 最顶级的对象是 Objectwindow,在往上就是 null。 原型链的查找机制 ⚫ 查找属性时先在对象自身查找如果对象本身没有就去原型中查找 ⚫ 如果还没有就继续向原型链的上一级查找找到就输出。 ⚫ 如果指导 object 层还没有最终返回 undefined。 事件 用户和浏览器交互瞬间
