如何设计一个组件库的组件

学到了此示例返回文档中所有<div>元素的列表，其中class包含”note”或”alert”： var matches = document.querySelectorAll(“div.note, div.alert”);

此示例使用属性选择器返回文档中属性名为”data-src”的div元素列表： var matches = document.querySelectorAll(“div[data-src]”);

此示例使用自定义属性选择器返回文档中属性名为”is-name和is-age的元素列表： var matches = document.querySelectorAll(‘[is-name],[is-age]’)

(new URL(document.location)).searchParams 等价于 new URLSearchParams(location.search)

URL:https://developer.mozilla.org/zh-CN/docs/Web/API/URL

URLSearchparams:https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams

时间戳转化指定的格式

  const format = (date=new Date(),fmt="yyyy-MM-dd hh:mm")=>{
    const o = {
      "M+":date.getMonth()+1,//月份
      "d+":date.getDate(),//日
      "h+":date.getHours(),//时
      "m+":date.getMinutes(),//分
      "s+":date.getSeconds(),//秒
    }
    if(/(y+)/.test(fmt)){
      fmt = fmt.replace(RegExp.$1,(date.getFullYear()+"").substr(4-RegExp.$1.length))
    }
    for(let 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))))
}
}

@supports not (width: clamp(1px, 2px, 3px)) {
  @media screen and (min-width: 375px) {
    html {
      font-size: calc(16px + 2 * (100vw - 375px) / 39);
      }

@supports not (width: clamp(1px, 2px, 3px)) {
  @media screen and (min-width: 375px) {
    html {
      font-size: calc(16px + 2 * (100vw - 375px) / 39);
    }
    return fmt
  }

时间戳显示为多少分钟前，多少天前的处理

  const convertTime=(timestamp)=>{
    timestamp=String(timestamp).padEnd(13,0)
    // 常量
    const minute = 1000*60
    const hour = minute * 60
    const day = hour * 24
    const month = day* 30
    // 偏差时间
    const diffValue = new Date().getTime() - timestamp
    // 表示尚未结束
    const isLast = diffValue > 0
    // 计算差异时间的量级
    const monthC = diffValue / month;
    const weekC = diffValue / (7 * day);
    const dayC = diffValue / day;
    const hourC = diffValue / hour;
    const minC = diffValue / minute; 
    // 数值补0
    const zero = (value)=>{
      if(value < 10){
        return `0${value}`
      }
      return value
    }
    // 返回的值
    let value = '';

    if (monthC > 12) {
      const date = new Date(timestamp);
      if (isLast) {
        value = date.getFullYear() + '年' + zero(date.getMonth() + 1) + '月' + zero(date.getDate()) + '日';
      } else {
        value = date.getFullYear() + '年';
      }
    } else {
      if (monthC >= 1) {
        value = parseInt(monthC) + '月';
      } else if (weekC >= 1) {
        value = parseInt(weekC) + '周';
      } else if (dayC >= 1) {
        value = parseInt(dayC) + '天';
      } else if (hourC >= 1) {
        value = parseInt(hourC) + '小时';
      } else if (minC >= 1) {
        value = parseInt(minC) + '分钟';
      }

      if (value) {
        return isLast ? `${value}前` : `${value}后`;
      }
    }

    return isLast ? '刚刚' : '即将';
  }
  

js 处理DOM渲染

  <template id="tpl">
    <span>${name}</span>
    <span>${age}</span>
  </template>

const tplEle = document.getElementById('tpl').innerHTML // 获取内容

String.prototype.interpolate = function (params) {
  const names = Object.keys(params);
  const vals = Object.values(params);
  console.log(new Function(...names, `return \`${this}\`;`))
  /**
  ƒ anonymous(name,age) {
      return `
              <div class="yy-logout">
                <span class="yy-logout-name">${name}</span>
                <span>${age}</span>
              </div>
            `;
      }
  */
  const str = new Function(...names, `return \`${this}\`;`)(...vals);
  return str;
};

let content = tplEle.interpolate({name:"sunseekers",age:18})

document.body.innerHTML=content

sunseekers

如何设计一个组件库的组件

时间戳转化指定的格式

时间戳显示为多少分钟前，多少天前的处理

js 处理DOM渲染

文档信息

Search

Table of Contents