小编And*_*lly的帖子

在Javascript字符串中奇怪地使用反斜杠

我的一个同事在JS对象中设置属性的字符串值时使用了反斜杠:

shareButtonsHtml : '\
    <span class="share-fb">\
        <a href="#" class="fb-share"><span class="fb-share-icon"></span>Share</a>\
        <span class="fb-share-count"><i></i><u></u>0</span>\
    </span>\
    <div class="share-twitter"> \
        <iframe class="share-twitter-iframe" \
                allowtransparency="true" frameborder="0" scrolling="no" \
                src="https://platform.twitter.com/widgets/tweet_button.html" \
                style="width:130px; height:20px;"></iframe> \
    </div> \
    <div class="share-google"> \
        <div class="g-plusone" data-size="small" data-annotation="none"></div> \
    </div>',
Run Code Online (Sandbox Code Playgroud)

我们对此字符串执行的唯一操作是在用户鼠标悬停时填充社交共享按钮容器:

self.html(obj.shareButtonsHtml);
Run Code Online (Sandbox Code Playgroud)

我知道反斜杠是JS中的转义字符.谁能解释为什么我的同事在这里使用它们?当然他不需要逃离回车或换线?他后来搬到另一家公司,所以我不能问他!

javascript jquery multiline

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

VideoJS v5 - 在 ES6 中添加自定义组件 - 我做得对吗?

我正在为VideoJS v5编写一个社交共享插件:我想在控制栏下方的播放器标记中添加一个 div,其中包含几个链接,允许在我网站上的文章中对播放器实例进行社交共享。我在 ES6 工作。

VideoJS 文档很少,特别是对于 v5 - 我在源代码中摸索以试图弄清楚如何做到这一点。我确实找到了这个VideoJS 组件子类化的例子。

这是我到目前为止所得到的 - 如果我犯了风格犯罪,我很抱歉,我对 VideoJS 插件或 ES6 类没有太多经验。

videojs.plugin('social-share', function(opts) {
  let player = this;

  const Component = videojs.getComponent('Component');
  const ClickableComponent = videojs.getComponent('ClickableComponent');

  class VjsShareBar extends Component {
    constructor(player, opts) {
      super(player, opts);
    }

    createEl() {
      return super.createEl('div', {
        className: 'vjs-share-bar video-share share-buttons'
      }, {
        'role': 'group'
      });
    }
  }

  class VjsShareButton extends Component {
    constructor(player, opts) {
      super(player, opts);
    }

    createEl() {
      return super.createEl('a', { …
Run Code Online (Sandbox Code Playgroud)

javascript oop class video.js ecmascript-6

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

反应功能组件 - 当组件返回元素数组时,如何将refs传递回父级?

我有一个包含无状态功能组件的React组件.内部组件map在值数组上运行Lodash 以返回p标记数组.

class Application extends React.Component {

  items = [
    'first',
    'second',
    'third',
  ];

  render() {
    return <div>
            <Paragraphs items={ this.items } />
        </div>;
  }

}

const renderItem = ( item, index ) => {
  return (
    <p key={ index }>{ item }</p>
  );
};

const Paragraphs = ( { items } ) => _.map( items, renderItem );

ReactDOM.render(<Application />, document.getElementById('root'));
Run Code Online (Sandbox Code Playgroud)

我的Application组件需要引用这些DOM元素,所以我想将每个p标记的ref传回给父组件.谁能建议最好的方法呢?我发现的所有示例都假设子组件是单个元素.

Codepen示例

html javascript dom reference reactjs

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

外部文件中的 JavaScript 在脚本标签的 onload 事件之前执行

我读过它defer不一定会延迟外部脚本的加载,但它会将脚本的执行推迟到 HTML 被解析之后。

在此处输入图片说明

作为一个实验,我在包含 jQuery 的文件的底部添加了一行,当执行到达 JavaScript 末尾时,它会发出一个事件:

window.dispatchEvent(new Event('jQuery-executed'));
Run Code Online (Sandbox Code Playgroud)

我在我的测试页面中包含了具有defer属性的 jQuery 文件:

<script src="jquery-3.2.1.js" defer onload="console.log('jQuery loaded', Date.now());"></script>
<script>
    window.addEventListener('DOMContentLoaded', function(){
        console.log('DOMREADY', Date.now());
    });

    window.addEventListener('jQuery-executed', function(){
        console.log('jQuery executed', Date.now());
    });
</script>
Run Code Online (Sandbox Code Playgroud)

onload在脚本标签上有一个处理程序,告诉我文件何时加载,其他函数输出控制台登录 DOMContentLoaded 以及何时执行 jQuery。

为什么当我查看此页面时会得到这个?

在此处输入图片说明

事情当然应该以不同的顺序发生吗?jQuery 不应该只在包含它的文件加载后执行吗?为什么它在 DOMContentLoaded 之前执行?

javascript jquery loading event-handling jquery-events

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

Vim map :q 退出而不保存

我希望 Vim 在我输入时退出而不保存:q

当我尝试退出文档并对其:q进行更改时,当 Vim 提示我保存时,这让我很恼火。每当我想保留更改时,我都会保存它们。加上!of:q!笨拙地放置在我的英国键盘上。我怎样才能重新映射:q以表现得像:q!

vim

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

在PhpStorm终端中返回和转发一个单词的命令箭头

我在OSX上,出于某种原因,当我在PhpStorm终端执行命令 - ←(后退箭头)时,我得到一个[D,而命令 - →(向前箭头)输出a [C.我想做的是向前跳一个字.

在此输入图像描述

在我的OSX终端中,这些按键按预期工作,我找不到设置输出这些字符的任何地方.有没有人能解决这个难题?

macos terminal keyboard-shortcuts command-line-interface phpstorm

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

Adobe Edge - 从html页面控制动画

我正在尝试将Adobe Edge动画集成到我正准备使用专有发布系统的HTML5出版物的一个页面上.系统显示不同的HTML页面,如杂志中的页面.

我想在包含它的页面出现时开始播放动画.发布系统在显示页面时触发onScreen事件,而不是onLoad事件.我知道如何设置该事件的回调,但我需要回调来启动动画.谁能告诉我怎么做?

当我们可以从包含它的HTML页面中的Javascript函数向SWF发送指令时,我基本上想要做我们以前用Flash做的事情.

我是否给动画命名,然后使用document.animationName.play()等方法对其进行处理?

javascript jquery adobe-edge

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