JavaScript常用腳本集錦8

blankyao 發(fā)布于2019-08-21 10:24 / 2839人閱讀

摘要：進(jìn)制為代碼來源通過標(biāo)簽解析通過標(biāo)簽解析標(biāo)簽參數(shù)是字符串，解析的目標(biāo)通過測試創(chuàng)建一個標(biāo)簽將賦值給標(biāo)簽的屬性。協(xié)議主機(jī)名稱端口查詢字符串查詢參數(shù)文件名哈希參數(shù)路徑相對路徑路徑片段代碼來源

圖片預(yù)加載

// 更新：
// 05.27: 1、保證回調(diào)執(zhí)行順序：error > ready > load；2、回調(diào)函數(shù)this指向img本身
// 04-02: 1、增加圖片完全加載后的回調(diào) 2、提高性能

/**
 * 圖片頭數(shù)據(jù)加載就緒事件 - 更快獲取圖片尺寸
 * @version 2011.05.27
 * @author  TangBin（PS:我不是作者，我只是代碼的搬運(yùn)工）
 * @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的函數(shù)隊(duì)列,intervalID用來存放定時(shí)器的引用*/
    var list = [], intervalId = null,

    // 用來執(zhí)行隊(duì)列
    tick = function () {
        var i = 0;
        for (; i < list.length; i++) {
          /*end用來表示onready函數(shù)是否執(zhí)行完必，splice用來刪除隊(duì)列中的項(xiàng)目*/
            list[i].end ? list.splice(i--, 1) : list[i]();
        };
        //隊(duì)列全部執(zhí)行完成后的清除工作。
        !list.length && stop();
    },

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

        img.src = url;

        // 如果圖片被緩存，則直接返回緩存數(shù)據(jù)
        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 ||
                // 如果圖片已經(jīng)在其他地方加載可使用面積檢測
                newWidth * newHeight > 1024
            ) {
                ready.call(img);
                onready.end = true;
            };
        };
        onready();

        // 完全加載完畢的事件
        img.onload = function () {
            // onload在定時(shí)器時(shí)間差范圍內(nèi)可能比onready快
            // 這里進(jìn)行檢查并保證onready優(yōu)先執(zhí)行
            !onready.end && onready();

            load && load.call(img);

            // IE gif動畫會循環(huán)執(zhí)行onload，置空onload即可
            img = img.onload = img.onerror = null;
        };

        // 加入隊(duì)列中定期執(zhí)行
        if (!onready.end) {
            list.push(onready);
            // 無論何時(shí)只允許出現(xiàn)一個定時(shí)器，減少瀏覽器性能損耗
            if (intervalId === null) intervalId = setInterval(tick, 40);
        };
    };
})();

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

js高級截取字符串功能

/**
*
* @descrition: 對字符串進(jìn)行截取，包括普通字符和中文字符
* @param : str ->待截取的字符串
* @param : len ->要截取的長度
* 
* 比如cutstr("hello",2)->he...  cutstr("您好呀",4)->您好...
* 優(yōu)先選擇后臺進(jìn)行字符串截取，后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

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

/**
* @function:generateRandomAlphaNum->生成隨機(jī)的字符串
* @param:len->生存隨機(jī)字符串的長度
* @tdd->IE6-9 chrome Firefox通過測試
* 
*/
function generateRandomAlphaNum(len) {
    var rdmString = "";
    //toSting接受的參數(shù)表示進(jìn)制，默認(rèn)為10進(jìn)制。36進(jìn)制為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標(biāo)簽解析url

/*
* @function: 通過a標(biāo)簽解析url標(biāo)簽
* @param:url  url參數(shù)是字符串，解析的目標(biāo)
  通過IE6-9 chrome  Firefox測試
*
*/

function parseURL(url) {
    //創(chuàng)建一個a標(biāo)簽
    var a =  document.createElement("a");
    //將url賦值給標(biāo)簽的href屬性。
    a.href = url;
    return {
        source: url,
        protocol: a.protocol.replace(":",""), //協(xié)議
        host: a.hostname,   //主機(jī)名稱
        port: a.port,   //端口
        query: a.search,  //查詢字符串
        params: (function(){  //查詢參數(shù)
            var ret = {},
                    seg = a.search.replace(/^?/,"").split("&"),
                    len = seg.length, i = 0, s;
            for (;i

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