一般的に使用されるJSコード

UUID

function getGui(){
    var S4 = function() {
        return(((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    };
    return(S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4());
}

包装日付スタンプターンプラグ

const dateFormatter = (formatter, date) => {
  date = date ? new Date(date) : new Date();
  const Y = date.getFullYear() + '';
  const M = date.getMonth() + 1;
  const D = date.getDate();
  const H = date.getHours();
  const m = date.getMinutes();
  const s = date.getSeconds();
  return formatter
      .replace(/YYYY|yyyy/g, Y)
      .replace(/YY|yy/g, Y.substr(2, 2))
      .replace(/MM/g, (M < 10 ? '0' : '') + M)
      .replace(/DD/g, (D < 10 ? '0' : '') + D)
      .replace(/HH|hh/g, (H < 10 ? '0' : '') + H)
      .replace(/mm/g, (m < 10 ? '0' : '') + m)
      .replace(/ss/g, (s < 10 ? '0' : '') + s);
};
dateFormatter('YYYY-MM-DD HH:mm', '1995/02/15 13:55'); // 1995-02-15 13:55

定期的に使用します

// trim 的实现
str.replace(/(^\s+)|(\s+$)/g, '');

// 去掉回车换行
str.replace(/[\r\n]/g, '');

// 千位加 , 符号
'123456789'.replace(/(\d)(?=(\d{3})+$)/g, '$1,');  // "123,456,789"

// 电话号码分割
'13012345678'.replace(/(\d)(?=(\d{4})+$)/g, '$1 ');  // "130 1234 5678"

// 创建模板引擎
function createTemplate(template) {
  return function(options) {
    return template.replace(/{{(.+?)}}/g, (str, key) => {
      return options[key] || '';
    });
  };
}
const template = createTemplate('{{name}} gets {{stuff}} daily');
template({ name: 'Adam', stuff: 'radio' });

クッキー

class CookieJar {
  set(name, value, days) {
    const date = new Date();
    date.setDate(date.getDate() + days);
    document.cookie = `${name}=${value};expires=${date.toGMTString()};`;
  }

  get(name) {
    const reg = new RegExp(`${name}=(.+?);`);
    if (reg) {
      return reg[1];
    }
    return null;
  }

  remove(name) {
    this.set(name, 1, -1);
  }
}

URL

// 获取地址栏
new URLSearchParams(location.search).get("name"); // "name"

// 获取地址栏参数转对象格式
Object.fromEntries(new URLSearchParams(location.search));  // { ... }

//Object.fromEntries()方法是Object.entries()的逆操作，用于将一个键值对数组转为对象。
const obj = { x: 42, y: 50 };
const tuple = Object.entries(obj); // [['x', 42], ['y', 50]]
const reObj = Object.fromEntries(tuple); // { x: 42, y: 50 }
new URLSearchParams(tuple).toString()  // "x=42&y=50"

ランダムな色

Math.floor(Math.random() * (2 << 23)).toString(16);

エスケープ

function HTMLEncode(html) {
    var temp = document.createElement("div");
    (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
    var output = temp.innerHTML;
    temp = null;
    return output;
}

function HTMLDecode(text) {
    var temp = document.createElement("div");
    temp.innerHTML = text;
    var output = temp.innerText || temp.textContent;
    temp = null;
    return output;
}
var tagText = "<p><b>123&456</b></p>";
var encodeText = HTMLEncode(tagText);
console.log(encodeText); //&lt;p&gt;&lt;b&gt;123&amp;456&lt;/b&gt;&lt;/p&gt;
console.log(HTMLDecode(encodeText)); //<p><b>123&456</b></p>

入力ボックスの内容をコピーします

function copyVal(val,faDom) {
    var faDom = faDom || document.querySelector('body');
    var div = document.createElement('div');
    //不能display:none，会复制不到
    div.style.cssText = `position:fixed;bottom:-99999px`;
    div.innerHTML = `<form name="copyValForm"><input name="beCopy" type="text"  value="${val}" readonly="readonly" /></form>`
    document.querySelector('body').append(div);
    var btn = document.createElement('div')
    btn.className = "copyBtn";
    btn.innerHTML="复制";
    btn.addEventListener('click',function () {
        //不同进入光标也能选中
        // document.form1.beCopy.focus();
        document.copyValForm.beCopy.select();
        document.execCommand("Copy");
        document.copyValForm.beCopy.blur(); //复制后立刻离开光标，打断输入法弹出
        timeMask('复制成功!')
    })
    faDom.append(btn)
}

圧延荷重

// faDom一般是window，如果是另一个div，需要使用绝对定位才有属于div自己的独立滚动条
// sonDom如果不是填充满faDom,那sonDom一定要用padding填充到跟faDom一样的高度
// cb一定要有加载更多判断，比如一个全局变量，否则滚动一下会调用几十次请求
function addScroll(faDom,sonDom,cb) {
    $(faDom).on("scroll",function(){
        // if($('#B').css('display')=='block'){
            var windowHeight = $(faDom).height();//当前窗口的高度
            var scrollTop = $(faDom).scrollTop();//当前滚动条从上往下滚动的距离
            var docHeight = $(sonDom).height(); //当前文档的高度
            // console.log( windowHeight,scrollTop,docHeight);
            //当 滚动条距底部的距离 + 滚动条滚动的距离 >= 文档的高度 - 窗口的高度
            //换句话说：（滚动条滚动的距离 + 窗口的高度 = 文档的高度）  这个是基本的公式
            if (scrollTop + windowHeight >= docHeight - 30) {
                 console.log("===加载更多数据===");
                 if(flag && cb){  // flag是支持请求的标识
                     cb()
                 }
            }
        // }
    });
}

プルリフレッシュ

<article id="article">
   <ul id="ul">
      <li class="li" id="text">下拉刷新</li>
      <li class="li">1</li>
      <li class="li">2</li>
      <li class="li">3</li>
           ...
    </ul>
</article>

let ul = document.getElementById('ul');  // 获取ul列表
let div = document.getElementById('article') // 获取包裹ul列表的div(css:  overflow:scroll;)
let text = document.getElementById('text');  // 写着“下拉刷新”的元素
let start;  // 辅助变量：触摸开始时，相对于文档顶部的Y坐标
let refresh = false;  // 辅助变量：是否刷新

div.addEventListener('touchstart',function(event){
    let touch = event.touches[0];
    start = touch.pageY;  // 辅助变量：触摸开始时，相对于文档顶部的Y坐标
},false);

div.addEventListener('touchmove',function(event){
    // 下拉刷新
    let touch = event.touches[0];
    if(div.scrollTop<=0){
        // 如果ul列表到顶部，修改ul列表的偏移,显示“下拉刷新”，并准备触发下拉刷新功能，可自定义
        ul.style.top = ul.offsetTop + touch.pageY - start +'px'; // ul.style.top = ul.offsetTop + 'px'
        start = touch.pageY;
        // 若ul偏移量过大,则修改文字,refresh置为true,配合'touchend'刷新
        if(ul.offsetTop>=100) {
            text.innerHTML = "释放刷新";
            refresh = true;
        }
    }
},false);

div.addEventListener('touchend',function(event){
    // 若'touchend'时，ul偏移,用setInterval循环恢复ul的偏移量
    if(ul.offsetTop>=0) {
        let time = setInterval(function(){
            ul.style.top = ul.offsetTop -3 +'px';
            // 若ul的偏移量恢复，clearInterval
            if(ul.offsetTop<=0){
                clearInterval(time);
                text.innerHTML = "下拉刷新";
                // 若恢复时'refresh===true',刷新页面
                if(refresh){
                    location.reload();
                }
            }
        })
    }
},false);

プレースホルダ

String.prototype.format = function() {
   if(arguments.length == 0) return this;
   var param = arguments[0];
   var s = this;
   if(typeof(param) == 'object') {
      for(var key in param)
      s = s.replace(new RegExp("\\{" + key + "\\}", "g"), param[key]);
      return s;
   } else {
      for(var i = 0; i < arguments.length; i++)
      s = s.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
      return s;
   }
}
console.log("http://{0}/{1}".format("www.songyanjun.net", "index.html"))
console.log("http://{2}/{1}".format("www.songyanjun.net", "index.html",'1'))
console.log("我叫{name},性别{sex},今年{age}岁".format({name: "美男子",sex: "男",age: 20}));

ソートされた配列の
番号は（直接ソートすることはできません）、手紙缶

let nums = [2, 3, 1];
//两个比较的元素分别为a, b
nums.sort(function(a, b) {
  if(a > b) return 1;
  else if(a < b) return -1;
  else if(a == b) return 0;
})

ダウンロード

var link = document.createElement('a');
link.setAttribute("download", "name");
link.href = "url";
link.click();

写真遅延ロードの
画像遅延ロードされた顔の質問2

滝は
、あなたが行最短の高さに追加された追加するたびに列に配置されたたくさんの写真であります

var arr = ["aa.png","bb.jpg",...]
function LazyImg(arr){
    if(arr.length!=0){
        var url = arr.shift()
        var Img = new Image()
        Img.onload = function () {
            var LH = $('#left').height()
            var RH = $('#left').height()
            if(LH){
               // append
            }else{
               // append
            }
        }
        Img.src = url
    }
}