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