精彩 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')