BOM
概述:
BOM(全称bowser object model)浏览器对象模型,主要用于操作浏览器相关的内容(调用浏览器相关的功能及获取浏览器携带的内容),BOM是JavaScript的重要组成内容,但是他缺少规范,所以它是通过共有对象来解决没有规范的问题。(前面BOM相关内容没有加入W3C导致兼容问题)。IE的bom对象里面的相关参数及方法是最多的,由于是共有对象所以也被其他浏览器所采用
BOM的共有对象
window 窗口对象(浏览器的global对象 全局对象)
location 地址栏对象
history历史对象
navigator 导航对象(浏览信息对象)
screen 屏幕对象(适配用)
doucument 文档对象
frames 框架对象(也是window)
window 其他所有的对象都是window对象的属性 window可以被省略
概述
window 窗口对象,它是浏览器的global对象 全局对象,包含了所以的全局变量
属性
caches 返回一个缓存对象 CatheStorage 此对象激活了诸如存储用于离线使用的资源,并生成对请求的自定义响应等功能。
cookieStore 存储cookie的空间
indexedDB 浏览器内置数据库对象 用于在客户端存储大量的结构化数据(也包括文件/二进制大型对象(blobs))
localStorage 本地存储
sessionStorage session生命周期本地存储
closed 是否关闭
crossOriginlsolated cors设置(跨域设置)
console 控制台
chrome 谷歌内核属性
innerHeight 窗口可操作区域的高度
innerWidth 窗口可操作区域的宽度
scrollX scrollY 滚动栏的坐标
方法
控制台打印方法 打印方法
// 控制台打印方法
console.log('日志打印')//日志打印
console.error('错误打印')//错误打印
console.warn('警告打印')//警告打印
console.info('信息打印')//信息打印
console.debug('调试打印')//调试打印
console.group('分组打印')//分组打印
console.table('表格打印')//表格打印
弹窗方法
alert 弹信息窗 没有返回值
prompt 弹输入窗 有返回值 会返回输入的内容是一个String类型
confirm 弹选择框 有返回值 返回为Boolean类型
console.log(alert('hello'))
console.log(prompt('请输入'))
console.log(confirm('请问你是否是单身'))
打开窗口的方法 open
关闭窗口的方法 close(关闭当前窗口)
document.getElementById('openbtn').onclick = function(){
//打开的url路径地址 打开的方式(a标签的target一致) 打开时的配置(使用=号赋值 使用,号隔开)
window.open('http:www.baidu.com','_blank','width=200,height=200')
}
document.getElementById('closebtn').onclick = function(){
//打开的url路径地址 打开的方式(a标签的target一致) 打开时的配置(使用=号赋值 使用,号隔开)
window.close()
}
改变窗口的位置的方法
moveto
moveby
//moveTo 给定实际坐标 moveBy给定变化的距离
window.moveTo( 30,30)//到达30, 30的坐标
window.moveBy(20, 20)//10 10变成 30,30的坐标l / resizeTo 给定实际大小resizeBy在当前下发生变化
改变窗口大小的方法
window.resizeTo(30, 30)//大小改为width 30 height 30大小
window.resizeBy(30, 30)//原本的width增加30原本的height也增加3ol l scrollTo scrollBy
改变的滚动栏位置的方法 (*)
document.getElementById('scrollToBtn').onclick = function () {
window.scrol1To(300, 300)//滚动栏x轴到达30 y轴到达30
console.log(window.scrollX, window.scrol1Y)
}
document.getElementById('scrollByBtn').onclick = function () {
window.scrollBy(300, 300)//滚动栏x轴到达30 y轴到达30
console.log(window.scrollx, window.scrol1Y)
}
打印机功能调用 print打印方法 (*)
print (打印的基础实现)
//打印功能
window.print()
find查找
//find查找
window.find()
获取焦点和失去焦点
//获取焦点和失去焦点
window.focus()
window.blur()
fetch 异步的请求 Axios的底层实现(内核为xhr)
//fetch 异步的请求 Axios的底层实现(内核为xhr)
var obj = window.fetch("http://www.baidu.com")
console.log(obj)
Location(*)
概述
location是地址栏对象,可以获取地址栏上的所有信息
https://www.aliyundrive.com/s/dKU6qfyTgyW/folder/63ecc4b8a5b847fcc18e454d9cfef5cca4c58b0e
http://协议
域名 www.aliyundrive.com
(解析IP+端口号)
浏览器访问根据不同的协议指定不同的端口号 80端口http 443端口https
/s/dKU6qfyTgyW/folder/63ecc4b8a5b847fcc18e454d9cfef5cca4c58b0e等等为路径地址
?后面是传递参数 (get请求)
location的相关属性(都支持赋值)
hash获取#后面携带的内容(#通常放在最后面)
host 主机 IP地址+端口号
hostname 主机名 IP地址
href url路径
port 端口号
pathname 路径名
search 获取?后面传递的参数
protocol 协议
origin 跨域地址
ancestorOrigins 获取倒序排列的文档对象及来源的浏览器上下文(插件开发中使用)
console.log(location)
//获取hash前面带#(一般写在最后面)
console.log(location.hash)
//默认自己添加#
location.hash = 'abc'
console.log(location.host)
//location == 127.0.0.1
// location.host = "123.123.123.123:8080" 一般不建议设置
console.log(location.hostname)//主机名其实是一个Ip地址
console.log(location.href)//路径
//跳转页面
//location.href = 'http:www.baidu.com'//不会产生历史页面
console.log(location.origin)
console.log(location.port)//
//获取?后面的内容 里面的写法为key = value&key=value
console.log(location.search)
location.search = 'name=jack&age=19'
//http(不安全 文明 80)及https(安全 加密 443(openssl(对称加密 非对称加密 hash函数等等)))
console.log(location.protocol)//协议
//只读属性 返回的是一个domstring对象
console.log(location.ancestorOrigins)
location的方法
assgin 跳转页面(会产生历史页面)
replace 替换URL跳转页面
reload 重新加载页面
//获取元素
document.getElementById('btn1').onclick=function(){
location.assign('http://www.baidu.com')
}
//等同于href赋值
document.getElementById('btn2').onclick=function(){
location.replace('http://www.baidu.com')
}
document.getElementById('btn3').onclick=function(){
location.reload()
}
练习
//将https://www.baidu.com/s?ie=UTF-8&wd=mdn&tn=15007414_dg里面的每个key:value提取组成一个对象
function getUrlParams(url){
url = url.split(/\?/)[1]
var param = {}
//使用&符号进行分割
var params = url.split('&')//数组
//遍历数组
for(var paramStr of params){
var arr = paramStr.split('=')
//arr这个数组第一个为key 第二个为value
param[arr[0]] = arr[1]
}
return param
}
console.log(getUrlParams('https://www.baidu.com/s?ie=UTF-8&wd=mdn&tn=15007414_dg'))
history(*)
概述
history对象是历史对象,他记录所有的历史页面
history的属性
length 历史页面的个数 (包含当前页面)
state 值 (默认为null)
scrollRestoration 滚动恢复属性(auto || manual)
history的方法
forward 前进
back 后退
go 去任意历史页面
pushstate 添加一个state(新增历史页面)
replacestate 替换state(不会新增历史页面)
<a href="http:www.baidu.com">去百度</a>
<button id="forward">前进</button><button id="back">后退</button><button id="go">任意跳转</button>
<button id="pushstate">pushstate</button>
<button id="replacestate">replacestate</button>
<script>
console.log(history)
console.log(history.length)
console.log(history.state)
console.log(history.scrollRestoration)
//常用的方法 前进 后退 任意跳转 事件会自动传递参数 参数叫event
document.getElementById('forward').onclick = function(){
history.forward()
}
document.getElementById('back').onclick = function(){
history.back()
}
document.getElementById('go').onclick = function(){
//0区间 0是自己 1为前进 -1为后退
history.go(1)
}
//pushState添加一个state(新增历史页面) 在本地
document.getElementById('pushstate').onclick = function(){
//第一个参数为参数 state的数据值 第二个 unsend 常用值为"" 第三个为url 改变的url
history.pushState('hello',"",'./location对象讲解.html')
console.log(history.state)
console.log(history.length)
}
//replaceState添加一个state(不会新增历史页面)
document.getElementById('replacestate').onclick = function(){
//第一个参数为参数 state的数据值 第二个 unsend 常用值为"" 第三个为url 改变的url
history.replaceState('hello',"",'./location对象讲解.html')
console.log(history.state)
console.log(history.length)
}
pushstate以及replacestate都会进行操作
会影响state值 也会改变url地址 但是不会跳转页面(页面不会刷新)
navigator
概述
navigator 属于浏览器的导航对象,里面包含了浏览器的相关信息以及你的系统信息。
属性
userAgent 用户信息
appName
appVersion
language(国际化)
//携带 浏览器版本信息及系统版本信息兼容
console.log(navigator.userAgent) //用户相关信息
console.log(navigator.appName) //应用名
console.log(navigator.appVersion) //应用版本
console.log(navigator.language) //语言 zh-CN
screen 屏幕
概述
用于屏幕相关信息(适配 大屏可视化)
属性
- width 宽
- height 高
- availHeight 可视区高度
- availWidth 可视区宽度
- 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文档 (JavaScript不包括)包含用于操作对应的html文档的相关内容。他是整个DOM里面最大的对象,但它属于B
属性
body获取body
forms 获取所有的表单
head 获取head
//body获取body
console.log(document.body)
//forms 获取所有的表单
console.log(document.forms)
//head 获取head
console.log(document.head)
BOM是路由的底层实现,所有的前端js框架的路由底层都是BOM
路由
概述
根据不同的URL地址渲染不同的内容,主要分前端路由和后端路由
后短路由
后端介绍
后端主要提供数据进行相关的业务处理,后端主要用到java,PHP,node.js等语言
后端路由
接口路由 (json格式 restful接口)
根据不同的接口返回不同的数据
渲染路由(ssr服务器渲染 前后端不分离)
根据不同的url地址来渲染不同的页面(后端服务器压力大)
优点
- 利于seo (搜索引擎优化)
- 首页渲染速度快 (主页都是做ssr)
缺点
- 服务器压力大
- 维护不便
前端路由
根据不同url地址来渲染不同的页面(浏览器解析)
前端路由划分
- 页面路由 (根据不同的url跳转不同的页面 (刷新操作))
- hash路由 (根据不同hash值渲染不同的内容 不刷新)
location.href = 地址
location.assign('地址')
location.replace('地址')
<button onclick="location.hash = 'hello'">hello</button>
<button onclick="location.hash = 'byby'">byby</button>
<div id="context"></div>
<script>
//hash路由 (根据不同hash值渲染不同的内容 不刷新)
//监听事件 onhashchange
window.onhashchange = function(){
var hash = location.hash
if(hash=='#hello'){
document.getElementById('context').innerHTML = 'hello'
}else{
document.getElementById('context').innerHTML = 'byby'
}
}
history路由 (根据不同的url来渲染不同的内容 不刷新)
<button onclick="history.pushState('','','')">btn1</button>
<button onclick="history.replaceState('','','')">btn2</button>
<div id="context"></div>
<script>
//监听事件 onpopstate
//等待back 或 go 或 forward才触发
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的问题出现了一个新的技术叫预渲染
跳转页面
assgin
replace
forward
back
go