2.SMD(同步模块模式)

前端模块的进化史

作为刚入门的前端开发人员，并不了解曾经的前端是如何进行开发的，更是在脚手架满天飞的现实中，对webpack打包，垫片等存在质疑，为什么打包成一个bundle.js就是合理的呢？import ('')与import '' 的区别在哪里？webpack是如何实现的？browersiry

阶段一:全局函数模式

function a() {}
function b() {} 
function c() {} 
function ...

• 开发人员在全局环境中定义变量多个函数，造成namespace污染，很容易命名冲突

阶段二:单例封装模式

let obj = { 
  msg2 : 'module2',
  foo() { 
    console.log('xxxx)
  }
}

• 减少了global的变量数量
• 本质还是对象，所有属性都是公开的，封装性差

阶段三 : 匿名闭包： IIFE模式

var module = (function(){
  var a = 'name'
  return { 
    return a 
  }
}())

阶段四 : 依赖引入

var module = (function($){
  var Dom = { 
    a : $('#a')
  }
  return Dom
}(jQuery))

SMD(Synchronous Module Definition)

曾经的前端人员似乎有这样的困惑

// A工程师(创建导航)
var createNav = function() { 
  ...
  // B工程师(给导航添加引导图片)
  ...
  // C工程师(对导航增加事件处理)

}

首先要吐槽的是 : 
- 一个导航分三个人做，人员分配极其不科学
- 如果A永远的停留在创建导航过程，后面的人是不是要排队

为此，需要模块化的开发，即接口

``html