JavaScript常用方法パッケージ

記事の目次

1.データタイプを取得し、文字列

を返します.

.文字列フォーマット(擬似ES 6テンプレート文字列)

.非同期負荷JS

.DOMイベント対応解決策

.コピーオブジェクト

.マウスホイールイベント処理

.関数設定実行間隔(頻繁にトリガされるイベントについて)

.ランダム生成

.IEブラウザバージョン

を取得する.
https://wildye.cn/posts/10c4ce7/
1.データタイプを取得し、文字列を返します.
参照があれば、参照タイプを判断し、なければ呼び出し対象タイプを判断し、文字列を返します.

//           
Object.prototype.getType = Object.prototype.getType || function() {
  var me = this;
  //      null、undefined   
  if (arguments.length == 1) me = arguments[0];
  return Object.prototype.toString.call(me).slice(8, -1).toLowerCase();
};

//     
console.log(getType(null));          // -> null
console.log(getType(undefined));     // -> undefined
console.log('abc'.getType());        // -> string
console.log(123 .getType());         // -> number
console.log(true.getType());         // -> boolean
console.log([].getType());           // -> array
console.log({}.getType());           // -> object
console.log(new Date().getType());   // -> date
console.log(new Error().getType());  // -> error
console.log(/^[A-Z]/.getType());     // -> regexp
console.log(function(){}.getType()); // -> function

2.文字列フォーマット(擬似ES 6テンプレート文字列)

String.prototype.format = String.prototype.format || function () {
  var e = arguments;
  return this.replace(/\${(\d+)}/g, function(t, n) {
    return typeof e[n] != "undefined" ? e[n] : t;
  })
};

//     
var template = "    ${0}，    ${1}！";
console.log(template.format("  ","  ")); // =>       ，      ！

4.非同期でJSをロードする

/**
* [loadScript     JS]
* @param  {[String]}   url    [js    ]
* @param  {Function} callback [    ]
* @return {[type]}            [element]
*/
function loadScript (url, callback) {
  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
    script.onload = function() {
      callback();
    };
  }
  script.src = url;
  document.body.appendChild(script);
}();

//     
loadScript('one.js', function() {
  // code...
})

4.DOM事件対応解決策

var eventHelper = {
  //     
  addEvent: function(el, type, handler) {
    if (el.addEventListener) {
      el.addEventListener(type, handler, false);
    } else if (el.attachEvent) {
      el.attachEvent('on' + type, handler);
    } else {
      el['on' + type] = handler;
    }
  },
  //     
  removeEvent: function(el, type, handler) {
    if (el.removeEventListener) {
      el.removeEventListener(type, handler, false);
    } else if (el.detachEvent) {
      el.detachEvent('on' + type, handler);
    } else {
      el['on' + type] = null;
    }
  },
  //       
  getEvent: function(e) {
    return e ? event : window.event;
  },
  //       
  getType:function(e){
    return e.type
  },
  //       
  getElement:function(el){
    return el.target || el.srcElement;
  },
  //         
  preventDefault:function(e){
    if(e.preventDefault){
      e.preventDefault();
    }else{
      e.returnValue = false;
    }
  },
  //       
  stopPropagation:function(e){
    if(e.stopPropagation){
      e.stopPropagation();
    }else{
      e.cancelBubble = true;
    }
  }
}

ロゴina>

//     
var login = document.getElementById('btn');
//     
eventHelper.addEvent(login, 'click', function(e){
  preventDefault(e);   //       
  stopPropagation(e);  //     
  getEvent(e);         //       
  getType(e);          //       
  getElement(e);       //       
})
//     
eventHelper.removeEvent(login, 'click', function(){})

5.コピー対象

//         
Object.prototype.deepClone = Object.prototype.deepClone || function(obj, proto){
  //           ，    
  if (obj == null || typeof obj !== 'object') return obj;

  var copy;

  //                
  if(proto && typeof(proto) === "boolean") {
    copy = Object.create(Object.getPrototypeOf(obj));
    console.log(copy);
  }

  // Date    
  if (obj instanceof Date) {
    copy = new Date();
    copy.setTime(obj.getTime());
    return copy;
  }

  // Object or Array
  if (obj instanceof Array || obj instanceof Object) {
    copy = (obj instanceof Array)?[]:{};
    for (var key in obj) {
      if (obj.hasOwnProperty(key)) copy[key] = deepClone(obj[key]);
    }
    return copy;
  }
  throw new Error("Type Error");
}

//     
var newObj = deepClone(oldObj);

6.マウスホイールイベント処理

function MouseWheelHandle (obj,handle){
  var info = navigator.userAgent;  //        
  var down = null;                 //      true   false  

  // Firefox
  if (info.indexOf("Firefox") != -1) {
    obj.addEventListener("DOMMouseScroll", function(event) {
      var e = event || window.event;
      down = e.detail > 0 ? true : false;
      handle.call(obj, down, e);
    }, false);
  // Other
  } else {
    obj.onmousewheel = function(event){
      var e = event || window.event;
      down = e.detail > 0 ? true : false;
      handle.call(obj, down, e);
    }
  }
}

7.関数設定実行間隔(頻繁にトリガされるイベントに対して)

/**
* [throttle   ]
* @param  {Function} fn  [    ]
* @param  {[object]} obj [    ]
* @return {[type]}       [undefined]
*/
function throttle(fn, obj) { 
  clearTimeout(fn.t);
  fn.t = setTimeout(function(){
    fn.call(obj);
  }, 500);
}

//     
function handler() {
    // code...
}
window.onresize = function(){  
  throttle(handler, window); 
};  

8.ランダム生成

色

function getColor(type) {
  var r = Math.floor(Math.random()*256),
      g = Math.floor(Math.random()*256),
      b = Math.floor(Math.random()*256);
  
  if (type) {
    return '#' + r.toString(16) + g.toString(16) + b.toString(16);
  }
  return 'rgb(' + r + ',' + g + ',' + b + ')';
}

数値

function getRandom(numMin, numMax) {
  return Math.floor(Math.random() * (numMax - numMin + 1) + numMin);
}

9.IEブラウザバージョンの取得

function IEVersion() {
  //       userAgent   
  var userAgent = navigator.userAgent;
  //     IE<11   
  var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
  //     IE Edge   
  var isEdge = userAgent.indexOf("Edge") > -1 && !isIE;
  var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
  if (isIE) {
    var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
    reIE.test(userAgent);
    var fIEVersion = parseFloat(RegExp["$1"]);
    if(fIEVersion == 7) {
      return 7;
    } else if (fIEVersion == 8) {
      return 8;
    } else if (fIEVersion == 9) {
      return 9;
    } else if (fIEVersion == 10) {
      return 10;
    } else {
      return 6;//IE  <=7
    }
  } else if (isEdge) {
    return 'edge';//edge
  } else if (isIE11) {
    return 11; //IE11
  } else {
    return -1;//  ie   
  }
}