JavaScript經常使用腳本集錦8

圖片預加載

// 更新：
// 05.27: 一、保證回調執行順序：error > ready > load；二、回調函數this指向img自己
// 04-02: 一、增長圖片徹底加載後的回調 二、提升性能

/**
 * 圖片頭數據加載就緒事件 - 更快獲取圖片尺寸
 * @version 2011.05.27
 * @author  TangBin（PS:我不是做者，我只是代碼的搬運工）
 * @see     http://www.planeart.cn/?p=1121
 * @param   {String}    圖片路徑
 * @param   {Function}  尺寸就緒
 * @param   {Function}  加載完畢 (可選)
 * @param   {Function}  加載錯誤 (可選)
 * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
        alert('size ready: width=' + this.width + '; height=' + this.height);
    });
 */
var imgReady = (function () {
  /*list用來存放onready的函數隊列,intervalID用來存放定時器的引用*/
    var list = [], intervalId = null,

    // 用來執行隊列
    tick = function () {
        var i = 0;
        for (; i < list.length; i++) {
          /*end用來表示onready函數是否執行完必，splice用來刪除隊列中的項目*/
            list[i].end ? list.splice(i--, 1) : list[i]();
        };
        //隊列所有執行完成後的清除工做。
        !list.length && stop();
    },

    // 中止全部定時器隊列,釋放內存中的引用
    stop = function () {
        clearInterval(intervalId);
        intervalId = null;
    };
  /**
  * 閉包
  * @param:url  圖片的路徑
  * @param:ready 圖片尺寸就緒的回調函數
  * @param: load 圖片加載完畢的回調函數
  * @param: err 圖片加載出錯的回調函數
  *
  */
    return function (url, ready, load, error) {
        var onready, width, height, newWidth, newHeight,
              img = new Image();

        img.src = url;

        // 若是圖片被緩存，則直接返回緩存數據
        if (img.complete) {
            ready.call(img);
            load && load.call(img);
            return;
        };

        width = img.width;
        height = img.height;

        // 加載錯誤後的事件
        img.onerror = function () {
            error && error.call(img);
            onready.end = true;
            img = img.onload = img.onerror = null;
        };

        // 圖片尺寸就緒
        onready = function () {
            newWidth = img.width;
            newHeight = img.height;
            if (newWidth !== width || newHeight !== height ||
                // 若是圖片已經在其餘地方加載可以使用面積檢測
                newWidth * newHeight > 1024
            ) {
                ready.call(img);
                onready.end = true;
            };
        };
        onready();

        // 徹底加載完畢的事件
        img.onload = function () {
            // onload在定時器時間差範圍內可能比onready快
            // 這裏進行檢查並保證onready優先執行
            !onready.end && onready();

            load && load.call(img);

            // IE gif動畫會循環執行onload，置空onload便可
            img = img.onload = img.onerror = null;
        };

        // 加入隊列中按期執行
        if (!onready.end) {
            list.push(onready);
            // 不管什麼時候只容許出現一個定時器，減小瀏覽器性能損耗
            if (intervalId === null) intervalId = setInterval(tick, 40);
        };
    };
})();

代碼來源：https://gist.github.com/hehongwei44/5ab040cf3a8b27311d72

js高級截取字符串功能

/**
*
* @descrition: 對字符串進行截取，包括普通字符和中文字符
* @param : str ->待截取的字符串
* @param : len ->要截取的長度
* 
* 好比cutstr('hello',2)->he...  cutstr("您好呀",4)->您好...
* 優先選擇後臺進行字符串截取，後css截取，最後js截取
*/
var cutstr = function(str, len) {
        var temp,
            icount = 0,
            patrn = /[^\x00-\xff]/g,    //中文字符匹配
            strre = "";

        for (var k = 0; k < str.length; k++) {
            if (icount < len ) {
                temp = str.substr(k, 1);
                if (temp.match(patrn) == null) {
                    icount = icount + 1;
                } else {
                    icount = icount + 2;
                }
                strre += temp;
            } else {
                break
            }
        }
        return strre + "...";
    }

代碼來源：https://gist.github.com/hehongwei44/be3027aeb48ab978a039

對javascript中String類型的拓展

/**
*
* @desccrition: 對String類型去除空格的拓展
* @dir : 被去除空格所在的位置
* @test: ie6-9 chrome firefox
*/

String.prototype.trim = function(dir){
        switch (dir) {
            case 0 : //去左邊的空格
                return this.replace(/(^\s*)/g,'');
                break;
            case 1 : //去右邊的空格
                return this.replace(/(\s*$)/g,'');
                break;
            case 2 : //去掉全部的空格
                return this.replace(/(\s*)/g,'');
                break;
            default : //去掉兩邊的空格
                return this.replace(/(^\s*)|(\s*$)/g,'');
        }
}

代碼來源：https://gist.github.com/hehongwei44/3e167cfcda47d4c8051a

生成隨機字符串(數字+字母),長度自定義

/**
* @function:generateRandomAlphaNum->生成隨機的字符串
* @param:len->生存隨機字符串的長度
* @tdd->IE6-9 chrome Firefox經過測試
* 
*/
function generateRandomAlphaNum(len) {
    var rdmString = "";
    //toSting接受的參數表示進制，默認爲10進制。36進製爲0-9 a-z
    for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
    return rdmString.substr(0, len);
}

代碼來源：https://gist.github.com/hehongwei44/62d64830afa07ddac65f

js經過a標籤解析url

/*
* @function: 經過a標籤解析url標籤
* @param:url  url參數是字符串，解析的目標
  經過IE6-9 chrome  Firefox測試
*
*/

function parseURL(url) {
    //建立一個a標籤
    var a =  document.createElement('a');
    //將url賦值給標籤的href屬性。
    a.href = url;
    return {
        source: url,
        protocol: a.protocol.replace(':',''), //協議
        host: a.hostname,   //主機名稱
        port: a.port,   //端口
        query: a.search,  //查詢字符串
        params: (function(){  //查詢參數
            var ret = {},
                    seg = a.search.replace(/^\?/,'').split('&'),
                    len = seg.length, i = 0, s;
            for (;i<len;i++) {
                if (!seg[i]) { continue; }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            return ret;
        })(),
        file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1], //文件名
        hash: a.hash.replace('#',''), //哈希參數
        path: a.pathname.replace(/^([^\/])/,'/$1'), //路徑
        relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],  //相對路徑
        segments: a.pathname.replace(/^\//,'').split('/') //路徑片斷
    };
}

代碼來源：https://gist.github.com/hehongwei44/46d68bcb75df8cd0495b