前端进修：教程&开辟模块化/规范化/工程化/优化&东西/调试&值得关注的博客/Git&口试-前端资本汇总
迎接提issues指正：BOM
JavaScript-BOM
BOM是browser object model的缩写，简称浏览器对象模子。它自身是没有规范的或许还没有哪一个构造去规范它，所以，BOM缺少规范。它供应了许多对象，而且每一个对象都供应了许多要领与属性，用于接见浏览器的功用。
window对象
BOM的中心对象是window，它示意浏览器的一个实例，重要用于治理窗口与窗口之间的通信。window 对象处于JavaScript构造的最顶层，关于每一个翻开的窗口，体系都邑自动为其定义window 对象。F12翻开console,输入window,即可看到window的一切属性和要领。太多了，许多是不须要我们去深切相识的。
window 对象的属性
属性 寄义
closed 当窗口封闭时为真
defaultStatus 窗口底部状况栏显现的默许状况音讯
document 窗口中当前显现的文档对象
frames 窗口中的框架对象数组
history 保存着窗口近来加载的URL
length 窗口中的框架数
location 当前窗口的URL
name 窗口名
offscreenBuffering 用于绘制新窗口内容并在完成后复制已存在的内容，掌握屏幕更新
opener 翻开当前窗口的窗口
parent 指向包括另一个窗口的窗口（由框架运用）
screen 显现屏幕相干信息，如高度、宽度（以像素为单元）
self 指导当前窗口。
status 形貌由用户交互致使的状况栏的暂时音讯
top 包括特定窗口的最顶层窗口（由框架运用）
window 指导当前窗口，与self 等效要考证这些属性，直接F12翻开console，考证即可。
window 对象的要领
要领 功用
alert(text) 建立一个正告对话框，显现一条信息
blur() 将核心从窗口移除
clearInterval(interval) 消灭之前设置的定时器距离
clearTimeOut(timer) 消灭之前设置的超时
close() 封闭窗口
confirm() 建立一个须要用户确认的对话框
focus() 将核心移至窗口
open(url,name,[options]) 翻开一个新窗口并返回新window 对象
prompt(text,input) 建立一个对话框请求用户输入信息
scroll(x,y) 在窗口中转动到一个像素点的位置
moveBy(x,y) 根据给定像素参数挪动指定窗口,x,y代表程度位移量和垂直位移量
moveTo(x,y) 将窗口挪动到指定的指定坐标(x,y)处
resizeBy(x,y) 将当前窗口转变指定的大小(x,y)，当x、y的值大于0时为扩展，小于0时为减少
resizeTo(x,y) 将当前窗口转变大小，x、y离别为宽度和高度
print() 调出打印对话框
find() 调出查找对话框
setInterval(func,time) 经由指定时刻间实行代码
clearInterval("id"); 作废setInterval
setTimeout(func,time) 在定时器超事后实行代码
clearTimeout("id"); 作废还未实行的setTimeoutwindow下的属性和要领，能够运用window.属性、window.要领()或许直接属性、要领()的体式格局挪用。下面扼要引见几个。
window属性-窗口的位置和大小
窗口的位置，IE、Safari、Opera 和Chrome都供应了screenLeft 和screenTop 属性，离别用于示意窗口相干于屏幕左侧和上边的位置。firefox 则在screenX 和screenY 属性中供应雷同的窗口位置信息，Safari 和Chrome 也同时支撑这两个属性。
console.log(screenLeft); //102, fireFox下输出screenLeft is not defined
console.log(screenX); //102兼容：
var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX;
var topY = (typeof screenTop == 'number') ? screenTop : screenY;窗口页面大小，IE、Firefox、Safari、Opera 和Chrome 均为此供应了4 个属性：innerWidth和innerHeight，返回浏览器窗口自身的尺寸；outerWidth 和outerHeight，返回浏览器窗口自身及边框的尺寸。
console.log(innerWidth); //1366 页面宽度
console.log(innerHeight); //681 页面高度
console.log(outerWidth); //1366 页面长度+边框
console.log(outerHeight); //768 页面高度+边框
//减少窗口数据就会有变化旧的IE版本没有供应当前浏览器窗口尺寸的属性。不过，DOM有供应相干的要领：
document.documentElement.clientWidth
document.documentElement.clientHeight固然，这是规范形式下，还要兼容奇异形式：
document.body.clientWidth; //非规范形式运用body
document.body.clientHeight;
window要领-体系对话框
浏览器经由过程alert()、confirm()和prompt()要领能够挪用体系对话框向用户显现信息。
alert()
alert('xzavier warning');直接弹出弹框，弹框只要肯定和封闭按钮。
平常用于用户交互时做出提醒，不过这类要领的用户体验不是很好，如今都盛行运用营业须要的用户体验好的弹窗。
别的，之前常用于调试代码，但如今基本不用了。由于它很烦，弹一个要关一个。假如调试代码后遗忘关掉，还会给用户带来较差的体验。如今都用console，在掌握台打印，研发职员能够很轻易的看到调试信息，也不用去封闭弹窗之类的，就算一时忽视遗忘删掉调试代码，也不会影响到用户体验。
confirm()
confirm('confirm or cancel'); 肯定和作废弹框，按肯定返回true，按作废或许封闭按钮返回false。
if (confirm('confirm or cancel')) {
alert('you confirmed');
} else {
alert('you canceled');
} prompt()
prompt('please input a number', 0);
输入提醒框，带两个参数，一个提醒，一个值。按肯定返回输入值，不填返回空，按作废或许封闭按钮返回null。
window要领-新建窗口
window.open()要领能够导航到一个特定的URL，也能够翻开一个新的浏览器窗口。它能够接收四个参数：
1.要加载的URL
2.窗口的称号或窗口目的
3.一个字符串参数，示意新窗口的长宽等属性值
4.一个示意新页面是不是庖代浏览器纪录中当前加载页面的布尔值。
open('https://segmentfault.com/blog/xzavier'); //新建页面并翻开
open('https://segmentfault.com/blog/xzavier','xzavier'); //新建页面并定名窗口并翻开
open('https://segmentfault.com/blog/xzavier','_parent'); //在本页窗口翻开target 属性：
blank – 在一个新的未定名的窗口载入文档
_self – 在雷同的框架或窗口中载入目的文档
_parent – 把文档载入父窗口或包括了超链接援用的框架的框架集
_top – 把文档载入包括该超链接的窗口,庖代任何当前正在窗口中显现的框架
字符串参数：
属性 值 申明
width 数值 新窗口的宽度 ，不能小于100
height 数值 新窗口的高度，不能小于100
top 数值 新窗口的Y坐标，不能是负值
left 数值 新窗口的X坐标，不能是负值
location yes/no 是不是在浏览器窗口中显现地址栏，差别浏览器默许值差别
menubar yes/no 是不是在浏览器窗口显现菜单栏，默许为no
resizable yes/no 是不是能够经由过程拖动浏览器窗口的边框转变大小，默许为no
scrollbars yes/no 假如内容在页面中显现不下，是不是许可转动，默许为no
status yes/no 是不是在浏览器窗口中显现状况栏，默许为no
toolbar yes/no 是不是在浏览器窗口中显现东西栏，默许为no
open('https://segmentfault.com/blog/xzavier','xzavier','width=600,height=400,top=200,left=400,resizable=yes');
//相似一个弹窗弹出一个网页，open有返回值，返回window对象window要领-setTimeout和setInterval
JavaScript是单线程言语，它许可经由过程设置超时价和间歇时刻值来调理代码在特定的时刻实行。setTimeout在指定的时刻事后实行代码，setInterval是每隔指定的时刻就实行一次代码。
setTimeout
接收两个参数：要实行的代码和超时时刻（单元：毫秒）
function timer() {
console.log("xzavier's timer");
}
setTimeout(timer, 2000);setTimeout()返回一个数值ID，示意这个超时挪用。这个ID是超时挪用的唯一标识符，能够经由过程它来作废超时挪用。要作废还没有实行的超时挪用，能够挪用clearTimeout()要领并将响应的超时挪用ID作为参数通报给它。
function timer() {
console.log("xzavier's timer");
}
var xzavier = setTimeout(timer, 2000);
clearTimeout(xzavier); //作废超时挪用不实行setInterval
setInterval根据指定的时刻距离反复实行代码，直至间歇挪用被作废或许页面被卸载。设置间歇挪用的要领是setInterval()，接收参数：要实行的代码和每次实行之前须要守候的毫秒数
setInterval(function () {
console.log('xzavier');
}, 2000);作废间歇挪用要领和作废超时挪用相似，运用clearInterval()要领。但作废间歇挪用的重要性要远远高于作废超时挪用，由于在不加过问的情况下，间歇挪用将会一向实行到页面封闭。
var xzavier = setInterval(function () {
console.log('xzavier');
}, 1000);
clearInterval(xzavier);平常来说，运用了setInterval就一定要运用clearInterval去消灭，所以，运用超时挪用来模仿间歇挪用是一种最好形式。由于，运用超时挪用时，没必要跟踪超时挪用ID，由于每次实行代码以后，假如不再设置另一次超时挪用，挪用就会自行住手。
location对象
location是BOM对象之一，它供应了与当前窗口中加载的文档有关的信息。location对象是window对象的属性，也是document对象的属性。所以window.location和document.location等效。
location 对象的属性
属性 形貌的URL内容
host 主机名：端口号
hostname 主机名
href URL
pathname 路径名
port 端口号
protocol 协定部份
search 查询字符串
hash 假如该部份存在，示意锚点部份location 对象的要领
要领 功用
assign() 跳转到指定页面，与href等效
reload() 重载当前URL
repalce() 用新的URL 替代当前页面F12翻开调试器，console下打印window.location即可检察location的属性和要领。
location.reload(); //最有效的从新加载，有能够从缓存加载
location.reload(true); //强迫加载，从服务器泉源从新加载
location.assign('https://segmentfault.com/blog/xzavier'); //跳转到指定的URL
location.replace('https://segmentfault.com/blog/xzavier'); //能够防止发生跳转前的汗青纪录，跳转后浏览器不能返回上一个页面navigator对象
navigator对象，实在也是window对象的属性，包括大批有关Web浏览器的信息，在检测浏览器及操作体系上异常有效。
console.log(navigator.userAgent);
//用户代理头信息，许多时刻用于推断浏览器 Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
console.log(navigator.appCodeName);
//浏览器代码名 Mozilla
//appCodeName 属性是一个只读字符串，声清楚明了浏览器的代码名。
//在一切以 Netscape 代码为基本的浏览器中，它的值是 "Mozilla"。
//为了兼容起见，在 Microsoft 的浏览器中，它的值也是 "Mozilla"。
console.log(navigator.appName);
//官方浏览器名 Netscape
//appName返回所运用浏览器的称号。该属性并不一定能返回准确的浏览器称号。
//在基于 Gecko 的浏览器 （比方 Firefox）和基于 WebKit 的浏览器
//（比方 Chrome 和 Safari）中，返回的浏览器称号都是 "Netscape".
console.log(navigator.appVersion);
//浏览器版本信息 5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
console.log(navigator.cookieEnabled);
//是不是启用cookie，返回true/false
console.log(navigator.javaEnabled);
//是不是启用java，返回true/false
console.log(navigator.platform); Win32
//浏览器地点计算机平台
console.log(navigator.plugins);
//安装在浏览器中的插件数组 PluginArray {0: Plugin, 1: Plugin, 2: Plugin, 3: Plugin, 4: Plugin, length: 5}history对象
history对象是window 对象的属性，它保存着用户上网的纪录，从窗口被翻开的那一刻算起。
history对象有一个length属性，示意history 对象中的纪录数。history对象有三个要领。
要领 功用
back() 前去浏览器汗青条现在一个URL，相似退却
forward() 前去浏览器汗青条目下一个URL，相似行进
go(number) 跳转指定汗青纪录的URLscreen对象
screen对象是window 对象的属性,用于猎取屏幕的信息。
属性 形貌
width 屏幕的宽度
height 屏幕的高度
availWidth 窗口能够运用的屏幕的宽度
availHeight 窗口能够运用的屏幕的高度
document对象见： 温故js系列-DOM
