Fork me on GitHub

JavaScript自备常用开发库

之前的代码有些错误,现在进行的更正

 一些组件方法,最好不要去动js的原生对象的原型 

在实际的开发过程中,javascript原生对象的方法不能满足我们的需求,我们需要自己封装一些方法,以方便我们开发,提高开发效率,避免大量的重复代码。一些参考来至互联网以下是常用的,我把代码贴出来。 

var utils = window.utils || {};
utils.str = utils.str || {};
utils.arr = utils.arr || {};
/**   
* 对Date的扩展,将 Date 转化为指定格式的String   
* 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符   
* 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)   
* eg:   
* utils.str.pattern(new Date(),"yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423   
* utils.str.pattern(new Date(),"yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04   
* utils.str.pattern(new Date(),"yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04   
* utils.str.pattern(new Date(),"yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04   
* utils.str.pattern(new Date(),"yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18   
*/

utils.str.patternTime = function (str, fmt) {
    var o = {
        "M+": str.getMonth() + 1, //月份     
        "d+": str.getDate(), //
        "h+": str.getHours() % 12 === 0 ? 12 : str.getHours() % 12, //小时     
        "H+": str.getHours(), //小时     
        "m+": str.getMinutes(), //
        "s+": str.getSeconds(), //
        "q+": Math.floor((str.getMonth() + 3) / 3), //季度     
        "S": str.getMilliseconds() //毫秒     
    },
        week = {
            "0": "\u65e5",
            "1": "\u4e00",
            "2": "\u4e8c",
            "3": "\u4e09",
            "4": "\u56db",
            "5": "\u4e94",
            "6": "\u516d"
        };
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (str.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    if (/(E+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "\u661f\u671f" : "\u5468") : "") + week[str.getDay() + ""]);
    }
    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;
};
utils.str.toDateTime = function (str, dateformat) {
    var date = new Date(parseInt(str.replace("/Date(", "").replace(")/", ""), 10));
    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1,
        currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(),
        hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
        minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
        seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

    if (dateformat == "yyyy-mm-dd") {
        return date.getFullYear() + "-" + month + "-" + currentDate;
    }
    return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
};
utils.str.htmlEncode = function (str) {
    return str.replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        //s = s.replace(/ /g, "&nbsp;");
        .replace(/'/g, "&apos;")
        .replace(/\"/g, "&quot;")
        .replace(/\\/g, "&#92;");
};
utils.str.htmlDecode = function (str) {
    return str.replace(/&amp;/g, "&")
         .replace(/&lt;/g, "<")
         .replace(/&gt;/g, ">")
    //s = s.replace(/&nbsp;/g, " ");
        .replace(/&#39;/g, "\'")
        .replace(/&quot;/g, "\"")
        .replace(/&#92;/g, '\\');
};
utils.str.cutStrings = function (str, length, hasEllipsis) {
    var newStr;
    if (str.length <= length)
        newStr = str;
    else
        newStr = str.substr(0, length);
    if (hasEllipsis) {
        newStr += "...";
    }
    return newStr;
};
utils.str.trim = function (val) {
    var str = this && this.toString();
    if (!val) {
        return str == '' ? str : str.replace(/(^\s*)/g, '').replace(/(\s*$)/g, '');
    }
    var s = new RegExp('^' + val + '*', 'g'), e = new RegExp(val + '*$', 'g');
    return str == '' ? str : str.replace(s, '').replace(e, '');
};
utils.str.ParseFloatAndToFixed = function (str, i) {
    return parseFloat(parseFloat(str).toFixed(i));
};
utils.str.isNullOrWhiteSpace = function (str) {
    // null、 ''、'   '、undefinded  →→return true
    return str == '' || str.trim() == '';
};
utils.str.startsWith = function (str, start, ignoreCase) { //start:欲判断字符, ignoreCase:是否忽略大小写
    if (str.isNullOrWhiteSpace()) {
        return false;
    }
    if (ignoreCase) {
        str = str.toLowerCase();
        start = start.toLowerCase();
    }
    return str.indexOf(start) == 0;
    //return s.isNullOrWhiteSpace() ? false : (ignoreCase && (s = s.toLowerCase(), start = start.toLowerCase()), s.substr(0, start.length) == start) ? true : false;
};
utils.str.endsWith = function (str, end, ignoreCase) { //end:欲判断字符, ignoreCase:是否忽略大小写
    if (str.isNullOrWhiteSpace()) {
        return false;
    }
    if (ignoreCase) {
        str = str.toLowerCase();
        end = end.toLowerCase();
    }
    if (str.substr(str.length - end.length) == end) { return true; }
    return false;
};
utils.str.contains = function (str, arg) {
    return !!~str.indexOf(arg);
};
utils.str.formatString = function () {
    for (var i = 1, len = arguments.length; i < len ; i++) {
        var exp = new RegExp('\\{' + (i - 1) + '\\}', 'gm');
        arguments[0] = arguments[0].replace(exp, arguments[i]);
    }
    return arguments[0];
};
//数据中是否包括指定对象
utils.arr.contain = function (arr, fun) {
    for (var item in arr) {
        if (fun.constructor == Function) {
            if (fun(item)) return true;
        }
    }
    return false;
};
utils.arr.get = function (arr, fun) {
    for (var i in arr) {
        if (fun.constructor == Function) {
            if (fun(this[i])) return this[i];
        }
    }
    return null;
};
utils.arr.del = function (arr, n) { //n表示第几项,从0开始算起。
    //prototype为对象原型,注意这里为对象增加自定义方法的方法。
    if (n > arr.length - 1) {
        return arr;
    } else {
        //return  n < 0 ? this : this.slice(0, n).concat(this.slice(n + 1, this.length)); 
        var r = n < 0 ? arr : arr.splice(n, 1);//splice 先删除一段,再添加一段元素splice(开始,长度)  ,替换;//xj 
        return arr;
    }
    /*
   concat方法:返回一个新数组,这个新数组是由两个或更多数组组合而成的。
         这里就是返回this.slice(0,n)/this.slice(n+1,this.length)
         组成的新数组,这中间,刚好少了第n项。
   slice方法: 返回一个数组的一段,两个参数,分别指定开始和结束的位置。
  */
};
utils.arr.removeByValue = function (arr, val) {
    if (!val) {
        return arr;
    }
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] == val) {
            return arr.del(i);
        }
    }
    return arr;
};
utils.arr.indexOf = function (arr, item, strict) { //strict:是否严格相等(===)
    var index = -1,
        length = arr.length;
    strict = strict ? true : false,
    i = 0;
    if (strict) {
        for (; i < length; i++) {
            if (arr[i] === item) {
                index = i;
                break;
            }
        }
    } else {
        for (i = 0; i < length; i++) {
            if (arr[i] == item) {
                index = i;
                break;
            }
        }
    }
    return index;
};

 

utils.GetRandomUrl = function (url) { //为url添加随机数
    url = url || window.location.href;
    return ~url.indexOf("?") ? url + "&r=" + Math.random() : url + "?r=" + Math.random();
},
utils.Open = function (url) {
    window.open(url);
};
utils.RedirectTo = function (url) { //跳转页面
    window.location.href = url;
    window.event ? window.event.returnValue = false : event.preventDefault(); //for firefox 
};
utils.Cookie = function (cookieName, cookieValue, options) {
    options = options || { path: '/' };
    return $.cookie(cookieName, cookieValue, options);
};
utils.GetUrlParam = function (name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null)
        return unescape(r[2]);
    return null;
};
//解决上一个获取中文参数 encodeURI 乱码
utils.GetUrlParam2 = function (paras) {
    var url = location.href,
        paraString = url.substring(url.indexOf("?") + 1, url.length).split("&"),
        paraObj = {},
        j;
    for (var i = 0; j = paraString[i]; i++) {
        paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
    }
    var returnValue = paraObj[paras.toLowerCase()];
    if (typeof (returnValue) == "undefined") {
        return "";
    } else {
        return returnValue;
    }
};
utils.SetUrlParam = function (name, value, url) {
    url = url ? url : window.location.href;
    var re = new RegExp("(^|&|\\?)" + name + "=([^&]*)(&|$)", "ig"),
        m = url.match(re);
    if (m) {
        return (url.replace(re, function ($0, $1, $2, $3) {
            if (value == undefined || value.isNullOrWhiteSpace()) {
                return $1 == '?' ? $1 : $3; //return ''; 20130910 xj 修正
            } else {
                return ($0.replace($2, value));
            }
        }));
    } else {
        if (value == undefined || value.toString().isNullOrWhiteSpace()) {
            return url;
        } else {
            if (url.indexOf('?') == -1)
                return (url + '?' + name + '=' + value);
            else
                return (url + '&' + name + '=' + value);
        }
    }
};
//设置标签获得焦点时键盘按下事件
utils.SetOnKeyUp = function (tag, opts) {
    opts = jQuery.extend({
        call: function () { return false; },
        params: -1
    }, opts || {});
    $(tag).on("focus", function () {
        this.keyup = function (e) {
            var keycode;
            if (navigator.appName == "Microsoft Internet Explorer") {
                keycode = event.keyCode;
            } else {
                keycode = e.which;
            }
            if (keycode == 13) {
                if (opts.params > 0)
                    opts.call(opts.params);
                else
                    opts.call();
            }
        };
    });
    $(tag).on("blur", function () {
        this.onkeyup = function () {
            return false;
        };
    });
};
utils.ClearForms = function (form) {
    var fr = form || 'body';
    $(':input', $(fr)).each(function () {
        var type = this.type,
            tag = this.tagName.toLowerCase();
        if (type == 'text' || type == 'password' || tag == 'textarea')
            this.value = "";
        else if (type == 'checkbox' || type == 'radio')
            this.checked = false;
        else if (tag == 'select')
            this.selectedIndex = -1;
    });
};
utils.LoadJs = function (path, callback) {
    callback = !(typeof (callback) == "undefined") ? callback : function () {
    };
    var oHead = document.getElementsByTagName('HEAD').item(0);
    var script = document.createElement("script");
    script.type = "text/javascript";
    if (script.readyState) { //IE
        script.onreadystatechange = function () {
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
                callback();
            }
        };
    } else { //Others: Firefox, Safari, Chrome, and Opera
        script.onload = function () {
            callback();
        };
    }
    script.src = path + ".js";
    oHead.appendChild(script);
};
utils.LoadCss = function (path) {
    if (!path) {
        throw new Error('argument "path" is required !');
    }
    var head = document.getElementsByTagName('head')[0];
    var links = document.createElement('link');
    links.href = path + ".css";
    links.rel = 'stylesheet';
    links.type = 'text/css';
    head.appendChild(links);
};
//元素操作相关
utils.HtmlUtils = ((function () {
    function getElementPosition(e) {
        var x = 0, y = 0;
        while (e != null) {
            x += e.offsetLeft | 0;
            y += e.offsetTop | 0;
            e = e.offsetParent;
        }
        return { x: x, y: y };
    }
    function getViewPortSize(w) {
        w = w || window;
        if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight };
        var d = w.document;
        if (document.compatMode == "CSS1Compat")
            return { w: d.documentElement.clientWidth, h: d.documentElement.clientHeight };
        return { w: d.body.clientWidth, h: d.body.clientHeight };
    }
    function getScrollOffsets(w) {
        w = w || window;
        if (w.pageXoffset != null) {
            return { x: w.pageXoffset, y: w.pageYoffset };
        }
        var d = w.document;
        if (document.compatMode == "CSS1Compat")
            return { x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop };
        return { x: d.body.scrollLeft, y: d.body.scrollTop };
    }
    function getMousePos(event) {
        var e = event || window.event,
            scroll = getScrollOffsets(),
            x = e.pageX || e.clientX + scroll.x,
            y = e.pageY || e.clientY + scroll.y;
        return { 'x': x, 'y': y };
    }
    function getRect(element) {
        var rect = element.getBoundingClientRect();
        if (typeof rect.width === 'undefined') {
            return {
                width: rect.right - rect.left,
                height: rect.bottom - rect.top,
                top: rect.top,
                bottom: rect.bottom,
                left: rect.left,
                right: rect.right
            };
        }
        return rect;
    }
    function getElementCenterPos(obj, cfg) {
        var $obj = $(obj);
        cfg = cfg || {};
        cfg.maxWidth = cfg.maxWidth || 900;
        cfg.maxHeight = cfg.maxHeight || 800;
        var ww = $obj.width(), //window width
                wh = $obj.height(),
                sch = $(window).height() | 0, //scree clientHeight
                scw = $(window).width() | 0,
                height = wh < sch - 20 && wh > cfg.maxWidth + 20 ? cfg.maxHeight : sch - 20,
                width = ww < scw - 20 && ww > cfg.maxHeight + 20 ? cfg.maxWidth : scw - 20;
        width = width >= cfg.maxWidth ? cfg.maxWidth : width;
        height = height >= cfg.maxHeight ? cfg.maxHeight : height;
        var left = width < scw - 20 ? (scw - width) / 2 : 10,
            top = height < sch - 20 ? (sch - height) / 2 : 10;
        return {
            width: width,
            height: height,
            left: left,
            top: top
        };
    }
    return {
        getElementPosition: getElementPosition,
        getViewPortSize: getViewPortSize,
        getScrollOffsets: getScrollOffsets,
        getMousePos: getMousePos,
        getRect: getRect,
        getElementCenterPos: getElementCenterPos
    };
})());

 

 对AJAX的封装 

平时做web开发,在项目中肯定会用到ajax技术,相信大多数人都是用的Jquery封装的     ajax,而不会自己去写原生。但是在实际开发中如果直接调用$.post 或者$.get也是有不妥之处,我们一般在做开发的时候多都会对Jquery的ajax做二次封装,代码如下 

//ajax
utils.Ajax = function (url, data, callback, cfg) {
    cfg = (cfg || {});
    cfg.hasOwnProperty("async") || (cfg.async = "true");
    cfg.hasOwnProperty("type") || (cfg.type = "post");
    cfg.hasOwnProperty("cache") || (cfg.cache = true);
    cfg.hasOwnProperty("dataType") || (cfg.dataType = "json");//预期服务器返回的数据类型  xml, json, script, or html
    //if (!cfg.hasOwnProperty("contentType")) cfg.contentType = "application/json; charset=utf-8";//发送信息至服务器时内容编码类型。默认值是"application/x-www-form-urlencoded; 
    //cfg.hasOwnProperty("headers") || (cfg.headers = {
    //    "contentType": "application/json; charset=utf-8",
    //    "token": WebJs.Utils.GetCookie('Token') || "token"
    //});
    //if (cfg.hasOwnProperty("crossDomain")) {
    //url = url + (~(url.indexOf("?") >) ? "&" : "?") + "jsonpCallback=?";
    // }
    if (!callback) {
        callback = function () {
        };
    }
    //如果extend存在,证明加载了easyui的,如果不就没有加载easyui 相应的代码就不应该执行
    var extend = WebJs.EasyUiExtend;
    //声明opts 方便调试
    var opts = {
        type: cfg.type,
        url: url,
        async: cfg.async,
        data: data,
        cache: cfg.cache,
        timeout: 6e4,//60000
        //headers: cfg.headers,
        dataType: cfg.dataType,
        //contentType: cfg.contentType,
        beforeSend: cfg.hasOwnProperty("before") ? cfg.before : function () { },
        success: function (result, textStatus, jqXHR) {
            /*if (!!result) {
                try {
                    if (!!result.Type && result.Type == "string") {
                        result = result.Str;
                    }
                } catch (e) {
                }
            }*/
            extend && extend.ajaxLoadEnd();
            if (textStatus == 'success') {
                //setHeader(jqXHR);
                callback(result, jqXHR);
            } else {
                alert('服务端错误');
            }
        },
        error: function (xmlHttpRequest, textStatus, errorThrow) {
            extend && extend.ajaxLoadEnd();
            extend && WebJs.Common.ShowErrors(xmlHttpRequest, textStatus, errorThrow);
        }
    };
    extend && extend.ajaxLoading();
    $.ajax(opts);
};
//内部调用WebJs.Ajax,这里统一处理返回结果的状态
utils.AjaxHandle = function (url, data, callback, cfg) {
    WebJs.Ajax(url, data, function (result, jqXHR) {
        (result && result.Success)
            ? callback(result, jqXHR)
            : WebJs.Dialog.Content(result.Message);
    }, cfg);
};

 上面有句代码var WebJs = window.WebJs = WebJs || {};  WebJs是一个全局对象,以下会对这个对象进行扩展,封装项目中常用的方法。 

只把代码贴上来,也许看着晕晕的,不知道为什么要对ajax做二次封装,感觉封装是多于的,其实不然,如果我们要做一些登录验证,后台返回统一格式的JSON数据,在统一封装的ajax里面就能够对返回的数据做一些处理,如果用户登录超时提示用户登录,就可以在这里实现,而不是每次在发起ajax请求之后做一下判断。

 对弹出框做封装 

以下代码是对ArtDialog(一个弹出框插件)的封装,以方便我们在项目中使用 

//ArtDialog对话框
WebJs.ArtDialog = {
    Tip: function (msg, cfg) {
        cfg || (cfg = {});
        //if (cfg.hasOwnProperty("type") == false) cfg.type = 'warn';
        cfg.hasOwnProperty("lock") || (cfg.fixed = false);
        cfg.hasOwnProperty("fixed") || (cfg.fixed = true);
        cfg.hasOwnProperty("time") || (cfg.time = 1500);
        cfg.hasOwnProperty("title") || (cfg.title = '提示');
        //cfg.content = '<div class="' + cfg.type + '"><img src="/content/image/icon/' + cfg.type + '.gif" class="tips_img">' + msg + "</div>";
        cfg.content = msg;
        return art.dialog(cfg);
    },
    Alert: function (msg, cfg) {
        cfg || (cfg = {});
        cfg.content = msg;
        cfg.hasOwnProperty("lock") || (cfg.lock = "true");
        cfg.hasOwnProperty("fixed") || (cfg.fixed = "true");
        cfg.hasOwnProperty("title") || (cfg.title = "友情提示:");
        return art.dialog(cfg);
    },
    Confirm: function (content, yes, no) {
        var cfg = {
            button: [{
                value: '确定',
                focus: true,
                callback: function () {
                    if (yes && typeof yes == 'function') {
                        yes();
                    }
                    return true;
                }
            }, {
                id: 'button-cancel',
                value: '取消',
                callback: function () {
                    if (no && typeof no == 'function') {
                        no();
                    }
                    return true;//return no&& typeof no == "function" && no(), true;
                }
            }]
        };
        cfg.content = content || 'load……';
        cfg.title = '友情提示';
        return art.dialog(cfg).lock();
    },
    Content: function (content, cfg) {
        cfg || (cfg = {});
        cfg.hasOwnProperty("lock") || (cfg.lock = "true");
        cfg.hasOwnProperty("fixed") || (cfg.fixed = "true");
        cfg.hasOwnProperty("title") || (cfg.title = "友情提示");
        return art.dialog(cfg).content(content);
    },
    Close: function (id) {
        if (id) {
            art.dialog.list(id).close();
        }
        else {
            var list = art.dialog.list;
            for (var i in list) {
                list[i].close();
            }
        }
    }
};

 以下代码是对EasyUi弹窗 的封装  

var WebJs = window.WebJs || WebJs || {};
//对话框 基于EasyUI
WebJs.Dialog = (function () {
    function handleCfg(cfg) {
        WebJs.Data.isOpen = true;//夹杂外部逻辑了
        cfg || (cfg = {});
        cfg.hasOwnProperty("title") || (cfg.title = 'Title' + (+new Date()));
        cfg.hasOwnProperty("modal") || (cfg.modal = true);
        cfg.hasOwnProperty("minimizable") || (cfg.minimizable = false);
        cfg.hasOwnProperty("maximizable") || (cfg.maximizable = true);
        cfg.hasOwnProperty("shadow") || (cfg.shadow = false);
        cfg.hasOwnProperty("cache") || (cfg.cache = false);
        cfg.inline = cfg.inline || true;
        cfg.closed = cfg.closed || false;
        cfg.collapsible = cfg.collapsible || true;
        cfg.resizable = cfg.resizable || true;
        cfg.height = cfg.height || 400;
        cfg.width = cfg.width || 680;
        //控制窗口大小, 当屏幕窗口较小的时候缩小窗口,否则设置为默认
        var wh = $(window).height(),
            ww = $(window).width(),
            height = cfg.height,//cfg.height < wh - 20 && wh > 420 ? 400 : wh - 20,
            width = cfg.width,//cfg.width < ww - 20 && ww > 700 ? 680 : ww - 20,
            left = width < ww - 20 ? (ww - width) / 2 : 10,
            top = height < wh - 20 ? (wh - height) / 2 : 10;
        cfg.height = height;
        cfg.width = width;
        cfg.left = cfg.left || left;
        cfg.top = cfg.top || top;
        return cfg;
    }
    var loadingMessage = '正在加载数据,请稍等片刻......';
    return {
        Tip: function (msg, cfg) {
            var opts = {
                title: '友情提示',
                msg: msg || 'No Msg',
                showType: 'fade',
                timeout: 1500,
                style: {
                    right: '',
                    bottom: ''
                },
                closable: false
            };
            cfg || (cfg = {});
            cfg.hasOwnProperty("title") && (opts.title = cfg.title);
            cfg.hasOwnProperty("width") && (opts.width = cfg.width);
            cfg.hasOwnProperty("timeout") && (opts.timeout = cfg.timeout);
            cfg.hasOwnProperty("showType") && (opts.showType = cfg.showType);
            $.messager.show(opts);
            return false;
        },
        //icon--error,question,info,warning
        //fn:当窗口关闭时触发的回调函数
        Alert: function (msg, icon, fn) {
            $.messager.alert("友情提示:", msg, icon || 'warning', fn);
        },
        //dialog
        AlertDialog: function (id, cfg) {
            var opts = {
                title: '提示框',
                width: 500,
                height: 400,
                cache: false,
                modal: true,
                maximizable: true,
                collapsible: true,
                resizable: true
            };
            cfg || (cfg = {});
            cfg.hasOwnProperty('title') && (opts.title = cfg.title);
            cfg.hasOwnProperty('width') && (opts.width = cfg.width);
            cfg.hasOwnProperty('height') && (opts.height = cfg.height);
            cfg.hasOwnProperty('href') && (opts.href = cfg.href);
            cfg.hasOwnProperty('toolbar') && (opts.toolbar = cfg.toolbar);
            cfg.hasOwnProperty('buttons') && (opts.buttons = cfg.buttons);
            $(id).dialog(opts);
        },
        Confirm: function (content, yes, no) {
            $.messager.confirm("友情提示:", content, function (r) {
                r ? yes() : (typeof no === 'function' && no());
            });
        },
        Content: function (content, cfg, id) {
            cfg = handleCfg(cfg);
            cfg.content = content;
            cfg.loadingMessage = loadingMessage;
            id = id || 'myWindow';
            var oldWindow = $('#' + id), dlg;
            if (oldWindow) {
                dlg = oldWindow;
            } else {
                dlg = $('<div id="' + id + '" class="easyui-window" closed="true"></div>');
                $('body').append(dlg);
            }
            dlg.window(cfg);
            dlg.window('open');
        },
        Open: function (url, cfg, id) {
            cfg = handleCfg(cfg);
            cfg.content = '<iframe scrolling="yes" frameborder="0" src="' + url + '" style="width:100%;height:98%"></iframe>';
            cfg.loadingMessage = loadingMessage;
            id || (id = 'myWindow');
            $('#' + id + '').window(cfg);
            var ieset = navigator.userAgent;
            if (~ieset.indexOf("MSIE 6.0") || ~ieset.indexOf("MSIE 7.0") || ~ieset.indexOf("MSIE 8.0") || ~ieset.indexOf("MSIE 9.0")) {
                setTimeout(function () { $('#' + id + '').window(cfg); }, 0);
            }
        },
        Close: function (id) {
            id || (id = 'myWindow');
            $('#' + id + '').window('close');
            WebJs.Data.isOpen = false;
        }
    };
})();

 关于弹出框插件有很多,这里推荐一个找查件的网址http://www.open-lib.com/   里面的插件进行了分类,很方便我们查找。

对弹出框做封装是进一步方便我们在项目中使用,方便以后更换提示弹框插件。这里其也是为了避免大量的重复代码,本人最见不得重复代码,遇到感觉是重复在写的代码,就会想办法去做封装,当然这个是建立在不牺牲较大性能之上的。 

 常用的验证方法 

 

utils.Regexp = {
    //email的判断
    Ismail: function (mail) {
        var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        return reg.test(mail);
        //  return (new RegExp(/^\w+((-\w+)|(\.\w+))*\-AT-[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(mail));
    },
    //验证身份证
    IsIdCardNo: function (num) {
        var factorArr = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1];
        var error,
            varArray = [],
            lngProduct = 0,
            intCheckDigit,
            intStrLen = num.length,
            idNumber = num;
        if ((intStrLen != 15) && (intStrLen != 18)) {
            return false;
        }
        for (var i = 0; i < intStrLen; i++) {
            varArray[i] = idNumber.charAt(i);
            if ((varArray[i] < '0' || varArray[i] > '9') && (i != 17)) {
                return false;
            } else if (i < 17) {
                varArray[i] = varArray[i] * factorArr[i];
            }
        }
        if (intStrLen == 18) {
            var date8 = idNumber.substring(6, 14);
            // ReSharper disable UseOfImplicitGlobalInFunctionScope
            if (checkDate(date8) == false) {
                // ReSharper restore UseOfImplicitGlobalInFunctionScope
                return false;
            }
            for (i = 0; i < 17; i++) {
                lngProduct = lngProduct + varArray[i];
            }
            intCheckDigit = 12 - lngProduct % 11;
            switch (intCheckDigit) {
                case 10:
                    intCheckDigit = 'X';
                    break;
                case 11:
                    intCheckDigit = 0;
                    break;
                case 12:
                    intCheckDigit = 1;
                    break;
            }
            if (varArray[17].toUpperCase() != intCheckDigit) {
                return false;
            }
        } else {
            var date6 = idNumber.substring(6, 12);
            // ReSharper disable UseOfImplicitGlobalInFunctionScope
            if (checkDate(date6) == false) {
                // ReSharper restore UseOfImplicitGlobalInFunctionScope
                return false;
            }
        }
        return true;
    },
    //校验密码:只能输入6-15个字母、数字
    IsPasswd: function (s) {
        var patrn = /^[a-zA-Z0-9]{6,15}$/;
        return patrn.exec(s);
    },
    //校验手机号码:必须以数字开头
    IsMobile: function (s) {
        //00852验证香港区号
        var patrn = /^(13[0-9]|15[012356789]|18[0236789]|14[57]|00852)[0-9]{8}$/;
        return patrn.test(s);
    },
    //1-16个中文
    IsChinese: function (s) {
        var patrn = /^[a-zA-Z\u4E00-\u9FA5]{2,16}$/;
        return !!patrn.exec(s);
    },
    //检查email邮箱
    IsEmail: function (str) {
        var reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
        //var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
        return reg.test(str);
    },
    //中英文数字下划线1-num个字符
    IsAccount: function (str, num) {
        var reg;
        if (num == 30)
            reg = /^[a-zA-Z0-9_\u4e00-\u9fa5]{1,30}$/;
        else if (num == 510)
            reg = /^[a-zA-Z0-9_\u4e00-\u9fa5]{1,510}$/;
        //var reg = /^[a-zA-Z0-9_]{6,16}$/;
        return reg.test(str);
    },
    //检查长度
    CheckLength: function checkLength(obj, maxlength) {
        if (obj.value.length > maxlength) {
            obj.value = obj.value.substring(0, maxlength);
        }
    },
    IsURL: function (strUrl) {
        var regular = /^\b(((https?|ftp):\/\/)?[-a-z0-9]+(\.[-a-z0-9]+)*\.(?:com|edu|gov|int|mil|net|org|biz|info|name|museum|asia|coop|aero|[a-z][a-z]|((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d))\b(\/[-a-z0-9_:\@&?=+,.!\/~%\$]*)?)$/i;
        return regular.test(strUrl);
    },
    //判断是否有列表中的危险字符
    IsValidReg: function (chars) {
        var re = /<|>|\[|\]|\{|\}|『|』|※|○|●|◎|§|△|▲|☆|★|◇|◆|□|▼|㊣|﹋|⊕|⊙|〒|ㄅ|ㄆ|ㄇ|ㄈ|ㄉ|ㄊ|ㄋ|ㄌ|ㄍ|ㄎ|ㄏ|ㄐ|ㄑ|ㄒ|ㄓ|ㄔ|ㄕ|ㄖ|ㄗ|ㄘ|ㄙ|ㄚ|ㄛ|ㄜ|ㄝ|ㄞ|ㄟ|ㄢ|ㄣ|ㄤ|ㄥ|ㄦ|ㄧ|ㄨ|ㄩ|■|▄|▆|\*|@|#|\^|\\/;
        return re.test(chars) != true;
    }
};

 浏览器判断的封装

//浏览器判断
WebJs.UsersBrowser = (function () {
    var ua = navigator.userAgent.toLowerCase(); //获取用户端信息
    var info = {
        version: ua.match(/(?:firefox|opera|safari|chrome|msie)[\/: ]([\d.]+)/)[1],
        ie: /msie/.test(ua) && !/opera/.test(ua),  //匹配IE浏览器
        op: /opera/.test(ua),  //匹配Opera浏览器
        sa: /version.*safari/.test(ua),  //匹配Safari浏览器
        ch: /chrome/.test(ua),  //匹配Chrome浏览器
        ff: /firefox/.test(ua) && !/webkit/.test(ua)  //匹配Firefox浏览器
    };
    return info;
})(WebJs);

  以上方法均是和项目业务逻辑没有关系的,一般单独放在一个js文件里面,以后方便其他项目使用,一般命名为core.js。和项目业务逻辑相关的一般会放在common.js文件夹里面,最后再发布的时候做压缩处理。如果是用的ASP.NET MVC4,压缩js这个就是相当轻松的了,BundleConfig帮我们事先了。

这些代码都是项目经常用到的,一些是借鉴了网上的,这里指发布了部分常用代码库,以后有空会详细说明在项目如何组织我们的javascript代码,让我们项目的javascript变得容易维护。

我是一个菜鸟,现在正在努力学习中,本人第一次发布博客,文字功底很有限,表达能力非常一般,不是一般,准确说是很差。

参考链接

http://www.cnblogs.com/wxydigua/p/3314274.html

http://www.cnblogs.com/sanshi/archive/2009/08/30/1556677.html

http://www.kuqin.com/webpagedesign/20070915/1095.html

http://www.cnblogs.com/lhb25/p/10-useful-jquery-code-snippets.html

http://www.qianduan.net/10-awesome-jquery-form-action-code-fragment-not-to-be-missed.html 

 

 

posted @ 2013-10-23 20:44  xj3614  阅读(1035)  评论(0)    收藏  举报