主页 / user-211549

Air's questions

Martin Hope
Air
Asked: 2022-05-02 15:33:34 +0800 CST
  • 4

主要的是这个预加载器对于任何扩展都应该是一样的，而且符号也应该有一个渐变。当然，这可以在 上实现css，但这仍然是一种变态......

预先感谢您的帮助...

document.querySelector(".circle").innerHTML = "Loading..."
  .split("")
  .map((e, i) => `<span style="--rot:${i * 11}deg">${e}</span>`)
  .join("");
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
}

html,
body {
  height: auto;
  min-height: 100vh;
  background-color: #272727;
  color: burlywood;
  font-size: 2vw;
  border: 1px solid transparent;
}

body * {
  /* border: 1px solid red; */
}

.circle {
  margin: 100px auto;
  width: 20vw;
  height: 20vw;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}

.circle::after,
.circle::before {
  position: absolute;
  content: "";
  display: block;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  /*
        */
}

.circle::after {
  animation: rott 1s ease infinite;
  background: linear-gradient(130deg, red 20%, purple 70%);
  background-position: -42px -29px;
  background-repeat: no-repeat;
  border: 30px solid #272727;
  box-sizing: border-box;
  border-top: 30px solid transparent;
  border-left: 30px solid transparent;
  background-size: 132% 120%;
}

.circle::before {
  background-color: #272727;
  transform: translate(-50%, -50%);
  z-index: 4;
  left: 50%;
  top: 50%;
  width: calc(20vw - 30px);
  height: calc(20vw - 30px);
}

span {
  z-index: 9;
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  width: 30px;
  height: 100%;
  position: absolute;
  padding: 60px 0 0 0;
  top: 50%;
  left: 50%;
  transform-origin: 6px 56% 0;
  transform: translate(-50%, -50%) rotate(var(--rot));
}

span:nth-child(8) {
  animation: opa 1s ease 0s infinite;
}

span:nth-child(9) {
  animation: opa 1s ease 0.2s infinite;
}

span:nth-child(10) {
  animation: opa 1s ease 0.5s infinite;
}

@keyframes rott {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes opa {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
<div class="circle"></div>

css
Martin Hope
Air
Asked: 2022-02-09 11:33:29 +0800 CST
  • 1

同事，我有这样的功能，

const getFiles = (dir, files_) => {
  files_ = files_ || [];
  let files = fs.readdirSync(dir);
  for (var i in files) {
    var name = dir + '/' + files[i];
    if (fs.statSync(name).isDirectory()) {
      getFiles(name, files_);
    } else {
      files_.push(name);
    }
  }
  return files_;
};

console.log(getFiles('./frontend/multimedia/image'));

这很好用，但是我如何告诉这个函数来观察文件夹内容的变化（删除或添加文件）？

唯一想到的就是跑getFiles('./frontend/multimedia/image') 进去setInterval()。

我知道这不是最好的方法...

那么如何不重启这个功能，而是在里面实现文件夹跟踪呢？

javascript
Martin Hope
Air
Asked: 2020-04-06 16:51:34 +0800 CST
  • 1

有汇编...

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


const webpackConf = {
    entry: './frontend/app/app.js',
    output: {
        path: path.resolve(__dirname, './production'),
        filename: 'bundle.js',
        publicPath: 'production/'
    },
    devServer: {
        port: 80,
        overlay: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: './index.html', // Комментарий №1 
            template: './frontend/main_pages/tamplate_en.html',
            title: "Index"
        }),
        new CleanWebpackPlugin()
    ]
};


module.exports = () => {
    return webpackConf;
};

一切正常，但是一旦我更改创建路径index.html （请参阅代码中上面的注释＃1），publicPath: 'production/'它就看不到index.html

我没试过的

publicPath: '生产/主页/'


publicPath: '主页/'

这就是我得到的...

在此处输入图像描述

我想出的唯一一件事就是改变创建路径index.html

当production您设置一条路径时，当development另一条...

这是正确的解决方案，还是有更简单的方法来解决这个问题？

补充...

生产程序集将转到此文件夹

路径：path.resolve(__dirname, './production'),

如果我有插件

new HtmlWebpackPluginindex.html在根目录创建production文件夹，然后一切正常，但我需要new HtmlWebpackPlugin 来创建production/main-pages/index.html文件夹

所以，当index.html不在production文件夹的根目录下，而是在production/main-pages/文件夹中时， devServer 看不到index.html，`publicPath: 'production/' 不起作用

webpack
Martin Hope
Air
Asked: 2020-03-13 13:49:37 +0800 CST
  • 1

有这样一个例子。

window.addEventListener('mousemove', e => {
  i.style.filter = 'drop-shadow(' + e.clientX / 100 + 'px ' + e.clientY / 100 + 'px 5px rgb(' + e.clientX / 3 + ' ' + e.clientX / 3 + ' ' + e.clientY / 3 + ' ))';
})
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
  height: 100vh;
  background-color: #272727;
}

div#i {
  width: 100%;
  height: 100%;
  filter: drop-shadow(10px 1px 3px red);
  background-image: url('https://precisiongrinding.com/wp-content/uploads/2016/12/Global-Map.png');
  background-repeat: no-repeat;
  background-size: cover;
}
<div id="i"></div>

我怎样才能实现这个例子，使图像的阴影是渐变的？

css
Martin Hope
Air
Asked: 2020-02-15 17:03:08 +0800 CST
  • 0

每个人...

我有一个class。

我不明白为什么突然在getName这个类的方法中该方法的行为很奇怪Array.map()

要查看问题，请取消注释底行并注释掉最上面的行。

唯一的区别在于{}花括号。

但是getData()不存在这样的问题...

//const arrayHtml = fs.readdirSync(path.resolve(__dirname, templateDir));

const arrayHtml = ['index.html', 'dash.html', 'zoo.html'];
class DataSiteConfig {
  constructor(folder, favicon) {
    this.name = name;
    this.favicon = favicon;
    this.folder = folder;
    this.pageList = [];
  }
  getName(dirNameFiles) {
    this.name = dirNameFiles.map((s, i, arr) => s.slice(0, -5));
  //this.name = dirNameFiles.map((s, i, arr) => {s.slice(0, -5)});
  }

  getData() {
    this.name.map((s, i, arr) => {
      this.pageList.push({
        title: s,
        template: `frontend/html/${s}.html`,
        filename: `pages/${s}.html`

      })
    })
  }
}

let dataSiteConfig = new DataSiteConfig('Zona', 'Chtoto.png');
dataSiteConfig.getName(arrayHtml);
dataSiteConfig.getData();
console.log("TCL: dataSiteConfig", dataSiteConfig);

谁能告诉我为什么...

javascript
Martin Hope
Air
Asked: 2020-01-31 22:04:01 +0800 CST
  • 2

有这样一个例子，免得解释半天，把最后一个坐标改一下，看看会发生什么。

js，和这个问题无关(смотреть пример 2)，一个改变最后一个坐标的函数path，只是为了方便看问题的人看问题。

至于替换path为rect，它不起作用......这是一个大型综合体的一小部分，您无法替换path为rect。

const input = document.querySelector('input');
document.querySelector('.path').setAttribute('d', 'M5 250 495 ' + input.value);
input.addEventListener('input', function() {
  document.querySelector('.path').setAttribute('d', 'M5 250 495 ' + input.value);
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
  height: 100vh;
  background-color: #272727;
}

div.wrapper {
  height: 500px;
  background-color: #10e7dd;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

input {
  height: 50px;
  width: 100px;
  text-align: center;
  font-size: 25px;
}

svg {
  background-color: grey;
}
<div class="wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500">
        <defs>
          <linearGradient id="gradient" x1="0%" x2="100%" y1="0%"  y2="0%">
            <stop offset="0%" stop-color="#f00" />
            <stop offset="100%" stop-color="#00f" />
          </linearGradient>
        </defs>
      <path class="path"  stroke-width="100" stroke="url(#gradient)" fill="none" d="M5 250 495 250.1"/>
      
      </svg>
  <div>
    <input type="number" value="250">
  </div>
</div>

这就是没有 JS 的样子

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
  height: 100vh;
  background-color: #272727;
}

div.wrapper {
  height: 500px;
  background-color: #10e7dd;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

svg {
  background-color: grey;
}
<div class="wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500">
            <defs>
              <linearGradient id="gradient" x1="0%" x2="100%" y1="0%"  y2="0%">
                <stop offset="0%" stop-color="#f00" />
                <stop offset="100%" stop-color="#00f" />
              </linearGradient>
            </defs>
          <path class="path"  stroke-width="100" stroke="url(#gradient)" fill="none" d="M5 250 495 250"/>
          
          </svg>
</div>

这是什么，bug？如何解决？

javascript
Martin Hope
Air
Asked: 2020-11-26 15:12:27 +0800 CST
  • 4

有这样一个例子：

document.querySelector('#svg').addEventListener('click', function() {
  [...document.querySelectorAll('.line')].forEach(s => {
    s.classList.contains('path-line') ?
      s.classList.remove('path-line') :
      s.classList.add('path-line');
  })
})
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: #272727;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg {
  background-color: black;
}

#path_line_3 {
  stroke-dasharray: 30 43;
  stroke-dashoffset: 0;
  transition: all .2s;
}

#path_line_1 {
  stroke-dasharray: 30 43;
  stroke-dashoffset: 0;
  transition: all .2s;
}

#path_line_2 {
  stroke-dasharray: 30 43;
  stroke-dashoffset: 0;
  transition: all .2s;
}

#path_line_2.path-line {
  stroke-dasharray: 0 30;
  stroke-dashoffset: 0;
}

#path_line_3.path-line {
  stroke-dasharray: 43.4 30;
  stroke-dashoffset: -30;
}

#path_line_1.path-line {
  stroke-dasharray: 43.4 30;
  stroke-dashoffset: -30;
}
<svg id="svg" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 50 50">
        <path id="path_line_1" class="line" d="M 10 10, 40 10, 10 40" stroke-linecap="round" fill="transparent" stroke="white	" stroke-width="3" />

        <path id="path_line_2" class="line" d="M 25 25, 40 25" stroke-linecap="round" fill="transparent" stroke="white	" stroke-width="3" />

        <path id="path_line_3" class="line" d="M 10 40, 40 40, 10 10" stroke-linecap="round" fill="transparent" stroke="white	" stroke-width="3" />
        
    </svg>

是否可以将下图中标记的尖角修圆。

在此处输入图像描述

javascript
Martin Hope
Air
Asked: 2020-07-22 17:58:48 +0800 CST
  • 1

有一个指令

app.directive('rootElement', function () {
    return {
        restrict: "E",
        controller:'rootElementController',
        templateUrl: undefined,
        link: function (scope, element, attr, ctrl) { 
            console.log(scope.testScope.pages[5]) 
            this.templateUrl = scope.testScope.pages[5];
        }
    }
});

它与某个控制器交互并从后者接收一条线（路径是这样的frontend/pages/page-main/index.html），我需要它才能得到它。这是templateUrl.

我可以link更改函数中的值templateUrl吗？

我按照示例中给出的方法进行了尝试，但是唉，啊（没有用）...

这可以以某种方式实现吗？

提示后，像这样实现

app.directive('rootElement', function () {
    return {
        restrict: "E",
        controller:'rootElementController',
        templateUrl: '<ng-include src="{{testScope.pages[5]}}"></ng-include>',
        link: function (scope, element, attr, ctrl) { 

        }
    }
});

但我收到一个错误

在此处输入图像描述

angularjs
Martin Hope
Air
Asked: 2020-07-22 13:03:48 +0800 CST
  • 1

AngularJS中有这样一个例子，它非常有效。

const app = angular.module('app', []);

app.controller('testController', function($scope) {
  $scope.testScope = ['text-0', 'text-4', 'text-1'];
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<html ng-app="app">
<div ng-controller="testController">{{testScope}}</div>

</html>

但如果你稍微改变一下

const app = angular.module('app', []);
app.factory('myFactory', function() {
  return {
    import: (arr, text) => {
      arr.push(text);
    }

  }
});

app.controller('testController', function($scope, myFactory) {
  $scope.myFactory = myFactory;

  $scope.testScope = ['text-0', 'text-4', 'text-1'];

  myFactory.import(testScope, 'P-text');

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<html ng-app="app">
<div ng-controller="testController">{{testScope}}</div>

</html>

controller停止看到它的变量...

如何处理，原因是什么？

angularjs
Martin Hope
Air
Asked: 2020-07-19 02:51:24 +0800 CST
  • -1

有一个指令

    app.directive('curSor', function () {
    return {
        restrict: "E",
        template: '<div class="cursor-child"></div>',
        link: function (scope, element, attr) {
            const win = angular.element(window);
            const elem = angular.element(element);
            ///////////////////////////////////////////////////////////
            win.on('click', ()=>{
                elem.children().addClass('cursor-child-active');
                setTimeout(()=>{
                    elem.children().removeClass('cursor-child-active');
                },200);
            });
            ///////////////////////////////////////////////////////////

            win.on('mousemove', function(e){
                elem.css({
                    "top":e.pageY  - "2" +"px",
                    "left":e.pageX  - "2" +"px"
                });
            });
        }
    }
});

当我写这个例子的时候，我不能用 pure 来写JS。

例如

window.addEventListener('click', () => {
  console.log('win');
})

Angularjs 抛出一个错误，说这样的函数addEventListener 不存在。

问题...

是否可以AnguarJS纯编写代码JS？

这值得吗？

PS不想深入研究JQ...）））

不工作的例子...

const app = angular.module('app', []);

app.directive('curSor', function() {
  return {
    restrict: "E",
    template: '<div class="cursor-child">CursorChild</div>',
    link: function(scope, element, attr) {
      const win = angular.element(window);
      const elem = angular.element(element);
      //elem.children().classList.add('cursor-child-active');
      win.addEventListener('click', () => {
        console.log('win');
      })
    }
  }
});
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
</head>

<body>
  <cur-sor></cur-sor>
</body>

</html>

帮我把Angularjs理解到底，如何正确、称职地写在上面？我意识到最后一个问题太全球化了……

javascript
Martin Hope
Air
Asked: 2020-06-21 14:24:18 +0800 CST
  • 3

有一个动画的例子

@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #272727;
  background-image: url(https://cdn.oboi7.com/bd48c3217e4d770da198fdff5fb165a3c6c09cd2/devushki-odetta-annable-lica.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  border-top: 1px solid transparent;
}

.test-grad {
  font-size: 7vmax;
  font-family: 'Anton', sans-serif;
  text-align: center;
  margin: 100px auto;
  line-height: 2;
  background-image: linear-gradient(to top, #fff 50%, #272727 50%), linear-gradient(to top, #000 50%, #fff 50%);
  -webkit-background-clip: text, padding-box;
  color: transparent;
  mix-blend-mode: multiply;
  animation: gradient-top 3s linear infinite;
  background-size: 100% 200%;
  background-position: top;
  transition: background-position 1s ease-in-out;
}

@keyframes gradient-top {
  0% {
    background-position: bottom;
  }
  100% {
    background-position: 50% 300%;
  }
}
<div class="test-grad">Test gradient</div>

如何在 SVG 中实现这一点？

有人可能会有疑问А чем не устраивает данная реализация?，问题是它在FF中不起作用。

在 Mozilla 浏览器中运行下面的示例，就会清楚问题所在。

@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #272727;
}

.test-grad {
  font-size: 7vmax;
  font-family: 'Anton', sans-serif;
  text-align: center;
  margin: 100px auto;
  line-height: 2;
  background-image: linear-gradient(to top, #fff 50%, #272727 50%), linear-gradient(to top, #000 50%, #fff 50%);
  -webkit-background-clip: text, padding-box;
  color: transparent;
  background-size: 100% 100%;
  background-position: top;
}
<div class="test-grad">Test gradient</div>

但是，如果有一个没有解决方案的解决方案，SVG并且这个示例适用于什么，那FF也很好......

但是有一个解决方案FF，但是没有mix-blend-mode: multiply;，我不知道在哪里添加mix-blend-mode

@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #272727;
  background-image: url(https://cdn.oboi7.com/bd48c3217e4d770da198fdff5fb165a3c6c09cd2/devushki-odetta-annable-lica.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  border-top: 1px solid transparent;
}

.wrapper {}

.test-grad {
  margin: 100px auto;
  background-image: linear-gradient(to top, #fff 50%, #27272700 50%);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-size: 100% 200%;
  background-position: top;
  animation: gradient-top 3s linear infinite;
}

.test-grad p {
  color: transparent;
  font-size: 95px;
  font-family: 'Anton', sans-serif;
  text-align: center;
  background-image: linear-gradient(to top, #272727 50%, #fff 50%);
  background-size: 100% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: gradient-top 3s linear infinite;
}

@keyframes gradient-top {
  0% {
    background-position: bottom;
  }
  100% {
    background-position: 50% 300%;
  }
}
<div class="wrapper">
  <div class="test-grad">
    <p>Test gradient</p>
  </div>
</div>

html
Martin Hope
Air
Asked: 2020-06-21 03:09:25 +0800 CST
  • 7

有这样一个例子

<svg width="200px" viewBox="0 0 100 100">
    <style>
    circle {
        fill: url('#grad');
    }
    </style>
    <circle  cx="50" cy="50" r="50" />
    <defs>
        <linearGradient id="grad" x1="0" x2="0" y1="62" y2="0" gradientUnits="userSpaceOnUse">
            <stop offset="23%" stop-color="orangered" />
            <stop offset="100%" stop-color="orange" />
            <animate attributeType="XML" attributeName="y1" from="0" to="150" dur="5s" repeatCount="indefinite" />
        </linearGradient>
    </defs>
</svg>

如何实现动画，使动画从0到150再回到0？

html
Martin Hope
Air
Asked: 2020-06-18 12:10:23 +0800 CST
  • 3

假设我们有一个画布：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
viewBox="0 0 500 500" width="100%" height="100%"></svg>

还有一个元素：

<path d="M0 0 55 122 0 300 300"/>

其位置取决于坐标。

如果这些相同的坐标是一辆马车和一辆小推车，不要全部重写，这样元素就不会显示在画布的左上角，而是显示在画布的右下角。

SVG 中是否有一个容器元素，您可以将该元素path放入其中并将其移动到任何地方以及您想要的方式？

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" width="100%" height="100%"> <path d="M0 0 55 122 0 300 300"/></svg>

html
Martin Hope
Air
Asked: 2020-06-10 15:13:34 +0800 CST
  • 0

同事，有两个block同一个class，其中有两个block同一个class

[...document.querySelectorAll('.child')].forEach(s => {
  console.log("s", s);
});
<div class="parent">
  <div class="child">Child-1</div>
  <div class="child">Child-2</div>
</div>
<div class="parent">
  <div class="child">Child-3</div>
  <div class="child">Child-4</div>
</div>

如何找出什么

<div class="child">Child-3</div> <div class="child">Child-4</div>

一个父母的后代？

PS我想指出一件重要的事情，您不应该手动为他们分配不同的类或通过ID确定。因为为此我想知道，为了以编程方式为每个 parent 分配不同的类，有超过 500 个类，手动不是一个选项....

还有一瞬间。可以有两个以上甚至一个子元素...

为了更清楚，我将澄清这个问题......

有一堆元素.parent，其中第N个元素.child。

嗬它可能是

<div class="parent">
  <div class="child">Child-3</div>
  <div class="child">Child-4</div>
</div>
<div class="parent">
  <div class="some-other-class">Some other class</div>
  <div class="some-other-class">Some other class</div>
</div>
<div class="parent">
  <div class="child">Child-3</div>
  <div class="child">Child-4</div>
</div>

当有一个元素.parent没有子元素.child时，不要计算它们......

javascript
Martin Hope
Air
Asked: 2020-05-13 17:47:18 +0800 CST
  • 0

同事，为了清楚起见，有这样一个例子

[...document.querySelectorAll('.li-example')].forEach((s, i, arr) => {
  s.addEventListener('click', function() {
    [...document.querySelectorAll('.li-example')].forEach((s, i, arr) => {
      arr[i].classList.remove('li-example-active');
    })
    arr[i].classList.add('li-example-active');
  })
})
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #222;
}

li {
  list-style-type: none;
}

menu {
  display: flex;
  background-color: #999;
  margin: 15px;
}

li.li-example {
  text-align: center;
  cursor: pointer;
  width: 200px;
  margin: 5px;
  padding: 5px;
  background-color: #cc0;
  color: white;
  font-size: 20px;
  letter-spacing: 3px;
}
li.li-example-active{
  background-color: #00c;
}
<menu class="example">
  <li class="li-example"><span>Example</span></li>
  <li class="li-example"><span>Example</span></li>
  <li class="li-example"><span>Example</span></li>
  <li class="li-example"><span>Example</span></li>
  <li class="li-example"><span>Example</span></li>
</menu>

我认为没有必要解释上面示例中发生的事情。

我想知道如何在*Angular-1*

我的尝试...

const app = angular.module('app', []);

app.directive('example', function() {
  return {
    restrict: "C",
    link: function(scope, element, attrs) {
      scope.myExample = ['Example-1', 'Example-2', 'Example-3', 'Example-4', 'Example-5'];
    }
  }
});

app.directive('liExample', function() {
  return {
    restrict: "C",
    link: function(scope, element, attrs) {
      //element.addClass('li-example-active'); Почему данный вариант **JQUERY** за пределами цикла forEach работает
      angular.forEach(element, i => {
        scope.functionClick = function() {
          i.classList.add('li-example-active'); // хотя прекрасно работает класический вариант js добавления и удаления *class*
          //i.addClass('li-example-active');// а в цикле не работает
        }
      })
    }
  }
});
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #222;
}

li {
  list-style-type: none;
}

menu {
  display: flex;
  background-color: #999;
  margin: 15px;
}

li.li-example {
  text-align: center;
  cursor: pointer;
  max-width: 200px;
  margin: 5px;
  padding: 5px;
  background-color: #cc0;
  color: white;
  font-size: 2.5vmax;
  letter-spacing: 3px;
}

li.li-example-active {
  background-color: #00c;
}
<html ng-app="app">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<menu class="example">
  <li class="li-example" ng-repeat="example in myExample" ng-click="functionClick()"><span>{{example}}</span></li>
</menu>
<html>

以及如何在这个版本中实现这个例子，就像在 JS 的第一个经典版本中一样？？？？这样被点击的元素被分配了类li-example-active，其余的被删除了类li-example-active？？？

另外我想问一下我是否理解正确，没有angular.forEach(element, i => {})像经典版本的js那样的三个参数`Array.forEach（（s，i，arr）=> {}）`，而是一个？

还有一个类似示例的变体，具有不同的实现，也有问题

const app = angular.module('app', []);

app.directive('example', function() {
  return {
    restrict: "C",
    link: function(scope, element, attrs) {
      scope.myExample = ['Example-1', 'Example-2', 'Example-3', 'Example-4', 'Example-5'];
    }
  }
});
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #222;
}

li {
  list-style-type: none;
}

menu {
  display: flex;
  background-color: #999;
  margin: 15px;
}

li.li-example {
  text-align: center;
  cursor: pointer;
  max-width: 200px;
  margin: 5px;
  padding: 5px;
  background-color: #cc0;
  color: white;
  font-size: 2.5vmax;
  letter-spacing: 3px;
}

li.li-example-active {
  background-color: #00c;
}
<html ng-app="app">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<menu class="example">
  <li class="li-example" ng-repeat="example in myExample" ng-click="active = !active" ng-class="active ? '' : 'li-example-active'"><span>{{example}}</span></li>
</menu>
<html>

问题是一样的......以及如何在这个版本中实现这个例子就像在JS的第一个经典版本中一样？？？？

而且这个例子不是很重要，那么简单，对于一般的开发....

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #222;
}

li {
  list-style-type: none;
}

menu {
  display: flex;
  background-color: #999;
  margin: 15px;
}

li.li-example {
  text-align: center;
  cursor: pointer;
  max-width: 200px;
  margin: 5px;
  padding: 5px;
  background-color: #cc0;
  color: white;
  font-size: 2.5vmax;
  letter-spacing: 3px;
}

li.li-example span {
  background-color: green;
}

li.li-example span.span-active {
  background-color: blue;
}
<html ng-app>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<menu class="example">
  <li class="li-example" ng-click="active = !active"><span ng-class="active ? '' : 'span-active'">Example</span></li>
  <li class="li-example" ng-click="active = !active"><span ng-class="active ? '' : 'span-active'">Example</span></li>
  <li class="li-example" ng-click="active = !active"><span ng-class="active ? '' : 'span-active'">Example</span></li>
  <li class="li-example" ng-click="active = !active"><span ng-class="active ? '' : 'span-active'">Example</span></li>
  <li class="li-example" ng-click="active = !active"><span ng-class="active ? '' : 'span-active'">Example</span></li>

</menu>
<html>

问题....为什么在这个变体中没有ng-repeat class="span-active"接收所有元素Span，而不是其父被点击的那个....

javascript
Martin Hope
Air
Asked: 2020-04-04 12:02:44 +0800 CST
  • 1

同事们，在AngularJS中，我是一个绝对的初学者。这是我的第一个例子。

为了不把我有的所有东西都 链接到存储库，你可以克隆并运行。

运行开发命令npm run dev

要运行生产命令npm run build 和单独的服务器npm start

（需要安装依赖项中未列出的nodemon ）

现在对于我面临的问题。

有这么一个简短的原始示例

<!DOCTYPE html>
<html lang="en" ng-app="app">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sarnor_Club</title>
</head>

<body ng-controller="testCtrl">
    <div id="root">
        <img src="${require(`../image/icons/up.png`)}" width="50" height="50" alt="" />
        <h1>{{message}}</h1>
</body>

</html>

let ngModule = angular.module('app', []);

let slovo = 'slovo';

ngModule.controller('testCtrl', function($scope) {
    $scope.message = slovo;
})

如果我在开发模式下运行它一切正常。

在此处输入图像描述

如果你在生产模式下运行它，那么这就是图片

在此处输入图像描述

根据控制台中的链接有错误发送here

帮我弄清楚这个Unknown provider: eProvider <- e <- testCtrl 错误是什么以及为什么生产示例不起作用？

angularjs
Martin Hope
Air
Asked: 2020-02-11 22:00:15 +0800 CST
  • 1

我想马上说明我知道 experss 模块的存在，我不感兴趣

我有一个简单的服务器：

const http = require('http'),
      fs = require('fs');

const server = http.createServer()

server.on('request', (req, res)=>{
    console.log(req.url);
    res.writeHead(200, { 'content-type': 'text/html; charset=utf-8' });
    fs.readFile('./frontend/index.html', (err, content) => {
        res.write(content);

        res.end();

    })
});

server.listen(8888);

这里html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test NodeJS && Webpack</title>
    <base href="./" />
    <link rel="stylesheet" href="css.css" />
</head>
<body>
    <header>
        <h1>Site</h1>
    </header>
    <main>Main</main>
    <footer>Footer</footer>
    <script src="js.js"></script>
</body>
</html>

此服务器仅读取 html...

我如何阅读CSS和JS文件？？？

另一个问题是这个。在这里使用模块是否正确fs？

在此处输入图像描述

node.js
Martin Hope
Air
Asked: 2020-02-03 17:58:27 +0800 CST
  • 3

我最初误解了问题的本质，我更正了问题以便更准确地表述问题......

有这个构建webpack：

'use strict';
const webpack = require('webpack');
const path = require('path');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');


const minimizerBlock = {
  minimizer: [
    new UglifyJsPlugin({
      uglifyOptions: {
        warnings: false,
        parse: {},
        compress: {},
        mangle: true,
        output: null,
        toplevel: false,
        nameCache: null,
        ie8: false,
        keep_fnames: false,
      },
    }),
    new OptimizeCSSAssetsPlugin({})
  ]
}

const config = {
  entry: {
    main: './frontend/src/index.js'
  },
  output: {
    path: path.resolve(__dirname, './public'),
    filename: 'main.js'
  },
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    port: 8888,
    overlay: true,
    proxy: {
      '/api': 'http://localhost:8889'
    }
  },
  module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      },
      {
        test: /\.sass$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      },
      //{ test: /\.(ttf|eot|woff|woff2|png|jpg|jpeg|svg|gif|webp)$/, loader: 'url-loader', },
      {
        test: /\.(png|jpg|jpeg|svg|gif|webp)$/,
        include: [
          path.resolve(__dirname, './frontend/binary/image/')
        ],
        use: [{
          loader: 'file-loader',
          options: {
            name: 'image/[name].[ext]',
          }
        }]
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        include: [
          path.resolve(__dirname, './frontend/binary/fonts/')
        ],
        use: [{
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[ext]',
          }
        }]
      },
      {
        test: /\.(mp3)$/,
        include: [
          path.resolve(__dirname, './frontend/binary/audio/')
        ],
        use: [{
          loader: 'file-loader',
          options: {
            name: 'audio/[name].[ext]',
          }
        }]
      },
      {
        test: /\.(html)$/,
        include: [
          path.resolve(__dirname, './frontend/pages/')
        ],
        use: [{
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]',
          }
        }]
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: './index.css',
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'frontend/src/', 'template.html'),
      filename: 'index.html',
      favicon: 'frontend/binary/image/icons/iconfinder_tech_0001_4023871.png',

    }),

  ]
};
module.exports = (env, options) => {
  let production = options.mode == 'production';
  config.devtool = production ? false : 'inline-cheap-module-source-map';
  config.optimization = production ? minimizerBlock : {};
  return config;
}

在此处输入图像描述

有папке src - файле template.html，其中有这样一个部分的布局

 <div id="root">
   <img src="${require(`../binary/image/icons/iconfinder_tech_0001_4023871.png`)}" alt="" />
</div>

编译后 webpack

转世index.html в папке public我得到这个结果

<div id="root">
  <img src="images/iconfinder_tech_0001_4023871.png" alt="" />
</div>

一切正常。

同时src，有一个文件夹pages具有不同的页面，它们具有相同的布局。

<header>
   <img src="${require(`../../../../binary/image/sheelak/0viber-image.jpg`)}" alt=""/>
</header>

启动后webpack，将创建一个包含这些文件的文件夹，结果如下

在此处输入图像描述

然后in不起作用require的问题imgheader

我得到一个错误。 在此处输入图像描述

告诉我我的有什么问题webpack？？？？

StackOverflow上的类似问题

javascript
Martin Hope
Air
Asked: 2020-02-01 19:25:37 +0800 CST
  • 1

有一个功能：

function createVar(названиеПеременно, значениеПеременной) {

  let названиеПеременно = значениеПеременной;
  return названиеПеременно;
}

createVar('первая', 'значение1');
createVar('вторая', 'значение2');

//createVar(первая, 'значение');

console.log(первая)

假设我从外部获取了一些数据。而且数据不一样。每次调用该函数时createVar，我都必须将接收到的信息分配给一个新变量。

如何实施？

我想立即指出，我可以创建一个对象，并在调用函数时创建一个键和值并将其推送到对象中。此选项已实施。

对我个人而言，这个问题扩展了我的视野和意义。

javascript