小编d13*_*d13的帖子

JavaScript ES6类中的私有属性

是否可以在ES6类中创建私有属性?

这是一个例子.我怎样才能阻止访问instance.property

class Something {
  constructor(){
    this.property = "test";
  }
}

var instance = new Something();
console.log(instance.property); //=> "test"
Run Code Online (Sandbox Code Playgroud)

javascript class private-members ecmascript-6 es2015

410
推荐指数
17
解决办法
22万
查看次数

自定义元素是否有效HTML5?

我一直无法找到自定义标签在HTML5中是否有效的明确答案,如下所示:

<greeting>Hello!</greeting>
Run Code Online (Sandbox Code Playgroud)

我没有在规范中找到任何方式:

http://dev.w3.org/html5/spec/single-page.html

并且自定义标签似乎不会使用W3C验证器进行验证.

html custom-element

171
推荐指数
7
解决办法
6万
查看次数

使用JavaScript ES6箭头功能的即时功能

有谁知道如何使用ES6箭头语法编写立即函数?

这是ES3/5的做法:

(function () {
   //...
}());
Run Code Online (Sandbox Code Playgroud)

我尝试了以下但unexpected token在最后一行得到错误.

(() => {
  //...
}());
Run Code Online (Sandbox Code Playgroud)

你可以在这里测试一下:http://www.es6fiddle.net/hsb8bgu4/

javascript function ecmascript-harmony ecmascript-6 arrow-functions

35
推荐指数
2
解决办法
1万
查看次数

什么是有效的HTML5文档?

我刚刚阅读了HTML5作者规范.它声明<html>,<head><body>标签是可选的.这是否意味着您可以将它们完全保留并且仍然具有有效的HTML5文档?

如果我正确地解释这个,这意味着这应该是完全有效的:

<!DOCTYPE html>
<p>Hello!</p>
Run Code Online (Sandbox Code Playgroud)

它是否正确?

你可以在这里查看规范:

http://dev.w3.org/html5/spec-author-view/syntax.html#syntax

"8.1.2.4可选标签"是可以省略的<html>,<head>并且<body>

html html5 html-validation

28
推荐指数
4
解决办法
1万
查看次数

使用 MatterJS 防止通过其他物体强制拖动物体

我正在使用 MatterJs 进行基于物理的游戏,但还没有找到解决防止物体被鼠标强制拖动穿过其他物体的问题的解决方案。如果您将一个实体拖入另一个实体,则被拖动的实体会迫使自己进入并穿过另一个实体。我正在寻找一种可靠的方法来防止它们相交。您可以在任何 MatterJS 演示中观察这种效果,方法是用鼠标选择一个主体,并尝试强制它穿过另一个主体。下面是一个典型的例子:

在此处输入图片说明

https://brm.io/matter-js/demo/#staticFriction

不幸的是,这会根据拖放操作破坏任何游戏或模拟。我尝试了许多解决方案,例如在发生碰撞时打破鼠标约束,或降低约束刚度,但没有任何可靠的方法。

欢迎任何建议!

javascript physics matter.js

17
推荐指数
2
解决办法
2494
查看次数

从冻结的父对象创建新对象

此示例创建一个对象,冻结它,然后从冻结对象创建一个新对象.如果第二个对象尝试更改测试属性,则不能.它保持冻结,第一个对象的值为10.

//Create an object and freeze it

var first = {
    test: 10
};
Object.freeze(first);

//Create a second object from the first one and
//try and change the new test property (you can't)

var second = Object.create(first);
second.test = 20;
console.log(second.test); //10
Run Code Online (Sandbox Code Playgroud)

这是我的问题:

second.test新对象的新属性,还是只是对冻结的第一个对象中的属性的引用?
是否可以将冻结first.test用作默认值,但是second.test如果需要则覆盖它?

我问的原因是因为我想将一个不可变的基础对象作为具有默认值的模板,然后使用它来创建我可以自定义的新对象.对此最好的方法是什么?

谢谢!

javascript inheritance prototypal-inheritance

16
推荐指数
2
解决办法
3810
查看次数

使用JavaScript ES6模块导入现有库

如何使用JavaScript的ES6模块加载和运行现有的库?

例如,假设我需要加载现有的polyfill:

import {poly} from "thirdParty/poly"; 
Run Code Online (Sandbox Code Playgroud)

如何poly在不更改源的情况下运行导入的脚本并将其属性加载到当前命名空间?

以下是两个实际问题,以帮助澄清我正在尝试解决的问题:

  1. 我有一个脚本rafPolyfill.js,它是window.requestAnimationFrame的polyfill.我需要将它导入全局范围并在加载后立即运行它.<script>标签很容易做到这一点:

它运行并将自身加载到全局范围.如何使用ES6模块完成这项工作?

  1. 我有另一个脚本Font.js,它是一个字体的预加载器.它让你创建这样的新字体对象:

    var font = new Font();

我使用Font.js加载脚本标记,如下所示:

<script src="Font.js"><script>
Run Code Online (Sandbox Code Playgroud)

如果不访问,更改或理解此脚本的源代码,如何使用ES6模块以与<script>标记相同的方式加载和使用ES6模块?我只需要这些脚本在加载时运行并自行处理.

可能的解决方案可能是使用模块Loader API:

http://wiki.ecmascript.org/doku.php?id=harmony:module_loaders

这个文档描述了加载器的全局绑定System,但是我恐怕没有词汇来完全理解它试图解释的内容.任何有关解码此文档的帮助将不胜感激!

javascript import module ecmascript-harmony ecmascript-6

9
推荐指数
1
解决办法
8788
查看次数

如何使用重力沿弯曲路径制作动画

我正在尝试创建一个模拟球,其中一个球遵循运动路径,类似于:

https://bl.ocks.org/mbostock/1705868

然而,我不想使用补间,而是希望球的运动由重力和物体的速度决定 - 类似于过山车,就像这样:

https://www.myphysicslab.com/roller/roller-single-en.html

这是我到目前为止所做的,但是有一个小问题,过山车每一帧都会略微增加能量而不是失去能量:

https://jsbin.com/jidazom/edit?html,js,output

x

任何有关如何解决这个问题的建议将不胜感激!

javascript animation svg physics d3.js

8
推荐指数
1
解决办法
376
查看次数

使用setInterval调用的Javascript绑定

如何使用"call"与"setInterval"来获取对象文字以调用其自己的方法之一?

这是一个例子.这有效,我理解为什么它有效.timer对象每秒调用一次自己的tick方法

var timer =
{ 
  start: function()
  {
    var self = this;
    setInterval(function(){self.tick();}, 1000);

  },

  tick: function()
  {
    console.log("tick!");
  }
};

timer.start();
Run Code Online (Sandbox Code Playgroud)

我尝试使用"call"来简化此代码.下一个例子是我想出的最好的例子.但它不起作用:tick方法只调用一次,然后我得到一个类型错误.

var timer =
{ 
  start: function()
  {
    setTimeout.call(this, this.tick(), 1000);
  },

  tick: function()
  {
    console.log("tick!");
  }
};

timer.start();
Run Code Online (Sandbox Code Playgroud)

我想我真的不明白呼叫是如何运作的.谁能解释我做错了什么?

javascript binding call object-literal setinterval

5
推荐指数
1
解决办法
8974
查看次数

Gatsby:从电子邮件链接中消失的 url 参数

我正在盖茨比开发一个网站。用户会收到一封电子邮件,其中包含包含一次性令牌的链接,如下所示:

https://www.example.com/approval?token=hIPdI7oSw6KV6k8ttsXG3XAHmIqExyB01YkChxiLR9leksJ67iRme6yyxfBztz3Z

这应该将它们带到页面approval并提供tokenas 参数。

它在开发版本中工作正常,但在生产版本中,url 中缺少参数,用户只是被定向到https://www.example.com/approval

有谁知道为什么 Gatsby 可能会在生产版本中重写没有参数的 url,有什么方法可以防止这种情况发生吗?

编辑:该网站托管在 CloudFront 上,我们已启用查询参数转发。可能在另一个级别发生了一些重定向?

parameters reactjs gatsby

4
推荐指数
1
解决办法
1089
查看次数

如何在Codemirror 6中搜索并突出显示子字符串?

我正在构建一个简单的代码编辑器来帮助孩子们学习 HTML。我试图添加的一项功能是,当用户将鼠标悬停在渲染的代码(在 iframe 中)上时,编辑器中相应的 HTML 代码会突出显示。因此,例如,如果用户将鼠标悬停在小猫的图像上,则实际代码 将会在编辑器中突出显示。

将鼠标悬停在 iframe 上以获取该元素的 html 源是很简单的部分,我已经完成了(document.elementFromPoint(e.clientX, e.clientY在 iframe 本身中使用,并将其发布到父级) - 所以这不是我需要帮助的部分。我不明白的部分是如何在代码编辑器中搜索并突出显示所选代码的字符串。

我在这个项目中使用 Codemirror 6,因为它似乎会给我最大的灵活性来创建这样的功能。然而,作为 Codemirror 6 的新手,我正在努力阅读文档来找出应该从哪里开始。看来我需要完成的步骤是:

  1. 在编辑器文本中搜索与字符串匹配的范围(即“<img src="kittens.gif"”)。
  2. 在编辑器中突出显示该范围。

任何人都可以给我一些关于我应该在 Codemirror 6 API 中的何处开始实现此功能的建议吗?看起来应该很简单,但我对 Codemirror API 和简洁文档的不熟悉使这变得困难。

codemirror

4
推荐指数
1
解决办法
3012
查看次数

将字符串数组更改为字符串数组

我有一个包含数组的字符串:

"[one, two, three]"
Run Code Online (Sandbox Code Playgroud)

我想把它改成一个字符串数组,如下所示:

["one", "two", "three"]
Run Code Online (Sandbox Code Playgroud)

任何帮助将非常感谢!

更新:谢谢大家的帮助,你可以在这里看到这个结果:http: //kittykatattack.github.io/storymaker/

javascript regex string

1
推荐指数
1
解决办法
97
查看次数

将 HTML 标签字符串转换为数组?

我正在尝试将 HTML 字符串转换为 HTML 数组。例如,我可能有一个如下所示的任意 HTML 字符串:

"<div>This</div><h1>Is</h1> <p>A</p> <a href="#">Test</a>"

(There may or may not be spaces between the tag elements)

I'm trying to convert it into an array that looks like this:

["<div>This</div>", "<h1>Is</h1>", "<p>A</p>", "<a href="#">Test</a>"]
Run Code Online (Sandbox Code Playgroud)

This is just for displaying the tags as text - I'm not going to use them as HTML elements.

I have looked at this example here, and it almost works except it strips the tags from the inner text: /sf/answers/3803844131/

I'm …

html javascript regex arrays string

-2
推荐指数
1
解决办法
442
查看次数