理解为什么数据属性值设置为null

Question

我刚刚浏览了counterup.js中的代码，我遇到了以下几行代码：

            delete $this.data('counterup-nums');
            $this.data('counterup-nums', null);
            $this.data('counterup-func', null);

当然，这个插件使用数据属性来存储值，稍后将其用于计算。现在我的问题是，不是上面的代码行做了什么，而是为什么上面的代码行呢？

好的第一行代码：

delete $this.data('counterup-nums');

是否有点意义，但下面的代码行是做什么的

$this.data('counterup-nums', null);
$this.data('counterup-func', null);

？

Answer 1

这很有意思。但是我通过编写如下示例代码来研究一些有趣的事实。

 function hello(){
    var el = document.querySelector('#user');
    el.dataset.dateOfBirth = '1960-10-03';   
}


function undIt(){
 var el = document.querySelector('#user');
 el.dataset.dateOfBirth = undefined;    
}

hello()
alert(document.querySelector('#user').dataset.dateOfBirth)

undIt()
alert(document.querySelector('#user').dataset.dateOfBirth)

delete document.querySelector('#user').dataset.dateOfBirth;

Js Fiddler链接http://jsfiddle.net/nirus/f92chmdp/1/

当我评论删除语句时，我发现数据集变量仍然存在于DOM树中（设置为未定义的字符串），请参阅下面的图像

当我取消评论删除语句时，我可以看到它已从DOM树中删除。见下图

结论：作者使用了delete关键字来完全删除数据变量的引用及其持久性。

---------------------------- *****根据用户的评论guest271314 **** ** ------------------

我再次做了一些研究，是的jQuery实现是不同的。所以要实现上面的jQuery代码，请参阅下面的内容。（作者应该实现如下代码）Jsfiddler

   $(function(){
    function hello(){
        var el = $('#user');
        el.data('dateOfBirth','1960-10-03');
    }


    function undIt(){
        var el = $('#user');
        el.data('dateOfBirth',null);    
    }

    alert($('#user').data('dateOfBirth'))

    hello()
    alert($('#user').data('dateOfBirth'))

    undIt()
    alert($('#user').data('dateOfBirth'))

    //delete document.querySelector('#user').dataset.dateOfBirth;
    //delete $('#user').data('dateOfBirth');
    delete jQuery.cache.data.dateOfBirth;

    alert($('#user').data('dateOfBirth')) //This line throws Error. Read Note: section
});

jQuery维护一个名为 jQuery.cache.data 的缓存变量，并将密钥/值存储在此范围内，以通过查询DOM并提取值来避免性能开销。如果您想在jQuery中使用数据 API的HTML5实现，请使用 .Attr（） API

注意：在上面的代码中，最后一行会在删除值时抛出错误，浏览器无法在Object中引用 undefined 或 null 对象引用树。从技术上讲，删除了变量和引用。

Answer 2

delete：删除操作符从对象中删除属性。

我可能无法解释delete $this.data('counterup-nums');行正在做什么，但可能是作者希望用这一行清除所有内容。我相信这个delete关键字对$this.data('counterup-nums')没有意义。而不是delete，我会首选Jquery.removeData()来从元素中删除data属性。

但是下面的说法有道理：

$this.data('counterup-nums', null);
$this.data('counterup-func', null);

作者正在将数据属性设置为null，以便下次他可以轻松识别时，值是否会重置。