前端开发的模块化和组件化的定义，以及二者的关系？

模块化中的模块通常指的是 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>

做者：Jasin Yip
连接：http://www.zhihu.com/question...
来源：知乎
著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。