小编Bha*_*oni的帖子

我是JavaScript的新手,我在本地和全局变量作用域上做了一些练习,以下是我的代码(小提琴):

var myname = "initial"
function c(){
    alert(myname);
    var myname = "changed";
    alert(myname);
}
c();

当第一个警报被调用时,它显示myname为未定义.所以我的困惑是为什么我无法访问全局实例,myname如果我没有myname在函数中定义,那么它将正常工作.

我正在学习React并遵循一些教程,我遇到了这段代码:

import React                  from 'react';
import TodosView              from 'components/TodosView';
import TodosForm              from 'components/TodosForm';
import { bindActionCreators } from 'redux';
import * as TodoActions       from 'actions/TodoActions';
import { connect }            from 'react-redux';

@connect(state => ({ todos: state.todos }))

export default class Home extends React.Component {
  render() {
    const { todos, dispatch } = this.props;

    return (
      <div id="todo-list">
        <TodosView todos={todos} 
          {...bindActionCreators(TodoActions, dispatch)} />

        <TodosForm
          {...bindActionCreators(TodoActions, dispatch)} />
      </div>
    );
  }
}

这是一个todo应用程序,这是主页面,它加载2个小components.我几乎了解所有事情但我无法得到一些东西:

• 怎么connect办？我知道你必须通过4个参数(我不能完全得到那4个变量).
• 如何实现@connect装饰器,转换后代码会是什么样子？

提前致谢 …

我正在研究在React应用程序中设置页面样式的最佳方法.我看到很多样式的样式,如Styled Components,Glamour,CSS Modules.

在我目前的项目中,我正在使用CSS模块(主要是为了摆脱CSS冲突和页面特定的CSS).我搜索了很多关于为什么我应该使用样式组件和CSS-in-JS但我无法得到任何具体答案.所以我的问题是,如果使用CSS-in-JS或样式组件有实际的性能优势,或者它只是语法糖.

我正在从一个使用 的文件中模拟一个函数moment，这是文件内容：

./utils/dateUtils：

import moment from 'moment-timezone'

export function getToday() {
  return moment().tz(commonTimeZone)
}

./containers/someContainer.js:

import { getToday } from 'utils/dateUtils'

// Uses getToday in the component

./containers/someContainer.spec.js：

import moment from 'moment-timezone'

jest.mock('utils/dateUtils', () => {
  return {
    getToday : moment(new Date('2018-01-01'))
  }
})

测试抛出此错误：

? Test suite failed to run

    /Users/bharat/Documents/redmart-repo/partner-portalv2/app/containers/Orders/PickupsContainer.test.js: babel-plugin-jest-hoist: The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.
    Invalid variable access: moment
    Whitelisted objects: Array, ArrayBuffer, Boolean, DataView, Date, Error, …

您好我正在创建一个网站,我对如何编写CSS感到有点困惑.我想是否应该使用不同类的相同样式我应该制作样式特定类并在每个地方使用它们...让我用一个例子...

假设我想给出最小高度,我应该使用它:

.div1,.div2,.div3{min-height:335px;} 

并像这样使用HTML:

<div class="div1">afads</div>
<div class="div2">fads</div>
<div class="div3">fads</div>

或者我应该这样做:CSS:

.minheightstyle{min-height:225px;}
.leftitems{float:left;}
.red{background-color:red;}
.blue{background-color:blue;}
.grey{background-color:grey;}

HTML:

<div class="minheightstyle leftitems red">my text in red bg</div>
<div class="minheightstyle leftitems blue">my text in blue bg</div>
<div class="minheightstyle leftitems grey">my text in grey bg</div>

哪种方式是优化方式的最佳方式,我应该使用哪种方式,这是否重要.

我在我的项目中使用webpack的别名.在我的原始项目中一切正常,但是当我克隆项目时,import/no-unresolved我的webpack别名出错:

$ js/Controller的套管与底层文件系统import/no-unresolved不匹配

让它更有趣的是我的项目运作良好.import/no-unresolved似乎发送显示错误的错误.

有关更多详细信息,我添加了几个链接:.eslintrc.js,webpack.config.babel.js,链接到我的回购

如果您还有其他需要,请告诉我.

我正在为 Webpack 4 更新我的 Webpack 配置。我正在设置optimiztion对象（完整的配置文件可以在这里找到）：

optimization : {
    minimize : isProduction,
    minimizer : [
      terserPlugin,
      optimizeCSSAssetsPlugin
    ],
    splitChunks : {
      // chunks : 'async',
      chunks : 'all',
      name   : false,
    },
    runtimeChunk : true,
  }

问题是，我的js代码不工作，如果的值splitChunks.chunks设置为all当我从改变值预期，但一切正常all到async。

我找不到使用 value 解决此问题的正确方法all。有人可以指出我正确的方向或解释我在这里遗漏了什么。

我在JS中研究变量范围的概念,在它上面找到了这个例子:

(function() {
    var foo = 1;
    function bar() {
        var foo = 2;
    }
    bar();
    console.log(foo) //outputs 1
    if(true) {
        var foo = 3;
    }
    console.log(foo) //outputs 3
})();

这个功能的输出是

1 
3

现在我很困惑,如何foo在第二个日志中获得值3.即使foo是var在if声明中使用声明.不应该foo声明的in if将有一个新的实例,因为它进入bar()？

我在我的项目中使用 Handlebars，并使用 webpack 捆绑模板。我正在使用handlebars-loader编译模板。我在创建一个小助手时遇到了问题。当我在模板中使用 helper 时，Webpack 会显示此错误：

You specified knownHelpersOnly, but used the unknown helper withCurrentItem - 5:4

这是我的代码：

网络包：

{
        test   : /\.(tpl|hbs)$/,
        loader : "handlebars-loader?helperDirs[]=" + __dirname + "templates/helpers"
        // use    : 'handlebars-loader?helperDirs[]=false' + __dirname + 'templates/helpers'
},

助手（项目/模板/助手/withCurrentItem.js）：

export default function (context, options) {
  const contextWithCurrentItem = context

  contextWithCurrentItem.currentItem = options.hash.currentItem

  return options.fn(contextWithCurrentItem)
}

模板文件（project/templates/products.tpl）：

{{> partials/filters}}
<ul class="u-4-5">
  {{#each data.products}}
    {{> partials/product}}
    {{withCurrentItem ../styles currentItem=this}}
  {{/each}}
</ul>

我试图解决这个问题并在互联网上搜索，但我找不到任何东西。这是我尝试过的：

• 将helperDirs[]查询参数添加到加载器：

  loader : "handlebars-loader?helperDirs[]=" …

我正在制作在线产品网站,我正在触发一个滚动事件,在启动时只会显示12个元素但是当第8个元素滚动到顶部时滚动事件应该只运行一次,但每次我向下滚动时都会运行,请帮助.这是我的代码:

var navigation_offset_top = $('.prods-list li:nth-child(4)').offset().top;  
    $(window).on("scroll",function(){
        var scroll_top = $(window).scrollTop(); // current vertical position from the top
        // if scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
        if (scroll_top > sticky_navigation_offset_top) 
        { 
            console.log("Hi");
        }       
    });