精彩 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);
             }catch(e){

         var _link = document.createElement('link'),
             _head = document.getElementsByTagName('head')[0];
             _link.rel="stylesheet";
             _link.href=url;
         _head.appendChild(_link);
            }
 }

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 = , l = oDiv.length; i < l; i++) {

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

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

 for (var i = , 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')