css 加载器

动态添加 css 样式表

// 在网页加载完成后引入新的css样式表
function addCssFile(cssUrl) {
  var htmlHead = document.getElementsByTagName('head')[0]
  var link = document.createElement('link')
  link.type = 'text/css'
  link.href = cssUrl
  htmlHead.appendChild(link)
}

动态移除 css 样式表

找到对应的 css link 标签, 将其 dom 直接移除即可达到卸载 css 样式表的目的

// 这里通过 css 文件名为标示来移除指定的css外部样式表, 你也可以使用其他的标志
function removeCssFile(cssFileName) {
  var cssList = document.getElementsByTagName('link')

  for (var i = 0; i < cssList.length; i++) {
    let target = cssList[i]
    let targetHref = target.getAttribute('href')
    if (targetHref && targetHref.indexOf(cssFileName) > -1) {
      target.parentNode.removeChild(target)
    }
  }
}

css 样式表的加载器

通过以上的方法，我们可以只做一个 css 外部样式表的加载起，可以在网页加载完成之后根据需求，选择性的加载 css 样式表

var CssLoader = function(href) {
  this._href = href
  this._id = Math.random()
    .toString(32)
    .slice(2, 9)
}

var fn = CssLoader.prototype

// 加载到网页
fn.import = function() {
  var href = this._href
  var id = this._id
  var htmlHead = document.getElementsByTagName('head')[0]
  var link = document.createElement('link')
  link.type = 'text/css'
  link.href = href
  link.setAttribute('css_id', id)

  htmlHead.appendChild(link)
  return true
}

// 移除 css
fn.remove = function() {
  var id = this._id
  var href = this._href
  var cssList = document.getElementsByTagName('link')

  for (var i = 0; i < cssList.length; i++) {
    let target = cssList[i]
    let targetHref = target.getAttribute('href')
    let targetId = target.getAttribute('css_id')
    if (targetId === id && targetHref === href) {
      target.parentNode.removeChild(target)
      return true
    }
  }
}

var cssLoaderHandle = new CssLoader(
  'https://static.hai-fe.com/yaksa/085dcb13dfd27857b4cd.css'
)
// 载入到网页中
cssLoaderHandle.import()

setTimeout(function() {
  // 从网页中移除
  cssLoaderHandle.remove()
}, 5 * 1000)

TIP

使用场景： 如 SPA 在代码拆包的场景下使用，避免首屏加载所有的 css 样式表，按需加载页面或者组件时可使用该方法按需加载 css 样式，并可在必要的时候（页面切换，组件切换）移除 css 样式，避免页面样式被污染的情况