模块化

简单来说就是将功能不同的代码分开来，实现a功能的代码一个文件，实现b功能的代码一个文件
阮一峰

模块就是实现特定功能的一组方法。
只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。

ES6 Module
Web Components
知乎问答

如何使用立即执行函数

我们不想要全局变量
我们要使用局部变量
ES 5 里面，只有函数有局部变量
于是我们声明一个 function xxx，然后 xxx.call()
这个时候 xxx 是全局变量（全局函数）
所以我们不能给这个函数名字
function(){}.call()
但是 Chrome 报错，语法错误
试出来一种方法可以不报错:
!function(){}.call() (我们不在乎这个匿名函数的返回值，所以加个 ! 取反没关系)
(function(){}).call() 方方不推荐
xxx
(function(){}).call() 报错
frank192837192463981273912873098127912378.call() 不推荐

如何使用闭包

立即执行函数使得 person 无法被外部访问
闭包使得匿名函数可以操作 person
window.frankGrowUp 保存了匿名函数的地址
任何地方都可以使用 window.frankGrowUp
=> 任何地方都可以使用 window.frankGrowUp 操作 person，但是不能直接访问 person

箭头函数没有 this

箭头函数内外 this 不变，

!function() {
  var view = document.querySelector('#siteTopNavBar')
  var controller = {
    view: null,
    init: function(view) {
      this.view = view
      this.bindEvents()
    },
    bindEvents: function() {
      this.userDoScroll()
      window.addEventListener('scroll',()=>{
        this.userDoScroll()
      })// 箭头函数没有this，自动引用外层的this
      
      // 注意this指向，下面这样写this就会变成指向window
      //window.addEventListener('scroll', this.userDoScroll) // 等于下面
      //window.onscroll = function(){...}
      
      //或者使用 bind 绑定this 
      // window.addEventListener('scroll',this.userDoScroll.bind(this))
    },
    userDoScroll: function(){
      if (window.scrollY !== 0) {
        this.active()
      } else {
        this.deactive()
      }
      //console.log(this)
    },
    active: function(){
      this.view.classList.add('sticky')
      console.log(this)
    },
    deactive: function(){
      this.view.classList.remove('sticky')
    }
  }

  controller.init(view)
}.call()

MVC

wiki

MVC模式（Model–view–controller）是软件工程中的一种软件架构模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。
MVC模式的目的是实现一种动态的程式设计，使后续对程序的修改和扩展简化，并且使程序某一部分的重复利用成为可能。
除此之外，此模式通过对复杂度的简化，使程序结构更加直观。软件系统通过对自身基本部分分离的同时也赋予了各个基本部分应有的功能。