day12 – JavaScript的三大组成部分及方法、移动端适配、高频率触发事件的处理方案
一、JavaScript的三大组成部分
1.ECMAScript：
ECMA是（欧洲计算机制造商协会）它规定了js的语法标准。
2.BOM：
BOM（browser object model）：浏览器对象模型。就是浏览器自带的一些功能样式，如搜索框，设置，等学习浏览器窗口交互的对象
3.DOM：
DOM（document object model）：文档对象模型。规定了文档的显示结构，可以轻松地删除、添加和替换节点
二、BOM
1.认识BOM：
- 每个浏览器窗口都是一个window对象
- 在每一次打开一个页面的时候默认就创建了一个window对象
相当于var window = new Window(); - 每个页面不共享window
- 每次创建的全局变量和函数都是属于window对象的属性和方法
var a = 10 ;
console.log(window.a) ; //10
function fn(){
console.log(666) ;
}
window.fn() // 666
2.BOM的常见属性：
- navigator：
userAgent：会详细的显示浏览器的版本信息
console.log(navigator) ;
console.log(navigator.userAgent) ; //显示浏览器版本信息
- location 地址栏： (用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。)
href ：整个网址:
setTimeout(function () {
//获取或设置新的地址
// location.href = 'http://www.baidu.com'
},3000)
host ：域名+端口号
hostname ：域名
port ：端口号(返回URL中的指定的端口号，如URL中不包含端口号返回空字符串)
protocal ：协议 (http / https)
search： 问号后面的一串 ，表单提交的数据
setTimeout(function () {
location.search = '?username=yy&password=123'
},3000)
hash ：井号后面的一串 锚点,不包含散列，则返回空字符串。
assign() ：跳转至新的页面
setTimeout(function () {
//设置新的地址
location.assign('http://www.baidu.com')
},3000)
replace()： 替换当前页面 — 不会被历史记录
setTimeout(function () {
//替换新的地址 --- 替换了所有的历史记录
location.replace('http://www.baidu.com')
},3000)
reload() ：刷新页面
location.reload()
- history 历史记录
length：在同一个窗口打开过几个页面
history.forward() ：前进。加载历史列表中的下一个 URL。返回下一页。
history.back() 后退。加载历史列表中的前一个 URL。返回上一页。
windows.history.back(-1) ; //返回上一页
go(1 / -1) ：可进可退。
windows.history.go(1/-1) ; //返回上一页或下一页
document：文档 DOM实际上是BOM的一部分
利用navigator的userAgen判断打开网页的设备
function equipment(){
if(navigator.userAgent.includes('iPhone')){
console.log('使用的是苹果手机') ;
//处理对应的兼容问题
document.body.background = 'black' ;
return
}
if(navigator.userAgent.includes('Android')){
console.log('使用的是安卓手机') ;
return
}
if(navigator.userAgent.includes('win64')){
console.log('使用的是window系统的电脑') ;
}
}
equipment()
注意：第一次使用Open with Live Server打开时，会显示404错误，是因为没有设置icon图标。刷新一下就好了~
打印结果：
3.BOM方法：
- open() ：打开新的浏览器窗口，网页重定向（默认被拦截）
- close()：关闭本窗口
setTimeout(function (){
open('http://www.baidu.com') ;
close()
},300)
4.BOM事件：
- load事件：等待页面资源加载完毕之后执行
<div id="a">666</div>
<script>
window.onload =function() {
var oDiv = document.getElementById('a') ;
console.log(oDiv) ;
}
</script>
- scroll 页面滚动时触发这个事件 — 高频率触发的事件
<style>
body{
//设置一个高，可以滑动
height: 3000px;
}
</style>
window.onscroll = function () {
console.log(666) ;
}
- resize 窗口大小改变时触发此事件 — 高频率触发的事件
var t ;
window.onresize = function(){
//这里设置清除定时器，可以
clearInterval(t) ;
t = setTimeout(function () {
console.log(888) ;
},300)
}
- onblur 在对象失去输入焦点时触发。
window.onblur = function() {
console.log('你失去了我') ;
}
- onfocus 当对象获得焦点时触发。
window.onfocus = function(){
console.log('你又关注了我') ;
}
DOM会有延迟 。页面在获取焦点的时候，会优先使用现有的资源，而失去焦点的页面的资源会延后—不等于不处理
setInterval(function () {
document.write(6)
}, 1000)
二、移动端适配
移动端适配注意事项
1.不设置meta 禁止缩放那一段 — js里面有设置
2.计算 1rem = 75px
三、高频率触发事件的处理方案
onscroll / onresize 是高频率触发事件
函数的防抖和节流 —>解决高频率触发事件
- 函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。 — 每次点击，就重做。
例如：我们先给body设置一个高度为3000px,让滚动条出来。滑动滚动条，触发事件，打印888。如果300毫秒内高频事件再次被触发，就重新计算时间打印。
var t ;
window.onscroll = function () {
clearTimeout(t) ;
t = setTimeout(function (){
console.log(888) ;
},300)
}
- 函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。 — 点击一次，就把事情干完，没干完之前点击没用。
var oBtn = document.getElementById('btn') ;
oBtn.onclick = function () {
oBtn.disabled = true ;
var count = 6 ;
oBtn.innerHTML = count + 's之后可以再次点击'
var t = setInterval(function () {
count-- ;
oBtn.innerHTML = count + 's之后可以再次点击'
if(count <= 0) {
clearTimeout(t) ;
oBtn.disabled = false ;
oBtn.innerHTML = '获取验证码'
}
},1000)
}