主页 / user-240351

Виталик Черный's questions

Martin Hope
Виталик Черный
Asked: 2020-02-16 20:49:05 +0000 UTC
  • 0

正则表达式取自注释。我需要删除对象中在未定义位置具有样式的元素，因为键是文件的路径，但最后始终是.js权限

var a = {
    './js/vendors~first~index~3f7f18c8925be11047bf.js': 1,
    './js/first~3f7f18c8925be11047bf.js': 1,
    './js/index~3f7f18c8925be11047bf.js': 1,
    './js/second~3f7f18c8925be11047bf.js': 1,
    'css/styles~first~3f7f18c8925be11047bf.css': 1,
    'css/styles~index~3f7f18c8925be11047bf.css': 1,
};

for (let key in a ) {
    let ad = key.search(/^.+?styles.+?\.js$/);
    (ad === -1) ? console.log(ad, key) : null;
}

在此处输入图像描述

javascript
Martin Hope
Виталик Черный
Asked: 2020-12-11 04:24:36 +0000 UTC
  • 0

混合

允许您在同一个 DOM 节点上使用不同 BEM 实体的技巧。

混合允许：

  • 结合多个实体的行为和样式，无需重复代码；
  • 项目清单

<!-- Блок `header` -->
<div class="header">
  <!-- К блоку `search-form` примиксован элемент `search-form` блока `header`-->
  <div class="search-form header__search-form"></div>
</div>

资料来源： 快速入门 - 混合。

我有一个块header。它里面是一个菜单nav和子元素nav__item，nav__link。我需要更改导航的样式，为此我添加了类：header__nav、header__item、header__link。问题是headerblock里面可能还有其他的link，但是会有不同的style，header__link不适合命名，而且通过主父类写style也是不好的，因为会在不同的地方重复，但会有不同的风格。

<body class="page">
  <header id="home" class="header page__header">
    <nav class="nav header__nav">
      <li class="nav__item header__item">
        <a href="#home" class="nav__link header__link">Home</a>
      </li>
      <li class="nav__item header__item">
        <a href="#about" class="nav__link header__link">About</a>
      </li>
      <li class="nav__item header__item">
        <a href="#works" class="nav__link header__link">Works</a>
      </li>
    </nav>
  </header>
</body>

之前，我只是根据父类的类写了一个类：header-nav，但这使得块重用变得困难。

<body class="page">
  <header id="home" class="header page__header">
    <nav class="header-nav header__nav">
      <li class="header-nav__item">
        <a href="#home" class="header-nav__link header-nav__link_active">Home</a>
      </li>
      <li class="header-nav__item">
        <a href="#about" class="header-nav__link">About</a>
      </li>
      <li class="header-nav__item">
        <a href="#works" class="header-nav__link">Works</a>
      </li>
    </nav>
  </header>
</body>

PS：我可以选择提供第二堂课 - 一个街区，但我不知道它有多合适。

<body class="page">
  <header id="home" class="header page__header">
    <nav class="nav header-nav">
      <li class="nav__item header-nav__item">
        <a href="#home" class="nav__link header-nav__link">Home</a>
      </li>
      <li class="nav__item header-nav__item">
        <a href="#about" class="nav__link header-nav__link">About</a>
      </li>
      <li class="nav__item header-nav__item">
        <a href="#works" class="nav__link header-nav__link">Works</a>
      </li>
    </nav>
  </header>
</body>

html
Martin Hope
Виталик Черный
Asked: 2020-11-19 06:15:04 +0000 UTC
  • 0

该块有background-image: url("../img/header__bg_3.jpg"). 您需要提前加载图像才能在不闪烁的情况下进行url更改js。实现这一点的最佳方法是什么，或者以另一种方式更好？

也有人想到，缓存后，需要检查缓存中是否存在这些图片，以免每次都加载。

PS：如有必要，我会举个例子。

PSS：除了缓存，我还需要平滑地改变一个元素的背景。

javascript
Martin Hope
Виталик Черный
Asked: 2020-11-04 23:07:08 +0000 UTC
  • 1

当您单击链接时，它会滚动。对我来说，当通过单击另一个链接滚动时，优先级会发生变化，并且滚动更改会发生在另一个地方。

现在转换看起来像这样：

function getElemClass(name) {
  return document.getElementsByClassName(name);
}

function getElemId(name) {
  return document.getElementById(name);
}

function scrollToElement(duration, on, aim) {
  return function(e) {
    let target = e.target;
    let _aim = aim || this.href || target.href;

    //Цикл двигается вверх от target к родителям.
    if (!_aim) {
      while (target != this) {
        target = target.parentNode;
        //Поиск интересующего элемента
        if (target.tagName === "A") {
          _aim = target.href;
          break;
        }
      }
    }

    if (!_aim) return;

    _aim = _aim.substring(_aim.indexOf("#"));

    let distance = Math.abs($(on)[0].getBoundingClientRect().top -
      $(_aim)[0].getBoundingClientRect().top);

    e.preventDefault();

    $(on).animate({
      scrollTop: distance
    }, duration);
  }
}

getElemClass("nav")[0].addEventListener("click", scrollToElement(1000, "html"));
*,
*:before,
*:after {
  box-sizing: border-box;
}

body,
p,
figure,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

ul,
ol,
dl,
li,
menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

button {
  outline: none;
  border: none;
  padding: 0;
}

input,
select {
  outline: none;
  border: none;
}

a {
  text-decoration: none;
}

i {
  font-style: normal;
}

img {
  max-width: 100%;
  vertical-align: middle;
  border: none;
}

#header {
  height: 800px;
  background: #312;
}

#main {
  height: 800px;
  background: #653;
}

#footer {
  height: 800px;
  background: #762;
}

.nav {
  position: fixed;
  font-size: 30px;
  background: #764;
  padding: 10px;
  left: 50%;
  display: flex;
  transform: translateX(-50%);
}

.nav__item:not(:last-child) {
  margin-right: 20px;
}

.nav__link {
  color: #fff;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <nav class="nav">
    <li class="nav__item">
      <a href="#header" class="nav__link">Header</a>
    </li>
    <li class="nav__item">
      <a href="#main" class="nav__link">Main</a>
    </li>
    <li class="nav__item">
      <a href="#footer" class="nav__link">Footer</a>
    </li>
  </nav>
  <header id="header"></header>
  <main id="main"></main>
  <footer id="footer"></footer>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

</html>

有必要这样：

function getElemClass(name) {
  return document.getElementsByClassName(name);
}

function getElemId(name) {
  return document.getElementById(name);
}

function scrollToElement(duration, on, aim) {
  return function(e) {
    let target = e.target;
    let _aim = aim || this.href || target.href;

    //Цикл двигается вверх от target к родителям.
    if (!_aim) {
      while (target != this) {
        target = target.parentNode;
        //Поиск интересующего элемента
        if (target.tagName === "A") {
          _aim = target.href;
          break;
        }
      }
    }

    if (!_aim) return;

    _aim = _aim.substring(_aim.indexOf("#"));

    let distance = Math.abs($(on)[0].getBoundingClientRect().top -
      $(_aim)[0].getBoundingClientRect().top);

    e.preventDefault();

    getElemId(_aim.split('#')[1]).scrollIntoView({
      behavior: 'smooth'
    });
  }
}

getElemClass("nav")[0].addEventListener("click", scrollToElement(1000, "html"));
*,
*:before,
*:after {
  box-sizing: border-box;
}

body,
p,
figure,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

ul,
ol,
dl,
li,
menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

button {
  outline: none;
  border: none;
  padding: 0;
}

input,
select {
  outline: none;
  border: none;
}

a {
  text-decoration: none;
}

i {
  font-style: normal;
}

img {
  max-width: 100%;
  vertical-align: middle;
  border: none;
}

#header {
  height: 1200px;
  background: #312;
}

#main {
  height: 1200px;
  background: #653;
}

#footer {
  height: 1200px;
  background: #135;
}

.nav {
  position: fixed;
  font-size: 30px;
  background: #764;
  padding: 10px;
  left: 50%;
  display: flex;
  transform: translateX(-50%);
}

.nav__item:not(:last-child) {
  margin-right: 20px;
}

.nav__link {
  color: #fff;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <nav class="nav">
    <li class="nav__item">
      <a href="#header" class="nav__link">Header</a>
    </li>
    <li class="nav__item">
      <a href="#main" class="nav__link">Main</a>
    </li>
    <li class="nav__item">
      <a href="#footer" class="nav__link">Footer</a>
    </li>
  </nav>
  <header id="header"></header>
  <main id="main"></main>
  <footer id="footer"></footer>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

</html>

PS：第二个选项不是很合适，因为有支持，无法控制区间。如果有一个js可以配置的纯选项甚至会很好，但最重要的是事件不会相互冲突。

javascript
Martin Hope
Виталик Черный
Asked: 2020-06-04 00:37:09 +0000 UTC
  • 0

function listner(e) {
	console.log("header");
	document.addEventListener("click", function f() {
		console.log("document");
	});
}

document.getElementsByTagName("header")[0].addEventListener("click", listner);
.header {
  height: 200px;
  background: #142;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>html-ready</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
</head>
<body class="page">
	<header class="header">
	</header>
</body>
</html>

javascript
Martin Hope
Виталик Черный
Asked: 2020-03-09 03:59:41 +0000 UTC
  • 1

单击一个元素first会添加一个样式animation = "move 5s";。如何callback在css动画结束时重置样式？您可以以具有样式的类的形式抛出修饰符，或者通过属性然后重置它，但是如何获取它callback？

PS：为了清楚起见，我通过setTimeout.

function getId(id) {
	return document.getElementById(id);
}

function getStyle(elem) {
	return getComputedStyle(elem);
}

function setStyle(elem) {
	return elem.style;
}

let firstElem = getId("first");

firstElem.addEventListener('click', function() {
	setStyle(firstElem).animation = "move 5s";
	setTimeout(function() {
		setStyle(firstElem).animation = "none";
	}, 5000);
});
body {
	background: #3B3738;
	padding: 10px;
}

.elem {
	position: relative;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	text-transform: uppercase;
	padding: 20px;
	background: #512;
	width: 150px;
	box-shadow: inset 0 0 0 1px #000;
	//animation: move 5s;
	left: 0;
	margin-bottom: 10px;
	&:not(:last-child) {
		margin-bottom: 10px;
	}
}

@keyframes move {
	50% {
		left: 100%;
		transform: translateX(-100%);
	}
}
<div class="elem" id="first">First</div>

javascript
Martin Hope
Виталик Черный
Asked: 2020-02-06 20:04:26 +0000 UTC
  • -1

如何在纯JS中制作无限动画？

正方形必须将其大小从指定值更改为 0，反之亦然。

var firstElem = document.getElementById("elemFirst");

function getSizeFirst(elem) {
  var i = getComputedStyle(elem).height.slice(0, -2);

  function changeSize() {
    if (i > 0) {
      --i;
      elem.style.height = i + "px";
      setTimeout(function() {
        changeSize();
      }, 0)
    } else {
      return 0;
    }
  }
	
	changeSize();
}

getSizeFirst(firstElem);
#elemFirst {
  width: 50px;
  height: 50px;
  background: #223;
}
<div id="elemFirst"></div>

javascript
Martin Hope
Виталик Черный
Asked: 2020-12-29 00:51:05 +0000 UTC
  • 0

在这个示例中有一个包含演员列表的页面。假设我组成了所有元素，但序列被破坏了。如何按演员的名字对编辑器中的元素进行排序，因为手动操作是黑暗的。告诉我在这种情况下您如何制作网站？

.user-list__user {
  background: #325;
  color: #fff;
  border: 2px solid #287;
  margin-bottom: 10px;
  padding: 5px;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Test</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
</head>
<main class="main">
	<div class="user-list">
		<div class="user user-list__user">
			<span class="user__user-name">Вася</span>
			<span class="user__user-age">45<span>
		</div>
		<div class="user user-list__user">
			<span class="user__user-name">Андрей</span>
			<span class="user__user-age">18</span>
		</div>
		<div class="user user-list__user">
			<span class="user__user-name">Сережа</span>
			<span class="user__user-age">12</span>
		</div>
		<div class="user user-list__user">
			<span class="user__user-name">Маша</span>
			<span class="user__user-age">34</span>
		</div>
	</div>
</main>
<script src="js/main.min.js"></script>
</body>
</html>

javascript
Martin Hope
Виталик Черный
Asked: 2020-12-22 01:25:54 +0000 UTC
  • 0

请告诉我如何.user相对于子元素中的内容按字母顺序对父元素进行排序.user__user-name。

1：在代码编辑器中排序，以免手动调换位置。

2：现场排序。

.user-list__user {
  background: #325;
  color: #fff;
  border: 2px solid #287;
  margin-bottom: 10px;
  padding: 5px;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Test</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
</head>
<main class="main">
	<div class="user-list">
		<div class="user user-list__user">
			<span class="user__user-name">Вася</span>
			<span class="user__user-age">45<span>
		</div>
		<div class="user user-list__user">
			<span class="user__user-name">Андрей</span>
			<span class="user__user-age">18</span>
		</div>
		<div class="user user-list__user">
			<span class="user__user-name">Сережа</span>
			<span class="user__user-age">12</span>
		</div>
		<div class="user user-list__user">
			<span class="user__user-name">Маша</span>
			<span class="user__user-age">34</span>
		</div>
	</div>
</main>
<script src="js/main.min.js"></script>
</body>
</html>

javascript
Martin Hope
Виталик Черный
Asked: 2020-12-16 20:46:52 +0000 UTC
  • 3

解释解构赋值算法是如何工作的。我决定测试这种行为，但我不知道为什么控制台会给出这些结果。

在提出问题之前，我熟悉了所有来源，除了规范本身，因为它很难理解，而且我不懂英语。

资料来源：ES6：重组赋值、解构、解构赋值。

一

var {a,aa,...aaa} = [2, 4, 23];

console.log(a, aa, aaa);

2

var [a,aa,...aaa] = {a:2, aa: 4, aaa: 23};

console.log(a, aa, aaa);

UPD：我使用了 Babel.js，也许它会有所帮助。

javascript
Martin Hope
Виталик Черный
Asked: 2020-11-29 10:24:07 +0000 UTC
  • 0

console.dir(test);
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>JS Practice</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
	<link rel="shortcut icon" type="img/png" href="img/favicon.png?v=1"/>
	<link rel="stylesheet" href="css/main.min.css" />
</head>
<body class="page">
	<header class="header">

	</header>
	<main class="main">
		<div id="test" class="element"></div>
	</main>
	<footer class="footer">

	</footer>
</body>
</html>

我试图手动找到该window元素，但找不到。解释console.log你是如何找到它的。

javascript
Martin Hope
Виталик Черный
Asked: 2020-11-21 02:28:17 +0000 UTC
  • -1

function PropertyError(property) {
  this.name = "PropertyError";

  this.property = property;
  this.message = "Ошибка в свойстве " + property;

  if (Error.captureStackTrace) {
    Error.captureStackTrace(this, PropertyError);
  } else {
    this.stack = (new Error()).stack;
  }

}

PropertyError.prototype = Object.create(Error.prototype);

父构造函数在这里是可选的

通常，当我们继承时，我们会调用父级的构造函数。在这种情况下，调用看起来像 Error.call(this, message)。

严格来说，这里不需要这个调用。内置的 Error 构造函数没有做任何有用的事情，它甚至没有设置 this.message 属性（更不用说名称和堆栈）。调用它的唯一可能原因是它设置了 [[ErrorData]] 特殊内部属性，该属性显示在 toString 中并允许您看到这是一个错误。因此，按照标准，这种情况下继承时建议调用Error构造函数。

来源：Learn Javascript - Custom Errors，继承自 Error。

你能告诉我什么属性[[ErrorData]]吗？

我只是试图在这个例子的上下文中检查这个属性，它给了我：

function PropertyError(property) {
  Error.call(this, property) ;
  this.name = "PropertyError";

  this.property = property;
  this.message = "Ошибка в свойстве " + property;

  if (Error.captureStackTrace) {
    Error.captureStackTrace(this);
  } else {
    this.stack = (new Error()).stack;
  }

}

var a = new PropertyError('Hey');
var aa = Error('Hey');

console.log(String(a));
console.log(String(aa));
VM1377:19 [object Object]
VM1377:20 Error: Hey
javascript
Martin Hope
Виталик Черный
Asked: 2020-10-23 21:11:43 +0000 UTC
  • 12

{} + {} "[object Object][object Object]"

摘要部分的转换对象：toString 和 valueOf一文描述了 object( ) 在主要代码流中的行为，但在控制台中的行为有所不同。我什至在某处看到了一个类似的例子：. 它说左操作数被视为一个空的“代码块”，而右操作数被转换为一个数字，这将导致.{}{} + {}NaN

一方面，我想问解析器如何看待这个例子：{} - {}.

  1. 解析器忽略左侧对象并将其视为“代码块”。那么问题来了，为什么上面的例子中会出现拼接呢？
  2. 他将它们引向一个数字 (NaN) 并减去它们。

在此处输入图像描述

PS：如果我懂英语并且能很好地理解 ECMAScript 文档，我就不会问了。

javascript
Martin Hope
Виталик Черный
Asked: 2020-10-01 06:43:34 +0000 UTC
  • 1

通常，get 或 set 对象声明如下：

var obj = {
    get name() {
        return "Name";
    }
};

您可以使用描述符：

var obj = {};

Object.defineProperty(obj, "name", {

  get: function() {
    return "Name";
  }
});

在构造函数中，他们使用第一个单词是 的常规方法（函数）get，set或者他们创建了一个方法，但我不知道get如何创建常规方法。set

javascript
Martin Hope
Виталик Черный
Asked: 2020-09-27 06:36:08 +0000 UTC
  • 2

事实是，当他们尝试将原语称为对象时，它将自己包装在其函数中 - 一个包装器，结果接收到一个对象，它将从中调用属性或方法，但我不明白为什么它是这样工作的：

"12".valueOf();
"12"

12.valueOf();
VM1160:1 Uncaught SyntaxError: Invalid or unexpected token

(12).valueOf();
12

12..valueOf();
12

我不明白为什么 ( 12.valueOf(); ) 示例不起作用，为什么 ( 12..valueOf(); ) 起作用。

javascript