javascript常用程式碼段蒐集_javascript技巧

1.json轉字串

複製程式碼 程式碼如下:

function json2str(o) {
    var arr = [];
    var fmt = function (s) {
        if (typeof s == 'object' && s != null) return json2str(s);
        return /^(string|number)$/.test(typeof s) ? "'" s "'" : s;
    };
    for (var i in o) arr.push("'" i "':" fmt(o[i]));
    return '{' arr.join(',') '}';
}

2.時間戳轉為Date

複製程式碼 程式碼如下:

function fromUnixTime(timeStamp) {
    if (!timeStamp || timeStamp     var theDate = new Date(parseInt(timeStamp) * 1000);
    return theDate;
}

3.Data-format

複製程式碼 程式碼如下:

// 作者: meizz 
// 對Date的擴展，將 Date 轉換為指定格式的String  
// 月(M)、日(d)、小時(h)、分(m)、秒(s)、季度(q) 可用 1-2 個佔位符，  
// 年(y)可以用 1-4 個佔位符，毫秒(S)只能用 1 個佔位符(是 1-3 位的數字)  
// 例：  
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2012-12-02 08:12:04.423  
// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2012-12-02 8:12:4.18  
Date.prototype.Format = function(fmt) { 
    var o = {
        "M ": this.getMonth() 1,                 //月份  
        "d ": this.getDate(),                    //日  
        "h ": this.getHours(),                   //小時  
        "m ": this.getMinutes(),                 //分  
        "s ": this.getSeconds(),                 //秒  
        "q ": Math.floor((this.getMonth() 3) / 3), //季度  
        "S": this.getMilliseconds()             //毫秒  
    };
    if (/(y )/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" k ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" o[k]).substr(("" o[k]). length)));
    return fmt;
};

4.日期上增加n天

複製程式碼 程式碼如下:

function addDay(number) {
        return fromUnixTime(new Date().getTime() / 1000 24 * 60 * 60 * number);
}

5. 使用 iframe 時，父窗體與子窗體之間的相互呼叫

複製程式碼 程式碼如下:

// 父窗體呼叫子窗體內的函數 
window.frames['ifm_id'].valueChange("id_101"); 
// 子窗體呼叫父窗體的函數 
parent.refreshTree("nodeId_202"); 

6. 彈出視窗與回傳值

複製程式碼 程式碼如下:

// 彈出視窗 
var url = "http://www.baidu.com"; 
win=window.showModalDialog(url,window,"dialogLeft:400;dialogTop:200;dialogWidth:560px;dialogHeight:380px;scroll:yes;menubar:no;toolbar:no;status:no;"); // 在彈出視窗中設定回傳值 
var result = new Array(); 
result[0] = "id_101"; 
result[1] = "name_202"; 
window.returnValue = result; 
window.close(); 

7. javascript 作用域[只有全域作用域和函數作用域,javascript沒有區塊作用域]

複製程式碼 程式碼如下:

// 1. 全域作用域 
var id = "global variable";    // 1.1 在函數外部定義的變數 
function showMsg(){     
    message = "global message";// 1.2 未定義而直接賦值的變數 
                               //    造成初次使用時被定義為全域變數 } 
// 2. 函數作用域 
function doCheck(){ 
    var data = "function data";// 2.1 在函數內部定義的變數 
} 

8. javascript 繼承機制

複製程式碼 程式碼如下:

// 1. 物件冒充繼承 
function Person(strName){ 
    // private fields 
    var name = strName; 
    // public methods 
    this.getName = function(){ 
        return name; 
    };     
} 
function Student(strName,strSchool){ 
    // 定義父類別的屬性及方法     
    this.parent = Person; 
    this.parent(strName); 
    delete this.parent;        // 刪除暫時變數 parent 
    // 定義新屬性及方法     
    // private fields 
    var school = strSchool; 
    // public methods 
    this.getSchool = function(){ 
        return school; 
    };      
} 
// 2. Funtion 物件的 call(..) 或 apply(..) 繼承 
//    call 與 apply 的差別在於： 
//      call  的第二個參數為變動參數; 
//      apply 的第二個參數為 Array; 
function Animal(strName,intAge){ 
    // private fields 
    var name = strName; 
    var age = intAge; 
    // public methods 
    this.getName = function(){ 
        return name; 
    };  
    this.getAge = function(){ 
        return age; 
    }; 
} 
function Cat(strName,intAge,strColor){ 
    // 定義父類別的屬性及方法     
    Animal.call(this,strName,intAge); 
    // Animal.apply(this,new Array(strName,intAge)); 
    // 定義新屬性及方法     
    // private fields 
    var color = strColor; 
    // public methods 
    this.getInfo = function(){ 
        return "name:" this.getName() "n" 
             "age:" this.getAge() "n" 
             "color:" color; 
    }; 
} 
// 3. prototype 繼承 
//    prototype 宣告的屬性及方法被所有物件分享 
//    prototype 只有在讀取屬性的時候會用到 
Function.prototype.extend = function(superClass){ 
    // 此處的 F 是為了避免子類別存取父類別中的屬性 this.xxx 
    function F(){}; 
    F.prototype = superClass.prototype; 
    // 父類別建構子 
    this.superConstructor = superClass; 
    this.superClass = superClass.prototype; 
    this.prototype = new F(); 
    this.prototype.constructor = this; 
}; 
Function.prototype.mixin = function(props){     
    for (var p in props){         
        this.prototype[p] = props[p];         
    } 
}; 
function Box(){} 
Box.prototype = {     
    getText : function(){ 
        return this.text; 
    }, 
    setText : function(text){ 
        this.text = text; 
    } 
}; 
function CheckBox(){} 
CheckBox.extend(Box); 
CheckBox.mixin({ 
    isChecked : function(){ 
        return this.checked; 
    }, 
    setChecked : function(checked){ 
        this.checked = checked; 
    } 
}); 

9. call , apply & bind

複製程式碼 程式碼如下:

// thisArg 表示在 fun 內部時 this 所指示的對象 
// call & apply 將立即執行 fun 並傳回結果 
var result = fun.call(thisArg,arg1,...); 
var result = fun.apply(thisArg,[argsArray]); 
// thisArg 表示在 fun 內部時 this 所指示的對象 
// bind 回傳的是一個匿名函數 
var tmpfun = fun.bind(thisArg); 
var result = tmpfun(arg1,...); 

複製程式碼 程式碼如下:

 

10. js "==" Operator

複製程式碼 程式碼如下:

轉換規則 
   如果一個運算元是 Boolean 值，則比較之前將其轉成數字：false -> 0, true -> 1; 
   如果一個運算元是數字，另一個運算元是字串，則比較之前將字串轉成數字; 
   如果一個運算元是對象，另一個運算元是數字或字串，則比較之前會將物件轉為基本型， 
       引擎會先嘗試呼叫 valueOf(),如果 valueOf() 沒有 override 或回傳一個對象， 
       則引擎會嘗試呼叫 toString(),如果 toString() 沒有 override 或回傳一個物件,則拋出例外; 
   如果是兩個物件進行比較，則判斷它們是否引用同一物件; 
   如果一個運算元是 NaN, == 會回傳 false, != 會回傳 true; 
   null 和 undefined 與其它值比較將回傳 false, 
       但 null == null, undefined == undefined, null == undefined; 
   參與比較時 null 和 undefined 不能轉為其它值;