企业官网建设流程全解析

门户网站建设 总结,电子商务网站推广与建设论文,专业汽车网站,创建吃的网站怎么做很多同学 DOM 玩得很溜#xff0c;但一到 BOM 就有点懵。其实日常开发中我们大量用到的功能#xff08;跳转页面、获取浏览器信息、倒计时、前进后退、获取 URL 参数……#xff09;几乎都来自 BOM。 搞清楚一个最核心的概念#xff1a;window 到底是谁#xff1f; // 这…很多同学 DOM 玩得很溜但一到 BOM 就有点懵。其实日常开发中我们大量用到的功能跳转页面、获取浏览器信息、倒计时、前进后退、获取 URL 参数……几乎都来自 BOM。搞清楚一个最核心的概念window 到底是谁// 这两个写法其实是一样的alert(hi);window.alert(hi);window 是浏览器的顶级对象BOM 的核心JavaScript 的全局对象所有全局变量、全局函数都是它的属性/方法所有 BOM 对象location、navigator、history、screen…都是它的子对象一句话总结你写的大部分“全局”东西其实都是在跟 window 打交道。window 常见事件// 写法1推荐能等所有资源加载完包括图片window.onloadfunction(){console.log(整个页面包括图片等都加载完了);};// 写法2只等 DOM 结构加载完图片可能还没加载完速度更快window.addEventListener(DOMContentLoaded,function(){console.log(DOM 树构建完毕);});现在的项目基本都用框架window.onload 反而用得少了但面试还是经常问定时器 —— 前端最常用的异步手段之一详见另一篇文章JS 执行机制JavaScript 采用单线程模型这意味着同一时刻主线程只能执行一个任务。为了处理耗时操作如网络请求、定时器、DOM 操作等JavaScript 引入了异步机制其核心就是事件循环Event Loop。任务分类JavaScript 中的任务主要分为两类同步任务在主线程上按顺序立即执行的任务例如变量声明、函数调用、基本的算术运算等。异步任务不立即执行、会被推迟处理的任务主要包括定时器DOM 事件回调网络请求Promise 的 then/catch/finally 回调等经典的事件循环执行流程执行当前宏任务从主线程执行栈开始执行栈清空后立即清空当前所有微任务执行微任务队列微任务队列清空后从宏任务队列中取出一个宏任务回到步骤1重复上述过程直到宏任务队列与微任务队列都为空经典面试题解析console.log(1);setTimeout((){console.log(2);},0);Promise.resolve().then(()console.log(3)).then(()console.log(4));console.log(5);执行顺序分析同步代码执行 → 输出 1、5遇到 setTimeout将其回调放入宏任务队列遇到 Promise.then将其回调放入微任务队列前宏任务全局脚本结束清空微任务队列 → 输出 3、4微任务队列空了从宏任务队列取任务 → 执行 setTimeout 回调 → 输出 2最终输出顺序15342理解宏任务与微任务的执行优先级是掌握现代 JavaScript 异步编程的基础。location 对象 —— URL 操作与页面导航location 对象提供了对当前浏览器地址栏信息的完整读写能力是前端路由跳转、参数解析最常用的 API 之一。页面跳转与刷新方法// 方法一最常用直接赋值location.hrefhttps://www.example.com;// 方法二类似 href但语义更明确location.assign(https://www.example.com);// 方法三替换当前历史记录无法后退location.replace(https://www.example.com);// 方法四刷新当前页面location.reload();// 正常刷新优先使用缓存location.reload(true);// 强制从服务器重新加载相当于 CtrlF5注意在现代单页应用SPA中建议优先使用 history.pushState/replaceState 进行无刷新跳转而非频繁使用 location.href。history 对象 —— 浏览器历史记录管理history 对象允许开发者对浏览器前进/后退栈进行读写操作是实现单页应用路由的核心机制之一。基础导航方法history.back();// 等价于浏览器后退按钮history.forward();// 等价于前进按钮history.go(n);// n 可正可负0 表示刷新当前页7.2 HTML5 History APISPA 核心// 添加一条新历史记录修改地址栏但不刷新页面history.pushState({page:1},,/page1);// 替换当前历史记录不增加新条目history.replaceState({page:2},,/page2);// 监听历史状态变化后退、前进触发window.addEventListener(popstate,(event){console.log(当前状态,event.state);// 根据 event.state 重新渲染页面});推荐实践现代前端框架Vue Router、React Router内部几乎全部基于 pushState / replaceState popstate 事件实现路由管理。总结Window 对象作为浏览器环境的全局根对象统领整个 BOM 体系通过定时器实现异步调度依托单线程事件循环模型处理任务借助 location、history 完成 URL 操作、运行时环境识别以及历史记录管理的核心功能成为连接 JavaScript 运行时与浏览器实际能力的关键桥梁。