这篇文章是在网上看到的，感觉对自己提升js有一定的帮助。
对js学会初级应用之后，感觉又跟php似的进入了一种瓶颈，不知道要干什么。
通习此篇博文，估计对自己的代码优化有帮助。。
原文：JS代码的简单重构与优化（适合新手）
看了这篇博文之后，我对之前写的一个localstorage函数做了优化
原code：调用方法为Data.add(key,value)形式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| var Data = {
add: function (key, value) {
localStorage.setItem(key, value);
},
get: function (key) {
return localStorage.getItem(key);
},
del:function(key){
localStorage.removeItem(key);
},
clear:function(){
localStorage.clear();
}
};
|
后来看了这个和受到了jq里的ajax函数的茶毒，改成了以下code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| function Storage(options){
options = options || {};
options.type = options.type || null;
var params = options.data;
if(window.localStorage && options.type != null){
if(options.type=="add")
localStorage.setItem(params.key,params.value);
else if(options.type=="get")
localStorage.getItem(params.key);
else if(options.type=="del")
localStorage.removeItem(params.key);
else if(options.type=="clear")
localStorage.clear();
}
}
|
调用方式改成了
1
2
3
4
5
6
7
| Storage({
type:"add",
data:{
key:"test",
value:"test value"
}
});
|
例子1
1
2
3
4
5
6
7
8
|
if (age > 20) {
return true;
} else {
return false;
}
return age > 20;
|
例子2
将数组的长度进行存储，循环时就不用每次去读取一次数组长度，从而提升性能
1
2
3
4
5
6
7
8
|
for (var i = 0; i < arr.length; i++) {
}
for (var i = 0, len = arr.length; i < len; i++) {
}
|
例子3
js中所有 非空字符 作布尔运算时，都会返回 true，反之返回 false。 （空格 属于非空字符）
js中所有 非零 数字作布尔运算时，都会返回 true， 反之返回 false。
1
2
3
4
5
6
7
8
9
|
if (value !== "") {
}
if (value) {
}
|
例子4:
多层条件嵌套，进行 转换 或 拆分。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
if (user.id === 10) {
if (user.name !== "") {
if (user.email === "email") {
}
}
}
if(user.id === 10 && user.name !=="" && user.email === "email") {
}
if (user.id !== 10) return;
if (user.name === "") return;
if (user.email !== "email") return;
|
例子5
多个变量的定义，写一个 var 即可，遵循的原则：被赋值的在前面，只是进行声明放后面（d 在最后）
1
2
3
4
5
6
7
8
9
10
11
|
var a = "aa";
var b = "bb";
var c = "cc";
var d;
var a = "aa",
b = "bb",
c = "cc",
d ;
|
例子6
尽可能的减少DOM操作，将DOM操作放在循环体之外，数据处理好后，只执行一次DOM操作即可。
1
2
3
4
5
6
7
8
9
10
|
for (var i = 0; i < 100; i++){
str += str;
document.getElementById("box").innerHtml = str;
}
for (var i = 0; i < 100; i++) {
str += str;
}
document.getElementById("box").innerHtml = str;
|
例子7
当第一个条件为 false 时，执行后面的语句。因为空字符串作布尔运算是返回 false的，所以可以这样用。
1
2
3
4
5
6
7
8
9
10
|
if (value === "") {
value = "similar";
}
if(!value) {
value = "similar";
}
value = value || "similar";
|
例子8
两个方法实现同样的功能，但第二个优雅得多，性能上也比第一个要好。当对字符串进行循环操作，如：查找、替换。 首先考虑的应该是使用 正则，不应该是循环遍历。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
function stringFormat(str) {
var strArr = str.split(''),
len = strArr.length,
i = 0;
for (; i < len; i++) {
if(/^[A-Z]$/.test(strArr[i])) {
strArr[i] = "-" + strArr[i].toLowerCase();
}
}
return strArr.join('');
}
function stringFormat(str) {
return (str.replace(/([a-z])(A-Z)/g, "$1-$2")).toLowerCase();
}
|
例子9
当一个方法接收的参数过多的时候，可以考虑将其封装成一个json对象， 这样简单得多。
1
2
3
4
5
6
7
8
|
function regist(userName, userPwd, userEmail, userPhone) {
}
function regist(user) {
}
|
