JavaScript 个人公共库组建

2017-12-05

一些通用的方法封装成一个公共的第三方的库

封装库代码

/**
 * nomp (JS库) 当前库依赖第三方库:
 * zy.net:  ajax异步数据请求等封装
 */

 /** 入口对象 */
var nomp = {

}
/** ajax异步数据请求等封装 */
nomp.net = {
/**
     * AJAX loadHTMLL 动态加载HTML
     * @method loadHTML
     * @param {String} url 请求页面链接地址
     * @param {Object} container 显示公共页面的div容器
     * @param {Function} callback 回调函数
     */
    loadHTML: function(url,container, callback){
        $.ajax({
            type:"get",
            dataType:"html",
            url: url,
            cache: true,
            async: false,
            success:function(msg){
                container.css({
                    opacity : '0.0'
                }).html(msg).delay(50).animate({
                    opacity : '1.0'
                }, 300);
                setTimeout(function() {
                    if (callback) {
                        callback(msg);
                    }
                }, 300);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                ucs.ui.msg('提示信息','加载失败！','s');
            }
        });
    },
    /**
       * POST 方式调用API服务
       * @method post
       * @param {String} url 请求链接地址
       * @param {Object} param 发送请求参数json对象
       * @param {Function} callback 回调函数
       */
    post:function(url, param, callback){
          $.ajax({
              type : "POST",
              dataType : "json",
              async: false,
              url : url,
              data:param,
              success : function(msg) {
                  return callback(msg);
              }
          });
      },
      /**
       * GET 方式调用API服务（支持跨域提交）
       * @method post
       * @param {String} url 请求链接地址
       * @param {Object} param 发送请求
       * 参数json对象或表单对象：$('#formid').serialize();
       * @param {Function} callback 回调函数
       */
       get:function(url, param, callback){
             $.ajax({
                 url: url,
                 type: "get",
                 async: false,
                 timeout: 10000,
                 cache: true,
                 dataType: "jsonp",
                 jsonp: "cb",
                 data:param,
                 success : function(msg) {
                     return callback(msg);
                 }
             });
         },
}

绑定事件addEventListener

function bind(obj,ev,fn){
    if(obj.addEventListener){
        obj.addEventListener(ev,fn,false)
    }else{
        obj.attachEvent('on'+ ev,function(){
            fn.call(obj)
        })
    }
}

addClass/removeClass

function addClass(obj,sClass){
    var aClass = obj.className.split(' ')
    if(!obj.className){
        obj.className = sClass
        return
    }
    for(var i =0;i<aClass.length;i++){
        if(aClass[i] === sClass)return
    }
    obj.className += ' '+sClass
}
function removeClass(obj,sClass){
    var aClass = obj.className.split(' ')
    if(!obj.className)return;
    for(var i =0;i<aClass.length;i++){
        if(aClass[i] === sClass){
            aClass.splice(i,1);
            obj.className = aClass.join(' ');
            break;
        }
    }
}

个人封装js代码库

var utils = (function(){
    /*
    *  使用惰性思想（js高阶变成技巧之一）封装我们常用的代码库
    *  第一次给utils赋值的时候就已经处理好兼容了,把结果存在flag中以后再每一个方法中
    *  只要是IE6-8不兼容的,不需要重新检测，只需要使用flag的值就可以了
    *  判断浏览器是否兼容getComputedStyle属性 兼容的话是标准浏览器 不兼容是IE6-8
    * */
    var flag = 'getComputedStyle' in window;
    /*
     * 只传递attr 默认是获取  两个参数都有意思是设置一个样式
     * attr[Attribute]
     * value[Class]
     * document..clientHeight || document.body.clientHeight
     * win('clientHeight')
     * */
    function win(attr, value) {
        //没传递值属于获取
        if (typeof value === 'undefined') {
            //如果属性名是一个变量的话
            //用点的时候后面一定要是一个指定的属性名，
            // 用[]时候后面一定是一个变量或者固定属性名的字符串。
            return document.documentElement[attr] || document.body[attr]
        }
        //设置
        document.documentElement[attr] = value
        document.body = value
    };
    /*
     * curEle[Object] 当前操作的元素(domId)
     * 获取元素位置距离参照物的偏移量
     * offset(domId).left
     * */
    function offset(curEle) {
        var totalLeft = null;//总的左偏移
        var totalTop = null;//总的右偏移
        var par = curEle.offsetParent;//父级参照物
        // 首先累加元素本身的偏移距离
        totalLeft += curEle.offsetLeft;
        totalTop += curEle.offsetTop;
        while (par) {
            //便准浏览器ie8下offsetTop/offsetLeft
            //其实是把父级参照物边框已经算在内了所以就不加了
            //不是IE8浏览器才累加边框
            if (navigator.userAgent.indexOf('MSIE 8.0') === -1) {
                //->累加父级参照物的边框
                totalLeft += par.clientLeft;
                totalTop += par.clientTop;
            }
            //->累加父级参照物本身的偏移量
            totalLeft += par.offsetLeft;
            totalTop += par.offsetTop;
            //基于当前父级参照物继续往上找
            par = par.offsetParent
        }
        return {left: totalLeft, top: totalTop}
    }
    /*
    * likeAry 类数组转化为数组 兼容所有浏览器
    * IE6-8浏览器当中不支持借用数组的slice实现将元素集合
    *（节点集合）的类数组转换为数组
    * */
    function listToArray(likeAry) {
        if(flag){
            return Array.prototype.slice.call(likeAry)
        }
        var ary = []
        for (var i = 0; i < likeAry.length; i++) {
            ary[ary.length] = likeAry[i]
        }
        return ary;
    };
    /*
    * str[String]
    * 把JSON格式的字符串转换为JSON格式的对象
    * IE6-7下没有JSON对象没有JSON.parse和 stringify这两个方法
    * */
    function formatJSON(str) {
        return "JSON" in window ? JSON.parse(str) : eval("(" + str + ")")
    };
    /*
     *  获取元素样式
     *  curEle[Object] 当前操作的元素(domId)
     * attr[Attribute]
     * 获取元素具体样式  IE6-8不支持getComputedStyle
     * getCss(oBox,"height")//98 获取oBox的height属性
     * */
    function getCss(curEle, attr) {
        var val = null;
        var reg = null;
        if (flag) {
            val = window.getComputedStyle(curEle, null)[attr];
        } else {
            if (attr === 'opacity') {
                val = curEle.currentStyle["filter"];
                reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)&/i;
                val = reg.test(val) ? reg.exec(val)[1] / 100 : 1;
            }
            val = curEle.currentStyle[attr];
        }
        //对是否是数字带单位进行处理 哪些能去单位哪些不能去
        reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;
        return reg.test(val) ? parseFloat(val) : val;
    }
    /*
     * curEle[Object] 当前操作的元素(domId)
     * targrtName[String] 匹配查找的子节点
     * 获取curEle所有子节点兼容所有浏览器
     * targrtName[String]
     * */
    function children(curEle, targrtName) {
        var ary = [];
        //IE6-8不能使用children属性 正则判断/MSIE (6|7|8)/i.test(navigator.userAgent)
        if (!flag){
            var nodeList = curEle.childNodes;
            for (var i = 0; i < nodeList.length; i++) {
                var curNode = nodeList[i];
                if (curNode.nodeType === 1) {
                    ary[ary.length] = curNode
                }
            }
        } else {
            //标准浏览器直接使用children即可但是获取的是元素集合类数组，
            //和IE6-8保持一致转换数组
            ary = this.listToArray(curEle.children)
        }
        //-> 二次筛选
        if (typeof targrtName === 'string') {
            for (var k = 0; k < ary.length; k++) {
                var curEleNode = ary[k]//当前元素节点
                if (curEleNode.nodeName.toLowerCase() !==
                 targrtName.toLowerCase()) {
                    //不是我想要的标签
                    ary.splice(k, 1);
                    k--;
                }
            }
        }
        return ary;
    }
    /*
     * 查找上一个哥哥元素节点 jQuery中的prev()
     * curEle[Object] 当前操作的元素(domId)
     * prev(oDIv) oDIv的上一个同级元素节点
     * */
    function prev(curEle) {
        if(flag){
            return curEle.previousElementSibling
        }
        var pre = curEle.previousSibling;
        while(pre && pre.nodeType !== 1){
            pre = pre.previousSibling;
        }
        return pre
    }
    /*
    * 查找下一个弟弟元素节点 jQuery中的next()
    * curEle[Object] 当前操作的元素(domId)
    * next(oDIv) oDIv的下一个同级元素节点
    * */
    function next(curEle){
        if(flag){
            return curEle.nextElementSibling
        }
        var next = curEle.nextSibling;
        while(next && next.nodeType !== 1){
            next = next.previousSibling;
        }
        return next
    }
    /*
     * 查找所有哥哥元素节点 jQuery中的prevAll()
     * curEle[Object] 当前操作的元素(domId)
     * prevAll(oDIv) oDIv的所有上级节点
     * 找到当前元素上一个哥哥元素然后存起来在找这个元素的哥哥节点找到一个存一个
     * */
    function prevAll(curEle) {
        var ary = [];
        //获取当前元素的上一个哥哥节点
        var pre = this.prev(curEle)
        while (pre){
            ary.unshift(pre);
            //基于当前节点在查找他的上一个哥哥节点
            pre = this.prev(pre)
        }
        return ary
    }
    /*
    *  获取所有弟弟元素节点
    *  curEle[Object] 当前操作的元素(domId)
    *  nextAll(oDIv) oDIv的所有弟弟节点
    * */
    function nextAll(curEle) {
        var ary = [];
        //获取当前元素的上一个哥哥节点
        var nex = this.next(curEle)
        while (nex){
            ary.push(nex);
            nex = this.next(nex)
        }
        return ary
    }
    /*
     *  获取当前元素相邻的两个元素节点
     *  curEle[Object] 当前操作的元素(domId)
     *  sibling(oDIv) oDIv相邻的两个元素节点
     * */
    function sibling(curEle) {
        var pre = this.prev(curEle)
        var nex = this.next(curEle)
        var ary = []
        pre?ary.push(pre):null;
        nex?ary.push(nex):null;
    }
    /*
    * 获取当前元素所有的兄弟元素节点 jQuery中siblings
    *  curEle[Object] 当前操作的元素(domId)
    * */
    function siblings(curEle) {
        return this.prevAll(curEle).concat(this.nextAll(curEle))
    }
    /*
    *  查找当前元素索引 index(curEle)
    *  curEle[Object] 当前操作的元素(domId)
    *  判断哥哥元素的长度
    * */
    function index(curEle) {
        return this.prevAll(curEle).length
    }
    /*
    * 获取当前元素第一个元素子节点 firstChild
    * curEle[Object] 当前操作的元素(domId)
    * */
    function firstChild(curEle) {
        var childAll = this.children(curEle)
        return childAll.length>0?childAll[0]:null
    }
    /*
     * 获取当前元素最后一个元素子节点 lastChild
     * curEle[Object] 当前操作的元素(domId)
     * */
    function lastChild(curEle) {
        var childAll = this.children(curEle)
        return childAll.length>0?childAll[childAll-length-1]:null
    }
    /*
    *  像指定容器的末尾追加元素 append
    *  curEle[Object] 当前操作的元素(domId)
    *  container 指定添加的元素容器
    * */
    function append(newEle,container) {
        container.appendChild(newEle)
    }
    /*
     *  prepend 把新的元素添加到容器中第一个子元素节点前面 prepend
     *  如果一个元素子节点都没有直接放在末尾即可
     * */
        function prepend(newEle,container) {
            var first =  this.firstChild(container)
            if(first){
                container.insertBefore(newEle,first)
                return
            }
            container.appendChild(newEle)
        }
    /*
     *  insertBefore(newEle,oldEle)
     *  把新元素（newEle）追加到指定元素（oldEle）的前面
     * */
        function insertBefore(newEle,oldEle) {
            oldEle.parentNode.insertBefore(newEle,oldEle)
        }
    /*
     *  把新元素（newEle）追加到指定元素（oldEle）的后面
     *  原理:相当于追加oldEle弟弟元素的前面，如果弟弟不存在，
     *  也就是当前元素是追后一个了,新元素放在末尾即可
     * */
    function insertAfter(newEle,oldEle) {
        var nex = this.next(oldEle)
        if(nex){
            oldEle.parentNode.insertBefore(newEle,nex)
            return
        }
        oldEle.parentNode.appendChild(newEle)
    }
    /*
    *  getElementsByClass 兼容写法
    *  className 要查找的class的类名
    *  context[object] 要查找的目标容器
    * */
    function getElementsByClass(className,context) {
        context = context || document;
        if(flag){
            return this.listToArray(context.getElementsByClassName(className))
        }
        var ary = [];
        //->把传递进来的样式类名首位空格去掉然后再按照中间的空格把里边的每一项拆分成数组
        var classNameAry = className.replace(/(^ +| +$)/g,'').split(/ +/g);
        //->获取指定上下文中所有的元素标签，循环这些标签，获取每一个标签的className样式类名
        //的字符串
        var nodeList = context.getElementsByTagName('*')//获取所有元素标签
        for (var i = 0; i < nodeList.length; i++) {
            var curNode = nodeList[i];
            //->判断curNode.className是否包含需要的多个或者单一的class类名，如果都包含
            //->curNode就是我想要的 否则就不是我想要的
            var isOk = true;//->假设curNode中包含所有样式
            for (var k = 0; k < classNameAry.length; k++) {
                var curName = classNameAry[k]
                var reg = new RegExp("(^| +)"+ curName +"( +|$)");
                if(!reg.test(curNode.className)){
                    isOk = false;
                    break;
                }
            }
            if(isOk){//->拿每一个标签分别和所有样式类名比较结果还是true，说明当前
                //元素标签包含了所有我们想要的样式
                ary.push(curNode)
            }
        }
        return ary;
    }
    /*
    * curEle[Object] 当前操作的元素(domId)
    * 当前元素中是否包含className类名返回true/false
    * hasClass(domId,'aaa')
    * */
    function hasClass(curEle,className) {
        var reg = new RegExp("(^| +)" + className + "( +|$)")
        return reg.test(curEle.className)
    }
    /*
    * addClass增加className 可以多个增加
    * curEle[Object] 当前操作的元素(domId)
    *  addClass(domId,'aaa bg')
    * */
    function addClass(curEle,className) {
        //为了防止className半个类名，把传递进来的字符串按照一个或多个空格拆分成数组中的每一项
        var ary = className.split(/ +/g)
        //训话数组一项一项验证添加
        for (var i = 0; i < ary.length; i++) {
            var curName = ary[i];
            if(!this.hasClass(curEle,curName)){
                curEle.className += ' ' + curName
            }
        }
    }
    /*
    * 删除指定的className 可以多个删除
    * curEle[Object] 当前操作的元素(domId)
    * removeClass(domId,'bg aaa')
    * */
    function removeClass(curEle,className) {
        var ary = className.split(/ +/g)
        for (var i = 0; i < ary.length; i++) {
            var curName = ary[i];
            if(this.hasClass(curEle,curName)){
                var reg = new RegExp("(^| +)" + curName + "( +|$)","g");
                curEle.className = curEle.className.replace(reg," ");
            }
        }
    }
    /*
    * setCss给当前元素的某一个样式属性设置值（增加在行内样式上）
    * curEle(当前操作的元素)attr（属性）value（属性值 没有单位符合情况的的会自动加上单位）
    * setCss(box,'backgroundColor','red')
    * */
    function setCss(curEle,attr,value) {
        //在js设置float样式值的话也需要处理兼容
        if(attr === 'float'){
            curEle['style']['cssFloat'] = value;
            curEle['style']['styleFloat'] = value;
            return;
        }

        if(attr === 'opacity'){
            curEle['style']['opacity'] = value;
            curEle['style']['filter'] = 'alpha(opacity='+ value*100 +')';
            return;
        }
        var reg = null;
        //->对于某些样式属性，如果传递的值没有加单位我们需要默认的补充上
        reg = /^(width|height|top|bottom|right|left|
        ((margin|padding)(Top|Bottom|Left|Right)))$/
        if(reg.test(attr)){
            if(!isNaN(value)){
                //->判断传递进来的value是否是一个有效数字 如果是证明当前的值没带单位
                value += 'px'
            }
        }
        curEle['style'][attr] = value;
    }
    /*
    * setGroupCss 当前元素批量设置样式属性值
    * curEle[object] 当前元素
    * options[object] 当前元素这是的样式属性
    * utils.setGroupCss(box,{
    *   width:220,
    *   backgroundColor:"red",
    * })
    * */
    function setGroupCss(curEle,options) {
        //通过检测options的数据类型,如果不是一个对象则不能批量设置属性
        options = options || 0;
        if(options.toString() !== '[object Object]'){
            return;
        }
        for(key in options){
            if(options.hasOwnProperty(key)){
                this.setCss(curEle,key,options[key])
            }
        }
    }
    /*
    * css  此方法实现了获取、单独设置、批量设置元素值
    *  utils.css(box, 'width')获取widthd的属性值
    *  utils.css(box,'backgroundColor','blue')单独设置
    *  utils.css(box,{批量设置
    *    width:250,
    *    borderTop:'10px solid pink'
    *  })
    * */
    function css(curEle) {
        var argTwo = arguments[1];
        if(typeof argTwo === 'string'){
            //第二个参数值是一个字符串，很有可能是获取样式
            //(因为判断是否存在覅三个参数 如果有第三个参数就是单独的设置样式属性值）
            //第三个参数不存在就是获取  this.getCss(curEle,argTwo)
            if(typeof arguments[2] ==='undefined'){
                return this.getCss.apply(this,arguments)
            }
            //第三个参数存在则为单    独设置  this.setCss(curEle,argTwo,argThree)
            this.setCss.apply(this,arguments)
        }
        argTwo = argTwo || 0;
        if(argTwo.toString() === '[object Object]'){
            //批量设置样式属性值
            this.setGroupCss.apply(this,arguments)
        }
    };
    /*
    *  绑定事件 bind
    *  兼容addEventListener到IE6-8
    * */
    function bind(curEle,evenType,enenFn) {
        if('addEventListener' in document){
            curEle.addEventListener(evenType,enenFn,false);
            return;
        }
        // 给enenFn化妆 兼容IE8this是window本身 标准浏览器正常
        var tempFn = function(){
            enenFn.call(curEle)
        };
        curEle.attachEvent('on'+ evenType,tempFn)
    }
    return {
        win:win,
        offset:offset,
        listToArray: listToArray,
        formatJSON:formatJSON,
        children:children,
        prev:prev,
        next:next,
        prevAll:prevAll,
        nextAll:nextAll,
        sibling:sibling,
        siblings:siblings,
        index:index,
        firstChild: firstChild,
        lastChild:lastChild,
        append:append,
        prepend:prepend,
        insertBefore:insertBefore,
        insertAfter :insertAfter,
        hasClass:hasClass,
        addClass:addClass,
        removeClass:removeClass,
        getElementsByClass:getElementsByClass,
        getCss:getCss,
        setCss:setCss,
        setGroupCss:setGroupCss,
        css:css,
        bind:bind
    }
})();