资讯专栏INFORMATION COLUMN

JS 笔记整理

GraphQuery / 1875人阅读

摘要:在前端工作期间遇到过不少的问题,很多时候这些问题也是反复出现的,是时候将问题都记录下来,用于回顾及避免反复浪费时间在同一问题上。

在前端工作期间遇到过不少的问题,很多时候这些问题也是反复出现的,是时候将问题都记录下来,用于回顾及避免反复浪费时间在同一问题上。
1、对象转URL参数
var parseParam=function(param, key){ 
  var paramStr=""; 
  if(param instanceof String || param instanceof Number || param instanceof Boolean){ 
    paramStr += "&" + key + "=" + encodeURIComponent(param);
  }else{ 
    $.each(param,function(i){
      var k = key==null ? i : key + (param instanceof Array ? "["+i+"]" : "."+i); 
      paramStr += "&" + parseParam(this, k); 
    }); 
  } 
  return paramStr.substr(1);
};

var a = {a: "a", b: "b"};
console.log(parseParam(a)); // a=a&b=b
console.log(parseParam(a, "person")); // person.a=a&person.b=b
2、日期格式化
/**
 * 对Date的扩展,将 Date 转化为指定格式的String 
 * 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符, 
 * 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 
 * 
 * (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 
 * (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18 
 * 
 * @param {*} fmt 
 */
Date.prototype.Format = function (fmt) { //author: meizz 
    var o = {
        "M+": this.getMonth() + 1,                 //月份 
        "d+": this.getDate(),                    //日 
        "h+": this.getHours(),                   //小时 
        "m+": this.getMinutes(),                 //分 
        "s+": this.getSeconds(),                 //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds()             //毫秒 
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    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;
}
3、模板字符串实现
/**
 * 模板字符串实现,将指定内容赋值给字符串中的参数字段
 * 
 * var url = "../img/bookList/img_{0}.png";
 * url.format("a1");
 * 
 * @param {*} args 
 */
String.prototype.format = function (args) {
  var result = this;
  if (arguments.length > 0) {
      if (arguments.length == 1 && typeof (args) == "object") {
          for (var key in args) {
              if (args[key] != undefined) {
                  var reg = new RegExp("({" + key + "})", "g");
                  result = result.replace(reg, args[key]);
              }
          }
      }
      else {
          for (var i = 0; i < arguments.length; i++) {
              if (arguments[i] != undefined) {
                  var reg = new RegExp("({[" + i + "]})", "g");
                  result = result.replace(reg, arguments[i]);
              }
          }
      }
  }
  return result;
};
4、文件下载
关于下载可以先阅读 https://www.cnblogs.com/husts...

a标签 & window.open()

// 浏览器支持能够打开的格式,他都会默认直接在线打开(比如word或图片),不支持的格式,他就会弹出下载提示。最好是做成.rar格式的文件
 $btn.click(function(){window.open("xxxxx/file.rar");});

// 使用download属性
下载
var isSupportDownload = "download" in document.createElement("a"); // 监测当前浏览器是否支持download属性

Iframe

try {
  requestTaskByForm();
  startTask(translateResponse, 0, iInterval, iTimeout);
} catch (exp) {
    console.err(exp);
}    

// config 下载JSON报文配置项;timeout 超时(毫秒),默认60000;interval 轮询间隔(毫秒),默认100;callback 回调函数;err 异常回调;scope 作用域;url 下载servlet,默认cifjsondownload;

/*
  * isArray
  * @param v
  * @returns {Boolean}
  */
function isArray(v){
  return !!v && Object.prototype.toString.call(v) === "[object Array]";
};

/**
 * isObject
 * @param v
 * @returns {Boolean}
 */
function isObject(v){
  return !!v && Object.prototype.toString.call(v) === "[object Object]";
};

/**
 * json object copy
 * @param o
 * @param c
 */
function apply(o,c){
  if (isObject(c)) {
    for (var p in c) {
      if (o.hasOwnProperty(p.toString().toUpperCase()))
        o[p.toString().toUpperCase()] = c[p];
      if (o.hasOwnProperty(p))
        o[p] = c[p];
    }
  }            
};

/**
 * parseJson
 * @param message
 */
function parseJson(res){
  return eval("(" + res + ")");
};
    /**
 * init json body
 */
function initJsonElements(){
  apply(oCif, oConfig);
}

/**
 * init html elements
 */
function initHtmlElements(){
  requestDiv = document.getElementById(reqDivId);
  if(!requestDiv){
    requestDiv = document.createElement("div");
    requestDiv.id = reqDivId;
    requestDiv.innerHTML = "";
    requestDiv.style.display = "none";
    document.body.appendChild(requestDiv);
  }
  requestForm = document.getElementById(reqFromId);
  if(requestForm){
    document.body.removeChild(requestForm);
  }
  requestForm = document.createElement("form");
  requestForm.id = reqFromId;
  requestForm.method = "POST";
  requestForm.action = sUrl;
  requestForm.target = reqIframeId ;
  requestForm.style.display = "none";
  document.body.appendChild(requestForm);
};

/**
 * init form childs
 * @param data
 * @param parent
 */
function initFormElements(data, parent){
  for(var c in data){
    if (data.hasOwnProperty(c)){
      if(isArray(data[c])){
        initFormElements(data[c][0], c);
      }else if(isObject(data[c])){
        initFormElements(data[c], c);
      }else{
        if(parent){
          var seq = document.createElement("input");
          seq.type = "hidden";
          seq.name = parent +"."+ c ;
          seq.value = data[c];
          requestForm.appendChild(seq);
        }else{
          var seq = document.createElement("input");
          seq.type = "hidden";
          seq.name = c ;
          seq.value = data[c];
          requestForm.appendChild(seq);                            
        }                        
      }                    
    }
  }            
}

/**
 * request task by form
 */
function requestTaskByForm(){
  initJsonElements();
  initHtmlElements();
  initFormElements(oCif);
  if(requestForm)requestForm.submit();
}        

/**
 * init iframe response innerHTML
 */
function initResponse(){
  requestIframe = document.getElementById(reqIframeId);
  var iframeWindow = document.getElementById(reqIframeId).contentWindow ;
  if(iframeWindow 
      && iframeWindow.document
      && iframeWindow.document.body
      && iframeWindow.document.body.innerHTML){
    iframeWindow.document.body.innerHTML="";
  }            
}

/**
 * stopTask
 * @param intervalId
 */
function stopTask(intervalId){
  clearInterval(intervalId);
  initResponse();
};

/**
 * startTask
 * @param func
 * @param start
 * @param interval
 * @param end
 */
function startTask(func, start, interval, end){
  if (!start) start = 0;
  if (arguments.length <= 2){
    setTimeout(func, start);
  }else{
    function repeat() {
      taskId = setInterval(func, interval);
      if (end) setTimeout(function() { 
        stopTask(taskId);
      }, end);
    };                
    setTimeout(repeat, start);
  }            
};

/**
 * translate response
 */
function translateResponse(){
  var iframeWindow = document.getElementById(reqIframeId).contentWindow ;
  if(iframeWindow 
      && iframeWindow.document
      && iframeWindow.document.body
      && iframeWindow.document.body.innerHTML){
    var res = iframeWindow.document.body.innerHTML;
    if(res !=""){
      var response = parseJson(res);
      if(response.RTNCOD == "SUC0000"){
        initResponse();
        if(requestForm)requestForm.submit();
      }else{
        if(scope)
          fCallback.call(scope,res);
        else
          fCallback.call(this,res);
        stopTask(taskId);                        
      }
    }
  }
};

API下载

Blob 对象只有在IE10及以上支持

$http({
        url: "http://xxxx/xxxx",
        method: "post",
        data: {
            type: "类型",
            selectedCols: "选择的列"
        },
        dataType: "json",
        responseType: "arraybuffer"
    }).success(function (data, status, headers, config) {
        var fileName = name +"-" + new Date();
        var blob = new Blob([data], {type: "application/vnd.ms-excel"});
        if (window.navigator.msSaveOrOpenBlob){
            navigator.msSaveBlob(blob, fileName);//IE
        } else {
            var link = document.createElement("a");
            link.href = window.URL.createObjectURL(blob);
            link.download = fileName;
            link.click();
            window.URL.revokeObjectURL(link.href);
        }
    }).then(clear()).error(function (data, status, headers, config) {
       console.log("error");
    });

FileSaver.js 兼容性处理

https://github.com/eligrey/Fi...
Blob 对象只有在IE10及以上支持
var FileSaver = require("file-saver");
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

前端将table生成EXCEL

https://github.com/rainabba/j...
$("#yourHtmTable").table2excel({
    exclude: ".excludeThisClass",
    name: "表格名称",
    filename: "SomeFile" //do not include extension
});
5、文件上传
https://github.com/mailru/Fil...
https://github.com/transloadi...
6、防止网页被嵌入框架
try{
  top.location.hostname;
  if (top.location.hostname != window.location.hostname) {
    top.location.href =window.location.href;
  }
}catch(e){
  top.location.href = window.location.href;
}
7、快速排序
http://www.ruanyifeng.com/blo...
8、cookie设置及获取
//写cookies(设置作用域)
function setCookie(name,value,days){
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + days*24*60*60*1000);
    let hostname = location.hostname.substring(location.hostname.indexOf(".")+1)  //设置为一级域名
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString()+";domain="+hostname+";path=/";
}
  
//读取cookies
function getCookie(name)
{
     var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
     if(arr=document.cookie.match(reg))
         return (arr[2]);
     else
        return null;
}
 
//删除cookies
function delCookie(name){
    setCookie(name, "", -1)
} 
9、获取URL参数
// 获取参数值
function getQueryString(name) { 
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
    var r = window.location.search.substr(1).match(reg); 
    if (r != null) return unescape(r[2]); 
    return null; 
}

// 获取url中的参数并以对象的形式展示出来
function getUrlData(){
    let url=window.location.search;//url中?之后的部分
    console.log("url...."+url)
    url=url.substring(1);//去掉?剩下的都为a=b&c=d&e=f...模式
    console.log("去掉?...."+url)
    let dataObj={};
    if(url.indexOf("&")>-1){
        url=url.split("&");//url中去掉&全部变成“a=b” “c=d” “e=f”的模式
        console.log("去掉&的url..."+url)
        for(let i=0;i
10、判断是否为对象
// isObjectEqual
export function isObjectValueEqual (a, b) {
  let o1 = a instanceof Object;
  let o2 = b instanceof Object;

  if (!o1 || !o2) {
    return a === b;
  }

  let aProps = Object.getOwnPropertyNames(a);
  let bProps = Object.getOwnPropertyNames(b);

  for (let i = 0; i < aProps.length; i++) {
    let t1 = aProps[i] instanceof Object;
    let t2 = bProps[i] instanceof Object;

    if (t1 && t2) {
      return isObjectValueEqual(aProps[i], bProps[i]);
    } else if (aProps[i].indexOf("_") !== 0 && a[aProps[i]] !== b[aProps[i]]) {
      return false;
    }
  }
  return true;
}
11、判断IE浏览器版本
export function IEVersion () {
  let userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
  let isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; // 判断是否IE<11浏览器
  let isEdge = userAgent.indexOf("Edge") > -1 && !isIE; // 判断是否IE的Edge浏览器
  let isIE11 = userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1;

  if (isIE) {
    let reIE = new RegExp("MSIE (d+.d+);");

    reIE.test(userAgent);

    let 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浏览器
  }
}
12、事件延时
export function debounce (func, delay) {
  let timer;

  return function (...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93893.html

相关文章

  • js入门笔记整理(二)——操作符

    摘要:上一篇入门笔记整理一元操作符递增递增分为前置递增和后置递增前置型两个加号放在前面这个操作其实就是给加,上面的列子等效于前置递增其实可以分为两步操作,其加运算高于赋值号运算,如等效于先运行加运算为再运行赋值运算后置型两个加号放在后面这个操作其 上一篇:js入门笔记整理 一元操作符 递增 递增分为前置递增和后置递增前置型——两个加号(++)放在前面 var num = 1; ++n...

    JasonZhang 评论0 收藏0
  • 个人文章分类整理

    摘要:春节闲来无事,看看自己在上写的文章,想不到已经篇了,各方面的都有,那就分类整理一下吧,也方便自己和别人查看。 春节闲来无事,看看自己在SegmentFault上写的文章,想不到已经20篇了,各方面的都有,那就分类整理一下吧,也方便自己和别人查看。 CSS CSS Background-Size 属性小记 [译]关于垂直居中 Vertical Align 的探讨 [译]CSS 居中(...

    OnlyLing 评论0 收藏0
  • 个人文章分类整理

    摘要:春节闲来无事,看看自己在上写的文章,想不到已经篇了,各方面的都有,那就分类整理一下吧,也方便自己和别人查看。 春节闲来无事,看看自己在SegmentFault上写的文章,想不到已经20篇了,各方面的都有,那就分类整理一下吧,也方便自己和别人查看。 CSS CSS Background-Size 属性小记 [译]关于垂直居中 Vertical Align 的探讨 [译]CSS 居中(...

    v1 评论0 收藏0
  • 个人文章分类整理

    摘要:春节闲来无事,看看自己在上写的文章,想不到已经篇了,各方面的都有,那就分类整理一下吧,也方便自己和别人查看。 春节闲来无事,看看自己在SegmentFault上写的文章,想不到已经20篇了,各方面的都有,那就分类整理一下吧,也方便自己和别人查看。 CSS CSS Background-Size 属性小记 [译]关于垂直居中 Vertical Align 的探讨 [译]CSS 居中(...

    nidaye 评论0 收藏0
  • 个人文章分类整理

    摘要:春节闲来无事,看看自己在上写的文章,想不到已经篇了,各方面的都有,那就分类整理一下吧,也方便自己和别人查看。 春节闲来无事,看看自己在SegmentFault上写的文章,想不到已经20篇了,各方面的都有,那就分类整理一下吧,也方便自己和别人查看。 CSS CSS Background-Size 属性小记 [译]关于垂直居中 Vertical Align 的探讨 [译]CSS 居中(...

    heartFollower 评论0 收藏0
  • 实习笔记整理 js

    摘要:总结主要是前端的基础不准吐槽我把总结写在前面特别感谢超级好用的编辑器碰到的所有坑都放在前面。 总结: 主要是前端 JS 的基础 (╯‵□′)╯︵┻━┻不准吐槽我把总结写在前面 特别感谢超级好用的MarkDown编辑器(づ ̄ 3 ̄)づStackEdit 1. 碰到的所有坑都放在前面 (。・・)ノ JS的函数定义时有3个参数, 使用时传入5个实参, 则前3个实参由定义的3个参数获得...

    陈伟 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<