转载

一起来啃犀牛书：BOM

《javascript权威指南》这本书就像是js界的圣经，对于大神和新手都应该是必读书。但是这本近千页的书已经厚到让人望而生畏，要通读它不仅要时间也需要毅力。为了提升自己在js语言上的深度，所以抱着工匠精神开始研读，此文包含书中实用性较强的一些知识点和代码，算做读书笔记吧~

BOM全称为Browser Object Model浏览器对象模型，也就是浏览器端的window对象及其默认属性和函数。

计时器

知识点

也就4个函数

setInterval
clearInterval
setTimeout
clearTimeout
这里要注意的是setInterval/setTimeout第一个参数可为函数或字符串，传入字符串时相当于调用eval来执行。同时调用指定函数时都是可以传入参数的。而setTimeout第二个参数如果传入0，那么传入的函数不会立即执行，而是等到前面处于等待状态的时间处理程序全部执行完成后。

例题

定义一个定时器函数invoke，可定时执行或延迟执行指定函数。

代码

function invoke(f, start, interval, end) {
    if (!start) start = 0;          
    if (arguments.length <= 2)      // 延迟执行
        setTimeout(f, start);       
    else {                          // 延迟一段时间后重复执行
        setTimeout(repeat, start);  
        function repeat() {         
            var h = setInterval(f, interval);
            // 在end毫秒时停止重复
            if (end) setTimeout(function() { clearInterval(h); }, end);
        }
    }
}

浏览器定位和导航

知识点

hash属性。一般用来滚动到定位元素，移动端多用于SAP，通过它在浏览器端实现路由逻辑的加载。
search属性。URL中的参数，常用于跨页面传参和向服务端传参。
跳转属性/函数。 location.href = url; 相当于 location.assign(url); 这两种方法跳转都会留下历史纪录，而 location.replace(url) 则不会。

例题

提取URL的搜索字符串中的参数。

代码

function urlArgs() {
    var args = {};                             
    var query = location.search.substring(1);  // 过滤掉'?'
    var pairs = query.split("&");              
    for(var i = 0; i < pairs.length; i++) {    
        var pos = pairs[i].indexOf('=');       
        if (pos == -1) continue;               
        var name = pairs[i].substring(0,pos);  
        var value = pairs[i].substring(pos+1);
        value = decodeURIComponent(value);     
        args[name] = value;                    
    }
    return args;                              
}

这个函数很常用~

history

知识点

主要掌握3个函数：

back。相当于浏览器后退按钮
forward。相当于浏览器前进按钮
go。正数参数n：相当于浏览器前进按钮点击n次。负整数参数n：想当于浏览器后退按钮点击n次。

浏览器信息

知识点

navigator属性用来获取浏览器信息，重要的属性有4个：

appName。IE:”Microsoft Internet Explorer”，其它：”Netscape”
appVersion。浏览器厂商和详细信息。
platform。操作系统信息。
userAgent。包含appVersion所有信息和其他细节信息，格式不定，比较常用。适用于解决特定浏览器下的bug。

例题

使用userAgent来识别浏览器。

代码

//"webkit": Safari或Chrome版本号
//"opera": 版本号就是软件的版本号
//"mozilla"： 版本号是Gecko
//"msie" 版本号就是软件版本
var browser = (function() {
     var s = navigator.userAgent.toLowerCase();
     var match = /(webkit)[ //]([/w.]+)/.exec(s) ||
  /(opera)(?:.*version)?[ //]([/w.]+)/.exec(s) ||
  /(msie) ([/w.]+)/.exec(s) ||
  !/compatible/.test(s) && /(mozilla)(?:.*? rv:([/w.]+))?/.exec(s) ||
  [];
     return { name: match[1] || "", version: match[2] || "0" };
}());