小编tra*_*boy的帖子

如何在浏览器中要求CommonJS模块?

在浏览器中加载CommonJS模块作为客户端javascript的最佳方法是什么?

CommonJS模块将其功能放在module.exports命名空间中,通常包含require(pathToModule)在服务器端脚本中.在客户端加载它们不能以相同的方式工作(需要更换,需要考虑异步等)

我找到了模块加载器和其他解决方案:Browserify,RequireJS,yabble等,或者简单地改变模块的方法.您认为最好的方式和原因是什么?

javascript commonjs node.js

59
推荐指数
3
解决办法
4万
查看次数

HTML5 Canvas:更好地重新绘制对象或使用位图?

我的项目有一个HTML5 Canvas,在其上重复绘制图形对象.这些物体迅速变化.绘制它们需要时间.我怎样才能让它更快?

对象不是太复杂,但包含弧形,渐变,多边形等内容.

对象的外观取决于大约10个属性,每个属性具有大约10个值中的一个.这意味着只有大约100种不同的外观而不是对象可以拥有的外观.这就是为什么我只考虑绘制每个外观一次然后缓存位图以便重复使用.

一切都必须在客户端工作(即我不能使用现成的图像)

  1. 使用HTML5 Canvas的最佳方法是什么?
  2. 它是一个好主意还是使用位图的开销大于每次重新绘制对象的开销?

javascript html5 canvas html5-canvas

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

jQuery:添加到DOM的新图像在加载后总是具有宽度0

我需要使用动态创建的图像标记来获取图像的尺寸.有用.但是只使用attr('width')并且仅在我不将图像添加到DOM时使用.否则,返回的维度为零.为什么?:)

this.img = $('<img/>', {'src': e.url} );           // generate image
this.img.appendTo('body');                         // add to DOM
this.img.load(function(self){return function(){    // when loaded call function
    console.log(self.img.attr('src'));
    console.log(self.img.attr('width'));
    console.log(self.img.width());
    console.log(self.img.css('width'));
}; }(this) );                                      // pass object via closure
Run Code Online (Sandbox Code Playgroud)

因此,我生成图像,将其添加到DOM并定义在加载图像时要调用的处理函数.我正在使用一个闭包来传递它对原始对象的引用,在闭包中称为"self".我正在转储图片的URL以确保引用正常.输出是:

pic.jpg
0
0
0px
Run Code Online (Sandbox Code Playgroud)

现在这是奇怪的事情:如果我删除上面的第二行(appendTo),那么它突然起作用,但仅适用于attr('width'):

pic.jpg
1024
0
0px
Run Code Online (Sandbox Code Playgroud)

这种行为对我没有任何意义.我希望在上述所有六种情况下获得实际图像大小.我现在知道如何解决问题,但我想了解它为什么会发生.这是一个错误吗?还是有一些合乎逻辑的理由呢?

以上结果适用于Safari.我刚刚使用Chrome测试,我在第一个示例中获得了所有正确的值,但在第二个示例中仍然是两个零.很奇怪.

javascript css jquery image dimensions

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

如何在JavaScript中以编程方式区分鼠标滚动和滚动?

我通过更改Javascript中的scrollLeft属性来滚动溢出的DIV内容:

setInterval(function(){
  $('#scrollbox').scrollLeft($('#scrollbox').scrollLeft()+1);
}, 50);
Run Code Online (Sandbox Code Playgroud)

但是,我想在用户使用鼠标滚动内容后立即停止此操作.我试图使用scroll事件检测到这一点

$('#scrollbox').scroll(function(){...});
Run Code Online (Sandbox Code Playgroud)

但是,我上面的自动滚动也会触发该事件.我如何区分这个并且只对用户启动的滚动作出反应?(或者:如何阻止上面的代码触发滚动事件?这也可以解决问题)

javascript jquery scroll javascript-events

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

如何在反应应用程序中检测过期的用户会话?

我正在开发基于 Node/Express 的 REST API 和基于 React/Redux 的前端。用户可以登录(这使他们可以访问附加功能),但他们也可以在不登录的情况下使用基本功能。

当用户登录时,客户端使用凭据进行 HTTP 调用,服务器创建会话并返回用户对象(user_id 和一些其他数据)以及会话 cookie。React 应用程序将用户对象保存为 Redux 状态。在随后的 HTTP 调用中,用户通过 cookie 进行身份验证。

在渲染用户界面时,React 应用程序通过检查处于其状态的用户对象来确定它是否已登录。这用于使某些仅对登录用户可用的按钮变灰,或在用户已登录时隐藏登录链接。

问题

可能会发生会话过期或用户在不同的浏览器选项卡中注销的情况。React 应用程序无法知道这一点,并认为它仍然处于登录状态(即应用程序状态与现实不匹配),从而导致错误的 UI 显示。

用什么模式解决这个问题?

  • 在所有 Ajax 调用上挂上钩子以检查 401 并更新状态?
  • 在 HTTP 标头中返回会话状态(然后?)
  • 服务器的彗星模式通知客户端它已注销?(那时不再是 REST API)
  • 在实际 API 调用之前进行额外调用以确保用户仍处于登录状态?(好像很浪费)

一旦客户端检测到它在正在进行的操作期间不再登录,如何处理?我更愿意在一个地方处理这个问题,而不是所有函数都进行 API 调用......

我会感谢一些最佳实践!

authentication session express reactjs

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

为什么 redux 操作类型应该是大写?

为什么 redux 中的操作类型应该是全部大写并带有下划线的字符串,是否有更深层的原因?

字符串只是字符串,对吗?为什么不使用动作创建者的名称(通常采用驼峰式命名)作为他们创建的动作的类型?

redux

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

当元素以编程方式在鼠标下移动时,不会触发jQuery悬停

我有一个悬停效果的图像(当鼠标悬停在它上面时,不透明度更高).当鼠标移入和移出时,它可以根据需要工作.

但是,图像本身正在移动(我会定期更改css属性顶部).当鼠标不移动并且图像在鼠标光标下移动时,不会触发相关事件.这意味着,不会调用悬停函数.我也试过使用mouseenter和mouseleave事件,但它们也不起作用.

什么是获得所需行为的好方法(鼠标悬停在图像上时悬停效果,无论它到达何处)?

javascript jquery animation javascript-events

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

从数组渲染 React 组件

我有一系列对反应组件的引用。我如何渲染它们?

myArray = [Component1, Component2, Component3];
Run Code Online (Sandbox Code Playgroud)

我正在寻找渲染函数,当给定数组时,它会渲染:

<div>
  <Component1 />
  <Component2 />
  <Component3 />
</div>
Run Code Online (Sandbox Code Playgroud)

reactjs

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

node-restify:如何缩进JSON输出?

使节点更好地输出JSON的正确方法是什么(即使用换行符和缩进)?

我基本上希望它输出类似的东西JSON.stringify(object, null, 2),但我认为没有办法配置restify来做到这一点.

没有补丁修改的最佳方法是什么?

javascript json node.js restify

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

如何在Redis中实现条件弹出并发友好?

我正在构建类似延迟行的东西:一个进程将对象放入一个列表中,另一个LPOP以相同的顺序出现.

诀窍是,对象只应在添加后一小时从列表中弹出.我可以使用时间戳.所有项目的延迟都是相同的,永远不会改变.

现在我如何以并发友好的方式实现pop(这样当几个worker访问该列表时它仍然有效)?我可以取出一个项目,检查时间戳并将其放回列表中,如果它还为时尚早.但如果几个工人同时这样做,可能会破坏物品的顺序.我可以检查第一个项目,只有在它到期时才弹出它.但是另一个工人可能已经弹出它然后我弹出错误的一个.

我应该使用WATCH命令吗?怎么样?我应该使用排序集而不是列表吗?帮助赞赏!

concurrency nosql redis node.js

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

从不可变对象中删除键(redux 状态)

我正在编写一个 redux reducer 来从状态对象中删除一个键:

state = {
  items: {
    key1: {foo: 'bar'},
    key2: {foo: 'baz'}
  },
  someOtherKey: 'value'
}
Run Code Online (Sandbox Code Playgroud)

我的减速机:

function reducer(state, action) {
  if (action=='DEL') {
    return {
      ...state,
      items: {
        ...state.items,
        [action.key]: undefined
      }
    }
  }
}       
Run Code Online (Sandbox Code Playgroud)

我预计这将返回一个删除了相应属性的新状态,但它返回一个新状态,其中键仍然存在于对象中,但值为undefined

ES6 中是否有一种优雅的方式来编写这样的 reducer?我想我可以使用Object.assign和删除属性,但上面的模式更具表现力,所以如果可能的话,我想这样写。

immutability redux

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