BOM概述
BOM全称(browser object model)浏览器对象模型，主要用操作浏览器相关的内容（调用浏览器相关的功能及获取浏览器携带的内容)，BOM是JavaScript的重要组成，但是他缺少规范，所以他是通过共有对象来解决没有规范的问题。(前面BOM相关的内容没有融入W3c导致他有兼容问题)。ie的bom对象里面的相关参数及方法是最多的，由于是共有对象所以这些参数都被其他浏览器采用了。
BOM的共有对象
- window 窗口对象(浏览器的global对象)
- location 地址栏对象
- history 历史对象
- navigation 导航对象(浏览器信息对象)
- screen 屏幕对象 (适配)
- frames 框架对象 (其实也是个window)
- document 文档对象
window
概述:
window窗口对象，他是浏览器的global对象，他包含所有的全局变量。
属性：(只要能存储的属性都要记住它的大小以及容量和存储的东西)
- chches: 返回一个缓存对象 caseStroage
- closed 是否关闭 (默认值为false)
- cookieStore 存储cookie的空间
- crossOriginIsolated: 设置(跨域设置)
- innerHeight 窗口可操作区域的高度
- innderWidth 窗口可操作区域的宽度
- indexedDB 浏览器内置数据库
- localStorage 本地存储
- sessionStorage 他是session生命周期本地存储
- Chrome 谷歌内核的属性
- scrollX 滚动栏的坐标 scrollY 滚动栏的坐标
- ....
其他的所有对象都是window对象的属性 window可以被省略
方法:
打印方法(控制台打印方法)
例子:
window.console.log() //窗口拿到打印台打印台拿到函数(log)
- console.error()//错误打印
- console.warn()//警告打印
- console.info()//信息打印
- console.debug()//调试打印
- console.group()//分组打印
- console.table()//表格打印
弹出方法
- alert 弹信息框 没有返回值
- prompt 弹输入框 有返回值返回值为输入的内容 (string)
- confirm 弹选择框 有返回值返回值为Boolean类型
打开窗口的方法 open
关闭窗口的方法 close (关闭当前窗口)
改变窗口位置的方法
- moveTo
- moveBy
改变窗口大小的方法
- resizeTo
- resizeBy
改变滚动栏位置的方法（❤）
- scrollTo
- scrollBy
打印机功能调用 print打印方法（❤）
- print(打印的基础实现)
window.print()
- find查找
window.find()
- 窗口的foucs 获取焦点 blur失去焦点
window.foucs()
window.blur()
setInterval和setTimeout（❤）
clearInterval和clearTimeout（❤）
fetch 发送一个异步的请求 Axios的底层实现 (内核为xhr)（❤）
location
概述
location是地址栏对象，他可以获取地址栏上的所有信息。
https:// 协议
- mbd.baidu.com 域名 (解析+端口号)
- 浏览器访问根据协议的不同指定不同的端口号 80端口http 443端口https
- /newspage/data/landingsuper 路径地址
location相关的属性
- hash 获取#后面携带的内容(#通常在最后面)
- host 主机 ip地址+端口号
- hostname 主机名 ip地址
- href url路径
- port 端口号
- pathname 路径名
- search 获取?后面传递的参数
- protocol 协议
- origin 跨域地址
- ancestorOrigins 获取倒序排序的文档对象及来源的浏览器上下文(插件开发)
location相关的方法
assign 跳转页面(会产生历史页面)
replace 替换url跳转页面 (不会产生历史页面)
reload 重新加载页面
练习
history对象
概述
history对象是历史对象,他记录所有的历史页面。
history的属性
- length 历史页面个数 (包含当前页面)
- state 值 (默认值为null)
- scrollRestoration 滚动恢复熟悉(auto || manual)
history的方法
- forward 前进
- back 后退
- go 去任意历史页面
- pushstate 添加一个state(新增历史页面)
- replace 替换state (不会新增历史页面)
pushstate和replace都会进行的操作
会影响state值 会改变url值 但是不会跳转页面(页面不会刷新)
navigation
概述
navigation他是属于浏览器的导航对象,里面包含浏览器的相关信息以及你的系统信息.
- appName
- appVersion
- language (国际化)
//携带 浏览器版本信息以及系统版本信息兼容
console.log(navigator.userAgent) //用户相关信息
console.log(navigator.appName) //应用名
console.log(navigator.appVersion)//应用版本
console.log(navigator.language)//语言
screen 屏幕
概述：
用于屏幕相关信息 （适配 大屏可视化）
属性:
- width 屏幕宽
- height 屏幕高
- availWidth 屏幕可视区宽度
- availHeight 屏幕可视区高度
- availLeft 屏幕可视区离左边的距离
- availTop 屏幕可视区离上边的距离
console.log(screen.width)//宽
console.log(screen.height)//高
console.log(screen.availHeight) //可视区高度
console.log(screen.availWidth) //可视区宽度
console.log(screen.availLeft) //可视区离左边的距离
console.log(screen.availTop) //可视区离上边的距离
document
概述:
document是文档对象，他指代的是html整个文档。包含用于操作对应的html文档的相关内容。他是整个DOM里面最大的对象，他是属于BOM的。
相关属性
- body 获取body
- forms 获取所有的表单
- head 获取head
console.log(document.body)
console.log(document.forms)
console.log(document.head)
BOM是路由的底层实现，所有的前端JS框架的路由底层都是BOM。
路由
概述:
根据不同的url地址来给你渲染不同的内容，路由主要分为俩种。前端路由，后端路由。
后端路由:
后端介绍
后端 主要提供数据的，以及对应的数据进行相关的业务处理。后端用到的语言主要java，php，node.
后端路由
接口路由 （json格式 restful接口）
根据不同的接口返回不同的数据
渲染路由 （ssr 服务器渲染 前后端不分离）
根据不同的url地址来渲染不同的页面 (后端服务器的压力大)
优点
利于seo （搜索引擎优化）
首页渲染速度快 （主页都是做ssr）
缺点
服务器压力大
维护不便
前端路由
根据不同url地址来渲染不同的页面（浏览器解析）
前端路由划分
页面路由 （根据不同的url跳转不同的页面 （刷新操作））
location.href = 地址
location.assign('地址')
location.replace('地址')
hash路由 （根据不同hash值渲染不同的内容 不刷新）
```html
<body>
<button οnclick="location.hash = 'hello'">hello</button>
<button οnclick="location.hash = 'byby'">byby</button>
<div id="context"></div>
</body>
</html>
<script>
//监听事件 onhashchange
window.onhashchange = function(){
var hash = location.hash
if(hash=='#hello'){
document.getElementById('context').innerHTML = 'hello'
}else{
document.getElementById('context').innerHTML = 'byby'
}
}
</script>
history路由 （根据不同的url来渲染不同的内容 不刷新）
```html
<body>
<button οnclick="history.pushState('','','./document.html')">1</button>
<button οnclick="history.replaceState('','','./histroy.html')">2</button>
<div id="context"></div>
</body>
</html>
<script>
//监听事件 onpopstate
//等待back 或者 go 或 forwad才触发
window.onpopstate = function(){
if(location.href.search('document')){
document.getElementById('context').innerHTML = 'hello'
}else{
document.getElementById('context').innerHTML = 'byby'
}
}
</script>
hash路由和history路由常用于SPA（单页应用程序）程序，不刷新页面也能实现视图的切换。所以对应的在vue或者react的路由底层设计中只有俩种模式一种为hash模式一种为history模式。这种程序一般运用在前后端分离的基础上。
单页应用程序的优缺点
优点
无刷新 减少了页面的回流（重新渲染）
业务更加清晰 代码结构更加明了
缺点
不利于seo
所以为了解决单页应用不利于seo的问题出现了一个新的技术叫预渲染
谢谢观看！
不知名选手铉
2023/2/15 22:56
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
