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
//-----
//
//
//
//
//
//
//
//
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 = {
"": "星期一",
"": "星期二",
"": "星期三",
"": "星期四",
"": "星期五",
"": "星期六",
"": "星期七",
};
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