前端開發的模塊化和組件化的定義，以及二者的關係？

模塊化中的模塊通常指的是 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...
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。