小编Ste*_*ert的帖子

我一直在努力学习如何编写树摇动友好的代码,但遇到了一个不可避免的副作用的问题,我不知道如何处理.

在我的一个模块中,我访问全局Audio构造函数并使用它来确定浏览器可以播放哪些音频文件(类似于Modernizr的工作方式).每当我尝试树摇动我的代码时,Audio即使我不在我的文件中导入模块,元素及其所有引用也不会被消除.

let audio = new Audio(); // or document.createElement('audio')
let canPlay = {
  ogg: audio.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/, '');
  mp3: audio.canPlayType('audio/mpeg; codecs="mp3"').replace(/^no$/, '');
  // ...
};

我知道包含副作用的代码无法消除,但我找不到的是如何处理不可避免的副作用.我不能只是访问全局对象来创建audio检测功能支持所需的元素.那么我如何处理访问全局浏览器函数/对象(我在这个库中做了很多)的方式,树摇动友好,仍然允许我消除代码？

我一直在对Twitter的嵌入式时间表进行大量研究.我一直试图弄清楚是否可以知道时间线何时完成加载并显示在页面上.此问题已被要求,但尚未实施.我已经走到了尽头,希望有人能够帮助我找到解决方案.这是我到目前为止所发现的:

添加嵌入式时间轴的代码:

<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="YOUR-    WIDGET-ID-HERE">Tweets by @twitterapi</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

脚本运行时会发生什么:

1. 该脚本使用元素替换<a>标记<iframe>.

2. iframe准备好的内容,但是头像图像和'关注@username'按钮没有完成下载.将iframe的height属性设置为0,这样你就不会看到一个没有图像内容.

3. 下载了头像图像,但是"关注@username"按钮仍在下载.内容仍然不可见.

4. 'follow @username'按钮已完成下载.将iframe的height属性设置为匹配的内容的高度iframe.时间轴现在可见.

现在,我已经尝试了我能想到的所有内容,以确定时间线何时可见(不使用settimeout/interval).目标是进行非轮询事件/函数/回调.以下是我迄今为止没有成功的尝试:

• 设置在事件侦听器iframe(如onload,DOMContentLoaded,DOMFrameContentLoaded,等),要知道当内容加载完毕.这iframe没有用,因为没有src属性.在浏览了uglified代码后(我无法找到未压缩的版本),我的猜测是它正在使用写入将内容添加到主体中iframe.
• 设置事件侦听器以了解height属性何时更改iframe.从理论上讲,此事件应该触发三次:第一次加载内容时,第二次height设置为0时,第三次height设置为显示完全加载的时间线时.但是,我只能让前两个案件的事件发生,而第三个案件(我实际想要的那个)从来没有.我用过DOMSubtreeModified,onreadystatechange和onpropertychange,但只是DOMSubtreeModified用来解雇这个事件.
• 在cotents上设置事件监听器iframe.因为JavaScript可以iframe从Twitter 内部到达,所以可以抓取其中的任何元素iframe(例如document …

似乎在<source>为<audio>标签引入元素之前，当音频出现错误时，您可以在audio.error.code. 然而，这似乎不再发生了。由于错误事件现在只在子<source>元素上触发，不再在音频标签上触发，音频标签不再具有error属性（它始终为空）。源标签也没有错误属性。

你可以在这个jsFiddle 中看到这一点。

既然音频标签没有得到错误属性，你打算如何检测错误类型？似乎这是每个浏览器中的错误。

我有一个自定义元素（没有 shadow DOM），我希望能够在任何地方使用，甚至在另一个可能使用 shadow DOM 的自定义元素中。但是，我不确定如何让样式在这两个地方都有效。

例如，假设我创建了一个简单的fancy-button元素：

class fancyButton extends HTMLElement {
  constructor() {
    super();

    this.innerHTML = `
      <style>
      fancy-button button {
        padding: 10px 15px;
        background: rgb(62,118,194);
        color: white;
        border: none;
        border-radius: 4px
      }
      </style>
      <button>Click Me</button>`;
  }
}

customElements.define('fancy-button', fancyButton);

<fancy-button></fancy-button>

在 shadow DOM 元素内，插入的样式标签将允许fancy-button样式工作。但是，如果在 shadow DOM 元素之外使用此组件，则每次使用该元素时都会复制样式标记。

相反，如果我将样式标记添加为 html 导入文件的一部分，那么样式只能在 shadow DOM 之外工作，但至少它们只声明一次。

<!-- fancy-button.html -->
<style>
fancy-button button {
  padding: 10px 15px;
  background: rgb(62,118,194);
  color: white;
  border: none;
  border-radius: 4px
}
</style>

<script> …

In Vue.js, a functional component can return multiple root nodes by using a render function that returns an array of createdElements.

export default {
  functional: true,
  props: ['cellData'],
  render: function (h, context) {
    return [
      h('td', context.props.cellData.category),
      h('td', context.props.cellData.description)
    ]
  }
}

This works great but I'm having trouble trying to create a unit test for such a component. Using shallowMount on the component results in [Vue warn]: Multiple root nodes returned from render function. Render function should return …

根据Netlify 文档的自定义标头，我可以创建一个使用自定义标头的路径

# use these headers for the /index.html file
/index.html
  Cache-Control: max-age=31536000, public

但是，我似乎无法弄清楚是否可以让多个路径使用相同的标头，而不必为每个路径创建一个新条目

/*.js
  Cache-Control: max-age=31536000, public

/*.css
  Cache-Control: max-age=31536000, public

我尝试过以下方法但没有成功

/*.js /*.css
  Cache-Control: max-age=31536000, public

/*.js
/*.css
  Cache-Control: max-age=31536000, public

/*.js, /*.css
  Cache-Control: max-age=31536000, public