日常开发小问题（JS）

开发需求中所需要全局定义或修改原型的方法

String (字符串方法)

format

格式化字符串,项目中可用于中英文数字类的字符替换

String.prototype.format = function () {
    if (arguments.length == 0) return this;
    for (var s = this, i = 0; i < arguments.length; i++)
        s = s.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]); // 根据索引替换内容
    return s;
};
用法:
let str1 = '这里有{0}个帅哥!'
let str2 = '这里不但有{0}个帅哥!还有{1}个漂亮的美女!'
console.log(str1.format(100)) //这里有100个帅哥!
console.log(str2.format(100,200)) //这里不但有100个帅哥!还有200个漂亮的美女!

arguments

iframe

1. 老项目中多层iframe嵌套互相取值

解决方法1(通过监听sessionStorage) :

//如果是vue项目可以挂载到vue下
function resetSetItem (key,newVal){
        if(key === '对应key名'){
            let newStorageEvent = document.createEvent('StorageEvent')
            const storage = {
                setItem : function (k, val){
                    sessionStorage.setItem(k, val)
                    newStorageEvent.initStorageEvent('setItem',false,false,k,null,val,null,null)
                    window.dispatchEvent(newStorageEvent)
                }
            }
            return storage.setItem(key, newVal)
        }
    }
// 触发页面（填充数据的页面）
resetSetItem('对应key名', 123)
// 监听页面（需要获取数据的页面）
window.addEventListener('setItem',function(){
    console.log(12345,'触发')
})

initStorageEvent, dispatchEvent

URL

1.老项目中获取路由传参

解决方法1 new URL() searchParams方法

new URL(location.href).searchParams.get('参数名') // 返回字符串

解决方法2 es6 Map对象

const params = new Map(location.search.slice(1).split('&').map(kv => kv.split('=')))

params.has('参数名') // true||false
params.get('参数名') // ...

searchParams, Map

字体加载

1.判断系统中是否有所需字体

解决方法 利用canvas 获取文字坐标点，然后通过对默认字体和所需字体坐标点对比，有变化说明字体生效，系统支持该字体

// 获取系统当前使用字体
window.getComputedStyle(document.documentElement)).fontFamily
//验证传入的字体是否支持
var isSupportFontFamily = function(f) {
  //    f是要检测的字体
  if (typeof f != 'string') {
    return false
  }
  //    h是基础字体(默认字体)
  var h = 'Arial';
  if (f.toLowerCase() == h.toLowerCase()) {
    return true
  }
  //    设置一个检测的字符A,看他是否支持f字体
  var e = 'a';
  var d = 100;
  var a = 100;
  var i = 100;
  var c = document.createElement('canvas');
  var b = c.getContext('2d');
  c.width = a;
  c.height = i;
  b.textAlign = 'center';
  b.fillStyle = 'black';
  b.textBaseline = 'middle';
  var g = function(j) {
    b.clearRect(0, 0, a, i);
    //        字体是传入的j,或者是默认的h
    b.font = d + 'px ' + j + ', ' + h;
    b.fillText(e, a / 2, i / 2);
    //        获取所有的canvas图片信息
    var k = b.getImageData(0, 0, a, i).data;
    //        k调用数组的 filter方法,筛选符合条件的。改变原数组。
    return [].slice.call(k).filter(function(l) {
      return l != 0
    });
  };
  //    返回结果,如果h默认字体和输入待检测字体f.通过g函数检测得到的字符串不一致,说明字体生效
  return g(h).join('') !== g(f).join('');
};

// 下载字体
async function loadFonts () {
    if (!window.FontFace) { //不支持FontFace时利用@font-face 下载
        let g = `url('字体url') format('truetype')`;
        let styleSheet = document.styleSheets[0];
        styleSheet.insertRule(`@font-face {font-family: '文字标识';src: ${g};}`, 0);
    } else {
        const font = new FontFace(
          '字体标识',
          'url('字体url')'
        )
        await font.load();
        document.fonts.add(font);
    }
}

出处 ,FontFace ,FontFaceSet