作者：Jasin Yip
链接：http://www.zhihu.com/question…
泉源：知乎

模块化中的模块平常指的是 Javascript 模块，比方一个用来花样化时候的模块。

组件则包含了 template、style 和 script，而它的 Script 能够由种种模块构成。比方一个显现时候的组件会调用上面的谁人花样化时候的模块。

画的一张图完美地诠释了它们之间的关联：

组件化就是做一个知乎，把导航栏拆成一个组件，一个一个回复地区拆成一个组件，编辑区是一个组件，页脚是一个组件，等等。。你能够恣意拆分。一个组件包含了html、css、js代码，能够简朴理解为页面的一块。

模块化就是做一个知乎的编辑区组件，假定要有时候花样化、图片花样处置惩罚、视频花样处置惩罚、代码花样处置惩罚，如许很多个js功用。那末你固然能够在HTML内里引入多个JS script，如今更盛行更好的体式格局，是采纳引入的体式格局。

比方在一个编辑区组件内里，引入他人写好的时候花样化和图片花样处置惩罚的js代码：
<style>
…
</style>

<template>
…
</template>

<script>

var format = require(‘../lib/format’) // local import
var img = require(‘lib-img’) // npm import

/**

• es6

• import format from ‘../lib/format’

• import img from ‘lib-img’
  */

/**

• your code here
  */

format(new Date())
img.getnewurl(‘http://xxxx.jpg‘)
</script>