注意:在假设此问题重复之前,此问题底部有一个部分解决了为什么一些类似的问题无法提供我正在寻找的答案.

我们都知道将NodeList转换为数组很容易,有很多方法可以做到:

[].slice.call(someNodeList)
// or
Array.from(someNodeList)
// etc...

我所追求的是相反的; 如何将节点数组转换为静态NodeList？

我为什么要这样做？

在没有深入研究的情况下,我正在创建一种新方法来查询页面上的元素,即:

Document.prototype.customQueryMethod = function (...args) {...}

为了坚持如何querySelectorAll工作,我想要返回静态集合NodeList而不是数组.

到目前为止,我已经以三种不同的方式解决了这个问题:

尝试1:

创建文档片段

function createNodeList(arrayOfNodes) {
    let fragment = document.createDocumentFragment();
    arrayOfNodes.forEach((node) => {
        fragment.appendChild(node);
    });
    return fragment.childNodes;
}

虽然这确实返回了NodeList,但这不起作用,因为调用appendChild会从DOM中的当前位置(它应该保留的位置)中移除节点.

另一种变化涉及cloning节点并返回克隆.但是,现在您将返回克隆节点,这些节点没有引用DOM中的实际节点.

尝试2:

试图"模拟"NodeList构造函数

const FakeNodeList = (() => {

    let fragment = document.createDocumentFragment();
    fragment.appendChild(document.createComment('create a nodelist'));

    function NodeList(nodes) {
        let scope = this;
        nodes.forEach((node, i) => {
            scope[i] = node;
        });
    }

    NodeList.prototype = …

当我只对索引0之外的数组值感兴趣时,我可以避免在数组解构时声明无用的变量吗？

在下面,我想避免声明a,我只对索引1及更高版本感兴趣.

// How can I avoid declaring "a"?
const [a, b, ...rest] = [1, 2, 3, 4, 5];

console.log(a, b, rest);

webpack在构建密封之前是否公开依赖树？我已经搜索了整个编译器实例,但没有找到任何关于依赖树的信息.似乎应该有一个隐藏在该对象的某个地方,因为webpack必须知道这个树是什么,以便以后输出stats.json.

我已经尝试过使用dependency-treenpm包,但它不支持我在webpack配置中的一些东西,所以树不完整.

我目前正在使用最新版本的Chrome(43.0.2357.130),在window.print()使用⌘P 从vs 调用print时,我遇到了打印功能的差异.

使用window.print()它打印时正确输出到控制台.Before Print打开打印对话框After Print时以及关闭对话框时输出.

但是,在使用Chrome菜单或⌘P进行打印时,它会同时记录这些内容Before Print,并After Print在打印对话框打开时记录到控制台.

这是我正在使用的代码,在其他浏览器中运行良好.

function beforePrint() {
    console.log('Before Print');
}

function afterPrint() {
    console.log('After Print');
}

if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function (mql) {
        (mql.matches) ? beforePrint() : afterPrint();
    });
}
else {
    // basically a fallback for < IE11
    window.addEventListener('beforeprint', beforePrint, false);
    window.addEventListener('afterprint', afterPrint, false);
}

再一次为了清晰,好像这是控制台:

这是我期望的输出:

> window.print()
  Before Print
  // Print Dialog is now open, I …

我正在尝试创建一个特定于表单元素中可用的Web组件,它具有a name和a value.我承认,我可以创建一个Web组件,它extends的HTMLInputElement:

<input is="very-extended">

但我正在努力创造一个全新的元素.

创建常规Web组件时,可以从regular HTMLElement(HTMLElement.prototype)的原型创建它.这让我想到我可以用HTMLInputElement(HTMLInputElement.prototype)的原型创建一个不同的元素.您实际上extending在输入元素的API 时使用该原型,那么为什么我不能使用该原型来创建一个在表单中工作的全新元素？

如果你看一下常规输入字段的阴影dom:

你可以看到里面有一个div.我知道这HTMLInputElement有方法和属性,getter/setter等等.那么为什么当我尝试创建我的组件时,它不能成为表单中找到的名称,值对的一部分？

以下是我尝试创建此Web组件的示例:

请注意,他应该在支持Web组件的浏览器中进行测试.

(function() {

  var iconDoc = (document._currentScript || document.currentScript).ownerDocument;
  var objectPrototype = Object.create(HTMLInputElement.prototype);

  Object.defineProperty(objectPrototype, 'name', {
    writable: true
  });

  Object.defineProperty(objectPrototype, 'value', {
    writable: true
  });

  objectPrototype.createdCallback = function() {
    var shadow = this.createShadowRoot();
    var template = iconDoc.querySelector('#test');
    shadow.appendChild(template.content.cloneNode(true));
  };

  document.registerElement('custom-input', {
    prototype: objectPrototype
  });

})();

console.log(
  $('form').serialize()
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<template …

我试图确定我的节点进程是否在git目录中运行。可以使用以下方法，但仍在控制台中输出致命错误。

function testForGit() {
    try {
        var test = execSync('git rev-parse --is-inside-work-tree', {encoding: 'utf8'});
    } catch (e) {
    }
    return !!test;
}

console.log(testForGit());

当在git控制下的目录中时，得到true的结果是。但是当在git控制的目录之外时，我得到：

fatal: Not a git repository (or any of the parent directories): .git
false

我的问题：

有没有办法抑制记录的错误？还是有更好的方法来确定我是否在git控制下的目录中？

本质上，我试图做相当于

if git rev-parse --git-dir > /dev/null 2>&1; then
    ... do something
fi

Safari 似乎无法识别使用URL.createObjectURL()创建的 URL，该 URL 在 URL 的末尾包含一个锚点。当没有锚点时，它工作正常，但在我使用 SVG 时需要有锚点。此问题中的代码已被隔离以显示问题。

注意：这只是 Safari 中的一个问题。Chrome 和 Firefox 工作正常。

以下是创建 Blob URL 的示例：

var blob = new Blob([
    `<svg xmlns="http://www.w3.org/2000/svg">
        <rect id="rect" fill="black" width="20" height="20"></rect>
    </svg>`
], {type: 'image/svg+xml'});

var url = URL.createObjectURL(blob) + '#rect';

$.get(url).done(function (res) { console.log(res) });

上面的代码创建了一个格式如下的 URL：

blob:http://localhost/e060d31f-6eb0-4565-890d-6de601efcc3e#rect

但是当我尝试获取它的内容时，我收到了 404（未找到）错误：

Failed to load resource: the server responded with a status of 404 (Not Found)

如果我从 URL 中删除锚点，这是对我没有意义的部分：

// don't use an anchor
var url = URL.createObjectURL(blob); …

我试图在白色空格(\s)上分割一个字符串,但这不是在"引用"部分之间.

我按以下方式匹配这些引用部分之间的所有文本:

(['"`]).*?\1

Regex101

但是,当我尝试将其添加为负向前瞻时,只能在这些引号之外的空白区域上拆分,我无法使其工作:

\s(?!(['"`]).*?\1)

Regex101

我怎样才能分割出不在"引号"中的空格？

背景信息

我正在编写一个小型JavaScript库,如果其他人最终想要贡献,我希望尽可能简化贡献.目前,我遇到了版本化文件dist夹中的内置文件的问题.

我在用:

• Git用于版本控制,Github用于存储库管理.
• Gulp.js用于构建源文件以及提交和推送版本化文件

Gulp运行构建任务,将JavaScript文件连接并缩小为all.min.js文件并将该文件放在dist文件夹中.我遇到的麻烦是根据该文件夹进行发布.

我尝试过的事情

1. 即使使用构建的文件,也要发生正常的git流.我的意思是,当用户创建一个拉取请求来掌握时,其中一个差异就是all.min.js.这通常会导致冲突,并且当确认拉取请求时,all.min.js不再标记"version1.xx".

2. 我的下一个想法是在gulp构建过程中添加dist文件夹.gitignore,然后使用npm包注释掉dist文件夹,提交和推送,然后取消注释该行.

这当然不起作用,因为只要dist文件夹存在于repo中,.gitignore就不适用于该特定项目.

3. 最后一个想法是开发人员开发时,将这些文件构建到build文件夹,然后将该文件夹添加到.gitignore.这样,当我使用Gulp"释放"时,我没有文件冲突,并且标记是一致的.发布任务,只有那些任务会推送到该dist文件夹.但是,我仍然觉得这种方式对错误太开放了.但是,也许这个解决方案是最好的.

问题: 如何改进这些流程以实现一致的开发周期？

我正在构建一个将 svg 图标呈现到 Shadow Dom 页面上的 Web 组件。IE

<ba-icon i="airplane"></ba-icon>

我有一个外部 svg sprite 文件，其中包含大量 SVG 图标。

Web 组件的内部将以下内容渲染到 Shadow Dom 中：

<svg>
    <use xlink:href="i.dist.svg#i-airplane"></use>
<svg>

一切都在屏幕上正确呈现，但我想要一些嵌入在 SVG 内部的信息，特别是包含在viewbox, 中的信息（例如：）viewBox="0 0 32 32"。

我知道在 中渲染的内容use也输入到 Shadow Dom 中。但我试图找到另一种获取嵌入到use. 我试图对 svg 的内容进行 ajax，但这对于页面上的多个图标来说变成了一个大问题，因为 Web 组件的每个实例现在都在进行该调用。我还能怎么做？

以供参考：