讓你的javascript代碼高大上

1，創造簡短的寫法

你可以這么寫：

var slice = Array.prototype.slice;
slice.call(arguments); //轉化成數組

也可以這么寫：(ie9+)

var unboundSlice = Array.prototype.slice; 
var slice = Function.prototype.call.bind(unboundSlice);
slice(arguments);//轉化成數組

還可以這么寫：

(function(slice){
      slice();   //可以直接調用該方法
})(Array.prototype.slice);

 

2,原型方法擴展：

你可以這么寫：

function   A(){};
A.prototype.fn1=function(){};
A.prototype.fn2=function(){};

也可以這么寫：

 function A(){};
 A.prototype={
    constructor:A,
    fn1:function(){},
    fn2:function(){}
 };

還可以這么寫：

function A(){};
$.extend(A.prototype,{
    fn1:function(){},
    fn2:function(0{}
});

 

3，返回一個由數組拼合成的字符串

你可以這么寫：

function A(){
    var a=[];
    
    a.push("str1"); 
    a.push("str2");
    a.push("str3"); 

    return a.join("");
};

也可以這么寫：

function A(){
    return [
        "str1",
        "str2",
        "str3"
       ].join("");
};

 

4,逗號表達式

你可以這么寫：

var   a;
var   b;
var   c;

也可以這么寫：

1 var  a,b,c;

 

5,巧用&&

你可以這么寫：

1 if(a){
2  b();  
3 };//如果a為真，則執行函數b

也可以這么寫：

1 a && b();

 

6,巧用||

你可以這么寫：

if(!a){
  c();  
};//如果a為假，則執行函數c

也可以這么寫：

!a || c();

 

7,巧用三元表達式

你可以這么寫：

if(a){
  b();  
}else{
   c();
}//如果a為真，則執行函數b,否則執行函數c;

也可以這么寫：

a ? b():c();

 

8,同一個對象上綁定多個事件

你可以這么寫：

1 $(obj).click(function (){});
2 $(obj).focus(function (){});
3 $(obj).blur(function (){});

也可以這么寫：

$(obj).bind({
    click:function(){},
    foucus:function(){},
    blur:function:(){}
});

 

9,緩存對象屬性，防止每次都去讀取屬性

你可以這么寫：

for(var i =0 ;i < obj.length; i++){};

也可以這么寫：

for(var i=0, len=obj.length;  i < len; i++){};

 10,數組拼合

你可以這么寫：

var a=[1,2,3];
var b=[4,5,6];
var a=a.concat(b);//a=[1,2,3,4,5,6]

也可以這么寫：

var a=[1,2,3];
var b=[4,5,6];
a.push.apply(a,b);//a=[1,2,3,4,5,6]

 這個地方不能不call哦，apply的參數必須是數組，此處正是利用了這一點！

11，沒有庫時，應該做簡易的封裝

你可以這么寫：

var  dom1 = document.getElementById("id1");
var  dom2 = document.getElementById("id2");

也可以這么寫：

function D(id){
   return document.getElementById(id);
}

var dom1=D("id1");
var dom2=D("id2");

 12,善於使用正則：

你可以這么寫：

if(document.readyState==="loaded" || document.readyState==="complete"){}

也可以這么寫：

if (/loaded|complete/.test(document.readyState)){}

13,利用js內部的自我轉換

你要將number和string轉換，可以這么做:

//number轉化成string
var num=123;
var str=num.toString(); //"123"

//string轉化成number
var str="123";
var num = parseInt(str,10);  //123

也可以這么寫：

//number轉化成string
var num=123;
var str=num+""; //"123"

//string轉化成number
var str="123";
var num = str-"";  //123

 14，使用原型進行批量復制：

你可以這么寫：

function f(x){
   x!=null && this.x=x;  
};
var a = [];
for(var i = 0; i<100; i++){
   a[i]=new f(10);     //把實例分別存入數組
};

也可以這么寫：

function f(x){
   x!=null && this.x=x;  
};
var a = [];
function temp = {};
temp.prototype=new f(10);
for(var i = 0; i<100; i++){
   a[i]=new temp();     //把實例分別存入數組
};

假如你想修改數組的值，只需要修改類f的原型即可。

 

開心一刻：