精彩 JavaScript 代码片段

1. 根据给定的条件在原有的数组上，得到所需要的新数组。

   　　——《JavaScript 王者归来》

    var a = [-1,-1,1,2,-2,-2,-3,-3,3,-3];
    function f(s,e)
    {
        var ret = [];
        for(var i in s){  // 根据原有的数组长度进行循环
            ret.push(e(s[i])); 
        }
        return ret;
    }

    f(a,function(n){return n>0?n:0}); // 传输一个匿名函数作为逻辑判断

 

2. 比原生type 或 typeof 更详细的类型监测方法

   　　——《精通 JavaScript · 第二章》

    function type(p){
        /function.(\w*)\(\)/.test(p.constructor); //通过其构造函数来获取对应的类型。
        return RegExp.$1;
    }

 

3. 对象或数组的深拷贝，用于解决对象引用时值一改全改的问题。

var copyObject = function(obj){
     var result = {};
        for(var x in obj){
          result[x] = typeof obj==="object" ? copyObject(obj[x]) : obj[x]
          //如果拷贝的值仍然是一个对象,那么重复执行当前方法。
        }
　　return result;
}

 

4. 通过正则表达式来获取Cookie的值

function getCookie(name){
    
    if(name && RegExp("(^| )" + name + "=([^;]*)(;|$)").exec(document.cookie)) return RegExp.$2;
        // (^| ) 不匹配第一个空格。
        // ([^;]*) 只匹配除了;号之外的所有字符。
        // (;|$) 匹配以;号或$为结尾的字符。
}

 

5. 通过移位运算来替代"parseInt"

~~3.14 => 3;
// ~~ 取整。~取当前数值的反码,~~表示再次取反，也就是得到当前自身（说明，JS中的“位”运算会将数值自动转换为整数）

 

6. 将数值转换为16进制的字符串（常用于表示色彩）

(~~(Math.random()*(1<<24))).toString(16)
  // ~~ 通过位运算来取整。
  // << 左移位。将1的二进制数左移24位。而1<<24 == 2^24(RGB模式下最多可表示的色彩数量)
  // toString(16) 将数值转换为16进制的字符串输出。

 

7. 对象方法的兼容性检查

if('querySelector' in document){}

 

8. NodeList || HTMLCollection || Object 转换为Array或具有Array的方法。

    NodeList: 是指通过集合方法获得到的DOM节点列表，例如：document.getElementsByTagNmae,document.forms... 等方法。

    HTMLCollection: HTML块，它与NodeList很像，但是NodeList只支持数字索引，而HTMLCollection可以支持名称作为索引。

   NodeList 与 HTMLCollection 都具有以下类似：

　　· 具有数组的外观，但没有数组的方法

　　· 具有.length属性

　　· 支持索引来读取内容。

function makeArray(obj){
    var rs=[],len=obj.length;
    try{
        rs = [].slice.call(obj,0); 
         /* 
             注意：这里的arguments是具有.length属性的对象
             slice：数组的截取方法，这中写法也涉及到slice内部实现的原理
         */
    }catch(e){//for IE
        for(var i=0;j=obj[i++];){
            rs.push(j);
        }                    
    }
    return rs;    
}

 

9.尝试执行异常的代码

    try{
            // 尝试运行

    }catch(msg){

        throw "Error name:" + msg.name; // throw会在控制台抛出异常信息，注意：throw会阻塞程序执行。建议使用console.log
        throw "Error message:" + msg.message  

        /*  Error.Name 的常见错误信息：

            1. EvalError：eval_r()的使用与定义不一致 
            2. RangeError：数值越界 
            3. ReferenceError：非法或不能识别的引用数值 
            4. SyntaxError：发生语法解析错误 
            5. TypeError：操作数类型错误 
            6. URIError：URI处理函数使用不当

        */

    }finally{
        // finally 最终不论是运行成功还是没有运行成功都会执行。
    }

 

10.滚动条滚动时分别判断位置与内容的可见

// 判断滚动到指定元素的位置

function getPos(obj){
  var t = 0;
  while(obj){
    t += obj.offsetTop;
    obj = obj.offsetParent;   
  } 
   return t;       
}

window.onscroll = function(){
 var position = document.documentElement.clientHeight,
     visible =  document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);  
   
   // 滚动到指定位置 
   if(position > getPos(obj)){}
   // 滚动时指定内容显示出来
   if(visible > getPos(obj)){}
 
}

 

11. 在事件的注册处理程序中注销事件

function handle(){
    alert(‘I,m here!');
    this.removeEventListener('click',handle,false);
}
obj.addEventListener('click',handle,false);

 

12. 正则匹配清除两侧空格

var trim = function(v){
    var patrn = /^\s*(.*?)\s+$/;
    return (patrn.test(v))? RegExp.$1 : 'null';
}

 

13. HTML字符编码

var htmlEncode = function(str){
    var patrn = {};
        patrn['amp'] = /&/g;
        patrn['left'] = /</g;
        patrn['right'] = />/g;
        patrn['quot'] = /"/g;
        patrn['nbsp'] = /[\u0020*|\u3000*]/g; // \u0020 匹配半角空格 \u3000 匹配全角空格
    return str.replace(patrn['amp'],'&amp;').replace(patrn['left'],'&lt;').replace(patrn['right'],'&gt;').replace(patrn['quot'],'&quot;').replace(patrn['nbsp'],'&nbsp;');
};

 

14. 创建样式表

function createStyleSheet(url){
    try{
        document.createStyleSheet(url);
        5     }catch(e){
        
        var _link = document.createElement('link'),
            _head = document.getElementsByTagName('head')[0];
            _link.rel="stylesheet";
            _link.href=url;
        _head.appendChild(_link);
      13     }
}

 

15. 防止脚本注入

function stripscript(s) {
    return s.replace(/<script.*?>.*?<\/script>/ig, '');
}

 

16. 阻止mouseWhell事件连续触发的两种方式

// 时间戳的方式
var mark = 0;
$(document).mousewheel(function(e){
    var timer = new Date().getTime();
    if(timer - mark > 1e3){
        alert('ok');
        mark = timer;
    }
});

//定时器的方式
var flag = true;
$(document).mousewheel(function(e){
    if(flag){
        alert('ok');
        flag = false;
        setTimeout(function(){
            flag = true;
        },1000);
    }
});

 

17. 时间格式化

function dateFormat(t){        // t 是以秒为单位的值。

    var h = ~~(t/3600),        // t除以3600，取整，得到的就是小时。
        m = ~~(t%3600/60),    // t求余3600，取模，得到的就是去除小时剩下的秒数（分钟 + 秒），再除以60，取整，得到的就是分钟。
        s = ~~(t%3600%60);    // t求余3600，再求余60，剩下的自然就是“秒数”。

     return h+'小时'+m+'分'+s+'秒';
}

 

18. 获取DOM索引的两种方式

var oDiv = document.getElementsByTagName('div');

// 获取DOM对象的索引方式一

for (var i = 0, l = oDiv.length; i < l; i++) {

    oDiv[i].index = i; // 在DOM对象上附加属性的方式。
    oDiv[i].onclick = function() {
        alert(this.index);
    }
}


// 获取DOM对象的索引方式二

for (var i = 0, l = oDiv.length; i < l; i++) {

    (function(n) { // 每一次执行外层函数（自执行函数）都会创建一个独立的闭包，每个独立闭包的i值是不同的。
        oDiv[n].onclick = function() {
            alert(n);
        }
    }(i));

}

 

19. replace用法新发现

//之前我们普通的用法
'String'.replace(/[a-z]/,function(a,b,c){//...})

//现在，我们可以采用更简洁的方法
'images/logo.png'.replace(/(.*)(\.\w+)/,'$1@2x$2')