自己封装方法整理

这里整理了一些自己封装的方法。

1. 类名

/**
 * 通过类名查找元素
 * @param strClass 一个或多个类名
 * @param context 上下文 范围(可选) 默认是document
 */
function getByClass(strClass, context) {
  context = context || document;
  if (document.getElementsByClassName) {
    return nodeListToArray(context.getElementsByClassName(strClass));
  }
  var aryClass = strClass.match(/\S+/);
  var eles = nodeListToArray(context.getElementsByTagName('*'));
  for (var i = 0; i < aryClass; i++) {
    var reg = new RegExp('(^| +)' + aryClass[i] + '( +|$)');
    for (var j = 0; j < eles.length; j++) {
      if (!reg.test(eles[i].className)) {
        eles.splice(j, 1);
        j--;
      }
    }
  }
  return eles;
}

/**
 *
 * @param ele 当前元素
 * @param strClass  单个类名
 * @return true|false
 */
function hasClass(ele, strClass) {
  var reg = new RegExp("(^| +)" + strClass + "( +|$)");
  return reg.test(ele.className)
}

/**
 * 添加类名
 * @param ele  当前的元素
 * @param strClass 一个类名或多个类名
 */
function addClass(ele, strClass) {
  var aryClass = strClass.replace(/(^\s+|\s+$)/g, "").split(/\s+/g);
  for (var i = 0; i < aryClass.length; i++) {
    var curClass = aryClass[i];
    if (!hasClass(ele, curClass)) { // 若没有这个类名,才添加
      ele.className += " " + curClass;
    }
  }
}

/**
 * 删除类名
 * @param ele  当前元素
 * @param strClass 一个类名或多个类名
 */
function removeClass(ele, strClass) {
  //拆分strClass,把每个类名拿到
  var aryClass = strClass.replace(/^ +| +$/g, "").split(/ +/g);
  for (var i = 0; i < aryClass.length; i++) {
    var curClass = aryClass[i]; // 每个类名
    // 判断是否有这个类名,若有这个类名,则把这个类名删了
    var reg = new RegExp("(^| +)" + curClass + "( +|$)", "g");
    if (hasClass(ele, curClass)) {
      ele.className = ele.className.replace(reg, " ");
    }
  }
}

2. CSS

/**
 * 获取任意css样式
 * @param ele 当前元素
 * @param attr css属性
 */
function getCss(ele, attr) {
  var res = null;
  if (typeof getComputedStyle == "function") {
    res = window.getComputedStyle(ele, null)[attr];
  } else {
    if (attr == "opacity") {
      res = ele.currentStyle.filter;//"alpha(opacity = 50)"
      var reg = /^alpha\(opacity\s*=\s*(\d+(?:\.\d+)?)\)$/;
      // reg.exec(res)[1] RegExp.$1
      res = reg.test(res) ? RegExp.$1 / 100 : 1;
    } else {
      res = ele.currentStyle[attr];
    }
  }
  // 对单位的处理
  // 若获取值是->左边是数值,右边是单位,则把单位去掉并转化成数类型
  var reg = /^[+-]?(?:\d+(?:\.\d+)?)(?:px|rem|pt|em)?$/i;
  return reg.test(res) ? parseFloat(res) : res;
}

/**
 *
 * @param ele 当前元素
 * @param attr css属性
 * @param value css属性值
 */
function setCss(ele, attr, value) {
  // 1.对浮动处理
  if (attr == "float") {
    ele.style.cssFloat = value;
    ele.style.styleFloat = value;
    return;
  }
  // 2.对透明度处理
  if (attr == "opacity") {
    ele.style.opacity = value;
    ele.style.filter = "alpha(opacity =" + value * 100 + ")";
    return;
  }
  // 3.设置单位-对没有设置单位的添加单位
  var reg = /^(?:width|height|((?:margin|padding)?(?:top|bottom|left|right)?))$/i;
  if (reg.test(attr) && !isNaN(value)) value = value + 'px';
  ele.style[attr] = value;
}

/**
 * 批量设置css样式
 * @param ele 当前元素
 * @param opt 对象类型 -每一项是css属性和css属性值
 */
function setGroup(ele, opt) {
  //先检测opt的数据类型
  if (Object.prototype.toString.call(opt) !== "[object Object]") return;
  for (var attr in opt) {
    setCss(ele, attr, opt[attr]);
  }
}

/**
 *通过参数确定是调用哪个方法(getCss,setCss,setGroup)
 */
function css() {
  var fn = getCss;
  if (arguments.length === 3) fn = setCss;
  if (arguments.length === 2 && typeof arguments[1] === 'object') fn = setCssGroup;
  return fn.apply(null, arguments);
}

3. 标签名

/**
 * 获取到指定标签名的子元素
 * @param context 上下文
 * @param tagName 标记名 (字符串)
 */
function children(context, tagName) {
  var ary = [];
  // 1.先获取所有的子节点
  var eles = context.childNodes;
  for (var i = 0; i < eles.length; i++) {
    // 2.判断是否元素节点
    if (eles[i].nodeType === 1) {
      // 3.判断tagName是否正确
      if (typeof tagName === 'string') {
        // 把相同标记名的元素放入数组中
        if (eles[i].nodeName.toLowerCase() === tagName.toLowerCase()) {
          ary.push(eles[i]);
        }
      } else {
        // 第二个参数错误
        ary.push(eles[i]);
      }
    }
  }
  return ary;
}

4. forEach/Map

Array.prototype.myForEach = function (callback, context) {
  //浏览器性能优化
  if ([].forEach) {
    this.forEach(callback, context);
    return;
  }
  //this指的是调用forEach方法的数组
  context = context || window; //以后callback运行时改变回调函数的this
  for (var i = 0; i < this.length; i++) {
    //this[i]数组的每一项，i指索引，this指的原数组本身
    callback.call(context, this[i], i, this);
  }
};

Array.prototype.myMap = function (callback, context) {
  if ([].map) {
    return this.map(callback, context)
  }
  context = context || window;
  var ary = [];
  for (var i = 0; i < this.length; i++) {
    ary.push(callback.call(context, this[i], i, this));
  }
  return ary;
};

5. NodeList

/**
 * NodeList转换成数组
 * @param nodeList
 */
function nodeListToArray(likeAry) {
  var ary = [];
  try {
    ary = [].slice.call(likeAry);
  } catch (e) {
    for (var i = 0; i < likeAry.length; i++) {
      ary.push(likeAry[i]);
    }
  }
  return ary;
}

6. UA检测

/**
 * 检测是否移动端
 */
function isMoblie () {
  return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())
}

/**
 * 检测是否iOS
 */
function isIOS () {
  return /iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase())
}

7. url

/**
 * 把url的参数转换成对象
 */
function getQuery () {
  var res = {};
  var search = window.location.search; 
  var temp = search.slice(1).split('&');
  temp.forEach(function (item, index) {
    var query = item.split('=');
    res[query[0]] = query[1]
  })
  return res
}

8. jsonp

function jsonp(opt){
  var handleParams = function (_default, opt) {
    var obj = {};
    for (var key in _default) {
      if (_default.hasOwnProperty(key)) {
        obj[key] = opt[key] || _default[key];
      }
    }
    return obj;
  };
  var _default = {
    url: '',
    query: '',
    callback: '',
    success: null,
    error: null,
    charset: ''
  };
  opt = handleParams(_default, opt);
  var script = document.createElement("script"),
      head = document.head;
  script.src = opt.url + '?' + opt.query;
  script.setAttribute('type', 'text/javascript');
  opt.charset && script.setAttribute('charset', opt.charset);
  window[opt.callback] = function (data) {
    opt.success && opt.success(data);
    delete window[opt.callback];
  };
  script.onerror = function (error) {
    error && opt.error();
    delete window[opt.callback];
  }
  script.onload = function () {
    head.removeChild(script);
    script = null;
  }
  head.appendChild(script);
}