前言

作为战斗在业务一线的前端，要想少加班，就要想办法提高工作效率。这里提一个小点，我们在业务开发过程中，经常会重复用到日期格式化、 url参数转对象、浏览器类型判断、节流函数等一类函数，这些工具类函数，基本上在每个项目都会用到，为避免不同项目多次复制粘贴的麻烦，我们可以统一封装，发布到 npm，以提高开发效率。

常用函数汇总

这里先分类整理下，之前项目中多次用到的工具函数。

1.Array

1.1 arrayEqual

/**
 * 
 * @desc 判断两个数组是否相等
 * @param {Array} arr1 
 * @param {Array} arr2 
 * @return {Boolean}
 */
function arrayEqual(arr1, arr2) {
   if (arr1 === arr2)  retur true;
   if (arr1.length != arr2.length) return false;
    for(var i = 0; i < arr1.length; ++i) {    
      if (arr1[i] !== arr2[i]) return false;
    }
  return true;
}

2.Class

2.1 addClass

/**
 * 
 * @desc   为元素添加class
 * @param  {HTMLElement} ele 
 * @param  {String} cls 
 */
var hasClass = require('./hasClass');
fuction addClass(ele, cls) { 
  if(!hasClass(ele, cls)) {
    ele.className += ' ' + cls;
  }
}

2.2 hasClass

/**
 * 
 * @desc 判断元素是否有某个class
 * @param {HTMLElement} ele 
 * @param {String} cls 
 * @return {Boolean}
 */

function hasClass(ele, cls) {
  return (new RegExp('(\\s|^)' + cls + '(\\s|$)')).test(ele.className);
}

2.3 removeClass

/**
 * 
 * @desc 为元素移除class
 * @param {HTMLElement} ele 
 * @param {String} cls 
 */
var  hasClass = require('./hasClass');
function removeClass(ele, cls) {
  if (hasClass(ele, cls)) {  
      var reg = new RegExp('(\\s|^)'+ cls + '(\\s|$)');
      ele.className = ele.className.replace(reg, ' ');
    }
}

3.Cookie

3.1 getCookie

/**
 * 
 * @desc 根据name读取cookie
 * @param  {String} name 
 * @return {String}
 */
function getCookie(name) {
  var arr = document.cookie.replace(/\s/g, "").split(';');
  for (var i = 0; i < arr.length; i++) {    
    var tempArr = arr[i].split('=');   
    if (tempArr[0] == name) {   
      return decodeURIComponent(tempArr[1]);
    }
  }
  return'';
}

3.2 removeCookie

var setCookie = require('./setCookie');
/**
 * 
 * @desc 根据name删除cookie
 * @param  {String} name 
 */
function removeCookie(name) {
// 设置已过期，系统会立刻删除cookie
    setCookie(name, '1', -1);
}

3.3 setCookie

/**
 * 
 * @desc  设置Cookie
 * @param {String} name 
 * @param {String} value 
 * @param {Number} days 
 */
function setCookie(name, value, days) {
    var date = new Date();
    date.setDate(date.getDate() + days);
    document.cookie = name + '='+ value + ';expires=' + date;
}

4.Device

4.1 getExplore

/**
 * 
 * @desc 获取浏览器类型和版本
 * @return {String} 
 */
function getExplore() {
  var sys = {},
       ua = navigator.userAgent.toLowerCase(), s;
      (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? sys.ie = s[1]:
      (s = ua.match(/msie ([\d\.]+)/)) ? sys.ie = s[1] :
      (s = ua.match(/edge\/([\d\.]+)/)) ? sys.edge = s[1] :
      (s = ua.match(/firefox\/([\d\.]+)/)) ? sys.firefox = s[1] :
      (s = ua.match(/(?:opera|opr).([\d\.]+)/)) ? sys.opera = s[1] :
      (s = ua.match(/chrome\/([\d\.]+)/)) ? sys.chrome = s[1] :
      (s = ua.match(/version\/([\d\.]+).*safari/)) ? sys.safari = s[1] : 0;
       // 根据关系进行判断
    if (sys.ie) return ('IE: ' + sys.ie) 
    if (sys.edge) return ('EDGE: ' + sys.edge)  
    if (sys.firefox) return ('Firefox: ' + sys.firefox)
    if (sys.chrome) return ('Chrome: ' + sys.chrome) 
    if (sys.opera) return ('Opera: ' + sys.opera)
    if (sys.safari) return ('Safari: ' + sys.safari)
    return'Unkonwn'
}

4.2 getOS

/**
 * 
 * @desc 获取操作系统类型
 * @return {String} 
 */
function getOS() {
    var userAgent = 'navigator' in window && 'userAgent' in navigator &&navigator.userAgent.toLowerCase() || '';
    var vendor = 'navigator' in window && 'vendor' in navigator && navigator.vendor.toLowerCase() || '';
    var appVersion = 'navigator' in window && 'appVersion' in navigator &&navigator.appVersion.toLowerCase() || '';
    if (/mac/i.test(appVersion)) return'MacOSX'
    if(/win/i.test(appVersion)) return 'windows'
    if (/linux/i.test(appVersion)) return 'linux'  
    if (/iphone/i.test(userAgent) || /ipad/i.test(userAgent)||/ipod/i.test(userAgent))'ios'
    if (/android/i.test(userAgent)) return 'android' 
    if (/win/i.test(appVersion) && /phone/i.test(userAgent)) return
    'windowsPhone'

}

封装

除了对上面这些常用函数进行封装，最重要的是支持合理化的引入，这里我们使用webpack统一打包成 UMD 通用模块规范，支持 webpack、 RequireJS、 SeaJS等模块加载器，亦或直接通过

注意：本仓库代码会持续更新，如果你需要不同版本的增量压缩包或源码，请到 github Release 页面下载对应版本号的代码。

2.Webpack、RequireJS、SeaJS等模块加载器

先使用 npm安装 outils。

$ npm install --save-dev outils
// 完整引入
const outils = require('outils')
const OS = outils.getOS()

总结

这里只是简单封装，发布到npm上，省去下次复制粘贴的功夫，或者直接Goole的时间。
工欲善其事必先利其器。有了属于自己的这把利器，希望加班也会变成奢望。O(∩_∩)O哈哈~

打造自己的JavaScript 武器库

前言