javascript小小技巧

JS的一些小技巧，我主要是做后台的（.NET），前端知识了解得不多，经验非常有限，不过还是经常写JS代码，对前端有着浓厚的兴趣，特喜欢js这门语言，虽然很多人喷它，但还是很喜欢Js。下面说说项目中我经常用到的小小技巧吧，做个总结。 

 

//返回值//1、if else   
var reg = /xxxxxx/ig,str='xxx';
if (reg.test(str)) {
    return true; //true 可以写成 !0
} else {
    return false;//false 可以写成 !1
}
//2、一句话搞定， 有些if  else 直接换成三元表达式
return reg.test(str);
//3、简写的同时还是要注重代码的可读性
return /xxxxxx/ig.test(str);

//在实际的开发中，是尽量不要去动原生对象的原型的，这里仅仅是举例
String.prototype.startsWith = function (start, ignoreCase) { 
    var s = this;
    if (s.isNullOrWhiteSpace()) {//isNullOrWhiteSpace 扩展的
        return false;
    }
    if (ignoreCase) {
        s = s.toLowerCase();
        start = start.toLowerCase();
    }
    if (s.substr(0, start.length) == start) {
        return true;
    }
    return false;
    //还可以简写成这样，不过可读性降低，也许没必要这样做，完全可以借助压缩工具，最终压缩成这样
    //return s.isNullOrWhiteSpace() ? false : (ignoreCase && (s = s.toLowerCase(), start = start.toLowerCase()), s.substr(0, start.length) == start) ? true : false;
};

 

 

//使用一些技巧，可以是程序更简单
Array.prototype.del = function (n) { //n表示第几项，从0开始算起。
    if (n > this.length - 1) {
        return this;
    } //return  n < 0 ? this : this.slice(0, n).concat(this.slice(n + 1, this.length)); 
        var r = n < 0 ? this : this.splice(n, 1);//这种更好
        return this;
    
    /*
　　　concat方法：返回一个新数组，这个新数组是由两个或更多数组组合而成的。
　　　　　　　　　这里就是返回this.slice(0,n)/this.slice(n+1,this.length)
　　 　　　　　　组成的新数组，这中间，刚好少了第n项。
　　　slice方法： 返回一个数组的一段，两个参数，分别指定开始和结束的位置。
　　*/
};

 

//声明变量，不要满篇var
var a = Math.random().toString(8).substring(2);
var b = document.getElementById('nav');
var c = +new Date();
//Good
var a = Math.random().toString(8).substring(2),
    b = document.getElementById('nav'),
    c = +new Date();

 

//&& 和|| 的使用
function xxxx(opts) {
    if (!opts) {
        opts = {};
    }
    // if (!opts)opts = {}; 这种写法虽然少了大括号，但是很多地方都不推荐这样写
    //没有title
    if (!opts.hasOwnProperty('title')) {
        opts.title = 'title';
    }
    if (opts.hasOwnProperty('loadMsg')) {
        opts.loadMsg = 'loadMsg';
    }
}

function xxxx(opts) {
    opts || (opts = {}),//不再有那么多的if了 或者这样 opts=opts||{};
    opts.hasOwnProperty('title') || (opts.title = 'title'),//||
    opts.hasOwnProperty('loadMsg') && (opts.loadMsg = 'loadMsg');//&&
}

 && || 的运用我们来看一下JQuery的一段源码，用于处理兼容性的钩子， event.pageX  和event.pageY  后面用了大量的&& 和|| 

        mouseHooks: {
            props: "button buttons clientX clientY offsetX offsetY pageX pageY screenX screenY toElement".split(" "),
            filter: function (event, original) {
                var eventDoc,
                    doc,
                    body,
                    button = original.button;

                // Calculate pageX/Y if missing and clientX/Y available
                if (event.pageX == null && original.clientX != null) {
                    eventDoc = event.target.ownerDocument || document;
                    doc = eventDoc.documentElement;
                    body = eventDoc.body;

                    event.pageX = original.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
                    event.pageY = original.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
                }

                // Add which for click: 1 === left; 2 === middle; 3 === right
                // Note: button is not normalized, so don't use it
                if (!event.which && button !== undefined) {
                    event.which = (button & 1 ? 1 : (button & 2 ? 3 : (button & 4 ? 2 : 0)));
                }
                return event;
            }
        },

 

//尽量减少操作DOM的次数
//var $container = $("#selMonth"); 改造之后就没有必要多声明一个变量了，除非后面有再用到这个变量
var listStr = [];
for (var i = 1; i <= 12; i++) {
    listStr.push('<label><input type="checkbox" month="' + i + '" value="' + i + '" >' + i + '月</label>');
    //$('<label><input type="checkbox" month="'+i+'" value="'+i+'" >'+i+'月</label>').appendTo($container);//这种会反复操作DOM，大家都知道这个的开销可是不小的
}
$("#selMonth").html(listStr.join(""));

//还可以这样写
for (var i = 1; i <= 12; i++) {
    listStr[listStr.length] = '<label><input type="checkbox" month="' + i + '" value="' + i + '" >' + i + '月</label>';//listStr[listStr.length] 稍快于 push,后面的字符串拼接 + 都可以改成依次加到数组中，而不用 用加好来连接，加号连接字符串慢于直接放到数组中，所以这个代码还可以改进
}
$("#selMonth").html(listStr.join(""));

  

//数组集合的遍历，避免多次取其长度，缓存Len是最基本的手段  如果看过JQ源码的朋友的，对这个是再熟悉不过的了，里面基本上都是for(;xxx<length;xxx++)这种代码
var divs = $('#contener').find('div');//$('#contener div') bad
for (var i = 0; i < divs.length; i++) {//divs.length is bad
    //Do something
}
//缓存 length
for (var i = 0, len = divs.length; i < len; i++) { 
    //Do something
}
//或者
var divs = $('#contener').find('div'), i = 0, len = divs.length;
for (; i < len; i++) {
    //Do something 
}

 

 

//类型转换的几种写法，我所用到的
var str = '08,', str1 = 'sss08',
    n = parseInt(str),//-->8
    n1 = parseInt(str, 10),//-->8
    n2 = parseInt(str1),//-->NaN
    n3 = parseInt(str1, 10),//-->NaN
    //性能上 parseInt(str)，慢于 parseInt(str,10) 慢于 str - 0和str | 0 
    n4 = str | 0, //-->8
    n5 = str1 | 0,//-->0//几十转换不成功也是0 不会是NaN，这个需要注意
    n4 = str - 0,//-->8
    n5 = str1 - 0;//-->NaN
//测试代码，大家可以copy到Chrome控制台运行一下便知结果, 1e5=100000
var s = new Date(), times = 1e5; 
for (var i = 0; i < times; i++) {
    var num = parseInt(str);
}
console.log(new Date() - s);
s = new Date();
for (var i = 0; i < times; i++) {
    var num = parseInt(str, 10);
}
console.log(new Date() - s);
s = new Date();
for (var i = 0; i < times; i++) {
    var num = parseInt(str1);
}
console.log(new Date() - s);
s = new Date();
for (var i = 0; i < times; i++) {
    var num = parseInt(str1,10);
}
console.log(new Date() - s);
s = new Date();
for (var i = 0; i < times; i++) {
    var num = str|0;
}
console.log(new Date() - s);
s = new Date();
for (var i = 0; i < times; i++) {
    var num = str1 | 0;
}
console.log(new Date() - s);
s = new Date();
for (var i = 0; i < times; i++) {
    var num = str -0;
}
console.log(new Date() - s);
s = new Date();
for (var i = 0; i < times; i++) {
    var num = str1-0;
}
console.log(new Date() - s);
s = new Date();

//250
//265
//265
//265
//250
//234
//265
//250  
//-----
//280
//266
//280
//266
//265
//249
//281
//250

 

 if else 的嵌套，不要过多，一般使用两种手段来较少if else的嵌套

看以下代码，if else嵌套还不算多

if (xxx) {
    //do something
    if (xxx) {
        //do something
    } else {
        //do something
    }
} else {
    if (xxx) {
        //do something
    }
}

按实际情况大概可以做以下优化

1、如果是做相关判断，有返回值可以这样.

 if (xxx) {
    //do something
    return xxx;
}
if (xxx) {
    //do something
    return xxx;
}
if (xxx) {
    //do something
    return xxx;
}   

如果没有返回值，可以抽取方法，把一些分支条件抽出去，以减少 if else 嵌套层数

if (xxx) {
    //Call methods
} else {
    //Call methods
}

还可以用数组，集合的方式来优化，例如：把1234567转换为星期一二三四五六七

可以这样定义一个对象或者数组直接通过下标去取，而不用大量的if else,这种方式JQ源码中也到处可见。

            var week = {
                "1": "星期一",
                "2": "星期二",
                "3": "星期三",
                "4": "星期四",
                "5": "星期五",
                "6": "星期六",
                "7": "星期七",
            };

var week = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期七"];

 

我感觉我常用的就这些，当让还有其他一些设计模式，高级技巧的，太多了，我就不一一列出。我贴一些好博客的地址大家可以去看看,我基本都看过几遍，有空就看看，然后总结下，看自己哪里做得不够好。

JavaScript同样的意思，更巧的写法http://www.cnblogs.com/lranye/archive/2013/06/08/3127013.html

Javascript 风格向导 http://www.cnblogs.com/baochuan/archive/2013/04/21/3033440.html

Javascript小技巧一箩筐 http://www.kuqin.com/webpagedesign/20070915/1095.html

30个提高Web程序执行效率的好经验:http://www.kuqin.com/web/20121103/333226.html
JavaScript应用技巧集合 http://www.cnblogs.com/sanshi/archive/2009/08/30/1556677.html

高效jQuery的奥秘 http://www.cnblogs.com/yanhaijing/p/3458234.html
【Javascript设计模式】 http://www.alloyteam.com/?s=%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F

JavaScript绝句的小研究http://www.cnblogs.com/fengyuqing/p/javascript_skill_sduty.html

深入理解JavaScript系列http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html

jQuery性能优化:http://www.cnblogs.com/yxlblogs/archive/2013/06/08/3125547.html
jQuery 2.0.3 源码分析  http://www.cnblogs.com/aaronjs/category/511281.html

 JavaScript思维导图http://www.cnblogs.com/twobin/category/523398.html