2018-10-16

全局变量可耻，不能用

image.png

 {
      var parent = document.querySelector('#self')
      console.log(parent)
      这样做会导致变量提升，声明一个全局变量，覆盖window.parent
 }
   console.log(parent)

image.png

所以要使用局部变量

立即调用函数：为了使用局部变量

多种实现方式
(function(){
      var parent = document.querySelector('#self')
      console.log(parent)
    }())

(function(){
      var parent = document.querySelector('#self')
      console.log(parent)
    })()

-/+/~/!function(){
      var parent = document.querySelector('#self')
      console.log(parent)
    }()
让浏览器知道这是一个立即执行函数

真惨，js居然连实现一个局部变量都如此艰难，可怜，所以被人称为垃圾

历史有了转机，在es6中更新了let

image.png

  {
      let parent = document.querySelector('#self')
      console.log(parent)
    }

let a=2
{
  let a = 1
}
console.log(a)//2

---

始终要记得内容样式行为分离

有的问题要从反方向回答，如果不这么做会怎么怎么样

不要用js来控制样式,添加类就OK

禁用$div.show()，$div.hide() 为什么呢？
$div.show()
 这边的display不能确定，可能是block，可能是flex，如果一开始时是display：none状态，
你show（）了，你怎么知道要变成block，还是flex呢，这个时候有可能改变布局，所以js就通过添加类名来通过css改变样式就可以了，不需要直接
修改样式，谨记！
$div.hide()// 肯定是display：none