这个未申报的变量如何运作并承担另一个角色?

时间:2017-08-03 14:28:26

标签: javascript html dom

我按照本指南" thejsway"来自GitHub,本课程是关于元素动画的。

此代码由作者提供,但我无法弄清楚变量&#34;阻止&#34;在这一行: state = { activeTab: 'a' }; handleChange = (activeTab) => { this.setState({ activeTab}); }; render = () => ( <Tabs value={this.state.activeTab} onChange={this.handleChange} > <Tab label="Tab A" value="a"> <div> <h2>Controllable Tab A</h2> <p> Tabs are also controllable if you want to programmatically pass them their values. This allows for more functionality in Tabs such as not having any Tab selected or assigning them different values. </p> </div> </Tab> <Tab label="Tab B" value="b"> <div> <h2>Controllable Tab B</h2> <p> This is another example of a controllable tab. Remember, if you use controllable Tabs, you need to give all of your tabs values or else you wont be able to select them. </p> </div> </Tab> </Tabs> ); 正在处理来自'block.style.left = (xBlock + movement) + "px" '的变量blockElement的工作,我认为它是对同一元素的引用?

不应该是const blockElement = document.getElementById("block");而不是blockElement吗?当block未在任何地方声明时,它是如何工作的?

整个代码:

block

2 个答案:

答案 0 :(得分:4)

  

这个块和blockElement一样吗?如何?

几乎可以肯定,是的。 block是一个自动全局的。在浏览器中,具有id的元素会自动成为window对象的属性,除非其他东西取代它们;该对象的属性也是全局变量。 window属性的详细信息位于the HTML specificationwindow对象也是JavaScript全局对象的事实略微巧妙地涵盖here。全局对象的属性是全局对象in the JavaScript spec

依赖于此通常是一个坏主意™,因为:

  • 全局命名空间 非常 拥挤,而事物取代其他人的规则很难记住。例如,您无法找到<div id="name"></div>的自动全局广告,因为全局name意味着其他内容。
  • 很难阅读依赖于&#34;魔法&#34;的代码。变量(正如您所发现的那样)。

正如您所确定的那样,在这种情况下,作者似乎意味着blockElement。使用block时,只有一个拼写错误,或者他/她之后决定重命名的变量的原始名称。

答案 1 :(得分:1)

基于this blog post中提供的详细说明和示例:

  

HTML5 standard指定window对象必须具有   属性 key ,其值为 elem if ...

     
      
  • 只有一个DOM元素 elem ,其属性id的值为 key
  •   
  • 只有一个DOM元素 elem ,其属性name的值为 key elem 的标记必须是以下之一:a,applet,area,embed,form,   框架,框架集,iframe,img,对象。
  •   

在技术较少的情况下,浏览器会为id的唯一div创建一个全局变量。但是,使用它似乎是一种不好的做法,你应该依赖var block = document.getElementById('block');这样的东西来确保不会出现任何问题。