小编Ale*_*nik的帖子

我只是在这里浏览这个库(glide.js) ，因为我正在检查 package.json 文件，我在密钥下看到以下命令scripts：

 "build:esm": "rollup --config build/esm.js && rollup --config build/esm.modular.js",

这个脚本到底在做什么？我知道一个配置文件在这里被传递给 rollup.js，但是.esm? 当我看到dist/文件夹时，我也看到了一个glide.esm.js文件，这个文件到底在做什么？

esm 的构建配置文件如下所示：

import build from './build'

export default Object.assign(build, {
  input: 'entry/entry-complete.js',
  output: Object.assign(build.output, {
    file: 'dist/glide.esm.js',
    format: 'es'
  })
})

但我不太明白format: 'es'这里的真正含义。基本上分解一下，文件夹中的文件glide.js和glide.esm.js文件dist/夹中的文件有什么区别？

嘿家伙我是JS的新手,基本上每天都在学习新东西,我只是学习如何动态更新数组和东西,反正我常常尝试拿起网络的干净JS片段并调试它们,直到我了解它的真正含义.所以这是我今天发现的一个片段:

var array1 = [
                     { tagId: 1, tagName: 'tag 1' },
                     { tagId: 2, tagName: 'tag 2' },
                     { tagId: 3, tagName: 'tag 3' },
                     { tagId: 4, tagName: 'tag 4' }


         ];

         var array2 = [
                    { tagId: 1, tagName: 'tag 1' },
                    { tagId: 2, tagName: 'tag 2' },
                    { tagId: 8, tagName: 'tag 8' }
           ];

         var array3 = [
                    { tagId: 1, tagName: 'tag 1' },
                    { tagId: 0, tagName: 'tag 0' },
                    { tagId: …

如何在elevateZoom中调用destroy函数？文档没有任何提及,如果我ctrl+f在源代码快速,我看到一个选项disable,但我不知道如何禁用或销毁elevateZoom？

我有以下代码:

HTML:

<img id="img_01" src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" data-zoom-image="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg"/> 

JS:

 $("img").elevateZoom({ zoomType    : "inner", cursor: "crosshair" , easing : true });

setTimeout(function(){}
      // how to destroy elevateZoom on image ? 
,2000); 

现在3秒后,我希望缩放功能不起作用(我这样做是为了隔离我的问题,现在请不要问一个反问题为什么我正在这样做).我怎么办setTimeout()才elevateZoom变得无功能.

骗子在这里

我正在使用transit.js,我有以下几行代码:

var axis = Math.floor(Math.random() * 2);
axis = genXY(axis);

if($(this).hasClass(btn_className)) {       
    $(this).transition({ axis : '100px' } , function(){
        $(this).addClass('active');
        $(this).transition({ axis :  0 , duration : 2000 });
    })  

} 

genXY功能如下:

var xy = ['x' , 'y'];

function genXY(no) {
    return xy[no];
}

现在我在单个元素上运行下面的简单测试(在我的devTools中):

var axis = x;
$('.gridbox .large').eq(2).transition({ x : "100px" });

上面的代码行完美,IE它转换元素100px ,但现在如果我用轴替换x,实际上是一个确实是x的变量,现在代码如下所示:

var axis = x;
$('.gridbox .large').eq(2).transition({ axis : "100px" });

上述行不起作用.它为什么现在有用？afterall轴是x本身,任何人都能解释一下吗？

我在这里阅读这篇文章,它讲述了如何使用reduce with promises,最后显示以下代码片段:

const tasks = getTaskArray();
return tasks.reduce((promiseChain, currentTask) => {
    return promiseChain.then(chainResults =>
        currentTask.then(currentResult =>
            [ ...chainResults, currentResult ]
        )
    );
}, Promise.resolve([])).then(arrayOfResults => {
    // Do something with all results
});

所以在不改变太多代码的情况下,我做了以下演示:

const tasks = [ fetch('https://jsonplaceholder.typicode.com/todos/1') , 
                fetch('https://jsonplaceholder.typicode.com/todos/2') ,   
                fetch('https://jsonplaceholder.typicode.com/todos/3')  ];


tasks.reduce((promiseChain, currentTask) => {

    console.log(promiseChain);  

    return promiseChain.then(chainResults => {
        return currentTask.then(currentResult =>
            [ ...chainResults, currentResult ]
        )
    });
}, Promise.resolve([])).then(arrayOfResults => {
    // Do something with all results
    console.log(arrayOfResults);
});

但我仍然不明白,因为reduce简单地只是一个forEach循环而内部减少我们依赖于一个返回的promise,reduce函数不会仅仅循环遍历数组中的所有元素(在此case一个promises数组),没有then()触发？

我只是在玩一些CSS绝对和固定属性，遇到了CSS中绝对和相对位置之间的不寻常差异。

基本上，当我绝对放置某物并且内容大于窗口或包含元素的高度时，会出现滚动条，但是当我将位置更改为固定时，即使内容的高度比窗口高，也不会滚动条出现。

我为此创建了一个测试用例：

HTML：

<div class="page-container">
    <div class="helper">
        <div class="marker red"></div>
        <div class="marker green"></div>
        <div class="marker yellow"></div>
        <div class="marker blue"></div>
    </div>
</div>

CSS：

#slides-container {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.helper {
    height: 400%;
    width: 20px;
    position: fixed;   /* change this to absolute and the scrollbars appear*/
    top: 0;
    left: 0;
}
.helper .marker {
    height: 25%;
    width: 100%;
}
.marker.red {
    background: red;
}
.marker.green {
    background: green;
}
.marker.yellow {
    background: yellow;
}
.marker.blue {
    background: …

我刚刚创建了一个简单的图像叠加效果，请参见下面的FIDDLE HERE。

下面的 HTML

<figure>
  <img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" alt="">
  <figcaption>
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p>
  </figcaption>
</figure>

现在，当我在 chrome 中查看时，图像顶部的文本和覆盖层非常模糊，在 FF 中非常清晰，但在 chrome 中则不然。

我这个，在线问题，但仍然没有找到解决办法。

这是一个已知问题吗？如何解决这个问题？

编辑：禁用硬件加速工作！但是我不能告诉我的用户这样做。

谢谢你。

我刚刚浏览了这个小提琴，代码如下所示：

<svg width=200 height=200 viewbox="0 0 225 225" >
    <path d="M220, 220
            A200, 200, 0, 0, 0, 20, 20
            L 20, 220
            Z"
    fill = "lightskyblue">
    </path>
</svg>

现在，当我使用 viewbox 并将值更改为viewbox="100 100 225 225"它时，会产生以下效果：

transform:translate(-100px, -100px);

好吧，我相信，当我指定100的min-x, min-y 值viewbox的效果应该是一样的东西

transform:translate(100px, 100px);

但相反，效果类似于：

transform:translate(-100px, -100px);

为什么这样 ？有人可以解释一下吗？

我刚刚在网上看了一个laravel tutrorial,我看到以下模式编码如下:

<?php

namespace App;
use Illuminate\Database\Eloquent\Model;

class Notice extends Model {

    protected $fillable = [
        'provider_id',
        'infringing_title',    
        'infringing_link',    
        'original_link',    
        'original_description',    
        'template',    
        'content_removed'
    ];


    public static function open(array $attributes) {
        return new static($attributes); 
    } 

    public function useTemplate($template) {
        $this->template = $template;
    }

}

我有兴趣知道的是下面定义的方法究竟是什么用途:

public static function open(array $attributes) {
            return new static($attributes); 
} 

我意识到它是一种静态方法,但这条线return new static($attributes);特别让我感到困惑.

我看到以下方式使用的方法:

    $notice = Notice::open($date);

但我仍然不太明白它的用法.有人可以解释一下.

我遇到了以下角度指令：

import { Directive , HostListener , HostBinding } from '@angular/core';

@Directive({
    selector: '[appDropdown]'
})

export class DropdownDirective {
    @HostBinding('class.open') isOpen = false;

    @HostListener('click') toggleOpen() {
        this.isOpen = !this.isOpen;
    }
}

在网上浏览代码时，基本上代码只open在使用指令的元素上切换类，因此可以像这样使用该指令：

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown" appDropdown>
        <a href="#" class="dropdown-toggle" role="button">Manage <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">Save Data</a></li>
            <li><a href="#">Fetch Data</a></li>
        </ul>
    </li>
</ul>

现在我不明白的是指令中的以下代码行：

 @HostBinding('class.open') isOpen = false;

它究竟在做什么以及它究竟是如何运作的？我不太理解上面的代码行。有人可以解释一下吗？